/* ------------------------------------------------------------------
   Brotherhood IT Shop — brand palette
   Loaded after the theme stylesheet by the brotherhood event extension,
   so no core file is modified and an OpenCart upgrade cannot wipe it.

   The page stays white. Only the bars and buttons are black.

     surfaces    #151719   the ink black: top bar, menu, footer, buttons
     on black    #ffffff   text sitting on those black surfaces
     on white    #151719   ordinary page text, on the white background

   So there is one ink colour and one page colour, and the text simply
   flips to whichever of the two is readable against what is behind it:
   white on the black bars (17.9:1), ink on the white page (17.9:1).

   Some theme rules out-rank a plain "#top a" -- for example
   "#top .list-inline-item > a" sets gray-600, which is what made the top
   bar unreadable earlier. Those selectors are matched exactly below so
   the white wins on specificity rather than by chance of source order.
   ------------------------------------------------------------------ */

:root {
  --brand-ink: #151719;
  --brand-on-ink: #fff;
  --brand-hairline: rgba(255, 255, 255, 0.18);

  /* Bootstrap 5 reads these, so components not named below -- badges,
     pagination, form focus -- follow the same ink. */
  --bs-primary: #151719;
  --bs-primary-rgb: 21, 23, 25;
  --bs-body-color: #151719;
  --bs-body-color-rgb: 21, 23, 25;
  --bs-link-color: #151719;
  --bs-link-color-rgb: 21, 23, 25;
  --bs-link-hover-color: #151719;
  --bs-link-hover-color-rgb: 21, 23, 25;
}

/* --- the page keeps its white background ----------------------------- */
body {
  color: var(--brand-ink);
}

h1, h2, h3, h4, h5, h6,
legend,
a,
.price, .price-new, .price-old, .price-tax,
.breadcrumb-item a,
.nav-tabs .nav-link.active {
  color: var(--brand-ink);
}

a:hover,
a:focus {
  color: var(--brand-ink);
  opacity: 0.7;
}

.price-old,
.price-tax {
  opacity: 0.65;
}

/* --- the bars are black ---------------------------------------------- */
#top,
#menu,
footer,
#cookie {
  background-color: var(--brand-ink);
  background-image: none;
  border: none;
  color: var(--brand-on-ink);
}

/* The theme sets gray-600 on the top bar links with a higher specificity
   than "#top a", so those selectors are matched exactly. */
#top .list-inline-item > a,
#top .list-inline-item .dropdown > a,
#top .list-inline-item .dropdown > span,
#top .dropdown-toggle,
#top a,
#menu .navbar-nav > li > a,
#menu .nav-link,
footer a,
footer h5,
footer p,
footer li,
#cookie div {
  color: var(--brand-on-ink);
  text-shadow: none;
}

#top .list-inline-item > a:hover,
#top .dropdown-toggle:hover,
#menu .navbar-nav > li > a:hover,
#menu .navbar-nav > li > a:focus,
footer a:hover {
  color: var(--brand-on-ink);
  background-color: rgba(255, 255, 255, 0.12);
}

#top {
  border-bottom: 1px solid var(--brand-hairline);
}

footer hr {
  border-top: none;
  border-bottom: 1px solid var(--brand-hairline);
}

/* --- centred footer --------------------------------------------------- */
/* The four link columns fill the row exactly, so centring is a matter of
   the text inside each column rather than the columns themselves. The
   justify-content still matters when a column is hidden -- the blog and
   information column only renders if there is content for it, and without
   this the remaining three would sit left. */
footer {
  text-align: center;
}

footer .row {
  justify-content: center;
}

footer .list-unstyled {
  padding-left: 0;
  margin-bottom: 0;
}

footer p {
  text-align: center;
  margin-bottom: 1rem;
}

/* --- dropdowns opened from a black bar ------------------------------- */
/* They inherit the bar's white text but paint their own white panel,
   which would leave white on white. Give the panel the same ink. */
#top .dropdown-menu,
#menu .dropdown-menu,
#cart .dropdown-menu {
  background-color: var(--brand-ink);
  border: 1px solid var(--brand-hairline);
}

