/* ==========================================================================
   INGSOL B2B Industrial Ecommerce — Full CSS (Responsiveness Fixed)
   Breakpoints:
     320px  — tiny phones (safety net)
     480px  — small phones
     768px  — mobile/tablet boundary
     1024px — tablet/desktop boundary
     1280px — standard desktop
     1440px — large monitors
   ========================================================================== */

:root {
  --blue: #005baa;
  --blue-dark: #0952b0;
  --blue-light: #e8f1fb;
  --blue-gradient: linear-gradient(90deg, #004b8f 0%, #005baa 100%);

  --white: #ffffff;
  --text: #1a2433;
  --text-muted: #5c6b7a;
  --border: #e4eaf0;
  --surface: #f7f9fb;

  --shadow-sm: 0 1px 3px rgba(26, 36, 51, 0.06);
  --shadow-md: 0 4px 20px rgba(26, 36, 51, 0.08);
  --shadow-search: 0 2px 12px rgba(0, 91, 170, 0.10);

  --radius: 8px;
  --radius-pill: 999px;
  --header-z: 1100;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --container: min(1240px, 100% - 2rem);
  --search-max: 560px;
  --nav-height: 42px;
  --main-height: 64px;
  --topbar-height: 34px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

.container {
  width: var(--container);
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.icon { width: 20px; height: 20px; flex-shrink: 0; }
.icon--sm { width: 14px; height: 14px; }

/* ==========================================================================
   HEADER SHELL
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: var(--header-z);
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.3s var(--ease);
}

.header.is-scrolled {
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   ROW 1 — TOPBAR
   ========================================================================== */
.topbar {
  background: #1a2d4a;
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-height);
  gap: 1rem;
}

.topbar__left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s var(--ease);
}

.topbar__item:hover { opacity: 0.88; }

.topbar__divider {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

/* Trust badges (right side) */
.topbar__badges {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.topbar__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.92);
  font-size: 11.5px;
  font-weight: 500;
}

/* ==========================================================================
   ROW 2 — MAIN (logo | search | icons + RFQ)
   ========================================================================== */
.main {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.main__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 1.25rem;
  min-height: var(--main-height);
  padding-block: 0.5rem;
}

.main__icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.25rem;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.logo__img {
  display: block;
  height: 76px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
  object-position: left center;
  margin-block: -12px;
}

.logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo__name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.logo__tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Search */
.search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--search-max);
  min-width: 0;
  justify-self: center;
  margin-inline: auto;
  box-shadow: var(--shadow-search);
  border-radius: var(--radius-pill);
  transition: box-shadow 0.25s var(--ease);
}

.search:focus-within {
  box-shadow: 0 0 0 3px rgba(0, 91, 170, 0.15), var(--shadow-search);
}

.search__icon-wrap {
  position: absolute;
  left: 1rem;
  display: flex;
  color: var(--text-muted);
  pointer-events: none;
  z-index: 1;
}

.search__field {
  flex: 1;
  width: 100%;
  height: 42px;
  /* FIX: right padding increased to 6.5rem (104px) to clear 92px button + 4px gap */
  padding: 0 7rem 0 2.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--white);
  font: inherit;
  font-size: 13px;
  color: var(--text);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.search__field::placeholder { color: #94a3b8; }
.search__field:hover { border-color: #c5d0dc; }
.search__field:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--white);
}

.search__btn {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  min-width: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.15rem;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--blue);
  color: var(--white);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.15s var(--ease), box-shadow 0.2s;
}

.search__btn:hover {
  background: var(--blue-dark);
  box-shadow: 0 2px 8px rgba(0, 75, 143, 0.30);
}

.search__btn:active { transform: scale(0.98); }

/* ==========================================================================
   DELIVER TO WIDGET
   ========================================================================== */
.deliver {
  position: relative;
  flex-shrink: 0;
}

.deliver--nav {
  margin-left: auto;
  padding-left: 0.85rem;
  border-left: 1px solid var(--border);
}

.deliver__trigger {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  height: 36px;
  max-width: 148px;
  padding: 0 0.35rem;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.deliver__trigger:hover,
.deliver.is-open .deliver__trigger {
  background: var(--blue-light);
  border-color: rgba(0, 91, 170, 0.2);
  box-shadow: var(--shadow-sm);
}

.deliver__pin {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--blue);
}

.deliver__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.deliver__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.deliver__value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 118px;
}

.deliver__change {
  display: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--blue);
  margin-left: 0.15rem;
}

.deliver__trigger:hover .deliver__change { display: inline; }

.deliver__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(320px, calc(100vw - 2rem));
  padding: 1rem 1.1rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  /* FIX: was 50, increased to ensure it's above all page content */
  z-index: 9999;
}

.deliver.is-open .deliver__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.deliver__panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.deliver__panel-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.deliver__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.deliver__close:hover {
  background: var(--blue-light);
  color: var(--text);
}

.deliver__ship-note {
  margin: 0 0 0.85rem;
  font-size: 12px;
  color: var(--text-muted);
}

.deliver__ship-note.is-active {
  color: var(--blue-dark);
  font-weight: 500;
}

.deliver__form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.deliver__field label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.deliver__field select,
.deliver__field input {
  width: 100%;
  height: 38px;
  padding: 0 0.65rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.deliver__field select:focus,
.deliver__field input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 91, 170, 0.12);
}

