/*
 * b2b-inner.css  —  Modern B2B Corporate Skin
 * Inspired by Alibaba.com / enterprise procurement portals.
 * Applied after stylesheet.css via header.twig.
 * Homepage (#product-home) is explicitly excluded from every rule.
 *
 * ── FIX NOTES ──────────────────────────────────────────────────────
 * OpenCart uses position:absolute on #container and compensates with
 * large padding-bottom on #content / #column-left / #column-right so
 * the footer doesn't overlap.  We must NEVER override those padding
 * values.  All our layout rules are purely cosmetic (colors, borders,
 * shadows, typography) — no position / padding-bottom / height on the
 * layout containers.
 * ────────────────────────────────────────────────────────────────────
 
 * Design tokens
 * --b2b-navy      #1a2d4a   Dark header / footer
 * --b2b-ink       #0d1b2a   Deepest text
 * --b2b-accent    #ff6900   Alibaba-style CTA orange
 * --b2b-blue      #1677ff   Interactive / link blue  (Alibaba's secondary)
 * --b2b-blue-hov  #0958d9
 * --b2b-bg        #f5f7fa   Page background
 * --b2b-surface   #ffffff   Card surface
 * --b2b-border    #e6eaf0   Border / divider
 * --b2b-muted     #8c9ab0   Helper text
 * --b2b-success   #18a058   In-stock green
 * --b2b-danger    #d03050   Error / out-of-stock
 */

/* ────────────────────────────────────────────────
   0.  CSS custom properties
──────────────────────────────────────────────── */
:root {
  --b2b-navy:      #1a2d4a;
  --b2b-ink:       #0d1b2a;
  --b2b-accent:    #ff6900;
  --b2b-accent-hov:#e55c00;
  --b2b-blue:      #1677ff;
  --b2b-blue-hov:  #0958d9;
  --b2b-bg:        #f5f7fa;
  --b2b-surface:   #ffffff;
  --b2b-border:    #e6eaf0;
  --b2b-text:      #1e2d3d;
  --b2b-muted:     #8c9ab0;
  --b2b-success:   #18a058;
  --b2b-danger:    #d03050;
  --b2b-radius:    6px;
  --b2b-shadow-sm: 0 1px 4px rgba(0,0,0,.07);
  --b2b-shadow:    0 2px 10px rgba(0,0,0,.09);
}