#top .dropdown-menu,
#menu .dropdown-menu,
#cart .dropdown-menu,
#top .dropdown-item,
#menu .dropdown-item,
#cart .dropdown-item,
#top .dropdown-menu a,
#menu .dropdown-menu a,
#cart .dropdown-menu a,
#cart .dropdown-menu td,
#cart .dropdown-menu span,
#cart .dropdown-menu strong {
  color: var(--brand-on-ink);
}

#top .dropdown-item:hover,
#top .dropdown-item:focus,
#menu .dropdown-item:hover,
#menu .dropdown-item:focus,
#cart .dropdown-item:hover,
#cart .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--brand-on-ink);
}

/* The cart dropdown holds two Bootstrap tables. In Bootstrap 5.3 a .table
   paints its own background -- "--bs-table-bg: var(--bs-body-bg)", drawn as
   an inset box-shadow -- so on the ink panel it laid a white sheet under
   the rows, and the white td text above went invisible against it.
   Hand the tables the panel's own colours instead of the body's. */
#cart .dropdown-menu .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--brand-on-ink);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.06);
  --bs-table-striped-color: var(--brand-on-ink);
  --bs-table-border-color: var(--brand-hairline);
}

/* --- buttons are black with white labels ----------------------------- */
.btn-primary,
.btn-secondary,
.btn-default,
#button-cart,
#cart > .btn,
#search .btn {
  --bs-btn-bg: var(--brand-ink);
  --bs-btn-border-color: var(--brand-ink);
  --bs-btn-color: var(--brand-on-ink);
  --bs-btn-hover-bg: var(--brand-ink);
  --bs-btn-hover-border-color: var(--brand-ink);
  --bs-btn-hover-color: var(--brand-on-ink);
  --bs-btn-active-bg: var(--brand-ink);
  --bs-btn-active-border-color: var(--brand-ink);
  --bs-btn-active-color: var(--brand-on-ink);
  background-color: var(--brand-ink);
  background-image: none;
  border: 1px solid var(--brand-ink);
  color: var(--brand-on-ink);
  text-shadow: none;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-default:hover,
#button-cart:hover,
#cart > .btn:hover,
#search .btn:hover {
  filter: brightness(1.45);
  color: var(--brand-on-ink);
}

/* the outline variant sits on the white page, so it keeps ink text */
.btn-outline-primary {
  --bs-btn-color: var(--brand-ink);
  --bs-btn-border-color: var(--brand-ink);
  --bs-btn-hover-bg: var(--brand-ink);
  --bs-btn-hover-border-color: var(--brand-ink);
  --bs-btn-hover-color: var(--brand-on-ink);
}

/* --- focus ring ------------------------------------------------------ */
.form-control:focus,
.form-select:focus,
.btn:focus,
.btn:focus-visible,
a:focus-visible {
  border-color: var(--brand-ink);
  box-shadow: 0 0 0 0.25rem rgba(21, 23, 25, 0.25);
  outline: none;
}

/* --- product cards, tabs --------------------------------------------- */
.product-thumb {
  border: 1px solid rgba(21, 23, 25, 0.15);
}

.product-thumb:hover {
  border-color: var(--brand-ink);
}

.nav-tabs .nav-link.active {
  border-bottom-color: var(--brand-ink);
}

.list-group-item.active {
  background-color: var(--brand-ink);
  border-color: var(--brand-ink);
  color: var(--brand-on-ink);
}

.rating .fa-star {
  color: var(--brand-ink);
}

/* ---- Typography ---- */
/* The Inter faces are loaded as a separate stylesheet by the branding event. */

/* Inter carries the Latin text. The Taka sign (U+09F3) is not in it -- nor in
   most default Latin stacks, where it falls back to a tofu box -- so name
   Bengali-capable faces after it. */
:root {
    --bhit-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Noto Sans Bengali", "Nirmala UI", Vrinda, Shonar, "Kalpurush", Arial, sans-serif;
}

body,
.btn, input, select, textarea,
.price, .price-new, .price-old, .hero-price {
    font-family: var(--bhit-font);
}