.deliver__save {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.25rem;
  height: 40px;
  border: none;
  border-radius: var(--radius);
  background: var(--blue);
  color: var(--white);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.deliver__save:hover {
  background: var(--blue-dark);
  box-shadow: 0 2px 10px rgba(0, 75, 143, 0.25);
}

.deliver__save:active { transform: scale(0.98); }

.deliver__recent {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.deliver__recent-title {
  margin: 0 0 0.4rem;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.deliver__recent-list { margin: 0; padding: 0; list-style: none; }

.deliver__recent-btn {
  display: block;
  width: 100%;
  padding: 0.45rem 0.5rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.deliver__recent-btn:hover {
  background: var(--blue-light);
  color: var(--blue-dark);
}

.deliver__detect {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.5rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--blue-dark);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.deliver__detect:hover {
  background: var(--blue-light);
  border-color: var(--blue);
}

.deliver__detect:disabled { opacity: 0.65; cursor: wait; }

/* ==========================================================================
   UTILITY ICONS
   ========================================================================== */
.utilities {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.1rem;
  flex-shrink: 0;
}

.utility {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}

.utility--icon-only {
  width: 36px;
  height: 36px;
}

.utility:hover {
  color: var(--blue-dark);
  background: var(--blue-light);
  transform: translateY(-1px);
}

.utility__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--text);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border: 1.5px solid var(--white);
}

/* RFQ CTA Box */
.rfq-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-left: 0.6rem;
  padding: 0.5rem 1rem 0.5rem 0.75rem;
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--blue-dark);
  background: var(--white);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  flex-shrink: 0;
}

.rfq-cta:hover {
  background: var(--blue-light);
  border-color: var(--blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 75, 143, 0.18);
}

.rfq-cta__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--blue);
}

.rfq-cta__icon svg { width: 22px; height: 22px; }

.rfq-cta__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.rfq-cta__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-dark);
  white-space: nowrap;
}

.rfq-cta__sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.hamburger span {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
  transition: transform 0.25s var(--ease), opacity 0.25s;
}

.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer close button — only visible on mobile inside open drawer */
.drawer__close {
  display: none;
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s, color 0.2s;
}

.drawer__close:hover {
  background: var(--surface);
  color: var(--blue-dark);
}

/* ==========================================================================
   ROW 3 — NAVBAR
   ========================================================================== */
.navbar {
  background: var(--white);
}

.navbar__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem 1rem;
  min-height: var(--nav-height);
}

.nav { flex: 1; min-width: 0; }

.nav__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.65rem 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.45rem;
  width: 0;
  height: 2px;
  background: var(--blue);
  border-radius: 1px;
  transition: width 0.28s var(--ease);
}

.nav__link:hover,
.nav__link.is-active { color: var(--blue-dark); }

.nav__link:hover::after,
.nav__link.is-active::after { width: 100%; }

.nav__link.is-active { font-weight: 600; }

.nav__arrow {
  width: 14px;
  height: 14px;
  transition: transform 0.25s var(--ease);
}

.nav__mega-wrap.is-open .nav__arrow { transform: rotate(180deg); }

.nav__cta-wrap { margin-left: 0.25rem; }

.btn-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.95rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
  background: var(--blue);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0, 75, 143, 0.22);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.btn-cta:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 75, 143, 0.28);
}

.btn-cta::after { display: none; }

/* ==========================================================================
   MEGA MENU
   ========================================================================== */
.nav__mega-wrap { position: static; }

.mega {
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  width: min(var(--container), calc(100vw - 2rem));
  padding: 1.25rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
  z-index: 20;
}

.nav__mega-wrap.is-open .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.mega__title {
  margin: 0 0 0.5rem;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue-dark);
}

.mega__col a {
  display: block;
  padding: 0.35rem 0;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  transition: color 0.15s, padding-left 0.15s;
}

.mega__col a:hover { color: var(--blue); padding-left: 4px; }
.mega__featured { font-weight: 600; color: var(--blue-dark) !important; }

/* ==========================================================================
   OVERLAY
   ========================================================================== */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: calc(var(--header-z) - 1);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}

.overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   HIDE DEFAULT ZOHO THEME ELEMENTS
   ========================================================================== */
.theme-header { display: none !important; }
.theme-header-topbar { display: none !important; }

/* ==========================================================================
   BREAKPOINT: 1024px–1439px — LAPTOP / SMALL DESKTOP (NEW — was missing)
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1439px) {
  :root {
    --container: min(1180px, 100% - 2rem);
    --search-max: 480px;
  }

  .nav__list { gap: 0 1.1rem; }
  .nav__link { font-size: 13.5px; }
  .main__inner { column-gap: 1rem; }
}

/* ==========================================================================
   BREAKPOINT: ≤1023px — TABLET + MOBILE (hamburger drawer)
   ========================================================================== */
