/* ============================================================================
Indian Barcode / Mindware - modern B2B colour system
----------------------------------------------------------------------------
Loaded AFTER stylesheet.css. Colour, border, radius and shadow only: layout,
typography, spacing, grid and markup are left exactly as they were.
To revert, remove the to this file from common/header.twig.
The palette is sampled from the MINDWARE wordmark in
image/catalog/mindware.jpg: navy #1E2A6E (the "D"), orange #E8481E
("MIN"/"RE") and green #18803E ("WA"). Navy carries the UI, orange is
the accent and call-to-action, green marks prices.
========================================================================== */
:root {
--ib-primary: #1E2A6E;
--ib-primary-hover: #161F52;
--ib-secondary: #2C3A8C;
--ib-accent: #E8481E;
--ib-text: #1F2937;
--ib-text-muted: #64748B;
--ib-bg: #F8FAFC;
--ib-surface: #FFFFFF;
--ib-border: #E2E8F0;
--ib-border-strong: #CBD5E1;
--ib-price: #18803E;
--ib-radius: 6px;
--ib-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
--ib-shadow-hover: 0 6px 16px rgba(30, 42, 110, 0.10);
}
/* --- base ---------------------------------------------------------------- */
body {
background-color: var(--ib-bg);
color: var(--ib-text);
}
h1, h2, h3, h4, h5, h6 {
color: var(--ib-text);
}
a {
color: var(--ib-primary);
}
a:hover,
a:focus {
color: var(--ib-primary-hover);
}
hr {
border-top-color: var(--ib-border);
}
/* --- top utility bar ----------------------------------------------------- */
#top {
background-color: #141C4A;
border-bottom: none;
margin-bottom: 0;
min-height: 38px;
padding: 0;
}
#top .container {
padding: 0 20px;
}
#top .btn-link,
#top-links li,
#top-links a,
#top #form-currency .btn-link,
#top #form-language .btn-link {
color: #CBD5E1;
text-shadow: none;
font-size: 12.5px;
margin: 0;
line-height: 38px;
}
#top-links a:hover,
#top .btn-link:hover,
#top .btn-link:focus {
color: #fff;
text-decoration: none;
}
#top-links li {
padding: 0 4px;
}
#top-links li i.fa {
color: var(--ib-accent);
margin-right: 4px;
}
/* The phone number is the first item - make it read as a contact, not a link. */
#top-links li:first-child {
color: #fff;
font-weight: 600;
}
#top #form-currency .currency-select:hover,
#top #form-language .language-select:hover {
background-color: var(--ib-primary);
background-image: none;
color: #fff;
}
/* --- header / search / cart ---------------------------------------------- */
header {
background-color: var(--ib-surface);
border-bottom: 1px solid var(--ib-border);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
padding: 6px 0 14px;
margin-bottom: 0;
}
header .container {
padding-top: 6px;
}
#logo {
margin: 4px 0 0;
}
#logo img {
max-height: 68px;
width: auto;
}
/* Vertically centre the search and cart against the logo. */
header .col-sm-5,
header .col-sm-3 {
padding-top: 14px;
}
#search .form-control {
border: 1px solid var(--ib-border-strong);
border-right: none;
border-radius: var(--ib-radius) 0 0 var(--ib-radius);
box-shadow: none;
color: var(--ib-text);
}
#search .form-control:focus {
border-color: var(--ib-secondary);
box-shadow: 0 0 0 3px rgba(44, 58, 140, 0.12);
}
#search .input-group-btn .btn,
#search .btn-lg {
background-color: var(--ib-primary);
background-image: none;
border: 1px solid var(--ib-primary);
border-radius: 0 var(--ib-radius) var(--ib-radius) 0;
color: #fff;
text-shadow: none;
}
#search .input-group-btn .btn:hover,
#search .btn-lg:hover {
background-color: var(--ib-primary-hover);
border-color: var(--ib-primary-hover);
}
#cart > .btn {
background-color: var(--ib-primary);
background-image: none;
border: 1px solid var(--ib-primary);
border-radius: var(--ib-radius);
color: #fff;
text-shadow: none;
box-shadow: var(--ib-shadow);
}
#cart > .btn:hover,
#cart.open > .btn {
background-color: var(--ib-primary-hover);
border-color: var(--ib-primary-hover);
color: #fff;
}
#cart .dropdown-menu {
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow-hover);
}
/* --- main navigation ----------------------------------------------------- */
#menu {
background-color: var(--ib-primary);
background-image: linear-gradient(to bottom, var(--ib-secondary), var(--ib-primary));
border: none;
border-radius: var(--ib-radius);
box-shadow: 0 2px 10px rgba(30, 42, 110, 0.18);
margin-bottom: 22px;
}
#menu .nav > li > a {
color: #fff;
text-shadow: none;
border-radius: 0;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.01em;
}
#menu .nav > li > a:hover,
#menu .nav > li > a:focus,
#menu .nav > li.open > a {
background-color: var(--ib-primary-hover);
color: #fff;
box-shadow: inset 0 -3px 0 var(--ib-accent);
}
/* The dropdown panel is light, so every link inside it must be dark.
stylesheet.css sets `#menu .dropdown-inner li a:hover { color: #FFFFFF }`
at specificity (1,2,2), which would render white-on-white. The selectors
below deliberately outrank it. */
#menu .dropdown-menu {
background-color: var(--ib-surface);
background-image: none;
border: 1px solid var(--ib-border);
border-top: 3px solid var(--ib-accent);
border-radius: 0 0 var(--ib-radius) var(--ib-radius);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
padding-top: 8px;
margin-top: 0;
}
#menu .dropdown-menu .dropdown-inner li a,
#menu .dropdown-menu .dropdown-inner a,
#menu .dropdown-inner li a,
#menu .dropdown-menu li > a {
color: var(--ib-text);
background-color: transparent;
background-image: none;
border-radius: 4px;
padding: 6px 18px;
font-size: 13px;
}
#menu .dropdown-menu .dropdown-inner li a:hover,
#menu .dropdown-menu .dropdown-inner li a:focus,
#menu .dropdown-menu .dropdown-inner a:hover,
#menu .dropdown-inner li a:hover,
#menu .dropdown-menu li > a:hover,
#menu .dropdown-menu li > a:focus {
color: var(--ib-primary);
background-color: #EEF0F9;
background-image: none;
text-decoration: none;
}
/* Same problem in the account / currency menus in the top bar. */
.dropdown-menu {
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}
.dropdown-menu > li > a {
color: var(--ib-text);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu li > a:hover {
background-color: #EEF0F9;
background-image: none;
color: var(--ib-primary);
}
#top-links .dropdown-menu a,
#top-links .dropdown-menu a:hover {
color: var(--ib-text);
text-shadow: none;
}
#top-links .dropdown-menu a:hover {
color: var(--ib-primary);
background-color: #EEF0F9;
}
#menu .see-all {
background-color: #F1F5F9;
background-image: none;
border-top: 1px solid var(--ib-border);
color: var(--ib-primary);
border-radius: 0 0 var(--ib-radius) var(--ib-radius);
font-weight: 700;
margin-top: 8px;
padding: 9px 18px;
}
#menu .see-all:hover,
#menu .see-all:focus {
background-color: var(--ib-primary);
background-image: none;
color: #fff;
}
#menu #category {
color: #fff;
text-shadow: none;
}
#menu .btn-navbar,
#menu .btn-navbar:hover,
#menu .btn-navbar:focus,
#menu .btn-navbar:active {
background-color: rgba(255, 255, 255, 0.16);
background-image: none;
border: none;
border-radius: var(--ib-radius);
color: #fff;
}
/* Collapsed mobile menu: keep the light panel and dark text rather than the
stock translucent-black panel, which also produced unreadable links. */
@media (max-width: 767px) {
#menu div.dropdown-menu {
background-color: #F1F5F9;
border: none;
border-radius: 0;
box-shadow: none;
}
#menu .dropdown-inner a,
#menu .dropdown-menu .dropdown-inner li a,
#menu .dropdown-inner li a {
color: var(--ib-text);
}
#menu .dropdown-menu a:hover,
#menu .dropdown-menu ul li a:hover,
#menu .dropdown-menu .dropdown-inner li a:hover {
background: #DDE1F2;
color: var(--ib-primary);
}
#menu .see-all {
background-color: #DDE1F2;
color: var(--ib-primary);
border-radius: 0;
}
}
/* --- buttons ------------------------------------------------------------- */
.btn {
border-radius: var(--ib-radius);
text-shadow: none;
}
.btn-default {
background-color: var(--ib-surface);
background-image: none;
border: 1px solid var(--ib-border-strong);
color: var(--ib-text);
text-shadow: none;
}
.btn-default:hover,
.btn-default:focus {
background-color: #F1F5F9;
border-color: var(--ib-primary);
color: var(--ib-primary);
}
.btn-primary {
background-color: var(--ib-primary);
background-image: none;
border: 1px solid var(--ib-primary);
color: #fff;
text-shadow: none;
box-shadow: var(--ib-shadow);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
background-color: var(--ib-primary-hover);
background-position: 0 0;
border-color: var(--ib-primary-hover);
color: #fff;
}
.btn-info {
background-color: var(--ib-secondary);
background-image: none;
border: 1px solid var(--ib-secondary);
color: #fff;
text-shadow: none;
}
.btn-info:hover,
.btn-info:focus {
background-color: var(--ib-primary);
background-image: none;
border-color: var(--ib-primary);
}
.btn-success {
background-color: var(--ib-price);
background-image: none;
border: 1px solid var(--ib-price);
color: #fff;
text-shadow: none;
}
.btn-success:hover,
.btn-success:focus {
background-color: #13652F;
border-color: #13652F;
}
.btn-warning {
background-color: #E8481E;
background-image: none;
border: 1px solid #E8481E;
color: #fff;
text-shadow: none;
}
.btn-warning:hover,
.btn-warning:focus {
background-color: #C33A14;
border-color: #C33A14;
}
.btn-danger {
background-color: #DC2626;
background-image: none;
border: 1px solid #DC2626;
color: #fff;
text-shadow: none;
}
.btn-danger:hover,
.btn-danger:focus {
background-color: #B91C1C;
border-color: #B91C1C;
}
.btn-link {
color: var(--ib-primary);
}
.btn-link:hover {
color: var(--ib-primary-hover);
}
/* Ask for Price - accent amber so it reads as "enquiry", not "buy". */
.btn-ask-price,
.product-thumb .button-group button.btn-ask-price {
background-color: #E8481E;
background-image: none;
border-color: #E8481E;
color: #fff;
}
.btn-ask-price:hover,
.product-thumb .button-group button.btn-ask-price:hover {
background-color: #C33A14;
border-color: #C33A14;
color: #fff;
}
.price-ask a {
color: #B8380F;
font-weight: 700;
}
.price-ask a:hover {
color: var(--ib-primary);
}
/* --- panels, wells, tables, forms ---------------------------------------- */
.panel,
.well,
.thumbnail {
background-color: var(--ib-surface);
border-color: var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow);
}
.panel-heading {
border-color: var(--ib-border);
color: var(--ib-text);
}
.panel-default > .panel-heading {
background-color: #F1F5F9;
background-image: none;
}
.list-group-item {
border-color: var(--ib-border);
color: var(--ib-text);
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
background-color: var(--ib-primary);
border-color: var(--ib-primary);
color: #fff;
}
.table > thead > tr > th {
background-color: #F1F5F9;
border-bottom-color: var(--ib-border-strong);
color: var(--ib-text);
}
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td,
.table > tbody > tr > td,
.table > thead > tr > th {
border-color: var(--ib-border);
}
.form-control {
border-color: var(--ib-border-strong);
border-radius: var(--ib-radius);
box-shadow: none;
color: var(--ib-text);
}
.form-control:focus {
border-color: var(--ib-secondary);
box-shadow: 0 0 0 3px rgba(44, 58, 140, 0.12);
}
.breadcrumb {
background-color: transparent;
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
}
.breadcrumb a {
color: var(--ib-text-muted);
}
.breadcrumb a:hover {
color: var(--ib-primary);
}
.nav-tabs {
border-bottom-color: var(--ib-border);
}
.nav-tabs > li > a {
color: var(--ib-text-muted);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
border-color: var(--ib-border) var(--ib-border) transparent;
border-top: 2px solid var(--ib-primary);
color: var(--ib-primary);
font-weight: 600;
}
.pagination > li > a,
.pagination > li > span {
border-color: var(--ib-border);
color: var(--ib-primary);
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
background-color: var(--ib-primary);
border-color: var(--ib-primary);
color: #fff;
}
/* --- product cards ------------------------------------------------------- */
.product-thumb {
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow);
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.product-thumb:hover {
border-color: #B9C1E4;
box-shadow: var(--ib-shadow-hover);
}
.product-thumb h4 a {
color: var(--ib-text);
}
.product-thumb h4 a:hover {
color: var(--ib-primary);
}
.product-thumb .caption p {
color: var(--ib-text-muted);
}
/* Price: dark and prominent, with the current selling figure in green. */
.product-thumb .price {
color: var(--ib-text);
font-size: 17px;
font-weight: 700;
}
.product-thumb .price-new {
color: var(--ib-price);
font-weight: 700;
}
.product-thumb .price-old {
color: var(--ib-text-muted);
font-size: 13px;
font-weight: 400;
}
.product-thumb .price-tax {
color: var(--ib-text-muted);
font-size: 12px;
font-weight: 400;
}
h2.price {
color: var(--ib-price);
}
/* Card action row: neutral until hovered. */
.product-thumb .button-group {
background-color: var(--ib-surface);
border-top: 1px solid var(--ib-border);
border-radius: 0 0 var(--ib-radius) var(--ib-radius);
overflow: hidden;
}
.product-list .product-thumb .button-group {
border-left-color: var(--ib-border);
}
.product-thumb .button-group button {
background-color: var(--ib-primary);
color: #fff;
font-weight: 600;
letter-spacing: 0.02em;
}
.product-thumb .button-group button:hover {
background-color: var(--ib-primary-hover);
color: #fff;
}
/* Wishlist / compare stay quiet until hovered. */
.product-thumb .button-group button + button {
background-color: var(--ib-surface);
border-left: 1px solid var(--ib-border);
color: var(--ib-text-muted);
}
.product-thumb .button-group button + button:hover {
background-color: #EEF0F9;
color: var(--ib-accent);
}
/* --- section headings ---------------------------------------------------- */
.container > h3,
#content > h3,
#content > h2 {
color: var(--ib-text);
font-weight: 700;
}
/* --- alerts -------------------------------------------------------------- */
.alert-success {
background-color: #F0FDF4;
border-color: #BBF7D0;
color: #166534;
}
.alert-info {
background-color: #EEF0F9;
border-color: #B9C1E4;
color: #1E2A6E;
}
.alert-danger {
background-color: #FEF2F2;
border-color: #FECACA;
color: #991B1B;
}
.alert-warning {
background-color: #FFFBEB;
border-color: #FDE68A;
color: #92400E;
}
/* --- footer -------------------------------------------------------------- */
footer {
background-color: #141C4A;
border-top: none;
color: #CBD5E1;
}
footer h5 {
color: #fff;
}
footer a {
color: #CBD5E1;
}
footer a:hover {
color: var(--ib-accent);
}
footer hr {
border-top-color: rgba(255, 255, 255, 0.12);
}
/* ============================================================================
Home page sections
========================================================================== */
/* --- trust strip --------------------------------------------------------- */
.ib-trust {
background-color: var(--ib-surface);
border-bottom: 1px solid var(--ib-border);
padding: 14px 0;
margin-bottom: 22px;
}
.ib-trust-item {
display: flex;
align-items: center;
gap: 12px;
padding: 4px 0;
}
.ib-trust-item i.fa {
font-size: 22px;
color: var(--ib-secondary);
width: 30px;
text-align: center;
flex: 0 0 30px;
}
.ib-trust-item strong {
display: block;
color: var(--ib-text);
font-size: 13.5px;
line-height: 1.3;
}
.ib-trust-item span {
display: block;
color: var(--ib-text-muted);
font-size: 12px;
}
@media (max-width: 767px) {
.ib-trust-item {
gap: 8px;
}
.ib-trust-item i.fa {
font-size: 18px;
width: 22px;
flex: 0 0 22px;
}
}
/* --- shared section furniture -------------------------------------------- */
.ib-section {
margin: 36px 0;
}
.ib-section-head {
margin-bottom: 20px;
}
.ib-section-head h2 {
margin: 0 0 4px;
font-size: 24px;
font-weight: 700;
color: var(--ib-text);
}
.ib-section-head h2:after {
content: "";
display: block;
width: 44px;
height: 3px;
margin-top: 10px;
background-color: var(--ib-accent);
border-radius: 2px;
}
.ib-section-head p {
margin: 10px 0 0;
color: var(--ib-text-muted);
font-size: 14px;
}
/* --- shop by category ---------------------------------------------------- */
.ib-cat-grid {
margin-left: -8px;
margin-right: -8px;
}
.ib-cat-grid > div {
padding: 0 8px;
margin-bottom: 16px;
}
.ib-cat-tile {
display: block;
height: 100%;
padding: 18px 10px 14px;
text-align: center;
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow);
text-decoration: none;
transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.ib-cat-tile:hover,
.ib-cat-tile:focus {
border-color: #B9C1E4;
box-shadow: var(--ib-shadow-hover);
text-decoration: none;
transform: translateY(-2px);
}
.ib-cat-img {
display: flex;
align-items: center;
justify-content: center;
height: 84px;
margin-bottom: 10px;
}
.ib-cat-img img {
max-height: 84px;
max-width: 100%;
width: auto;
}
.ib-cat-name {
display: block;
color: var(--ib-text);
font-size: 13px;
font-weight: 600;
line-height: 1.35;
min-height: 36px;
}
.ib-cat-tile:hover .ib-cat-name {
color: var(--ib-primary);
}
.ib-cat-count {
display: block;
margin-top: 4px;
color: var(--ib-text-muted);
font-size: 11.5px;
}
/* --- bulk enquiry band --------------------------------------------------- */
.ib-cta {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 18px;
margin: 36px 0;
padding: 26px 30px;
border-radius: var(--ib-radius);
background-color: var(--ib-primary);
background-image: linear-gradient(135deg, #1E2A6E 0%, #2C3A8C 100%);
box-shadow: 0 6px 20px rgba(30, 42, 110, 0.18);
}
.ib-cta-text {
flex: 1 1 380px;
}
.ib-cta-text h3 {
margin: 0 0 6px;
color: #fff;
font-size: 20px;
font-weight: 700;
line-height: 1.35;
}
.ib-cta-text p {
margin: 0;
color: rgba(255, 255, 255, 0.85);
font-size: 14px;
}
.ib-cta-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.ib-btn-call,
.ib-btn-call:focus {
background-color: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.45);
color: #fff;
font-weight: 600;
}
.ib-btn-call:hover {
background-color: rgba(255, 255, 255, 0.24);
border-color: #fff;
color: #fff;
}
.ib-btn-quote,
.ib-btn-quote:focus {
background-color: #fff;
border: 1px solid #fff;
color: var(--ib-primary);
font-weight: 700;
}
.ib-btn-quote:hover {
background-color: #EEF0F9;
color: var(--ib-primary-hover);
}
@media (max-width: 767px) {
.ib-cta {
padding: 22px 18px;
}
.ib-cta-text h3 {
font-size: 17px;
}
.ib-cta-actions .btn {
width: 100%;
}
}
/* --- industries ---------------------------------------------------------- */
.ib-industry-grid > div {
margin-bottom: 16px;
}
.ib-industry {
text-align: center;
padding: 20px 8px;
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ib-industry:hover {
border-color: #B9C1E4;
box-shadow: var(--ib-shadow-hover);
}
.ib-industry i.fa {
display: block;
font-size: 26px;
color: var(--ib-secondary);
margin-bottom: 10px;
}
.ib-industry span {
display: block;
color: var(--ib-text);
font-size: 12.5px;
font-weight: 600;
line-height: 1.35;
}
/* --- why mindware -------------------------------------------------------- */
.ib-why {
margin: 36px 0;
padding: 28px 30px;
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow);
}
.ib-why h2 {
margin: 0 0 12px;
font-size: 24px;
font-weight: 700;
color: var(--ib-text);
}
.ib-why p {
color: var(--ib-text-muted);
font-size: 14px;
line-height: 1.7;
margin-bottom: 18px;
}
.ib-stats > div {
padding: 14px 10px;
text-align: center;
border-left: 3px solid var(--ib-accent);
background-color: #F8FAFC;
border-radius: 0 var(--ib-radius) var(--ib-radius) 0;
margin-bottom: 12px;
}
.ib-stats strong {
display: block;
color: var(--ib-primary);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
.ib-stats span {
display: block;
color: var(--ib-text-muted);
font-size: 12.5px;
margin-top: 2px;
}
@media (max-width: 767px) {
.ib-why {
padding: 22px 18px;
}
}
/* --- brand strip --------------------------------------------------------- */
.ib-brand-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
}
.ib-brand-strip a {
display: flex;
align-items: center;
justify-content: center;
min-width: 150px;
height: 76px;
padding: 10px 16px;
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow);
color: var(--ib-text);
font-weight: 600;
text-decoration: none;
filter: grayscale(100%);
opacity: 0.7;
transition: filter 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}
.ib-brand-strip a:hover {
filter: none;
opacity: 1;
border-color: #B9C1E4;
color: var(--ib-primary);
text-decoration: none;
}
.ib-brand-strip img {
max-height: 56px;
max-width: 100%;
width: auto;
}
/* ============================================================================
Dropdown affordance
----------------------------------------------------------------------------
menu.twig renders parent items as a plain with no
caret, so on a phone there was nothing to show an item could be expanded.
Font Awesome is already loaded, so the arrow is added with ::after and needs
no markup change.
========================================================================== */
#menu .nav > li.dropdown > a.dropdown-toggle:after {
content: "\f107"; /* fa-angle-down */
font-family: FontAwesome;
font-size: 12px;
font-weight: normal;
margin-left: 7px;
opacity: 0.8;
display: inline-block;
transition: transform 0.15s ease;
}
#menu .nav > li.dropdown.open > a.dropdown-toggle:after {
transform: rotate(180deg);
opacity: 1;
}
@media (max-width: 767px) {
/* Full-width rows on a phone: push the arrow to the right edge so each
expandable item reads as a control, not a link. */
#menu .nav > li.dropdown > a.dropdown-toggle {
position: relative;
padding-right: 44px;
}
#menu .nav > li.dropdown > a.dropdown-toggle:after {
position: absolute;
right: 16px;
top: 50%;
margin-left: 0;
margin-top: -9px;
font-size: 16px;
width: 18px;
text-align: center;
}
#menu .nav > li > a {
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
padding-top: 12px;
padding-bottom: 12px;
}
/* Sub-items get a small chevron so the hierarchy is legible. */
#menu .dropdown-menu .dropdown-inner li a:before {
content: "\f105"; /* fa-angle-right */
font-family: FontAwesome;
margin-right: 8px;
color: var(--ib-accent);
font-size: 12px;
}
#menu .see-all:after {
content: "\f105";
font-family: FontAwesome;
margin-left: 8px;
}
/* Hamburger: make it obviously tappable. */
#menu .btn-navbar {
font-size: 18px;
padding: 6px 16px;
margin: 6px 8px 6px 0;
}
}
/* The account / currency menus in the top bar already render a .caret element;
keep it visible against the dark bar. */
#top-links .dropdown-toggle .caret {
border-top-color: currentColor;
margin-left: 5px;
}
/* --- special offers badge ------------------------------------------------ */
.product-thumb .image {
position: relative;
}
.ib-save-badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
background-color: var(--ib-accent);
color: #fff;
font-size: 12px;
font-weight: 700;
line-height: 1;
padding: 6px 9px;
border-radius: 3px;
box-shadow: 0 2px 6px rgba(232, 72, 30, 0.35);
}
/* --- consumables quick links --------------------------------------------- */
.ib-consumable-strip {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.ib-consumable-strip a {
display: flex;
align-items: center;
gap: 12px;
flex: 1 1 210px;
padding: 10px 16px 10px 10px;
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow);
color: var(--ib-text);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ib-consumable-strip a:hover {
border-color: var(--ib-accent);
box-shadow: var(--ib-shadow-hover);
color: var(--ib-primary);
text-decoration: none;
}
.ib-consumable-strip img {
width: 46px;
height: 46px;
object-fit: contain;
flex: 0 0 46px;
}
/* --- how it works -------------------------------------------------------- */
.ib-steps > div {
margin-bottom: 16px;
}
.ib-step {
position: relative;
height: 100%;
padding: 22px 18px 18px;
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow);
}
.ib-step-no {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin-bottom: 12px;
border-radius: 50%;
background-color: var(--ib-primary);
color: #fff;
font-size: 15px;
font-weight: 700;
}
.ib-step strong {
display: block;
color: var(--ib-text);
font-size: 14.5px;
margin-bottom: 6px;
}
.ib-step p {
margin: 0;
color: var(--ib-text-muted);
font-size: 13px;
line-height: 1.6;
}
.ib-step em {
color: var(--ib-accent);
font-style: normal;
font-weight: 600;
}
/* ============================================================================
Wider layout
----------------------------------------------------------------------------
Bootstrap 3 caps .container at 1170px, which left the 11 top-level menu
items wrapping onto a second row on a desktop screen - and because
.navbar-nav > li is floated, the overflowing item ("Print Head") landed
flush right on that second row instead of following the others.
Widening the container gives the menu room; the flex rules below make any
remaining wrap fall in reading order.
========================================================================== */
@media (min-width: 1200px) {
.container {
width: auto;
max-width: 1720px;
padding-left: 24px;
padding-right: 24px;
}
}
/* Tighten the top-level items so more of them fit before wrapping. */
@media (min-width: 768px) {
#menu .nav.navbar-nav {
display: flex;
flex-wrap: wrap;
align-items: stretch;
float: none;
margin: 0;
}
#menu .nav.navbar-nav > li {
float: none;
}
#menu .nav > li > a {
padding-left: 12px;
padding-right: 12px;
white-space: nowrap;
}
#menu .nav > li.dropdown > a.dropdown-toggle:after {
margin-left: 5px;
font-size: 11px;
}
}
/* Narrower desktops: shave the items down further so 11 categories still make
one row before the container runs out of width. */
@media (min-width: 768px) and (max-width: 1499px) {
#menu .nav > li > a {
padding-left: 8px;
padding-right: 8px;
font-size: 12px;
letter-spacing: 0;
}
#menu .nav > li.dropdown > a.dropdown-toggle:after {
margin-left: 4px;
font-size: 10px;
}
}
/* The dropdown panel is positioned against its own ; keep it above the
rest of the bar so it can never be clipped by a wrapped second row. */
#menu .nav > li.dropdown.open {
z-index: 1002;
}
#menu .dropdown-menu {
z-index: 1003;
}
/* ============================================================================
Premium polish
========================================================================== */
html {
scroll-behavior: smooth;
}
/* Keyboard focus that is visible without shouting at mouse users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--ib-accent);
outline-offset: 2px;
}
a:focus:not(:focus-visible) {
outline: none;
}
::selection {
background-color: var(--ib-primary);
color: #fff;
}
/* Nav follows you down the page on desktop. Degrades to a normal bar in any
browser that cannot do position:sticky. */
@media (min-width: 768px) {
#menu {
position: sticky;
top: 0;
z-index: 1001;
}
}
/* Product imagery lifts slightly on hover instead of just fading. */
.product-thumb .image {
overflow: hidden;
border-radius: var(--ib-radius) var(--ib-radius) 0 0;
}
.product-thumb .image img {
transition: transform 0.35s ease;
}
.product-thumb:hover .image img {
transform: scale(1.05);
}
.product-thumb .image a:hover {
opacity: 1;
}
/* Buttons get a tactile press. */
.btn {
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
.btn:active {
transform: translateY(1px);
}
.product-thumb .button-group button {
transition: background-color 0.15s ease, color 0.15s ease;
}
/* Cart and account tables read as data, not as a 2009 grid. */
.table > tbody > tr > td,
.table > tbody > tr > th {
vertical-align: middle;
}
.table-hover > tbody > tr:hover {
background-color: #F8FAFC;
}
.table > tbody > tr > td.text-right,
.table > tfoot > tr > td {
font-variant-numeric: tabular-nums;
}
.table > tfoot > tr:last-child > td {
font-size: 16px;
font-weight: 700;
color: var(--ib-text);
}
/* Inputs and selects sit at a comfortable touch size. */
.form-control {
height: 40px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea.form-control {
height: auto;
}
.input-group .form-control {
height: 40px;
}
/* Back to top */
#ib-top {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 1030;
width: 44px;
height: 44px;
display: none;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background-color: var(--ib-primary);
color: #fff;
font-size: 17px;
box-shadow: 0 6px 18px rgba(30, 42, 110, 0.28);
cursor: pointer;
transition: background-color 0.15s ease, transform 0.15s ease;
}
#ib-top:hover {
background-color: var(--ib-accent);
transform: translateY(-2px);
color: #fff;
}
#ib-top.is-visible {
display: flex;
}
@media (max-width: 767px) {
#ib-top {
right: 14px;
bottom: 14px;
width: 40px;
height: 40px;
}
}
/* Modal to match the rest of the chrome. */
.modal-content {
border: none;
border-radius: 8px;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
}
.modal-header {
border-bottom: 1px solid var(--ib-border);
padding: 16px 20px;
}
.modal-header .modal-title {
font-weight: 700;
color: var(--ib-text);
}
.modal-body {
padding: 20px;
}
/* Captcha image should not look bolted on. */
img[src*="captcha"] {
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
}
/* Footer links line up as a proper sitemap column. */
footer .col-sm-3 ul {
line-height: 2;
}
@media print {
#top, #menu, footer, #ib-top, .button-group, .ib-cta, .ib-trust {
display: none !important;
}
}
/* ============================================================================
Contact page
========================================================================== */
.ib-contact-hero {
margin: 0 0 24px;
padding-bottom: 18px;
border-bottom: 1px solid var(--ib-border);
}
.ib-contact-hero h1 {
margin: 0 0 8px;
font-size: 28px;
font-weight: 700;
color: var(--ib-text);
}
.ib-contact-hero p {
margin: 0;
font-size: 15px;
color: var(--ib-text-muted);
}
.ib-contact-cards > div {
margin-bottom: 16px;
}
.ib-contact-card {
height: 100%;
padding: 22px 20px;
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-top: 3px solid var(--ib-accent);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow);
}
.ib-contact-card i.fa {
display: block;
margin-bottom: 12px;
font-size: 22px;
color: var(--ib-primary);
}
.ib-contact-card h3 {
margin: 0 0 10px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ib-text-muted);
}
.ib-contact-card address,
.ib-contact-card p {
margin: 0 0 8px;
font-size: 14px;
line-height: 1.7;
color: var(--ib-text);
font-style: normal;
}
.ib-contact-card .text-muted {
font-size: 13px;
color: var(--ib-text-muted);
}
.ib-contact-strong {
font-size: 15px;
font-weight: 700;
color: var(--ib-primary);
}
.ib-contact-strong:hover {
color: var(--ib-accent);
}
.ib-map {
margin: 8px 0 32px;
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
overflow: hidden;
box-shadow: var(--ib-shadow);
line-height: 0;
}
.ib-map iframe {
display: block;
width: 100%;
}
.ib-contact-subhead {
margin: 0 0 16px;
font-size: 20px;
font-weight: 700;
}
.ib-contact-form {
margin: 8px 0 36px;
padding: 28px 30px;
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow);
}
.ib-contact-form h2 {
margin: 0 0 10px;
font-size: 22px;
font-weight: 700;
}
.ib-contact-form > .row > div > p {
color: var(--ib-text-muted);
font-size: 14px;
line-height: 1.7;
}
.ib-contact-points {
list-style: none;
padding: 0;
margin: 18px 0 0;
}
.ib-contact-points li {
padding: 6px 0;
font-size: 14px;
color: var(--ib-text);
}
.ib-contact-points i.fa {
margin-right: 10px;
color: var(--ib-price);
}
.ib-contact-form .form-group {
margin-bottom: 16px;
}
.ib-contact-form label {
font-size: 13px;
font-weight: 600;
color: var(--ib-text);
}
@media (max-width: 767px) {
.ib-contact-form {
padding: 22px 18px;
}
.ib-map iframe {
height: 280px;
}
}
/* ============================================================================
Brand list page + home brand wall
========================================================================== */
.ib-az {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 26px;
padding: 14px 16px;
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
}
.ib-az a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 8px;
border-radius: 4px;
background-color: #F1F5F9;
color: var(--ib-primary);
font-size: 13px;
font-weight: 700;
text-decoration: none;
}
.ib-az a:hover {
background-color: var(--ib-primary);
color: #fff;
}
.ib-brand-group {
margin-bottom: 30px;
}
.ib-brand-group h2 {
margin: 0 0 14px;
font-size: 20px;
font-weight: 700;
color: var(--ib-text);
}
.ib-brand-group h2:after {
content: "";
display: block;
width: 36px;
height: 3px;
margin-top: 8px;
background-color: var(--ib-accent);
border-radius: 2px;
}
.ib-brand-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.ib-brand-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 13px 16px;
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow);
color: var(--ib-text);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.ib-brand-card:hover {
border-color: var(--ib-accent);
box-shadow: var(--ib-shadow-hover);
color: var(--ib-primary);
text-decoration: none;
}
.ib-brand-card i.fa {
color: var(--ib-accent);
}
/* Home brand wall: a name tile when the brand has no logo on file. */
.ib-brand-strip a span {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--ib-primary);
}
.ib-brand-strip a {
min-width: 132px;
height: 68px;
flex: 0 0 auto;
}
@media (max-width: 767px) {
.ib-brand-strip a {
min-width: 108px;
height: 58px;
padding: 8px 12px;
}
.ib-brand-strip a span {
font-size: 13px;
}
}
/* ============================================================================
Top bar phone numbers
========================================================================== */
#top-links li.ib-top-phone {
color: #fff;
font-weight: 600;
}
#top-links li.ib-top-phone a {
color: #fff;
font-weight: 600;
}
#top-links li.ib-top-phone a:hover {
color: var(--ib-accent);
}
#top-links li.ib-top-phone .ib-top-sep {
color: rgba(255, 255, 255, 0.35);
margin: 0 2px;
}
@media (max-width: 767px) {
#top-links li.ib-top-phone .ib-top-sep,
#top-links li.ib-top-phone a:last-child {
display: none;
}
}
/* ============================================================================
Brand carousel + brand cards with logos
========================================================================== */
/* 26 logos produced 26 pagination dots that wrapped onto three rows on a
phone. The strip autoplays, so the dots are gone entirely.
Scoped to .carousel on purpose - the slideshow above it has 5 slides and
its dots are still worth keeping. */
.carousel .swiper-pagination {
display: none !important;
}
.carousel.swiper-viewport {
background: var(--ib-surface);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow);
margin-bottom: 26px;
padding: 10px 0;
}
.carousel .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
}
.carousel .swiper-slide img {
max-height: 52px;
width: auto;
margin: 0 auto;
filter: grayscale(100%);
opacity: 0.75;
transition: filter 0.2s ease, opacity 0.2s ease;
}
.carousel .swiper-slide:hover img {
filter: none;
opacity: 1;
}
.carousel .swiper-button-next,
.carousel .swiper-button-prev {
opacity: 0.5;
transition: opacity 0.15s ease;
}
.carousel:hover .swiper-button-next,
.carousel:hover .swiper-button-prev {
opacity: 1;
}
@media (max-width: 767px) {
/* Auto-scroll only - no dots, no arrows. */
.carousel .swiper-button-next,
.carousel .swiper-button-prev,
.carousel .swiper-pager {
display: none !important;
}
.carousel .swiper-slide img {
max-height: 40px;
}
}
/* Brand cards that have a real logo become a logo tile. */
.ib-brand-card.has-logo {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 12px;
text-align: center;
}
.ib-brand-card.has-logo img {
max-height: 46px;
max-width: 100%;
width: auto;
filter: grayscale(100%);
opacity: 0.8;
transition: filter 0.15s ease, opacity 0.15s ease;
}
.ib-brand-card.has-logo:hover img {
filter: none;
opacity: 1;
}
.ib-brand-card.has-logo i.fa {
display: none;
}
.ib-brand-card small {
color: var(--ib-text-muted);
font-weight: 400;
}
/* Home brand wall: logos are the point, so give them room. */
.ib-brand-strip img {
max-height: 46px;
filter: grayscale(100%);
opacity: 0.8;
}
.ib-brand-strip a:hover img {
filter: none;
opacity: 1;
}
/* ============================================================================
Wider layout
----------------------------------------------------------------------------
Bootstrap 3 caps .container at 1170px, which left the 11 top-level menu
items wrapping onto a second row on a desktop screen - and because
.navbar-nav > li is floated, the overflowing item ("Print Head") landed
flush right on that second row instead of following the others.
Widening the container gives the menu room; the flex rules below make any
remaining wrap fall in reading order.
========================================================================== */
@media (min-width: 1200px) {
.container {
width: auto;
max-width: 1720px;
padding-left: 24px;
padding-right: 24px;
}
}
/* Tighten the top-level items so more of them fit before wrapping. */
@media (min-width: 768px) {
#menu .nav.navbar-nav {
display: flex;
flex-wrap: wrap;
align-items: stretch;
float: none;
margin: 0;
}
#menu .nav.navbar-nav > li {
float: none;
}
#menu .nav > li > a {
padding-left: 12px;
padding-right: 12px;
white-space: nowrap;
}
#menu .nav > li.dropdown > a.dropdown-toggle:after {
margin-left: 5px;
font-size: 11px;
}
}
/* Narrower desktops: shave the items down further so 11 categories still make
one row before the container runs out of width. */
@media (min-width: 768px) and (max-width: 1499px) {
#menu .nav > li > a {
padding-left: 8px;
padding-right: 8px;
font-size: 12px;
letter-spacing: 0;
}
#menu .nav > li.dropdown > a.dropdown-toggle:after {
margin-left: 4px;
font-size: 10px;
}
}
/* The dropdown panel is positioned against its own ; keep it above the
rest of the bar so it can never be clipped by a wrapped second row. */
#menu .nav > li.dropdown.open {
z-index: 1002;
}
#menu .dropdown-menu {
z-index: 1003;
}
/* ============================================================================
Premium polish
========================================================================== */
html {
scroll-behavior: smooth;
}
/* Keyboard focus that is visible without shouting at mouse users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--ib-accent);
outline-offset: 2px;
}
a:focus:not(:focus-visible) {
outline: none;
}
::selection {
background-color: var(--ib-primary);
color: #fff;
}
/* Nav follows you down the page on desktop. Degrades to a normal bar in any
browser that cannot do position:sticky. */
@media (min-width: 768px) {
#menu {
position: sticky;
top: 0;
z-index: 1001;
}
}
/* Product imagery lifts slightly on hover instead of just fading. */
.product-thumb .image {
overflow: hidden;
border-radius: var(--ib-radius) var(--ib-radius) 0 0;
}
.product-thumb .image img {
transition: transform 0.35s ease;
}
.product-thumb:hover .image img {
transform: scale(1.05);
}
.product-thumb .image a:hover {
opacity: 1;
}
/* Buttons get a tactile press. */
.btn {
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
.btn:active {
transform: translateY(1px);
}
.product-thumb .button-group button {
transition: background-color 0.15s ease, color 0.15s ease;
}
/* Cart and account tables read as data, not as a 2009 grid. */
.table > tbody > tr > td,
.table > tbody > tr > th {
vertical-align: middle;
}
.table-hover > tbody > tr:hover {
background-color: #F8FAFC;
}
.table > tbody > tr > td.text-right,
.table > tfoot > tr > td {
font-variant-numeric: tabular-nums;
}
.table > tfoot > tr:last-child > td {
font-size: 16px;
font-weight: 700;
color: var(--ib-text);
}
/* Inputs and selects sit at a comfortable touch size. */
.form-control {
height: 40px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea.form-control {
height: auto;
}
.input-group .form-control {
height: 40px;
}
/* Back to top */
#ib-top {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 1030;
width: 44px;
height: 44px;
display: none;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background-color: var(--ib-primary);
color: #fff;
font-size: 17px;
box-shadow: 0 6px 18px rgba(30, 42, 110, 0.28);
cursor: pointer;
transition: background-color 0.15s ease, transform 0.15s ease;
}
#ib-top:hover {
background-color: var(--ib-accent);
transform: translateY(-2px);
color: #fff;
}
#ib-top.is-visible {
display: flex;
}
@media (max-width: 767px) {
#ib-top {
right: 14px;
bottom: 14px;
width: 40px;
height: 40px;
}
}
/* Modal to match the rest of the chrome. */
.modal-content {
border: none;
border-radius: 8px;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
}
.modal-header {
border-bottom: 1px solid var(--ib-border);
padding: 16px 20px;
}
.modal-header .modal-title {
font-weight: 700;
color: var(--ib-text);
}
.modal-body {
padding: 20px;
}
/* Captcha image should not look bolted on. */
img[src*="captcha"] {
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
}
/* Footer links line up as a proper sitemap column. */
footer .col-sm-3 ul {
line-height: 2;
}
@media print {
#top, #menu, footer, #ib-top, .button-group, .ib-cta, .ib-trust {
display: none !important;
}
}
/* ============================================================================
Contact page
========================================================================== */
.ib-contact-hero {
margin: 0 0 24px;
padding-bottom: 18px;
border-bottom: 1px solid var(--ib-border);
}
.ib-contact-hero h1 {
margin: 0 0 8px;
font-size: 28px;
font-weight: 700;
color: var(--ib-text);
}
.ib-contact-hero p {
margin: 0;
font-size: 15px;
color: var(--ib-text-muted);
}
.ib-contact-cards > div {
margin-bottom: 16px;
}
.ib-contact-card {
height: 100%;
padding: 22px 20px;
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-top: 3px solid var(--ib-accent);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow);
}
.ib-contact-card i.fa {
display: block;
margin-bottom: 12px;
font-size: 22px;
color: var(--ib-primary);
}
.ib-contact-card h3 {
margin: 0 0 10px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ib-text-muted);
}
.ib-contact-card address,
.ib-contact-card p {
margin: 0 0 8px;
font-size: 14px;
line-height: 1.7;
color: var(--ib-text);
font-style: normal;
}
.ib-contact-card .text-muted {
font-size: 13px;
color: var(--ib-text-muted);
}
.ib-contact-strong {
font-size: 15px;
font-weight: 700;
color: var(--ib-primary);
}
.ib-contact-strong:hover {
color: var(--ib-accent);
}
.ib-map {
margin: 8px 0 32px;
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
overflow: hidden;
box-shadow: var(--ib-shadow);
line-height: 0;
}
.ib-map iframe {
display: block;
width: 100%;
}
.ib-contact-subhead {
margin: 0 0 16px;
font-size: 20px;
font-weight: 700;
}
.ib-contact-form {
margin: 8px 0 36px;
padding: 28px 30px;
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow);
}
.ib-contact-form h2 {
margin: 0 0 10px;
font-size: 22px;
font-weight: 700;
}
.ib-contact-form > .row > div > p {
color: var(--ib-text-muted);
font-size: 14px;
line-height: 1.7;
}
.ib-contact-points {
list-style: none;
padding: 0;
margin: 18px 0 0;
}
.ib-contact-points li {
padding: 6px 0;
font-size: 14px;
color: var(--ib-text);
}
.ib-contact-points i.fa {
margin-right: 10px;
color: var(--ib-price);
}
.ib-contact-form .form-group {
margin-bottom: 16px;
}
.ib-contact-form label {
font-size: 13px;
font-weight: 600;
color: var(--ib-text);
}
@media (max-width: 767px) {
.ib-contact-form {
padding: 22px 18px;
}
.ib-map iframe {
height: 280px;
}
}
/* ============================================================================
Brand list page + home brand wall
========================================================================== */
.ib-az {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 26px;
padding: 14px 16px;
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
}
.ib-az a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 8px;
border-radius: 4px;
background-color: #F1F5F9;
color: var(--ib-primary);
font-size: 13px;
font-weight: 700;
text-decoration: none;
}
.ib-az a:hover {
background-color: var(--ib-primary);
color: #fff;
}
.ib-brand-group {
margin-bottom: 30px;
}
.ib-brand-group h2 {
margin: 0 0 14px;
font-size: 20px;
font-weight: 700;
color: var(--ib-text);
}
.ib-brand-group h2:after {
content: "";
display: block;
width: 36px;
height: 3px;
margin-top: 8px;
background-color: var(--ib-accent);
border-radius: 2px;
}
.ib-brand-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.ib-brand-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 13px 16px;
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow);
color: var(--ib-text);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.ib-brand-card:hover {
border-color: var(--ib-accent);
box-shadow: var(--ib-shadow-hover);
color: var(--ib-primary);
text-decoration: none;
}
.ib-brand-card i.fa {
color: var(--ib-accent);
}
/* Home brand wall: a name tile when the brand has no logo on file. */
.ib-brand-strip a span {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--ib-primary);
}
.ib-brand-strip a {
min-width: 132px;
height: 68px;
flex: 0 0 auto;
}
@media (max-width: 767px) {
.ib-brand-strip a {
min-width: 108px;
height: 58px;
padding: 8px 12px;
}
.ib-brand-strip a span {
font-size: 13px;
}
}
/* ============================================================================
Top bar phone numbers
========================================================================== */
#top-links li.ib-top-phone {
color: #fff;
font-weight: 600;
}
#top-links li.ib-top-phone a {
color: #fff;
font-weight: 600;
}
#top-links li.ib-top-phone a:hover {
color: var(--ib-accent);
}
#top-links li.ib-top-phone .ib-top-sep {
color: rgba(255, 255, 255, 0.35);
margin: 0 2px;
}
@media (max-width: 767px) {
#top-links li.ib-top-phone .ib-top-sep,
#top-links li.ib-top-phone a:last-child {
display: none;
}
}
/* ============================================================================
Brand carousel + brand cards with logos
========================================================================== */
/* 26 logos produced 26 pagination dots that wrapped onto three rows on a
phone. The strip autoplays, so the dots are gone entirely.
Scoped to .carousel on purpose - the slideshow above it has 5 slides and
its dots are still worth keeping. */
.carousel .swiper-pagination {
display: none !important;
}
.carousel.swiper-viewport {
background: var(--ib-surface);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow);
margin-bottom: 26px;
padding: 10px 0;
}
.carousel .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
}
.carousel .swiper-slide img {
max-height: 52px;
width: auto;
margin: 0 auto;
filter: grayscale(100%);
opacity: 0.75;
transition: filter 0.2s ease, opacity 0.2s ease;
}
.carousel .swiper-slide:hover img {
filter: none;
opacity: 1;
}
.carousel .swiper-button-next,
.carousel .swiper-button-prev {
opacity: 0.5;
transition: opacity 0.15s ease;
}
.carousel:hover .swiper-button-next,
.carousel:hover .swiper-button-prev {
opacity: 1;
}
@media (max-width: 767px) {
/* Auto-scroll only - no dots, no arrows. */
.carousel .swiper-button-next,
.carousel .swiper-button-prev,
.carousel .swiper-pager {
display: none !important;
}
.carousel .swiper-slide img {
max-height: 40px;
}
}
/* Brand cards that have a real logo become a logo tile. */
.ib-brand-card.has-logo {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 12px;
text-align: center;
}
.ib-brand-card.has-logo img {
max-height: 46px;
max-width: 100%;
width: auto;
filter: grayscale(100%);
opacity: 0.8;
transition: filter 0.15s ease, opacity 0.15s ease;
}
.ib-brand-card.has-logo:hover img {
filter: none;
opacity: 1;
}
.ib-brand-card.has-logo i.fa {
display: none;
}
.ib-brand-card small {
color: var(--ib-text-muted);
font-weight: 400;
}
/* Home brand wall: logos are the point, so give them room. */
.ib-brand-strip img {
max-height: 46px;
filter: grayscale(100%);
opacity: 0.8;
}
.ib-brand-strip a:hover img {
filter: none;
opacity: 1;
}
/* --- section head with a "view all" on the right ------------------------- */
.ib-section-head-inline {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.ib-view-all {
flex: 0 0 auto;
padding: 8px 16px;
border: 1px solid var(--ib-border-strong);
border-radius: var(--ib-radius);
background-color: var(--ib-surface);
color: var(--ib-primary);
font-size: 13px;
font-weight: 700;
white-space: nowrap;
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ib-view-all:hover {
background-color: var(--ib-primary);
border-color: var(--ib-primary);
color: #fff;
text-decoration: none;
}
.ib-view-all i.fa {
margin-left: 4px;
}
@media (max-width: 767px) {
.ib-section-head-inline {
align-items: flex-start;
}
.ib-view-all {
padding: 6px 12px;
font-size: 12px;
}
}
/* ============================================================================
Left sidebar (category module)
----------------------------------------------------------------------------
stylesheet.css sets `.list-group a { color: #888888 }` - grey on white, and
the active item only went to #444 on #eee, so you could not tell which
category you were in. This gives it a card, readable text and a real
selected state.
========================================================================== */
.ib-sidebar {
margin-bottom: 22px;
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow);
overflow: hidden;
}
.ib-sidebar-head {
padding: 13px 16px;
background-color: var(--ib-primary);
color: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ib-sidebar-head i.fa {
margin-right: 8px;
color: var(--ib-accent);
}
.ib-sidebar .list-group {
margin: 0;
max-height: 560px;
overflow-y: auto;
}
.ib-sidebar .list-group a.list-group-item {
border: none;
border-bottom: 1px solid var(--ib-border);
border-radius: 0;
padding: 10px 16px;
color: var(--ib-text);
font-size: 13.5px;
line-height: 1.45;
background-color: var(--ib-surface);
text-shadow: none;
transition: background-color 0.12s ease, color 0.12s ease, padding-left 0.12s ease;
}
.ib-sidebar .list-group a.list-group-item:last-child {
border-bottom: none;
}
.ib-sidebar .list-group a.list-group-item:hover,
.ib-sidebar .list-group a.list-group-item:focus {
background-color: #EEF0F9;
color: var(--ib-primary);
border-color: var(--ib-border);
padding-left: 20px;
text-shadow: none;
}
.ib-sidebar .list-group a.list-group-item.active,
.ib-sidebar .list-group a.list-group-item.active:hover,
.ib-sidebar .list-group a.list-group-item.active:focus {
background-color: var(--ib-primary);
color: #fff;
border-color: var(--ib-primary);
font-weight: 700;
text-shadow: none;
box-shadow: inset 3px 0 0 var(--ib-accent);
}
/* Sub-categories sit indented under their parent. */
.ib-sidebar .list-group a.list-group-item.is-child {
padding-left: 30px;
font-size: 13px;
color: var(--ib-text-muted);
background-color: #FBFCFE;
}
.ib-sidebar .list-group a.list-group-item.is-child:before {
content: "\f105";
font-family: FontAwesome;
margin-right: 8px;
color: var(--ib-accent);
}
.ib-sidebar .list-group a.list-group-item.is-child:hover {
color: var(--ib-primary);
padding-left: 34px;
}
.ib-sidebar .list-group a.list-group-item.is-child.active {
color: #fff;
background-color: var(--ib-secondary);
}
.ib-sidebar .list-group::-webkit-scrollbar {
width: 6px;
}
.ib-sidebar .list-group::-webkit-scrollbar-thumb {
background-color: var(--ib-border-strong);
border-radius: 3px;
}
/* ============================================================================
Product carousels
----------------------------------------------------------------------------
Every home-page product row is a horizontal carousel at all widths, so a
section can hold 12 products in one screen instead of a 3-row grid showing 4.
Scroll-snap does the work; the arrows just nudge it.
========================================================================== */
.ib-carousel {
position: relative;
}
.ib-scroll-row {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
margin: 0 -8px;
padding: 4px 8px 16px;
gap: 0;
scrollbar-width: thin;
scrollbar-color: var(--ib-border-strong) transparent;
}
.ib-scroll-row > .product-layout {
flex: 0 0 20%;
max-width: 20%;
width: 20%;
padding: 0 8px;
float: none;
scroll-snap-align: start;
}
.ib-scroll-row > .product-layout .product-thumb {
height: 100%;
margin-bottom: 0;
display: flex;
flex-direction: column;
}
.ib-scroll-row > .product-layout .product-thumb .caption {
flex: 1 1 auto;
min-height: 0;
}
.ib-scroll-row::-webkit-scrollbar {
height: 5px;
}
.ib-scroll-row::-webkit-scrollbar-track {
background: transparent;
}
.ib-scroll-row::-webkit-scrollbar-thumb {
background-color: var(--ib-border-strong);
border-radius: 3px;
}
/* Arrows */
.ib-carousel-nav {
position: absolute;
top: 34%;
z-index: 5;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--ib-border);
border-radius: 50%;
background-color: #fff;
color: var(--ib-primary);
font-size: 18px;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.ib-carousel-nav:hover {
background-color: var(--ib-primary);
border-color: var(--ib-primary);
color: #fff;
}
.ib-carousel-nav.prev {
left: -14px;
}
.ib-carousel-nav.next {
right: -14px;
}
.ib-carousel-nav[disabled] {
opacity: 0;
pointer-events: none;
}
@media (min-width: 1500px) {
.ib-scroll-row > .product-layout {
flex-basis: 16.666%;
max-width: 16.666%;
width: 16.666%;
}
}
@media (max-width: 1199px) {
.ib-scroll-row > .product-layout {
flex-basis: 25%;
max-width: 25%;
width: 25%;
}
}
@media (max-width: 991px) {
.ib-scroll-row > .product-layout {
flex-basis: 33.333%;
max-width: 33.333%;
width: 33.333%;
}
}
@media (max-width: 767px) {
.ib-scroll-row {
margin-left: -15px;
margin-right: -15px;
padding: 2px 15px 14px;
}
.ib-scroll-row > .product-layout {
flex-basis: 72%;
max-width: 72%;
width: 72%;
padding: 0 6px;
}
/* Swipe on a phone - no arrows. */
.ib-carousel-nav {
display: none;
}
}
/* Consumables strip keeps the same treatment. */
@media (max-width: 767px) {
.ib-consumable-strip {
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
margin-left: -15px;
margin-right: -15px;
padding: 2px 15px 12px;
}
.ib-consumable-strip a {
flex: 0 0 78%;
scroll-snap-align: start;
}
}
/* ============================================================================
Brand wall: continuous auto-scroll, full colour
========================================================================== */
.ib-brand-marquee {
position: relative;
overflow: hidden;
padding: 4px 0;
-webkit-mask-image: linear-gradient(to right, transparent, #000 60px, #000 calc(100% - 60px), transparent);
mask-image: linear-gradient(to right, transparent, #000 60px, #000 calc(100% - 60px), transparent);
}
.ib-brand-track {
display: flex;
align-items: stretch;
gap: 14px;
width: max-content;
animation: ib-marquee 48s linear infinite;
}
.ib-brand-marquee:hover .ib-brand-track {
animation-play-state: paused;
}
@keyframes ib-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.ib-brand-track a {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-width: 148px;
height: 76px;
padding: 10px 18px;
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow);
color: var(--ib-primary);
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ib-brand-track a:hover {
border-color: var(--ib-accent);
box-shadow: var(--ib-shadow-hover);
transform: translateY(-2px);
text-decoration: none;
}
/* Logos in their real colours - no greyscale. */
.ib-brand-track img {
max-height: 50px;
max-width: 116px;
width: auto;
filter: none;
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.ib-brand-track {
animation: none;
}
.ib-brand-marquee {
overflow-x: auto;
}
}
@media (max-width: 767px) {
.ib-brand-track a {
min-width: 118px;
height: 62px;
padding: 8px 12px;
}
.ib-brand-track img {
max-height: 40px;
max-width: 92px;
}
}
/* --- news & guides cards ------------------------------------------------- */
.ib-guide-grid > div {
margin-bottom: 18px;
}
.ib-guide-card {
display: flex;
flex-direction: column;
height: 100%;
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow);
overflow: hidden;
text-decoration: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ib-guide-card:hover {
border-color: var(--ib-accent);
box-shadow: var(--ib-shadow-hover);
transform: translateY(-3px);
text-decoration: none;
}
.ib-guide-media {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 168px;
background-color: #EEF0F9;
overflow: hidden;
}
.ib-guide-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s ease;
}
.ib-guide-card:hover .ib-guide-media img {
transform: scale(1.05);
}
.ib-guide-media i.fa {
font-size: 44px;
color: var(--ib-secondary);
opacity: 0.55;
}
.ib-guide-tag {
position: absolute;
top: 12px;
left: 12px;
padding: 5px 11px;
border-radius: 3px;
background-color: var(--ib-accent);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
box-shadow: 0 2px 6px rgba(232, 72, 30, 0.35);
}
.ib-guide-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 18px 18px 16px;
}
.ib-guide-body h3 {
margin: 0 0 9px;
font-size: 16px;
font-weight: 700;
line-height: 1.4;
color: var(--ib-text);
}
.ib-guide-card:hover .ib-guide-body h3 {
color: var(--ib-primary);
}
.ib-guide-body p {
flex: 1 1 auto;
margin: 0 0 14px;
font-size: 13.5px;
line-height: 1.65;
color: var(--ib-text-muted);
}
.ib-guide-more {
font-size: 13px;
font-weight: 700;
color: var(--ib-accent);
}
.ib-guide-more i.fa {
margin-left: 4px;
}
/* ============================================================================
Product tabs: Specification / Shipping & Return / FAQ
========================================================================== */
.nav-tabs {
margin-bottom: 0;
}
.nav-tabs > li > a {
font-weight: 600;
font-size: 14px;
padding: 11px 20px;
}
.tab-content {
padding: 24px 22px;
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-top: none;
border-radius: 0 0 var(--ib-radius) var(--ib-radius);
box-shadow: var(--ib-shadow);
}
.tab-content h3 {
margin-top: 0;
font-size: 17px;
font-weight: 700;
}
.ib-spec-table {
margin-bottom: 18px;
max-width: 640px;
}
.ib-spec-table td:first-child {
width: 40%;
font-weight: 600;
color: var(--ib-text);
background-color: #F8FAFC;
}
.ib-spec-table td {
padding: 10px 14px;
font-size: 13.5px;
color: var(--ib-text-muted);
}
/* FAQ accordion - needs no JavaScript. */
.ib-faq details {
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
margin-bottom: 10px;
background-color: var(--ib-surface);
overflow: hidden;
}
.ib-faq details[open] {
border-color: #B9C1E4;
box-shadow: var(--ib-shadow);
}
.ib-faq summary {
padding: 13px 44px 13px 16px;
position: relative;
cursor: pointer;
font-size: 14px;
font-weight: 600;
color: var(--ib-text);
list-style: none;
transition: background-color 0.12s ease, color 0.12s ease;
}
.ib-faq summary::-webkit-details-marker {
display: none;
}
.ib-faq summary:hover {
background-color: #EEF0F9;
color: var(--ib-primary);
}
.ib-faq summary:after {
content: "\f107";
font-family: FontAwesome;
position: absolute;
right: 16px;
top: 50%;
margin-top: -10px;
color: var(--ib-accent);
font-size: 16px;
transition: transform 0.15s ease;
}
.ib-faq details[open] summary {
background-color: #EEF0F9;
color: var(--ib-primary);
border-bottom: 1px solid var(--ib-border);
}
.ib-faq details[open] summary:after {
transform: rotate(180deg);
}
.ib-faq details p {
margin: 0;
padding: 14px 16px;
font-size: 13.5px;
line-height: 1.7;
color: var(--ib-text-muted);
}
/* ============================================================================
Hero slider
----------------------------------------------------------------------------
Four full-bleed banners under the menu. Horizontal scroll-snap does the
moving, so swipe works on touch for free and the JS only has to nudge
scrollLeft and keep the dots in sync.
========================================================================== */
/* The hero butts straight up against the menu. #menu carries a 22px bottom
margin for the rest of the site, so it is cancelled here rather than
removed globally - every other page still needs that gap. */
.ib-hero {
position: relative;
width: 100%;
max-width: 100%;
margin: -22px 0 24px;
background-color: #E8EEF7;
overflow: hidden;
}
/* Square the menu underside and drop its shadow on the home page, so the
rounded corners do not cut into the banner sitting flush beneath it. */
body:has(.ib-hero) #menu {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
box-shadow: none;
}
.ib-hero-track {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
line-height: 0;
}
.ib-hero-track::-webkit-scrollbar {
display: none;
}
.ib-hero-slide {
flex: 0 0 100%;
width: 100%;
scroll-snap-align: start;
display: block;
}
.ib-hero-slide img {
display: block;
width: 100%;
height: auto;
}
/* Arrows */
.ib-hero-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.82);
color: var(--ib-primary);
font-size: 22px;
box-shadow: 0 3px 14px rgba(15, 23, 42, 0.22);
cursor: pointer;
opacity: 0;
transition: opacity 0.2s ease, background-color 0.15s ease, color 0.15s ease;
}
.ib-hero:hover .ib-hero-nav,
.ib-hero-nav:focus-visible {
opacity: 1;
}
.ib-hero-nav:hover {
background-color: var(--ib-primary);
color: #fff;
}
.ib-hero-nav.prev {
left: 18px;
}
.ib-hero-nav.next {
right: 18px;
}
/* Dots */
.ib-hero-dots {
position: absolute;
left: 0;
right: 0;
bottom: 14px;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.ib-hero-dots button {
width: 10px;
height: 10px;
padding: 0;
border: none;
border-radius: 50%;
background-color: rgba(30, 42, 110, 0.28);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: width 0.2s ease, background-color 0.2s ease;
}
.ib-hero-dots button.is-active {
width: 26px;
border-radius: 5px;
background-color: var(--ib-accent);
}
/* The artwork is 2.8:1, which becomes an unreadable strip on a narrow screen,
so crop from the left where the logo and the headline sit. */
@media (max-width: 991px) {
.ib-hero-slide img {
width: auto;
height: 270px;
max-width: none;
object-fit: cover;
object-position: left center;
}
.ib-hero-nav {
width: 38px;
height: 38px;
font-size: 18px;
opacity: 1;
background-color: rgba(255, 255, 255, 0.75);
}
.ib-hero-nav.prev { left: 10px; }
.ib-hero-nav.next { right: 10px; }
}
@media (max-width: 767px) {
.ib-hero {
margin-bottom: 16px;
}
.ib-hero-slide img {
height: 200px;
}
/* Swipe on a phone; the dots still show where you are. */
.ib-hero-nav {
display: none;
}
.ib-hero-dots {
bottom: 9px;
}
}
/* ============================================================================
Search results
----------------------------------------------------------------------------
The stock page was a bare stack of inputs and full-width list rows. This is
a refine panel, a single toolbar and an even product grid.
========================================================================== */
.ib-search-panel {
margin: 0 0 22px;
padding: 18px 20px;
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow);
}
.ib-search-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: flex-end;
}
.ib-search-field {
flex: 1 1 200px;
min-width: 0;
}
.ib-search-keyword {
flex: 2 1 320px;
}
.ib-search-action {
flex: 0 0 150px;
}
.ib-search-panel label {
display: block;
margin-bottom: 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ib-text-muted);
}
.ib-search-action .btn {
height: 40px;
font-weight: 700;
}
.ib-search-toggles {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--ib-border);
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.ib-search-toggles label.checkbox-inline {
margin: 0;
padding-left: 22px;
font-size: 13px;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--ib-text);
}
/* --- toolbar ------------------------------------------------------------ */
.ib-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
padding: 12px 16px;
background-color: #F1F5F9;
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
}
.ib-toolbar-count {
font-size: 13.5px;
color: var(--ib-text-muted);
}
.ib-toolbar-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.ib-toolbar-select {
display: flex;
align-items: center;
gap: 7px;
}
.ib-toolbar-select label {
margin: 0;
font-size: 12.5px;
font-weight: 600;
color: var(--ib-text-muted);
white-space: nowrap;
}
.ib-toolbar-select .form-control {
width: auto;
min-width: 130px;
height: 34px;
padding: 4px 10px;
font-size: 13px;
}
.ib-view-toggle .btn {
background-color: var(--ib-surface);
border: 1px solid var(--ib-border-strong);
color: var(--ib-text-muted);
width: 34px;
height: 34px;
padding: 0;
}
.ib-view-toggle .btn:hover,
.ib-view-toggle .btn.active {
background-color: var(--ib-primary);
border-color: var(--ib-primary);
color: #fff;
}
.ib-toolbar-compare {
font-size: 13px;
font-weight: 600;
color: var(--ib-primary);
white-space: nowrap;
}
@media (max-width: 767px) {
.ib-toolbar {
padding: 10px 12px;
}
.ib-toolbar-controls {
width: 100%;
gap: 8px;
}
.ib-toolbar-select {
flex: 1 1 140px;
}
.ib-toolbar-select .form-control {
min-width: 0;
width: 100%;
}
.ib-toolbar-compare {
display: none;
}
}
/* --- even grid ---------------------------------------------------------- */
/* Bootstrap 3 floats the columns, so a taller card in row one leaves a step in
row two. Flex makes every card in a row the same height. */
#product-search .row > .product-layout,
#product-category .row > .product-layout,
#product-manufacturer .row > .product-layout,
#product-special .row > .product-layout {
display: flex;
float: none;
margin-bottom: 20px;
}
#product-search .row:has(> .product-layout),
#product-category .row:has(> .product-layout),
#product-manufacturer .row:has(> .product-layout),
#product-special .row:has(> .product-layout) {
display: flex;
flex-wrap: wrap;
}
.product-grid .product-thumb {
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 0;
}
.product-grid .product-thumb > div:not(.image) {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.product-grid .product-thumb .caption {
flex: 1 1 auto;
}
/* --- list view ---------------------------------------------------------- */
.product-list .product-thumb {
display: flex;
align-items: stretch;
width: 100%;
}
.product-list .product-thumb .image {
flex: 0 0 210px;
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
border-radius: var(--ib-radius) 0 0 var(--ib-radius);
}
.product-list .product-thumb > div:not(.image) {
display: flex;
flex: 1 1 auto;
min-width: 0;
}
.product-list .product-thumb .caption {
flex: 1 1 auto;
margin-left: 0;
padding: 18px 20px;
min-height: 0;
}
.product-list .product-thumb .button-group {
flex: 0 0 160px;
display: flex;
flex-direction: column;
justify-content: center;
border-top: none;
border-left: 1px solid var(--ib-border);
border-radius: 0 var(--ib-radius) var(--ib-radius) 0;
}
.product-list .product-thumb .button-group button {
width: 100%;
border-left: none;
}
.product-list .product-thumb .button-group button + button {
width: 100%;
border-left: none;
border-top: 1px solid var(--ib-border);
}
@media (max-width: 767px) {
.product-list .product-thumb,
.product-list .product-thumb > div:not(.image) {
flex-direction: column;
}
.product-list .product-thumb .image {
flex: 0 0 auto;
border-radius: var(--ib-radius) var(--ib-radius) 0 0;
}
.product-list .product-thumb .button-group {
flex: 0 0 auto;
flex-direction: row;
border-left: none;
border-top: 1px solid var(--ib-border);
border-radius: 0 0 var(--ib-radius) var(--ib-radius);
}
.product-list .product-thumb .button-group button + button {
border-top: none;
border-left: 1px solid var(--ib-border);
}
}
/* --- nothing found ------------------------------------------------------ */
.ib-no-results {
margin: 10px 0 30px;
padding: 44px 24px;
text-align: center;
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow);
}
.ib-no-results i.fa {
font-size: 40px;
color: var(--ib-border-strong);
margin-bottom: 16px;
}
.ib-no-results h3 {
margin: 0 0 8px;
font-size: 18px;
font-weight: 700;
color: var(--ib-text);
}
.ib-no-results p {
max-width: 480px;
margin: 0 auto 18px;
font-size: 14px;
line-height: 1.7;
color: var(--ib-text-muted);
}
/* ============================================================================
Faceted search layout
----------------------------------------------------------------------------
Vertical filter rail on the left, results on the right - the arrangement
srkinnovations uses. Facets are plain links, so they work without JS and
each one carries its own result count.
========================================================================== */
.ib-results {
display: flex;
align-items: flex-start;
gap: 24px;
}
.ib-facets {
flex: 0 0 270px;
width: 270px;
position: sticky;
top: 76px;
}
.ib-results-main {
flex: 1 1 auto;
min-width: 0;
}
/* The refine card sits inside the rail now, so it goes full width. */
.ib-facets .ib-search-panel {
padding: 16px;
}
.ib-facets .ib-search-row {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.ib-facets .ib-search-field,
.ib-facets .ib-search-keyword,
.ib-facets .ib-search-action {
flex: 1 1 auto;
width: 100%;
}
.ib-facets .ib-search-toggles {
flex-direction: column;
gap: 8px;
}
/* --- active filters ----------------------------------------------------- */
.ib-facet-active {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 14px;
padding: 11px 14px;
background-color: #FDEDE8;
border: 1px solid #F8C9BA;
border-radius: var(--ib-radius);
font-size: 13px;
}
.ib-facet-active span {
font-weight: 700;
color: #B8380F;
}
.ib-facet-active a {
font-weight: 700;
color: var(--ib-primary);
text-decoration: underline;
}
/* --- facet groups -------------------------------------------------------- */
.ib-facet {
margin-bottom: 16px;
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow);
overflow: hidden;
}
.ib-facet h3 {
margin: 0;
padding: 12px 16px;
background-color: #F1F5F9;
border-bottom: 1px solid var(--ib-border);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ib-text);
}
.ib-facet ul {
list-style: none;
margin: 0;
padding: 6px 0;
max-height: 320px;
overflow-y: auto;
}
.ib-facet li a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 16px;
font-size: 13.5px;
color: var(--ib-text);
text-decoration: none;
transition: background-color 0.12s ease, color 0.12s ease;
}
.ib-facet li a:hover {
background-color: #EEF0F9;
color: var(--ib-primary);
}
.ib-facet li a em {
flex: 0 0 auto;
font-style: normal;
font-size: 12px;
color: var(--ib-text-muted);
background-color: #F1F5F9;
border-radius: 10px;
padding: 1px 8px;
}
.ib-facet li.is-active a {
background-color: var(--ib-primary);
color: #fff;
font-weight: 700;
}
.ib-facet li.is-active a:after {
content: "\f00d";
font-family: FontAwesome;
margin-left: 4px;
}
.ib-facet li.is-active a em {
background-color: rgba(255, 255, 255, 0.22);
color: #fff;
}
.ib-facet ul::-webkit-scrollbar {
width: 6px;
}
.ib-facet ul::-webkit-scrollbar-thumb {
background-color: var(--ib-border-strong);
border-radius: 3px;
}
/* --- narrow screens ------------------------------------------------------ */
@media (max-width: 991px) {
.ib-results {
flex-direction: column;
gap: 0;
}
.ib-facets {
flex: 1 1 auto;
width: 100%;
position: static;
}
.ib-facets .ib-search-row {
flex-direction: row;
flex-wrap: wrap;
}
.ib-facets .ib-search-keyword {
flex: 2 1 260px;
width: auto;
}
.ib-facets .ib-search-field {
flex: 1 1 180px;
width: auto;
}
.ib-facets .ib-search-action {
flex: 0 0 140px;
width: auto;
}
.ib-facets .ib-search-toggles {
flex-direction: row;
gap: 20px;
}
/* Facet groups become horizontal chip rows rather than a tall stack. */
.ib-facet ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 12px 16px;
max-height: none;
}
.ib-facet li a {
padding: 6px 12px;
border: 1px solid var(--ib-border);
border-radius: 16px;
}
}
/* ============================================================================
Mega-menu dropdown sizing
----------------------------------------------------------------------------
stylesheet.css gives the items `min-width: 160px`, narrower than most of the
category names, so "Zebra Label Printers (14)" and half the others wrapped
onto two lines and Barcode Printers ran to 16 stacked pairs.
Items are now one line each. The list is a grid with a fixed row count and
column auto-flow, so it fills a column top-to-bottom then starts another -
CSS multi-column is the wrong tool here, because it divides a known width
and would fight `white-space: nowrap`. Grid sizes itself to the content.
========================================================================== */
#menu .dropdown-menu {
min-width: 250px;
padding: 10px 0 0;
}
#menu .dropdown-inner {
display: block;
padding: 0 8px;
}
#menu .dropdown-inner ul {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(8, auto);
gap: 1px 10px;
margin: 0;
padding: 0;
justify-content: start;
}
#menu .dropdown-menu .dropdown-inner li a,
#menu .dropdown-inner li a {
min-width: 0;
white-space: nowrap;
padding: 8px 14px;
font-size: 13px;
line-height: 1.35;
border-radius: 4px;
}
/* "Show all ..." spans the full panel under the columns. */
#menu .see-all {
margin-top: 10px;
text-align: center;
}
/* Panels on the right-hand menu items would run off-screen, so they open from
the right edge instead. */
#menu .nav > li:nth-last-child(-n+4) .dropdown-menu {
left: auto;
right: 0;
}
@media (max-width: 1199px) {
/* Less room across: taller columns, fewer of them. */
#menu .dropdown-inner ul {
grid-template-rows: repeat(12, auto);
}
}
@media (max-width: 767px) {
/* Collapsed menu: a single full-width column, wrapping allowed again. */
#menu .dropdown-menu {
min-width: 0;
padding-top: 0;
}
#menu .dropdown-inner {
padding: 0;
}
#menu .dropdown-inner ul {
display: block;
}
#menu .dropdown-menu .dropdown-inner li a,
#menu .dropdown-inner li a {
white-space: normal;
padding: 10px 16px;
}
#menu .see-all {
text-align: left;
}
#menu .nav > li:nth-last-child(-n+4) .dropdown-menu {
left: 0;
right: auto;
}
}
/* ============================================================================
Product tab strip - single scrollable line
----------------------------------------------------------------------------
Bootstrap floats .nav-tabs > li, so on a 393px phone "Reviews (0)" dropped
onto a second row below the other three. The strip is now a nowrap flex row
inside a horizontally scrollable wrapper: all tabs stay on one line and the
row scrolls.
(This block lived earlier in the file and was lost when a neighbouring
section was rewritten - it is kept at the end now so it cannot be clipped
again by a block replacement.)
========================================================================== */
.ib-tabs {
position: relative;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin-bottom: 0;
}
.ib-tabs::-webkit-scrollbar {
display: none;
}
.ib-tabs > .nav-tabs {
display: flex !important;
flex-wrap: nowrap !important;
width: max-content;
min-width: 100%;
margin: 0;
border-bottom: 1px solid var(--ib-border);
}
.ib-tabs > .nav-tabs > li {
float: none !important;
flex: 0 0 auto;
margin-bottom: -1px;
}
.ib-tabs > .nav-tabs > li > a {
white-space: nowrap;
margin-right: 2px;
padding: 11px 20px;
font-size: 14px;
font-weight: 600;
color: var(--ib-text-muted);
border: 1px solid transparent;
border-bottom: none;
border-radius: var(--ib-radius) var(--ib-radius) 0 0;
}
.ib-tabs > .nav-tabs > li > a:hover,
.ib-tabs > .nav-tabs > li > a:focus {
background-color: #EEF0F9;
border-color: transparent;
color: var(--ib-primary);
}
.ib-tabs > .nav-tabs > li.active > a,
.ib-tabs > .nav-tabs > li.active > a:hover,
.ib-tabs > .nav-tabs > li.active > a:focus {
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-bottom-color: var(--ib-surface);
border-top: 2px solid var(--ib-accent);
color: var(--ib-primary);
font-weight: 700;
}
@media (max-width: 767px) {
/* Fade the right edge so it reads as scrollable. */
.ib-tabs {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
}
.ib-tabs > .nav-tabs > li > a {
padding: 10px 15px;
font-size: 13.5px;
}
}
/* ============================================================================
Horizontal overflow guard
----------------------------------------------------------------------------
A single wide child - a scrollable tab strip, a carousel, a long model
number - makes the whole document scroll sideways, which on a phone shifts
the header and everything else off-screen.
Scoped to phones on purpose: `overflow-x` on html/body creates a scroll
container and would break the `position: sticky` nav, which only runs at
768px and up. Kept deliberately narrow - no row or column margin overrides,
because those would cancel the intentional full-bleed on the carousels.
========================================================================== */
@media (max-width: 767px) {
html,
body {
overflow-x: hidden;
max-width: 100%;
}
/* Long unbroken strings - model numbers, part codes, URLs - are the most
common single cause. */
#content,
.tab-content,
.ib-faq,
.product-thumb .caption {
overflow-wrap: break-word;
word-wrap: break-word;
}
/* Anything that carries its own intrinsic width stays inside the screen. */
#content img,
#content iframe,
#content pre {
max-width: 100%;
}
/* Wide data tables scroll on their own rather than stretching the page.
The spec table is excluded - it is two narrow columns and reads better
laid out normally. */
.table-responsive,
#content .table:not(.ib-spec-table) {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.ib-spec-table {
max-width: 100%;
}
}
/* ============================================================================
Cart dropdown above the sticky menu
----------------------------------------------------------------------------
#menu is position:sticky with z-index 1001, so the cart panel - which hangs
down from the header above it - had its first row covered by the menu bar.
========================================================================== */
#cart {
position: relative;
z-index: 1060;
}
#cart .dropdown-menu {
z-index: 1060;
min-width: 420px;
padding: 0;
overflow: hidden;
}
#cart .dropdown-menu > li > div,
#cart .dropdown-menu li > div {
padding: 14px 16px;
min-width: 0;
}
#cart .dropdown-menu table.table {
margin-bottom: 0;
}
#cart .dropdown-menu table.table td {
vertical-align: middle;
padding: 10px 8px;
border-top: 1px solid var(--ib-border);
}
#cart .dropdown-menu table.table tr:first-child td {
border-top: none;
}
#cart .dropdown-menu .img-thumbnail {
max-width: 52px;
padding: 2px;
}
#cart .dropdown-menu p.text-right {
padding: 12px 16px 14px;
margin: 0;
background-color: #F1F5F9;
border-top: 1px solid var(--ib-border);
}
#cart .dropdown-menu p.text-right .btn {
margin-left: 6px;
}
@media (max-width: 767px) {
#cart .dropdown-menu {
min-width: 0;
width: calc(100vw - 30px);
max-width: 100%;
}
}
/* ============================================================================
Quantity stepper
----------------------------------------------------------------------------
OpenCart ships a bare text box. These are the - and + controls injected
beside it by the script in footer.twig.
========================================================================== */
.ib-qty {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--ib-border-strong);
border-radius: var(--ib-radius);
overflow: hidden;
background-color: var(--ib-surface);
vertical-align: middle;
}
.ib-qty button {
width: 38px;
border: none;
background-color: #F1F5F9;
color: var(--ib-text);
font-size: 17px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: background-color 0.12s ease, color 0.12s ease;
}
.ib-qty button:hover {
background-color: var(--ib-primary);
color: #fff;
}
.ib-qty button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.ib-qty button:disabled:hover {
background-color: #F1F5F9;
color: var(--ib-text);
}
.ib-qty input,
.ib-qty .form-control {
width: 56px;
height: 40px;
flex: 0 0 56px;
border: none;
border-left: 1px solid var(--ib-border-strong);
border-right: 1px solid var(--ib-border-strong);
border-radius: 0;
box-shadow: none;
text-align: center;
font-weight: 700;
font-size: 15px;
color: var(--ib-text);
padding: 0;
-moz-appearance: textfield;
}
.ib-qty input::-webkit-outer-spin-button,
.ib-qty input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.ib-qty input:focus {
outline: none;
box-shadow: none;
}
/* Product page: the stepper sits above a full-width Add to Cart. */
#product #input-quantity + .ib-qty,
.ib-qty-block {
margin-bottom: 10px;
}
/* Cart page: stepper and the update/remove buttons on one line. */
#content .table .ib-qty {
margin-right: 6px;
}
/* Live line total that the script keeps in step with the stepper. */
.ib-qty-total {
display: block;
margin-top: 8px;
font-size: 14px;
color: var(--ib-text-muted);
}
.ib-qty-total strong {
font-size: 17px;
color: var(--ib-price);
}
@media (max-width: 767px) {
#content .table .ib-qty {
margin-right: 0;
margin-bottom: 6px;
}
}
/* Cart quantity cell: stepper and remove button on one line. */
.ib-cart-qty {
display: flex;
align-items: center;
gap: 6px;
}
.ib-cart-qty .ib-qty {
margin-right: 0;
}
.ib-cart-remove {
height: 40px;
width: 40px;
padding: 0;
flex: 0 0 40px;
}
@media (max-width: 767px) {
.ib-cart-qty {
flex-wrap: wrap;
}
}
/* ============================================================================
Article / guide layout
========================================================================== */
.ib-article-head {
padding: 6px 0 22px;
}
.ib-article-tag {
display: inline-block;
margin-bottom: 14px;
padding: 5px 12px;
border-radius: 3px;
background-color: #FDEDE8;
color: var(--ib-accent);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.ib-article-head h1 {
margin: 0 0 10px;
font-size: 34px;
line-height: 1.25;
font-weight: 700;
color: var(--ib-text);
max-width: 900px;
}
.ib-article-byline {
margin: 0;
font-size: 14px;
color: var(--ib-text-muted);
}
.ib-article-cover {
margin-bottom: 30px;
border-radius: var(--ib-radius);
overflow: hidden;
box-shadow: var(--ib-shadow);
line-height: 0;
}
.ib-article-cover img {
width: 100%;
height: auto;
display: block;
}
/* Body copy set for reading rather than for scanning a product page. */
.ib-article-body {
font-size: 16.5px;
line-height: 1.75;
color: #374151;
}
.ib-article-body p {
margin: 0 0 18px;
}
.ib-article-body h3 {
margin: 34px 0 12px;
font-size: 21px;
font-weight: 700;
color: var(--ib-text);
}
.ib-article-body h3:first-child {
margin-top: 0;
}
.ib-article-body ul,
.ib-article-body ol {
margin: 0 0 20px;
padding-left: 22px;
}
.ib-article-body li {
margin-bottom: 9px;
}
.ib-article-body strong {
color: var(--ib-text);
}
.ib-article-body a {
color: var(--ib-primary);
text-decoration: underline;
}
.ib-article-body img {
max-width: 100%;
height: auto;
border-radius: var(--ib-radius);
margin: 8px 0 20px;
}
/* In-article call to action */
.ib-article-cta {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 18px;
margin: 36px 0 10px;
padding: 26px 28px;
border-radius: var(--ib-radius);
background-color: var(--ib-primary);
background-image: linear-gradient(135deg, #1E2A6E 0%, #2C3A8C 100%);
box-shadow: 0 6px 20px rgba(30, 42, 110, 0.18);
}
.ib-article-cta h3 {
margin: 0 0 6px;
color: #fff;
font-size: 20px;
font-weight: 700;
}
.ib-article-cta p {
margin: 0;
color: rgba(255, 255, 255, 0.85);
font-size: 14px;
max-width: 520px;
}
.ib-article-cta-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
/* Keep reading */
.ib-article-related {
margin: 40px 0 20px;
padding-top: 28px;
border-top: 1px solid var(--ib-border);
}
.ib-article-related h2 {
margin: 0 0 18px;
font-size: 22px;
font-weight: 700;
}
.ib-related-card {
display: block;
height: 100%;
margin-bottom: 16px;
padding: 18px 20px;
background-color: var(--ib-surface);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow);
text-decoration: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ib-related-card:hover {
border-color: var(--ib-accent);
box-shadow: var(--ib-shadow-hover);
transform: translateY(-2px);
text-decoration: none;
}
.ib-related-card h3 {
margin: 0 0 8px;
font-size: 15.5px;
font-weight: 700;
line-height: 1.4;
color: var(--ib-text);
}
.ib-related-card:hover h3 {
color: var(--ib-primary);
}
.ib-related-card p {
margin: 0 0 12px;
font-size: 13px;
line-height: 1.6;
color: var(--ib-text-muted);
}
.ib-related-card span {
font-size: 13px;
font-weight: 700;
color: var(--ib-accent);
}
@media (max-width: 767px) {
.ib-article-head h1 {
font-size: 25px;
}
.ib-article-body {
font-size: 15.5px;
}
.ib-article-cta {
padding: 22px 18px;
}
.ib-article-cta-actions .btn {
width: 100%;
}
}
/* Own-brand row gets a tinted backdrop so it reads as ours, not a supplier's. */
.ib-mynds {
padding: 24px 20px 8px;
margin-left: -20px;
margin-right: -20px;
background-color: #EEF0F9;
border-radius: var(--ib-radius);
}
.ib-mynds .ib-section-head h2:after {
background-color: var(--ib-primary);
}
@media (max-width: 767px) {
.ib-mynds {
padding: 18px 12px 4px;
margin-left: -8px;
margin-right: -8px;
}
}
/* ==========================================================================
Full-bleed separator strip (.ib-strip)
Artwork that breaks a long run of product carousels. Declared per row in
catalog/controller/common/home.php via the row's 'banner' key.
========================================================================== */
.ib-strip {
display: block;
margin: 46px 0 40px;
border-radius: var(--ib-radius, 14px);
overflow: hidden;
box-shadow: 0 6px 26px rgba(30, 42, 110, .13);
line-height: 0;
-webkit-transition: box-shadow .25s ease, -webkit-transform .25s ease;
transition: box-shadow .25s ease, transform .25s ease;
}
.ib-strip img {
display: block;
width: 100%;
height: auto;
}
.ib-strip:hover,
.ib-strip:focus {
box-shadow: 0 12px 34px rgba(30, 42, 110, .22);
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
/* Break out of the Bootstrap .container so the artwork runs edge to edge like
the hero does.
100vw includes the scrollbar, so on its own this pushes ~8px past each side
and produces the horizontal scrollbar that .ib-hero had. `overflow: clip` on
the body absorbs that WITHOUT breaking position:sticky the way overflow:hidden
would - the sticky nav depends on that, and it runs at 768px and up where the
phone-only guard below does not apply.
`clip` is also why overflow-y is safe to leave alone: the spec only promotes a
`visible` on the other axis to `auto` next to hidden/scroll/auto, not next to
clip, so vertical scrolling is untouched.
Note this intentionally supersedes the `body` half of the phone-only
`html, body { overflow-x: hidden }` guard further up - clip does the same job
there without the side effects. `html` keeps its hidden + max-width.
Both declarations sit behind one @supports, so a browser without `clip` keeps
the strip at content width instead of inheriting the overflow bug. */
@supports (overflow: clip) {
body {
overflow-x: clip;
}
.ib-strip {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
border-radius: 0;
}
}
@media (max-width: 767px) {
.ib-strip {
margin-top: 26px;
margin-bottom: 24px;
}
}