body {
    font-size: .95rem;
    line-height: 1.6;
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* A real scale, rather than the theme's near-identical heading sizes. */
h1, .h1 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
h2, .h2 { font-size: clamp(1.35rem, 2vw, 1.6rem); font-weight: 700; letter-spacing: -.015em; }
h3, .h3 { font-size: 1.2rem;  font-weight: 600; letter-spacing: -.01em; }
h4, .h4 { font-size: 1rem;    font-weight: 600; }

.btn { font-weight: 600; letter-spacing: -.005em; }

/* Prices are the number a shopper scans for; give them their own weight. */
.price-new, .product-thumb .price {
    font-weight: 700;
    letter-spacing: -.02em;
}

.price-old {
    font-weight: 400;
    opacity: .55;
}

/* ---- Featured Categories grid (brotherhood.featured_category) ---- */
.featured-category .fc-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--bs-primary, #0d6efd);
    display: inline-block;
}

.featured-category .fc-card {
    display: block;
    height: 100%;
    padding: 1rem .5rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .5rem;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.featured-category .fc-card:hover {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .1);
    transform: translateY(-2px);
}

.featured-category .fc-thumb {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .5rem;
}

.featured-category .fc-thumb img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.featured-category .fc-name {
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.3;
}

.featured-category .fc-count {
    font-size: .78rem;
    color: #6c757d;
    margin-top: .15rem;
}

/* ---- Hero slider (brotherhood.hero_slider) ---- */
.hero-slider {
    border-radius: .75rem;
    overflow: hidden;
    /* The store's palette is monochrome charcoal (--bs-primary is #151719);
       the slider used to sit in navy and gold, which belonged to no other
       element on the page. */
    background: linear-gradient(120deg, #0f1113 0%, #1d2126 48%, #313840 100%);
}

.hero-slider .hero-slide {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 380px;
    padding: 2.5rem 3rem;
    position: relative;
}

/* soft glow behind the product shot */
.hero-slider .hero-slide::after {
    content: "";
    position: absolute;
    right: 4%;
    top: 50%;
    width: 420px;
    height: 420px;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 68%);
    pointer-events: none;
}

.hero-slider .hero-copy {
    flex: 1 1 55%;
    color: #fff;
    z-index: 1;
}

.hero-slider .hero-eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .3rem .75rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    margin-bottom: 1rem;
}

.hero-slider .hero-title {
    font-size: clamp(1.35rem, 2.6vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 .85rem;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-slider .hero-price {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, .92);
}

.hero-slider .hero-price strong {
    font-size: 1.6rem;
    color: #fff;
}

.hero-slider .hero-price-label {
    font-size: .85rem;
    opacity: .75;
}

.hero-slider .hero-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.6rem;
    border-radius: 2rem;
    font-weight: 600;
    text-decoration: none;
    color: #151719;
    background: #fff;
    transition: transform .15s ease, box-shadow .15s ease;
}

.hero-slider .hero-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .3);
    color: #151719;
}

.hero-slider .hero-art {
    flex: 0 0 40%;
    text-align: center;
    z-index: 1;
}

/* Catalogue shots sit on a white 500x500 canvas, so the plate goes on the
   wrapper and the image fills it. That keeps every slide the same size instead
   of each one sizing itself around its own baked-in whitespace. */
.hero-slider .hero-art a {
    display: block;
    width: 100%;
    max-width: 300px;
    margin-inline: auto;
    aspect-ratio: 1 / 1;
    background: #fff;
    border-radius: .75rem;
    padding: .75rem;
    box-shadow: 0 1rem 1.75rem rgba(0, 0, 0, .35);
}

.hero-slider .hero-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hero-slider .hero-control {
    width: 4%;
    opacity: .6;
}

.hero-slider .hero-control:hover {
    opacity: 1;
}

.hero-slider .hero-indicators {
    margin-bottom: .75rem;
}

.hero-slider .hero-indicators [data-bs-target] {
    width: 28px;
    height: 4px;
    border-radius: 2px;
}

/* ---- Brand strip (brotherhood.brand_strip) ---- */
.brand-strip .bs-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--bs-primary, #0d6efd);
    display: inline-block;
}

.brand-strip .bs-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    height: 100%;
    min-height: 92px;
    padding: 1rem .75rem;
    text-decoration: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .5rem;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.brand-strip .bs-card:hover {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .1);
    transform: translateY(-2px);
}

.brand-strip .bs-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
}

.brand-strip .bs-logo img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

.brand-strip .bs-name {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #1f2d3d;
    text-align: center;
    line-height: 1.2;
}