@media (max-width: 1023px) {

  /* Hide navbar by default — shown as slide-in drawer */
  .navbar { display: none; }

  .header.is-menu-open .navbar {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: min(340px, 90vw);
    /* FIX: 100vh fallback for older Safari */
    height: 100vh;
    height: 100dvh;
    z-index: calc(var(--header-z) + 2);
    background: var(--white);
    box-shadow: -6px 0 28px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    animation: drawerIn 0.3s var(--ease);
  }

  /* Show close button inside open drawer */
  .header.is-menu-open .drawer__close {
    display: flex;
  }

  @keyframes drawerIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
  }

  .header.is-menu-open .navbar__inner {
    flex-direction: column;
    align-items: stretch;
    padding: 4.5rem 1.25rem 2rem;
    min-height: 100%;
  }

  .nav { width: 100%; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__list > li {
    border-bottom: 1px solid var(--border);
  }

  .nav__list > li:first-child {
    border-top: 1px solid var(--border);
  }

  .nav__link {
    padding: 0.85rem 0;
    width: 100%;
    justify-content: space-between;
  }

  .nav__cta-wrap {
    margin: 1rem 0 0;
    border-bottom: none !important;
  }

  .btn-cta {
    width: 100%;
    justify-content: center;
    padding: 0.65rem;
  }

  /* Mega menu in drawer — accordion style, no desktop positioning */
  .mega {
    display: none;
    position: static !important;
    transform: none !important;
    width: 100%;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    padding: 0.5rem 0 0.75rem 0.75rem;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: none !important;
    z-index: auto;
  }

  /* Show mega only when explicitly toggled */
  .nav__mega-wrap.is-open .mega {
    display: block !important;
  }

  .mega__grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .main__inner {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.65rem;
    /* FIX: add row-gap so search bar doesn't stick to logo row */
    row-gap: 0.5rem;
  }

  .search {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  .hamburger { display: flex; margin-left: auto; }

  /* Hide trust badges on tablet/mobile */
  .topbar__badges { display: none; }

  /* RFQ CTA: hide subtitle on tablet */
  .rfq-cta__sub { display: none; }
  .rfq-cta { margin-left: 0.35rem; padding: 0.45rem 0.65rem; }

  /* Deliver To in drawer */
  .deliver--nav {
    width: 100%;
    margin-left: 0;
    margin-top: 0.75rem;
    padding: 0.85rem 0 0;
    border-left: none;
    border-top: 1px solid var(--border);
  }

  .deliver--nav .deliver__trigger {
    max-width: none;
    width: 100%;
    height: 40px;
    padding: 0 0.5rem;
  }

  .deliver--nav .deliver__value { max-width: none; }
  .deliver__change { display: none !important; }

  .deliver--nav .deliver__panel {
    left: 0;
    right: 0;
    width: auto;
  }
}

/* ==========================================================================
   BREAKPOINT: ≤767px — MOBILE
   ========================================================================== */
@media (max-width: 767px) {
  :root { --main-height: auto; }

  .topbar__social { display: none; }
  .topbar__item { font-size: 11px; }

  .main__inner {
    flex-wrap: wrap;
    gap: 0.5rem 0.65rem;
    padding-block: 0.65rem;
  }

  .logo    { order: 1; }
  .hamburger { order: 2; display: flex; margin-left: auto; }
  .main__icons { order: 3; flex-shrink: 0; padding-right: 0; }
  .search  {
    order: 4;
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  /* RFQ CTA on mobile: icon only */
  .rfq-cta__title { display: none; }
  .rfq-cta { border: 1.5px solid var(--blue); padding: 0.45rem 0.55rem; margin-left: 0.25rem; }

  /* FIX: Tighter padding so text doesn't overlap button */
  .search__field {
    height: 40px;
    font-size: 12px;
    padding-right: 5.5rem;
  }

  .search__btn {
    font-size: 12px;
    min-width: 80px;
    padding: 0 0.75rem;
  }

  .logo__tag { display: none; }

  .utility { width: 38px; height: 38px; }

  /* FIX: Feature box breakpoint aligned to match header (was 1100px, now 1023px) */
  .mega__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BREAKPOINT: ≤480px — SMALL PHONES
   ========================================================================== */
@media (max-width: 480px) {
  .topbar__divider { display: none; }
  /* FIX: Hide phone number on very small screens to prevent topbar height jump */
  .topbar__left .topbar__item:last-child { display: none; }
  .topbar__inner { height: auto; padding-block: 0.4rem; }
  .topbar__badges { display: none; }

  .rfq-cta__sub { display: none; }
  .rfq-cta { padding: 0.45rem 0.65rem; margin-left: 0.35rem; }

  .deliver--nav .deliver__label { font-size: 10px; }
  .deliver--nav .deliver__value { font-size: 11px; }
  .deliver--nav .deliver__trigger { height: 38px; }

  .search__btn { min-width: 70px; font-size: 11px; }

  /* FIX: Footer 480px adjustments (was missing) */
  .footer__card { padding: 1.25rem 1rem 1rem; border-radius: 18px; }
  .footer__brand-name { font-size: 15px; }
  .footer__heading { font-size: 13px; }
}

/* ==========================================================================
   BREAKPOINT: ≤320px — TINY PHONES (safety net — was missing)
   ========================================================================== */
@media (max-width: 320px) {
  :root { --container: 100% - 1rem; }

  .logo__name { font-size: 15px; }
  .topbar__item { font-size: 10px; }
  .utility { width: 34px; height: 34px; }
  .search__btn { min-width: 60px; font-size: 10px; padding: 0 0.5rem; }
  .search__field { padding-right: 4.5rem; }
}

/* ==========================================================================
   BREAKPOINT: ≥1440px — LARGE MONITORS
   ========================================================================== */
@media (min-width: 1440px) {
  :root {
    --container: min(1400px, 100% - 3rem);
    --search-max: 600px;
  }

  .main__inner { column-gap: 1.5rem; }
  .nav__list { gap: 0 1.75rem; }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   FOOTER — Premium Dark Navy Industrial
   ========================================================================== */

/* ── Variables ── */
:root {
  --f-bg:        #0d1b2e;
  --f-surface:   #111f33;
  --f-border:    rgba(255,255,255,0.07);
  --f-text:      rgba(255,255,255,0.88);
  --f-muted:     rgba(255,255,255,0.48);
  --f-accent:    #005baa;
  --f-accent-h:  #004b8f;
  --f-gold:      #e8a020;
  --f-strip-bg:  #0a1625;
}

/* ── Shell ── */
.footer {
  background: var(--f-bg);
  color: var(--f-text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  border-top: 1px solid var(--f-border);
}

/* ── Trust Strip ── */
.footer__trust-strip {
  background: var(--f-strip-bg);
  border-bottom: 1px solid var(--f-border);
  padding: 0;
}

.footer__trust-inner {
  display: flex;
  align-items: stretch;
  min-height: 64px;
}

.footer__trust-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  padding: 0.85rem 1.25rem;
  border-right: 1px solid var(--f-border);
  transition: background 0.2s;
}

.footer__trust-item:last-of-type { border-right: none; }

.footer__trust-item:hover { background: rgba(0,91,170,0.06); }

.footer__trust-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--f-accent);
}

.footer__trust-stat {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.footer__trust-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--f-muted);
  white-space: nowrap;
}

.footer__trust-sep { display: none; }

/* ── Main Body ── */
.footer__body {
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid var(--f-border);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr 1.15fr;
  gap: 2.5rem 3rem;
  align-items: start;
}

/* ── Col 1: Brand ── */
.footer__col--brand {}

.footer__logo-link { display: inline-block; margin-bottom: 1.15rem; }

.footer__logo-img {
  display: block;
  height: 52px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.footer__tagline {
  margin: 0 0 1.35rem;
  font-size: 13px;
  line-height: 1.7;
  color: var(--f-muted);
  max-width: 30ch;
}

.footer__trust-list {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.footer__trust-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--f-text);
}

.footer__trust-list li svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--f-accent);
}

