/* ==========================================
KBS COATINGS BRAND VARIABLES
========================================== */
:root {
--kbs-blue: #0056b3;
--kbs-blue-dark: #003d80;
--rust-red: #d32f2f;
--rust-red-dark: #9b1c1c;
--rust-red-deep: #b71c1c;
--kbs-gold: #ffd700;
--border-light: #dee2e6;
--bg-light: #f8f9fa;
--tab-spacing: 12px;
--white: #ffffff;
--border-subtle: #f0f0f0;
--hover-red-bg: #fdf2f2;
--brand-primary: #d32f2f;
--accent-gray: #f8f9fa;
--border-color: #e1e4e8;
--icon-guide-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6c3.6-1.5 6.9-1.5 9.5 0v13c-2.6-1.5-5.9-1.5-9.5 0V6z'/%3E%3Cpath d='M20 6c-3.6-1.5-6.9-1.5-9.5 0v13c2.6-1.5 5.9-1.5 9.5 0V6z'/%3E%3Cpath d='M12 6v13'/%3E%3C/g%3E%3Cpath d='M15.8 7.2h2.2v6.1l-1.1-.8-1.1.8V7.2z' fill='black'/%3E%3C/svg%3E");
--icon-cart-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
--icon-location-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E");
--icon-ship-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
--icon-tech-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
--icon-direction-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='3 11 22 2 13 21 11 13 3 11'%3E%3C/polygon%3E%3C/svg%3E");
--icon-help-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
--icon-doc-text-inv-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zM7 8h3v2H7V8zm10 10H7v-2h10v2zm0-4H7v-2h10v2z'/%3E%3C/svg%3E");
--icon-video-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='none'%3E%3Cpath d='M10 16.5l6-4.5-6-4.5v9z'/%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
--icon-award-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17V21'/%3E%3Cpath d='M12 2v15'/%3E%3Cpath d='M6.5 7.5A4.5 4.5 0 1 0 11 3'/%3E%3Cpath d='M17.5 7.5A4.5 4.5 0 1 1 13 3'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
}
@font-face {
font-family: fontello;
font-display: swap;
src: url(/assets/templates/common-core/lib/fontello/font/fontello.woff2?65779507) format('woff2'),
url(/assets/templates/common-core/lib/fontello/font/fontello.woff?65779507) format('woff');
font-weight: 400;
font-style: normal;
}
[class*=" icon-"]:before,[class^=icon-]:before{font-family:fontello;font-style:normal;font-weight:400;speak:never;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-help-circled:before{content:'\e800'}.icon-basket:before{content:'\e801'}.icon-pencil:before{content:'\e802'}.icon-star:before{content:'\e803'}.icon-star-empty:before{content:'\e804'}.icon-cancel:before{content:'\e805'}.icon-attention:before{content:'\e806'}.icon-ok:before{content:'\e807'}.icon-location:before{content:'\e808'}.icon-mail-alt:before{content:'\e809'}.icon-mail:before{content:'\e80a'}.icon-phone:before{content:'\e80b'}.icon-left:before{content:'\e80c'}.icon-right:before{content:'\e80d'}.icon-up:before{content:'\e80e'}.icon-down:before{content:'\e80f'}.icon-print:before{content:'\e810'}.icon-ok-circled:before{content:'\e811'}.icon-plus:before{content:'\e812'}.icon-right-arrow:before{content:'\2192'}.icon-cw:before{content:'\e813'}.icon-search:before{content:'\e814'}.icon-heart:before{content:'\e815'}.icon-gift:before{content:'\e816'}.icon-play:before{content:'\e817'}.icon-lock:before{content:'\e818'}.icon-lock-open:before{content:'\e819'}.icon-link:before{content:'\e81a'}.icon-gift-1:before{content:'\e81b'}.icon-clipboard:before{content:'\e81c'}.icon-floppy:before{content:'\e81d'}.icon-user:before{content:'\e81e'}.icon-cog:before{content:'\e81f'}.icon-credit-card:before{content:'\e820'}.icon-linkedin-1:before{content:'\e821'}.icon-spin2:before{content:'\e831'}.icon-login:before{content:'\f02c'}.icon-twitter:before{content:'\f099'}.icon-facebook:before{content:'\f09a'}.icon-rss:before{content:'\f09e'}.icon-menu:before{content:'\f0c9'}.icon-gplus:before{content:'\f0d5'}.icon-linkedin:before{content:'\f0e1'}.icon-comment-empty:before{content:'\f0e5'}.icon-doc-text:before{content:'\f0f6'}.icon-building:before{content:'\f0f7'}.icon-angle-left:before{content:'\f104'}.icon-angle-right:before{content:'\f105'}.icon-angle-up:before{content:'\f106'}.icon-angle-down:before{content:'\f107'}.icon-lock-open-alt:before{content:'\f13e'}.icon-doc-text-inv:before{content:'\f15c'}.icon-youtube:before{content:'\f167'}.icon-instagram:before{content:'\f16d'}.icon-tumblr:before{content:'\f173'}.icon-skype:before{content:'\f17e'}.icon-building-filled:before{content:'\f1ad'}.icon-paper-plane:before{content:'\f1d9'}.icon-cc-visa:before{content:'\f1f0'}.icon-cc-mastercard:before{content:'\f1f1'}.icon-cc-discover:before{content:'\f1f2'}.icon-cc-amex:before{content:'\f1f3'}.icon-cc-paypal:before{content:'\f1f4'}.icon-toggle-off:before{content:'\f204'}.icon-toggle-on:before{content:'\f205'}.icon-pinterest:before{content:'\f231'}.icon-whatsapp:before{content:'\f232'}.icon-amazon:before{content:'\f270'}.icon-calendar-check-o:before{content:'\f274'}.icon-map-pin:before{content:'\f276'}.icon-shopping-bag:before{content:'\f290'}.icon-blogger:before{content:'\f314'}.icon-binoculars:before {content: '\f1e5'}
/*
** Bootstrap over-rides
*/
/* ----------------------------
1. Responsive Root Font Size
----------------------------- */
html {
/* Base font size = 16px (default) */
font-size: clamp(14px, 1.1vw, 17px);
scroll-behavior: smooth;
}
/* Optional fallback for older browsers */
body {
font-size: 1rem; /* equals root font size */
line-height: 1.2; /* improves readability */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
/* ----------------------------
2. Responsive Typography
----------------------------- */
h1 { font-size: 1.9rem; } /* ~40px if root = 16px */
h2 { font-size: 1.75rem; } /* ~32px */
h3 { font-size: 1.5rem; } /* ~28px */
h4 { font-size: 1.3rem; } /* ~24px */
h5 { font-size: 1.1rem; } /* ~20px */
h6 { font-size: 1rem; } /* ~16px */
p { font-size: 1rem;margin-bottom: 1rem;} /* base paragraph */
small { font-size: 0.875rem; } /* ~14px */
/* ----------------------------
3. Spacing (padding, margin) using rem
----------------------------- */
button {
padding: 0.75rem 1.5rem;
font-size: 1rem;
border: none;
border-radius: 0.5rem;
cursor: pointer;
}
/* ----------------------------
4. Responsive adjustments with media queries
----------------------------- */
@media (max-width: 1024px) {
html { font-size: 15px; }
body {line-height:1.6; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
}
@media (max-width: 768px) {
html { font-size: 14px; }
body {line-height:1.6; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
.container { padding: 0.85rem; }
}
@media (max-width: 480px) {
html { font-size: 13px; }
body {line-height:1.6; }
h1 { font-size: 1.3rem; }
h2 { font-size: 1.1rem; }
p { font-size: 0.9rem; }
.container { padding: 0.8rem; }
}
.ppCheckout {display: block;margin: 0 auto;}
img {
max-width: 100%;
height: auto;
display: block; /* eliminates inline ghost space */
}
/* Text utilities */
.text-red { color: var(--rust-red); }
.text-blue { color: var(--kbs-blue); }
.text-muted { color: #777; }
.text-small { font-size: 0.875rem; }
/* Spacing helpers */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-20 { margin-bottom: 20px; }
/* Display */
.block { display: block; }
.hidden { display: none; }
/* ==========================================
MODAL Z-INDEX & BUTTON FIX
Lifts Bootstrap modals above sticky header (z-index: 9999)
and restores button styles stripped by global button rule
========================================== */
.modal-backdrop { z-index: 10040; }
.modal { z-index: 10050; }
/* Restore Bootstrap button appearance inside modals */
.modal button,
.modal .btn {
border: 1px solid transparent;
border-radius: 4px;
padding: 6px 12px;
}
.modal .close {
border: none;
background: transparent;
padding: 0;
font-size: 21px;
line-height: 1;
opacity: 0.2;
cursor: pointer;
}
.modal .close:hover {
opacity: 0.5;
}
.modal-dialog button { border-radius: 4px; }
.radio-format > label.radio-option {
display: inline-flex !important;
align-items: center;
gap: 8px;
cursor: pointer;
vertical-align: middle;
}
.radio-format > label.radio-option img {
flex-shrink: 0;
margin: 0 !important;
max-height: 30px;
max-width: 30px;
}
.radio-format > label.radio-option span {
padding: 8px 10px;
display: inline-block;
line-height: 1.3;
}
/* unvisited link */
a:link {
color: inherit;
}
/* visited link */
a:visited {
color: inherit;
}
/* selected link */
a:active {
color: #0056b3;
}
a:hover {
color: #d32f2f;
}
a.cat-desc:hover, a.cat-desc:visited, a.cat-desc:active {
color: inherit; /* or use a fixed color */
text-decoration: none;
}
/* The "Glow" and Smooth Transition */
#searchlight {
transition: border-color 0.3s ease-in-out,
box-shadow 0.3s ease-in-out,
background-color 0.3s ease-in-out,
transform 0.3s ease-in-out;
outline: none; /* Removes the default blue browser outline */
}
/* When the user clicks into the box */
#searchlight:focus {
border-color: var(--rust-red); /* Use your brand color here */
box-shadow: 0 0 12px rgba(255, 102, 0, 0.4); /* Creates the soft glow */
background-color: #fff;
transform: scale(1.01); /* Subtle "pop" forward */
}
.short-description {font-size:1.2rem;
}
.page_header {margin:10px 0;}
.section_header,.section_header a {
background: #f8f9fa;
border-left: 8px solid #d32f2f;
padding: 10px 14px;
margin: 0 0 12px;
font-size: 1.5rem;
font-weight: 700;
color: #d32f2f;
font-variant: small-caps;
border-radius: 0 8px 8px 0;
letter-spacing: 0.5px;
}
.section_header a:hover {
text-decoration:underline;
transition: border-color 0.2s ease;
}
.section_header_small, .section_header_small a, .section_header_small a:hover {
background: var(--accent-gray);
border-left: 8px solid var(--brand-primary);
padding: 10px 14px;
margin: 0 0 16px;
font-size: 1.2rem;
font-weight: 700;
color: var(--brand-primary);
font-variant: small-caps;
border-radius: 0 8px 8px 0;
letter-spacing: 0.5px;
display: block;
scroll-margin-top: 100px;
}
A.contact {
font-family:Arial, Helvetica;
color:#000;
font-weight:400;
font-style:normal;
text-decoration:none;
display:block;
background-color:White;
padding:5px;
text-align:left;
}
A.contact:hover {
background-color:#F4FB01;
}
A.video-related {
font-family:Arial, Helvetica;
color:#000;
font-weight:400;
font-style:normal;
text-decoration:none;
display:block;
background-color:White;
padding:5px;
text-align:left;
}
A.video-related:hover {
opacity: 0.8;
}
.homepage-box {
background-position: 50% 50%;
background-size: cover;
}
.breadcrumnb {margin:1.4rem 0 0 0;}
.box {
position: relative;
background-color: #FFF;
border: #ccc 1px solid;
padding: 5px;
margin: 0 0 20px 0;
}
.page-content {
padding: 0.3125rem 0 0.625rem 0;
}
.rTabs {margin:10px 0 0 0;}
.opt-label {
margin: 0 0 5px;
line-height: 1;
}
.dir_header, .dir_header a, .dir_header a:hover {
color:#d32f2f;
font-size:1.1rem;
text-align:left;
margin:5px 0;
padding:0 0 2px 0;
font-weight:700;
font-variant:small-caps;
border-bottom:#666 dotted 2px;
text-decoration:none;
}
.titles {
margin: 0 0 20px;
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 0;
}
.sublink li a {font-size:1.3rem;}
.sub_pages {
list-style: none;
padding-left: 0;
margin-left: 0;
}
.sub_pages li {
margin-bottom: 16px;
}
.sub_pages li a {
display: block;
font-size: 1.3rem;
position: relative;
padding-left: 34px;
}
.sub_pages li a::before {
content: "??";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.subcategories {
border-bottom: 1px solid #ececec;
padding: 0 0 10px;
}
.subcategories > ul > li > a {
color: #000;
text-decoration: none;
display: block;
transition: opacity .25s ease-out;
}
.subcategories > ul > li > a:hover {
opacity: 0.8;
}
#categories > li:last-child > ul{
left: auto;
right: 0;
}
.subcategories > ul > li span.img {
color: #000;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
}
.qaLink{
color: #d32f2f;
margin:0;
}
.extrafieldsBlock {margin:0;padding:0}
.createreview-link {
color:#0056b3;
}
.reviews-count a{
color:#0056b3;
}
.opt-regular {margin:0 0 15px 0;}
.sub-section {margin:15px 0;}
@media (min-width: 1200px) {
.container {
max-width: 1300px;
width: 100%;
}
}
.form-control {
color: #000;
font-family: Arial, Helvetica, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "sans-serif";
font-size: 13px;
height: 36px;
padding: 7px 12px;
}
.form-control .search-text {
border:1px solid #ececec;
-webkit-box-shadow: none;
box-shadow: none;
}
.product-item, .blog-post-card {
border: none;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
transition: transform 0.2s ease-in-out;
}
.product-item:hover {
transform: translateY(-5px);
}
.page-heading { color: #0056b3; font-size: 1.8rem; }
.product-card__name a { color: #0056b3; font-size: 1.4rem; font-weight: 700; text-align: center; display: block; }
.product-card__description { margin: 0 10px; }
.btn {
font-size: 13px;
padding: 10px 12px;
font-weight: 700;
text-transform: uppercase;
border-radius: 12px;
transition: background 0.2s, transform 0.1s;
margin:5px;
}
.btn-default {
border-color: #000;
background-color: #fff;
color: #000;
white-space: normal;
}
.btn-tds,
a.btn-tds,
a.btn-tds:link,
a.btn-tds:visited {
background-color: var(--kbs-blue);
color: #fff;
border: solid 2px var(--kbs-blue);
transition: background-color 0.2s, color 0.2s, transform 0.1s;
white-space: normal;
}
.btn-tds:hover,
a.btn-tds:hover {
background-color: #fff;
color: var(--kbs-blue);
border: solid 2px var(--kbs-blue);
transform: translateY(-2px);
}
.btn-tds .kbs-icon,
a.btn-tds .kbs-icon {
background-color: #fff;
}
.btn-tds:hover .kbs-icon,
a.btn-tds:hover .kbs-icon {
background-color: var(--kbs-blue);
}
a.btn-primary {color:white;white-space: normal;
}
a.btn-primary:link {color:white;
}
a.btn-primary:active {color:black;background-color:white;border-color:var(--kbs-blue);
}
a.btn-checkout {color:white;background-color: #0056b3;border:1px solid black;font-weight:700;font-size:14px;
}
a.btn-checkout:link {color:white;background-color: #0056b3;border:1px solid black;
}
a.btn-checkout:visited {color:white;background-color: #0056b3;border:1px solid black;
}
a.btn-checkout:active {border:3px solid black;
}
a.btn-checkout:hover {color:#0056b3;background-color:white;border-color:#0056b3;
}
a.btn-subscribe {display:block;color:white;background-color:#0056b3;border:2px solid var(--kbs-gold);font-weight:700;padding:10px;margin:10px auto;font-size:1.1rem;
}
a.btn-subscribe:link {color:white;background-color:#0056b3;border:2px solid var(--kbs-gold);
}
a.btn-subscribe:visited {color:white;background-color:#0056b3;border:2px solid var(--kbs-gold);
}
a.btn-subscribe:active {border:3px solid black;
}
a.btn-subscribe:hover {color:#0056b3;background-color:var(--kbs-gold);border-color:#0056b3;
}
a.btn-primary:focus,
a.btn-primary:active:focus {
border-color: #000;
background-color: #fff;
color: #000;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:hover:focus,
.btn-default.focus {
color: var(--kbs-blue-dark);
background-color: #f0f0f0;
border-color: #000;
transform: translateY(-2px);
}
/* add after */
.btn-block:hover {
transform: translateY(-2px);
}
.more-info-btn:hover {
transform: translateY(-2px);
}
.btn-default.btn-inverse,
.btn-primary {
color: #fff;
background-color: #000;
border-color: #000;
}
.btn-default.btn-inverse:hover,
.btn-primary:hover {
color: #fff;
background-color: #000;
border-color: #000;
opacity: 0.8;
transform: translateY(-2px);
}
.navbar-wrapper{
width: 100%;
background-color: #000;
background-image: url('/assets/templates/kbs-coatings-core/css/images/nav-bg.jpg');
border-bottom: 5px solid #d32f2f;
}
.navbar.navbar-inverse {
margin-bottom: 0;
border: none;
background-color: transparent;
}
#categories{
width: 100%;
text-align: center;
}
.navbar-nav > li{
float: none;
display: inline-block;
}
.navbar-inverse .navbar-nav > li > a {
color: #fff;
font-weight: 700;
letter-spacing: 0.025em;
text-transform: uppercase;
font-size: 18px;
line-height: 18px;
min-height: 50px;
padding: 15px 30px;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
color: #fff;
background-color: #d32f2f;
}
.dropdown-menu > li > a {
font-size: 12px;
padding: 6px 20px;
text-transform: uppercase;
}
.navbar-nav > li.dropdown > a:after {
content: "\f107";
font-family: "fontello";
font-size: 18px;
line-height: 1;
margin-left: 5px;
}
.homepage-slider img{
width: 100%;
}
.header-body{
width: 100%;
}
.header-body h2{
margin: 10px 0;
font-weight: 700;
font-size:24px;
}
.header-body p{
font-size: 18px;
}
@media (max-width: 1023px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
}
.navbar-nav>li {
float: none;
}
.collapse.in{
display:block !important;
}
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
color: #9d9d9d;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
}
/*
** Template code
*/
.logo {
height: 135px;
position: relative;
overflow: hidden;
margin:0;
padding:0;
}
.logo img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
.logo a:hover img {
opacity: 0.6;
}
.himage img {
opacity: 0.8;
}
.himage a:hover img {
opacity: 1;
}
.pimage a:hover img {
outline:10px yellow solid;
}
.top-nav {
background-color: #d32f2f;
}
.top-nav ul {
text-align: center;
padding: 15px 0;
margin: 0;
list-style: none;
font-size: .9rem;
line-height: 1;
font-family: Arial;
font-variant: small-caps;
font-weight: 700;
}
.top-nav ul li {
display: inline-block;
margin: 0;
padding: 0;
}
.top-nav .useraccount ul {
float: right;
text-transform: uppercase;
}
.top-nav ul li:last-child {
border: none;
margin: 0;
padding: 0;
}
.top-nav ul li a {
display: block;
color: #fff;
font-variant: small-caps;
font-size: 1.3rem;
font-weight: 700;
padding: 5px 25px;
margin: 0;
letter-spacing: .5px;
}
.pricingBlock .yourprice, .pricingBlock .saleprice{
font-size: 1.4rem;
font-family: 'Lato', sans-serif;
}
.useraccount ul {
margin: 0;
padding: 0;
}
.site-header {
padding: 25px 0;
}
.special-action {
display: inherit;
margin: 5px 10px;
float: left;
}
.searchBox {
position: relative;
margin-top: 20px;
padding: 10px 0;
max-width: 500px;
}
.addl-images ul.slides li a{
background-color: transparent;
}
.r-tabs .r-tabs-panel{
border-right: 1px solid #444;
border-bottom: 1px solid #444;
border-left: 1px solid #444;
}
.r-tabs .r-tabs-nav{
border-bottom: 1px solid #444;
}
.search-form {
position: relative;
}
.search-form .search-text {
padding: 9px 62px 9px 12px;
height: 50px;
background-color: #ededed;
}
.search-form .search-submit {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 100%;
text-align: center;
font-size: 19px;
background-color: transparent;
border: none;
color: #e00000;
margin:0!important;
}
.product-id, .product-reviews{
display: inline-block;
}
.product-reviews{
margin-left: 10px;
}
.main-image{
margin-top: 10px;
max-height: 600px;
max-width: 600px;
margin-right:auto;
margin-left:auto;
padding:15px;
}
.yourprice{
color: #0056b3;
}
.useraccount ul li{
font-size: .95rem;
display: inline-block;
text-transform: uppercase;
vertical-align: bottom;
}
.shopping_cart{
margin-left: 30px;
}
.useraccount ul li a{
color: #000;
height: 1.3rem;
}
.useraccount ul li a span{
color: #d32f2f;
font-size: 1rem;
}
.minicart {
float: right;
}
.minicart-inner {
display: block;
color: #000;
text-transform: uppercase;
cursor: pointer;
}
.minicart-inner:hover {
color: #000;
opacity: 0.8;
}
.minicart .cart-icon {
display: block;
width: auto;
font-size: 1.1rem;
float: left;
margin-right: 5px;
}
.minicart .cart-details {
display: block;
float: left;
}
.minicart .cart-details .cart-count .minicart-items{
padding-top: 3px;
display: block;
color: #000 !important;
}
.header > h4.page_heading {
font-variant: small-caps;
color: #0056b3;
margin:0 0 5px 0;
}
.page_heading {margin-top:10px;}
.btn .btn-addcart{
padding: 8px 20px;
background-color: #0056b3;
color: #fff;
text-transform: uppercase;
font-size: 14px;
}
.btn .btn-addcart i, .page_heading:after{
display: none;
}
/* Updated Modernized Add to Cart Button */
.btn-addcart {
position: relative;
/* Use your brand variable for the border and text */
color: var(--kbs-gold);
background: linear-gradient(180deg, #333 0%, #111 100%);
border: 2px solid var(--kbs-gold);
font-weight: 700;
font-size: 1.2rem; /* Slightly larger for readability */
text-transform: uppercase;
letter-spacing: 0.5px;
/* Mobile-first sizing: 48px-50px height is the gold standard for thumbs */
padding: 0 1.5rem;
height: 50px;
line-height: 46px; /* Vertical centering for the border-box */
border-radius: 4px; /* More modern, professional "tool-box" look than rounded pills */
cursor: pointer;
overflow: hidden;
transition: transform 0.2s ease-in-out,
box-shadow 0.2s ease-in-out,
background-color 0.2s ease-in-out;
/* Better alignment for the icon and text */
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Hover: Refined Glow */
/* We limit the scale effect to desktop-only to prevent mobile jumpiness */
@media (min-width: 992px) {
.btn-addcart:hover {
transform: translateY(-2px); /* Lift up instead of scaling out */
box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
background: #222;
color: #fff;
border-color: #fff;
}
}
/* Icon Modernization */
.btn-addcart .icon-basket {
font-size: 1.3rem;
margin-right: 10px;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Hover icon: subtle nudge forward instead of rotation */
.btn-addcart:hover .icon-basket {
transform: translateX(4px);
}
/* Active/Touch State: Visual Feedback */
.btn-addcart:active {
transform: scale(0.96);
background: var(--kbs-blue); /* High-contrast feedback when clicked */
border-color: var(--kbs-blue);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}
/* Added shake animation on click */
@keyframes addedShake {
0% {
transform: scale(1);
box-shadow: 0 0 0 rgba(255, 215, 0, 0);
}
40% {
transform: scale(1.06); /* Subtle "growth" pulse */
box-shadow: 0 0 15px var(--kbs-gold); /* Instant visual "affirmation" */
}
100% {
transform: scale(1);
box-shadow: 0 0 0 rgba(255, 215, 0, 0);
}
}
/* Basket spin animation */
@keyframes basketSpin {
0% { transform: rotate(0deg); }
50% { transform: rotate(360deg); }
100% { transform: rotate(0deg); }
}
/* Apply animations */
.added {
animation: addedShake 0.4s ease-out;
}
.basket-spin {
animation: basketSpin 0.5s ease-in-out;
}
.r-tabs .r-tabs-nav .r-tabs-anchor{
background-color: #d32f2f;
color: #fff;
}
.qtybox-addcart label:first-child{
display: block;
}
.qty-input{
margin-left: 0;
}
.availability-header{
display: none;
}
.breadcrumnb{
font-weight: 600;
}
/* 1. Active Tab State (Desktop/Nav View) */
.r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {
background-color: var(--kbs-blue);
color: #fff;
font-weight: 600;
border-radius: 4px 4px 0 0; /* Softens the top corners */
position: relative;
transition: background-color 0.3s ease;
}
/* 3. Active Accordion Title (When expanded) */
.r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor {
background-color: var(--kbs-blue);
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: none;
margin-bottom: 0;
border-radius: 6px 6px 0 0;
box-shadow: none;
}
/* Adds a subtle "Active" indicator bar for modern flair */
.r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor::after {
content: "";
position: absolute;
bottom: 0;
left: 20%;
right: 20%;
height: 3px;
background: rgba(255, 255, 255, 0.5);
border-radius: 10px;
}
/* Accordion Title (Mobile/Collapsed View) */
.r-tabs .r-tabs-accordion-title .r-tabs-anchor {
display: block;
padding: var(--tab-spacing) 15px;
background-color: var(--rust-red);
color: #fff;
font-weight: 700;
text-decoration: none;
margin-bottom: 4px;
border-radius: 6px;
transition: background-color 0.25s ease-in-out,
color 0.25s ease-in-out,
transform 0.25s ease-in-out,
box-shadow 0.25s ease-in-out;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
border: 1px solid rgba(0,0,0,0.05);
}
/* Darker Red Hover State */
.r-tabs .r-tabs-accordion-title .r-tabs-anchor:hover {
background-color: var(--rust-red-dark);
color: var(--white);
transform: translateX(5px); /* Gentle slide effect */
box-shadow: 2px 4px 8px rgba(0,0,0,0.2);
}
span.cart-title {
font-size: 12px;
line-height: 15px;
display: block;
font-weight: bold;
}
span.cart-count {
color: #666;
font-size: 10px;
display: block;
font-weight: 500;
}
.site-footer {
background-color: #ededed;
padding: 30px 0 0;
color: #000;
font-family: Arial, Helvetica;
border-top:#d32f2f solid 20px;
}
ul.extrapages li {
line-height: 1;
margin: 0 0 15px;
}
ul.extrapages li a {
color: #000;
font-size: 14px;
}
.footer-social {
text-align: center;
}
.social-icons,
.global-footer {
padding-top: 15px;
padding-bottom: 15px;
}
.copyright {
padding-top: 50px;
padding-bottom: 0;
text-align: center;
color: #626262;
font-size: 14px;
font-weight: 500;
}
.mailist-box {
width: 320px;
float: right;
margin-bottom: 10px;
}
.mailinglist-form{
width: 100%;
}
.mailist-box h3 {
margin: 0 0 15px;
/*font-family: 'Montserrat', sans-serif;*/
font-family: Arial, Helvetica;
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
}
.mailinglist-input.form-control {
background-color: #fff;
border-color: #fff;
max-width: 100%;
color: #000;
float: left;
text-transform: uppercase;
}
.mailinglist-submit {
background-color: var(--kbs-blue);
color: #fff !important;
border-color: var(--kbs-blue) !important;
float: right;
width: 100%;
text-transform: uppercase;
margin-top: 10px;
}
.mailinglist-input.form-control{
background-position: 95% center;
background-repeat: no-repeat;
background-image: url(images/mail-icon.png);
}
.btn-default.mailinglist-submit:hover,
.btn-default.mailinglist-submit:focus {
opacity: 0.6;
}
.mailinglist-response {
display: none;
}
.maillist-options {
margin: 15px 0 0;
padding: 0;
}
.maillist-pad{
padding: 0;
}
.subscribe {
float: left;
margin-right: 20px;
line-height: 13px;
width: 100%;
margin-bottom: 5px;
}
.subscribe input[type="radio"] {
margin: 0;
vertical-align: middle;
}
.subscribe label {
margin: 0;
font-size: 13px;
line-height: 13px;
font-weight: 300;
margin-left: 3px;
color: #000;
cursor: pointer;
text-transform: uppercase;
}
.footer-social ul {
margin: 0;
}
ul.payment-icons {
text-align: right;
}
ul.payment-icons li {
font-size: 34px;
line-height: 36px;
vertical-align: middle;
}
ul.social-icons li.social-icons-label{
width: 100%;
}
ul.payment-icons li.payment-icons-label,
ul.social-icons li.social-icons-label {
font-size: 14px;
font-weight: 600;
vertical-align: middle;
font-family: Arial, Helvetica;
text-transform: uppercase;
margin-right: 20px;
}
.social-icons {
padding: 0;
margin: 0;
}
.social-icons li a {
color: #d32f2f;
background-color: transparent;
width: 20px;
height: 32px;
line-height: 32px;
border-radius: 100%;
display: block;
text-align: center;
font-size: 18px;
}
.social-icons li a:hover {
opacity: 0.6;
}
/*.product-item .reviews-stars:before {
font-family: "fontello";
content: "\e803 \e803 \e803 \e803 \e803";
color: #b8b8b8;
}
.product-item .reviews-stars {
color: #000;
}*/
.reviews-stars:before {
font-family: "fontello";
content: "\e803 \e803 \e803 \e803 \e803";
color: #b8b8b8;
}
.rating:hover .rating-star:hover,
.rating:hover .rating-star:hover ~ .rating-star,
.rating-input:checked ~ .rating-star,
.reviews-stars {
color: #ffd700;
letter-spacing: 3px;
}
.product-item .reviews span.reviews-count{
}
.product-items .product-item, .product-item .name, .product-item .reviews{
text-align: center;
padding-top:0;
}
.product-item .name a {
color: #0056b3;
font-variant: small-caps;
font-weight: 700;
font-size:22px;
}
.product-item .name_bh a {
color: #0056b3;
font-variant: small-caps;
font-weight: 700;
font-size:20px;
}
.product-item del.regular-price {
text-decoration: line-through;
}
.sale-price {
color: #d04b64;
}
del.original-price {
font-weight: 500;
}
span.freeshipping {
color: #00a888;
}
.product-item .status span:before {
content: "-";
}
.product-item .status {
font-size: 12px;
}
.product-item .price {
font-size: 16px;
font-weight: bold;
}
.product-item .img {
min-height: 175px;
position: relative;
border: none;
background-color: #fff;
}
.product-item .img a {
display: block;
}
.product-item .img img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-height: 100%;
max-width: 100%;
}
.product-item .action .btn {
min-width: 150px;
background-color: #0056b3;
color: #fff;
border: 1px solid #0056b3;
}
.product-item .action .btn:hover{
background-color: #fff;
color: #0056b3;
border: 1px solid #0056b3;
}
.head-mobile-nav > a {
color: #000;
font-size: 24px;
line-height: 1;
}
.banner-section{
border-top: 10px solid #d32f2f;
border-bottom: 10px solid #d32f2f;
}
.banner-section img { width: 100%; }
.banner-section img:hover { opacity: .8; }
.banner2-section img{
width: 100%;
}
.ig-section{
padding: 10px 0;
text-align: center;
background-color: #d32f2f;
color: #fff;
text-transform: uppercase;
}
.ig-section a{
color: #fff;
font-weight: 600;
font-size: 20px;
}
/*
** Homepage
*/
.post-content img {padding:20px 0;display:block;margin:0 auto;max-width:100%;height:auto;}
.products-section {
background-color: transparent;
padding: 0;
}
.products-section h2 {
font-size: 1.7rem;
line-height: 1;
font-weight: 500;
text-transform: capitalize;
padding-bottom: 10px;
margin: 0 0 25px;
border-bottom: 1px solid #ececec;
position: relative;
border: none;
}
.products-section h2:after {
content: "";
width: 60px;
height: 1px;
background-color: #000;
display: block;
position: absolute;
bottom: -1px;
z-index: 10;
}
.home-page-content {
padding: 0;
}
.card-icons{
margin-top: 10px;
}
.feature-section{
padding:10px 0;
text-align: center;
background-color: #0056b3;
color: #fff;
font-variant: small-caps;
font-size:32px;
font-weight:700;
margin:5px 0;
}
.h1-holder,.h1-holder h1{
height: 80px;
}
/*.home-page-content .category-footer {
padding: 40px 0 60px;
}*/
.home-page-content .category-footer h3 {
font-size: 20px;
line-height: 1;
margin: 0 0 10px;
font-weight: 700;
}
.home-page-content .category-footer p {
margin: 0 0 30px;
text-align: justify;
}
.home-page-content .category-footer a:hover img {
opacity: 0.7;
}
.home-page-content .category-header img {
margin: 0 auto;
}
.extrapages-shower a {
display: block;
background-color: #2d2d2d;
color: #fff;
padding: 10px 18px;
text-decoration: none !important;
}
.extrapages-shower a:after {
content: "\f106";
font-family: "fontello";
float: right;
}
.extrapages-shower a.collapsed:after {
content: "\f107";
}
.header-right{
margin-top: 20px;
text-align: right;
padding-left: 0;
}
.header-mess{
padding: 5px 0;
margin: 0;
font-size: 17px;
}
.header-tel{
font-size: 17px;
margin-right: 0 !important;
}
.header-tel a, .header-tel{
margin: 0 10px;
color: #0056b3;
}
.header-tel a:last-child{
margin-right: 0;
}
@media(min-width: 1024px){
#navbar, .social-two{
display: inline-block !important;
vertical-align: middle;
}
}
.social-two ul.social-icons li.social-icons-label{
color: #fff;
width: auto;
font-size: 1.1rem;
border-left: 1px solid #fff;
padding-left: 20px;
font-weight: 500;
margin-right: 0;
}
.social-two .social-icons li a{
color: #fff;
}
.menu-holder{
text-align: center;
min-height: 50px;
}
.navbar-nav > li > .dropdown-menu{
min-width: 800px;
overflow: hidden;
}
.active-subdrop ul{
/* display: block !important; */
}
.active-subdrop{
background-color: #edb3b3 !important;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-2px); }
50% { transform: translateX(2px); }
75% { transform: translateX(-2px); }
}
.navbar .dropdown:hover > a {
animation: shake 0.3s ease;
}
.dropdown-menu > div{
padding: 0;
}
.dropdown-menu li ul{
display: none;
}
.dropdown-menu li a{
font-weight: 600;
padding: 10px;
display: block;
color: #000;
background-color: #f5f5f5;
text-decoration: none !important;
}
.dropdown-menu > div > li:hover > a,
.dropdown-menu li a:hover {
background: linear-gradient(135deg, #ffd633 0%, #ffcc00 100%);
color: #1a1a1a;
}
.dropdown-menu li a:hover ~ ul{
/* display: block; */
}
.navbar-inverse .navbar-nav > li:hover > ul > div > li:first-child ul{
display: block;
}
.dropdown-menu li ul li a{
font-weight: 400;
}
.dropdown-menu li ul{
position: absolute;
left: 100%;
background-color: #fff;
width: 500px;
padding: 0;
top: 0;
}
.dropdown-menu li ul li{
width: 50%;
float: left;
background-color: #fff;
list-style: none;
}
.dropdown-menu > div > li a{
position: relative;
}
.dropdown-menu > div > li > a:after{
content: "\f105";
font-family: "fontello";
position: absolute;
right: 10px;
}
.dropdown-menu li ul li a{
background-color: #fff;
}
.dropdown-menu li ul li a:hover{
text-decoration: underline;
}
@media(max-width: 1400px) {
.navbar-inverse .navbar-nav > li > a{
padding: 16px;
font-size: 1rem;
}
}
@media(max-width: 1023px) {
.navbar-inverse .navbar-nav > li > a {
font-size: 16px;
min-height: 0;
}
.navbar-nav > li.dropdown > a:after {
float: right;
}
.mailist-box {
float: none;
padding: 30px 0;
width: 100%;
max-width: 320px;
margin: 0 auto;
}
.social-two, .navbar-nav > li.dropdown > a:after{
display: none !important;
}
#navbar, .social-two{
text-align: left;
width: 100%;
}
.footer-social {
text-align: center;
}
#categories li{
width: 100%;
text-align: left;
display: block;
}
}
@media(max-width: 1200px) {
.header-mess{
font-size: 14px;
}
.header-tel{
font-size: 15px;
}
.header-right{
padding: 0;
}
.header-tel a, .header-tel{
margin: 0 5px;
}
.navbar-nav > li > .dropdown-menu{
min-width: 650px;
overflow: hidden;
}
}
@media(max-width: 991px) {
.top-nav ul li a{
font-size: 18px;
}
.site-header{
padding: 10px 0;
}
.header-body p{
font-size: 16px;
}
.footer-social{
margin-top: 20px;
}
#extrapages li{
text-align: center;
}
.dropdown-menu{
display: none !important;
}
.top-nav ul li a {
font-size: 18px;
padding: 5px 10px;
}
}
/* -- Top nav single-row fix: 768px?991px (Bootstrap sm breakpoint) --
At this range the container is 750px. Six links at 18px don't fit,
causing Email Sign-Up and My Cart to wrap to a second row.
Reducing font size and padding keeps all links on one line. */
@media (max-width: 991px) and (min-width: 768px) {
/* Hide the black navbar entirely */
.navbar-wrapper {
display: none !important;
}
/* Red bar: left-align, sized to just wrap the hamburger */
.top-nav {
padding: 0;
}
.top-nav .container {
display: flex;
align-items: center;
justify-content: flex-start; /* hamburger sits on the left */
padding: 0 15px;
min-height: 44px;
}
/* Hide the now-empty row/col that held the text links */
.top-nav .row {
display: none;
}
/* Hamburger container in the red bar */
.top-nav .head-mobile-nav {
display: block !important;
float: none;
margin: 0;
padding: 0;
width: auto;
flex-shrink: 0;
}
/* Hamburger icon ? white on red background */
.top-nav #mobile-menu-trigger {
color: #ffffff;
font-size: 24px;
padding: 6px 8px;
line-height: 1;
}
/* Hide the empty hamburger slot in site-header */
.site-header .head-mobile-nav {
display: none !important;
}
.breadcrumb-wrapper {
border-top: 3px solid #d32f2f;
padding-top: 4px;
}
}
@media(max-width: 767px) {
.logo {
text-align: center;
height: auto;
margin-top: 0;
}
.logo img {
position: static;
}
.ig-section a{
font-size: 14px;
}
.searchBox {
padding: 20px 0 0;
margin: auto;
}
.search-form-col {
clear: both;
}
.header-tel{
margin: 0;
}
.header-right{
text-align: center;
}
.flex-direction-nav a:before {
font-size: 24px;
}
.flex-direction-nav a {
width: 24px;
height: 24px;
line-height: 24px;
margin: -12px 0 0;
}
.social-icons li a {
width: 24px;
height: 24px;
line-height: 24px;
font-size: 12px;
}
.footer-social ul li {
padding: 0 4px;
}
.extrapages {
display: none;
}
.home-page-content .category-header {
padding: 5px 0;
}
.extrapages-shower a {
display: block;
}
ul.extrapages {
margin: 0;
padding: 15px 0;
}
ul.extrapages li a {
font-size: 14px;
}
}
@media(max-width: 567px) {
.product-items.product-items-1 .product-item,
.product-items.product-items-2 .product-item,
.product-items.product-items-3 .product-item,
.product-items.product-items-4 .product-item,
.product-items.product-items-5 .product-item,
.product-items.product-items-6 .product-item {
max-width: 270px;
}
}
.menu-open {
overflow: hidden;
}
.mobile-menu {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10000;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
background-color: rgba(0,0,0,0.5);
}
.menu-open .mobile-menu {
overflow-x: hidden;
overflow-y: auto;
}
.mobile-menu-inner {
background-color: #fff;
padding: 30px 20px;
width: 250px;
margin-left: auto;
margin-right: 0;
min-height: 100vh;
position: relative;
transition: transform .3s ease-out;
transform: translate(250px,0);
}
.menu-open .mobile-menu-inner {
transform: translate(0,0);
}
.mobile-menu-close a {
color: #000;
display: inline-block;
line-height: 1;
font-size: 24px;
text-decoration: none;
}
.mobile-menu-close a:after {
content: '\e805';
font-family: "fontello";
}
.mobile-menu-widget {
margin: 30px 0;
}
.mobile-menu-widget h3 {
margin: 0;
font-size: 16px;
text-transform: uppercase;
font-weight: bold;
padding-bottom: 10px;
margin-bottom: 10px;
line-height: 1;
border-bottom: 1px solid #ececec;
}
.mobile-menu-widget ul {
padding: 0;
margin: 0;
list-style: none;
}
.mobile-menu-widget ul li {
margin: 0 0 0;
}
.mobile-menu-widget ul li a {
font-size: 1.1rem; /* Scaled via your rem logic */
padding: 12px 15px;
border-bottom: 1px solid var(--border-subtle);
display: flex;
align-items: center;
color: #333;
font-weight: 500;
transition: background 0.2s;
}
.mobile-menu-widget ul li a:hover {
color: #333;
}
.mobile-menu-widget ul ul {
display: none !important;
}
.mobile-menu-widget ul li a:after {
display: none;
}
.mailinglist-response {
margin: 10px 0;
padding: 10px 20px;
font-size: 12px;
background-color: #2d2d2d;
color: #ccc;
}
.mailinglist-error span {
color: #8a6d3b;
}
.mailinglist-subscribed span,
.mailinglist-unsubscribed span {
color: #3c763d;
}
.mailinglist-response,
.mailinglist-response div {
}
.floating-cart {
position: fixed;
top: 50%;
right: 0;
z-index: 999;
background-color: #101010;
color: #fff;
border-radius: 20px 0 0 20px;
padding: 15px;
text-align: center;
width: 90px;
display: none;
}
.floating-cart a,
.floating-cart a:hover {
color: #ececec;
text-decoration: none;
}
.floating-cart a:hover {
opacity: 0.6;
}
.floating-cart span.cart-icon {
display: block;
font-size: 30px;
line-height: 1;
}
.floating-cart span.cart-details {
font-size: 12px;
text-transform: none;
display: block;
margin: 5px 0 0;
}
.likebutton{
float: left;
width: 100%;
}
.paging {
float: right;
}
.paging strong,
.paging a {}
.paging strong,
.paging a:hover {
color: #fff;
background-color: #0f0f0f;
text-decoration: none;
}
.special-action .btn-link{
padding: 10px;
background-color: #d32f2f;
color: #fff;
}
#sticky-header, .top-nav{
z-index: 9999;
}
#sticky-header.smaller{
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999;
transition: height 0.3s;
background: #fff;
}
#sticky-header.smaller .site-header {
padding: 0px 0;
transition: padding 0.3s;
}
#sticky-header.smaller .navbar-inverse .navbar-nav > li > a {
min-height: 35px;
transition: height 0.3s;
}
#sticky-header.smaller .navbar {
min-height: 35px;
}
#sticky-header.smaller .navbar-wrapper{
background-color: #fff !important;
box-shadow: 0px 2px 11px -4px rgba(0, 0, 0, 0.29);
}
#sticky-header .navbar-wrapper{
background-color: transparent;
}
.active-static-margin{
margin-top:94px
}
.top-smaller{
position: fixed;
left: 0;
top: 0;
width: 100%;
}
body .top-nav.top-smaller ul{
padding: 13px 0;
}
@media(max-width:767px){
.active-static-margin{
margin-top:0px !important;
}
#sticky-header.smaller{
position: inherit;
}
.header-specials{
font-size: 20px;
}
}
@media(max-width: 1200px) {
.hp-slider-text h3{
font-size: 70px;
}
.hp-brands-slider .row > div:last-child .bottom-banner-item a{
margin-left: 15px
}
}
@media(max-width: 991px) {
.r-tabs-anchor:before {content: "\002B";padding-right:5px;}
.r-tabs-state-active.r-tabs-accordion-title a:before{content:"\2212";padding-right:5px;}
.hp-slider-text-outer,
.hp-slider-text {
display: block;
height: auto;
}
.hp-slider-text {
padding: 30px;
}
.hp-slider-text h3 {
font-size: 48px;
}
.hp-full-banner-text {
width: 100%;
padding: 50px 0;
}
.hp-full-banner-text h2 {
font-size: 36px;
}
.bottom-banner-item {
margin: 0 0 30px;
}
}
@media(max-width: 767px) {
.hp-brands-slider .row > div:last-child .bottom-banner-item a{
margin-left: 0;
}
.bottom-banner-item a img{
max-width: 280px;
}
.hp-brands-slider .row > div:last-child .bottom-banner-item a img{
max-width: 300px;
}
.hp-slider-text h3 {
font-size: 36px;
margin: 20px 0 20px;
}
.hp-slider-cta{
margin-bottom: 20px;
}
.home-category-header {
padding: 15px 0;
}
.homepage-category {
padding-top: 7.5px;
padding-bottom: 7.5px;
text-align: center;
}
.homepage-category > a {
display: inline-block;
}
.free-shipping-message {
text-align: center;
padding: 10px 0;
margin: 0;
}
.dir_header, .dir_header a, .dir_header a:hover {
color:#d32f2f;
font-size:1.1rem;
text-align:left;
margin:5px 0;
padding:0 0 2px 0;
font-weight:700;
font-variant:small-caps;
border-bottom:#666 dotted 2px;
text-decoration:none;
}
}
/*Instagram Gallery Feed*/
#InstagramGallery {
text-align: center;
}
#InstagramGallery .widget-title {
padding-bottom: 5px;
}
#InstagramGallery .widget-title h3 {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 700;
margin-top: 0;
margin-bottom: 19px;
letter-spacing: .1em;
text-transform: uppercase;
}
#InstagramGallery .widget-title p.instagram-desc {
line-height: 18px;
position: relative;
display: inline-block;
letter-spacing: .05em;
}
#InstagramGallery .widget-title p.instagram-desc::before {
position: relative;
top: 3px;
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
content: '';
/*background: url('images/social.png') -264px -10px no-repeat;*/
}
#instafeed .owl-nav > div{
font-size: 0;
position: absolute;
top: 50%;
width: 37px;
height: 37px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 50%;
background: #fff url('images/sprite-icons.png') no-repeat;
}
.owl-nav > div.disabled {
opacity: .5;
/* Opacity for Modern Browsers */
filter: alpha(opacity=50);
/* Opacity for IE8 and lower */
}
.owl-nav > div.disabled:hover {
cursor: default;
}
#instafeed .owl-nav > div.owl-prev{
left: -55px;
background-position: -150px -100px;
}
#quickCartRelated .owl-nav > div.owl-prev {
left: -15px;
}
#blogRelatedBlock .owl-nav > div.owl-prev {
left: 0;
}
#instafeed .owl-nav > div.owl-next {
right: -55px;
background-position: -200px -100px;
}
#quickCartRelated .owl-nav > div.owl-next {
right: -15px;
}
#blogRelatedBlock .owl-nav > div.owl-next {
right: 0;
}
#modTopSellers .owl-nav > div.owl-prev {
left: 0;
}
#modTopSellers .owl-nav > div.owl-next {
right: 0;
}
#InstagramGallery a.insta-btn {
min-width: 210px;
margin-top: 40px;
}
#mainContainer {
min-height: 500px;
}
#blogRelatedBlock .owl-nav {
display: none;
}
#blogRelatedBlock .owl-carousel:hover .owl-nav {
display: block;
}
.owl-carousel .owl-item img {
margin-top: auto;
width: 100%;
height: 350px;
max-height: none;
max-width: none;
object-fit: cover;
}
.owl-carousel.owl-drag .owl-item{
max-height: 308px;
}
@media(max-width: 1060px){
#instafeed .owl-nav > div.owl-next{
right: 22px;
}
#instafeed .owl-nav > div.owl-prev{
left: 22px;
}
}
@media(max-width: 993px){
#instafeed .owl-nav > div.owl-next{
right: -55px;
}
#instafeed .owl-nav > div.owl-prev{
left: -55px;
}
}
@media(max-width: 991px){
.instagram-section .widget-title a h2{
font-size: 21px
}
}
@media(max-width: 840px){
#instafeed .owl-nav > div.owl-next{
right: 22px;
}
#instafeed .owl-nav > div.owl-prev{
left: 22px;
}
}
/*
@media(max-width: 1199px){
.instagram-section .owl-carousel .owl-item{
width: 220px !important;
height: 220px;
}
}
@media(max-width: 767px){
.instagram-section .owl-carousel .owl-item{
width: 340px !important;
height: 340px;
}
}
@media(max-width: 700px){
.instagram-section .owl-carousel .owl-item{
width: 296px !important;
height: 296px;
}
}
@media(max-width: 624px){
.instagram-section .owl-carousel .owl-item{
width: 285px !important;
height: 285px;
}
}
@media(max-width: 500px){
.instagram-section .owl-carousel .owl-item{
width: 345px !important;
height: 400px;
}
}
*/
#reviewlist-modal {
top: 35px;
}
li.double {
margin:0 0 10px -2em;
color:#000;
text-align:left;
list-style-type: none;
}
li.double:before {content: "\2713";
color: #0056b3;
font-weight:900;
letter-spacing: 2px;
}
.tab_header, .tab_header a, .tab_header a:hover {
border-bottom: 2px solid #0056b3;
padding-bottom: 10px;
margin-bottom: 25px;
color: #0056b3;
font-weight: bold;
}
.respond {
display: block; /* Ensures the element behaves like a block element */
max-width: 100%; /* Prevents the element from exceeding its container */
height: auto; /* Maintains aspect ratio for images/videos */
margin: 0 auto; /* Centers the element horizontally if needed */
object-fit: contain; /* Ensures content fits within box without distortion (good for images/videos) */
box-sizing: border-box; /* Includes padding/border in width calculations */
}
.respond_test {
display: block; /* Ensures the element behaves like a block element */
max-width: 100%; /* Prevents the element from exceeding its container */
height: auto; /* Maintains aspect ratio for images/videos */
margin: 0; /* Centers the element horizontally if needed */
object-fit: contain; /* Ensures content fits within box without distortion (good for images/videos) */
box-sizing: border-box; /* Includes padding/border in width calculations */
}
.modern-card {
display: block;
margin: 12px auto;
width: 97%;
padding: 20px;
border-radius: 12px;
background-color: var(--white);
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.modern-card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.product-item .name {
height:auto;
}
.clear {
height:0px;
clear:both;
}
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF THREE */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }
/* GRID OF TWO */
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 49.2%;
}
.category-actions {
padding: 0 0 5px;
margin: 5px 0 5px;
border-bottom: none;
}
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_3_of_3,
.span_2_of_3,
.span_1_of_3,
.span_2_of_2,
.span_1_of_2 { width: 100%; }
.feature-section { font-size: 1.2rem; }
.divTableHeading { font-size: 0.85rem; }
.divTableCell,
.divTableHead { font-size: 0.85rem; padding: 3px 0; font-weight: normal; }
.tab_header,
.tab_header a,
.tab_header a:hover { font-size: 1.2rem; }
}
.phone {font-weight:700;font-size:1.8rem;text-align:center;margin:0;}
/* ===== XTC Pricing Table - Modern Override ===== */
.divTable.xtcpTable .divTableHeading {
background: #1a1a1a;
}
.divTable.xtcpTable .divTableHeading .divTableHead {
color: var(--white);
font-size: 0.9rem;
padding: 12px 10px;
border-color: #333;
letter-spacing: 0.3px;
}
.divTable.xtcpTable .divTableHeading .divTableHead:first-child {
background: #d32f2f;
}
.divTable.xtcpTable .divTableCell {
padding: 10px 12px;
font-size: 0.95rem;
border-color: #dee2e6;
}
.divTable.xtcpTable .divTableCell:first-child {
font-weight: 700;
background-color: #f8f9fa;
color: #1a1a1a;
border-left: 4px solid #d32f2f;
}
.divTable.xtcpTable .divTableBody .divTableRow:nth-child(even) {
background: #f8f9fa;
}
.divTable.xtcpTable .divTableBody .divTableRow:nth-child(odd) {
background: var(--white);
}
.divTable.xtcpTable .divTableBody .divTableRow:hover {
background-color: #fff3f3;
}
.divTable{
display: table;
width: 100%;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
font-weight:700;
background-color: #EEE;
display: table-header-group;
}
.divTableCell, .divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
vertical-align: middle;
color:black;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
.directions {background-color:#0056b3;
color:white;
margin:5px 10px;
font-size:22px;
font-variant:small-caps;
text-align:center;
font-weight:700;
padding:10px;
border:solid 1px black;
letter-spacing: 1px;
}
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
border: 0;
}
.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
.embed-responsive-4by3 {
padding-bottom: 75%;
}
.ibold {
font-weight:700;
}
.vbot {
vertical-align: bottom;
}
.bbb1 {border-bottom: 1px black solid;}
.tbb1 {border-top: 1px black solid;}
.dir-box {
max-width: 190px;
float: right;
border: 1px solid var(--border-light); /* was black 2px solid */
border-radius: 8px;
overflow: hidden; /* clips links to rounded corners */
padding: 0;
margin: 0 0 12px 10px;
background-color: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* subtle card lift */
}
.dlogo {display: block;margin:15px auto;padding:0 10px;}
.imgc {display:block;margin:0 auto;}
/* Replace the current A.guide-sm block */
A.guide-sm {
color: #fff;
font-size: 0.85rem;
font-weight: 700;
font-style: normal;
text-decoration: none;
display: block;
background-color: var(--kbs-blue); /* was var(--kbs-gold) */
padding: 9px 10px;
text-align: center;
margin: 0;
transition: background-color 0.2s, color 0.2s;
}
A.guide-sm:hover {
text-decoration: none;
background-color: var(--kbs-blue-dark); /* was #0056b3 flat swap */
color: #fff;
}
td.guide-sm {
border:1px solid black;
width:50%;
}
.medium-button {
position: relative;
vertical-align: top;
height: 30px;
padding: 0 10px;
margin:0px 5px;
font-size: 18px;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #0056b3;
border: 0;
border-bottom: 2px solid var(--kbs-blue-dark);
cursor: pointer;
box-shadow: inset 0 -1px var(--kbs-blue-dark);
font-variant:small-caps;
}
.medium-button:active {
top: 1px;
outline: none;
box-shadow: none;
}
@media only screen and (max-width: 360px) {
.logo {height: 74px;}
.site-header {padding: 10px 0;height: 330px;}
.col-lg-5.col-md-5.col-sm-5.search-form-col {height: 110px;}
.col-lg-5.col-md-5.col-sm-5.search-form-col > div:nth-of-type(1) {height: 60px;}
.home-page-content section.homepage-slider {height: 129px;}
.home-page-content h1.feature-section {height: 42px;}
.home-page-content .col-sm-6.himage img {height: 108px;}
.home-page-content section.header-body .container > a:nth-of-type(1) > img {height: 97px;}
.home-page-content section.header-body .container > a:nth-of-type(2) > img {height: 97px;}
.home-page-content section.header-body .container > .respond > a > img:nth-of-type(1) {height: 226px;}
}
.radio-toolbar {
display:inline;
font-variant:small-caps;
margin: 10px 0;
padding: 0;
/* This clears the floats of any inline elements inside */
overflow: hidden;
}
/* Hide the actual radio input */
.radio-toolbar input[type="radio"] {
display: none; /* Simplest way to hide for older versions */
}
/* Base Label Style - The "Buttons" */
.radio-toolbar label {
display: inline-block; /* Replaces Flexbox */
padding: 8px 16px;
margin: 0 5px 8px 0; /* Creates the gap since 'gap' property won't work */
background-color: #f8f9fa;
color: #444;
border: 2px solid #dee2e6;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
text-align: center;
transition: background-color 0.2s ease-in-out,
border-color 0.2s ease-in-out,
color 0.2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* Hover state */
.radio-toolbar label:hover {
background-color: var(--white);
border-color: #d32f2f;
color: #d32f2f;
}
/* Checked State: The "Selected" Button */
.radio-toolbar input[type="radio"]:checked + label {
background-color: #0056b3;
border-color: #0056b3;
color: var(--white);
/* Soft shadow for depth */
box-shadow: 2px 2px 5px rgba(0,0,0,0.15);
}
/* Modern Checkmark Indicator */
.radio-toolbar input[type="radio"]:checked + label::after {
content: "\2713"; /* Unicode checkmark */
margin-right: 4px;
font-weight: 900;
}
h1.blog {font-size:1.4rem;color:#d32f2f;font-weight:700;}
h2.blog {font-size:1.3rem;color:#d32f2f;font-weight:700;}
h3.blog {font-size:1rem;color:#0056b3;font-weight:700;text-decoration:underline;}
.sms {box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.3);}
/* LITE YOUTUBE CSS */
lite-youtube {
background-color: #000;
position: relative;
display: block;
contain: content;
background-position: center center;
background-size: cover;
cursor: pointer;
max-width: 720px;
}
/* gradient */
lite-youtube::before {
content: attr(data-title);
display: block;
position: absolute;
top: 0;
/* Pixel-perfect port of YT's gradient PNG, using https://github.com/bluesmoon/pngtocss plus optimizations */
background-image: linear-gradient(180deg, rgb(0 0 0 / 67%) 0%, rgb(0 0 0 / 54%) 14%, rgb(0 0 0 / 15%) 54%, rgb(0 0 0 / 5%) 72%, rgb(0 0 0 / 0%) 94%);
height: 99px;
width: 100%;
font-family: "YouTube Noto",Roboto,Arial,Helvetica,sans-serif;
color: hsl(0deg 0% 93.33%);
text-shadow: 0 0 2px rgba(0,0,0,.5);
font-size: 18px;
padding: 25px 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
box-sizing: border-box;
}
lite-youtube:hover::before {
color: white;
}
/* responsive iframe with a 16:9 aspect ratio
thanks https://css-tricks.com/responsive-iframes/
*/
lite-youtube::after {
content: "";
display: block;
padding-bottom: calc(100% / (16 / 9));
}
lite-youtube > iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 0;
}
/* play button */
lite-youtube > .lyt-playbtn {
display: block;
/* Make the button element cover the whole area for a large hover/click target... */
width: 100%;
height: 100%;
/* ...but visually it's still the same size */
background: no-repeat center/68px 48px;
/* YT's actual play button svg */
background-image: url('data:image/svg+xml;utf8,');
position: absolute;
cursor: pointer;
z-index: 1;
filter: grayscale(100%);
transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
border: 0;
}
lite-youtube:hover > .lyt-playbtn,
lite-youtube .lyt-playbtn:focus {
filter: none;
}
/* Post-click styles */
lite-youtube.lyt-activated {
cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lyt-playbtn {
opacity: 0;
pointer-events: none;
}
.lyt-visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.youtube-player {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
margin: 5px;
}
.youtube-player iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: transparent;
}
.youtube-player img {
object-fit: cover;
display: block;
left: 0;
bottom: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
border: none;
height: auto;
cursor: pointer;
transition: filter 0.4s, -webkit-filter 0.4s;
}
.youtube-player img:hover {
-webkit-filter: brightness(75%);
}
.youtube-player .play {
height: 48px;
width: 68px;
left: 50%;
top: 50%;
margin-left: -34px;
margin-top: -24px;
position: absolute;
background: url('/assets/images/022625b-yt.png') no-repeat;
cursor: pointer;
}
.md-radio {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
}
.md-radio input {
opacity: 0;
position: absolute;
}
.md-radio span {
width: 20px;
height: 20px;
border: 2px solid var(--kbs-blue);
border-radius: 50%;
position: relative;
transition: border-color 0.25s;
}
.md-radio span::before {
content: "";
width: 12px;
height: 12px;
background: var(--kbs-blue);
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform 0.25s ease;
}
/* Checked */
.md-radio input:checked + span::before {
transform: translate(-50%, -50%) scale(1);
}
/* FAQ Section Headings */
.faq-section h2 {
font-size: 1.6rem;
font-weight: 700;
color: #d32f2f;
margin: 30px 0 12px;
padding-left: 14px;
border-left: 5px solid #0056b3; /* KBS blue accent */
line-height: 1.3;
}
.faq-section h3 {
font-size: 1.1rem;
font-weight:700;
}
.faq-item {
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}
.faq-question {
font-weight:700;
}
.faq-answer {
font-size: .9rem;
line-height: 1.4;
color: #000;
}
.faq-answer a {
color: #c00;
text-decoration: underline;
}
.faq-answer a:hover {
text-decoration: none;
}
.shipping-list li {
margin-bottom: .8rem;
line-height: 1.4;
}
.testimonial{
margin: 0 0 1.5rem 0;
font-size: 1.05rem;
line-height: 1.7;
color: rgba(0,0,0,.88);
display: block;
}
.testimonial::before{
content: "\201C"; /* left double quotation mark */
display: inline-block;
font-size: 3rem;
line-height: 1;
margin-right: .5rem;
opacity: .45;
transform: translateY(.15em); /* nudges it into a nice position */
}
.article-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
border-color: #0056b3 !important;
}
.video-showcase {
max-width: 850px;
margin: 30px auto;
background: var(--white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
border: 1px solid #eaeaea;
}
.video-caption {
background: #f8f9fa;
padding: 15px 20px;
border-bottom: 3px solid #0056b3;
color: #333;
font-weight: 700;
text-align: center;
font-size: 1.1em;
line-height: 1.4;
}
.video-wrapper {
padding: 10px;
background: #000; /* Creates a clean 'letterbox' effect */
}
.tab_header_alt {
border-bottom: 2px solid #0056b3;
padding-bottom: 10px;
margin-bottom: 25px;
color: #0056b3;
font-weight: bold;
}
.resource-section {
margin-top: 30px;
padding: 20px;
background: #fdfdfd;
border: 1px solid #eee;
border-radius: 12px;
}
.resource-group-title {
font-size: 18px;
font-weight: 700;
color: #0056b3;
margin-bottom: 15px;
border-left: 4px solid #0056b3;
padding-left: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.resource-link-btn {
display: block;
background: var(--white);
border: 1px solid #cbd5e0;
color: #2d3748;
padding: 12px 15px;
margin-bottom: 12px;
border-radius: 6px;
text-decoration: none !important;
transition: transform 0.2s ease,
color 0.2s ease;
font-weight: 500;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.resource-link-btn:hover {
transform: translateX(5px);
color:var(--kbs-blue);
}
.resource-link-btn i {
margin-right: 10px;
color: #0056b3;
}
.resource-link-btn:hover i {
color: var(--white);
}
.btn-cta-modern {
display: inline-block;
padding: 16px 35px;
/* KBS Gold Gradient: Transitioning from a bright metallic gold to a deeper harvest gold */
background: linear-gradient(135deg, #ffcc00 0%, #d4a017 100%);
/* Dark text provides much better contrast/accessibility on gold than white */
color: #000000 !important;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 50px;
text-decoration: none !important;
transition: transform 0.3s ease,
box-shadow 0.3s ease;
/* Shadow adjusted to a warmer amber/gold tone to avoid a "dirty" look */
box-shadow: 0 4px 15px rgba(212, 160, 23, 0.4);
border: none;
cursor: pointer;
margin: 10px 0;
}
.btn-cta-modern:hover {
/* Slight lift and brighten effect for better UX on desktop */
transform: translateY(-2px);
background: linear-gradient(135deg, #ffd633 0%, #ffcc00 100%);
box-shadow: 0 6px 20px rgba(212, 160, 23, 0.6);
color: #000000 !important;
}
.btn-cta-modern .arrow {
display: inline-block;
transition: transform 0.3s ease;
margin-left: 8px;
}
.btn-cta-modern:hover .arrow {
transform: translateX(5px);
}
.label-pill {
background-color: #d32f2f;
color: var(--white);
border-radius: 50px;
padding: 4px 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.data-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #eee; /* Light line between rows */
font-size: 13px;
color: #333;
}
.data-label {
font-weight: bold;
color: #555;
padding-right: 10px;
}
.data-value {
text-align: right;
color: #000;
}
/* Removes the last border for a cleaner look */
.data-row:last-child {
border-bottom: none;
}
.hero-section {
background: #f4f7f9;
padding: 20px;
border-radius: 10px;
margin-bottom: 10px;
}
.kbs-breadcrumb-custom {
display: flex !important;
flex-wrap: wrap;
align-items: center;
list-style: none !important;
padding: 0 !important;
margin: 0 0 10px 0 !important;
background: transparent !important;
}
.kbs-breadcrumb-custom li {
display: flex !important;
align-items: center;
font-size: 11px !important;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 !important;
padding: 0 !important;
}
/* Create the single separator */
.kbs-breadcrumb-custom li:not(:last-child):after {
content: "|";
padding: 0 10px;
color: #ccc;
font-size: 11px;
}
/* Nuke any default separators or icons coming from Shift4Shop */
.kbs-breadcrumb-custom li:before,
.kbs-breadcrumb-custom li span.separator {
display: none !important;
content: "" !important;
}
/* Link and Text Styling */
.kbs-breadcrumb-custom li a,
.kbs-breadcrumb-custom li.current-page {
color: #666;
text-decoration: none;
white-space: nowrap;
}
.kbs-breadcrumb-custom li a:hover {
color: #d32f2f; /* KBS Red */
}
.kbs-breadcrumb-custom li.current-page {
color: #999;
}
/* This "Media Query" ensures the code only runs on screens wider than 992px (Desktop) */
@media (min-width: 992px) {
/* 1. Set the Row to Flexbox */
.product-cols.row {
display: flex;
flex-wrap: wrap;
}
/* 2. Make the Left Image Column Sticky */
.product-cols.row > .col-md-5 {
float: none; /* Disables Bootstrap 3 Float */
position: sticky; /* Enables Sticky behavior */
top: 110px; /* Distance from top of screen when scrolling */
align-self: flex-start; /* Prevents the div from stretching to full height */
}
/* 3. Ensure the Right Column plays nice with Flexbox */
.product-cols.row > .col-md-7 {
float: none;
}
}
#mobile-menu-trigger .icon-menu {
font-size: 32px;
line-height: 1;
}
/* Mobile menu submenu styling */
#mobile-menu .has-submenu > a {
display: block;
padding-right: 46px; /* room for toggle button */
position: relative;
}
#mobile-menu .submenu-toggle {
position: absolute;
top: 0;
right: 0;
width: 46px;
height: 100%;
border: 0;
background: transparent;
color: inherit;
}
#mobile-menu .submenu-toggle .caret {
display: inline-block;
transform: rotate(-90deg);
transition: transform .2s ease;
}
#mobile-menu .submenu-toggle[aria-expanded="true"] .caret {
transform: rotate(0deg);
}
/* hide nested lists by default */
#mobile-menu ul ul {
display: none;
padding-left: 14px; /* indent */
}
/* optional: row separators */
#mobile-menu li {
position: relative;
}
/* Modern Sidebar Container */
.kbs-sidebar-card {
max-width: 300px;
margin: 0 auto;
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border: 1px solid #e1e1e1;
}
/* Header Styling */
.kbs-card-header {
background-color: var(--rust-red-dark);
color: var(--white);
padding: 15px;
font-size: 18px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 3px solid var(--rust-red-deep);
}
/* Link List Styling */
.kbs-link-list {
display: flex;
flex-direction: column;
}
.kbs-link-item {
padding: 12px 20px;
text-decoration: none;
color: #333;
font-size: 15px;
font-weight: 500;
border-bottom: 1px solid var(--border-subtle);
transition: background-color 0.2s ease,
color 0.2s ease;
display: flex;
align-items: center;
}
/* Chevron icon effect */
.kbs-link-item::after {
content: '?';
margin-left: auto;
font-size: 20px;
color: #ccc;
transition: transform 0.2s ease;
}
.kbs-link-item:hover {
background-color: #f9f9f9;
color: #d32f2f;
text-decoration: none;
}
.kbs-link-item:hover::after {
color: #d32f2f;
transform: translateX(3px);
}
.kbs-link-item:last-child {
border-bottom: none;
}
/* Image Adjustments */
.kbs-sidebar-img {
display: block;
max-width: 100%;
height: auto;
margin: 20px auto;
border-radius: 6px;
transition: opacity 0.3s ease;
}
.kbs-sidebar-img:hover {
opacity: 0.9;
}
/* Alias for pages using .callout-blue shorthand */
.callout-blue {
background: #e8f0fb;
border-left: 6px solid var(--kbs-blue);
border-radius: 0 8px 8px 0;
padding: 14px 18px;
margin: 18px 0;
font-size: 1.05rem;
font-weight: 700;
font-style: italic;
color: #333;
line-height: 1.5;
}
.feature-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin: 25px 0;
}
.feature-card {
background: var(--white);
border: 1px solid #e1e4e8;
border-left: 5px solid var(--rust-red-dark);
padding: 20px;
border-radius: 8px;
transition: transform 0.2s;
}
.feature-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}
.feature-card h3 {
margin-top: 0;
color: var(--rust-red-dark);
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.feature-card ul {
list-style: none;
padding: 0;
margin: 0;
padding-left: 1.4em;
}
.feature-card li {
padding: 8px 0;
border-bottom: 1px solid var(--border-subtle);
font-size: 0.95rem;
}
.feature-card li:last-child {
border-bottom: none;
}
.highlight {
background: #fff3cd;
border: 1px dashed #856404;
padding: 4px;
border-radius: 8px;
text-align: left;
margin-top: 10px;
font-weight: bold;
line-height: 1.8;
}
.app-header-modern {
background: var(--accent-gray);
border-left: 8px solid var(--brand-primary);
padding: 20px 25px;
margin-bottom: 30px;
margin-top:20px;
border-radius: 0 8px 8px 0;
}
.app-header-modern h2 {
margin: 0;
color: var(--brand-primary);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.app-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin-bottom: 30px;
}
.app-card {
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 25px;
background: #fff;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.app-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
.app-card h3 {
color: var(--brand-primary);
margin-top: 0;
font-size: 1.25rem;
border-bottom: 2px solid var(--accent-gray);
padding-bottom: 10px;
margin-bottom: 15px;
}
.color-tag-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.equipment-list {
display: flex;
flex-wrap: wrap;
gap: 15px;
font-weight: 600;
color: #555;
}
.equipment-item {
background: var(--brand-primary);
color: white;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.9rem;
display: inline-block;
white-space: nowrap;
margin-bottom: 6px;
}
.product-page {
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.color-notes-container {
margin: 30px 0;
border: 1px solid var(--border-color);
border-radius: 12px;
overflow: hidden;
background: #fff;
}
.color-notes-header {
background: var(--brand-primary);
color: white;
padding: 20px;
text-align: center;
}
.color-notes-header h2 {
margin: 0;
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff !important;
border: none !important;
}
/* Responsive Table Styling for SEO Scannability */
.color-match-table {
width: 100%;
border-collapse: collapse;
}
.color-match-table th {
background: var(--accent-gray);
color: var(--brand-primary);
font-weight: 700;
text-align: left;
padding: 15px;
border-bottom: 2px solid var(--border-color);
}
.color-match-table td {
padding: 12px 15px;
border-bottom: 1px solid #eee;
font-size: 0.95rem;
vertical-align: top;
}
.color-match-table tr:hover {
background-color: var(--hover-red-bg);
}
.oem-label {
font-weight: 700;
color: #333;
display: block;
}
/* Modern Color Palette Tags */
.palette-section {
padding: 25px;
background: var(--accent-gray);
border-top: 1px solid var(--border-color);
}
.palette-section h3 {
margin-top: 0;
color: var(--brand-primary);
font-size: 1.1rem;
text-transform: uppercase;
}
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.color-tag {
background: #fff;
border: 1px solid var(--border-color);
padding: 5px 12px;
border-radius: 4px;
font-size: 0.85rem;
color: #555;
transition: border-color 0.2s,
color 0.2s;
}
.color-tag:hover {
border-color: var(--brand-primary);
color: var(--brand-primary);
}
.monitor-disclaimer {
font-style: italic;
font-size: 0.85rem;
color: #777;
margin-top: 10px;
text-align: center;
}
/* ===== Contact Page Modern Styles ===== */
.contact-hero {
text-align: center;
margin: 10px auto 18px;
max-width: 920px;
}
.contact-hero__title {
font-size: 30px;
margin: 0 0 6px;
line-height: 1.2;
font-weight: 800;
}
.contact-hero__accent {
color: #d32f2f;
}
.contact-hero__subtitle {
margin: 0 0 12px;
font-size: 16px;
opacity: 0.9;
}
.contact-hero__body {
margin: 0 auto;
max-width: 820px;
font-size: 16px;
line-height: 1.6;
opacity: 0.95;
}
.contact-intro {
margin: 0 0 14px;
font-size: 16px;
}
.contact-grid .col-sm-6,
.contact-grid .col-sm-12 {
margin-bottom: 14px;
}
.contact-card {
border: 1px solid rgba(0,0,0,0.12);
border-radius: 14px;
padding: 16px;
background: #fff;
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
height: 100%;
}
.contact-card--wide .contact-card__content {
margin-top: 10px;
}
.contact-card__title {
margin: 0;
font-size: 18px;
font-weight: 800;
}
.contact-card__desc {
margin: 6px 0 0;
font-size: 14px;
opacity: 0.85;
line-height: 1.5;
}
.contact-card__content {
margin-top: 12px;
}
.contact-card__fine {
margin: 10px 0 0;
font-size: 14px;
line-height: 1.5;
opacity: 0.9;
}
.contact-embed {
display: block;
margin: 0 auto;
max-width: 860px;
}
/* CTA row inside cards */
.contact-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 14px;
border-radius: 12px;
text-decoration: none;
border: 1px solid rgba(0,0,0,0.12);
background: rgba(211,47,47,0.06);
}
.contact-cta:hover,
.contact-cta:focus {
text-decoration: none;
border-color: rgba(211,47,47,0.35);
}
.contact-cta__label {
font-size: 13px;
opacity: 0.85;
white-space: nowrap;
}
.contact-cta__value {
font-size: 16px;
font-weight: 800;
flex: 1;
text-align: left;
}
.contact-cta__arrow {
font-size: 18px;
opacity: 0.8;
}
.contact-cta--secondary {
margin-top: 10px;
background: rgba(0,0,0,0.03);
}
/* Button-like link */
.btn-modern {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 16px;
border-radius: 12px;
text-decoration: none;
font-weight: 800;
border: 1px solid rgba(0,0,0,0.12);
background: #d32f2f;
color: #fff;
}
.btn-modern:hover,
.btn-modern:focus {
text-decoration: none;
filter: brightness(0.95);
color: #fff;
}
.contact-divider {
margin: 22px 0;
border: 0;
border-top: 1px solid rgba(0,0,0,0.12);
}
.contact-section-title {
font-size: 20px;
font-weight: 900;
margin: 0 0 12px;
}
/* Directory link cards */
.link-grid .col-sm-6 {
margin-bottom: 14px;
}
.link-card {
border: 1px solid rgba(0,0,0,0.12);
border-radius: 14px;
padding: 14px 16px;
background: #fff;
box-shadow: 0 6px 18px rgba(0,0,0,0.05);
margin-bottom: 14px;
}
.link-card__title {
margin: 0 0 10px;
font-size: 16px;
font-weight: 900;
}
.link-list {
list-style: none;
padding: 0;
margin: 0;
}
.link-list li {
margin: 0;
border-top: 1px solid rgba(0,0,0,0.08);
}
.link-list li:first-child {
border-top: 0;
}
.link-list a {
display: block;
padding: 10px 0;
text-decoration: none;
}
.link-list a:hover,
.link-list a:focus {
text-decoration: underline;
}
/* Responsive tweaks */
@media (max-width: 767px) {
.contact-hero__title { font-size: 26px; }
.contact-card { padding: 14px; }
.contact-cta__value { font-size: 15px; }
}
/* PRODUCT CATEGORY GRID */
.product-categories {
margin-top: 10px;
}
.product-categories .col-sm-3 {
margin-bottom: 14px;
}
/* category tile */
.product-categories .category-tile {
display:block;
width:100%;
text-align:left;
font-weight:600;
padding:16px 16px;
border-radius:10px;
border:1px solid var(--border-color);
background:var(--white);
white-space:normal;
line-height:1.25;
transition: background-color .15s ease,
color .15s ease,
border-color .15s ease,
transform .15s ease,
box-shadow .15s ease;
}
/* hover effect */
.product-categories .category-tile:hover{
background:var(--white);
color:#333 !important;
border-color:var(--brand-primary);
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,.08);
text-decoration:none;
}
/* arrow styling */
.product-categories .cat-arrow{
float:right;
opacity:.65;
font-size:1.05em;
}
/* focus accessibility */
.product-categories .category-tile:focus{
outline:2px solid rgba(211,47,47,.35);
outline-offset:2px;
}
/* mobile spacing */
@media (max-width:768px){
.product-categories .category-tile{
padding:14px;
font-size:0.95em;
}
}
.icon-guide {
-webkit-mask-image: var(--icon-guide-svg);
mask-image: var(--icon-guide-svg);
background-color: var(--kbs-blue); /* overrides currentColor default */
}
a:hover .icon-guide {
background-color: var(--kbs-blue-dark);
}
/* Make the inner card a vertical flex column */
.product-item .product-card{
display:flex;
flex-direction:column;
}
.product-item .cat-desc{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:8;
overflow:hidden;
}
/* Push the button block to the bottom */
.product-item .action{
margin-top:auto;
}
/* Remove extra button whitespace */
.product-item .action .btn{
width:90%;
margin-bottom:5px;
}
/* Tighten common spacing (optional but helps a lot) */
.product-item .reviews{ margin-top:6px; }
.product-item .name{ margin-top:8px; }
.product-item .desc-wrap{ margin:0 10px; }
/* optional: if icon is used on dark backgrounds */
.icon-guide--light{
background-color: #fff;
}
/* === Legend Strip === */
.kit-legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
font-size: 0.8rem;
color: #555;
}
.kit-legend span {
display: flex;
align-items: center;
gap: 5px;
}
.legend-yes { color: #1a7a3a; font-weight: 700; }
.legend-no { color: #999; font-weight: 700; }
/* === Scroll wrapper for mobile === */
.table-scroll {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,0.07);
margin-bottom: 28px;
}
/* === Main Table === */
.kit-table {
width: 100%;
min-width: 680px;
border-collapse: collapse;
background: #fff;
font-size: 0.9rem;
}
/* Section divider heading rows */
.kit-table thead tr.group-header th {
background: var(--kbs-blue);
color: #fff;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.6px;
padding: 8px 12px;
font-weight: 700;
text-align: left;
}
.kit-table thead tr.group-header th:first-child {
border-radius: 0;
}
/* Column header row */
.kit-table thead tr.col-headers th {
background: var(--accent-gray);
color: #333;
font-size: 0.78rem;
font-weight: 700;
padding: 10px 12px;
text-align: center;
border-bottom: 2px solid var(--rust-red);
white-space: nowrap;
}
.kit-table thead tr.col-headers th:first-child {
text-align: left;
border-left: 4px solid var(--rust-red);
}
/* Body rows */
.kit-table tbody tr {
border-bottom: 1px solid var(--border-color);
transition: background 0.15s;
}
.kit-table tbody tr:last-child {
border-bottom: none;
}
.kit-table tbody tr:hover {
background: var(--hover-red-bg);
}
.kit-table tbody tr:nth-child(even) {
background: #fafafa;
}
.kit-table tbody tr:nth-child(even):hover {
background: var(--hover-red-bg);
}
.kit-table td {
padding: 10px 12px;
vertical-align: middle;
text-align: center;
color: #333;
}
.kit-table td:first-child {
text-align: left;
font-weight: 600;
border-left: 4px solid transparent;
white-space: nowrap;
}
.kit-table tbody tr:hover td:first-child {
border-left-color: var(--rust-red);
}
/* Kit name links */
.kit-table td a {
color: var(--kbs-blue);
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 700;
transition: color 0.15s, background 0.15s;
padding: 2px 4px;
border-radius: 3px;
}
.kit-table td a:hover {
color: #fff;
background-color: var(--kbs-blue);
text-decoration: none;
}
/* Yes / No badges */
.badge-yes {
display: inline-block;
background: #e8f5ee;
color: #1a7a3a;
border: 1px solid #a8d5b8;
border-radius: 20px;
padding: 2px 12px;
font-size: 0.78rem;
font-weight: 700;
}
.badge-no {
display: inline-block;
background: #f5f5f5;
color: #aaa;
border: 1px solid #ddd;
border-radius: 20px;
padding: 2px 12px;
font-size: 0.78rem;
font-weight: 600;
}
/* Coverage pill */
.coverage-pill {
display: inline-block;
background: var(--kbs-blue);
color: #fff;
border-radius: 20px;
padding: 2px 10px;
font-size: 0.78rem;
font-weight: 700;
white-space: nowrap;
}
/* === Mobile Card View === */
@media (max-width: 640px) {
.table-scroll { display: none; }
.mobile-cards { display: block; }
}
@media (min-width: 641px) {
.mobile-cards { display: none; }
}
.mobile-cards {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 24px;
}
.kit-card {
background: #fff;
border: 1px solid var(--border-color);
border-left: 5px solid var(--rust-red);
border-radius: 0 8px 8px 0;
padding: 14px 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.kit-card-name {
font-size: 1rem;
font-weight: 700;
margin-bottom: 10px;
}
.kit-card-name a {
color: var(--kbs-blue);
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 700;
transition: color 0.15s, background 0.15s;
padding: 2px 4px;
border-radius: 3px;
}
.kit-card-name a:hover {
color: #fff;
background-color: var(--kbs-blue);
text-decoration: none;
}
.kit-card-attrs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 12px;
font-size: 0.82rem;
color: #444;
}
.kit-card-attr {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--border-subtle);
padding-bottom: 4px;
}
.kit-card-attr-label {
font-weight: 600;
color: #555;
padding-right: 6px;
}
/* Group label for mobile */
.mobile-group-label {
background: var(--kbs-blue);
color: #fff;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
padding: 6px 14px;
border-radius: 4px;
margin: 8px 0 4px;
}
.callout-standout {
background: #fff3cd;
border-left: 6px solid var(--rust-red);
border-radius: 0 8px 8px 0;
padding: 14px 18px;
margin: 18px 0;
font-size: 1.05rem;
font-weight: 700;
font-style: italic;
color: #333;
line-height: 1.5;
}
/* Blue accent variant ? for informational callouts */
.callout-standout-blue {
background: #e8f0fb;
border-left: 6px solid var(--kbs-blue);
border-radius: 0 8px 8px 0;
padding: 14px 18px;
margin: 18px 0;
font-size: 1.05rem;
font-weight: 700;
font-style: italic;
color: #333;
line-height: 1.5;
}
/* Neutral/gray variant ? for tips or notes */
.callout-standout-gray {
background: var(--bg-light);
border-left: 6px solid #666;
border-radius: 0 8px 8px 0;
padding: 14px 18px;
margin: 18px 0;
font-size: 1.05rem;
font-weight: 700;
font-style: italic;
color: #333;
line-height: 1.5;
}
hr.divider-or {
border: none;
border-top: 1px solid var(--border-light);
text-align: center;
overflow: visible;
margin: 18px 0;
}
/* ==========================================
POST (BLOG) HEADING STYLES
========================================== */
/* H1 ? Article title inside the post body
Bold, full-width with a red bottom rule.
Keeps visual weight high for the primary keyword phrase. */
.post h1 {
font-size: 1.9rem;
font-weight: 700;
color: #222;
border-bottom: 3px solid var(--rust-red);
padding-bottom: 0.5rem;
margin: 0 0 1.25rem;
line-height: 1.25;
}
/* H2 ? Major section headers
Uses the brand left-border pattern from .section_header_small
but lighter weight (5px border vs 8px) to differentiate.
H2s carry strong SEO weight for on-page topic signals. */
.post h2 {
font-size: 1.6rem;
font-weight: 700;
color: var(--brand-primary);
background: var(--accent-gray);
border-left: 5px solid var(--brand-primary);
border-radius: 0 6px 6px 0;
padding: 8px 12px;
margin: 2rem 0 1rem;
line-height: 1.3;
}
/* H3 ? Subsection headers
KBS blue with a subtle dotted underline for secondary hierarchy.
Keeps visual separation from H2 without competing. */
.post h3 {
font-size: 1.25rem;
font-weight: 700;
color: var(--kbs-blue);
border-bottom: 2px dotted var(--border-light);
padding-bottom: 4px;
margin: 1.5rem 0 0.75rem;
line-height: 1.3;
}
/* H4 ? Sub-subsection, supporting detail headers */
.post h4 {
font-size: 1.1rem;
font-weight: 700;
color: #333;
margin: 1.25rem 0 0.5rem;
}
/* H5 ? Minor callout headers, labels */
.post h5 {
font-size: 1rem;
font-weight: 700;
color: #555;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 1rem 0 0.4rem;
}
/* H6 ? Fine print / footnote-level headers */
.post h6 {
font-size: 0.9rem;
font-weight: 700;
color: #666;
font-style: italic;
margin: 0.75rem 0 0.4rem;
}
@media (min-width: 992px) {
/* Neutralize equal-height column behavior on the right col */
#checkout-right {
display: block !important;
height: auto !important;
position: sticky !important;
top: 0;
max-height: 100vh;
overflow-y: auto;
align-self: flex-start; /* covers flexbox parent scenarios */
}
/* Ensure the parent row isn't clipping overflow */
#ab-content {
overflow: visible !important;
display: block !important; /* override table/flex if col-height uses it */
}
}
@media (max-width: 767px) {
#sd-modal .modal-vcenter {
display: block !important;
}
#sd-modal .modal-dialog {
width: auto !important;
max-width: 96% !important;
margin: 20px auto !important;
}
#sd-modal .modal-body {
padding: 0 !important;
}
#sd-modal iframe {
width: 100% !important;
min-height: 480px !important;
display: block;
/* border: none; ? redundant, already set in base rule */
}
}
/* ==========================================
SUPPORT DESK MODAL (#sd-modal)
========================================== */
#sd-modal .modal-dialog {
height: 600px;
margin-top: 30px;
}
#sd-modal .modal-content {
height: 100%;
border: 1px solid var(--border-light); /* eliminates bluish rgba artifact */
border-top: 3px solid var(--rust-red); /* KBS brand accent on top edge */
border-radius: 0 0 6px 6px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}
#sd-modal .modal-header {
background-color: var(--bg-light);
border-bottom: 1px solid var(--border-light);
padding: 12px 16px;
}
#sd-modal .modal-title {
font-weight: 700;
color: var(--kbs-blue);
font-size: 1.1rem;
}
#sd-modal .modal-body {
height: 85%;
padding: 0; /* removes Bootstrap's default padding so iframe fills edge-to-edge */
}
#sd-modal iframe {
width: 100%;
height: 100%;
border: none; /* belt-and-suspenders alongside frameborder="0" */
display: block; /* eliminates inline ghost space below iframe */
}
#sd-modal .modal-content {
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
#sd-modal .modal-header,
#sd-modal .modal-footer {
flex-shrink: 0 !important;
}
#sd-modal .modal-body {
flex: 1 1 auto !important;
height: auto !important;
min-height: 0 !important;
overflow: hidden !important;
}
/* ==========================================
UNIVERSAL SVG ICON LIBRARY (CSS MASKS)
========================================== */
.kbs-icon {
display: inline-block;
width: 1.2em;
height: 1.2em;
vertical-align: middle;
margin-right: 6px;
background-color: var(--kbs-blue);
transition: transform 0.2s ease-in-out;
}
.icon-universal-direction {
-webkit-mask-image: var(--icon-direction-svg);
mask-image: var(--icon-direction-svg);
}
.icon-cart {
-webkit-mask-image: var(--icon-cart-svg);
mask-image: var(--icon-cart-svg);
}
.icon-location {
-webkit-mask-image: var(--icon-location-svg);
mask-image: var(--icon-location-svg);
}
.icon-ship {
-webkit-mask-image: var(--icon-ship-svg);
mask-image: var(--icon-ship-svg);
}
.icon-tech {
-webkit-mask-image: var(--icon-tech-svg);
mask-image: var(--icon-tech-svg);
}
.icon-help {
-webkit-mask-image: var(--icon-help-svg);
mask-image: var(--icon-help-svg);
}
.icon-doc-text-inv {
-webkit-mask-image: var(--icon-doc-text-inv-svg);
mask-image: var(--icon-doc-text-inv-svg);
}
.icon-video {
-webkit-mask-image: var(--icon-video-svg);
mask-image: var(--icon-video-svg);
}
.icon-award {
-webkit-mask-image: var(--icon-award-svg);
mask-image: var(--icon-award-svg);
}
/* Maintain aspect ratio for product images to prevent jumping */
.main-image, .prod-thumb {
background-color: var(--white)
aspect-ratio: 1 / 1; /* Ensures a square box is held until the image loads */
display: block;
}
/* Ensure images fill the reserved space correctly */
.img-responsive {
content-visibility: auto;
}
#kbs-sticky-bar {
position: fixed;
bottom: 0; left: 0; right: 0;
background: #fff;
border-top: 1px solid #ddd;
box-shadow: 0 -2px 12px rgba(0,0,0,0.12);
z-index: 9999;
transform: translateY(100%);
transition: transform 0.25s ease;
}
#kbs-sticky-bar.kbs-visible {
transform: translateY(0);
}
.kbs-sticky-inner {
max-width: 1200px;
margin: 0 auto;
padding: 10px 16px;
display: flex;
align-items: center;
gap: 14px;
}
.kbs-sticky-img {
width: 48px; height: 48px;
object-fit: cover;
border-radius: 6px;
flex-shrink: 0;
border: 1px solid #eee;
}
.kbs-sticky-info {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
overflow: hidden;
cursor: pointer;
touch-action: manipulation;
}
.kbs-sticky-name {
font-size: 14px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #222;
}
.kbs-sticky-selection {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #1a6bbf; /* link blue ? signals it's tappable */
margin-top: 2px;
cursor: pointer;
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-tap-highlight-color: transparent;
}
.kbs-sticky-selection:hover {
color: #0f4a8a;
}
/* The small "N options" hint that appears below the selection */
.kbs-sticky-hint {
font-size: 11px;
color: #888;
margin-top: 1px;
white-space: nowrap;
cursor: pointer; /* ADD THIS */
text-decoration: underline; /* ADD THIS */
text-decoration-style: dotted;
text-underline-offset: 2px;
}
/* Highlight pulse on the options block when scrolled to */
@keyframes kbs-options-pulse {
0% { box-shadow: 0 0 0 0 rgba(200,53,26,0.45); }
50% { box-shadow: 0 0 0 10px rgba(200,53,26,0.08); }
100% { box-shadow: 0 0 0 0 rgba(200,53,26,0); }
}
.kbs-highlight-options {
border-radius: 6px;
animation: kbs-options-pulse 0.45s ease 3;
}
.kbs-sticky-price {
font-size: 16px;
font-weight: 700;
color: #222;
flex-shrink: 0;
white-space: nowrap;
}
.kbs-sticky-btn {
background: #c8351a;
color: #fff;
border: none;
border-radius: 6px;
padding: 11px 22px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
flex-shrink: 0;
min-height: 48px;
white-space: nowrap;
transition: background 0.15s;
touch-action: manipulation;
}
.kbs-sticky-btn:hover:not(:disabled) {
background: #a82c14;
}
.kbs-sticky-btn:disabled {
background: #bbb;
cursor: not-allowed;
}
/* Pulse animation when user tries to add without selecting */
@keyframes kbs-req-pulse {
0% { box-shadow: 0 0 0 0 rgba(200,53,26,0.5); }
50% { box-shadow: 0 0 0 8px rgba(200,53,26,0.1); }
100% { box-shadow: 0 0 0 0 rgba(200,53,26,0); }
}
.kbs-highlight-options {
border-radius: 6px;
animation: kbs-req-pulse 0.4s ease 3;
}
/* Mobile only ? comment out this block if you want it on desktop too */
@media (min-width: 992px) {
#kbs-sticky-bar { display: none; }
}
/* -- Chat button nudge via CSS variable -------------------------
JS sets --kbs-bar-nudge on: root when the sticky bar is visible.
ID selector beats all .kbs-chat-pill class rules including !important. */
:root {
--kbs-bar-nudge: 0px;
}
#kbsChatButton {
bottom: calc(20px + var(--kbs-bar-nudge)) !important;
transition: bottom 0.25s ease,
transform 0.25s ease-in-out,
box-shadow 0.25s ease-in-out !important;
}
@media (max-width: 767px) {
#kbsChatButton {
bottom: calc(20px + var(--kbs-bar-nudge)) !important;
}
}
/* -- Sticky bar mobile layout fix -------------------------------
On small screens the image + price + button leave the info
section too narrow for the hint text to display fully.
Below 576px: hide the image, allow hint to wrap. */
@media (max-width: 576px) {
.kbs-sticky-img {
display: none;
}
.kbs-sticky-inner {
gap: 10px;
}
.kbs-sticky-hint {
white-space: normal;
line-height: 1.3;
}
.kbs-sticky-btn {
padding: 11px 14px;
}
}
/* Custom Class for Search Page Page Resource Links */
.kbs-resource-link {
display: block;
padding: 10px 12px;
border: 1px solid #e5e5e5;
border-radius: 4px;
text-decoration: none;
color: #444444;
font-weight: 600;
background-color: #ffffff;
/* Smooth transition for the bounce effect */
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
/* Hover & Active State (Bounce Up) */
.kbs-resource-link:hover,
.kbs-resource-link:focus {
color: #000000; /* Subtle darkening on hover */
text-decoration: none;
border-color: #cccccc;
/* This creates the 'bounce up' effect */
transform: translateY(-4px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* List Item Spacing */
.kbs-resource-item {
margin: 8px 0;
list-style: none;
}
/* -- Sticky ATC button feedback states ------------------------ */
.kbs-sticky-btn.is-loading {
background: #a82c14;
pointer-events: none;
}
.kbs-sticky-btn.is-added {
background: #2e7d32;
pointer-events: none;
transition: background 0.2s ease;
}
@keyframes kbs-spin {
to { transform: rotate(360deg); }
}
.kbs-sticky-btn.is-loading .icon-basket {
display: inline-block;
animation: kbs-spin 0.6s linear infinite;
}
/* ---------------------------------------------------------------
INFLUENCER LANDING PAGES (.lp-)
Reusable layout styles for all influencer/campaign landing pages.
Add to default.css. Page-specific content lives in each
Shift4Shop custom page HTML ? these classes handle structure only.
--------------------------------------------------------------- */
.lp-landing * { box-sizing: border-box; }
.lp-landing {
max-width: 1170px;
margin: 0 auto;
padding: 0 15px;
font-family: inherit;
color: #222;
}
/* -- HERO -- */
.lp-hero {
position: relative;
background: #1a1a1a;
border-radius: 6px;
overflow: hidden;
margin-bottom: 40px;
padding: 60px 40px;
text-align: center;
}
.lp-hero::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(
0deg,
transparent,
transparent 28px,
rgba(255,255,255,0.03) 28px,
rgba(255,255,255,0.03) 29px
);
pointer-events: none;
}
.lp-hero-badge {
display: inline-block;
background: #cc0000;
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 18px;
border-radius: 3px;
margin-bottom: 20px;
}
.lp-hero h1 {
color: #fff;
font-size: 38px;
font-weight: 700;
line-height: 1.2;
margin: 0 0 12px 0;
}
.lp-hero h1 span {
color: #cc0000;
}
.lp-hero-sub {
color: #aaa;
font-size: 17px;
line-height: 1.6;
max-width: 660px;
margin: 0 auto 12px auto;
}
.lp-hero-callout {
color: #fff;
font-size: 15px;
font-weight: 600;
margin: 0 auto 28px auto;
}
.lp-hero-cta {
display: inline-block;
background: #cc0000;
color: #fff !important;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 14px 36px;
border-radius: 4px;
text-decoration: none !important;
transition: background 0.2s;
}
.lp-hero-cta:hover { background: #a80000; color: #fff !important; }
/* -- TRUST BAR -- */
.lp-trust {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 30px;
margin-bottom: 50px;
padding: 0 20px;
text-align: center;
}
.lp-trust-item {
font-size: 13px;
font-weight: 600;
color: #555;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.lp-trust-item strong {
color: #cc0000;
}
/* -- SECTION HEADINGS -- */
.lp-section-label {
text-align: center;
margin-bottom: 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #cc0000;
}
.lp-section-title {
text-align: center;
font-size: 28px;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 10px 0;
}
.lp-section-sub {
text-align: center;
font-size: 15px;
color: #666;
max-width: 620px;
margin: 0 auto 36px auto;
line-height: 1.5;
}
/* -- FEATURED PRODUCT -- */
.lp-featured {
display: flex;
flex-wrap: wrap;
gap: 32px;
align-items: center;
background: #f7f7f7;
border: 1px solid #e5e5e5;
border-radius: 6px;
padding: 36px;
margin-bottom: 50px;
}
.lp-featured-img-wrap {
flex: 1 1 300px;
text-align: center;
}
.lp-featured-img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
.lp-featured-body {
flex: 1 1 380px;
}
.lp-featured-tag {
display: inline-block;
background: #cc0000;
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 3px;
margin-bottom: 12px;
}
.lp-featured-body h2 {
font-size: 26px;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 10px 0;
}
.lp-featured-body p {
font-size: 14px;
line-height: 1.6;
color: #555;
margin: 0 0 12px 0;
}
.lp-featured-specs {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.lp-featured-specs li {
font-size: 13px;
color: #444;
padding: 5px 0;
border-bottom: 1px solid #e5e5e5;
}
.lp-featured-specs li:last-child {
border-bottom: none;
}
.lp-featured-specs li strong {
color: #1a1a1a;
}
/* -- PRODUCT GRID -- */
.lp-products {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 50px;
justify-content: center;
}
.lp-product {
flex: 1 1 260px;
max-width: 360px;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 6px;
overflow: hidden;
transition: box-shadow 0.25s, transform 0.25s;
}
.lp-product:hover {
box-shadow: 0 8px 30px rgba(0,0,0,0.1);
transform: translateY(-3px);
}
.lp-product-img {
width: 100%;
aspect-ratio: 4/3;
object-fit: contain;
background: #f7f7f7;
padding: 20px;
display: block;
}
.lp-product-body {
padding: 20px;
}
.lp-product-tag {
display: inline-block;
background: #fff3f3;
color: #cc0000;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 3px;
margin-bottom: 8px;
}
.lp-product-body h3 {
font-size: 18px;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 6px 0;
}
.lp-product-body p {
font-size: 13px;
line-height: 1.5;
color: #666;
margin: 0 0 16px 0;
}
.lp-product-link {
display: inline-block;
font-size: 13px;
font-weight: 700;
color: #cc0000 !important;
text-decoration: none !important;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid transparent;
transition: border-color 0.2s;
}
.lp-product-link:hover {
border-bottom-color: #cc0000;
color: #cc0000 !important;
}
.lp-product-link::after {
content: ' \2192';
}
/* -- STEPS -- */
.lp-steps {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 50px;
justify-content: center;
}
.lp-step {
flex: 1 1 200px;
max-width: 260px;
text-align: center;
padding: 24px;
}
.lp-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: #1a1a1a;
color: #fff;
font-size: 20px;
font-weight: 700;
border-radius: 50%;
margin-bottom: 16px;
}
.lp-step h4 {
font-size: 16px;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 6px 0;
}
.lp-step p {
font-size: 13px;
color: #666;
line-height: 1.5;
margin: 0;
}
/* -- USE CASES -- */
.lp-uses {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 50px;
justify-content: center;
}
.lp-use {
flex: 1 1 220px;
max-width: 270px;
background: #f9f9f9;
border-radius: 6px;
padding: 24px;
text-align: center;
border: 1px solid #eee;
}
.lp-use-icon {
font-size: 32px;
margin-bottom: 10px;
}
.lp-use h4 {
font-size: 15px;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 6px 0;
}
.lp-use p {
font-size: 13px;
color: #666;
line-height: 1.5;
margin: 0;
}
/* -- CTA BANNER -- */
.lp-cta-banner {
background: #1a1a1a;
border-radius: 6px;
padding: 44px 40px;
text-align: center;
margin-bottom: 50px;
position: relative;
overflow: hidden;
}
.lp-cta-banner::after {
content: '';
position: absolute;
top: -60px;
right: -60px;
width: 200px;
height: 200px;
background: rgba(204,0,0,0.15);
border-radius: 50%;
pointer-events: none;
}
.lp-cta-banner h2 {
color: #fff;
font-size: 26px;
font-weight: 700;
margin: 0 0 8px 0;
}
.lp-cta-banner p {
color: #aaa;
font-size: 15px;
margin: 0 0 24px 0;
}
.lp-discount-code {
display: inline-block;
background: rgba(204,0,0,0.15);
border: 2px dashed #cc0000;
color: #fff;
font-size: 22px;
font-weight: 700;
letter-spacing: 3px;
padding: 12px 32px;
border-radius: 6px;
margin-bottom: 20px;
font-family: 'Courier New', monospace;
}
.lp-cta-banner .lp-hero-cta {
display: inline-block;
}
/* -- FAQ ACCORDION -- */
.lp-faq {
max-width: 720px;
margin: 0 auto 50px auto;
}
.lp-faq-item {
border-bottom: 1px solid #e5e5e5;
}
.lp-faq-q {
display: block;
width: 100%;
background: none;
border: none;
padding: 18px 0;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
text-align: left;
cursor: pointer;
position: relative;
padding-right: 30px;
}
.lp-faq-q::after {
content: '+';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 22px;
font-weight: 300;
color: #999;
transition: transform 0.2s;
}
.lp-faq-q.active::after {
content: '\2212';
color: #cc0000;
}
.lp-faq-a {
display: none;
padding: 0 0 18px 0;
font-size: 14px;
line-height: 1.6;
color: #555;
}
.lp-faq-a.active {
display: block;
}
/* -- RESPONSIVE -- */
@media (max-width: 767px) {
.lp-hero { padding: 40px 20px; }
.lp-hero h1 { font-size: 26px; }
.lp-hero-sub { font-size: 15px; }
.lp-section-title { font-size: 22px; }
.lp-featured { padding: 24px; gap: 20px; }
.lp-featured-body h2 { font-size: 22px; }
.lp-product { max-width: 100%; }
.lp-trust { gap: 16px; }
.lp-trust-item { font-size: 11px; }
.lp-cta-banner { padding: 30px 20px; }
.lp-cta-banner h2 { font-size: 22px; }
.lp-discount-code { font-size: 18px; padding: 10px 20px; }
}
/* Hide links from mobile drawer that are covered by hardcoded Resources section */
#mobile-menulinks a[href="/products"],
#mobile-menulinks a[href*="direction-pages"],
#mobile-menulinks a[href*="application-guides"],
#mobile-menulinks a[href*="videos"] {
display: none !important;
}
/* === Mobile nav: hide redundant items from #mobile-categories === */
/* Hide the whole li by targeting its direct anchor href */
/* Search (href="#"), Products (covered by CTA),
Technical Info + Videos (covered by Resources section), More (vague) */
#mobile-categories a[href="#"],
#mobile-categories a[href="/products"],
#mobile-categories a[href="/direction-pages"],
#mobile-categories a[href="/instructional-videos"],
#mobile-categories a[href="/more-info"] {
display: none !important;
}
/* Also collapse the li wrappers so no empty gap remains */
#mobile-categories li:has(> a[href="#"]),
#mobile-categories li:has(> a[href="/products"]),
#mobile-categories li:has(> a[href="/direction-pages"]),
#mobile-categories li:has(> a[href="/instructional-videos"]),
#mobile-categories li:has(> a[href="/more-info"]) {
display: none !important;
}
/* =============================================
MOBILE COMPACT HEADER BAR (slide-in)
Phone only <=767px. Pairs with the "Mobile Compact
Header Bar" module in main.js. Real header scrolls
away; a fixed slim bar slides in on scroll-down.
============================================= */
/* Bar hidden by default (desktop / >767px) */
#kbs-mobile-topbar { display: none; }
@media (max-width: 767px) {
.floating-cart {
display: none !important;
}
/* Real header returns to normal flow so it scrolls up and away.
The sticky compact bar below takes over once you scroll down. */
header.site-header {
position: static;
}
/* ---- The slide-in compact bar ----
position:sticky (not fixed) so it rides in the page's scroll layer and
does NOT drift/jitter on Android Chrome during momentum scroll or when
you reverse direction. margin-bottom:-56px cancels its flow height so it
overlays content instead of pushing the header down. It is inserted as the
first child of by main.js so it pins from the very top. */
#kbs-mobile-topbar {
display: flex;
align-items: center;
gap: 8px;
position: -webkit-sticky;
position: sticky;
top: 0;
height: 68px;
margin-bottom: -68px; /* must match height: cancels net flow space */
padding: 0 10px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
z-index: 9998; /* below the mobile menu overlay (10000) */
transform: translateY(-100%); /* parked above the viewport */
transition: transform 0.25s ease;
will-change: transform;
}
#kbs-mobile-topbar.kbs-visible {
transform: translateY(0);
}
.kbs-tb-btn {
background: none;
border: 0;
padding: 8px;
line-height: 0;
color: #111;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.kbs-tb-logo {
margin: 0 auto; /* center the logo between menu + actions */
display: flex;
align-items: center;
text-decoration: none;
}
.kbs-tb-logo img {
max-height: 44px;
width: auto;
display: block;
}
/* Larger icons to match the taller bar */
#kbs-mobile-topbar .kbs-tb-btn svg {
width: 26px;
height: 26px;
}
.kbs-tb-logotext {
font-weight: 700;
color: #111;
font-size: 16px;
}
.kbs-tb-actions {
display: flex;
align-items: center;
gap: 12px; /* space between the search icon and cart */
}
.kbs-tb-cart {
position: relative;
display: inline-flex;
text-decoration: none;
color: #111;
}
.kbs-tb-cartcount {
position: absolute;
top: 2px;
right: 2px;
min-width: 16px;
height: 16px;
padding: 0 4px;
font-size: 10px;
line-height: 16px;
text-align: center;
color: #fff;
background: var(--rust-red, #c8102e);
border-radius: 8px;
box-sizing: border-box;
}
.kbs-tb-cartcount.is-empty { display: none; }
}
/* Respect users who ask for reduced motion: no slide, just appear. */
@media (prefers-reduced-motion: reduce) {
#kbs-mobile-topbar { transition: none; }
}
.mobile-menu-inner .lp-hero-cta {
display: block;
margin: 10px 0;
text-align: center;
background-color: var(--rust-red);
}
/* Mobile menu backdrop overlay */
.mobile-menu-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 9999; /* below .mobile-menu which should be 10000+ */
background: transparent;
cursor: default;
}
.mobile-menu-overlay.active {
display: block;
}
/* Enhancing the Short Description for Readability */
.short-description {
line-height: 1.6; /* Improves mobile readability */
color: #333; /* Better contrast than pure black for long reading */
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--border-subtle);
padding-bottom: 10px;
}
@media (max-width: 767px) {
/* Height of the mobile compact header bar (#kbs-mobile-topbar).
The View Cart "Continue to Checkout" sticky reads this to sit flush
under the bar via top: var(--mobile-header-height, 92px). Keep this
value equal to #kbs-mobile-topbar height so there is no gap. */
: root { --mobile-header-height: 68px; }
#mobile-sticky-checkout {
background-color: #111 !important; /* High contrast black */
border-top: 2px solid var(--kbs-gold) !important;
color: #fff !important;
}
#mobile-sticky-checkout .summary-totals-colors {
color: var(--kbs-gold) !important;
}
}
/* View Cart Related Products ? grid row spacing */
.category-related .product-items > .product-item {
margin-bottom: 20px;
}
/* ================================================
View Cart Related Products ? Equal-Height Grid
================================================ */
/* 1. Switch the row to flexbox so all columns in a row match height */
.category-related .product-items.row {
display: flex;
flex-wrap: wrap;
}
/* 2. Override Bootstrap's float so flex takes over;
stretch each column li to full row height */
.category-related .product-items > .product-item {
float: none;
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
/* 3. Stretch the card to fill the full li height */
.category-related .product-items > .product-item > .product-card {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
/* 4. Push the desc-wrap to fill remaining space so the button
always pins to the bottom regardless of description length */
.category-related .product-items > .product-item .desc-wrap {
flex: 1;
}
/* 5. Ensure the action button sits flush at the bottom */
.category-related .product-items > .product-item .action {
margin-top: auto;
padding-bottom: 10px;
}
/* Force 2-up grid on mobile for view cart related products */
@media (max-width: 767px) {
.category-related .product-items > .product-item {
width: 50%;
flex: 0 0 50%;
max-width: 50%;
}
}
/* ==========================================
CART BOX STICKY ? Sidebar Order Summary
========================================== */
.cart-box-sticky {
background-color: var(--bg-light); /* #f8f9fa ? lifts off white page */
border: 1px solid var(--border-light); /* #dee2e6 ? defined edge */
border-top: 4px solid var(--rust-red); /* KBS red accent stripe */
border-radius: 0 0 8px 8px; /* matches existing .btn radius language */
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10); /* depth off white background */
padding: 1rem;
}
/* Order Summary heading inside sticky box */
.cart-box-sticky .order-summary h4 {
color: var(--kbs-blue);
font-size: 1.1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding-top: 0; /* cancel any inherited top padding */
margin-bottom: 0.5rem;
border-bottom: 1px solid var(--border-light);
padding-bottom: 0.5rem;
}
/* Checkout trust signals ? tighten spacing, use brand green */
.checkout-trust li {
font-size: 0.875rem;
line-height: 1.5;
margin-bottom: 5px;
}
/* Coupon section header ? already uses inline color; reinforce with variable */
.coupons-area h4.module-expand {
color: var(--kbs-blue);
font-size: 1rem;
}
/* ================================================
Product Page Related Products ? 2-up mobile grid
================================================ */
@media (max-width: 767px) {
/* Switch container to clearfix-friendly block */
.relatedBlock .product-items {
display: flex;
flex-wrap: wrap;
width: 100% !important; /* overrides the JS-set inline 1300px width */
}
/* 2 columns at 50% each */
.relatedBlock .product-item {
float: none;
width: 50% !important;
max-width: 50% !important;
flex: 0 0 50%;
box-sizing: border-box;
padding: 0 8px;
margin-bottom: 16px;
}
/* Card fills full column height */
.relatedBlock .product-item .product-card {
display: flex;
flex-direction: column;
height: 100%;
width: 100% !important;
}
/* Scale down the product name */
.relatedBlock .product-item .name a {
font-size: 13px;
}
/* Full-width button, tighter padding */
.relatedBlock .product-item .action .btn {
width: 90%;
min-width: 0;
font-size: 11px;
padding: 8px 4px;
margin: 4px;
}
/* Push button to bottom of card */
.relatedBlock .product-item .action {
margin-top: auto;
}
/* 1. Force the container to use Flexbox to prevent "float snagging" */
.product-items {
display: flex !important;
flex-wrap: wrap !important;
margin-left: -5px !important;
margin-right: -5px !important;
}
/* 2. Set each product to take up half the row */
.product-items .product-item {
flex: 0 0 50% !important;
max-width: 50% !important;
width: 50% !important;
padding: 5px !important; /* Smaller gutter for mobile */
display: flex;
}
/* 3. Make the internal product card fill the 50% height */
.product-item .product-card {
width: 100%;
display: flex;
flex-direction: column;
margin-bottom: 10px !important;
}
/* 4. Ensure titles don't push heights unevenly */
.product-item .name {
font-size: 1rem !important; /* Smaller text for tight spaces */
min-height: 3em;
line-height: 1.2;
margin-bottom: 5px;
}
/* 5. Scale down buttons for the smaller width */
.product-item .action .btn {
padding: 8px 5px !important;
font-size: 0.85rem !important;
min-width: 0 !important;
width:90%;
}
/* 6. Hide non-essential info to keep it clean (Optional) */
.product-item .product-card__description {
display: none !important; /* SEO Tip: Keep desc in HTML but hide on mobile for clean UI */
}
}
/* ================================================
Browsing History ? Equal-Height Grid
================================================ */
/* 1. Flex row for equal-height columns */
.browsing_historyBlock .product-items.row {
display: flex;
flex-wrap: wrap;
}
/* 2. Each column as a flex container */
.browsing_historyBlock .product-items > .product-item {
float: none;
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
/* 3. Card fills full column height */
.browsing_historyBlock .product-items > .product-item > .product-card {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
/* 4. Name area absorbs leftover space, button always at bottom */
.browsing_historyBlock .product-items > .product-item .name_bh {
flex: 1;
}
/* 5. Pin button to bottom */
.browsing_historyBlock .product-items > .product-item .action {
margin-top: auto;
padding-bottom: 10px;
}
/* 6. Mobile ? 2-up grid */
@media (max-width: 767px) {
.browsing_historyBlock .product-items > .product-item {
width: 50%;
flex: 0 0 50%;
max-width: 50%;
padding: 0 8px;
}
.browsing_historyBlock .product-items > .product-item .product-card {
width: 100% !important;
padding: 0 4px;
}
.browsing_historyBlock .product-items > .product-item .name_bh a {
font-size: 13px;
}
.browsing_historyBlock .product-items > .product-item .action .btn {
width: 100%;
min-width: 0;
font-size: 11px;
padding: 8px 4px;
margin: 4px 0;
}
}
/* ==========================================================
CHECKOUT BUTTON - single authoritative block
Consolidated 2026-07-31 from nine competing declarations.
Selector lists both .checkout-btn and a.checkout-btn so it
wins whatever element Shift4Shop renders, without an
importance override.
DO NOT add another .checkout-btn block in this file.
========================================================== */
.checkout-btn,
a.checkout-btn {
display: inline-block;
width: 100%;
max-width: 400px;
min-height: 48px;
margin: 10px 0;
padding: 14px 28px;
background-color: var(--kbs-blue);
color: #fff;
font-size: 22px;
font-weight: 600;
text-align: center;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.5px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s, transform 0.1s;
animation: checkout-pulse 3s infinite;
}
.checkout-btn:hover,
.checkout-btn:focus,
a.checkout-btn:hover,
a.checkout-btn:focus {
background-color: var(--kbs-blue-dark);
color: #fff;
text-decoration: none;
transform: translateY(-2px);
}
.checkout-btn:active,
a.checkout-btn:active {
background-color: var(--kbs-blue-dark);
transform: scale(0.97);
}
/* Attention pulse. Recolored to blue 2026-07-31 - was rust red
rgba(211,47,47,...) on a blue button. */
@keyframes checkout-pulse {
0% { box-shadow: 0 0 0 0 rgba(0, 86, 179, 0.4); }
70% { box-shadow: 0 0 0 15px rgba(0, 86, 179, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 86, 179, 0); }
}
/* The arrow character styling */
.checkout-btn span,
.checkout-btn::after {
margin-left: 12px;
font-size: 1.4rem;
transition: transform 0.3s ease;
}
.checkout-btn:hover::after {
transform: translateX(5px);
}
/* ================================================
Blog Post Tagged Products ? Equal-Height Grid
Uses .singleblogpost scope ? no template change needed
================================================ */
/* 1. Flex row on the container */
.singleblogpost .category-related .product-items {
display: flex !important;
flex-wrap: wrap !important;
width: 100% !important;
}
/* 2. Each item ? 4-up on desktop */
.singleblogpost .category-related .product-item {
display: flex !important;
flex-direction: column;
width: 25% !important;
max-width: 25% !important;
flex: 0 0 25%;
box-sizing: border-box;
padding: 0 8px;
margin: 0 0 20px 0 !important; /* overrides inline margin: 5px auto */
height: auto !important; /* overrides JS-set inline height: 553px */
float: none !important;
}
/* 3. Card fills full column height */
.singleblogpost .category-related .product-item .product-card {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
width: 100% !important;
}
/* 4. Description absorbs remaining space */
.singleblogpost .category-related .product-item .desc-wrap {
flex: 1;
}
/* 5. Button pinned to bottom */
.singleblogpost .category-related .product-item .action {
margin-top: auto;
padding-bottom: 10px;
}
/* --- Tablet: 3-up (568px?991px) --- */
@media (max-width: 991px) and (min-width: 568px) {
.singleblogpost .category-related .product-item {
width: 33.333% !important;
max-width: 33.333% !important;
flex: 0 0 33.333%;
}
}
/* --- Mobile: 2-up (under 567px) --- */
@media (max-width: 567px) {
.singleblogpost .category-related .product-item {
width: 50% !important;
max-width: 50% !important;
flex: 0 0 50%;
padding: 0 6px;
}
.singleblogpost .category-related .product-item .desc-wrap {
display: none;
}
.singleblogpost .category-related .product-item .name a {
font-size: 13px;
}
.singleblogpost .category-related .product-item .action .btn {
width: 100%;
min-width: 0;
font-size: 11px;
padding: 8px 4px;
margin: 4px 0;
}
}
/* Custom 404 Styles */
.error-page-wrapper {
padding: 80px 0;
background-color: var(--bg-light);
min-height: 60vh;
}
.extra-large-title {
font-size: 48px;
font-weight: 700;
margin-bottom: 15px;
text-transform: uppercase;
}
.search-box-404 .form-control {
border: 2px solid var(--border-light);
border-radius: 4px 0 0 4px;
}
.search-box-404 .btn-primary {
background-color: var(--brand-primary);
border-color: var(--brand-primary);
font-weight: bold;
}
/* Ensure buttons don't stack awkwardly on mobile */
@media (max-width: 767px) {
.extra-large-title {
font-size: 32px;
}
.mb-10 {
margin-bottom: 10px;
}
.error-page-wrapper {
padding: 40px 15px;
}
}
/* ==========================================
404 PAGE SEARCH BOX
========================================== */
.search-404-wrap {
max-width: 580px;
margin: 28px auto;
text-align: center;
}
.search-404-hint {
font-size: 1rem;
margin-bottom: 10px;
}
.search-404-inner {
display: flex;
align-items: stretch;
border: 2px solid var(--rust-red);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
}
.search-404-input.form-control {
flex: 1;
border: none !important;
border-radius: 0 !important;
height: 54px !important;
font-size: 1rem !important;
padding: 12px 20px !important;
box-shadow: none !important;
}
.search-404-input.form-control:focus {
border-color: transparent !important;
box-shadow: none !important;
transform: none !important;
background-color: #fff;
}
.search-404-btn.btn {
flex-shrink: 0;
margin: 0 !important;
border-radius: 0 !important;
height: 54px;
padding: 12px 26px !important;
font-size: 1rem !important;
background-color: var(--rust-red);
border: none;
color: #fff;
white-space: nowrap;
letter-spacing: 0.03em;
}
.search-404-btn.btn:hover,
.search-404-btn.btn:focus {
background-color: var(--rust-red-dark);
color: #fff;
transform: none !important;
}
@media (max-width: 480px) {
.search-404-inner {
flex-direction: column;
}
.search-404-input.form-control {
border-bottom: 2px solid var(--rust-red) !important;
border-radius: 6px 6px 0 0 !important;
}
.search-404-btn.btn {
border-radius: 0 0 6px 6px !important;
height: auto;
width: 100%;
}
}
.modal-content {
border: 1px solid rgba(0, 0, 0, 0.15);
border-top: none;
}
/* -- Email-a-Friend modal z-index fix ------------------------- */
#recommendafriend-modal.modal {
z-index: 10050 !important;
}
#recommendafriend-modal.modal ~ .modal-backdrop,
body > .modal-backdrop {
z-index: 10040 !important;
}
/* Mobile compact header bar - fixed slide-in rules in @media (max-width: 767px) block above */
@keyframes kbs-bounce {
0% { transform: translateY(0); }
30% { transform: translateY(-6px); }
50% { transform: translateY(-3px); }
70% { transform: translateY(-5px); }
100% { transform: translateY(0); }
}
.kbs-cta-btn {
display: inline-block;
transition: box-shadow 0.2s ease;
}
.kbs-cta-btn:hover {
animation: kbs-bounce 0.5s ease;
box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
/* Secondary outlined blue button - matches KBS site link color */
.btn-secondary {
display: inline-block;
padding: 8px 18px;
border: 2px solid #0056b3;
color: #0056b3;
background: #fff;
border-radius: 4px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn-secondary:hover,
.btn-secondary:focus {
background: #0056b3;
color: #fff;
text-decoration: none;
transform: translateY(-2px);
}
.btn-secondary:active {
transform: translateY(0);
}
#dfcFaqAccordion .panel-title a .fa-chevron-down {
margin-right: 8px;
transition: transform 0.2s ease;
color: #b22222;
}
#dfcFaqAccordion .panel-title a.collapsed .fa-chevron-down {
transform: rotate(-90deg);
}
@media (max-width: 767px) {
#google-merchantwidget-iframe-wrapper {
display: none !important;
}
}
#rustSealFaqAccordion .panel-title a .fa-chevron-down {
margin-right: 8px;
transition: transform 0.2s ease;
color: #b22222;
}
#rustSealFaqAccordion .panel-title a.collapsed .fa-chevron-down {
transform: rotate(-90deg);
}
.kbs-faq-accordion .panel-title a .fa-chevron-down {
margin-right: 8px;
transition: transform 0.2s ease;
color: #b22222;
}
.kbs-faq-accordion .panel-title a.collapsed .fa-chevron-down {
transform: rotate(-90deg);
}
/* Support / Help Link */
.support-link {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
margin: 15px 0;
}
.support-link a {
color: #0056b3;
font-weight: 600;
min-width: 0;
word-wrap: break-word;
overflow-wrap: break-word;
}
.faq-accordion .panel {
border: none;
border-bottom: 1px solid #e0e0e0;
border-radius: 0;
box-shadow: none;
margin-bottom: 0;
}
.faq-accordion .panel:first-child {
border-top: 1px solid #e0e0e0;
}
/* Override Bootstrap's stacked-panel margin */
.faq-accordion .panel + .panel {
margin-top: 0;
}
/* Generous vertical padding on each question row */
.faq-accordion .panel-heading {
padding: 18px 0;
background-color: transparent;
border-bottom: none;
}
/* Answer text spacing */
.faq-accordion .panel-body {
padding: 4px 0 20px;
}
/* Anchor: full-width click target, icon positioned right */
.faq-accordion .panel-title a {
display: block;
padding-right: 44px;
position: relative;
outline: none;
color: inherit;
}
.faq-accordion .panel-title a:hover,
.faq-accordion .panel-title a:focus {
text-decoration: none;
color: inherit;
}
/* Plus/minus circle toggle */
.faq-accordion .panel-title a .faq-toggle-icon {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
border-radius: 50%;
background-color: #b22222;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 300;
line-height: 1;
transition: background-color 0.2s ease;
}
/* Default state: plus, meaning closed. */
.faq-accordion .panel-title a .faq-toggle-icon::before {
content: "\002B"; /* plus, shown when panel is closed */
}
/* Open state: minus. Bootstrap sets aria-expanded="true" on show. */
.faq-accordion .panel-title a[aria-expanded="true"] .faq-toggle-icon::before {
content: "\2212"; /* minus, shown when panel is open */
}
.product-img-container {
position: relative;
width: 100%;
aspect-ratio: 1 / 1; /* adjust to match your product image ratio */
overflow: hidden;
}
.product-img-container img {
width: 100%;
height: 100%;
object-fit: contain;
}
.product-card .img {
aspect-ratio: 1 / 1;
overflow: hidden;
}
.product-card .img img {
width: 100%;
height: 100%;
object-fit: scale-down;
}
@keyframes kbs-bounce {
0% { transform: translateY(0); }
30% { transform: translateY(-7px); }
55% { transform: translateY(-3px); }
75% { transform: translateY(-5px); }
90% { transform: translateY(-1px); }
100% { transform: translateY(0); }
}
.kbs-btn:hover {
animation: kbs-bounce 0.55s ease;
}
@media (min-width: 768px) {
#kbs-reseller-results {
display: flex;
flex-wrap: wrap;
}
#kbs-reseller-results > .kbs-reseller-card-wrap {
display: flex;
float: none;
}
#kbs-reseller-results > .kbs-reseller-card-wrap > .modern-card {
display: flex;
flex-direction: column;
width: 97%;
}
#kbs-reseller-results > .kbs-reseller-card-wrap > .modern-card > p:last-child {
margin-top: auto;
}
}
.kbs-nav-search-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-right: 20px;
background-color: #d32f2f; /* KBS brand red, matches Call:/Shipping labels in the header */
border-radius: 50%;
text-decoration: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
transition: background-color 0.2s ease, transform 0.2s ease;
}
.kbs-nav-search-btn:hover,
.kbs-nav-search-btn:focus {
background-color: #b71c1c;
transform: scale(1.08);
}
.kbs-nav-search-btn .icon-search {
color: #fff;
font-size: 18px;
}
a.kbs-btn,
a.kbs-btn:link,
a.kbs-btn:visited {
display: inline-block;
background-color: #c0181d;
color: #ffffff;
padding: 12px 28px;
border-radius: 4px;
font-weight: bold;
text-decoration: none;
}
a.kbs-btn:hover {
color: #ffffff;
background-color: #a01418;
animation: kbs-bounce 0.55s ease;
}
a.kbs-btn:active {
color: #ffffff;
}
#kbs-guides-footer .btn {
white-space: normal;
word-wrap: break-word;
}
@media (max-width: 767px) {
#kbs-guides-footer .btn {
font-size: 13px;
padding: 8px 10px;
line-height: 1.3;
}
}
#kbs-guides-footer .btn {
white-space: normal;
word-wrap: break-word;
}
#kbs-guides-footer .kbs-guides-footer-title {
font-size: 18px;
font-weight: 700;
margin: 0 0 12px;
padding-bottom: 8px;
border-bottom: 2px solid #e5e5e5;
}
#kbs-guides-footer .kbs-browse-row {
display: block;
padding: 10px 12px;
margin: 0 0 8px;
border: 1px solid #ddd;
border-radius: 4px;
background: #fff;
font-weight: 600;
text-decoration: none;
}
#kbs-guides-footer .kbs-browse-row:hover,
#kbs-guides-footer .kbs-browse-row:focus {
border-color: #bbb;
background: #f7f7f7;
text-decoration: none;
}
#kbs-guides-footer .kbs-browse-row .kbs-browse-arrow {
float: right;
}
@media (max-width: 767px) {
#kbs-guides-footer .kbs-guides-footer-title {
font-size: 16px;
}
#kbs-guides-footer .btn {
font-size: 13px;
padding: 8px 10px;
line-height: 1.3;
}
}
/* Hide the leaked generic blog-index H1 only when a category header is present */
.page_header .container:has(> #blogHeader) > h1.page_heading:first-child {
display: none;
}
/* Taller, wider, mobile-safe support modal */
#sd-modal .modal-dialog {
width: 92% !important;
max-width: 780px !important;
margin: 24px auto !important;
}
#sd-modal .modal-content {
width: 100% !important;
height: min(82vh, 760px) !important;
}
#sd-modal .modal-body {
padding: 0 !important;
height: calc(100% - 46px) !important; /* leaves room for the title bar */
}
#sd-modal .modal-body iframe {
width: 100% !important;
height: 100% !important;
border: 0 !important;
}
/* ---------- Intro ---------- */
.kv-lede {
font-size: 1.08rem;
line-height: 1.65;
margin: 0 0 18px;
}
.kv-stats {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 0 0 18px;
}
.kv-stat {
flex: 1 1 150px;
text-align: center;
padding: 14px 10px;
border: 1px solid rgba(0, 0, 0, 0.10);
border-radius: 12px;
background: #fff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.kv-stat-num {
display: block;
font-size: 1.8rem;
font-weight: 900;
line-height: 1.1;
color: var(--kbs-blue, #0056b3);
}
.kv-stat-lbl {
display: block;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #555;
margin-top: 4px;
}
/* ---------- Search ---------- */
.kv-search-wrap {
margin: 0 0 22px;
}
.kv-search-label {
display: block;
margin-bottom: 8px;
}
.kv-search-group {
max-width: 560px;
}
.kv-popular {
margin: 10px 0 0;
font-size: 0.85rem;
color: #555;
}
.kv-suggest {
display: inline-block;
margin: 4px 4px 0 0;
padding: 4px 12px;
border: 1px solid rgba(0, 0, 0, 0.16);
border-radius: 50px;
background: #fff;
color: #222;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.kv-suggest:hover,
.kv-suggest:focus {
background: var(--kbs-blue, #0056b3);
border-color: var(--kbs-blue, #0056b3);
color: #fff;
}
.kv-count {
margin: 12px 0 0;
font-weight: 700;
color: #333;
}
.kv-sec-n {
display: inline-block;
margin-left: 6px;
padding: 1px 9px;
border-radius: 50px;
background: rgba(0, 0, 0, 0.07);
font-size: 0.7em;
font-weight: 900;
vertical-align: middle;
color: #444;
}
/* ---------- Category chips ---------- */
.kv-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 30px;
}
.kv-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 50px;
border: 1px solid rgba(0, 0, 0, 0.14);
background: #fff;
color: #222 !important;
font-size: 0.85rem;
font-weight: 700;
text-decoration: none !important;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.kv-chip:hover,
.kv-chip:focus {
background: var(--kbs-blue, #0056b3);
border-color: var(--kbs-blue, #0056b3);
color: #fff !important;
transform: translateY(-1px);
}
.kv-chip-n {
font-size: 0.72rem;
font-weight: 900;
background: rgba(0, 0, 0, 0.08);
border-radius: 50px;
padding: 1px 8px;
}
.kv-chip:hover .kv-chip-n,
.kv-chip:focus .kv-chip-n {
background: rgba(255, 255, 255, 0.25);
}
/* ---------- Sections ---------- */
.kv-section {
scroll-margin-top: 90px; /* clears the sticky mobile header on anchor jump */
margin-bottom: 34px;
}
.kv-blurb {
margin: 0 0 16px;
color: #444;
}
/* ---------- Video grid ---------- */
.kv-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 20px;
}
.kv-card {
display: flex;
flex-direction: column;
border: 1px solid rgba(0, 0, 0, 0.10);
border-radius: 12px;
background: #fff;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.kv-card:hover {
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
transform: translateY(-3px);
}
.kv-thumb {
position: relative;
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #000;
text-decoration: none !important;
}
.kv-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease, opacity 0.2s ease;
}
.kv-thumb:hover img {
transform: scale(1.05);
opacity: 0.85;
}
/* Play badge, drawn in CSS so there is no extra image request */
.kv-play {
position: absolute;
top: 50%;
left: 50%;
width: 56px;
height: 40px;
margin: -20px 0 0 -28px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.68);
transition: background 0.2s ease;
}
.kv-play::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -8px 0 0 -5px;
border-style: solid;
border-width: 8px 0 8px 14px;
border-color: transparent transparent transparent #fff;
}
.kv-thumb:hover .kv-play,
.kv-thumb:focus .kv-play {
background: #d32f2f;
}
.kv-dur {
position: absolute;
right: 8px;
bottom: 8px;
padding: 2px 7px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.82);
color: #fff;
font-size: 0.74rem;
font-weight: 700;
line-height: 1.5;
}
.kv-title {
margin: 0;
padding: 12px 14px 16px;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.35;
color: #1a1a1a;
}
/* ---------- CTA rows ---------- */
.kv-cta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin: 18px 0 0;
}
.kv-cta-alt {
font-weight: 700;
font-size: 0.9rem;
text-decoration: underline;
color: var(--kbs-blue, #0056b3) !important;
}
.kv-final {
margin-top: 34px;
}
/* ---------- Lightbox ---------- */
.kv-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(0, 0, 0, 0.88);
}
.kv-modal[hidden] {
display: none;
}
.kv-modal-inner {
width: 100%;
max-width: 960px;
}
.kv-modal-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
border-radius: 8px;
overflow: hidden;
}
.kv-modal-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.kv-modal-title {
color: #fff;
font-weight: 700;
text-align: center;
margin: 12px 0 0;
font-size: 0.95rem;
}
.kv-modal-close {
position: absolute;
top: 12px;
right: 16px;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.14);
color: #fff;
font-size: 30px;
line-height: 1;
cursor: pointer;
}
.kv-modal-close:hover,
.kv-modal-close:focus {
background: #d32f2f;
}
body.kv-noscroll {
overflow: hidden;
}
/* ---------- Small screens ---------- */
@media (max-width: 480px) {
.kv-grid {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.kv-title {
font-size: 0.82rem;
padding: 10px 10px 13px;
}
.kv-play {
width: 44px;
height: 32px;
margin: -16px 0 0 -22px;
}
.kv-stat-num {
font-size: 1.4rem;
}
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
.kv-card,
.kv-card:hover,
.kv-thumb img,
.kv-thumb:hover img,
.kv-chip,
.kv-chip:hover {
transition: none;
transform: none;
}
}
.kv-hub [hidden],
.kv-search-wrap [hidden] {
display: none !important;
}
.kv-search-group {
display: flex;
align-items: stretch;
gap: 8px;
max-width: 560px;
margin: 0;
}
.kv-search-input {
flex: 1 1 auto;
min-width: 0;
height: 46px;
margin: 0;
padding: 10px 14px 10px 42px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.9-3.9'/%3E%3C/svg%3E") no-repeat 13px center;
background-size: 18px 18px;
font-size: 15px;
line-height: 1.4;
color: #222;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
}
.kv-search-input:focus {
outline: 0;
border-color: var(--kbs-blue, #0056b3);
box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15);
}
/* Our Clear button already does this job; two X controls is confusing. */
.kv-search-input::-webkit-search-cancel-button,
.kv-search-input::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
.kv-search-clear {
flex: 0 0 auto;
height: 46px;
margin: 0;
padding: 0 18px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
background: #fff;
font-size: 14px;
font-weight: 700;
line-height: 1;
color: #333;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.kv-search-clear:hover,
.kv-search-clear:focus {
background: #d32f2f;
border-color: #d32f2f;
color: #fff;
}
.kv-popular {
margin: 12px 0 0;
font-size: 0.85rem;
color: #555;
}
@media (max-width: 480px) {
.kv-search-group {
flex-wrap: wrap;
}
.kv-search-input,
.kv-search-clear {
flex: 1 1 100%;
}
}
.kbs-breadcrumb-custom li {
min-width: 0;
}
.kbs-breadcrumb-custom li:last-child {
min-width: 0;
overflow: hidden;
}
/* Truncate only the current page, never the ancestor links. */
.kbs-breadcrumb-custom li:last-child > a,
.kbs-breadcrumb-custom li:last-child > span,
.kbs-breadcrumb-custom li.current-page {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* --- Drawer shell. Existing rule is width:250px with translate(250px,0),
which is too narrow once there is a search field in it. --- */
.mobile-menu-inner {
width: 86vw;
max-width: 330px;
padding: 18px 0 40px;
transform: translate(100%, 0);
}
.menu-open .mobile-menu-inner {
transform: translate(0, 0);
}
.mobile-menu-close {
padding: 0 16px 6px;
text-align: right;
}
/* Existing .mobile-menu-widget uses margin:30px 0, which wastes about a third
of a phone viewport across four sections. */
.mobile-menu-widget {
margin: 16px 0 0;
}
.mobile-menu-widget h3 {
padding: 0 16px 8px;
margin: 0 0 4px;
font-size: 12px;
letter-spacing: .06em;
text-transform: uppercase;
color: #6b6b6b;
border-bottom: 1px solid #ececec;
}
/* ============================================================================
SEARCH FIELD
Mobile search sessions: 3.23% CVR, $4.19 RPS - the best mobile entry point
on the site. This removes two taps from that path.
========================================================================== */
.kbs-mm-search {
display: flex;
align-items: center;
margin: 0 16px 14px;
border: 2px solid #000;
border-radius: 30px;
overflow: hidden;
background: #fff;
}
.kbs-mm-search-input {
flex: 1 1 auto;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
padding: 11px 4px 11px 16px;
font-size: 16px; /* 16px minimum stops iOS Safari zooming on focus */
color: #222;
-webkit-appearance: none;
appearance: none;
}
.kbs-mm-search-input::placeholder {
color: #8a8a8a;
font-size: 14px;
}
.kbs-mm-search-btn {
flex: 0 0 auto;
width: 44px;
height: 44px;
border: 0;
background: #000;
color: #fff;
border-radius: 50%;
margin: 2px;
cursor: pointer;
font-size: 16px;
line-height: 1;
}
.kbs-mm-search-btn:active {
background: #333;
}
/* --- Primary CTA --- */
.kbs-mm-cta {
padding: 0 16px 6px;
}
.kbs-mm-cta-btn {
display: block;
background: #cc0000;
color: #fff;
text-align: center;
padding: 13px 14px;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
letter-spacing: .01em;
}
.kbs-mm-cta-btn:hover,
.kbs-mm-cta-btn:focus,
.kbs-mm-cta-btn:active {
background: #b00000;
color: #fff;
text-decoration: none;
}
/* --- Lists --- */
.kbs-mm-list {
list-style: none;
margin: 0;
padding: 0;
}
.kbs-mm-list > li > a {
display: flex;
align-items: center;
padding: 13px 16px;
font-size: 15px;
font-weight: 500;
color: #222;
text-decoration: none;
border-bottom: 1px solid rgba(0, 0, 0, .07);
min-height: 46px; /* WCAG 2.5.8 target size */
}
.kbs-mm-list > li:last-child > a {
border-bottom: 0;
}
.kbs-mm-list > li > a:hover,
.kbs-mm-list > li > a:focus,
.kbs-mm-list > li > a:active {
background: #f6f6f6;
color: #000;
text-decoration: none;
}
.kbs-mm-list .kbs-icon {
color: #d32f2f;
margin-right: 10px;
flex: 0 0 auto;
width: 18px;
text-align: center;
}
/* Kit Finder - the "I don't know what I need" escape hatch */
.kbs-mm-list > li > a.kbs-mm-highlight {
font-weight: 700;
}
/* Existing default.css injects a caret on every drawer link via
.mobile-menu-widget ul li a:after - not wanted on flat rows. */
.mobile-menu-widget .kbs-mm-list li a:after {
content: none;
}
/* Visible focus ring for keyboard and switch-control users */
.mobile-menu-inner a:focus-visible,
.mobile-menu-inner input:focus-visible,
.mobile-menu-inner button:focus-visible {
outline: 2px solid #0056b3;
outline-offset: -2px;
}
/* ============================================================================
STICKY MOBILE ACTION BAR
Reaches all 18,657 mobile sessions regardless of landing page, including the
5,724 article sessions (0.58% CVR, $0.75 RPS) whose readers will never open
a hamburger menu. Pure CSS, no JS.
========================================================================== */
.kbs-mobile-actionbar {
display: none;
}
@media (max-width: 767px) {
.kbs-mobile-actionbar {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9500;
background: #fff;
border-top: 1px solid #e0e0e0;
box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
padding-bottom: env(safe-area-inset-bottom, 0);
}
.kbs-mobile-actionbar a {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
min-height: 54px;
padding: 6px 2px;
font-size: 11px;
font-weight: 600;
letter-spacing: .02em;
color: #333;
text-decoration: none;
border-right: 1px solid #eee;
}
.kbs-mobile-actionbar a:last-child {
border-right: 0;
}
.kbs-mobile-actionbar a:active {
background: #f6f6f6;
}
.kbs-mobile-actionbar .kbs-icon {
font-size: 19px;
line-height: 1;
color: #d32f2f;
}
.kbs-mobile-actionbar .kbs-ab-cart {
position: relative;
}
.kbs-mobile-actionbar .kbs-ab-badge {
position: absolute;
top: 2px;
right: 50%;
margin-right: -20px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 9px;
background: #cc0000;
color: #fff;
font-size: 10px;
line-height: 17px;
text-align: center;
}
/* Keep the bar from covering page content */
body {
padding-bottom: 58px;
}
.copyright {
padding-bottom: 70px !important;
}
/* The old floating cart is redundant once the action bar exists.
default.css already hides it under 767px, this makes it explicit. */
.floating-cart {
display: none !important;
}
/* Lift the LiveAgent chat widget and the Google merchant badge clear of
the bar so they do not overlap the Cart tap target. */
#la_x2s6df8d_button,
.lachat_button,
div[id^="la_x2s"] {
bottom: 66px !important;
}
}
/* Never show the action bar on checkout - it must not compete with
Place Your Order. */
.checkout-page .kbs-mobile-actionbar,
body[class*="checkout"] .kbs-mobile-actionbar,
body[class*="view_cart"] .kbs-mobile-actionbar {
display: none !important;
}
@media (max-width: 767px) {
/* Lift the chat pill above the 56px bar plus a 12px breathing gap.
Covers the KBS custom pill and the LiveAgent fallbacks. */
#kbsChatButton,
.kbs-chat-pill,
#la_x2s6df8d_button,
.lachat_button,
div[id^="la_x2s"] {
bottom: 80px !important;
}
/* Google Merchant / Customer Reviews badge is configured LEFT_BOTTOM in the
frame, so it lands on the Search tab. Lift it clear too. */
.merchant-widget,
#merchant-widget,
iframe[src*="merchantwidget"],
iframe[name*="merchant"] {
bottom: 80px !important;
}
/* Safety: keep the bar under any true modal/overlay so it can never sit on
top of a dialog, but above ordinary page content. */
.kbs-mobile-actionbar {
z-index: 9500;
}
.modal-backdrop,
.modal {
z-index: 10500;
}
}
@media (max-width: 767px) {
/* --- FONT glyphs: coloured by `color` --- */
.kbs-mobile-actionbar a > span[class*="icon-"]:not(.kbs-icon) {
display: block;
font-size: 20px;
line-height: 20px;
height: 20px;
width: auto;
margin: 0;
color: #d32f2f;
background: none;
}
/* --- MASK icon (Shop): coloured by `background-color` --- */
.kbs-mobile-actionbar a > span.kbs-icon {
display: block;
width: 20px;
height: 20px;
margin: 0; /* kills the inherited 6px left shove */
font-size: 0; /* suppress any stray glyph box */
line-height: 0;
background-color: #d32f2f;
transition: none; /* the base rule animates transform; not wanted here */
}
/* Both systems: no stray backgrounds, borders or radii */
.kbs-mobile-actionbar a > span[class*="icon-"] {
border: 0;
border-radius: 0;
vertical-align: middle;
flex: 0 0 auto;
}
/* Keep the cart badge anchored to the icon, not the tab */
.kbs-mobile-actionbar .kbs-ab-cart { position: relative; }
.kbs-mobile-actionbar .kbs-ab-badge {
position: absolute;
top: 4px;
left: 50%;
margin-left: 4px;
right: auto;
}
/* Hide the badge when the cart is empty rather than showing a red 0 */
.kbs-mobile-actionbar .kbs-ab-badge.is-empty { display: none; }
}
/* ============================================================================
MOBILE DRAWER ICONS
Rows use mask icons (cart, guide, doc-text-inv, video, help, location).
These are coloured by background-color, so the previous `color:#d32f2f`
rule did nothing and they rendered in --kbs-blue.
========================================================================== */
.kbs-mm-list .kbs-icon {
display: inline-block;
width: 18px;
height: 18px;
margin: 0 10px 0 0;
flex: 0 0 auto;
background-color: #d32f2f; /* mask icons take colour from here */
transition: none;
}
/* Any font glyph that ends up in the drawer stays consistent with the above */
.kbs-mm-list > li > a > span[class*="icon-"]:not(.kbs-icon) {
display: inline-block;
width: 18px;
height: 18px;
font-size: 17px;
line-height: 18px;
margin: 0 10px 0 0;
flex: 0 0 auto;
text-align: center;
color: #d32f2f;
background: none;
}
.kbs-mm-search {
display: flex;
align-items: center;
box-sizing: border-box;
height: 48px;
margin: 0 16px 14px;
padding: 0;
border: 2px solid #111;
border-radius: 999px;
background: #fff;
overflow: visible; /* was hidden - that is what notched the button */
transition: border-color .15s ease, box-shadow .15s ease;
}
/* Focus lives on the pill, so the ring follows the rounded shape */
.kbs-mm-search:focus-within {
border-color: #0056b3;
box-shadow: 0 0 0 3px rgba(0, 86, 179, .18);
}
.kbs-mm-search-input {
flex: 1 1 auto;
min-width: 0;
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 0 6px 0 18px;
border: 0;
background: transparent;
border-radius: 999px 0 0 999px;
font-size: 16px; /* 16px minimum stops iOS Safari zooming on focus */
line-height: 1;
color: #222;
-webkit-appearance: none;
appearance: none;
}
.kbs-mm-search-input::placeholder {
color: #8a8a8a;
font-size: 14px;
opacity: 1; /* Firefox dims placeholders by default */
}
/* Kill the square focus ring on the input itself. The pill now shows focus.
Overrides .mobile-menu-inner input:focus-visible from the earlier file. */
.kbs-mm-search .kbs-mm-search-input:focus,
.kbs-mm-search .kbs-mm-search-input:focus-visible {
outline: 0 !important;
outline-offset: 0 !important;
box-shadow: none !important;
border: 0 !important;
}
/* Remove the WebKit search decorations if the input type is ever changed */
.kbs-mm-search-input::-webkit-search-decoration,
.kbs-mm-search-input::-webkit-search-cancel-button {
-webkit-appearance: none;
}
/* Submit button: 40px circle inside a 48px pill leaves 4px clearance all
round, so nothing is clipped even at the rounded end cap. */
.kbs-mm-search .kbs-mm-search-btn {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 40px;
height: 40px;
margin: 0 3px 0 0;
padding: 0; /* kills the inherited 9.75px 19.5px */
border: 0;
border-radius: 50%;
background: #111;
color: #fff;
font-size: 16px;
line-height: 1;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.kbs-mm-search .kbs-mm-search-btn:active {
background: #333;
}
.kbs-mm-search .kbs-mm-search-btn:focus-visible {
outline: 2px solid #0056b3;
outline-offset: 2px;
}
/* The glyph inside the button: plain fontello, centred by the flex parent */
.kbs-mm-search .kbs-mm-search-btn > span {
display: block;
width: auto;
height: auto;
margin: 0;
padding: 0;
font-size: 16px;
line-height: 1;
color: #fff;
background: none;
}
/* ============================================================================
"SHOP ALL PRODUCTS" CTA
Class + pseudo-class (0,2,0) is required to outrank `a:link` (0,1,1).
========================================================================== */
.kbs-mm-cta-btn,
.kbs-mm-cta-btn:link,
.kbs-mm-cta-btn:visited,
.kbs-mm-cta-btn:hover,
.kbs-mm-cta-btn:focus,
.kbs-mm-cta-btn:active {
color: #ffffff;
text-decoration: none;
}
.kbs-mm-cta-btn {
display: block;
background: #b00000; /* was #cc0000. White text: 5.89:1 -> 7.38:1 (AAA) */
border-radius: 8px;
padding: 14px;
font-size: 15px;
font-weight: 700; /* was 600 - heavier strokes read better on red */
letter-spacing: .02em;
text-align: center;
}
.kbs-mm-cta-btn:hover,
.kbs-mm-cta-btn:focus,
.kbs-mm-cta-btn:active {
background: #8f0000;
}
.kbs-mm-cta-btn:focus-visible {
outline: 2px solid #0056b3;
outline-offset: 2px;
}
@media (max-width: 767px) {
/* --- Header shell: 10px -> 6px top and bottom. Saves 8px. --------------- */
.site-header {
padding: 6px 0;
}
/* --- Logo: renders at its natural 132px on wider phones. Capping to 92px
keeps it clearly legible while returning 40px. Aspect ratio is
preserved, and the width/height attributes on the img keep CLS at 0.
Saves up to 40px. -------------------------------------------------- */
.site-header .logo {
margin: 0;
padding: 0;
line-height: 0;
}
.site-header .logo img {
max-height: 92px;
width: auto;
height: auto;
}
/* --- Made in USA badge: 50px -> 34px. Still perfectly readable at
200px wide. Saves 16px. -------------------------------------------- */
.made-in-usa-badge {
margin: 4px 0 0;
line-height: 0;
}
.made-in-usa-badge img {
max-height: 34px;
width: auto;
height: auto;
}
/* --- Search box: the inline style sets margin:20px 0 0. Trim to 8px.
Saves 12px. -------------------------------------------------------- */
.site-header .searchBox {
margin: 8px 0 0 !important;
padding: 0 !important;
}
/* --- Account + phone rows: tighten leading without shrinking the tap
targets. Saves about 12px across the three rows. -------------------- */
.useraccount {
margin: 6px 0 0;
}
.useraccount ul {
min-height: 0 !important;
margin: 0;
}
.header-tel {
line-height: 1.25;
margin: 0;
}
.header-tel a {
display: inline-block;
padding: 2px 0; /* keeps the phone links comfortably tappable */
}
/* --- Shipping message: 5px -> 2px vertical padding. Saves 6px. ---------- */
.header-mess {
padding: 2px 0;
line-height: 1.3;
}
.header-mess a {
display: inline-block;
}
/* --- Credit card strip in the HEADER only. The identical image already
appears in the footer (.card-icons), so this is a duplicate trust
signal costing 38px above the fold. Scaled to 26px rather than
removed, so the signal survives. Saves 12px.
To reclaim the full 38px instead, see the OPTIONAL block at the
bottom of this file. ------------------------------------------------ */
.site-header .header-right > div:last-of-type img[src*="cc-2025"] {
max-height: 26px;
width: auto;
height: auto;
}
.site-header .header-right > div:last-of-type {
line-height: 0;
margin-top: 2px;
}
/* --- Breadcrumb: 18px of text inside 44px of chrome. Wrapper margin-top
10px, container padding 11.9px top and bottom, and a 10px
margin-bottom on the list. Trim to a total of about 20px.
Saves about 26px. -------------------------------------------------- */
.breadcrumb-wrapper {
margin-top: 4px !important;
padding-top: 2px !important;
}
.breadcrumb-wrapper .container {
padding-top: 6px !important;
padding-bottom: 6px !important;
}
.breadcrumb-wrapper ol,
#kbs-supplemental-breadcrumbs,
.kbs-breadcrumb-custom {
margin-bottom: 0 !important;
line-height: 1.3;
}
/* --- Gap between breadcrumb and H1: was 31px. Trim to 14px. ------------- */
.page-heading,
h1 {
margin-top: 6px !important;
}
.breadcrumb-wrapper + * {
margin-top: 8px;
}
}
@media (max-width: 767px) {
.site-header .header-right > div:last-of-type {
display: none !important;
}
}
@media (max-width: 767px) {
/* --- FIX 1: credit card strip. Order-independent selector. -------------- */
.site-header img[src*="cc-2025"] {
height: 26px !important;
width: auto !important;
max-width: 100%;
aspect-ratio: 300 / 38; /* natural size, reserves the box pre-load */
}
/* Collapse the wrapper's line box so the 26px image does not sit in a
38px line. */
.site-header .header-right > div:has(> a > img[src*="cc-2025"]),
.site-header .header-right > div > a > img[src*="cc-2025"] {
line-height: 0;
}
/* --- FIX 2: Made in USA badge. Explicit height + ratio kills the shift. -- */
.made-in-usa-badge img {
height: 34px !important;
width: auto !important;
max-width: 100%;
aspect-ratio: 300 / 50; /* natural size from the width/height attrs */
}
/* --- Logo: keep the responsive cap, add ratio so the box is reserved
even if the image is slow. ---------------------------------------- */
.site-header .logo img {
max-height: 92px;
max-width: 100%;
aspect-ratio: 251 / 132;
}
}
@media (max-width: 767px) {
/* The header's own container carries ~11px of bottom padding that serves no
purpose once the card strip is the last row. */
.site-header > .container {
padding-bottom: 2px !important;
}
/* Header shell: 6px -> 2px. */
.site-header {
padding-bottom: 2px;
}
/* Breadcrumb wrapper: remove the top margin, keep 4px of internal padding so
the text is not flush against the card strip. */
.breadcrumb-wrapper {
margin-top: 0 !important;
padding-top: 4px !important;
}
}
@media (max-width: 767px) {
/* ==========================================================================
CHANGE 1 - Two phone rows become one. Saves 24px.
Requires the .kbs-hdr-tel wrapper from the frame edit.
========================================================================== */
.kbs-hdr-tel {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: 14px;
margin: 2px 0 0;
}
.kbs-hdr-tel .header-tel {
margin: 0;
padding: 0;
line-height: 1.3;
white-space: nowrap; /* keeps each number on its own line, never split */
}
.kbs-hdr-tel .header-tel a {
padding: 2px 0; /* keeps the phone links comfortably tappable */
}
/* At the narrowest phones the two numbers plus labels can run tight.
Drop the gap and shave the label rather than wrapping. */
@media (max-width: 359px) {
.kbs-hdr-tel {
gap: 8px;
font-size: 0.92em;
}
}
/* ==========================================================================
CHANGE 2 - Hide the duplicate credit card strip. Saves 26px.
The identical cc-2025.png still renders in the footer (.card-icons).
Comment this block out to keep the header copy.
========================================================================== */
.site-header .header-right > div:has(> a > img[src*="cc-2025"]) {
display: none !important;
}
/* Fallback for browsers without: has() support (Firefox < 121, older Safari).
Targets the image directly and collapses its wrapper's line box. */
.site-header img[src*="cc-2025"] {
display: none !important;
}
/* ==========================================================================
CHANGE 3 - LOGIN / REGISTER moves to the drawer. Saves 24px.
Measured: myaccount + login + register drew 139 mobile sessions in 28
days, 0.70% of mobile traffic. The drawer's Account row replaces it.
========================================================================== */
.site-header .useraccount {
display: none !important;
}
/* ==========================================================================
Tidy-up: with three rows gone, the right column needs no bottom spacing.
========================================================================== */
.site-header .header-right {
margin: 0 !important;
padding: 0 !important;
}
.site-header .header-mess {
margin-top: 4px;
}
}
@media (max-width: 767px) {
.container > .row,
.container-fluid > .row {
margin-left: -10px;
margin-right: -10px;
}
/* Belt and braces: nothing on a phone should ever create side-scroll. */
}
@media (max-width: 767px) {
/* Suppress the few px of horizontal overflow WITHOUT creating a scroll
container. `clip` is required here: `hidden` turns body into a scroller,
which kills position:sticky on #kbs-mobile-topbar. Do not change this
back to hidden. */
html,
body {
overflow-x: clip;
}
}
/* ============================================================================
FIX 2 - MADE IN USA BADGE IS 60px INSTEAD OF 34px ON NARROW PHONES
----------------------------------------------------------------------------
MEASURED at 320px and 359px:
.made-in-usa-badge img 34px (correct)
.made-in-usa-badge div 60px (26px too tall)
At 390px and above the div is correctly 34px.
CAUSE: the markup is a display:block ![]()
inside a display:inline .
That splits the anchor into anonymous block boxes, and the stray line boxes
before and after the image stop collapsing once the column gets narrow
enough. line-height:0 on the wrapper is not enough on its own because the
inline anchor still generates a strut.
FIX: make the anchor a block and zero the wrapper's font-size so no text
node can generate a line box. Recovers 26px on iPhone SE class devices.
========================================================================== */
@media (max-width: 767px) {
.made-in-usa-badge {
font-size: 0;
line-height: 0;
margin: 4px 0 0;
}
.made-in-usa-badge a {
display: block;
line-height: 0;
font-size: 0;
}
.made-in-usa-badge img {
display: block;
margin: 0 auto; /* stays centred once the anchor is a block */
}
}
/* ============================================================================
SAME PATTERN, SAME FIX - the logo wrapper
----------------------------------------------------------------------------
.logo uses the identical block-img-inside-inline-anchor structure. It did not
misbehave at any width tested, but it is the same latent bug, so it is
normalised here rather than left to surface on some other device.
========================================================================== */
@media (max-width: 767px) {
.site-header .logo {
font-size: 0;
line-height: 0;
}
.site-header .logo a {
display: block;
line-height: 0;
}
.site-header .logo img {
display: block;
margin: 0 auto;
}
}
/* Hide the marker itself. */
.feed_additionalfields li .kbs-df-redirect { display: none; }
/* Hide the list item that holds it. This is the line that actually matters. */
.feed_additionalfields li:has(.kbs-df-redirect) { display: none; }
/* Fallback for browsers without: has(): no bullet, no vertical space. */
.feed_additionalfields li .kbs-df-redirect ~ *,
.feed_additionalfields li:only-child .kbs-df-redirect { list-style: none; }
/* Genuinely empty list items (a real Shift4Shop edge case when a middle
Additional Field is blank but a later one is populated). Harmless to keep. */
.feed_additionalfields li:empty { display: none; }
/* --- Top-level bar ------------------------------------------------------- */
.kbs-nav > li.kbs-mega {
position: static; /* panel anchors to the navbar, not the li */
}
.kbs-nav > li.kbs-mega > .kbs-mega-toggle {
display: block;
position: relative;
padding: 14px 18px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .02em;
white-space: nowrap;
}
.kbs-nav > li.kbs-mega > .kbs-mega-toggle:after {
content: "\e75c"; /* fontello chevron, same glyph the old nav used */
font-family: "fontello";
font-size: 10px;
margin-left: 7px;
opacity: .75;
text-transform: none;
}
/* --- The panel ----------------------------------------------------------- */
.kbs-nav > li.kbs-mega > .kbs-mega-panel {
display: none;
position: absolute;
left: 0;
right: 0;
top: 100%;
width: auto;
min-width: 0; /* kills the old min-width:800px */
max-width: none;
margin: 0;
padding: 0;
border: 0;
border-top: 3px solid #d32f2f;
border-radius: 0;
background: #fff;
box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
overflow: visible; /* was hidden - this is what clipped the flyouts */
z-index: 1000;
}
/* Open on hover OR keyboard focus.: focus-within is what makes the whole
menu keyboard-navigable without any JavaScript. */
.kbs-nav > li.kbs-mega.is-open > .kbs-mega-panel,
.kbs-nav > li.kbs-mega:focus-within > .kbs-mega-panel {
display: block;
}
/* Chevron on each mega menu toggle: signals the item expands on click.
Sized above body text and bold so it reads clearly at a glance, rotates
when open. Gap and toggle padding trimmed so 5 items + chevrons still
fit one row and the social icons do not wrap to a second line. */
.kbs-mega-toggle {
display: inline-flex;
align-items: center;
gap: 2px;
padding-right: 10px !important;
}
.kbs-mega-chevron {
display: inline-block;
font-size: 15px;
font-weight: 700;
line-height: 1;
transition: transform .2s ease;
transform: translateY(1px);
}
.kbs-nav > li.kbs-mega:hover > .kbs-mega-toggle .kbs-mega-chevron,
.kbs-nav > li.kbs-mega:focus-within > .kbs-mega-toggle .kbs-mega-chevron {
transform: translateY(1px) scale(1.15);
}
.kbs-nav > li.kbs-mega.is-open > .kbs-mega-toggle .kbs-mega-chevron,
.kbs-nav > li.kbs-mega:focus-within > .kbs-mega-toggle .kbs-mega-chevron {
transform: rotate(180deg);
}
.kbs-mega-inner {
display: flex;
gap: 28px;
max-width: 1170px;
margin: 0 auto;
padding: 22px 20px 24px;
text-align: left;
}
.kbs-mega-col {
flex: 1 1 0;
min-width: 0; /* lets long product names wrap instead of pushing */
}
/* --- Column headings ----------------------------------------------------- */
.kbs-mega-head {
margin: 0 0 8px;
padding: 0 0 6px;
border-bottom: 1px solid #ececec;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: #d32f2f;
line-height: 1.3;
}
.kbs-mega-head + .kbs-mega-list + .kbs-mega-head,
.kbs-mega-list + .kbs-mega-head {
margin-top: 20px;
}
.kbs-mega-head a,
.kbs-mega-head a:link,
.kbs-mega-head a:visited {
color: #d32f2f;
text-decoration: none;
}
.kbs-mega-head a:hover,
.kbs-mega-head a:focus {
color: #8f0000;
text-decoration: underline;
}
/* --- Link lists ---------------------------------------------------------- */
.kbs-mega-list {
list-style: none;
margin: 0 0 4px;
padding: 0;
}
.kbs-mega-list > li {
margin: 0;
padding: 0;
float: none;
width: auto;
background: none;
}
.kbs-mega-list > li > a,
.kbs-mega-list > li > a:link,
.kbs-mega-list > li > a:visited {
display: block;
padding: 5px 0;
font-size: 14px;
font-weight: 400;
line-height: 1.35;
color: #222;
background: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0;
}
.kbs-mega-list > li > a:hover,
.kbs-mega-list > li > a:focus {
color: #d32f2f;
background: none;
text-decoration: underline;
}
/* --- RustSeal cross-sell inside the Rust Converter column ----------------
Ben's note: converter is a commodity customers often already own, RustSeal
is the differentiated product. This makes the upgrade path explicit rather
than leaving it to chance. */
.kbs-mega-crosssell {
margin: 12px 0 20px;
padding: 0;
}
.kbs-mega-crosssell a,
.kbs-mega-crosssell a:link,
.kbs-mega-crosssell a:visited {
display: block;
padding: 12px 14px;
border: 1px solid #f0c9c9;
border-left: 4px solid #d32f2f;
border-radius: 0;
background: #fdf5f5;
text-decoration: none;
}
.kbs-mega-crosssell a:hover,
.kbs-mega-crosssell a:focus {
background: #fbeaea;
text-decoration: none;
}
.kbs-cs-title {
display: block;
font-size: 13px;
font-weight: 700;
color: #8f0000;
line-height: 1.3;
}
.kbs-cs-body {
display: block;
margin: 3px 0 6px;
font-size: 13px;
font-weight: 400;
color: #444;
line-height: 1.4;
}
.kbs-cs-cta {
display: block;
font-size: 13px;
font-weight: 700;
color: #d32f2f;
}
/* --- Panel CTA button ---------------------------------------------------- */
.kbs-mega-cta {
margin: 18px 0 0;
}
.kbs-mega-btn,
.kbs-mega-btn:link,
.kbs-mega-btn:visited {
display: block;
padding: 11px 14px;
border-radius: 6px;
background: #b00000; /* white on #b00000 = 7.38:1, WCAG AAA */
color: #fff;
font-size: 14px;
font-weight: 700;
text-align: center;
text-decoration: none;
text-transform: none;
}
.kbs-mega-btn:hover,
.kbs-mega-btn:focus,
.kbs-mega-btn:active {
background: #8f0000;
color: #fff;
text-decoration: none;
}
/* --- Keyboard focus visibility ------------------------------------------- */
.kbs-nav .kbs-mega-toggle:focus-visible,
.kbs-mega-panel a:focus-visible {
outline: 2px solid #0056b3;
outline-offset: -2px;
}
/* --- Narrow desktop: 992-1199px -----------------------------------------
This range is where the old flyouts were clipped. Nothing is absolutely
positioned now, so the columns simply get tighter. */
@media (min-width: 992px) and (max-width: 1199px) {
.kbs-nav > li.kbs-mega > .kbs-mega-toggle {
padding: 14px 11px;
font-size: 13px;
}
.kbs-mega-inner {
gap: 18px;
padding: 18px 15px 20px;
}
.kbs-mega-list > li > a {
font-size: 13px;
}
/* Four-column panels get tight at this width. Let the last column wrap
underneath rather than squeezing all four. */
.kbs-mega-inner.kbs-cols-4 {
flex-wrap: wrap;
}
.kbs-mega-inner.kbs-cols-4 > .kbs-mega-col {
flex: 1 1 44%;
}
}
/* --- The mega menu is desktop only. Below 992px the mobile drawer and the
sticky action bar handle navigation. ------------------------------- */
@media (max-width: 991px) {
.kbs-nav > li.kbs-mega > .kbs-mega-panel {
display: none !important;
}
}
/* ============================================================================
OVERRIDES OF THE OLD MEGA MENU RULES
----------------------------------------------------------------------------
default.css lines ~1460-1545 still carry the previous mega menu styling.
These four rules would otherwise leak into the new markup. Scoped so they
only affect the new structure, leaving .subcat usage elsewhere intact.
========================================================================== */
.kbs-nav > li.kbs-mega > .kbs-mega-panel > div,
.kbs-mega-inner > div {
padding: 0;
}
.kbs-mega-panel li ul {
display: block;
position: static;
left: auto;
top: auto;
width: auto;
background: none;
}
.kbs-mega-panel li a:after {
content: none;
}
.kbs-mega-panel li:hover > a {
background: none;
}
/* The old rule animated every dropdown parent on hover. Not wanted here. */
.navbar .kbs-mega:hover > a {
animation: none;
}
#categories > li.kbs-nav-search-li {
display: inline-block;
vertical-align: top;
margin: 0;
padding: 0;
float: none;
}
#categories > li.kbs-nav-search-li > a.kbs-nav-search-btn,
#categories > li.kbs-nav-search-li > a.kbs-nav-search-btn:link,
#categories > li.kbs-nav-search-li > a.kbs-nav-search-btn:visited {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
/* 38px circle centred in the 50px navbar row: 6 + 38 + 6 = 50 */
width: 38px;
height: 38px;
min-height: 38px; /* overrides the theme's min-height:50px */
max-height: 38px;
margin: 6px 16px 6px 0;
padding: 0; /* overrides the theme's 15px 30px */
background-color: #d32f2f;
border: 0;
border-radius: 50%;
color: #fff;
font-size: 16px;
line-height: 1;
letter-spacing: 0;
text-transform: none;
text-decoration: none;
vertical-align: middle;
transition: background-color .15s ease;
}
#categories > li.kbs-nav-search-li > a.kbs-nav-search-btn:hover,
#categories > li.kbs-nav-search-li > a.kbs-nav-search-btn:focus {
background-color: #b00000;
color: #fff;
text-decoration: none;
}
#categories > li.kbs-nav-search-li > a.kbs-nav-search-btn:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* The magnifier glyph. Zero its box so flex centring is exact rather than
offset by a line-height strut. */
#categories > li.kbs-nav-search-li > a.kbs-nav-search-btn > span {
display: block;
width: auto;
height: auto;
margin: 0;
padding: 0;
font-size: 16px;
line-height: 1;
color: #fff;
background: none;
}
/* At 992-1199px the nav tightens. Shrink the circle to match. */
@media (min-width: 992px) and (max-width: 1199px) {
#categories > li.kbs-nav-search-li > a.kbs-nav-search-btn {
width: 34px;
height: 34px;
min-height: 34px;
max-height: 34px;
margin: 8px 10px 8px 0;
font-size: 15px;
}
#categories > li.kbs-nav-search-li > a.kbs-nav-search-btn > span {
font-size: 15px;
}
}
/* The mega menu is desktop only; the drawer and action bar cover mobile. */
@media (max-width: 991px) {
#categories > li.kbs-nav-search-li {
display: none;
}
}
.kbs-mega-inner {
padding-bottom: 34px;
}
.kbs-mega-cta {
margin: 18px 0 6px;
}
/* Any column that ends on a link list rather than a button gets the same
visual breathing room, so column bottoms line up. */
.kbs-mega-col > .kbs-mega-list:last-child {
margin-bottom: 6px;
}
/* The cross-sell block is now the last element in column one. Without this it
sits tight against the panel edge on short panels. */
.kbs-mega-col > .kbs-mega-crosssell:last-child {
margin-bottom: 6px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.kbs-mega-inner {
padding-bottom: 28px;
}
}
#categories > li.kbs-mega > .kbs-mega-panel > .kbs-mega-inner {
padding: 24px 20px 34px;
}
/* Keep the original defensive override, but scope it so it can no longer
match .kbs-mega-inner itself - only genuine nested divs. */
#categories > li.kbs-mega > .kbs-mega-panel > .kbs-mega-inner > .kbs-mega-col {
padding: 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
#categories > li.kbs-mega > .kbs-mega-panel > .kbs-mega-inner {
padding: 20px 15px 28px;
}
}
@media (max-width: 1199px) {
.navbar-wrapper .social-two {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1099px) {
.kbs-nav > li.kbs-mega > .kbs-mega-toggle {
padding: 14px 8px;
font-size: 12px;
letter-spacing: 0;
}
#categories > li.kbs-nav-search-li > a.kbs-nav-search-btn {
width: 32px;
height: 32px;
min-height: 32px;
max-height: 32px;
margin: 9px 8px 9px 0;
font-size: 14px;
}
#categories > li.kbs-nav-search-li > a.kbs-nav-search-btn > span {
font-size: 14px;
}
}
/* Belt and braces: never let the top-level row wrap, whatever the width. */
#categories.kbs-nav {
white-space: nowrap;
}
#categories.kbs-nav > li {
white-space: normal;
}
@media (max-width: 991px) {
.cart-box.fixed-cart-box {
padding-top: 15px !important;
}
}
/* Bottom-align every panel CTA so the left search button and the right
Shop-all button share a baseline. Side effect: sibling margins inside a
column stop collapsing (~4px extra before headings). Negligible. */
.kbs-mega-col {
display: flex;
flex-direction: column;
align-items: stretch;
}
.kbs-mega-cta {
margin-top: auto;
padding-top: 18px;
}
/* Dark variant: charcoal to match the diamond-plate nav bar, secondary to
the dark-red Shop-all. White on #1a1a1a = 17.4:1 contrast. */
.kbs-mega-btn-dark,
.kbs-mega-btn-dark:link,
.kbs-mega-btn-dark:visited {
background: #1a1a1a;
color: #fff;
}
.kbs-mega-btn-dark:hover,
.kbs-mega-btn-dark:focus,
.kbs-mega-btn-dark:active {
background: #3a3a3a;
color: #fff;
}
.kbs-mega-btn-dark .icon-search {
margin-right: 6px;
font-size: 13px;
}
/* ---------------------------------------------------------------
1. HERO PADDING
.hero-section has 20px padding. Nested inside .container-fluid
(15px) and a .col (15px) that is 100px of horizontal chrome on a
360px screen. Tighten it below 768px.
--------------------------------------------------------------- */
.kbs-hero-tight { padding: 20px; }
.kbs-hero-title { margin: 0 0 14px 0; }
.kbs-hero-lead { font-size: 1.05rem; line-height: 1.7; margin: 0 0 18px 0; }
.kbs-hero-col { margin-bottom: 16px; }
.kbs-hero-cta { margin-top: 6px; }
@media (max-width: 767px) {
.kbs-hero-tight { padding: 14px 10px; border-radius: 8px; }
.kbs-hero-tight > .container-fluid { padding-left: 0; padding-right: 0; }
.kbs-hero-tight .row { margin-left: -8px; margin-right: -8px; }
.kbs-hero-tight [class*="col-"] { padding-left: 8px; padding-right: 8px; }
.kbs-hero-lead { font-size: 1rem; line-height: 1.6; }
.kbs-hero-col { margin-bottom: 12px; }
}
/* ---------------------------------------------------------------
2. QUICK-FACT DATA ROWS
.data-row is flex + space-between. In a narrow column the label
and value each collapse to ~60px and wrap one word per line
(the "12 oz / Aerosol / Can" stack in the screenshot).
Guard against it even if a column stays narrow.
--------------------------------------------------------------- */
.data-row {
align-items: baseline;
gap: 12px;
}
.data-label { flex: 0 1 auto; white-space: normal; }
.data-value { flex: 1 1 auto; min-width: 0; }
@media (max-width: 480px) {
.data-row { font-size: 12.5px; padding: 7px 0; gap: 8px; }
.data-label { padding-right: 0; }
}
/* .modern-card is width:97% + margin auto. Inside a hero that already
has padding, that off-center 3% reads as misalignment on phones. */
@media (max-width: 767px) {
.modern-card { width: 100%; margin: 0 0 12px 0; padding: 14px; }
}
/* ---------------------------------------------------------------
3. FEATURE CARD GRID
.feature-container uses minmax(280px, 1fr). Grid tracks do NOT
shrink below the min, so on a phone the track overflows its
parent. Force a single column under 768px.
--------------------------------------------------------------- */
@media (max-width: 767px) {
.feature-container,
.kbs-feature-stack {
grid-template-columns: 1fr;
gap: 12px;
margin: 0 0 12px 0;
}
.feature-card { padding: 14px; }
.feature-card h3 { font-size: 1rem; letter-spacing: 0.5px; }
}
/* Side-by-side hero columns: keep the feature cards single-column so
they do not fight the quick-facts card for width on tablets. */
@media (min-width: 768px) and (max-width: 991px) {
.kbs-feature-stack { grid-template-columns: 1fr; gap: 14px; }
}
.kbs-feature-copy { margin: 0; font-size: 0.95rem; line-height: 1.55; }
/* ---------------------------------------------------------------
4. APPLICATIONS BAR
Replaces the " | " text separators, which broke
mid-pipe on narrow screens.
--------------------------------------------------------------- */
.kbs-app-bar {
list-style: none;
margin: 6px 0 14px 0;
padding: 10px 14px;
background-color: #0056b3;
color: #fff;
border-radius: 8px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 0;
font-variant: small-caps;
font-weight: 700;
letter-spacing: 0.5px;
font-size: 1rem;
text-align: center;
}
.kbs-app-bar li { padding: 0 14px; position: relative; }
.kbs-app-bar li + li::before {
content: "";
position: absolute;
left: 0;
top: 15%;
height: 70%;
border-left: 1px solid rgba(255,255,255,0.45);
}
@media (max-width: 480px) {
.kbs-app-bar { font-size: 0.9rem; padding: 8px 6px; }
.kbs-app-bar li { padding: 0 8px; }
}
/* ---------------------------------------------------------------
5. GENERIC SECTION SPACING
Replaces the inline "padding: 20px 0" / "margin-bottom: 20px"
scattered through the page body.
--------------------------------------------------------------- */
.kbs-section-pad { padding: 16px 0; }
.kbs-tight-note { margin: 0 0 8px 0; }
.kbs-callout-tight { margin-top: 12px; }
.kbs-faq-section { margin: 30px 0; }
.kbs-faq-cta { margin-top: 24px; }
.kbs-faq-cta .btn { margin: 0 4px 8px 4px; }
@media (max-width: 767px) {
.kbs-section-pad { padding: 10px 0; }
.kbs-faq-section { margin: 20px 0; }
/* Kill nested fixed-width containers that cause horizontal scroll */
.kbs-faq-section > .container-fluid { padding-left: 0; padding-right: 0; }
.kbs-faq-cta .btn { display: block; width: 100%; margin: 0 0 8px 0; }
}
/* ---------------------------------------------------------------
6. KEY PERFORMANCE FEATURES (media objects)
--------------------------------------------------------------- */
.kbs-media-col { margin-bottom: 18px; }
.kbs-media-icon { font-size: 20px; width: 24px; text-align: center; }
.kbs-media-heading { font-weight: 700; margin-bottom: 4px; }
@media (max-width: 767px) {
.kbs-media-col { margin-bottom: 12px; }
.kbs-media-col .media-left { padding-right: 10px; }
}
/* ---------------------------------------------------------------
7. APPLICATION TILES
Bootstrap 3 col-xs-6 floats leave ragged rows when tiles are
uneven height. Flex the row and equalize.
--------------------------------------------------------------- */
.kbs-app-grid { display: flex; flex-wrap: wrap; }
.kbs-app-grid > [class*="col-"] { display: flex; margin-bottom: 16px; }
.kbs-app-tile {
flex: 1 1 auto;
padding: 15px 10px;
border: 1px solid #eee;
border-radius: 8px;
background: #fafafa;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.kbs-app-tile:hover { box-shadow: 0 6px 15px rgba(0,0,0,0.08); transform: translateY(-2px); }
.kbs-app-icon { font-size: 36px; color: var(--rust-red-dark, #d9534f); margin-bottom: 12px; display: block; }
.kbs-app-title { font-weight: 700; font-size: 14px; color: #222; text-transform: uppercase; margin: 0 0 6px 0; }
@media (max-width: 480px) {
.kbs-app-icon { font-size: 28px; margin-bottom: 8px; }
.kbs-app-title { font-size: 13px; }
.kbs-app-tile { padding: 12px 8px; }
}
/* ---------------------------------------------------------------
8. SUPPORT RESOURCE COLUMNS
--------------------------------------------------------------- */
.kbs-resource-col { margin-bottom: 18px; }
/* Live check 2026-07-31 at 320px: .resource-link-btn measured 184px inside a
314px column, leaving a ragged right edge and small tap targets.
Full width on phones = cleaner column and a 44px+ touch target. */
@media (max-width: 767px) {
.kbs-resource-col { margin-bottom: 12px; }
.resource-link-btn {
display: block;
width: 100%;
text-align: left;
margin-bottom: 8px;
}
}
/* ---------------------------------------------------------------
9. RUST PROTECTION OPTION CARDS
The old inline min-height:60px left dead space on phones.
Flex equalizes the two cards on desktop instead.
--------------------------------------------------------------- */
.kbs-option-col { margin-bottom: 18px; }
.kbs-option-card {
padding: 20px;
background: #fff;
border: 1px solid #ddd;
border-top: 4px solid #777;
border-radius: 6px;
height: 100%;
}
.kbs-option-card-featured {
background: #fdfdfd;
border: 1px solid var(--rust-red-dark, #d9534f);
border-top: 4px solid var(--rust-red-dark, #d9534f);
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.kbs-option-title { font-weight: 700; color: #333; margin-top: 0; font-size: 1.05rem; }
.kbs-option-title-featured { color: var(--rust-red-dark, #d9534f); }
.kbs-option-label { padding: 5px 10px; font-weight: 500; margin-right: 4px; display: inline-block; }
.kbs-option-btn { font-weight: 700; text-transform: uppercase; }
@media (min-width: 768px) {
.kbs-option-col { display: flex; }
.kbs-option-card { flex: 1 1 auto; }
}
@media (max-width: 767px) {
.kbs-option-card { padding: 15px; }
.kbs-option-col { margin-bottom: 12px; }
.kbs-option-btn { display: block; width: 100%; }
}
/* ---------------------------------------------------------------
10. LEARNING CENTER ARTICLE CARDS
--------------------------------------------------------------- */
.article-grid { display: flex; flex-wrap: wrap; margin-top: 16px; }
.article-grid > [class*="col-"] { display: flex; margin-bottom: 16px; }
.article-card {
flex: 1 1 auto;
border: 1px solid #ddd;
border-radius: 8px;
padding: 18px;
background: #fff;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.article-card:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.08); }
.kbs-article-icon { color: var(--kbs-blue, #0056b3); font-size: 24px; margin-bottom: 10px; }
.kbs-article-title { font-size: 16px; margin: 0 0 8px 0; color: #333; line-height: 1.4; }
.kbs-article-copy { font-size: 13px; color: #666; margin-bottom: 10px; }
.kbs-article-link { font-weight: 700; color: var(--kbs-blue, #0056b3); text-decoration: none; }
@media (max-width: 767px) { .article-card { padding: 14px; } }
/* ---------------------------------------------------------------
11. SUPPORT DESK MODAL
Old inline height:600px overflowed short phone viewports and the
iframe scrolled inside a clipped box. Use viewport units.
--------------------------------------------------------------- */
.kbs-sd-link { text-align: left; margin: 16px 0; }
.kbs-sd-link a { color: var(--kbs-blue, #0056b3); }
.kbs-sd-modal .modal-dialog { margin-top: 30px; }
.kbs-sd-modal .modal-content { height: 70vh; display: flex; flex-direction: column; }
.kbs-sd-modal .modal-body { flex: 1 1 auto; padding: 0; overflow: hidden; }
.kbs-sd-modal .modal-body iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 767px) {
.kbs-sd-modal .modal-dialog { margin: 10px; }
.kbs-sd-modal .modal-content { height: 82vh; }
}
/* ---------------------------------------------------------------
12. SAFETY NET
Long unbroken spec strings and tables are the other common source
of horizontal scroll on product pages.
--------------------------------------------------------------- */
@media (max-width: 767px) {
#rc-key-info-hero,
.kbs-faq-section { overflow-x: clip; } /* never overflow-x:hidden on html/body */
.table-responsive { border: 0; }
}
#toc {
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
border-left: 5px solid #c0181d;
border-radius: 4px;
padding: 18px 22px;
margin: 25px 0 30px;
}
#toc > strong {
display: block;
font-size: 17px;
margin-bottom: 10px;
color: #333;
}
#toc ul {
margin-bottom: 0;
padding-left: 20px;
}
#toc ul ul {
margin-top: 4px;
margin-bottom: 8px;
}
#toc li {
margin-bottom: 5px;
line-height: 1.45;
}
#toc a:link,
#toc a:visited {
color: #d32f2f;
}
#toc a:hover,
#toc a:focus {
color: #c0181d;
text-decoration: underline;
}
/* ------------------------------------------------------------
FIX 2: Links inside article tables do not look like links
------------------------------------------------------------
default.css sets a global "a:link { color: inherit }". Inside a
table cell the inherited color is #333, so product links in a
comparison table render identically to body text. Confirmed live:
the four product links in the concrete paint comparison table
compute to rgb(51,51,51) with no underline, while the same links
in a paragraph compute to rgb(211,47,47).
This is a conversion problem, not just a cosmetic one, since a
product comparison table is the highest purchase-intent element
on a guide page.
------------------------------------------------------------ */
.table td a:link,
.table td a:visited,
.table th a:link,
.table th a:visited {
color: #d32f2f;
text-decoration: none;
}
.table td a:hover,
.table td a:focus,
.table th a:hover,
.table th a:focus {
color: #c0181d;
text-decoration: underline;
}
/* Keep buttons placed inside a table cell looking like buttons */
.table td a.btn:link,
.table td a.btn:visited,
.table td a.kbs-btn:link,
.table td a.kbs-btn:visited {
color: #fff;
text-decoration: none;
}