.brand-strip .bs-count {
    font-size: .75rem;
    color: #6c757d;
}

/* ---- Product tiles from the stock Featured / Latest modules ---- */
/* Give them the same card treatment as our own tiles and equal heights, so a
   two-up phone grid does not come out ragged. */
#content .product-thumb {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .5rem;
    overflow: hidden;
    transition: box-shadow .15s ease, border-color .15s ease;
}

#content .product-thumb:hover {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .1);
}

#content .product-thumb > .content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

#content .product-thumb .description { flex: 1 1 auto; }

#content .product-thumb .image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ---- Mobile / tablet pass for the home page modules ---- */

/* Nothing on the home page may push the viewport sideways. */
#common-home { overflow-x: clip; }
#common-home img { max-width: 100%; }

@media (max-width: 991.98px) {
    .hero-slider .hero-slide {
        min-height: 300px;
        padding: 2rem;
        gap: 1rem;
    }

    .hero-slider .hero-slide::after {
        width: 260px;
        height: 260px;
    }

    .hero-slider .hero-art a { max-width: 230px; }
}

@media (max-width: 767.98px) {
    .hero-slider { border-radius: .5rem; }

    /* Artwork first, then the pitch, with the call to action last — the copy
       comes first in the DOM for readers, so reverse it visually. */
    .hero-slider .hero-slide {
        flex-direction: column-reverse;
        text-align: center;
        min-height: 0;
        gap: .75rem;
        padding: 1.25rem 1.1rem 2rem;
    }

    .hero-slider .hero-slide::after { display: none; }

    .hero-slider .hero-copy,
    .hero-slider .hero-art { flex: 0 0 auto; width: 100%; }

    .hero-slider .hero-art a {
        max-width: 165px;
        padding: .45rem;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .35);
    }

    .hero-slider .hero-eyebrow {
        font-size: .68rem;
        margin-bottom: .6rem;
    }

    .hero-slider .hero-title {
        font-size: 1.05rem;
        -webkit-line-clamp: 2;
        margin-bottom: .5rem;
    }

    .hero-slider .hero-price { margin-bottom: .75rem; }
    .hero-slider .hero-price strong { font-size: 1.25rem; }

    .hero-slider .hero-btn {
        padding: .55rem 1.25rem;
        font-size: .9rem;
    }

    /* Arrows are unusable at thumb size — swipe and the dots do the job. */
    .hero-slider .hero-control { display: none; }

    .hero-slider .hero-indicators { margin-bottom: .5rem; }

    /* Tighter category tiles so more than a couple fit on screen. */
    .featured-category .fc-card,
    .brand-strip .bs-card { padding: .65rem .4rem; }

    .featured-category .fc-thumb { height: 74px; }

    .featured-category .fc-name { font-size: .8rem; }
    .featured-category .fc-count,
    .brand-strip .bs-count { font-size: .7rem; }

    .brand-strip .bs-card { min-height: 72px; }
    .brand-strip .bs-name { font-size: .92rem; }

    .featured-category .fc-title,
    .brand-strip .bs-title { font-size: 1.05rem; }
}

/* OpenCart ships one product per row below 576px, which makes the home page
   endlessly long on a phone. Two-up reads far better. */
@media (max-width: 575.98px) {
    #content .row-cols-1 {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
        margin-left: 0;
        margin-right: 0;
    }

    #content .row-cols-1 > .col {
        flex: 0 0 auto;
        width: 50%;
    }

    #content .product-thumb .description p { display: none; }

    #content .product-thumb h4 {
        font-size: .85rem;
        line-height: 1.3;
    }

    #content .product-thumb .price { font-size: .9rem; }
}

/* ---- Contact page: logo and store details as one block ---- */
/* The template lays the location out as four equal Bootstrap columns with a
   bordered card and a thumbnail frame, so the logo reads as a separate boxed
   item rather than the heading of the details beside it. */
#information-contact > .card,
#information-contact .card.mb-3 {
    border: 0;
    box-shadow: none;
    background: transparent;
}

#information-contact .card-body {
    padding: 0;
}

#information-contact .card-body > .row {
    row-gap: 1.25rem;
}

/* Columns share a top line; only the logo centres against them. */
#information-contact .card-body > .row > .col-sm-3:first-child {
    display: flex;
    align-items: center;
}