.footer__rfq-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.3rem;
  background: var(--f-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  letter-spacing: 0.02em;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(0,75,143,0.22);
}

.footer__rfq-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.footer__rfq-btn:hover {
  background: var(--f-accent-h);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,75,143,0.30);
}

/* ── Col heading ── */
.footer__heading {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.1rem;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
}

.footer__heading-accent {
  display: inline-block;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--f-accent);
  flex-shrink: 0;
}

/* ── Link Lists ── */
.footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__links li { line-height: 1; }
.footer__links li + li { margin-top: 0.7rem; }

.footer__link {
  font-size: 13px;
  font-weight: 400;
  color: var(--f-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0;
  transition: color 0.18s, gap 0.18s;
}

.footer__link::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 1px;
  background: var(--f-accent);
  margin-right: 0;
  transition: width 0.2s, margin-right 0.2s;
  vertical-align: middle;
}

.footer__link:hover {
  color: var(--f-accent-h);
}

.footer__link:hover::before {
  width: 8px;
  margin-right: 5px;
}

/* ── Contact List ── */
.footer__contact {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.footer__contact li + li {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--f-border);
}

.footer__contact-icon-wrap {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: rgba(0, 91, 170, 0.12);
  border: 1px solid rgba(0, 91, 170, 0.2);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.footer__contact-icon-wrap svg {
  width: 15px;
  height: 15px;
  color: var(--f-accent);
}

.footer__contact-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--f-muted);
  margin-bottom: 3px;
}

.footer__contact-value {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--f-text);
  text-decoration: none;
  line-height: 1.5;
  transition: color 0.18s;
}

a.footer__contact-value:hover { color: var(--f-accent-h); }

/* ── Bottom Bar ── */
.footer__bottom-bar {
  background: var(--f-strip-bg);
  padding: 1rem 0;
}

.footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer__copy {
  margin: 0;
  font-size: 12px;
  color: var(--f-muted);
  font-weight: 400;
}

.footer__legal-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem;
}

.footer__legal-link {
  font-size: 12px;
  color: var(--f-muted);
  text-decoration: none;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  transition: color 0.18s, background 0.18s;
}

.footer__legal-link:hover {
  color: var(--f-accent-h);
  background: rgba(0,91,170,0.08);
}

.footer__legal-link + .footer__legal-link {
  border-left: 1px solid var(--f-border);
}

/* ── Hide default Zoho footer ── */
[data-footer-type="site_footer"] { display: none !important; }

/* ── Tablet: ≤1023px ── */
@media (max-width: 1023px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 2.5rem;
  }

  .footer__col--brand { grid-column: 1 / -1; }

  .footer__tagline { max-width: 48ch; }

  .footer__trust-item { padding: 0.7rem 1rem; }
}

/* ── Mobile: ≤767px ── */
@media (max-width: 767px) {
  .footer__trust-inner {
    flex-wrap: wrap;
    min-height: auto;
  }

  .footer__trust-item {
    flex: 1 1 calc(50% - 1px);
    border-right: none;
    border-bottom: 1px solid var(--f-border);
    padding: 0.65rem 0.9rem;
    min-width: 0;
  }

  .footer__trust-item:nth-child(odd) { border-right: 1px solid var(--f-border); }

  .footer__trust-item:nth-last-child(-n+2) { border-bottom: none; }

  .footer__body { padding: 2.25rem 0 2rem; }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer__tagline { max-width: none; }

  .footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .footer__legal-links { gap: 0; }
}