/* ────────────────────────────────────────────────
   1.  Base — inner pages only
   IMPORTANT: no padding-bottom / position override
──────────────────────────────────────────────── */
body:not(:has(#product-home)) {
  background-color: var(--b2b-bg);
  color: var(--b2b-text);
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body:not(:has(#product-home)) h1,
body:not(:has(#product-home)) h2,
body:not(:has(#product-home)) h3,
body:not(:has(#product-home)) h4,
body:not(:has(#product-home)) h5,
body:not(:has(#product-home)) h6 {
  color: var(--b2b-ink);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.3;
}

/* ────────────────────────────────────────────────
   2.  Top utility bar
──────────────────────────────────────────────── */
body:not(:has(#product-home)) #top {
  background-color: #0f1e30;   /* slightly darker than navy so it reads as separate */
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Shrink the row height */
body:not(:has(#product-home)) #top .container {
  padding-top: 0;
  padding-bottom: 0;
}

body:not(:has(#product-home)) #top .list-inline-item > a,
body:not(:has(#product-home)) #top .list-inline-item .dropdown > a {
  color: #9ab4cc;
  font-size: .78rem;
  letter-spacing: .025em;
  line-height: 36px;       /* matches base 40px line-height, slightly tighter */
  padding: 0 2px;
  transition: color .15s;
}

body:not(:has(#product-home)) #top .list-inline-item > a:hover,
body:not(:has(#product-home)) #top .list-inline-item .dropdown > a:hover {
  color: #fff;
}

/* Utility bar dropdowns */
body:not(:has(#product-home)) #top .dropdown-menu {
  border-radius: var(--b2b-radius);
  border: 1px solid var(--b2b-border);
  box-shadow: var(--b2b-shadow);
  font-size: .82rem;
  padding: 4px 0;
  margin-top: 2px;
}

body:not(:has(#product-home)) #top .dropdown-menu .dropdown-item {
  color: var(--b2b-text);
  font-size: .82rem;
  padding: 7px 16px;
}

body:not(:has(#product-home)) #top .dropdown-menu .dropdown-item:hover {
  background-color: var(--b2b-bg);
  color: var(--b2b-blue);
}

/* ────────────────────────────────────────────────
   3.  Site header (logo + search + cart)
──────────────────────────────────────────────── */
body:not(:has(#product-home)) header {
  background-color: var(--b2b-surface);
  border-bottom: 2px solid var(--b2b-border);
  padding: 14px 0;
}

/* Search bar */
body:not(:has(#product-home)) #search .form-control-lg {
  border: 1.5px solid var(--b2b-border);
  border-right: none;
  border-radius: var(--b2b-radius) 0 0 var(--b2b-radius);
  font-size: .88rem;
  height: 42px;
  transition: border-color .15s, box-shadow .15s;
}

body:not(:has(#product-home)) #search .form-control-lg:focus {
  border-color: var(--b2b-blue);
  box-shadow: 0 0 0 3px rgba(22,119,255,.12);
  outline: none;
}

body:not(:has(#product-home)) #search .btn-lg {
  background-color: var(--b2b-accent);
  border: 1.5px solid var(--b2b-accent);
  color: #fff;
  border-radius: 0 var(--b2b-radius) var(--b2b-radius) 0;
  font-size: .88rem;
  font-weight: 600;
  height: 42px;
  padding: 0 20px;
  transition: background-color .15s;
}

body:not(:has(#product-home)) #search .btn-lg:hover {
  background-color: var(--b2b-accent-hov);
  border-color: var(--b2b-accent-hov);
}

/* Cart button */
body:not(:has(#product-home)) #cart .btn-lg {
  background-color: var(--b2b-accent);
  border: 1.5px solid var(--b2b-accent);
  color: #fff;
  border-radius: var(--b2b-radius);
  font-size: .86rem;
  font-weight: 600;
  height: 42px;
  padding: 0 18px;
  transition: background-color .15s;
  line-height: 40px;
}

body:not(:has(#product-home)) #cart .btn-lg:hover {
  background-color: var(--b2b-accent-hov);
  border-color: var(--b2b-accent-hov);
}

body:not(:has(#product-home)) #cart .dropdown-menu {
  background-color: var(--b2b-surface);
  border: 1px solid var(--b2b-border);
  box-shadow: var(--b2b-shadow);
  border-radius: var(--b2b-radius);
}

/* ────────────────────────────────────────────────
   4.  Navigation menu
   The base stylesheet.css hardcodes a teal gradient
   on #menu.  We need !important on background to
   fully override it.
──────────────────────────────────────────────── */

/* ── Wrapper strip ── */
body:not(:has(#product-home)) #menu {
  background-color: var(--b2b-navy) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
  margin-bottom: 0 !important;
  min-height: 48px;
  padding: 0 !important;
}

/* Wrap the strip in a container so items align with page content */
body:not(:has(#product-home)) #menu .container {
  display: flex;
  align-items: center;
}

/* ── Top-level nav links ── */
body:not(:has(#product-home)) #menu .navbar-nav > li > a,
body:not(:has(#product-home)) #menu .nav-link,
body:not(:has(#product-home)) #menu .dropdown-item.nav-link {
  color: #d8e8f8 !important;
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .015em;
  padding: 14px 14px !important;
  text-shadow: none !important;
  background-color: transparent !important;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s, background-color .15s;
  white-space: nowrap;
}

body:not(:has(#product-home)) #menu .navbar-nav > li > a:hover,
body:not(:has(#product-home)) #menu .nav-link:hover {
  color: #ffffff !important;
  background-color: rgba(255,255,255,.06) !important;
  border-bottom-color: var(--b2b-accent);
}

/* Keep hover background clipped to the item */
body:not(:has(#product-home)) #menu .nav-item > a,
body:not(:has(#product-home)) #menu .nav-item > .nav-link {
  display: block;
}

/* ── Dropdown panel ── */
body:not(:has(#product-home)) #menu .dropdown-menu {
  background-color: var(--b2b-surface) !important;
  border: 1px solid var(--b2b-border) !important;
  border-top: 2px solid var(--b2b-accent) !important;
  border-radius: 0 0 var(--b2b-radius) var(--b2b-radius) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  padding: 6px 0 !important;
  min-width: 200px;
}

body:not(:has(#product-home)) #menu .dropdown-menu .dropdown-item {
  color: var(--b2b-text) !important;
  font-size: .83rem;
  padding: 8px 20px !important;
  border-bottom: none !important;
  background-color: transparent !important;
  transition: background-color .12s, color .12s;
}

body:not(:has(#product-home)) #menu .dropdown-menu .dropdown-item:hover {
  background-color: #f0f5ff !important;
  color: var(--b2b-blue) !important;
}

body:not(:has(#product-home)) #menu .dropdown-menu .dropdown-divider {
  border-color: var(--b2b-border);
}

/* "Show all …" link at bottom of mega dropdown */
body:not(:has(#product-home)) #menu .dropdown-menu .dropdown-item.text-decoration-underline,
body:not(:has(#product-home)) #menu .dropdown-menu ul li:last-child a.dropdown-item {
  color: var(--b2b-blue) !important;
  font-weight: 600;
}

/* ── Mobile hamburger ── */
body:not(:has(#product-home)) #menu .navbar-toggler {
  border: 1px solid rgba(255,255,255,.25);
  padding: 6px 10px;
  border-radius: var(--b2b-radius);
  transition: background-color .15s;
}

body:not(:has(#product-home)) #menu .navbar-toggler:hover {
  background-color: rgba(255,255,255,.1);
}

body:not(:has(#product-home)) #menu .navbar-toggler i {
  color: #fff;
  font-size: .88rem;
}

/* ── "Categories" label (mobile) ── */
body:not(:has(#product-home)) #category {
  color: #d8e8f8;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ────────────────────────────────────────────────
   5.  Breadcrumb
──────────────────────────────────────────────── */
body:not(:has(#product-home)) .breadcrumb {
  background-color: transparent;
  border: none;
  padding: 9px 0;
  margin-bottom: 14px;
  font-size: .8rem;
  border-radius: 0;
}

body:not(:has(#product-home)) .breadcrumb > li.breadcrumb-item {
  text-shadow: none;
  color: var(--b2b-muted);
}

body:not(:has(#product-home)) .breadcrumb > li.breadcrumb-item > a {
  color: var(--b2b-blue);
  text-decoration: none;
  transition: color .12s;
}

body:not(:has(#product-home)) .breadcrumb > li.breadcrumb-item > a:hover {
  color: var(--b2b-blue-hov);
  text-decoration: underline;
}

body:not(:has(#product-home)) .breadcrumb > li.breadcrumb-item:after {
  border-color: var(--b2b-border);
}

/* ────────────────────────────────────────────────
   6.  Content panel
   !! Do NOT set padding-bottom here — base stylesheet
   !! uses large padding-bottom to push footer down.
──────────────────────────────────────────────── */
body:not(:has(#product-home)) #content {
  background-color: var(--b2b-surface);
  border: 1px solid var(--b2b-border);
  border-radius: var(--b2b-radius);
  padding-top: 20px;
  padding-left: 22px;
  padding-right: 22px;
  /* padding-bottom intentionally omitted — base stylesheet controls it */
  box-shadow: var(--b2b-shadow-sm);
}

body:not(:has(#product-home)) #content > h1:first-child,
body:not(:has(#product-home)) #content h1 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--b2b-ink);
  border-bottom: 1px solid var(--b2b-border);
  padding-bottom: 12px;
  margin-bottom: 18px;
}

/* ────────────────────────────────────────────────
   7.  Product cards (category / all-products grid)
──────────────────────────────────────────────── */
body:not(:has(#product-home)) .product-thumb {
  background-color: var(--b2b-surface);
  border: 1px solid var(--b2b-border);
  border-radius: var(--b2b-radius);
  box-shadow: var(--b2b-shadow-sm);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
  /* height:100% already set by base */
}

body:not(:has(#product-home)) .product-thumb:hover {
  border-color: var(--b2b-blue);
  box-shadow: 0 4px 18px rgba(22,119,255,.14);
  transform: translateY(-2px);
}

/* Image container */
body:not(:has(#product-home)) .product-thumb .image {
  background-color: #fafbfc;
  border-bottom: 1px solid var(--b2b-border);
  padding: 14px;
  text-align: center;
}

body:not(:has(#product-home)) .product-thumb .image img {
  max-height: 160px;
  width: auto;
  object-fit: contain;
  transition: opacity .15s;
}

body:not(:has(#product-home)) .product-thumb .image a:hover img {
  opacity: .88;
}

/* Card body */
body:not(:has(#product-home)) .product-thumb .description {
  padding: 12px 14px 52px;
  margin-bottom: 0;
}

body:not(:has(#product-home)) .product-thumb .description h4 {
  font-size: .86rem;
  font-weight: 600;
  color: var(--b2b-ink);
  line-height: 1.4;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body:not(:has(#product-home)) .product-thumb .description h4 a {
  color: inherit;
  text-decoration: none;
  transition: color .12s;
}

body:not(:has(#product-home)) .product-thumb .description h4 a:hover {
  color: var(--b2b-blue);
}

body:not(:has(#product-home)) .product-thumb .description p {
  font-size: .76rem;
  color: var(--b2b-muted);
  line-height: 1.45;
  margin-bottom: 8px;
}

/* Price inside card */
body:not(:has(#product-home)) .product-thumb .price {
  margin-top: 6px;
}

body:not(:has(#product-home)) .product-thumb .price-new {
  color: var(--b2b-accent);
  font-size: .96rem;
  font-weight: 700;
}

body:not(:has(#product-home)) .product-thumb .price-old {
  color: var(--b2b-muted);
  text-decoration: line-through;
  font-size: .78rem;
  margin-left: 4px;
}

body:not(:has(#product-home)) .product-thumb .price-tax {
  color: var(--b2b-muted);
  font-size: .7rem;
  display: block;
}

/* Card action bar */
body:not(:has(#product-home)) .product-thumb .button {
  background-color: #fafbfc;
  border-top: 1px solid var(--b2b-border);
  border-radius: 0 0 var(--b2b-radius) var(--b2b-radius);
}

body:not(:has(#product-home)) .product-thumb .button button {
  background-color: transparent;
  border: none;
  border-top: none;
  color: var(--b2b-muted);
  font-size: .78rem;
  line-height: 38px;
  transition: background-color .15s, color .15s;
}

body:not(:has(#product-home)) .product-thumb .button button:hover {
  background-color: var(--b2b-blue);
  color: #fff;
}

body:not(:has(#product-home)) .product-thumb .button button + button {
  border-left: 1px solid var(--b2b-border);
}

/* Sort / limit toolbar */
body:not(:has(#product-home)) #input-sort,
body:not(:has(#product-home)) #input-limit {
  font-size: .82rem;
  border: 1.5px solid var(--b2b-border);
  border-radius: var(--b2b-radius);
  height: 36px;
  padding: 0 10px;
  transition: border-color .15s;
}

body:not(:has(#product-home)) #input-sort:focus,
body:not(:has(#product-home)) #input-limit:focus {
  border-color: var(--b2b-blue);
  box-shadow: 0 0 0 3px rgba(22,119,255,.1);
  outline: none;
}

body:not(:has(#product-home)) .input-group-text {
  background-color: var(--b2b-bg);
  border: 1.5px solid var(--b2b-border);
  color: var(--b2b-muted);
  font-size: .82rem;
}

/* ────────────────────────────────────────────────
   8.  Product Detail Page (PDP)
──────────────────────────────────────────────── */
body:not(:has(#product-home)) #product-info h1 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--b2b-ink);
  border-bottom: 1px solid var(--b2b-border);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

/* Meta list (Model, SKU, Stock…) */
body:not(:has(#product-home)) #product-info .list-unstyled li {
  font-size: .83rem;
  color: var(--b2b-muted);
  padding: 4px 0;
  border-bottom: 1px solid #f0f2f5;
  display: flex;
  gap: 6px;
}

body:not(:has(#product-home)) #product-info .list-unstyled li:last-child {
  border-bottom: none;
}

body:not(:has(#product-home)) #product-info .list-unstyled li a {
  color: var(--b2b-blue);
  text-decoration: none;
}

body:not(:has(#product-home)) #product-info .list-unstyled li a:hover {
  color: var(--b2b-blue-hov);
  text-decoration: underline;
}

/* Price block */
body:not(:has(#product-home)) #product-info h2 {
  font-size: 1.6rem;
  font-weight: 700;
  border: none;
  padding: 0;
  margin: 8px 0 10px;
  color: var(--b2b-accent);
}

body:not(:has(#product-home)) #product-info .price-new {
  color: var(--b2b-accent);
  font-size: 1.55rem;
  font-weight: 700;
}

body:not(:has(#product-home)) #product-info .price-old {
  color: var(--b2b-muted);
  text-decoration: line-through;
  font-size: .95rem;
}

body:not(:has(#product-home)) #product-info .price-tax {
  color: var(--b2b-muted);
  font-size: .78rem;
}

/* Main Add-to-Cart CTA */
body:not(:has(#product-home)) #product-info #button-cart {
  background-color: var(--b2b-accent);
  border: none;
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 12px 32px;
  border-radius: var(--b2b-radius);
  box-shadow: 0 3px 10px rgba(255,105,0,.28);
  transition: background-color .15s, box-shadow .15s, transform .1s;
}

body:not(:has(#product-home)) #product-info #button-cart:hover {
  background-color: var(--b2b-accent-hov);
  box-shadow: 0 5px 16px rgba(229,92,0,.35);
  transform: translateY(-1px);
}

body:not(:has(#product-home)) #product-info #button-cart:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Secondary buttons on PDP (wishlist, compare) */
body:not(:has(#product-home)) #product-info .btn-light,
body:not(:has(#product-home)) #product-info .btn-outline-secondary {
  border: 1.5px solid var(--b2b-border);
  color: var(--b2b-muted);
  font-size: .84rem;
  border-radius: var(--b2b-radius);
  background-color: #fff;
  transition: border-color .15s, color .15s;
}

body:not(:has(#product-home)) #product-info .btn-light:hover,
body:not(:has(#product-home)) #product-info .btn-outline-secondary:hover {
  border-color: var(--b2b-blue);
  color: var(--b2b-blue);
  background-color: #f0f5ff;
}

/* Product images */
body:not(:has(#product-home)) #product-info .img-thumbnail {
  border: 1.5px solid var(--b2b-border);
  background-color: #fafbfc;
  border-radius: var(--b2b-radius);
  padding: 6px;
  transition: border-color .15s;
}

body:not(:has(#product-home)) #product-info .img-thumbnail:hover {
  border-color: var(--b2b-blue);
}

/* Tabs */
body:not(:has(#product-home)) .nav-tabs {
  border-bottom: 2px solid var(--b2b-border);
  margin-bottom: 18px;
}

body:not(:has(#product-home)) .nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--b2b-muted);
  font-size: .85rem;
  font-weight: 500;
  border-radius: 0;
  padding: 10px 18px;
  transition: color .15s, border-color .15s;
}

body:not(:has(#product-home)) .nav-tabs .nav-link:hover {
  color: var(--b2b-blue);
  border-bottom-color: var(--b2b-blue);
}

body:not(:has(#product-home)) .nav-tabs .nav-link.active,
body:not(:has(#product-home)) .nav-tabs .nav-item.show .nav-link {
  color: var(--b2b-blue);
  border-bottom: 2px solid var(--b2b-blue);
  font-weight: 600;
  background-color: transparent;
}

/* Spec / attribute table */
body:not(:has(#product-home)) #tab-specification table,
body:not(:has(#product-home)) .attribute-group table {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
  margin-bottom: 16px;
}

body:not(:has(#product-home)) #tab-specification table th,
body:not(:has(#product-home)) .attribute-group table th {
  background-color: var(--b2b-bg);
  color: var(--b2b-ink);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 10px 16px;
  border: 1px solid var(--b2b-border);
  white-space: nowrap;
}

body:not(:has(#product-home)) #tab-specification table td,
body:not(:has(#product-home)) .attribute-group table td {
  padding: 9px 16px;
  border: 1px solid var(--b2b-border);
  color: var(--b2b-text);
  vertical-align: top;
}

body:not(:has(#product-home)) #tab-specification table tr:nth-child(even) td,
body:not(:has(#product-home)) .attribute-group table tr:nth-child(even) td {
  background-color: #f8fafc;
}

/* ────────────────────────────────────────────────
   9.  Global tables (orders, cart, account)
──────────────────────────────────────────────── */
body:not(:has(#product-home)) .table {
  font-size: .84rem;
  border-color: var(--b2b-border);
}

body:not(:has(#product-home)) .table thead th {
  background-color: #f0f5ff;
  color: var(--b2b-ink);
  font-weight: 700;
  font-size: .77rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-color: #dce7fb;
  padding: 11px 16px;
  white-space: nowrap;
}

body:not(:has(#product-home)) .table tbody tr td {
  padding: 10px 16px;
  border-color: var(--b2b-border);
  color: var(--b2b-text);
  vertical-align: middle;
}

body:not(:has(#product-home)) .table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: #fafbfd;
}

body:not(:has(#product-home)) .table-hover > tbody > tr:hover > td {
  background-color: #f0f5ff;
}

body:not(:has(#product-home)) .table tfoot td {
  background-color: var(--b2b-bg);
  font-weight: 700;
  border-color: var(--b2b-border);
  color: var(--b2b-ink);
  font-size: .86rem;
}

body:not(:has(#product-home)) .table tbody tr td img.img-thumbnail {
  border-color: var(--b2b-border);
  background-color: #fafbfc;
  border-radius: 4px;
}

/* ────────────────────────────────────────────────
   10. Shopping Cart page
──────────────────────────────────────────────── */
body:not(:has(#product-home)) #checkout-cart .table td input[name="quantity"] {
  width: 68px;
  font-size: .84rem;
  text-align: center;
  border: 1.5px solid var(--b2b-border);
  border-radius: var(--b2b-radius);
  padding: 4px 6px;
  transition: border-color .15s;
}

body:not(:has(#product-home)) #checkout-cart .table td input[name="quantity"]:focus {
  border-color: var(--b2b-blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(22,119,255,.1);
}

body:not(:has(#product-home)) #checkout-cart .table td .btn-danger {
  background-color: transparent;
  border: 1px solid #e0e6ef;
  color: #b0bec5;
  font-size: .78rem;
  padding: 3px 8px;
  border-radius: var(--b2b-radius);
  transition: all .15s;
}

body:not(:has(#product-home)) #checkout-cart .table td .btn-danger:hover {
  background-color: #fff0f0;
  border-color: var(--b2b-danger);
  color: var(--b2b-danger);
}

body:not(:has(#product-home)) #checkout-cart .btn-primary,
body:not(:has(#product-home)) #checkout-cart a.btn-primary {
  background-color: var(--b2b-accent);
  border: none;
  color: #fff;
  font-size: .86rem;
  font-weight: 700;
  border-radius: var(--b2b-radius);
  padding: 10px 22px;
  transition: background-color .15s;
}

body:not(:has(#product-home)) #checkout-cart .btn-primary:hover {
  background-color: var(--b2b-accent-hov);
}

/* ────────────────────────────────────────────────
   11. Checkout page
──────────────────────────────────────────────── */
body:not(:has(#product-home)) #checkout-checkout .card,
body:not(:has(#product-home)) #checkout-checkout .border {
  border: 1px solid var(--b2b-border) !important;
  border-radius: var(--b2b-radius);
  box-shadow: var(--b2b-shadow-sm);
}

body:not(:has(#product-home)) #checkout-checkout .card-header {
  background-color: var(--b2b-bg);
  border-bottom: 1px solid var(--b2b-border);
  font-weight: 600;
  font-size: .88rem;
  color: var(--b2b-ink);
  padding: 12px 18px;
}

/* ────────────────────────────────────────────────
   12. Forms
──────────────────────────────────────────────── */
body:not(:has(#product-home)) .form-control,
body:not(:has(#product-home)) .form-select {
  border: 1.5px solid var(--b2b-border);
  border-radius: var(--b2b-radius);
  font-size: .86rem;
  color: var(--b2b-text);
  background-color: #fff;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
  direction: ltr;
}

body:not(:has(#product-home)) .form-control:focus,
body:not(:has(#product-home)) .form-select:focus {
  border-color: var(--b2b-blue);
  box-shadow: 0 0 0 3px rgba(22,119,255,.12);
  outline: none;
}

body:not(:has(#product-home)) .form-label,
body:not(:has(#product-home)) .col-form-label {
  font-size: .82rem;
  font-weight: 600;
  color: #4a5568;
  letter-spacing: .01em;
}

body:not(:has(#product-home)) div.required .col-form-label:before,
body:not(:has(#product-home)) div.required .form-label:before {
  color: var(--b2b-danger);
}

/* ────────────────────────────────────────────────
   13. Buttons — global
──────────────────────────────────────────────── */
body:not(:has(#product-home)) .btn-primary {
  background-color: var(--b2b-blue);
  border-color: var(--b2b-blue);
  color: #fff;
  font-weight: 600;
  border-radius: var(--b2b-radius);
  transition: background-color .15s;
}

body:not(:has(#product-home)) .btn-primary:hover,
body:not(:has(#product-home)) .btn-primary:focus {
  background-color: var(--b2b-blue-hov);
  border-color: var(--b2b-blue-hov);
}

body:not(:has(#product-home)) .btn-secondary {
  background-color: #4a5568;
  border-color: #4a5568;
  color: #fff;
  font-weight: 600;
  border-radius: var(--b2b-radius);
}

body:not(:has(#product-home)) .btn-secondary:hover {
  background-color: #2d3748;
  border-color: #2d3748;
}

body:not(:has(#product-home)) .btn-outline-secondary {
  border: 1.5px solid var(--b2b-border);
  color: #4a5568;
  border-radius: var(--b2b-radius);
  background-color: #fff;
}

body:not(:has(#product-home)) .btn-outline-secondary:hover {
  background-color: var(--b2b-bg);
  border-color: #a0aec0;
  color: var(--b2b-ink);
}

/* Checkout / cart confirm CTA — use accent orange */
body:not(:has(#product-home)) #checkout-checkout .btn-primary,
body:not(:has(#product-home)) #checkout-cart .btn-primary,
body:not(:has(#product-home)) .btn-confirm {
  background-color: var(--b2b-accent);
  border-color: var(--b2b-accent);
}

body:not(:has(#product-home)) #checkout-checkout .btn-primary:hover,
body:not(:has(#product-home)) #checkout-cart .btn-primary:hover {
  background-color: var(--b2b-accent-hov);
  border-color: var(--b2b-accent-hov);
}

/* ────────────────────────────────────────────────
   14. Account portal
──────────────────────────────────────────────── */
body:not(:has(#product-home)) #account-account .border {
  border: 1px solid var(--b2b-border) !important;
  border-radius: var(--b2b-radius);
  box-shadow: var(--b2b-shadow-sm);
  transition: box-shadow .2s, border-color .2s, transform .2s;
}

body:not(:has(#product-home)) #account-account .border:hover {
  border-color: var(--b2b-blue) !important;
  box-shadow: 0 4px 16px rgba(22,119,255,.12);
  transform: translateY(-2px);
}

body:not(:has(#product-home)) #account-account .list-group-item {
  border-color: var(--b2b-border);
  font-size: .85rem;
}

body:not(:has(#product-home)) #account-account .list-group-item a {
  color: var(--b2b-blue);
  text-decoration: none;
}

body:not(:has(#product-home)) #account-account .list-group-item a:hover {
  color: var(--b2b-blue-hov);
  text-decoration: underline;
}

/* ────────────────────────────────────────────────
   15. Login / Register
──────────────────────────────────────────────── */
body:not(:has(#product-home)) #account-login .border,
body:not(:has(#product-home)) #account-register .border {
  border: 1px solid var(--b2b-border) !important;
  border-radius: var(--b2b-radius);
  box-shadow: var(--b2b-shadow);
  padding: 26px !important;
}

body:not(:has(#product-home)) #account-login h2,
body:not(:has(#product-home)) #account-register h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--b2b-ink);
  border-bottom: 1px solid var(--b2b-border);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

/* ────────────────────────────────────────────────
   16. Alerts
──────────────────────────────────────────────── */
body:not(:has(#product-home)) .alert {
  border-radius: var(--b2b-radius);
  font-size: .85rem;
  border-width: 1px;
}

body:not(:has(#product-home)) .alert-success {
  background-color: #f0faf5;
  border-color: #86efac;
  color: #166534;
}

body:not(:has(#product-home)) .alert-danger {
  background-color: #fff1f2;
  border-color: #fca5a5;
  color: #991b1b;
}

body:not(:has(#product-home)) .alert-warning {
  background-color: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

body:not(:has(#product-home)) .alert-info {
  background-color: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

/* ────────────────────────────────────────────────
   17. Pagination
──────────────────────────────────────────────── */
body:not(:has(#product-home)) .pagination {
  margin-bottom: 0;
  gap: 3px;
}

body:not(:has(#product-home)) .pagination .page-link {
  color: var(--b2b-blue);
  border: 1px solid var(--b2b-border);
  border-radius: var(--b2b-radius) !important;
  font-size: .82rem;
  padding: 5px 12px;
  transition: background-color .12s, border-color .12s;
}

body:not(:has(#product-home)) .pagination .page-link:hover {
  background-color: #f0f5ff;
  border-color: var(--b2b-blue);
  color: var(--b2b-blue-hov);
}

body:not(:has(#product-home)) .pagination .page-item.active .page-link {
  background-color: var(--b2b-blue);
  border-color: var(--b2b-blue);
  color: #fff;
}

/* ────────────────────────────────────────────────
   18. Footer — dark navy, modern typographic style
   !! Do NOT change position / bottom — base handles it
──────────────────────────────────────────────── */
body:not(:has(#product-home)) footer {
  background-color: var(--b2b-navy);
  border: none;
  border-top: 1px solid #253d5c;
  color: #a8bed8;
}

body:not(:has(#product-home)) footer h5 {
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  margin-bottom: 12px;
  font-family: inherit;
}

body:not(:has(#product-home)) footer a {
  color: #7ea8cc;
  text-decoration: none;
  font-size: .82rem;
  transition: color .12s;
}

body:not(:has(#product-home)) footer a:hover {
  color: #fff;
}

body:not(:has(#product-home)) footer hr {
  border: none;
  border-top: 1px solid #253d5c;
  margin: 20px 0;
  opacity: 1;
}

body:not(:has(#product-home)) footer p {
  font-size: .74rem;
  color: #5a7898;
}

body:not(:has(#product-home)) footer ul.list-unstyled li {
  margin-bottom: 5px;
}

/* ────────────────────────────────────────────────
   19. Sidebar columns
──────────────────────────────────────────────── */
body:not(:has(#product-home)) #column-left,
body:not(:has(#product-home)) #column-right {
  font-size: .84rem;
}

body:not(:has(#product-home)) #column-left .list-group,
body:not(:has(#product-home)) #column-right .list-group {
  border-radius: var(--b2b-radius);
  border: 1px solid var(--b2b-border);
  overflow: hidden;
  box-shadow: var(--b2b-shadow-sm);
}

body:not(:has(#product-home)) #column-left .list-group-item,
body:not(:has(#product-home)) #column-right .list-group-item {
  border-color: var(--b2b-border);
  color: var(--b2b-text);
  font-size: .83rem;
  padding: 8px 14px;
  transition: background-color .12s, color .12s;
}

body:not(:has(#product-home)) #column-left .list-group-item.active,
body:not(:has(#product-home)) #column-right .list-group-item.active {
  background-color: var(--b2b-blue);
  border-color: var(--b2b-blue);
  color: #fff;
}

body:not(:has(#product-home)) #column-left .list-group-item a,
body:not(:has(#product-home)) #column-right .list-group-item a {
  color: var(--b2b-text);
  text-decoration: none;
}

body:not(:has(#product-home)) #column-left .list-group-item:hover:not(.active),
body:not(:has(#product-home)) #column-right .list-group-item:hover:not(.active) {
  background-color: #f0f5ff;
}

body:not(:has(#product-home)) #column-left .list-group-item:hover a,
body:not(:has(#product-home)) #column-right .list-group-item:hover a {
  color: var(--b2b-blue);
}

/* ────────────────────────────────────────────────
   20. Compare bar, ratings, misc
──────────────────────────────────────────────── */
body:not(:has(#product-home)) .rating .fa-star {
  color: #f59e0b;
  font-size: 13px;
}

body:not(:has(#product-home)) #compare-total {
  background-color: #fff;
  border: 1.5px solid var(--b2b-border);
  color: var(--b2b-text);
  font-size: .82rem;
  font-weight: 600;
  border-radius: var(--b2b-radius);
  padding: 7px 14px;
  transition: border-color .15s, color .15s, background-color .15s;
}

body:not(:has(#product-home)) #compare-total:hover {
  border-color: var(--b2b-blue);
  color: var(--b2b-blue);
  background-color: #f0f5ff;
}

body:not(:has(#product-home)) #cookie {
  background: var(--b2b-navy);
  border-top: 1px solid #253d5c;
}

body:not(:has(#product-home)) #cookie div {
  font-size: .84rem;
}

/* ────────────────────────────────────────────────
   21. Category / All-products page
──────────────────────────────────────────────── */
body:not(:has(#product-home)) #product-category,
body:not(:has(#product-home)) #product-all {
  padding-top: 18px;
  padding-bottom: 24px;
}

body:not(:has(#product-home)) #product-category h3 {
  font-size: .88rem;
  font-weight: 700;
  color: var(--b2b-ink);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
}

body:not(:has(#product-home)) #product-category .list-unstyled li a {
  color: var(--b2b-blue);
  font-size: .83rem;
  text-decoration: none;
}

body:not(:has(#product-home)) #product-category .list-unstyled li a:hover {
  color: var(--b2b-blue-hov);
  text-decoration: underline;
}

/* ────────────────────────────────────────────────
   22. Responsive adjustments
──────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  body:not(:has(#product-home)) #content {
    padding-top: 14px;
    padding-left: 14px;
    padding-right: 14px;
  }

  body:not(:has(#product-home)) .product-thumb .description {
    padding: 10px 10px 48px;
  }

  body:not(:has(#product-home)) #product-info h1 {
    font-size: 1.05rem;
  }

  body:not(:has(#product-home)) #product-info .price-new,
  body:not(:has(#product-home)) #product-info h2 {
    font-size: 1.2rem;
  }

  body:not(:has(#product-home)) #product-info #button-cart {
    width: 100%;
    padding: 12px;
  }
}