/* Logo: no frame, and let it use the column it sits in. */
#information-contact .img-thumbnail {
    border: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    max-width: 100%;
    height: auto;
}

/* A hairline rule ties the logo to the details without drawing a box. */
#information-contact .card-body > .row > .col-sm-3:first-child {
    border-right: 1px solid rgba(0, 0, 0, .1);
    padding-right: 1.5rem;
}

#information-contact .card-body > .row > .col-sm-3 + .col-sm-3 {
    padding-left: 1.5rem;
}

/* The template separates every label from its value with a <br>. The labels
   are block-level now, so that break only opens a gap. */
#information-contact .card-body strong + br {
    display: none;
}

#information-contact .card-body strong {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: .35rem;
}

/* The store name is the one heading that should read as a name, not a label. */
#information-contact .card-body > .row > .col-sm-3:nth-child(2) strong {
    font-size: 1.05rem;
    letter-spacing: 0;
    text-transform: none;
    color: inherit;
}

#information-contact address {
    margin-bottom: .75rem;
    line-height: 1.5;
}

#information-contact .card-body .btn {
    margin-top: .25rem;
}

/* The template pads the phone and hours columns with trailing <br>s. */
#information-contact .card-body > .row > .col-sm-3 br + br {
    display: none;
}

@media (max-width: 575.98px) {
    #information-contact .card-body > .row > .col-sm-3:first-child {
        border-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
        padding-right: 0;
        padding-bottom: 1rem;
        text-align: center;
    }

    #information-contact .card-body > .row > .col-sm-3 + .col-sm-3 {
        padding-left: 0;
    }

    #information-contact .img-thumbnail { max-width: 220px; }
}

/* ---- Category page ---- */
/* Sub-categories ship as four columns of bulleted links, which fills a screen
   before a shopper reaches a single product. Chips say the same thing in a
   couple of rows. */
#product-category #content > .row[class*="row-cols"]:not(#product-list) {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1.5rem;
}

#product-category #content > .row[class*="row-cols"]:not(#product-list) > .col {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
}

#product-category #content > .row[class*="row-cols"]:not(#product-list) ul {
    display: contents;
    list-style: none;
    margin: 0;
    padding: 0;
}

#product-category #content > .row[class*="row-cols"]:not(#product-list) li {
    display: inline-flex;
}

#product-category #content > .row[class*="row-cols"]:not(#product-list) li a {
    display: inline-block;
    padding: .35rem .8rem;
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.3;
    color: #151719;
    text-decoration: none;
    background: #f4f5f6;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 2rem;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

#product-category #content > .row[class*="row-cols"]:not(#product-list) li a:hover {
    background: #151719;
    border-color: #151719;
    color: #fff;
}

#product-category #content > h3 {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: .75rem;
}

/* Sidebar: a panel that stops somewhere, with the current category marked. */
#column-left > .list-group {
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .6rem;
    padding: .35rem;
    scrollbar-width: thin;
}

#column-left > .list-group > .list-group-item {
    border: 0;
    border-radius: .4rem;
    padding: .45rem .7rem;
    font-size: .88rem;
    color: #151719;
    background: transparent;
}

#column-left > .list-group > .list-group-item:hover {
    background: #f4f5f6;
}

#column-left > .list-group > .list-group-item.active {
    background: #151719;
    color: #fff;
    font-weight: 600;
}

/* Child rows arrive as " - Name"; indent them and tone them down. */
#column-left > .list-group > .list-group-item[href*="_"] {
    font-size: .82rem;
    color: #6c757d;
    padding-left: 1.4rem;
}

/* Toolbar: one bar rather than four loose controls. */
#product-category #content > .row:has(#compare-total) {
    align-items: center;
    background: #f8f9fa;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: .6rem;
    padding: .6rem .75rem;
    margin: 0 0 1.25rem;
    --bs-gutter-y: .5rem;
}

#product-category #content > .row:has(#compare-total) .mb-3,
#product-category #content > .row:has(#compare-total) .input-group.mb-3 {
    margin-bottom: 0 !important;
}

#product-category .input-group-text {
    background: transparent;
    border-color: rgba(0, 0, 0, .12);
    font-size: .82rem;
    color: #6c757d;
}