/* ── Small phones: ≤480px ── */
@media (max-width: 480px) {
  .footer__trust-item { padding: 0.55rem 0.65rem; }
  .footer__trust-stat { font-size: 13px; }
  .footer__trust-label { font-size: 11px; }

  .footer__body { padding: 1.75rem 0 1.5rem; }

  .footer__logo-img { height: 44px; }

  .footer__tagline { font-size: 12px; }

  .footer__rfq-btn { width: 100%; justify-content: center; }

  .footer__copy { font-size: 11px; }
  .footer__legal-link { font-size: 11px; padding: 0.2rem 0.45rem; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .footer__rfq-btn,
  .footer__link,
  .footer__trust-item { transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   HERO BANNER
   ========================================================================== */
.zcs_hero_banner .zphero-slider-container {
  height: 320px !important;
  min-height: 320px !important;
  overflow: hidden !important;
}

.zcs_hero_banner h1,
.zcs_hero_banner h2 { font-size: 42px !important; line-height: 1.1 !important; }

.zcs_hero_banner p { font-size: 18px !important; }

.zcs_hero_banner .zcs_explore_btn a,
.zcs_hero_banner .zcs_explore_btn button {
  font-size: 16px !important;
  padding: 10px 22px !important;
}

.zcs_hero_banner .zpslider-img {
  background-size: cover !important;
  background-position: 65% center !important;
}

/* FIX: Hero headings were missing mobile overrides — stuck at 42px on phones */
@media (max-width: 767px) {
  .zcs_hero_banner .zphero-slider-container {
    height: 240px !important;
    min-height: 240px !important;
  }
  .zcs_hero_banner h1,
  .zcs_hero_banner h2 { font-size: 26px !important; }
  .zcs_hero_banner p { font-size: 14px !important; }
  .zcs_hero_banner .zcs_explore_btn a,
  .zcs_hero_banner .zcs_explore_btn button {
    font-size: 13px !important;
    padding: 8px 16px !important;
  }
}

@media (max-width: 480px) {
  .zcs_hero_banner .zphero-slider-container {
    height: 200px !important;
    min-height: 200px !important;
  }
  .zcs_hero_banner h1,
  .zcs_hero_banner h2 { font-size: 20px !important; }
  .zcs_hero_banner p { font-size: 12px !important; }
}

/* ==========================================================================
   FEATURE BOX - uncessary and removed
   ========================================================================== */

/* DataSheet */
.theme-custom-field-value-display-file{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    background:#005baa !important;
    color:#ffffff !important;

    padding:12px 24px !important;
    border-radius:6px !important;

    text-decoration:none !important;
    font-weight:600 !important;
    font-size:14px !important;
    text-transform:uppercase !important;
    letter-spacing:0.5px !important;

    border:none !important;
}

/*Removing Breadscrumb*/
[data-breadcrumb-container],
.theme-product-page-breadcrumb {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/*Product Cart Customization*/
/* ==========================================================================
   CRIMSON PARTS — Product Card Visual Polish  v3
   Industrial Automation B2B E-commerce · Zoho Commerce

   SCOPE: Visual properties ONLY.
   This file does NOT touch:
     display · flex · position · height · width · overflow
     grid / layout structure · visibility · content rendering

   What it does touch:
     colors · typography · border · border-radius · box-shadow
     hover transitions · button aesthetics · spacing (padding only,
     not flex-gap or structural sizing)
   ========================================================================== */


/* ==========================================================================
   1. CARD SHELL — Border, radius, shadow, hover lift
   ========================================================================== */

.theme-prod-box {
  background: #ffffff;
  border: 1.5px solid #dde4ed;
  border-radius: 10px;
  box-shadow:
    0 1px 3px rgba(15, 76, 129, 0.06),
    0 2px 8px rgba(15, 76, 129, 0.04);
  transition:
    box-shadow 0.26s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.22s ease,
    transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, box-shadow;
}

/* Top accent stripe — brand marker, visible on hover only */
.theme-prod-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0F4C81 0%, #3a8fd4 100%);
  border-radius: 10px 10px 0 0;
  opacity: 0;
  transition: opacity 0.24s ease;
  pointer-events: none;
  /* z-index only — no layout effect */
  z-index: 1;
}

.theme-prod-box:hover {
  border-color: #0F4C81;
  box-shadow:
    0 6px 24px rgba(15, 76, 129, 0.12),
    0 2px 8px rgba(15, 76, 129, 0.07);
  transform: translateY(-3px);
}

.theme-prod-box:hover::before {
  opacity: 1;
}


/* ==========================================================================
   2. IMAGE AREA — Background refinement only
   ========================================================================== */

.theme-product-image-area {
  background-color: #f2f5f9;
  /* Subtle industrial grid pattern — improves empty/loading state */
  background-image:
    linear-gradient(rgba(15, 76, 129, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 76, 129, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  /* Hairline separator between image zone and details */
  border-bottom: 1px solid #e8edf3;
}

/* Image hover zoom — visual only, no size change */
.theme-product-image-area picture img {
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-prod-box:hover .theme-product-image-area picture img {
  transform: scale(1.04);
}


/* ==========================================================================
   3. PRODUCT NAME — Color and typography only
   ========================================================================== */

.theme-product-name-desc,
.theme-product-name-desc a,
.theme-product-name-desc span,
.theme-product-name-desc p,
.theme-product-name-desc h2,
.theme-product-name-desc h3 {
  color: #1E2D4D;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.45;
  text-decoration: none;
  transition: color 0.18s ease;
}

.theme-prod-box:hover .theme-product-name-desc a,
.theme-prod-box:hover .theme-product-name-desc span {
  color: #0F4C81;
}


/* ==========================================================================
   4. PRICE — Color and weight only
   ========================================================================== */

.theme-product-price,
.theme-product-price span,
.theme-product-price .zc-product-price,
.theme-product-price .price {
  color: #0F4C81;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Original / strike-through price */
.theme-product-price del,
.theme-product-price s,
.theme-product-price .original-price,
.theme-product-price .zc-product-original-price {
  color: #94a8be;
  font-weight: 400;
  text-decoration: line-through;
}



/* ==========================================================================
   5. ADD TO CART BUTTON — Unified with Out of Stock badge styling
   ========================================================================== */

/*
  SPECIFICITY AUDIT (from DevTools screenshot)
  ─────────────────────────────────────────────────────────────────────────────
  Winning Zoho rule seen in DevTools:
    .theme-product-list-style-18 .theme-product-box-content
      .theme-product-details-area .theme-product-button-area a
    = 4 classes + 1 element = (0,4,1)

  Zoho declares styles 16, 17, 18, 19 together in one rule block.
  The button is an <a> tag, not a <button>.
  DOM path: .theme-product-list-addcart > .theme-product-button-area > a

  Our fix: match the same 4-class + element chain for all style variants,
  then add .theme-cart-button to push to (0,5,1) — beats Zoho cleanly
  without !important.
  ─────────────────────────────────────────────────────────────────────────────
*/

/* Base — covers all Zoho product list style variants (16–19) */
.theme-product-list-style-16 .theme-product-box-content .theme-product-details-area .theme-product-button-area a.theme-cart-button,
.theme-product-list-style-17 .theme-product-box-content .theme-product-details-area .theme-product-button-area a.theme-cart-button,
.theme-product-list-style-18 .theme-product-box-content .theme-product-details-area .theme-product-button-area a.theme-cart-button,
.theme-product-list-style-19 .theme-product-box-content .theme-product-details-area .theme-product-button-area a.theme-cart-button {
  background: #1E2D4D !important;
  color: #ffffff !important;
  border: 1.5px solid #1E2D4D !important;
  border-radius: 12px !important;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.03em;
  box-shadow: none;
  transition: background 0.2s ease;
  cursor: pointer;
}

/* Hover */
.theme-product-list-style-16 .theme-product-box-content .theme-product-details-area .theme-product-button-area a.theme-cart-button:hover,
.theme-product-list-style-17 .theme-product-box-content .theme-product-details-area .theme-product-button-area a.theme-cart-button:hover,
.theme-product-list-style-18 .theme-product-box-content .theme-product-details-area .theme-product-button-area a.theme-cart-button:hover,
.theme-product-list-style-19 .theme-product-box-content .theme-product-details-area .theme-product-button-area a.theme-cart-button:hover {
  background: #162238 !important;
}

/* Active */
.theme-product-list-style-16 .theme-product-box-content .theme-product-details-area .theme-product-button-area a.theme-cart-button:active,
.theme-product-list-style-17 .theme-product-box-content .theme-product-details-area .theme-product-button-area a.theme-cart-button:active,
.theme-product-list-style-18 .theme-product-box-content .theme-product-details-area .theme-product-button-area a.theme-cart-button:active,
.theme-product-list-style-19 .theme-product-box-content .theme-product-details-area .theme-product-button-area a.theme-cart-button:active {
  background: #0f1a28 !important;
}



/* ==========================================================================
   6. STOCK RIBBON — Single consolidated rule, specificity-matched to Zoho
   ========================================================================== */

/*
  SPECIFICITY AUDIT
  ─────────────────────────────────────────────────────────────────────────────
  Zoho's overriding red rule (found via DevTools):
    .theme-product-list-style-16
      .theme-product-box-content
        .theme-product-list-addcart
          .theme-ribbon-stock          →  4 classes = (0,4,0)

  Previous rules in this file:
    .theme-ribbon-stock                →  1 class  = (0,1,0)  ← LOST
    .theme-ribbon-stock.out-of-stock   →  2 classes = (0,2,0)  ← LOST

  Fix: mirror Zoho's exact 4-class ancestor chain.
  Our rule: (0,4,0) — ties Zoho, wins by source order since this
  stylesheet is loaded after the Zoho theme stylesheet.
  No !important required.
  ─────────────────────────────────────────────────────────────────────────────
*/

/* ALL stock badges — styles 16–19, typography locked to match Add to Cart */
.theme-product-list-style-16 .theme-product-box-content .theme-product-list-addcart .theme-ribbon-stock,
.theme-product-list-style-17 .theme-product-box-content .theme-product-list-addcart .theme-ribbon-stock,
.theme-product-list-style-18 .theme-product-box-content .theme-product-list-addcart .theme-ribbon-stock,
.theme-product-list-style-19 .theme-product-box-content .theme-product-list-addcart .theme-ribbon-stock {
  background: #1E2D4D !important;
  color: #ffffff !important;
  border: 1.5px solid #1E2D4D !important;
  border-radius: 12px !important;
  font-size: 14px !important;    /* matches Add to Cart body font size */
  font-weight: 600 !important;
  font-family: inherit !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
  box-shadow: none;
  transition: background 0.2s ease;
  cursor: default;
}

.theme-product-list-style-16 .theme-product-box-content .theme-product-list-addcart .theme-ribbon-stock:hover,
.theme-product-list-style-17 .theme-product-box-content .theme-product-list-addcart .theme-ribbon-stock:hover,
.theme-product-list-style-18 .theme-product-box-content .theme-product-list-addcart .theme-ribbon-stock:hover,
.theme-product-list-style-19 .theme-product-box-content .theme-product-list-addcart .theme-ribbon-stock:hover {
  background: #162238 !important;
}


/* ==========================================================================
   7. FOCUS / ACCESSIBILITY
   ========================================================================== */

.theme-prod-box:focus-within {
  outline: 2px solid #0F4C81;
  outline-offset: 2px;
}

/* Button focus: handled at higher specificity in section 5 above */


/* ==========================================================================
   8. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .theme-prod-box,
  .theme-prod-box::before,
  .theme-product-image-area picture img,
  .theme-product-list-style-16 .theme-product-box-content .theme-product-details-area .theme-product-button-area a.theme-cart-button,
  .theme-product-list-style-17 .theme-product-box-content .theme-product-details-area .theme-product-button-area a.theme-cart-button,
  .theme-product-list-style-18 .theme-product-box-content .theme-product-details-area .theme-product-button-area a.theme-cart-button,
  .theme-product-list-style-19 .theme-product-box-content .theme-product-details-area .theme-product-button-area a.theme-cart-button,
  .theme-product-list-style-16 .theme-product-box-content .theme-product-list-addcart .theme-ribbon-stock,
  .theme-product-list-style-17 .theme-product-box-content .theme-product-list-addcart .theme-ribbon-stock,
  .theme-product-list-style-18 .theme-product-box-content .theme-product-list-addcart .theme-ribbon-stock,
  .theme-product-list-style-19 .theme-product-box-content .theme-product-list-addcart .theme-ribbon-stock {
    transition-duration: 0.01ms;
  }
}


/* ==========================================================================
   9. MOBILE — Visual adjustments only, no structural changes
   ========================================================================== */

@media (max-width: 480px) {
  /* Disable transform hover on touch — prevents sticky hover state */
  .theme-prod-box:hover {
    transform: none;
  }

  .theme-prod-box:hover .theme-product-image-area picture img {
    transform: none;
  }
}
/* ==========================================================================
   CRIMSON PARTS — Zoho Commerce Specification Section  v7 FINAL
   
   CONFIRMED REAL DOM STRUCTURE:
   
   .theme-prod-details-specification-ratings
     [data-detail-tab]                          ← "SPECIFICATIONS" title
     details.theme-product-specification        ← native <details> element
       summary.theme-specification-summary      ← native <summary> (clickable)
         div.theme-specification-heading        ← "General Information" text
         svg                                    ← caret arrow (inside summary)
       ul                                       ← rows container
         li                                     ← each row
           div.theme-prod-specification-field   ← label "Brand Name"
           div.theme-colon                      ← ":"
           div.theme-prod-specification-value   ← value "Siemens"
   ========================================================================== */

/* ==========================================================================
   1. OUTER WRAPPER
   ========================================================================== */
.theme-prod-details-specification-ratings {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   2. "SPECIFICATIONS" TITLE BAR
   ========================================================================== */
.theme-prod-details-specification-ratings [data-detail-tab] {
  background: #f4f8fd !important;
  border-radius: 0 !important;
  border: none !important;
  border-left: 4px solid #0F4C81 !important;
  border-bottom: 1px solid #dde4ee !important;
  padding: 15px 20px 15px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0F4C81 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
  margin-bottom: 16px !important;
  display: block !important;
}

@media (max-width: 768px) {
  .theme-prod-details-specification-ratings [data-detail-tab] {
    font-size: 12.5px !important;
    padding: 13px 14px !important;
    margin-bottom: 12px !important;
  }
}

/* ==========================================================================
   3. <details> CARD — the accordion container
   ========================================================================== */
details.theme-product-specification {
  background: #ffffff !important;
  border: 1px solid #dde4ee !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(26, 36, 51, 0.07) !important;
  overflow: hidden !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
}

details.theme-product-specification:last-child {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   4. <summary> ROW — the clickable header bar
   ========================================================================== */
summary.theme-specification-summary {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  background: #f4f8fd !important;
  padding: 11px 16px !important;
  border-bottom: 1px solid #dde4ee !important;
  cursor: pointer !important;
  list-style: none !important;  /* remove default triangle */
  user-select: none !important;
  transition: background 0.15s ease !important;
}

/* Remove default <summary> triangle in all browsers */
summary.theme-specification-summary::-webkit-details-marker {
  display: none !important;
}

summary.theme-specification-summary::marker {
  display: none !important;
  content: "" !important;
}

summary.theme-specification-summary:hover {
  background: #eaf2fb !important;
}

/* ==========================================================================
   5. HEADING TEXT inside <summary>
   ========================================================================== */
summary.theme-specification-summary .theme-specification-heading {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #1E2D4D !important;
  flex: 1 !important;
  line-height: 1.4 !important;
  display: flex !important;
  align-items: center !important;
}

/* Left navy pip before the heading text */
summary.theme-specification-summary .theme-specification-heading::before {
  content: "" !important;
  display: inline-block !important;
  width: 3px !important;
  min-width: 3px !important;
  height: 12px !important;
  background: #0F4C81 !important;
  border-radius: 2px !important;
  margin-right: 9px !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   6. SVG CARET inside <summary> — restyle, don't hide (it's the toggle)
   ========================================================================== */
summary.theme-specification-summary svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
  opacity: 0.6 !important;
}

/* Tint the caret to brand blue */
summary.theme-specification-summary svg path {
  fill: #0F4C81 !important;
}

/* Rotate caret when <details> is open */
details.theme-product-specification[open] summary.theme-specification-summary svg {
  transform: rotate(180deg) !important;
  opacity: 1 !important;
}

details.theme-product-specification[open] summary.theme-specification-summary {
  background: #eef5fc !important;
  border-bottom-color: #c8dff5 !important;
}

details.theme-product-specification[open] summary.theme-specification-summary .theme-specification-heading {
  color: #0F4C81 !important;
}

/* ==========================================================================
   7. <ul> — the rows container
   ========================================================================== */
details.theme-product-specification > ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
}

/* ==========================================================================
   8. <li> — each specification row
   ========================================================================== */
details.theme-product-specification > ul > li {
  display: grid !important;
  grid-template-columns: 170px 24px 1fr !important;
  align-items: center !important;
  padding: 8px 18px !important;
  border-bottom: 1px solid #f0f3f7 !important;
  min-height: 36px !important;
  transition: background 0.12s ease !important;
}

details.theme-product-specification > ul > li:last-child {
  border-bottom: none !important;
}

details.theme-product-specification > ul > li:hover {
  background: #f8fafd !important;
}

/* ==========================================================================
   9. LABEL — div.theme-prod-specification-field
   ========================================================================== */
.theme-prod-specification-field {
  grid-column: 1 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #6B7280 !important;
  line-height: 1.5 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ==========================================================================
   10. COLON — div.theme-colon (class confirmed from console)
   ========================================================================== */
.theme-colon {
  grid-column: 2 !important;
  color: #cbd5e1 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}

/* ==========================================================================
   11. VALUE — div.theme-prod-specification-value
   ========================================================================== */
.theme-prod-specification-value {
  grid-column: 3 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1E2D4D !important;
  line-height: 1.5 !important;
  word-break: break-word !important;
  padding-left: 2px !important;
}

/* MPN — last row, make it stand out */
details.theme-product-specification > ul > li:last-child .theme-prod-specification-value {
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace !important;
  font-size: 12px !important;
  color: #0F4C81 !important;
  letter-spacing: 0.04em !important;
  background: #eef5fc !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  border: 1px solid #c8dff5 !important;
  display: inline-block !important;
}

/* ==========================================================================
   12. MOBILE ≤640px — stack label above value
   ========================================================================== */
@media (max-width: 640px) {
  details.theme-product-specification > ul > li {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 9px 14px !important;
    gap: 2px !important;
    min-height: unset !important;
  }

  .theme-colon {
    display: none !important;
  }

  .theme-prod-specification-field {
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #9ca3af !important;
    white-space: normal !important;
  }

  .theme-prod-specification-value {
    font-size: 13px !important;
    padding-left: 0 !important;
  }

  details.theme-product-specification {
    border-radius: 10px !important;
  }

  summary.theme-specification-summary {
    padding: 10px 14px !important;
  }
}

/* ==========================================================================
   13. LARGE SCREENS ≥1280px
   ========================================================================== */
@media (min-width: 1280px) {
  details.theme-product-specification > ul > li {
    grid-template-columns: 200px 24px 1fr !important;
    padding: 9px 22px !important;
  }

  summary.theme-specification-summary {
    padding: 12px 22px !important;
  }

  .theme-prod-details-specification-ratings [data-detail-tab] {
    padding: 16px 24px 16px 20px !important;
    font-size: 13.5px !important;
  }
}
/* ==========================================================================
   WHY CHOOSE CRIMSON PARTS — Product Page Trust Card
   Injected via ::after on .theme-custom-field-accordion
   Safe zone: does NOT touch price, variants, cart, or spec tab
   ========================================================================== */

/* ── Card wrapper via pseudo-element ── */
.theme-custom-field-accordion::after {
  content: "";
  display: block;
  margin-top: 24px;

  /* Card shell */
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #dde6f0;
  box-shadow: 0 2px 12px rgba(15, 76, 129, 0.08), 0 1px 3px rgba(15, 76, 129, 0.04);
  padding: 24px 24px 20px;

  /* Fallback for browsers that don't support grid in pseudo — just a spacer */
  min-height: 10px;
}

/* ── Real card using a sibling div approach via adjacent selector ──
   Since ::after can't contain real HTML, we use a wrapper div trick:
   We target the container AFTER the accordion ends and style it as our card.
   The card content is injected via .theme-custom-field-accordion + * ::before
   
   ACTUAL APPROACH: Style the accordion's parent to add card after it.
   We use the accordion's position within .theme-product-varients-row parent. ── */

/* Remove the blank ::after above — replacing with full card on the parent */
.theme-custom-field-accordion::after {
  content: none;
}

/* ── FINAL APPROACH: Full card on .theme-custom-field-accordion::after
   Using a large content string with unicode checkmarks.
   This is the most reliable CSS-only method for Zoho Commerce. ── */

.theme-custom-field-accordion {
  position: relative;
}

/* Outer card box */
.theme-custom-field-accordion::after {
  content:
    "WHY CHOOSE CRIMSON PARTS\A"
    "\2713  Genuine Industrial Components\A"
    "\2713  Fast RFQ Response\A"
    "\2713  Global Sourcing Support\A"
    "\2713  Worldwide Shipping\A"
    "\2713  Technical Assistance\A"
    "\2713  Reliable Procurement Partner\A\A"
    "Need Help Sourcing This Product?\A"
    "Our team assists with identification, sourcing, quotations & compatibility.";

  display: block;
  white-space: pre-line;
  margin-top: 20px;

  /* Card styling */
  background: #ffffff;
  border: 1px solid #dde6f0;
  border-radius: 12px;
  box-shadow:
    0 2px 16px rgba(15, 76, 129, 0.09),
    0 1px 4px rgba(15, 76, 129, 0.05);
  padding: 22px 24px 24px;

  /* Typography */
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 2;
  color: #2c3e50;

  /* Left accent border */
  border-left: 4px solid #0F4C81;
}

/* ── Button: Request a Quote ──
   Injected via .theme-product-variant::before on the cart container
   since we need a real clickable element. We style a "fake" button look
   on a real Zoho element that exists after the accordion. ── */

/* Highlight the checkmark lines in a muted blue */
/* Note: CSS can't target individual lines in ::after content,
   so we use color on the whole block and differentiate the title visually
   by making the entire pseudo-element have the right tone */

.theme-custom-field-accordion::after {
  /* Override: split visual weight using background gradient trick */
  background: linear-gradient(
    to bottom,
    #f0f6ff 0px,
    #f0f6ff 52px,   /* title row height approx */
    #ffffff 52px,
    #ffffff 100%
  );
}

/* ── RFQ Button: injected as ::before on the quantity-cart container
   which directly follows the accordion in the DOM ── */
.theme-product-quantity-cart-container {
  position: relative;
}

.theme-product-quantity-cart-container::before {
  content: "Request a Quote →";
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 14px;

  /* Button styling */
  background: #1E2D4D;
  color: #ffffff;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 13px 24px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;

  /* Subtle top border accent */
  border-top: 3px solid #0F4C81;

  box-shadow: 0 4px 14px rgba(15, 76, 129, 0.22);
  transition: background 0.2s ease, transform 0.15s ease;
}

.theme-product-quantity-cart-container::before:hover {
  background: #0F4C81;
}

/* ── Mobile: tighten padding ── */
@media (max-width: 767px) {
  .theme-custom-field-accordion::after {
    padding: 16px 16px 18px;
    font-size: 13px;
    line-height: 1.9;
    margin-top: 16px;
    border-left-width: 3px;
  }

  .theme-product-quantity-cart-container::before {
    font-size: 13px;
    padding: 12px 18px;
  }
}

@media (max-width: 480px) {
  .theme-custom-field-accordion::after {
    padding: 14px 14px 16px;
    font-size: 12.5px;
    border-radius: 10px;
  }
}
/* ── 1. Change "Availability on Request" badge from red to theme blue ── */
.theme-prod-stock-details.theme-out-of-stock {
  background: #0F4C81 !important;
  border-color: #0F4C81 !important;
  color: #ffffff !important;
}

/* ── 2. Remove the "Request a Quote" pseudo-button we added ── */
.theme-product-quantity-cart-container::before {
  display: none !important;
  content: none !important;
}
/* Remove Mobile Double Heaer*/
@media (max-width: 991px) {
    .theme-mobile-header-nav-wrapper {
        display: none !important;
    }
}
/* Remove gp b/w header and hero Section
/* Fix gap above homepage hero */
.zpcontainer > .zprow:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: transparent !important;
}

.zpcontainer > .zprow:first-child .zpelem-col {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.zpcontainer > .zprow:first-child .hero-section {
  margin-top: -28px !important;
}
/* Customizing View All Button */
/* All Products → View All button */

.zpfilmstrip-viewall-button .zpbutton {
    background: #1f3158 !important;
    border: 2px solid #1f3158 !important;
    color: #ffffff !important;

    border-radius: 10px !important;
    transition: all 0.3s ease !important;
}

/* Hover */
.zpfilmstrip-viewall-button .zpbutton:hover {
    background: #2a467d !important;
    border-color: #c62140 !important;

    box-shadow: 0 0 14px rgba(198,33,64,0.18) !important;
}