/* ========================================== 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: all 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: all .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; } .btn-primary:focus, .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: all 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: all 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: all 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: 0.4s all; } .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: 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); } a.checkout-btn { display: inline-block; background-color: var(--kbs-blue); color: white; font-size: 22px; font-weight: 600; padding: 14px 28px; border-radius: 8px; text-decoration: none; /* Remove underline */ text-align: center; transition: background 0.2s, transform 0.1s; } .checkout-btn:hover { background-color: var(--kbs-blue-dark); transform: translateY(-2px); } .checkout-btn:active { transform: scale(0.97); } /* 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: all 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: all 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: all 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: all 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:all .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 */ } /* ========================================== 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 STICKY HEADER Hide-on-scroll-down / show-on-scroll-up Phone only — =767px ============================================= */ @media (max-width: 767px) { .floating-cart { display: none !important; } /* Activate: lock header to top */ header.site-header.mobile-sticky { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.18); transition: transform 0.28s ease; padding: 0; /* override the 25px default */ } /* Collapse stacked rows — only keep hamburger+logo+cart */ header.site-header.mobile-sticky .search-form-col, header.site-header.mobile-sticky .header-right { display: none !important; } /* Shrink the logo so the row stays slim */ header.site-header.mobile-sticky .logo { height: 50px; overflow: hidden; } header.site-header.mobile-sticky .logo img { position: static; max-height: 50px; width: auto; } /* Vertically center the 3-col row */ header.site-header.mobile-sticky .row { display: flex; align-items: center; } /* Hide on scroll DOWN */ header.site-header.mobile-sticky.nav-hidden { transform: translateY(-100%); box-shadow: none; } /* Push page content down to clear the fixed header. 65px = measured col row height at ~50px logo + padding. */ body.mobile-sticky-active { padding-top: 65px; } } .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) { #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; } /* Checkout button — full-width CTA emphasis */ .checkout-btn { display: block; width: 100%; text-align: center; background-color: #000; color: #fff; font-weight: 700; font-size: 1rem; padding: 0.75rem 1rem; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.05em; transition: background-color 0.2s, transform 0.1s; margin: 0.75rem 0; } .checkout-btn:hover, .checkout-btn:focus { background-color: var(--kbs-blue); color: #fff; text-decoration: none; transform: translateY(-2px); } /* ================================================ 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; } } /* Modern High-Conversion Checkout Button */ .checkout-btn { display: inline-flex; align-items: center; justify-content: center; /* Using Rust Red for Urgency or KBS Blue for Trust */ background-color: var(--rust-red); color: var(--white); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; text-decoration: none; letter-spacing: 0.5px; /* Mobile-first: Full height touch target */ min-height: 48px; padding: 10px 20px; margin: 10px 0; border: none; border-radius: 4px; /* Matches the industrial look of the add-to-cart */ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 4px 6px rgba(0,0,0,0.1); cursor: pointer; width: 100%; /* Default to full width for mobile ease of use */ max-width: 400px; /* Prevents it from looking too wide on desktop */ } /* Hover: Brighten and Lift */ @media (min-width: 992px) { .checkout-btn:hover { background-color: var(--rust-red-dark); color: var(--white); text-decoration: none; transform: translateY(-2px); box-shadow: 0 7px 14px rgba(0,0,0,0.15); } } /* Pulse animation to draw the eye on the cart page */ .checkout-btn { animation: checkout-pulse 3s infinite; } @keyframes checkout-pulse { 0% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(211, 47, 47, 0); } 100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0); } } /* Active State: Deep press effect */ .checkout-btn:active { transform: scale(0.97); background-color: var(--rust-red-deep); } /* 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 sticky header */ header.site-header.mobile-sticky { will-change: transform; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); } @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; } .faq-accordion .panel-title a .faq-toggle-icon::before { content: "\2212"; /* minus — shown when panel is open */ } .faq-accordion .panel-title a.collapsed .faq-toggle-icon::before { content: "\002B"; /* plus — shown when panel is closed */ } .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; }