#product-category .form-select,
#product-category .btn {
    border-radius: .45rem;
}

/* ---- Product page ---- */
/* Main image: the theme frames it in a thumbnail border; a product shot on
   white needs breathing room, not a hairline box. */
#product-info .thumbnails > li:first-child a,
#product-info .image a,
#product-info .product-images .thumbnail {
    display: block;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: .75rem;
    padding: 1.25rem;
    background: #fff;
}

#product-info .img-thumbnail {
    border-color: rgba(0, 0, 0, .07);
    border-radius: .6rem;
    padding: .35rem;
}

#product-info h1 {
    margin-bottom: .75rem;
}

/* Brand / code / availability read as loose text; make them labelled facts. */
#product-info #content .col-sm > ul.list-unstyled:first-of-type {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .5rem;
    margin-bottom: 1rem;
    padding: 0;
}

#product-info #content .col-sm > ul.list-unstyled:first-of-type > li {
    font-size: .8rem;
    color: #6c757d;
    background: #f4f5f6;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 2rem;
    padding: .3rem .75rem;
}

#product-info #content .col-sm > ul.list-unstyled:first-of-type > li a {
    color: #151719;
    font-weight: 600;
    text-decoration: none;
}

/* Price. OpenCart wraps it in a second list-unstyled, which must not pick up
   the chip styling above. */
#product-info #content .col-sm > ul.list-unstyled:not(:first-of-type) {
    margin: 1rem 0 .5rem;
    padding: 0;
}

#product-info #content .col-sm > ul.list-unstyled:not(:first-of-type) h2 {
    margin: 0;
}

#product-info .price-new {
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: #151719;
}

#product-info .price-old {
    font-size: 1.1rem;
    margin-left: .5rem;
}

#product-info #product {
    margin-top: 1rem;
    padding: 1.1rem;
    background: #f8f9fa;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: .75rem;
}

#product-info #product .input-group-text {
    background: #fff;
    border-color: rgba(0, 0, 0, .12);
    font-size: .85rem;
    color: #6c757d;
}

#product-info #product #input-quantity {
    max-width: 4.5rem;
    text-align: center;
    font-weight: 600;
}

#product-info #button-cart {
    flex: 1 1 auto;
    border-radius: 0 .5rem .5rem 0;
    font-weight: 700;
    letter-spacing: .01em;
    padding-block: .8rem;
}

/* Tabs: a quieter, modern underline instead of folder tabs. */
#product-info .nav-tabs {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    gap: .25rem;
}

#product-info .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-weight: 600;
    color: #6c757d;
    padding: .6rem .9rem;
}

#product-info .nav-tabs .nav-link:hover {
    color: #151719;
}

#product-info .nav-tabs .nav-link.active {
    color: #151719;
    background: transparent;
    border-bottom-color: #151719;
}

/* The specification table the sync imports, made readable. */
#product-info .tab-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: .9rem;
}

#product-info .tab-content table td {
    padding: .55rem .75rem;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    vertical-align: top;
}

#product-info .tab-content table td:first-child {
    width: 34%;
    color: #6c757d;
}

#product-info .tab-content table .heading-row {
    font-weight: 700;
    color: #151719;
    background: #f4f5f6;
    width: auto;
}

@media (max-width: 575.98px) {
    #product-info #product { padding: .85rem; }
    #product-info .tab-content table td:first-child { width: 42%; }
}

/* ---- Sticky header ---- */
/* Search and cart stay reachable however far down a 12,000-product catalogue
   a shopper scrolls. The thin top bar scrolls away; the useful row stays. */
header .container-fluid > .row,
#header-cart {
    position: relative;
}

#menu,
.navbar-expand-lg {
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .12);
}

/* ---- Global polish ---- */
:root {
    --bhit-radius: .6rem;
    --bhit-line: rgba(0, 0, 0, .08);
}

.btn,
.form-control,
.form-select,
.input-group-text {
    border-radius: var(--bhit-radius);
}

.input-group > .btn:not(:last-child),
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child),
.input-group > .input-group-text:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .btn:not(:first-child),
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child),
.input-group > .input-group-text:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn {
    padding: .5rem 1rem;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary:hover {
    box-shadow: 0 .25rem .75rem rgba(21, 23, 25, .25);
}

/* Breadcrumbs as a quiet trail, not a boxed strip. */
.breadcrumb {
    background: transparent;
    padding-left: 0;
    font-size: .85rem;
}

/* Product tiles: a little lift on hover reads as interactive. */
#content .product-thumb {
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

#content .product-thumb:hover {
    transform: translateY(-3px);
}

