/* ===================== SELF-HOSTED FONTS =====================
Replaces EIGHT @font-face blocks that pointed at hardcoded fonts.gstatic.com/s/ptsans/v8/
URLs - a pinned decade-old CDN path - plus the two fonts.googleapis.com .
Browsers synthesize an oblique for these; font-synthesis:style is on by default. CPModern
and HMModern both made this same call. Add the faces back if the slant ever looks wrong.
(.product-summary is font-family:Georgia, so it never wanted PT Sans italic at all.)
- PLAIN Open Sans 400/700/700i entirely - `_Head.cshtml:9` loaded it and NOTHING consumed
it. Zero matches for "Open Sans" outside "Open Sans Condensed" across all seven bundled
stylesheets. That whole request is gone.
- The cyrillic + cyrillic-ext subsets Google now serves. latin + latin-ext only, as CP/HM.
- The `local()` sources. They let a visitor's own differently-versioned PT Sans win over
ours, which is a rendering-consistency risk for no real gain.
6 files, 262 KB on disk, but a typical page fetches only the three latin faces (~109 KB);
latin-ext is requested solely if a glyph in its range appears.
font-display:swap so text paints immediately in Tahoma and reflows when the face lands.
NOTE: PT Sans came from Google's CURRENT v18, not the v8 that was pinned here. Metrics are
effectively unchanged, but this is why line breaks may differ a hair from the old build. */
@font-face{font-family:'PT Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ptsans-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'PT Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ptsans-400-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'PT Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/ptsans-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'PT Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/ptsans-700-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* Open Sans Condensed 700 = --disp. Files COPIED FROM CPModern/fonts - byte-identical, same
two faces, so keep them in sync if either skin ever re-downloads. 700 is the only weight
BJ uses; there is no Condensed 400 anywhere in the bundle. */
@font-face{font-family:'Open Sans Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/opensanscond-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Open Sans Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/opensanscond-700-ext.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* ===== BJModern design tokens =====
Token NAMES deliberately mirror CPModern/HMModern so component CSS ports across the
three skins mechanically - only the values differ. BJ's identity is deep blue + the
bright cyan #00a4ff already used for the content/footer card borders and glow.
Nothing consumes these yet; adding them changes no rendering. */
:root{
--b:#00a4ff; /* signature cyan: accents, active state, card borders + glow */
--bd:#0086d6; /* darker cyan for hover */
/* BUTTON FILLS ARE A SEPARATE PAIR ON PURPOSE - do not collapse them back into --b/--bd.
--b was picked as the #wrapper / #footer border-and-glow colour, and at that lightness
white text on it is only ~2.7:1, well under the 4.5:1 needed for normal text (CPModern's
red is 4.8:1, HMModern's orange 3.5:1 - BJ was the worst of the three). These two are
dark enough to carry white text while staying in the same cyan-blue family, so the card
borders keep the signature colour and the controls stay readable. */
--btn:#0079c2; /* button fill - white text 4.65:1 */
--btnd:#00639f; /* button hover - white text 6.3:1 */
--gold:#ffc600; /* secondary accent: badges, highlights (already in the skin) */
--goldd:#e0a800;
--ink:#061885; /* BJ deep blue - structural dark: nav bars, footer, headings */
--navy:#000080; /* skininfo Background Color */
--blue:#0000dd; /* skininfo Primary Color */
--util:#03104f; /* utility bar bg (darkest blue band) */
--nav:#0a2099; /* main header row bg (mid blue band) */
--menubar:#0000dd; /* menu/nav bar bg */
--slate:#4776bd; /* existing mid slate-blue: .prodHeader rule, stock text */
--bandsoft:#a8b8e8; /* muted light text on blue chrome */
--bandline:#2a3a8b; /* dividers on blue chrome */
--soft:#5b678a; /* muted blue-grey text */
--line:#d7dbe6; /* light borders */
--band:#eaf4ff; /* light cyan-tint panels / zebra */
--hover:#f2f9ff; /* subtle hover background */
--sku-bg:#dbe7ff;--sku-bd:#a9c3ee; /* SKU chip: light blue */
--rad:6px;
/* CONFIRMED by the 2026-07-30 font audit - no longer provisional. Both families are
self-hosted from ../fonts via the 6 @font-face blocks above: PT Sans 400/700 for body,
Open Sans Condensed 700 for display (h1-h3, .group-header*, buttons, .cph/.bjh chrome).
Tahoma is the fallback in both, so it is what paints during font-display:swap. */
--disp:'Open Sans Condensed',Tahoma,sans-serif;
--body:'PT Sans',Tahoma,Verdana,sans-serif;
}
body{margin:0;text-align:center;background-color:#fff;background-repeat:repeat-y;font-size:100%;font-family:'PT Sans',Tahoma, Verdana, sans-serif;overflow:-moz-scrollbars-vertical;}
table{font-size:13px !important;font-family:'PT Sans',Arial, Tahoma, sans-serif;border:none;}
table input{font-size:1em;}
table select{font-size:1em;}
form{margin:0;padding:0;}
iframe{max-width:100%;}
div {box-sizing:border-box;}
/* Primary buttons - flat cyan. font-family is REQUIRED: form controls do NOT inherit it,
so without this they fall back to the browser default (Arial) while the rest of the page
renders in PT Sans. Same latent bug CPModern and HMModern both had. */
/* a.redbutton WAS MISSING FROM THIS GROUP - that was a real gap, not a style choice. It is
the "Click Here to View 3D Model" / "View Fullscreen" CTA emitted by the shared variant-table
packages, and BJ styled it ONLY inside the phone tier, so on desktop it rendered as bare
navy body text with no button at all. The phone tier's padding rule already listed it,
which is what gave the omission away. CPModern has it in this group; HMModern shares the
same gap and is worth checking if that skin is revisited. */
/* FOUR DECLARATIONS WERE MISSING vs CPModern/HMModern - added below, most important first:
1. display:inline-block. THIS WAS THE BUG. Three of the six selectors are elements
(.signin-text a:link, a.redbutton, a.choose-payment-method-button) and an inline box
IGNORES vertical padding when sizing its line box - the 8px top/bottom padding painted
background over the lines above and below instead of making the button taller, and
box-sizing/text-align/width had nothing to act on. Both other skins have it; BJ did not.
2. margin. CP uses 3px left/right/top, HM `3px 3px 0 3px`. With none, adjacent buttons butt
straight into each other and into neighbouring text.
3. text-shadow. HM carries the same value. It matters MORE here than on HM's orange because
white on this cyan is the lowest-contrast pairing of the three skins - see the token note.
4. box-shadow:none + -webkit-font-smoothing, both copied from HM. The box-shadow reset is
defensive (nothing in BJ's base.css targets buttons today) but keeps the three skins
identical so a fix in one ports to the others. */
button, input[type="submit"], input[type="button"], .signin-text a:link, a.redbutton, a.choose-payment-method-button {box-sizing:border-box;display:inline-block;padding:8px 16px;margin:3px 3px 0 3px;border:1px solid var(--btnd);border-radius:var(--rad);background:var(--btn);color:#fff;font-family:var(--body);font-weight:700;font-size:14px;line-height:normal;text-align:center;text-decoration:none;text-shadow:0 1px 1px rgba(0,0,0,.3);box-shadow:none;-webkit-font-smoothing:antialiased;cursor:pointer;transition:background .15s ease,border-color .15s ease;}
button:hover, input[type="submit"]:hover, input[type="button"]:hover, .signin-text a:hover, a.redbutton:hover, a.choose-payment-method-button:hover{background:var(--btnd);border-color:var(--btnd);color:#fff;cursor:pointer;}
/* Press feedback - CPModern has this, HMModern does not. Cheap and makes the control feel
responsive on a touch screen where there is no hover state at all. */
button:active, input[type="submit"]:active, input[type="button"]:active, a.redbutton:active, a.choose-payment-method-button:active{transform:translateY(1px);}
/* The :link/:visited pair is not redundant. Plain `a:link` a few lines below is (0,1,1) and
would tie-break past a bare `a.choose-payment-method-button` (0,1,1) on source order,
repainting the label navy. Adding :link makes this (0,2,1), which wins outright.
a.redbutton needs exactly the same treatment for exactly the same reason. */
a.choose-payment-method-button:link, a.choose-payment-method-button:visited, a.redbutton:link, a.redbutton:visited{color:#fff;text-decoration:none;}
button:focus-visible, input[type="submit"]:focus-visible, input[type="button"]:focus-visible, a.redbutton:focus-visible, a.choose-payment-method-button:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
#content input, #content select{font-size:13px;}
img{border:none;max-width:100%;}
a:active, a:link, a:visited{color:#000080;text-decoration:underline;}
a:hover{color:#ff3c00;}
fieldset, form{border:none;margin:0;padding:0;}
/* h1/h2/h3 moved to base.css alongside h4-h6 and the .group-header family, so the whole
heading scale is defined in one place. They were declared here out of order (h3 before h1)
with h2 smaller than h3 - see the note at base.css. */
* html .clear, * html .floatform{height:1%;}
.clear, .floatform{display:block;}
ul.tame, ul.tame li{margin:0;padding:0;display:list-item;list-style:none;font-size:11px;}
ul.tame li{line-height:1.25em;}
/* ul.tameHoriz was the old footer's pipe-separated link row - dead since the .cpf port
replaced that markup. Removed here and in the phone tier. Live BJ still has its own. */
br.cl{clear:both;}
/* WAS `#bjhome ul, #hmhome li{...list-style:disc;font-weight:bold}` - deleted. It made every
list in the home topic bold discs, and because an ID beats a class it would have overridden
`.bjh-group ul{list-style:none}` in the rewritten markup. #hmhome does not exist in this
skin at all. The one surviving piece is the margin reset, kept below without the ID so the
.bjh-* rules can win normally. */
#bjhome ul{margin:0;}
/* The old `#bjhome h2/h3/h4` overrides are GONE. They existed only to compensate for the old
topic nesting group labels inside an prompt; the rewritten topic uses h1 (page
title) / h2 (prompt) / h3 (group label) in the right order, so the base.css scale applies
directly and .bjh-group h3 refines the group labels.
THEY HAD TO GO, not just become redundant: `#bjhome h3` is (1,0,1) and would have beaten
`.bjh-group h3` (0,1,1) outright, forcing every group label back to 22px with a 2px rule. */
#userName{}
input.ppclear{border:0px;-moz-box-shadow: #fff 0px 0px 0px;-webkit-box-shadow: #fff 0px 0px 0px;background:#fff;}
input[type="checkbox"], input[type="radio"]{border: 0px;}
input[type="text"]:hover{border:1px solid #333;-moz-box-shadow: #333 0px 0px 3px;-webkit-box-shadow: #333 0px 0px 3px;}
input[type="label"]{font-weight:bold;}
input[type="text"],textarea,input[type="password"]{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#loginText{margin-left:1em;}
textarea#OrderNotes{width:99% !important;}
/* display:flex + flex-direction:column is the sticky-footer container (the other half is
margin-top:auto on .cpf-clear). min-height:100vh was already here, but on its own it only
painted the background full-height - the footer still sat wherever the content ended.
Its three block children (#wrappertop.cph, #wrapper, footer.cpf) all declare width:100%,
so cross-axis stretch is a no-op on them and #wrapper's margin:0 auto still centres it
under the 1600px cap. Side effect, benign: flex items are their own formatting context,
so #wrapper now contains its floats natively - the .clearfix div inside it already did
that, hence no visual change. The .cph drawer/scrim are position:fixed and unaffected. */
#bg{background:url(../images/12jgbg.webp) var(--util);background-repeat:repeat-x;position:absolute;top:0px;height:auto;min-height:100vh;width:100%;background-size:100%;display:flex;flex-direction:column;}
.clearfix{clear:both;margin-bottom:10px;}
#center{width:900px;margin:auto;padding-top:150px;}
#wrappertop{width:100%;margin:0 auto;padding:0;text-align:center;font-size:12px !important;float:left;clear:both;position:absolute;top:0px;left:0px;z-index:222;}
/* Secondary action - flat gold. Was #ffd818 with a 10px radius and a 3px/3px drop shadow;
`border:solid 2px` had no colour at all, so it painted in currentColor. */
#moreinfo{border-radius:var(--rad);background-color:var(--gold);padding:5px 14px;box-shadow:none;border:1px solid var(--goldd);float:right;transition:background .15s ease;}
#moreinfo:hover{background-color:var(--goldd);}
#moreinfo a:active, #moreinfo a:link, #moreinfo a:visited{color:var(--ink);text-decoration:none;font-weight:700;}
/* content card widened 1200 -> 1600. NOTE: width:75% is the real constraint below a
~2133px viewport (75% of 2133 = 1600), so on a 1920 screen this reads 1440, not 1600. */
/* Content frame. Sits flush under the header (margin-top:0 - the old 120px existed only to
clear the former position:absolute #wrappertop, which the .cph header replaced).
Below 1600px it runs edge to edge, so the side borders and corner radius are OFF - a
rounded, outlined box makes no sense when it touches both screen edges. Above 1600px it
caps at 1600 and becomes a floating card with the page background visible either side;
see the min-width:1601px block near the media queries.
box-sizing:border-box is REQUIRED - this skin has no universal box-sizing rule (bootstrap
only sets it on checkbox/radio), so content-box would make max-width:1600 render 1606
once the 3px side borders come back. */
#wrapper{box-sizing:border-box;width:100%;max-width:1600px;height:auto;margin:0 auto;padding-top:10px;text-align:left;background-color:#FFFFFF;border:3px solid #00A4FF;border-left:0;border-right:0;border-radius:0;box-shadow:none;font-size:1em !important;}
#header{width:100%;text-align:right;margin-bottom:8px;float:left;height:32px;}
/* Was mid-grey with a dashed grey border, which read as an unfinished/placeholder block
rather than a panel. Flat tinted panel to match the rating cards below it. */
#reviews{background-color:var(--band);border:1px solid var(--line);border-radius:var(--rad);padding:12px 14px;}
#google_translate_element{height:30px;overflow:hidden;text-align:center;margin-bottom:5px;padding-right:5px;}
#header a:active, #header a:link, #header a:visited{color:#fff;text-decoration:underline;font-weight:bold;}
#header a:hover{color:#00a4ff;}
#bodyWrapper{padding:0;margin-bottom:10px;margin-left:15px;height:auto;width:780px;Max-width:780px;float:left;border:1px solid #fff;background-color:#fff;}
#leftMenu{width:195px;float:left;clear:left;position:absolute;left:0px;top:172px;}
#leftbar{width:20px;height:100%;position:absolute;top:185px;left:191px;z-index:50;}
#leftWrap{width:190px;float:left;clear:both;}
/* Full width with real padding, rather than the old width:95% + margin:auto, which faked a
gutter by shrinking the box - that gave uneven side space and left the padding fighting
the percentage. box-sizing:border-box keeps 100% + padding from overflowing #wrapper
(this skin has no universal box-sizing rule). */
#content{box-sizing:border-box;width:100%;margin:0;height:auto;padding:16px 20px;background-color:#fff;float:none;clear:left;min-height:600px;}
#icon{float:right;width:500px;margin-bottom:4px;font-weight:bold;}
#icon a:active, #icon a:link, #icon a:visited{color:#fff;text-decoration:underline;}
#icon a:hover{color:#00a4ff;}
/* #footer's own id rules are gone - the footer is now the .cpf band defined further down.
They had to be deleted rather than left to lose the cascade: the element still carries
id="footer", and an id (1,0,0) outranks every .cpf class rule (0,1,0) regardless of
source order, so the white panel and its #444 text would have won over the navy band. */
#breadcrumb{float:left;color:#444;margin-left:15px;}
#miniCart{float:right;}
#ML{font-size:0.85em;}
.MLSettings{float:right;display:inline;margin:0px 2px 2px 0;vertical-align:middle;}
.MLSettings span{padding-left:5px;padding-right:2px;}
.MLSettings select{font-size:1em;}
#breadcrumb a, #miniCart a{color:#000080;}
input.submit{border:1px double #999;border-top-color:#ccc;border-left-color:#ccc;padding:0.1em;margin:0;background-color:#fff;background-image:url(../images/background-form-element.png);color:#333;font-size:1em;font-weight:bold;font-family:'PT Sans',Arial,Verdana,Helvetica,Arial,sans-serif;}
input.submit:active{border:1px double #ccc;border-top-color:#999;border-left-color:#999;}
#logo{position:absolute;top:10px;left:5px;float:left;width:275px;height:100px;background:url(../images/BJLOGO.png) no-repeat center center;margin-right:10px;display:block;z-index:50;}
#logo b{display:none;}
a.wishlist{background:url(../images/icons/homeicons.png) 0px -32px;height:16px;background-repeat:no-repeat;display:block;}
a.cart{background:url(../images/icons/homeicons.png) 0px -16px;height:16px;background-repeat:no-repeat;display:block;}
a.account{background:url(../images/icons/homeicons.png) 0 0;height:16px;background-repeat:no-repeat;display:block;}
a.contact{background:url(../images/icons/homeicons.png) 0px -48px;height:16px;background-repeat:no-repeat;display:block;}
a.wishlist, a.cart, a.faq, a.contact, a.account{padding:0px 15px 0px 20px;}
.navbuttons{float:right;height:16px;padding-top:10px;}
#header u{color:#000;text-decoration:none;}
#login{margin:0;padding:0;float:right;font-size:0.9em;padding-right:15px;padding-top:5px;color:#ffffff;width:405px;text-align:right;}
#login a:active, #login a:link, #login a:visited{color:#fff;text-decoration:underline;}
#login a:hover{color:#00a4ff;}
#horizNav{text-align:left;width:100%;margin:0;clear:left;height:35px;z-index:998;display: flex;justify-content: space-between;align-items: center;}
#social{height:25px;}
#searchlabel{float:left;padding:3px 0em 0px 0.6em;font-weight:inherit;font-size:1.1em !important;vertical-align:middle;height:25px;color:#000;}
.search{float:right;padding:0pt 1em 0px 0px;width:auto;font-weight:inherit;font-size:13px;font-weight:bold;color:#fff;}
.search input[type='text']{width:10em;border:1px solid #A7A6AA;margin-top:6px;}
.search input[type='submit']{background-color:#FFFFFF;background-image:url(../images/background-form-element.png);border-color:#CCCCCC rgb(153, 153, 153) rgb(153, 153, 153) rgb(204, 204, 204);border-style:double;border-width:1px;color:#333333;font-family:'PT Sans',Tahoma,Verdana,Helvetica,Arial,sans-serif;font-weight:bold;margin:0pt;padding:0.1em;font-size:0.71em !important;}
.search_error{color:Red;font-size:smaller;font-style:italic;font-weight:normal;}
.leftNav{padding:5px;margin-bottom:5px;font-size:10px;text-align:left;color:#fff;}
#leftmenu a:active, #leftmenu a:link, #leftmenu a:visited{color:#fff;text-decoration:underline;}
#leftmenu a:hover{color:#fff;}
.navHeader{background:url(../images/nav-header-bg.gif) no-repeat left bottom;width:190px;height:22px;line-height:22px;padding-left:5px;padding-bottom:1px;color:#000;font-weight:bold;font-size:14px;text-align:left;}
.catMark{font-size:0.8em;font-weight:bold;color:#aaa;letter-spacing:-2px;}
/* #footer ul, div#footerWrap and .footerList all belonged to the old footer markup and are
gone with it. #footer ul in particular set color:#444, which on the navy band would have
been ~2:1 - and being id-scoped it would have beaten .cpf-links outright. */
.topList li{font-size:1.2em;font-weight:bold;margin:0 0 0.5em 0;list-style:none;}
#closer{font-size:0.7em;color:#444;margin:1em 0;}
#closer a{color:#444;}
#productTopBox{text-align:right;padding:1.5em 10px 10px 10px;}
#sku{display:block;}
#price{font-weight:bold;font-size:1.5em;display:block;}
.SalePrice{color:#cc0000 !important;}
#description, #quoteBox, #otherinfo{margin:10px;}
/* min-height, not the old fixed `height:1.2em`. At font-size:1.2em the box was exactly one
line tall, so any header that wrapped had its second line spill past the underline. */
.prodHeader{width:99.5%;min-height:1.2em;color:var(--ink);clear:both;font-weight:bold;font-size:1.2em;padding:3px 5px;border-bottom:solid 2px var(--b);}
#quoteBox input, #quoteBox select{font-size:1em;display:block;margin:5px 0;}
#mainImg{margin:0 10px 10px 0;float:left;}
.AddToCartButton, .AddToWishButton, #Quantity{font-size:1em;}
.addToForm{margin-top:1em;}
#shipQuoteLabels{width:10em;height:auto;float:left;font-weight:bold;text-align:right;padding-right:10px;}
#shipQuoteLabels label{display:block;line-height:2em;}
#ShipQuote, #yourQuote{font-weight:bold;line-height:2em;}
#shipQuoteWrapper{height:auto;float:left;}
#navArrows{float:right;}
.topFeature{float:left;width:24.8%;height:auto;text-align:left;}
.topFeatureP{margin:0;padding:0.5em;text-align:left;}
.topFeature p{margin:0;text-align:left;}
.topFeatureP img{margin-bottom:0.5em;}
.topPrice, .topName{font-weight:bold;text-align:left;}
#entitySep{clear:both;margin-top:1em;}
.btmP{clear:left;border-bottom:1px solid #C6C3BA;float:left;width:683px;margin:0.5em 0;padding:0.5em;}
.btmP img{float:left;margin-right:1em;}
.btmP span{display:block;}
.btmName, .btmPrice, .btmSalePrice{font-size:1.1em;font-weight:bold;}
.btmDescription, .topDescription{display:block;padding-bottom:1em !important;}
.btmPrice{}
.btmSalePrice{color:#cc0000;}
.btmInStock, .btmOutStock, .topInStock, .topOutStock{display:inline !important;font-weight:bold;color:#4776BD;}
.btmOutStock, .topOutStock{color:#aaa;}
#entityPageHeader p{margin-top:0;}
#entityPageHeader img{margin:0 1em 0.5em 0;float:right;}
/* Was `width:900px;margin:0 auto` - a hardcoded cap that centred the home content in a 900px
column no matter how wide #wrapper got (it is 100% up to max-width:1600px). That cap was the
real reason the home page did not fill the container; the .bjh-* layout below is fluid.
`margin:0` not `0 auto`: auto side margins do nothing once the element is full width. */
#bjhome{width:100%;margin:0;text-align:left;}
.entityCategory{margin:0 0 1em 0;font-size:1.1em;}
.MediumCell, .LightCell{border:none;}
.error{font-size:1.25em;font-weight:bold;color:#ff0000;line-height:35px;}
.errorLg{color:Red;font-size:12px;font-weight:bold;}
.SBProdName{font-size:.7em;}
.SBCatName{font-size:.8em;font-weight:bold;}
.PBCartFull{font-size:.7em;color:Blue;font-weight:bold;}
.InfoMessage{font-weight:bold;color:#0000ff;}
.InfoMessageBox{width:96%;border:solid 1px black;padding:10px 10px 20px 10px;}
.TopMenuGroup{border:solid 0px #000;background-color:transparent;line-height:35px;}
.MenuGroup{border:solid 1px #000;color:#000000;font-size:0.8em!important;margin:0;background:#F8F8F8 none;}
.MenuGroup td, .MenuGroupHover td, .MenuItemHover td, td.MenuItemHover{color:#4776BD;}
.TopMenuItem, .TopMenuItemHover{color:#000;font-weight:bold;font-size:14px;cursor:hand;cursor:pointer;margin:0;padding:0 1em!important;line-height:35px;vertical-align:middle;background:url(../images/tab-sep4.gif) no-repeat top left;}
.TopMenuItem{background:url(../images/tab-sep4.gif) no-repeat top left;}
.MenuItem, .MenuItemHover, .MenuItem td, .MenuItemHover td{color:#4776BD;border:solid 0px white;cursor:hand;cursor:pointer;margin:0;background:#F8F8F8 none;width:100%!important;}
.MenuItemHover, .MenuItemHover td{background:#DCDFE2 none;}
.ScrollItem{background-color:green;font-size:0.8em;border:solid 0px gray;cursor:default;text-align:center;}
.ScrollItemH{background-color:aqua;color:orange;font-size:0.8em;border:solid 0px gray;cursor:default;text-align:center;}
.ScrollItemA{background-color:Lime;color:yellow;font-size:0.8em;border:solid 0px gray;cursor:default;text-align:center;}
#AjaxShipping{width:99%;border:solid 1px #444;height:100%;float:left;padding:3px;}
#AjaxShipping h4{margin:0 0 0.5em 0;font-weight:bold;font-size:1.1em;}
.AjaxShippingLabel{width:175px !important;float:left;font-weight:bold;clear:left;}
#AjaxShipping input, #AjaxShipping select{font-size:1em;float:left;}
#AjaxShippingCountry, #AjaxShippingState, #AjaxShippingZip, #AjaxShippingEstimate{float:left;clear:left;border-top:solid 1px #eee;width:99%;padding:3px 0;}
#ShipQuote{float:left;margin:0;}
#AjaxShippingCountry{visibility:visible;}
#AjaxShippingState{visibility:visible;}
.OrderOptionsTitle{font-family:'PT Sans',Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:10pt;font-weight:bold;}
.OrderOptionsRowHeader{font-family:'PT Sans',Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:8pt;font-weight:bold;}
.OrderOptionsName{font-family:'PT Sans',Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:8pt;font-weight:normal;}
.OrderOptionsDescription{font-family:'PT Sans',Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:8pt;font-weight:normal;}
.OrderOptionsPrice{font-family:'PT Sans',Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:8pt;}
.dhtmltooltip{border:0;padding:2px;font-size:12px;background-color:lightyellow;filter:progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);}
.CardCodeTooltip{border:0;padding:2px;background-color:#DDD;filter:progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);}
.Kit2dhtmltooltip{border:0;margin-top:20px;padding:2px;font-size:12px;background-color:lightyellow;filter:progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);}
.ShippingAndTaxEstimateAddress{border:solid 1px #aaa;width:100%;}
.ShippingAndTaxEstimateAddress .Header{text-align:center;font-weight:bold;background-color:#ddd;}
.ShippingAndTaxEstimateAddress .Caption{width:30%;text-align:left;vertical-align:top;}
.ShippingAndTaxEstimateAddress .Value{width:70%;text-align:left;vertical-align:top;}
.ShippingAndTaxEstimateAddress .ErrorMessage{width:100%;text-align:center;vertical-align:middle;color:Red;font-weight:bold;}
.ShippingAndTaxEstimator{border:solid 1px #aaa;}
.ShippingAndTaxEstimator .Header{text-align:center;font-weight:bold;background-color:#ddd;}
.ShippingAndTaxEstimator .Caption{font-weight:bold;width:30%;text-align:left;vertical-align:top;}
.ShippingAndTaxEstimator .Value{width:70%;text-align:right;vertical-align:top;}
.WishListWarning{padding-left:10px;padding-bottom:10px;padding-top:10px;font-weight:bold;color:#ff0000;}
.ShippingEstimatorPanel{width:350px;border:dashed 1px gray;padding:5px 5px 5px 5px;}
#KitError{text-align:center;vertical-align:middle;padding:5px 5px 5px 5px;}
#lblKitError{color:Red;}
.StockHint{font-size:11px;}
.StockHint_OutOfStock{color:red;}
.StockHint_InStock{color:blue;}
.StockHint_Indented{text-indent:10px;font-size:11px;}
.StockHint_Indented_OutOfStock{color:red;}
.StockHint_Indented_InStock{color:blue;}
.featuredProductLinks{color:#000000;font-weight:bold;}
.featuredProductDescription{padding-top:10px;font-weight:normal;}
.featuredProductPrice{padding-top:10px;padding-bottom:10px;font-weight:normal;}
.featuredTeaser{color:#000000;font-weight:bold;}
.CommentHelpfulText{font-family:'PT Sans',Arial,Helvetica;color:#009999;}
.CommentHelpfulYes{font-family:vArial,Helvetica;color:#006600;}
.CommentHelpfulNo{font-family:'PT Sans',Arial,Helvetica;color:#006600;}
.CommentCell{background-color:#FFFFFF;}
.RatingCommentText{color:#000000;}
.CommentAuthor{color:#000000;}
.CheckoutEmailGiftCardHeader{background-color:#cccccc;color:#000000;}
.CheckOutTermsBorder{border-style:dashed;border-width:1px;border-color:#000000;}
.AffiliateHeaderTd{font-size:smaller;font-weight:bold;color:#ffffff;background-color:#CCCCCC;padding:3px;}
.AffiliateTextCell{background-color:#DDDDDD;color:#000000;padding:3px;}
.AffiliateLinks, .AffiliateLinks a:link, .AffiliateLinks a:active, .AffiliateLinks a:visited{color:#000000;}
.AffiliateLinks a:hover{color:#4776BD;}
.AffiliateForgotPasswordText{color:#000000;}
.AffiliateForgotPasswordText span{color:#000000;font-weight:bold;}
.MultiShippingAddressHeaderLeft{color:#000000;background-color:#dddddd;}
.MultiShippingAddressHeaderRight{color:#000000;background-color:#dddddd;}
.RecentCommentsHeader{background-color:#CCCCCC;color:#000000;font-weight:bold;text-align:center;height:25px;}
.RecentCommentsHeaderBorder{background-color:#FFFFFF;}
.RecentCommentsFooter{background-color:#CCCCCC;}
.RecentCommentsBorder{background-color:#CCCCCC;}
.RecentCommentsCell{background-color:#FFFFFF;color:#000000;text-align:center;}
.pnlRecentCommentSort{background-color:#FFFFCC;}
.RecentCommentSortText{color:#FF0000;}
.RecentCommentReSortText{color:#000000;font-weight:bold;}
.RecentCommentIsolateHeader{background-color:#009999;}
.RecentCommentIsolateHeaderText{color:#FFFFFF;text-align:center;font-weight:bold;}
.RecentCommentIsolateCell{background-color:#FFFFFF;color:#000000;}
.RecentCommentsPagingTop{background-color:#ffffff;color:#000000;}
.rateitBG{background-color:#336699;margin:0px;}
.rateittable{background-color:#336699;}
.rateitlabel{font-family:'PT Sans',Arial,helvetica;font-weight:bold;color:#ffffff;}
.rateitproductname{background-color:#FFFFCC;}
.rateitbox{background-color:#FFFFFF;}
.rateitddl{font-size:10px;}
.rateittext{font-size:12px;}
#pagetabs{width:100%;}
#pagetabs a{background:white url(../images/tab_out.gif) top left repeat-x;background-color:#DDDDDD;border-left:solid 1px black;border-top:solid 1px black;border-right:solid 1px black;color:#696969;padding:5px 5px 0px 5px;position:relative;margin-right:3px;text-decoration:none;vertical-align:middle;}
#pagetabs a:hover{text-decoration:underline;color:#ffffff;background:white url(../images/tab_over.gif) top left repeat-x;}
#pagetabs a.activetab{padding:5px 5px 1px 5px;position:relative;top:1px;color:#ffffff;background-image:url(../images/tab_over.gif);border-bottom-color:white;}
#pagetabs a.activetab:hover{text-decoration:none;}
#tabcontent{border:solid 1px gray;margin:0px;padding-top:0px;padding-bottom:10px;width:100%;}
#tabcontent div.hiddenTab{display:none;}
#tabcontent div.selectedTab{display:block;}
.addressdatalist{border:1px solid rgb(90, 90, 90);width:100%;border-collapse:collapse;margin-left:2px;padding:0px;}
.addaddresstbl{border:1px solid rgb(90, 90, 90);width:100%;border-collapse:collapse;margin-left:2px;padding:0px;}
.addressbuttonbg{background-color:#666;text-align:center;height:30px;}
.addressEdittbl{border:solid 1px rgb(90, 90, 90);margin:5px 0px 5px 0px;}
.addressCardPanel{border:solid 1px rgb(90, 90, 90);}
.addresseditctrl{padding:10px 0px 10px 10px;}
.addressaddctrl{padding:10px 0px 10px 10px;}
.addressfooter{padding:5px 0px 5px 10px;margin-top:10px;background-color:whitesmoke;border:solid 1px rgb(90, 90, 90);}
.addressImagebuttons{width:70px;padding-right:50px;vertical-align:top;}
.addressPaymentMethodtbl{background-color:#cccccc;width:100%}
.addressLabel{padding-right:10px;}
.shippingMethodErrorMessage{font-weight:bold;color:#ff0000;}
.shopping_cart{color:#000000;font-size:8pt;width:100%;border:solid 1px #444444;padding-top:5px;padding-bottom:5px;padding-left:5px;padding-right:5px}
#divMiniCart{background-color:White;z-index:999;}
.miniCartCollapseHeaderPanel{text-align:right;padding-bottom:2px;width:300px;font-size:8pt;}
.miniCartCollapseBody{width:300px;font-size:8pt;height:0px;overflow:hidden;}
.mini_cart{color:#000000;font-size:10px;width:100%;border:solid 1px #444444;}
.mini_cart .cart_header{}
.mini_cart .cart_header td{color:#FFFFFF;background:#699EDC url(../images/nav-bg.gif) repeat;padding:3px 3px 3px 3px;}
.mini_cart .cart_items{padding-top:5px;padding-bottom:5px;padding-left:5px;padding-right:5px}
a.Checkout_Minicart{color:Blue;font-weight:bold;}
.minicart_minimumQty{color:#ff0000;font-style:italic;}
.minicartimg img{width:75px;height:75px;}
#divMiniCart input[type='text']{border:1px solid #A7A6AA;}
.kit_table{width:770px;}
.kit_table .kit_column_content{width:500px;}
.kit_table .kit_column_sidebar{padding-left:10px;width:240px;}
.kit_groups{width:100%;}
.kit_sidebar{text-align:center;vertical-align:middle;z-index:99;width:190px;background-color:#fff;}
.kit_sidebar_content{border-left:solid 1px #ccc;border-right:solid 1px #ccc;border-bottom:solid 1px #ccc;}
.kit_sidebar .kit_sidebar_header{vertical-align:middle;padding-top:5px;padding-bottom:5px;background:transparent url(../images/nav-header-bg2.gif) no-repeat scroll left bottom;border-style:none;width:240px;}
.kit_sidebar_header{text-align:left;padding-left:10px;}
.kit_sidebar .kit_addToCart{padding-top:10px;padding-bottom:10px;}
.kit_sidebar .kit_addToCart .kit_priceDisplay{text-align:left;vertical-align:middle;padding-left:10px;padding-bottom:10px;}
.kit_sidebar .kit_addToCart .kit_priceDisplay .kit_regBasePrice{text-decoration:line-through;}
.kit_sidebar .kit_selectedItems{border-top:solid 1px #eee;text-align:left;vertical-align:middle;}
.kit_groups input[type='text']{border:1px solid #A7A6AA;}
.kit_groups textarea{border:1px solid #A7A6AA;}
.kit_groups .kit_group{margin-bottom:10px;}
.kit_groups .kit_groupName{background-color:#efefef;padding:5px 10px 5px 10px;border:solid 1px #ccc;cursor:hand;cursor:pointer;}
.kit_groups .kit_groupDescription{display:block;overflow:hidden;padding-top:5px;padding-bottom:5px;}
.kit_groups .kit_groupContent{border-left:solid 1px #ccc;border-right:solid 1px #ccc;border-bottom:solid 1px #ccc;padding-left:10px;padding-top:15px;padding-bottom:20px;text-align:left;vertical-align:middle;}
.kit_groups .kit_groupContent .kit_items_table{width:450px;border:dashed 1px #ccc;}
.kit_groups .kit_groupContent .kit_line_item{border-style:none;}
.kit_disabled_item{text-decoration:line-through;}
.kit_group_image{float:left;margin-right:5px;margin-left:5px;}
.kit_kititemImage_hoverPanel{background-color:White;border:solid 1px #ccc;word-wrap:break-word;}
.kit_groupitem_image{padding-left:25px;}
.kit_groupItem_nameLabel{cursor:hand;cursor:pointer;}
.template{border:solid 1px #ddd;}
.template_header{background-color:#ddd;border:dashed 1px #ddd;padding:5px 5px 5px 5px;}
.template_header_settings,
.template_header_settings a,
.template_header_settings a:active,
.template_header_settings a:visited,
.template_header_settings a:link{cursor:hand;cursor:pointer;text-decoration:none !important;font-size:12px;}
.template_header_settings a:hover{color:#ffffff !important;}
.template_header_edit_options{border:solid 1px #919C9D;background-color:#fff;}
.template_header_edit_options ul,
.template_header_edit_options li{margin-left:10px;margin-right:10px;padding:0;display:list-item;list-style:none;line-height:1.25em;}
.behavior_panel{border-style:none;}
.behavior_panel .behavior_left{width:10%;background-color:#ddd;}
.behavior_panel .behavior_option{width:80%;background-color:#fff;padding:5px 5px 5px 5px;}
#topnavbar{margin:0;margin-left:300px;padding:0;line-height:33px;height:35px;float:left;}
#topnavbar li{list-style:none;float:left;font-size:16px;font-weight:bold;color:#00a4ff;}
#topnavbar li a{display:block;padding-left:8px;padding-right:18px;color:#fff;text-decoration:none;}
#topnavbar li ul{display:none;width:auto;background-color:#69f;}
#topnavbar li:hover ul{display:block;position:absolute;margin:0;padding:0;}
#topnavbar li:hover li{float:none;}
#topnavbar li:hover li a{background-color:#69f;font-size:11px;border-bottom:1px solid #fff;color:#000;}
#topnavbar li li a:hover{background-color:#8db3ff;}
/* ===== HOME PAGE (topic HomeTopIntro_bj) =====
REPLACES 14 rules: the .JC/.JG/.JE/.JF pumps.jpg sprite family (4 base + 4 :hover + 4 `a`,
all hardcoded 212x140) and .listone/.listtwo (fixed 198px columns inside a layout ).
Everything here is fluid - nothing on this page carries a pixel width any more.
The sprite images/pumps.jpg (848x280, 4 pumps over a normal/hover row pair) is now UNUSED by
BJModern. Do not delete the file: the live BJ skin still renders this same topic row and its
own style.css still points at it. */
/* .bjh-masthead removed along with the bjbanner.jpg image and the h1 (user, 2026-07-29).
Since the topic row is shared, images/bjbanner.jpg goes unreferenced on live BJ's home page
too once this is pasted. Leaving the file on disk - it is not ours to clean up here. */
/* Same bar treatment as .group-header / .headercat h1 (base.css) - navy panel, white condensed,
gold accent. Sized to 26px like those rather than the h2 scale's 24px so all the bars on the
site read as one family; with the h1 removed this is the home page's top-level heading.
Beats the global h2 rule on specificity: (0,1,0) class vs (0,0,1) element. */
.bjh-prompt{display:block;font-size:26px;line-height:30px;padding:10px;margin:0 0 16px;color:#fff;background:var(--ink);text-align:left;border-bottom:solid 2px var(--gold);font-family:var(--disp);font-weight:700;}
/* The four majors, 25% each. Explicit 4-column grid rather than auto-fill: this row is the
priority flow and must stay four across on desktop regardless of container width. */
.bjh-pumps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 28px;}
/* :link/:visited for the same reason as .bjh-cta-btn below - a bare `.bjh-pump` (0,1,0) loses
to `a:link` (0,1,1) at style.css:145, and the inherited text-decoration:underline would
propagate down into the .bjh-pump-name label. */
a.bjh-pump, a.bjh-pump:link, a.bjh-pump:visited{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;color:var(--ink);text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease;}
/* aspect-ratio + the width/height attributes on the cells to the tallest in
the row, but that alone is not enough: the is a column flex box, so when one caption
wraps to two lines the extra height on the OTHER three pooled as dead white space BELOW
their navy bar instead of growing it, leaving four bars of two different depths.
flex:1 0 auto makes the caption absorb that leftover height, so every bar in a row ends the
same depth whatever its own line count. flex:0 0 auto on the img above stops the picture
being squeezed to pay for it - without it the image is a shrinkable flex item.
display:flex + centring keeps the text optically centred in a bar that is now taller than
its own text; text-align:center still does the work for the wrapped lines themselves.
Rows equalise independently, which matters at <=767px where this is a 2x2: the two tiles in
each row match each other, not all four. Forcing all four would need a fixed min-height. */
.bjh-pump-name{display:flex;flex:1 0 auto;align-items:center;justify-content:center;padding:10px 8px;text-align:center;font-family:var(--disp);font-weight:700;font-size:17px;line-height:22px;color:#fff;background:var(--ink);}
.bjh-pump:hover{border-color:var(--b);box-shadow:0 2px 8px rgba(0,0,0,.12);}
.bjh-pump:hover .bjh-pump-name{background:var(--btn);}
.bjh-pump:focus-visible{outline:2px solid var(--b);outline-offset:2px;}
/* ONE ROW OF FOUR COLUMN STACKS. The grid items are .bjh-col wrappers, NOT the groups
themselves - that is the whole point of this shape.
Two earlier attempts and why they failed, so neither gets retried:
1. `column-count:4` (CSS multicol) rendered as THREE columns. column-count sets a MAXIMUM,
not a count: the browser then BALANCES, choosing a column height that looks even, and
with these groups ("Parts" alone is ~27% of the content) everything fitted into three
and the fourth came out empty.
2. A grid of the eight groups as individual cells gave four columns but TWO ROWS, and a
grid row is as tall as its tallest cell - so the short groups beside "Parts" sat above
a large hole.
With .bjh-col wrappers there is exactly one row, each column is an independent vertical
stack, and a tall group only affects its own column. Which group sits in which stack is
decided in the topic markup, not here - see the comment above .bjh-groups there. */
.bjh-groups{display:grid;grid-template-columns:repeat(4,1fr);align-items:start;gap:22px 28px;margin:0 0 28px;}
/* align-items:start on the parent keeps each stack at its natural height instead of
stretching all four to match the tallest. The gap here spaces groups WITHIN a column. */
.bjh-col{display:flex;flex-direction:column;gap:22px;}
/* Margins are gone - both gaps above own the spacing now. The old `break-inside:avoid` +
`display:inline-block;width:100%` trio was the multicol anti-split guard: unnecessary here,
and inline-block would actively fight the layout. */
.bjh-group{margin:0;}
.bjh-group h3{margin:0 0 8px;padding-bottom:6px;font-size:17px;line-height:22px;border-bottom:2px solid var(--b);}
.bjh-group ul{margin:0;padding:0;list-style:none;}
.bjh-group li{margin:0;}
.bjh-group li a{display:block;padding:5px 2px;font-size:14px;line-height:19px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);transition:color .12s ease,background-color .12s ease;}
.bjh-group li a:hover{color:var(--btn);background:var(--hover);}
/* Two large CTA buttons, replacing the old .bjh-promo photo + image-link block.
auto-fit rather than a fixed 2: with only two children this collapses to one full-width
button on a narrow screen without needing a media query. */
.bjh-cta{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:0 0 28px;}
/* SPECIFICITY: this MUST be `a.bjh-cta-btn:link/:visited`, not a bare `.bjh-cta-btn`.
style.css:145 `a:active, a:link, a:visited{color:#000080;text-decoration:underline}` is
(0,1,1) and beats a lone class (0,1,0) whatever the source order - the buttons would render
navy and underlined. The :link/:visited form is (0,2,1) and wins. Same trap that hit the
.cph nav phone in the header. */
/* NO text-transform:uppercase here, deliberately - the labels are sentence-case invitations
with their own punctuation ("Need Tech Help? Click Here!"), and shouting them in caps
fights that. Size dropped 26->24px for the same reason: these are phrases, not one-word
labels, and 24px still reads as a large button. line-height:1.1 + the flex centering mean
a label that wraps to two lines stays centred in the box. */
a.bjh-cta-btn, a.bjh-cta-btn:link, a.bjh-cta-btn:visited{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:78px;padding:18px 24px;background:var(--btn);border:1px solid var(--btnd);border-radius:var(--rad);color:#fff;font-family:var(--disp);font-weight:700;font-size:24px;line-height:1.1;letter-spacing:.01em;text-align:center;text-decoration:none;text-shadow:0 1px 1px rgba(0,0,0,.3);-webkit-font-smoothing:antialiased;transition:background .15s ease,transform .05s ease;}
a.bjh-cta-btn:hover{background:var(--btnd);color:#fff;text-decoration:none;}
a.bjh-cta-btn:active{transform:translateY(1px);}
a.bjh-cta-btn:focus-visible{outline:2px solid var(--b);outline-offset:2px;}
.CallToOrder{ font-weight:bold;}
/* Product-page tab strip. Was a 15-rule sprite: every state was a background-position into
`/../images/blue.png`, and the .s/.l/.xl classes existed ONLY to set the pixel width that
matched each sprite slice (81/174/248px). Flat tokens make all of that unnecessary - tabs
size to their own label via padding, so the three width classes are gone and the sprite
request with them. The classes may still be in the markup; they now simply do nothing.
The sprite path was also written `/../images/blue.png` - a root-relative path with a `/../`
that browsers normalise away to `/images/blue.png`. It resolved by accident, not design. */
ul.tabs{list-style:none;margin:0 !important;padding:0;display:flex;flex-wrap:wrap;gap:2px;height:auto;border-bottom:2px solid var(--ink);}
ul.tabs li{float:none;text-indent:0;padding:0;margin:0 !important;list-style-image:none !important;}
ul.tabs a{display:block;width:auto;padding:0 16px;height:32px;line-height:32px;font-size:13px;font-weight:700;text-align:center;text-decoration:none;color:var(--ink);background:var(--band);border:1px solid var(--line);border-bottom:0;border-radius:var(--rad) var(--rad) 0 0;position:relative;top:1px;transition:background .15s ease,color .15s ease;}
ul.tabs a:active{outline:none;}
ul.tabs a:hover{background:var(--hover);color:var(--bd);}
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a{background:var(--ink);border-color:var(--ink);color:#fff;cursor:default;}
.signin-text a:visited{color:#ffffff;border: 1px solid #000000;}
.signin-text a:hover{color:#000000;border: 1px solid #000000;}
#ctl00_PageContent_ctrlPaymentMethod_rbPAYPALEXPRESS{position:relative;bottom:10px;}
.payment-form label{position:relative;bottom:10px;margin-right:10px;}
.form-group label{position:static;}
.payment-form .form-group{height:27px;}
.payment-form .form-group input[type="radio"]{position: relative;height:27px;top: 50%;transform: translateY(-50%);}
.payment-form .form-group label{position: relative;top: 50%;height:27px;transform: translateY(-80%);}
.payment-form img {display:inline-block;}
.payment-form div:nth-of-type(odd){display:inline-block;margin-right:10px;}
.payment-form div:nth-of-type(even){height:0px;margin:0px;}
.quantity-label{font-size:11px;}
/* DO NOT make this a flex row. It is shared by the category tiles AND the product detail
page: flexing it put the button beside the quantity field on category pages and stretched
it to full width on the product page. Layout stays as the markup emits it; only the top
margin is set here, to match .moreinfo2 so a tile has one rhythm.
NOTE: two more identical `.add-to-cart-group{margin-bottom:0}` rules appear later in this
file. Harmless duplicates - collect them in the dead-CSS sweep. */
.add-to-cart-group{margin:10px 0 0;}
/* Separates the quantity line from the button when the tile is too narrow to keep them on
one line (category pages). Deliberately margin-BOTTOM on the quantity block, not
margin-top on the button: an inline-block's baseline is unaffected by its bottom margin,
so where the two DO share a line (product page) the button does not shift down - the line
box just gains 8px underneath. margin-top on the button would misalign that case. */
.add-to-cart-group .add-to-cart-quantity{display:inline-block;margin-bottom:8px;}
.add-to-cart-group .add-to-cart,.add-to-cart-group .add-to-wishlist{min-height:34px;}
.signin-text{border-bottom:none;width:auto;line-height:22px;}
.quantity-select{width:auto; display:inline-block;padding:6px;margin-left:5px;}
ul.subcatnav, ul.subcatnav2{margin:0; list-style:none;padding:0;}
/* Category rows. Was a grey-to-white horizontal gradient in five vendor forms plus an IE
`behavior:url(PIE.htc)` polyfill (dead - PIE targeted IE6-9). Now a flat row with a rule
between entries.
display:flex replaces a float dependency: the markup is
.. .
- `font-size` beats the global `table{font-size:13px !important}` at style.css:96. An
!important can only be beaten by another !important, so a plain 14px here would silently
do nothing. (If that global rule is ever dropped to a normal declaration, drop this one
with it.) */
.varpic img{max-width:300px;}
.variant-table{border:2px solid var(--ink) !important;width:100%;font-size:14px !important;}
.variant-table .price.regular-price, .variant-table .price.sale-price, .variant-table .price.level-price, .variant-table .variant-price{display:block;font:inherit;color:inherit;margin:0;}
.variant-table .price.level-price, .variant-table .price.sale-price{color:var(--bd);}
.variant-table .price > span, .variant-table .variant-price > span{font:inherit;color:inherit;display:inline;margin:0;}
/* The packages emit a for screen readers; hidden visually, not with display:none. */
.vt-caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.variant-table > thead > tr > td{background:var(--ink);color:#fff;font-family:var(--disp);font-weight:700;font-size:14px; text-transform:uppercase;letter-spacing:.02em;padding:9px 10px;text-align:center; border:1px solid var(--ink);}
.variant-table > tbody > tr > td{padding:8px 10px;border:1px solid var(--line); vertical-align:middle;}
.variant-table-wide > tbody > tr > td{vertical-align:top;}
/* Zebra and hover are SWAPPED relative to HMModern, deliberately. BJ's --hover (#f2f9ff) is
lighter than its --band (#eaf4ff); using --band for the stripe would make a hovered stripe
row get lighter, i.e. the hover would read as going backwards. Stripe = the lighter token,
hover = the stronger one, so hover always wins visually on both row types. */
.variant-table > tbody > tr.LightCell > td{background:var(--hover);}
.variant-table > tbody > tr:hover > td{background:var(--band);}
.variant-table > tbody > tr > td.varpic{background:#fff;}
/* ===== Reviews (ported from HMModern onto BJ tokens) =====
Stars were three GIFs; they are now inline-SVG data URIs swapped in via `content:` on the
img itself, so no image requests and they stay sharp on hi-dpi. The gold is hardcoded
#e0a800 rather than var(--goldd) because custom properties do not resolve inside a
data: URI - it happens to be the exact value of --goldd, keep the two in sync by hand. */
.total-rating-row{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 16px;box-sizing:border-box;margin:0 0 14px 0;padding:12px 14px;background:var(--band);border:1px solid var(--line);border-radius:var(--rad);}
.total-rating-row:before, .total-rating-row:after{display:none;}
img[class^="ratings-star-"]{width:18px;height:18px;vertical-align:middle;margin:0 1px;}
.rating-stars-wrap img[class^="ratings-star-"]{width:22px;height:22px;}
img[class^="ratings-star-"][class$="-Full"]{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e0a800'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");}
img[class^="ratings-star-"][class$="-Half"]{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='hs'%3E%3Cstop offset='50%25' stop-color='%23e0a800'/%3E%3Cstop offset='50%25' stop-color='%23e0e0e6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23hs)' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");}
img[class^="ratings-star-"][class$="-Empty"]{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e0e0e6'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");}
.rating-stars-wrap{display:flex;align-items:center;gap:8px;}
.ratings-average-wrap{font-weight:700;color:var(--ink);}
.rating-count-wrap{font-size:14px;color:var(--soft);}
/* The comment card and its helpfulness footer are ONE visual card: the card zeroes its bottom
border and radius, the footer supplies them. Keep the two rules adjacent. */
.rating-comment-row{box-sizing:border-box;margin:0;padding:14px;background:#fff;border:1px solid var(--line);border-bottom:0;border-radius:var(--rad) var(--rad) 0 0;}
.rating-author-wrap{font-size:14px;color:var(--soft);margin-bottom:6px;}
.rating-row-author{font-weight:700;color:var(--ink);}
.rating-comment-stars{margin-bottom:8px;}
.rating-comments{color:var(--ink);line-height:1.5;}
.rating-comment-helpfulness-wrap{box-sizing:border-box;margin:0 0 14px 0;padding:10px 14px;background:var(--band);border:1px solid var(--line);border-radius:0 0 var(--rad) var(--rad);font-size:14px;}
/* Outline, not filled: these sit near Add to Cart and must not compete with it. Same
treatment as .moreinfo2. */
.add-rating-button, .change-rating-button{display:inline-block;padding:6px 12px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--rad);font-size:14px;font-weight:700;text-decoration:none;transition:border-color .15s ease, background-color .15s ease;}
.add-rating-button:hover, .change-rating-button:hover{background:var(--hover);border-color:var(--soft);color:var(--b);text-decoration:none;}
.homeimg{}
.homeimg img{position:relative;right:200px;}
.add-to-cart-group{margin-bottom:0px;}
.selected{font-weight:bold;}
.signin-text a:visited{color:#ffffff;}
.quantity-select{width:auto; display:inline-block;padding:6px;margin-left:5px;}
#ctl00_PageContent_ctrlPaymentMethod_rbPAYPALEXPRESS{position:relative;bottom:10px;}
.payment-form label{position:relative;bottom:10px;margin-right:10px;}
.form-group label{position:static;}
.payment-form .form-group{height:27px;}
.payment-form .form-group input[type="radio"]{position: relative;height:27px;top: 50%;transform: translateY(-50%);}
.payment-form .form-group label{position: relative;top: 50%;height:27px;transform: translateY(-80%);}
.payment-form img {display:inline-block;}
.payment-form div:nth-of-type(odd){display:inline-block;margin-right:10px;}
.payment-form div:nth-of-type(even){height:0px;margin:0px;}
.add-to-cart-group{margin-bottom:0px;}
.quantity-select{width:auto; display:inline-block;padding:6px;margin-left:5px;}
.mobilehome{display:none;}
.homebanner3{display:none;}
.mobilenav{display:none;}
/* Featured / related product tiles (structural port from HMModern). Also used by the related
products strip on product pages.
THE CARD MOVED OUT ONE LEVEL: the border/background/radius now live on
.frontpageitemcontainer (the flex item), not .frontpageitem (its child). On the old markup
the child could not fill its parent's height, so cards in a row had ragged bottom edges.
overflow:hidden on the container is what lets the radius clip the image and button. */
.frontpageitem{display:flex;flex-direction:column;justify-content:space-between;float:left;width:100%;padding:0;min-height:275px;}
.frontpageitem .level-price{display:none;}
.frontpageitemcontainer{min-width:164px;max-width:240px;font-size:14px;display:flex;flex-grow:1;margin:5px;border:1px solid var(--line);border-radius:var(--rad);background:#fff;overflow:hidden;box-sizing:border-box;}
.featuredbox{padding:10px 0;width:100%;float:left;display:flex;flex-direction:row;flex-wrap:wrap;align-content:stretch;justify-content:center;align-items:stretch;}
.featuredbox:after{content:'';width:100%;display:inline-block;}
.featuredimage{text-align:center;height:150px;overflow:hidden;}
.featuredimage img{display:inline-block;vertical-align:middle;max-width:150px;}
.verthelper{display:inline-block;height:100%;vertical-align:middle;}
/* width:auto + its own margin, NOT width:100%. The container clips to a radius now, so a
full-bleed button would have its bottom corners cut square by the card edge. */
.featuredbutton{width:auto;margin:0 3px 10px 3px;}
.featuredbutton a{margin:0;display:block;box-sizing:border-box;text-decoration:none;color:#fff;background:var(--btn);padding:0 10px;box-shadow:none;text-shadow:0 1px 1px rgba(0,0,0,.3);font:bold 14px var(--disp);line-height:26px;border:1px solid var(--btnd);transition:background .15s;}
.featuredbutton a:hover{color:#fff;background:var(--btnd);}
.featuredbutton a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
/* min-height, NOT the old fixed `height:40px;overflow:hidden` - that was CLIPPING any product
name that ran to a third line. min-height keeps the cards aligned on short names while
letting long ones grow. */
.featuredProductLinks{color:#000000;font-weight:bold;line-height:17px;min-height:34px;padding-left:10px;padding-right:10px;}
.featuredProductDescription{padding-top:10px;font-weight:normal;}
.featuredProductPrice{padding-top:10px;padding-bottom:10px;font-weight:normal;}
.truncate{margin:10px 0 10px 0; overflow:hidden;text-align:left;}
.summaryline{display:inline-block;float:left;}
.orderstatus {font-size:14px;}
.related-products{clear:both;}
.kit-add-to-cart-form{display:flex;min-width:600px;}
.kitbox{flex-grow:1;}
/* Place Order fills its checkout column. BJ had NO rule for this at all - CPModern:67 and
HMModern both carry `.place-order-button{width:100%;line-height:30px}` and BJ was simply
missing it, so the button sat at its natural label width in a full-width column.
The margin reset is BJ-specific and necessary: the primary button rule above sets
`margin:3px 3px 0 3px`, and margins fall OUTSIDE the border box even under
box-sizing:border-box - so width:100% alone would overflow the column by 6px. (CP and HM
have the same latent 6px overflow; theirs just goes unnoticed.) Top margin is kept for
separation from the payment fields above. */
.place-order-button{width:100%;margin-left:0;margin-right:0;line-height:30px;}
.no-shipping-methods-available{color:#444444;font-style: italic;}
.alternative-payment-methods{padding:15px 20px 10px 20px;margin:10px 0; border:1px solid #ccc;width:450px;max-width:100%;text-align:center;}
.alternative-payment-methods .row {text-align:center;}
/* ===== Header (.cph) - framework ported from HMModern, recolored to BJ blue/cyan =====
Class names are IDENTICAL to CPModern/HMModern on purpose so fixes port between skins.
BJ-specific: no socials row (BJ has no social accounts), no logo overhang (the 275x100
BJ logo sits inside the row), and the DRIVES menu carries image tiles - see .cph-tile. */
#wrappertop.cph{width:100%;float:none;height:auto;background:none;text-align:left;font-size:14px;font-family:var(--body);position:static;}
.cph *{box-sizing:border-box;}
.cph a{text-decoration:none;}
.cph-wrap{max-width:1600px;margin:0 auto;padding:0 16px;}
/* row 1 - utility bar */
.cph-util{background:var(--util);color:var(--bandsoft);font-size:13px;}
.cph-util .cph-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;min-height:38px;}
.cph-util-left,.cph-util-right{display:flex;align-items:center;gap:18px;}
.cph-util a{color:var(--bandsoft);transition:color .15s;}
.cph-util a:hover{color:#fff;}
.cph-phone{color:#fff!important;font-weight:700;font-family:var(--disp);letter-spacing:.02em;font-size:15px;display:inline-flex;align-items:center;gap:6px;}
.cph-phone svg{color:var(--b);flex-shrink:0;}
.cph-sep{width:1px;height:14px;background:var(--bandline);display:inline-block;}
/* row 2 - logo / search / account+cart */
.cph-main{background:var(--nav);border-bottom:1px solid rgba(255,255,255,.07);}
.cph-main .cph-wrap{display:flex;align-items:center;gap:22px;min-height:86px;}
.cph-burger{display:none;background:none;border:0;padding:6px;cursor:pointer;color:#fff;}
.cph-burger svg{width:26px;height:26px;display:block;}
#wrappertop.cph #logo{position:relative;top:auto;left:auto;float:none;display:block;width:275px;height:100px;background:url(../images/BJLogo.png) no-repeat left center;background-size:contain;margin:0;z-index:5;flex-shrink:0;}
.cph-search{flex:1;display:flex;max-width:640px;margin:0 auto;}
.cph-search input#searchBox_text{flex:1;min-width:0;width:auto;height:auto;border:2px solid var(--b);border-right:0;border-radius:0;background:#fff;color:var(--ink);padding:11px 16px;font-size:15px;font-family:var(--body);box-shadow:none;}
.cph-search input#searchBox_text:focus{outline:none;}
.cph-search:focus-within{box-shadow:0 0 0 3px rgba(0,164,255,.25);}
#wrappertop.cph #searchBox_button{width:auto;border:0;background:var(--btn);color:#fff!important;font-family:var(--disp);text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:15px;padding:0 22px;border-radius:0;cursor:pointer;text-shadow:none;margin:0;line-height:normal;transition:background .15s;}
#wrappertop.cph #searchBox_button:hover{background:var(--btnd);}
.cph-actions{display:flex;align-items:center;gap:20px;flex-shrink:0;margin-left:auto;}
.cph .cph-act{display:flex;align-items:center;gap:8px;color:var(--band);}
.cph-act svg{width:24px;height:24px;flex-shrink:0;}
.cph-act-lbl{display:flex;flex-direction:column;line-height:1.15;font-size:12px;color:var(--bandsoft);}
.cph-act-lbl b,.cph .cph-act-lbl .cph-signout{font-size:13.5px;color:#fff;font-weight:700;}
.cph .cph-act-lbl .cph-signout:hover{color:#fff;text-decoration:underline;}
.cph-act-lbl #userName{color:var(--bandsoft);font-weight:400;}
.cph .cph-user .cph-act-lbl{flex-direction:row;align-items:center;gap:8px;white-space:nowrap;}
/* .username is emitted BY THE TOKEN, not by our markup - Core/Tokens/Handlers/UserName.cs:44
wraps the customer's name in its own to the account page. Without these
two rules that anchor falls through to the global `a:link{color:#000080}`, i.e. navy and
underlined on the blue header bar. These were the only part of CPModern's logged-in fix
BJModern was missing. */
.cph .cph-act-lbl .username{font-size:13.5px;color:#fff;font-weight:700;}
.cph .cph-act-lbl .username:hover{color:#fff;text-decoration:underline;}
/* Logged out, the UserName token returns string.Empty. Without this the empty span still
contributes the parent's 8px flex gap, pushing "Sign In" off-centre from the icon. */
#userName:empty{display:none;}
.cph-cart{position:relative;}
.cph-cart .cph-act-lbl{font-size:13.5px;color:#fff;font-weight:700;justify-content:center;}
.cph-count{position:absolute;top:-7px;left:15px;background:var(--b);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;}
/* row 3 - primary nav */
.cph-nav{background:var(--menubar);color:#fff;}
.cph-nav .cph-wrap{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:flex-start;gap:10px;row-gap:6px;min-height:46px;}
.cph-menu{display:flex;align-items:stretch;list-style:none;margin:0;padding:0;min-height:46px;}
.cph-menu>li{position:relative;display:flex;align-items:stretch;}
.cph .cph-menu>li>a{display:flex;align-items:center;gap:6px;min-height:46px;padding:0 18px;font-family:var(--disp);text-transform:uppercase;letter-spacing:.04em;font-weight:700;font-size:17px;color:#fff;white-space:nowrap;transition:background .15s,color .15s;}
.cph-car{width:9px;height:9px;transition:transform .2s;flex-shrink:0;}
.cph-menu>li:hover>a,.cph-menu>li.cph-open>a{background:var(--b);color:#fff;}
.cph-menu>li:hover>a .cph-car,.cph-menu>li.cph-open>a .cph-car{transform:rotate(180deg);}
/* MUST stay .cph-prefixed. A bare .cph-nav-phone is specificity (0,1,0) and LOSES to the
global `a:active, a:link, a:visited{color:#000080}` near the top of this file, which is
(0,1,1) - the element selector adds a component that a lone class cannot beat, so source
order never gets a say. That rendered the number navy on the blue nav bar. .cph .cph-nav-phone
is (0,2,0) and wins. Same trap as a.catbutton vs a:link elsewhere in these skins. */
.cph .cph-nav-phone{margin-left:auto;display:inline-flex;align-items:center;gap:8px;color:#fff;font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:.02em;white-space:nowrap;transition:color .15s;}
.cph .cph-nav-phone svg{color:var(--b);flex-shrink:0;}
.cph .cph-nav-phone:hover{color:var(--b);}
/* mega panels */
.cph-mega{position:absolute;top:100%;left:0;z-index:120;background:#fff;color:var(--ink);width:clamp(560px,54vw,900px);max-width:calc(100vw - 24px);border:1px solid var(--line);border-top:3px solid var(--b);border-radius:0 0 10px 10px;box-shadow:0 14px 34px rgba(0,0,0,.18);padding:20px 22px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s,transform .15s,visibility .15s;}
.cph-menu>li:hover .cph-mega,.cph-menu>li.cph-open .cph-mega{opacity:1;visibility:visible;transform:translateY(0);}
.cph-mega-sm{width:clamp(420px,38vw,600px);}
.cph-menu>li:last-child .cph-mega{left:auto;right:0;}
.cph-mega h4{margin:0 0 10px;padding:0 0 6px;font-family:var(--disp);text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--soft);text-align:left;border:0;border-bottom:1px solid var(--line);}
.cph-mega-grid{display:grid;gap:6px 24px;}
.cph-c4{grid-template-columns:repeat(3,1fr);}
.cph-c3{grid-template-columns:repeat(2,1fr);}
.cph-c2{grid-template-columns:repeat(2,1fr);}
.cph .cph-mega-grid a{display:block;padding:5px 0;font-size:13.5px;color:var(--ink);border-bottom:1px solid transparent;transition:color .12s,border-color .12s;}
.cph .cph-mega-grid a:hover{color:var(--b);border-color:var(--line);}
.cph-mega-foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:13px;color:var(--soft);}
.cph .cph-mega-foot a{color:var(--b);font-weight:700;white-space:nowrap;}
/* DRIVES panel splits: tiles on the left, secondary link groups on the right */
.cph-mega-split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:24px;}
/* DRIVES: 2 columns - Berkeley tiles left, American Turbine models right */
.cph-mega-wide{width:clamp(680px,60vw,1000px);}
/* CATEGORIES: less lopsided than the default 1.55fr/1fr. The right column holds
"Throttle / Shifter Cables" inside a 2-across .cph-c2 grid, so it only gets half the
column - at the default ratio that is ~160px and the label wraps. */
.cph-mega-cats{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);}
.cph-mega-col+.cph-mega-col{border-left:1px solid var(--line);padding-left:24px;}
/* Every heading after the first in a column needs clearance from the link list above it.
NOTE: h4+h4 does NOT work here - the headings are separated by their .cph-mega-grid,
so they are never adjacent siblings. :not(:first-child) is what actually matches. */
.cph-mega-col h4:not(:first-child){margin-top:24px;}
/* ===== HIGHLIGHTED menu items (.cph-tile) =====
The 4 major Berkeley drives. Any menu entry can be promoted by wrapping it in this
markup - the emphasis is a CONTENT choice, no CSS edit needed to add or drop one. */
.cph-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.cph .cph-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;border:1px solid var(--line);border-radius:var(--rad);background:#fff;transition:border-color .15s,box-shadow .15s,transform .15s;}
.cph .cph-tile:hover{border-color:var(--b);box-shadow:0 4px 14px rgba(0,164,255,.28);transform:translateY(-2px);}
/* aspect-ratio reserves the box before the image loads, so the panel does not jump (CLS) */
.cph-tile img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;}
.cph-tile b{font-family:var(--disp);text-transform:uppercase;letter-spacing:.04em;font-size:15px;color:var(--ink);line-height:1.1;text-align:center;}
.cph .cph-tile:hover b{color:var(--b);}
/* text-only highlight, for promoting an item that has no image */
.cph .cph-feat{font-weight:700;border-left:3px solid var(--gold);padding-left:9px;}
/* ===== Mobile drawer ===== */
.cph-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;z-index:1000;}
.cph-drawer{position:fixed;top:0;left:0;bottom:0;width:320px;max-width:86vw;background:#fff;transform:translateX(-100%);transition:transform .25s ease;z-index:1001;display:flex;flex-direction:column;box-shadow:2px 0 20px rgba(0,0,0,.25);}
body.cph-drawer-open{overflow:hidden;}
body.cph-drawer-open .cph-drawer{transform:translateX(0);}
body.cph-drawer-open .cph-scrim{opacity:1;visibility:visible;}
.cph-drawer,.cph-scrim{display:none;}
.cph-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--nav);color:#fff;flex-shrink:0;}
.cph-drawer-head b{font-family:var(--disp);text-transform:uppercase;letter-spacing:.08em;font-size:16px;color:#fff;}
.cph-drawer-x{border:0;background:none;color:#fff;font-size:20px;cursor:pointer;line-height:1;padding:4px;}
.cph-drawer-body{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;}
.cph-acc{border-bottom:1px solid var(--line);}
.cph .cph-drawer-home{display:flex;align-items:center;border-bottom:1px solid var(--line);padding:14px 16px;font-family:var(--disp);text-transform:uppercase;letter-spacing:.03em;font-weight:700;font-size:15px;color:var(--ink);}
.cph .cph-drawer-home:hover,.cph .cph-drawer-home:active{background:var(--b);color:#fff;}
.cph-acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;border-radius:0;box-shadow:none;padding:14px 16px;font-family:var(--disp);text-transform:uppercase;letter-spacing:.03em;font-weight:700;font-size:15px;color:var(--ink);cursor:pointer;}
.cph-acc-btn:hover,.cph-acc-btn:active,.cph-acc.cph-open .cph-acc-btn{background:var(--b);color:#fff;box-shadow:none;}
.cph-acc-btn .cph-car{color:var(--soft);}
.cph-acc-btn:hover .cph-car,.cph-acc.cph-open .cph-acc-btn .cph-car{color:#fff;}
.cph-acc.cph-open .cph-acc-btn .cph-car{transform:rotate(180deg);}
.cph-acc-sub{display:none;flex-direction:column;padding:0 16px 12px;}
.cph-acc.cph-open .cph-acc-sub{display:flex;}
.cph .cph-acc-sub a{padding:12px;min-height:44px;display:flex;align-items:center;font-size:15px;color:var(--soft);border-radius:6px;}
.cph .cph-acc-sub a:hover{background:var(--hover);color:var(--b);}
.cph .cph-acc-sub a.cph-feat{border-left:3px solid var(--gold);border-radius:0 6px 6px 0;color:var(--ink);}
/* drives get the same tiles in the drawer, 2-up */
.cph-acc-sub .cph-tiles{margin:4px 0 10px;}
/* sub-group label inside a drawer accordion (e.g. "American Turbine" within Drives) */
.cph-acc-sub-h{display:block;margin:18px 0 4px;padding:0 12px 6px;font-family:var(--disp);text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--soft);border-bottom:1px solid var(--line);}
.cph-drawer-account{display:flex;flex-direction:column;gap:2px;padding:16px;}
.cph .cph-drawer-account a{font-size:15px;color:var(--ink);padding:11px 2px;min-height:44px;display:flex;align-items:center;}
.cph .cph-drawer-account a.cph-drawer-signin{background:var(--btn);color:#fff;justify-content:center;padding:14px;min-height:50px;border-radius:var(--rad);margin-bottom:8px;font-family:var(--disp);text-transform:uppercase;letter-spacing:.05em;font-weight:700;}
.cph .cph-drawer-account a.cph-drawer-phone{font-family:var(--disp);font-size:24px;font-weight:700;color:var(--b);padding:4px 2px 0;min-height:0;}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* ===================== FOOTER (.cpf) =====================
Ported from HMModern onto BJ tokens. Class names are identical across all three modern
skins on purpose, same as .cph - only the token values differ, so fixes port mechanically.
Full-bleed navy --ink band with a 3px --b cyan top rule and a darker --util legal strip,
which bookends the .cph header's navy bars at the top of the page.
.cpf-wrap deliberately mirrors .cph-wrap exactly (max-width:1600 + 16px padding) so the
footer columns line up with the header above them; that also makes the min-width:1601px
tier a no-op for the footer, unlike HM which steps its wrap 1180 -> 1520.
text-align:left is load-bearing - body{text-align:center} at line 103 inherits in.
.cpf a is (0,1,1), the same specificity as `a:active,a:link,a:visited` at line 145, so it
wins only because it sits later in the file. Do not move this block above line 145.
NO SOCIALS ROW: Berkeley has no accounts of its own, so .cpf-socials/-label/-icons are
omitted along with the markup. Re-port them from HMModern if real handles ever turn up. */
/* STICKY FOOTER, half 2 of 2 (half 1 is #bg{display:flex;flex-direction:column}).
.cpf-clear is a zero-height flex item sitting between #wrapper and the footer, so an auto
top margin here absorbs ALL the leftover column height: short pages (empty cart, thin CMS
topics, 404s) push the footer down to the bottom of the viewport instead of leaving it
stranded mid-screen with page background below it. On a page taller than the viewport
there is no free space, auto resolves to 0, and nothing moves.
Putting the auto margin here rather than on .cpf is what preserves .cpf's real 20px gap.
`clear:both` is now inert - flex items do not clear floats - but is kept because the same
element does that job in CPModern/HMModern, where #bg is not a flex container. */
.cpf-clear{clear:both;margin-top:auto;}
/* Matching 3px --b rules top AND bottom close the band against the page background, instead
of the top-rule-only band that just ran into blue at its foot.
The 20px top margin is the deliberate gap that lets #bg show between the white content
panel and the footer. It must stay a real 20px, NOT margin-top:auto - auto resolves to 0
once the page is tall enough to fill the screen, which would butt #wrapper's 3px cyan
bottom border against this one and read as a single 6px bar. The sticky behaviour comes
from .cpf-clear instead; see its rule above. */
.cpf{clear:both;width:100%;margin-top:20px;background:var(--ink);border-top:3px solid var(--b);border-bottom:3px solid var(--b);color:var(--bandsoft);font-size:14px;text-align:left;font-family:var(--body);}
.cpf-wrap{max-width:1600px;margin:0 auto;padding:0 16px;}
.cpf a{color:var(--bandsoft);text-decoration:none;transition:color .15s ease;}
.cpf a:hover{color:#fff;text-decoration:underline;}
.cpf a:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.cpf-main .cpf-wrap{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:18px 40px;padding-top:26px;padding-bottom:26px;}
.cpf-links{display:flex;flex-wrap:wrap;gap:8px 36px;}
.cpf-links ul{list-style:none;margin:0;padding:0;}
.cpf-links li{margin:0;padding:0;line-height:2;font-size:14px;}
/* Flag + copyright as one right-hand column, so the band closes with a single pair of cyan
rules instead of handing off to a second darker strip. CPModern/HMModern keep the separate
full-width .cpf-legal band on --util; BJ deliberately does not, and .cpf-legal/-legal p
are omitted here with it. Re-port from HMModern if this is ever unified back. */
.cpf-end{display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.cpf-flag{width:75px;height:auto;border-radius:2px;margin-top:12px;}
.cpf-copy{margin:0;font-size:13px;color:var(--bandsoft);text-align:right;}
@media (prefers-reduced-motion:reduce){
.cph *{transition:none!important;}
}
@media all and (max-width:1024px) and (min-width:768px){
/* Home category groups: 4 tracks down to 2. At this width 4 would be ~180px each, too
narrow for names like "Reverse Connector Kits". Base rule is repeat(4,1fr). */
.bjh-groups{grid-template-columns:repeat(2,1fr);}
/* header collapses to burger + drawer; search drops to its own full-width row */
.cph-main .cph-wrap{flex-wrap:wrap;gap:12px;min-height:0;padding-top:12px;padding-bottom:12px;}
.cph-burger{display:block;}
#wrappertop.cph #logo{width:200px;height:73px;}
.cph-search{order:5;flex:1 0 100%;max-width:none;margin:0;}
.cph-actions{margin-left:auto;gap:14px;}
.cph-nav{display:none;}
.cph-drawer{display:flex;}
.cph-scrim{display:block;}
/* #wrapper is full-width, square and shadowless by default now - see its base rule plus
the min-width:1601px tier at the end of this file - so the old width/radius/border/
shadow overrides that lived here are no longer needed. The footer is the full-bleed
.cpf band and needs nothing at this tier either. */
#topnavbar{overflow:hidden;}
.kit-add-to-cart-form{min-width:100%;}
}
@media all and (max-width:767px) and (min-width:0px){
/* A 26px heading in a solid bar eats a lot of a phone screen. Sizes only - the bar, colour
and accent all inherit from base.css. Same step-down HMModern makes. */
.group-header{font-size:22px;line-height:26px;padding:8px 10px;}
.group-header2{font-size:20px;line-height:24px;padding:8px 10px;}
/* .headercat h1 steps down with them - it is the same bar treatment, so it has to shrink
at the same breakpoint or the page heading dwarfs the section headings under it. */
.headercat h1{font-size:22px;line-height:26px;padding:8px 10px;}
.bjh-prompt{font-size:22px;line-height:26px;padding:8px 10px;}
/* Two across on phones. The 4-across grid is a desktop/tablet arrangement; at ~340px of
usable width four columns would be ~70px each. */
.bjh-pumps{grid-template-columns:repeat(2,1fr);gap:12px;}
.bjh-pump-name{font-size:15px;line-height:20px;padding:8px 6px;}
/* Single column on phones - two would put ~150px of usable width per column, which wraps
most of the category names onto a second line. */
.bjh-groups{grid-template-columns:1fr;}
/* DEAD as of the home-topic rewrite - collect in the dead-CSS sweep. These four were the
phone hacks for the OLD markup: a float:right vendor block and a layout row
forced into a grid. The new topic has neither, and no .bjh-* markup uses these names.
(The live BJ skin renders the same shared topic row, but it has its OWN style.css with
its own copies of these rules - keeping them here does nothing for it.) */
.bjmobhide{display:none;}
.bjvendor{float:none !important;}
.mobclear{display:block;}
.mobcolumn{display:grid;}
/* header: same burger/drawer collapse as the tablet tier */
.cph-main .cph-wrap{flex-wrap:wrap;gap:12px;min-height:0;padding-top:12px;padding-bottom:12px;}
.cph-burger{display:block;}
#wrappertop.cph #logo{width:170px;height:62px;}
.cph-search{order:5;flex:1 0 100%;max-width:none;margin:0;}
.cph-actions{margin-left:auto;gap:14px;}
.cph-nav{display:none;}
.cph-drawer{display:flex;}
.cph-scrim{display:block;}
.cph-util .cph-wrap{justify-content:center;}
.cph-act-lbl{display:none;}
/* ACCOUNT STAYS VISIBLE IN THE PHONE HEADER. CPModern hides it outright here
(CPModern style.css:610 `.cph-user{display:none}`) and leaves account to the drawer -
BJ deliberately does NOT follow that.
The generic `.cph-act-lbl{display:none}` above is what emptied this slot: that span holds
the ONLY links inside .cph-user (the sign-out anchor and the token's own .username
anchor), so hiding it left a bare icon with nothing to tap. Re-show it for .cph-user
only - (0,2,0) beats the (0,1,0) rule above - while the cart stays icon-only.
#userName is still hidden: the customer's name is long and variable, and letting it into
an ~360px header is what pushed the cart button off-screen in HMModern. What shows is the
icon plus a short "Sign In" / "Log Out". */
.cph .cph-user .cph-act-lbl{display:flex;font-size:13px;gap:6px;}
.cph .cph-user .cph-act-lbl #userName{display:none;}
/* #wrapper is full-width, square and shadowless by default now - see its base rule plus
the min-width:1601px tier at the end of this file - so the old width/radius/border/
shadow overrides that lived here are no longer needed. The footer is the full-bleed
.cpf band and needs nothing at this tier either. */
#topnavbar{overflow:hidden;}
#topnavbar{margin-left:5px;}
.cardtop img {height:300px;}
/* One chip per row on phones. flex-basis:100%, NOT display:block - .productpanel is a flex
container now, so a chip's own `display` is blockified anyway and would not force the
full-width wrap; flex-basis does. Keeps the 8px gap as the vertical rhythm. */
.email-a-friend-wrap, .instructions-wrap, .questions-wrap, .ProductSKUText, .video-wrap, .specs-wrap{flex:1 1 100%;}
.one-kit-column-content, .kit-column-sidebar{width:100%;}
.kit-groups{width:100%;}
.tablestack{display:block;width:100%;}
#topnavbar li:hover ul {width:100%;Right:0;}
#topnavbar li:hover li a {font-size:16px;font-weight:bold; padding:10px;text-align:center;}
#loginText{margin-left:5px;}
/* On phones this CTA drops back to a plain underlined link (same call CPModern makes) so it
does not compete with Add to Cart on a narrow screen. Colour was CP's red #E02000 - a
different brand's - and --bd rather than --b because the lighter cyan is too low-contrast
for text on white. */
a.redbutton{background:none;color:var(--bd);text-decoration:underline;border:none;box-shadow:none;-webkit-box-shadow:none;font-size:12px;}
#subcat{margin-right:0px;}
#icons{width:100%;}
#icons img{max-width:100%;}
.kit-sidebar{position:static;margin-right:0px;}
#tsearch_results {margin: 33px 0 0 15px;width:90%;}
.cpbg{background:none;}
.maintext h3{font-size:24px;font-weight:bold;font-family:'Open Sans Condensed',Tahoma, Verdana, sans-serif;margin:0;color:#fff;border:none;padding:7px 15px 7px 15px;text-align:left; background:#666; border-radius: 5px 5px 0 0;border-bottom:1px solid #000;}
/* Phone tier only: full width is the normal pattern here and the tile already provides
the gutter. Padding stays 8px so the label sits centred in the 34px box. */
.moreinfo2 a:active, .moreinfo2 a:link, .moreinfo2 a:visited{width:100%;display:block;padding:8px 12px;}
#bottom{margin-top:10px;}
.itempic{float:left;width:100%;clear:both;}
.iteminfo{width:auto; overflow:visible;margin-top:10px;}
.cpbanner{display:none;}
.homebanner{width:100%;}
.homebanner2{display:none;}
.homebanner3{display:block;border-bottom:1px solid #000;width:100%; }
.mobilehome{display:block;margin:10px 0;float:left;width:100%;}
.homebanner h3, .homebanner3 h3{font-size:22px;background:#666;}
.prodads{display:none;}
#logo{position:absolute;left: -15px;top: 5px;width:180px;height:45px;background-size:75%;z-index:1000;}
#leftWrap, .topcontent, .topcontentwide, .topcontentnarrow, .socialcontent, .break, .barred {display:none;}
#searchbttn{float:right;margin-left:0;width:140px;}
#searchbttn2{margin:10px auto;width:155px;}
.showbig{margin-left:10px;}
.featuredbox{max-height:none;text-align:center;}
#csearch{margin:0 0 0 10px;font-weight:inherit;width:calc(100% - 175px);overflow:hidden;font-size:14px;height:32px;}
#csearch input[type=text]{font-size:14px;width:100%;height:32px;}
#csearch2{width:100%;}
#csearch2 input{width:92%;font-size:16px;}
#searchcontainer{float:left;width:100%;padding-top:3px;text-align:left;padding-left:0px;}
#searchcontainer2{width:100%;}
#horizNav{overflow:hidden;}
.catsummary{display:none;}
/* Both columns go full width and stack. float:none on .listleft is what actually ends the
two-column layout; the base flex is undone by .catorg{flex-direction:column} lower down.
`margin-right0` (missing colon) was an INVALID declaration and therefore dropped, so the
base 15px right margin survived on phones and every stacked row was inset by it. */
.catdesc2, .catdesc3 {margin:0;float:none;width:100%;}
.catdesc3imgboxright, .catdesc3imgboxleft{margin: 0 0 10px 0; max-width:100% !important;}
.listleft{max-width:100%;float:none;margin-right:0;}
/* display:block undoes the base rule's display:flex; .catsummary is display:none here, so
the flex pairing is not needed.
float:none IS REQUIRED for the full-width buttons below, it is not tidying. A floated li
with no width shrink-wraps to its content, and a width:100% child of a shrink-to-fit
parent is circular - the button would collapse to its text width instead of filling the
row. As a plain block the li spans the container and the button can fill it. */
/* SELECTOR MUST STAY AT THIS SPECIFICITY - this was `.subcatnav li, .subcatnav2 li`, which
is (0,1,1) and LOST to the base rule `ul.subcatnav li:not(.mobilenav)` at (0,2,2)
(:not() contributes its argument's specificity, so that is 2 classes + 2 elements).
The li therefore stayed display:flex on phones, which made .subcatdiv a flex ITEM and so
shrink-to-fit - and a width:100% inside a shrink-to-fit parent resolves to its text
width. That is why the button would not go full width no matter what was set on it.
Matching (0,2,2) and coming later in the file, this now wins.
:not(.mobilenav) is kept because this rule sets `display`: without it, this (0,2,2) rule
would beat `.mobilenav{display:list-item}` (0,1,0) below and break the "Back to Parent
Category" row that only exists on phones. */
ul.subcatnav li:not(.mobilenav), ul.subcatnav2 li:not(.mobilenav){display:block;padding-left:0 !important;text-align:center;float:none;width:100%;height:auto !important;min-height:0;border-bottom:0;background:none;}
ul.subcatnav li:not(.mobilenav):hover, ul.subcatnav2 li:not(.mobilenav):hover{background:none;}
/* Full-width tap targets on phones. Was `width:80%` with a 2% left margin and PERCENTAGE
side padding (10%/8%) - an off-centre inset that left the rows ragged. box-sizing is
explicit so the border and padding come out of the 100%, not on top of it.
line-height 34px -> 20px with real padding: at 34px a name that wrapped to two lines
produced a 68px-tall button with the text floating apart. */
/* :link/:visited are here for specificity, not styling. The base rule at style.css:607 is
the list `a.catbutton, a.catbutton:link, a.catbutton:visited`, and a real link always
matches one of the pseudo-classes - so its (0,2,1) branch would beat a lone `a.catbutton`
(0,1,1) here and keep its own padding. Matching the list makes this (0,2,1) too, and it
is later in the file. */
a.catbutton, a.catbutton:link, a.catbutton:visited{display:block;box-sizing:border-box;margin:0 0 8px 0;width:100%;padding:7px 14px;height:auto;min-height:38px;line-height:20px;border:1px solid var(--line);border-radius:var(--rad);background:#fff;}
/* .subcatdiv has no rule of its own anywhere - it is an unstyled block div, so it spans the
li once the li is display:block above. Nothing more is needed for it. */
#main{margin-left:7px;}
/* margin-LEFT is zeroed too now - the base rule went from margin-right:20px to an
all-round margin:5px when the card moved onto this element. */
.frontpageitemcontainer{max-width:100%;width:100%;margin-left:0;margin-right:0;}
.toplink5{width:120px;}
div#header>div:nth-of-type(2),div#header>div:nth-of-type(3),div#header>div:nth-of-type(5){display:none;}
.MagicZoomBigImageCont{display:none;}
/* Phone: only the things the base rule cannot know about. The old override here re-applied
a grey gradient and CP's red #e02000 - a different brand's colour on a blue skin - both
of which are now handled by the flat token rule. `overflow:hidden` is dropped too: the
strip wraps to multiple rows on a phone and hidden overflow was clipping the extra rows. */
ul.tabs a {padding:0 10px;}
ul.tabs {clear:both;}
.addinfo img {max-width:100%;}
.addinfopics{max-width:100%;}
#breadcrumb{display:none;}
/* Footer stacks: the two link columns centre under each other and the flag follows them
instead of sitting off to the right. Replaces the old ul.tameHoriz phone rules, which
turned the pipe-separated row into a full-width list with generated '|' bookends. */
.cpf-main .cpf-wrap{flex-direction:column;align-items:center;text-align:center;gap:16px;padding-top:20px;padding-bottom:20px;}
.cpf-links{justify-content:center;text-align:center;gap:4px 28px;}
.cpf-end{align-items:center;}
.cpf-flag{margin-top:4px;}
.cpf-copy{text-align:center;}
.ProductNameText h1{padding-bottom:5px;text-align:center;}
.nav-links-wrap{text-align:left;width:100%;font-size:0px;margin-bottom:10px;}
div.nav-links-wrap a:first-child {-webkit-border-top-left-radius: 10px;-webkit-border-bottom-left-radius: 10px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;border-right:1px solid #333;}
div.nav-links-wrap a:last-child {-webkit-border-top-right-radius: 10px;-webkit-border-bottom-right-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;border-left:1px solid #333;}
div.nav-links-wrap a:last-child:before{content:"Next ";}
div.nav-links-wrap a:first-child:after{content:" Previous";}
div.nav-links-wrap a:nth-child(2):before{content:"Up ";}
/* Previous / Up / Next. Was a yellow gradient in four vendor prefixes plus an IE
`filter: progid:DXImageTransform` fallback (dead - that targeted IE9 and earlier).
Flat --gold keeps the same colour family in one declaration. */
a.ProductNavLink{width:33%;display:block;float:left;background:var(--gold);border:1px solid var(--goldd);box-sizing:border-box;padding:8px 0;text-align:center;font-size:14px;color:var(--ink);text-decoration:none;text-transform:capitalize;font-weight:bold;transition:background .15s ease;}
a.ProductNavLink:hover{background:var(--goldd);color:var(--ink);}
.nav-links-wrap img {position:relative;top:2px;}
/* "Back to Parent Category" - same structure as
every other row (see entity.defaulttable.xml.config:130), so it already picks up the
full-width button styling. It needs text-align of its own because the rule that centres
the other rows is `ul.subcatnav li:not(.mobilenav)`, which by definition skips this one.
width/float are not repeated: nothing floats it now, so as a list-item it already spans. */
.mobilenav{display:list-item;text-align:center;}
.desccontainer{clear:both;padding-top:10px;}
.catcontainer{float:none;width:auto;overflow:hidden;}
.add-to-cart-button, .add-to-wishlist-button{width:90% !important;}
/* Horizontal margins zeroed for the same reason as .place-order-button: the primary button
rule's `margin:3px 3px 0 3px` sits OUTSIDE the border box, so width:100% + 6px of margin
overflows the container on a phone, where there is no slack to absorb it. */
.button-continue-shopping, .button-update-cart, .button-checkout-now, .button-show-estimator, .button-continue-checkout, .add-to-wishlist, .call-to-action{width:100%;margin-left:0;margin-right:0;}
.add-to-cart-buttons{width:100%;text-align:center;display:inline-block;margin-top:5px;}
ul.pagination{width:100%;text-align:center;}
.pagination > li > a, .pagination > li > span{width:16.3%;padding:6px 0;}
input[type="button"],input[type="submit"],.signin-text a:link{padding: 8px 8px 8px 8px;}
#DrillDownBox {float:left; width:100%;padding: 0 10px 10px 10px;}
.mercparts h2{padding: 0 10px;}
#DrillDownBox .DrillDownDropDown {width:100%;}
#DrillDownBox .DrillDownDropDown select {width:92%;}
.mercparts {padding:0px; width:100%; margin-left:0px !important;margin-bottom:10px;}
.MagicThumb-background{display:none !important;}
.oemsubsections{float:none;clear:both;width:auto;margin-top:10px;}
.mercdrawing{float:none;text-align:center;}
.mercdrawing img {max-width:100%;}
.partsfinder{padding:3px 45px;}
.coverdetails iframe{width:100%;}
.iteminfocover{width:auto;margin-bottom:10px;overflow:hidden;}
.iteminfocover2{float:none; width:100%; margin:10px 0;}
/* The old `width:90%` on the inner was propping open the GIF-icon links inside their
inline-block wraps. The wrap is now full-width via flex-basis and the is an
inline-flex that sizes to its icon + text, so a percentage width here just left a ragged
10% gap on the right of every chip. Removed. */
.grid-column-inner img, .row-checkout-controls img, .payment-form img {max-width:100%;}
.page-row{width:100%;}
.entity-description-row{padding:0;}
#ctl00_PageContent_ctrlEstimateAddress_City, #ctl00_PageContent_ctrlEstimateAddress_Country{width:245px;}
.register-half .register-form, .signin-half, .register-half, .register-half .anon-form {padding:0;width:100%;}
#ctl00_PageContent_FormPanel, .login-form, .form-group, .cc-top, .credit-card-form, .order-summary div{width:100% !important; box-sizing: border-box;}
.account-form .first-name, .account-form .last-name, .account-form .password-one, .account-form .password-two{}
.checkout-tabs .secure-checkout{padding-right: calc(100% - 140px);margin-bottom:10px;width:120px;}
.checkout-tabs > li > a{padding:5px 5px;margin-right:0px;font-size:10px;width:43px;text-align:center;}
.checkout-steps-wrap ul li{padding-right:0px;}
.order-summary .one-third{margin-bottom:10px;}
img {max-width:100%;}
.mob33{width:33%;}
.mob67{width:67%;}
.rating-comment-row, .total-rating-row{width:95% !important;}
.add-to-wishlist-button{font-size:10px !important; }
.mobmenu{display:inline;}
.fullmenu{display:none;}
.cc-top{height:50px;font-size:12px;}
.lockimage{height:25px;width:25px;}
.bestboxcontainer{max-width:100%;}
/* align-items MUST be reset to stretch here, it is not tidying. The base rule sets
align-items:flex-start, which is right in a ROW (it stops the description column from
stretching to match the list's height) but wrong once this flips to a COLUMN: flex-start
then sizes .listleft to its CONTENT on the cross axis (width) instead of filling.
That shrink-to-fit parent is what collapses the buttons - a width:100% inside a
shrink-to-fit box resolves to its own text width, so no width on the button can fix it.
Exactly the same failure mode as the 2026-07-29 li{display:flex} bug, one level up. */
.catorg{flex-direction:column;align-items:stretch;}
.shipping-address-column{padding-right:0;}
a.choose-payment-method-button{width:100%;box-sizing:border-box;margin-left:0;margin-right:0;}
button, input[type="button"], input[type="submit"], .signin-text a:link, a.redbutton, a.choose-payment-method-button{padding: 8px 16px 8px 16px; font-size: 15px;line-height:15px;margin-top:10px;}
.form-group-small .entry-feedback-wrapper{width:100%;}
.embed-responsive-16by9 { padding-bottom: 100%;}
.gridboxes {max-width:800px;}
.switchbox{max-width:100%;}
.login-form .form-group{width:90% !important;}
.kit-add-to-cart-form{min-width:100%;}
.alternative-payment-methods{width:300px;max-width:100%;}
}
/* ===== Wide-screen tier =====
Only above 1600px is there room either side of the 1600px cap for the page background
(#bg) to show. At exactly 1600 the frame fills the viewport, so the side borders would
sit hard against the screen edges with nothing behind them - hence 1601, not 1600.
Square corners, no shadow: the frame is a flat panel, not a floating card.
#footer was dropped from this rule when it became the full-bleed .cpf band - it has no
width cap of its own to be bordered, and side borders on a full-width band would just be
two cyan lines pinned to the viewport edges. Its inner .cpf-wrap is what tracks 1600. */
@media (min-width:1601px){
#wrapper{border-left:3px solid #00A4FF;border-right:3px solid #00A4FF;}
}
/* CPHM Change: centre the subheaders on the order confirmation page. That page's markup
is generated by the page.orderconfirmation.xml.config XmlPackage - Confirmation.cshtml
only emits Model.Body as raw HTML - so these three classes are the available hook.
End CPHM Change */
.order-confirmation-billing-address-header,
.order-confirmation-shipping-address-header,
.order-confirmation-shipping-method-header {
text-align: center;
}