#content .product-thumb .image {
    padding: .75rem;
}

#content .product-thumb .content {
    padding: .85rem;
}

#content .product-thumb h4 a {
    color: #151719;
    text-decoration: none;
    font-weight: 600;
}

/* Footer: separate it from the page rather than letting it run on. */
footer {
    margin-top: 3rem;
    border-top: 1px solid var(--bhit-line);
}

/* ---- Small-screen overflow guards ---- */
/* Pagination and breadcrumbs are single rows of fixed-size items, so a long
   product name or a 40-page catalogue pushes them past the viewport. */
.pagination {
    flex-wrap: wrap;
    gap: .25rem;
    justify-content: center;
}

.pagination .page-link {
    border-radius: .4rem;
    padding: .35rem .6rem;
    font-size: .85rem;
}

.breadcrumb {
    flex-wrap: wrap;
    row-gap: .25rem;
}

.breadcrumb-item,
.breadcrumb-item a {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .breadcrumb {
        font-size: .78rem;
    }

    /* The theme draws chevrons with generous padding; reclaim it. */
    .breadcrumb-item {
        max-width: 100%;
    }

    .pagination .page-link {
        padding: .3rem .5rem;
        font-size: .8rem;
    }

    .results,
    .pagination-results {
        font-size: .8rem;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    /* The theme's chevron breadcrumb pads each item generously; at 320px that
       padding plus a long product name runs past the edge. */
    .breadcrumb-item {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .breadcrumb-item a {
        display: inline-block;
        max-width: 100%;
        white-space: normal;
    }

    /* The toast container is a fixed-width overlay that ignores the viewport. */
    #alert {
        max-width: calc(100vw - 1rem);
        right: .5rem;
        left: auto;
    }
}

/* ---- Sidebar filter card ---- */
#column-left .card {
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .6rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

#column-left .card-header {
    background: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #151719;
}

/* A brand list of 500 entries needs a ceiling, per group. */
#column-left .card [id^="filter-group-"] {
    max-height: 15rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

#column-left .card .list-group-item {
    border: 0;
    padding: .5rem .75rem;
}

#column-left .card .list-group-item:first-child,
#column-left .card a.list-group-item {
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6c757d;
    padding-bottom: .25rem;
}

#column-left .card .form-check {
    padding-block: .1rem;
}

#column-left .card .form-check-label {
    font-size: .85rem;
    cursor: pointer;
}

#column-left .card-footer {
    background: #f8f9fa;
    border-top: 1px solid rgba(0, 0, 0, .07);
    text-align: left;
}

#column-left .card-footer .btn {
    width: 100%;
}

/* ---- List view ---- */
/* The theme switches to a horizontal card with `.product-list .product-thumb`,
   but our card rules are id-scoped and outrank it, so the list button appeared
   to do nothing. Restore the row layout at matching specificity. */
@media (min-width: 960px) {
    #content .product-list .product-thumb {
        flex-direction: row;
        align-items: stretch;
    }

    #content .product-list .product-thumb .image {
        flex: 0 0 26%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #content .product-list .product-thumb > .content {
        flex: 1 1 auto;
    }

    #content .product-list .product-thumb .description p {
        display: block;
        color: #6c757d;
        font-size: .88rem;
    }
}

/* In list view a row per product reads better than a hover lift. */
#content .product-list .product-thumb:hover {
    transform: none;
}

/* ---- Brand index ---- */
/* 500+ brands as bare links in four columns. Chips for the A-Z jump list and
   card tiles for the brands themselves make it scannable. */
#product-manufacturer #content > p:first-of-type {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    padding: .75rem;
    background: #f8f9fa;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: .6rem;
    margin-bottom: 1.5rem;
}

#product-manufacturer #content > p:first-of-type strong {
    margin-right: .35rem;
    font-size: .8rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6c757d;
}

#product-manufacturer #content > p:first-of-type a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: .25rem .5rem;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    color: #151719;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: .4rem;
}

#product-manufacturer #content > p:first-of-type a:hover {
    background: #151719;
    color: #fff;
    border-color: #151719;
}

#product-manufacturer #content > h2 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: #6c757d;
    padding-bottom: .4rem;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    margin: 1.75rem 0 .9rem;
}

#product-manufacturer #content .row.mb-3 {
    --bs-gutter-y: .5rem;
}

#product-manufacturer #content .row.mb-3 > .col-sm-3 a {
    display: block;
    padding: .5rem .75rem;
    font-size: .9rem;
    font-weight: 500;
    color: #151719;
    text-decoration: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .45rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#product-manufacturer #content .row.mb-3 > .col-sm-3 a:hover {
    border-color: #151719;
    box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .08);
}

/* ---- Empty states ---- */
/* Cart, wishlist and compare each render one bare sentence when empty. The
   cart's sits inside a #shopping-cart wrapper, so match on the paragraph that
   directly follows the page heading rather than on the content column. */
#checkout-cart #shopping-cart > p,
#account-wishlist #content > p,
#product-compare #content > p,
#account-order #content > p,
#product-search #content > p:last-of-type {
    padding: 2.5rem 1.5rem;
    text-align: center;
    font-size: 1rem;
    color: #6c757d;
    background: #f8f9fa;
    border: 1px dashed rgba(0, 0, 0, .12);
    border-radius: .75rem;
    margin-bottom: 1.5rem;
}

/* ---- Account forms ---- */
#account-login #content .card,
#account-register #content fieldset,
#account-forgotten #content fieldset {
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .75rem;
}

#account-login #content .card-header,
#account-register #content legend,
#account-forgotten #content legend {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

#account-login #content .card-body,
#account-register #content fieldset {
    padding: 1.5rem;
}

#account-login #content label,
#account-register #content label,
#checkout-checkout #content label {
    font-size: .85rem;
    font-weight: 600;
    color: #151719;
}

/* ---- Checkout ---- */
#checkout-checkout #content legend,
#checkout-cart #content h2 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    margin-bottom: 1rem;
}

#checkout-cart table,
#checkout-checkout table {
    border-color: rgba(0, 0, 0, .08);
}

#checkout-cart table thead th,
#checkout-checkout table thead th {
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6c757d;
    background: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

#checkout-cart tfoot tr:last-child td,
#checkout-checkout tfoot tr:last-child td {
    font-size: 1.05rem;
    font-weight: 700;
}

/* Give the empty cart something to look at and somewhere to go. */
#checkout-cart #shopping-cart > p::before {
    content: "\f07a";
    font-family: "Font Awesome 6 Free", "Font Awesome 7 Free";
    font-weight: 900;
    display: block;
    font-size: 2.25rem;
    color: rgba(0, 0, 0, .18);
    margin-bottom: .75rem;
}

#checkout-cart #shopping-cart > .text-end {
    text-align: center !important;
}

#checkout-cart #shopping-cart > .text-end .btn {
    padding-inline: 2rem;
}

/* ---- Mega menu positioning ---- */
/* The theme guesses a dropdown's offset from how many siblings precede it
   (".nav-item + .nav-item + .nav-item .dropdown-column-4 { left: -600px }").
   That assumes one row of evenly sized items. This menu wraps to two rows, so
   items early in a row but late in sibling order were pushed off the left edge
   of the screen — Gadget sat at -184px, Tablet at -215px.
   Anchor the multi-column panels to the navbar instead: they then open inside
   the container whatever their position in the menu. */
@media (min-width: 960px) {
    #menu .navbar-nav {
        position: relative;
    }

    #menu .nav-item.dropdown {
        position: static;
    }

    /* The theme's rules are three-siblings deep, so match that weight or they
       keep winning. */
    #menu .navbar-nav .nav-item.dropdown .dropdown-menu.dropdown-column-2,
    #menu .navbar-nav .nav-item.dropdown .dropdown-menu.dropdown-column-3,
    #menu .navbar-nav .nav-item.dropdown .dropdown-menu.dropdown-column-4 {
        left: 0;
        right: auto;
        max-width: 100%;
    }

    /* Single-column menus are narrow enough to stay under their own item. */
    #menu .nav-item.dropdown:has(> .dropdown-column-1) {
        position: relative;
    }
}