/* Unified industrial storefront theme. Loaded last to normalize legacy page styles. */
:root {
  --product-card-image-height: 220px;
  --industrial-navy: #102a43;
  --industrial-steel: #243b53;
  --industrial-yellow: #f6c515;
  --industrial-yellow-dark: #866600;
  --industrial-accent-border: #d4b14d;
  --industrial-accent-border-soft: color-mix(
    in srgb,
    var(--industrial-accent-border) 28%,
    white
  );
  --industrial-bg: #f5f7f8;
  --industrial-surface: #fff;
  --industrial-ink: #202a33;
  --industrial-muted: #4c5b65;
  --industrial-line: #dfe5e9;
  --industrial-line-strong: #cbd5db;
  --industrial-icon-border: #d6e0e5;
  --industrial-icon-surface: #edf2f4;
  --industrial-icon-ink: var(--industrial-steel);
  --industrial-icon-accent-border: #f0df9d;
  --industrial-icon-accent-surface: #fff9e4;
  --industrial-icon-accent-ink: #866600;
  --industrial-icon-gold: #b38700;
  --industrial-success: #16835a;
  --industrial-danger: #c73e3e;
  --industrial-shadow: 0 12px 30px rgba(16, 42, 67, 0.08);
  --industrial-shadow-hover: 0 18px 42px rgba(16, 42, 67, 0.14);
  --color-page: var(--industrial-bg);
  --color-content-surface: var(--industrial-surface);
  --color-text: var(--industrial-ink);
  --color-text-muted: var(--industrial-muted);
  --color-divider: var(--industrial-line);
  --color-accent: var(--industrial-yellow);
  --color-accent-border-soft: var(--industrial-accent-border-soft);
  --color-accent-border: var(--industrial-accent-border);
  --color-accent-ink: var(--industrial-yellow-dark);
  --color-accent-ink-soft: #94713d;
  --color-accent-ink-strong: #5f411c;
  --color-success: var(--industrial-success);
  --color-danger: var(--industrial-danger);
  --color-danger-soft: #fff2f0;
  --color-danger-border: #ddb0aa;

  /* Keep legacy page components on the same navy, yellow and neutral palette. */
  --color-navy: var(--industrial-navy);
  --color-blue: var(--industrial-steel);
  --color-gold: var(--industrial-yellow);
  --color-cream: var(--industrial-bg);
  --color-surface: var(--industrial-surface);
  --color-ink: var(--industrial-ink);
  --color-muted: var(--industrial-muted);
  --color-line: var(--industrial-line);
  --color-line-strong: var(--industrial-line-strong);
  --color-card-border: var(--industrial-line);
  --color-card-border-hover: var(--industrial-yellow);
  --color-card-icon-border: var(--industrial-icon-border);
  --color-card-icon-bg: var(--industrial-icon-surface);
  --color-card-icon: var(--industrial-icon-ink);
  --navy: var(--industrial-navy);
  --navy2: var(--industrial-steel);
  --blue: var(--industrial-steel);
  --gold: var(--industrial-yellow);
  --cream: var(--industrial-yellow);
  --cream2: var(--industrial-bg);
  --p-navy: var(--industrial-navy);
  --p-blue: var(--industrial-steel);
  --p-gold: var(--industrial-yellow);
  --p-cream: var(--industrial-bg);
  --p-ink: var(--industrial-ink);
  --p-muted: var(--industrial-muted);
  --ink: var(--industrial-ink);
  --muted: var(--industrial-muted);
  --surface: var(--industrial-surface);
  --line: var(--industrial-line);
  --action-submit-bg: var(--industrial-navy);
  --action-submit-bg-hover: var(--industrial-steel);
  --action-submit-border: var(--industrial-navy);
  --action-submit-shadow: 0 8px 20px rgba(16, 42, 67, 0.2);
  --action-submit-ring: rgba(246, 197, 21, 0.34);

  --luxury-ink: var(--industrial-ink);
  --luxury-navy: var(--industrial-navy);
  --luxury-navy-soft: var(--industrial-steel);
  --luxury-gold: var(--industrial-yellow);
  --luxury-gold-light: #ffdf54;
  --luxury-ivory: var(--industrial-bg);
  --luxury-paper: var(--industrial-bg);
  --luxury-line: var(--industrial-line);
  --luxury-shadow: var(--industrial-shadow);
  --luxury-border-soft: rgba(16, 42, 67, 0.12);
  --luxury-border: rgba(16, 42, 67, 0.2);
  --luxury-border-strong: rgba(16, 42, 67, 0.34);
  --luxury-hover-surface: #eef2f4;
  --luxury-focus-ring: rgba(246, 197, 21, 0.24);

  --bs-primary: var(--industrial-navy);
  --bs-secondary: var(--industrial-steel);
  --bs-warning: var(--industrial-yellow);
  --bs-body-color: var(--industrial-ink);
  --bs-body-bg: var(--industrial-bg);
  --bs-border-color: var(--industrial-line);
  --bs-link-color: var(--industrial-steel);
  --bs-link-hover-color: var(--industrial-navy);
}

html {
  background: var(--industrial-bg);
}

body {
  background: var(--industrial-bg);
  color: var(--industrial-ink);
  font-family: var(--font-body) !important;
  font-size: 15px;
  line-height: 1.85;
}

body :not(i):not(.bi) {
  font-family: var(--font-body) !important;
  font-synthesis: none;
}

body:not(i):not(.bi) h1,
body:not(i):not(.bi) h2,
body:not(i):not(.bi) h3,
body:not(i):not(.bi) h4,
body:not(i):not(.bi) h5,
body:not(i):not(.bi) h6,
body:not(i):not(.bi) .section-title,
body:not(i):not(.bi) .flow-heading,
body:not(i):not(.bi) .orders-heading {
  font-family: var(--font-heading) !important;
}

body::selection {
  background: var(--industrial-yellow);
  color: var(--industrial-navy);
}

a {
  color: var(--industrial-steel);
}
a:hover {
  color: var(--industrial-navy);
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.flow-heading,
.orders-heading {
  color: var(--industrial-navy);
}

.text-muted,
.page-section p,
.flow-heading p,
.section-head p {
  color: var(--industrial-muted) !important;
}

::placeholder {
  color: #5d6a73 !important;
  opacity: 1;
}

:focus-visible {
  outline: 3px solid rgba(201, 157, 0, 0.72);
  outline-offset: 2px;
}

/* Navigation */
.home-page #mainNav,
.home-page #mainNav.scrolled {
  border-bottom-color: var(--industrial-yellow) !important;
}

@media (min-width: 992px) {
  .home-page #mainNav,
  .home-page #mainNav.scrolled {
    height: 164px !important;
    background: linear-gradient(
      to bottom,
      #e1e4e7 0 85px,
      var(--industrial-navy) 85px 100%
    ) !important;
    border-bottom: 3px solid var(--industrial-yellow) !important;
    box-shadow: 0 10px 28px rgba(16, 42, 67, 0.14) !important;
  }

  .home-page #mainNav::before {
    display: none;
  }

  .home-page .hero {
    padding-top: 172px;
  }

  .home-page #mainNav > .container {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100% !important;
    max-width: none !important;
    height: 78px;
    padding-right: max(28px, calc((100% - 1480px) / 2)) !important;
    padding-left: max(28px, calc((100% - 1480px) / 2)) !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
  }

  .home-page #mainNav .home-nav-groups {
    position: absolute;
    inset: 0 max(28px, calc((100% - 1480px) / 2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    direction: rtl;
  }

  .home-page #mainNav .home-header-top {
    z-index: 2;
  }

  .home-page #mainNav .home-nav-menu-group,
  .home-page #mainNav .home-nav-action-group {
    display: flex;
    height: 100%;
    align-items: center;
  }

  .home-page #mainNav .collapse {
    position: static;
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
    height: 100%;
    margin: 0 !important;
    justify-content: flex-start;
    align-items: center;
  }

  .home-page #mainNav .navbar-nav {
    width: max-content;
    height: 56px;
    padding: 3px 6px;
    margin: 0 !important;
    flex-direction: row;
    direction: rtl;
    align-items: center;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
  }

  .home-page #mainNav .navbar-brand {
    right: max(28px, calc((100% - 1480px) / 2));
    color: var(--industrial-navy) !important;
  }

  .home-page #mainNav .navbar-brand > span {
    border: 0 !important;
    background: var(--industrial-yellow) !important;
    color: var(--industrial-navy) !important;
  }

  .home-page #mainNav .nav-link {
    display: flex;
    width: auto;
    height: 46px;
    min-height: 46px;
    padding: 0 14px !important;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.86) !important;
    line-height: 1.2;
    white-space: nowrap;
  }

  .home-page #mainNav .nav-link:hover,
  .home-page #mainNav .nav-link.active,
  .home-page #mainNav .dropdown.show > .nav-link {
    border-color: rgba(246, 197, 21, 0.28);
    background: rgba(246, 197, 21, 0.1);
    color: var(--industrial-yellow) !important;
  }

  .home-page #mainNav .nav-link::after {
    background: var(--industrial-yellow) !important;
  }

  .home-page #mainNav .navbar-nav > .nav-item:first-child > .nav-link::after {
    display: none;
  }

  .home-page #mainNav .brand-dropdown > .nav-link::after {
    display: none !important;
  }

  .home-page #mainNav .nav-tools {
    position: relative;
    display: flex;
    width: max-content;
    height: 100%;
    align-items: center;
    gap: 10px;
    color: #fff !important;
  }

  .home-page #mainNav .nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .home-page #mainNav .account-wrap {
    position: absolute;
    top: -64px;
    left: 0;
    z-index: 8;
    padding: 0;
    margin: 0;
    border: 0;
  }

  .home-page #mainNav .account-btn {
    display: flex;
    min-width: 142px;
    height: 46px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-color: #d6dfe4 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: var(--industrial-navy) !important;
    box-shadow: 0 5px 16px rgba(16, 42, 67, 0.08) !important;
  }

  .home-page #mainNav .account-btn > .bi-person {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    place-items: center;
    font-size: 20px !important;
    line-height: 1;
  }

  .home-page #mainNav .account-btn > .account-label {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    white-space: nowrap;
  }

  .home-page #mainNav .account-btn > .bi-chevron-down {
    display: grid;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    place-items: center;
    line-height: 1;
  }

  .home-page #mainNav .account-btn:hover {
    border-color: var(--industrial-yellow) !important;
    background: #fffbea !important;
  }

  .home-header-search {
    overflow: hidden;
    height: 54px;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    border-color: var(--industrial-line) !important;
    border-radius: 8px;
    background: #f7f9fa !important;
  }

  .home-header-search button {
    background: var(--industrial-yellow) !important;
    color: var(--industrial-navy) !important;
  }

  .home-header-search > span {
    display: none !important;
  }

  .home-header-support-icon,
  .home-header-welcome-icon {
    border-color: #cfd8dd !important;
    background: #f7f9fa;
    color: var(--industrial-navy) !important;
  }
}

.inner-page #mainNav,
.inner-page #mainNav.scrolled,
.inner-nav,
.search-header {
  border-bottom: 3px solid var(--industrial-yellow) !important;
  background: var(--industrial-navy) !important;
  box-shadow: 0 8px 24px rgba(16, 42, 67, 0.18) !important;
}

.inner-page #mainNav .brand,
.inner-page #mainNav .nav-link,
.inner-nav .brand,
.inner-nav .nav-link {
  color: #fff !important;
  text-shadow: none !important;
}

#mainNav .nav-menu-icon {
  margin: 0 !important;
  color: #ffdf54 !important;
  font-size: 15px;
  line-height: 1;
  flex: none;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.home-page
  #mainNav
  .navbar-nav
  > .nav-item:first-child
  > .nav-link
  .nav-menu-icon {
  color: #ffd52f !important;
  font-size: 17px;
  filter: drop-shadow(0 0 4px rgba(246, 197, 21, 0.32));
}

#mainNav .nav-link {
  gap: 7px;
}

#mainNav .nav-link:is(:hover, .active) .nav-menu-icon,
#mainNav .dropdown.show > .nav-link .nav-menu-icon {
  color: #fff2a8 !important;
  transform: scale(1.06);
}

.home-page
  #mainNav
  .navbar-nav
  > .nav-item:first-child
  > .nav-link:is(:hover, .active, :focus-visible) {
  border-color: rgba(255, 223, 84, 0.72) !important;
  background: var(--industrial-yellow) !important;
  color: var(--industrial-navy) !important;
  box-shadow: 0 4px 14px rgba(246, 197, 21, 0.28);
}

.home-page
  #mainNav
  .navbar-nav
  > .nav-item:first-child
  > .nav-link:is(:hover, .active, :focus-visible)
  .nav-menu-icon {
  color: var(--industrial-navy) !important;
  filter: none;
  transform: scale(1.12);
}

#mainNav .nav-shortcut {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  flex: none;
  place-items: center;
  border: 1px solid #d8dee5;
  border-radius: 9px;
  background: #fff;
  color: var(--industrial-navy) !important;
  box-shadow: 0 2px 8px rgba(4, 17, 30, 0.05);
  text-decoration: none;
  transition:
    border-color 0.2s,
    background-color 0.3s ease,
    color 0.2s,
    transform 0.2s,
    box-shadow 0.3s ease;
}

.inner-page #mainNav .category-nav-dropdown {
  position: static;
}

.inner-page #mainNav .category-nav-mega {
  position: absolute;
  top: calc(100% - 2px);
  z-index: 1050;
  right: max(24px, calc((100% - 1480px) / 2));
  left: max(24px, calc((100% - 1480px) / 2));
  display: none;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 0;
  width: auto;
  min-height: 420px;
  padding: 0;
  margin: 0;
  border: 1px solid #e1e7e9;
  border-top: 3px solid #edc52b;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 38px rgba(23, 41, 51, 0.2);
  white-space: normal;
  overflow: hidden;
}

.inner-page #mainNav .category-nav-dropdown.show > .category-nav-mega {
  display: grid;
}

.inner-page #mainNav .category-nav-dropdown.is-mega-open > .category-nav-mega {
  display: grid;
}

.inner-page #mainNav .category-mega-sidebar {
  display: flex;
  padding: 10px 0;
  flex-direction: column;
  border-left: 1px solid #e7e0d6;
  background: #f8f5ef;
}

.inner-page #mainNav .category-mega-sidebar > button {
  display: grid;
  min-height: 41px;
  padding: 0 20px;
  grid-template-columns: 30px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-top: 1px solid #edf0f2;
  border-radius: 0;
  background: transparent;
  color: #3f4a51;
  font-family: inherit;
  font-size: 12px;
  font-weight: 650;
  text-align: right;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.inner-page #mainNav .category-mega-sidebar > button > i:first-child {
  color: #f3d34b;
  font-size: 19px;
  text-align: center;
}

.inner-page #mainNav .category-mega-sidebar > button > i:last-child {
  color: #9aa4aa;
  font-size: 10px;
}

.inner-page
  #mainNav
  .category-mega-sidebar
  > button:is(:hover, :focus-visible, .active) {
  border-radius: 4px;
  outline: 0;
  background: #fff7d6;
  color: #202a33;
  box-shadow: inset -3px 0 #e8bd24;
}

.inner-page #mainNav .category-mega-sidebar > button.active {
  box-shadow: inset -3px 0 #e8bd24;
}

.inner-page #mainNav .category-mega-content {
  display: flex;
  min-width: 0;
  padding: 25px 28px 17px;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
}

.inner-page #mainNav .category-mega-panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-content: start;
}

.inner-page #mainNav .category-mega-hint {
  grid-column: 1 / -1;
  margin: 12px 0;
  color: #788799;
  font-size: 13px;
}

@media (min-width: 992px) {
  .inner-page
    #mainNav
    .category-nav-dropdown:is(:hover, :focus-within, .is-mega-open)
    > .category-nav-mega {
    display: grid;
  }

  .inner-page #mainNav .category-nav-dropdown > .nav-link.dropdown-toggle {
    text-decoration: none !important;
  }

  .inner-page
    #mainNav
    .category-nav-dropdown
    > .nav-link.dropdown-toggle::after {
    position: static;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0 0.35rem 0 0;
    border-top: 0.3em solid currentColor;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    border-radius: 0;
    background: none;
    transform: none;
  }

  .inner-page
    #mainNav
    .category-nav-dropdown
    > .nav-link.dropdown-toggle::before {
    position: absolute;
    right: 14px;
    bottom: 7px;
    left: 14px;
    height: 2px;
    border-radius: 999px;
    background: var(--industrial-yellow);
    content: "";
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.22s ease;
  }

  .inner-page
    #mainNav
    .category-nav-dropdown:is(:hover, :focus-within, .show)
    > .nav-link.dropdown-toggle::before {
    transform: scaleX(1);
  }
}

.inner-page #mainNav .category-mega-group {
  position: relative;
  display: grid;
  align-content: start;
  gap: 11px;
  min-width: 0;
  padding: 0 20px;
  border-bottom: 0;
  border-right: 0;
}

.inner-page #mainNav .category-mega-group:not(:first-child) {
  border-right: 1px solid #edf0f2;
}

.inner-page #mainNav .category-mega-group > a:not(.category-mega-title) {
  display: flex;
  min-height: 34px;
  padding: 6px 10px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #687887;
  font-size: 13px;
  text-decoration: none;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.inner-page
  #mainNav
  .category-mega-group
  > a:not(.category-mega-title):is(:hover, :focus-visible) {
  border-color: rgba(185, 145, 87, 0.42);
  background: #fffaf1;
  color: var(--industrial-navy);
  box-shadow: 0 3px 10px rgba(16, 42, 67, 0.07);
  transform: translateX(-2px);
}

.inner-page
  #mainNav
  .category-mega-group
  > a:not(.category-mega-title):focus-visible {
  outline: 2px solid rgba(185, 145, 87, 0.55);
  outline-offset: 2px;
}

.inner-page #mainNav .category-mega-group > .category-mega-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 3px;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--industrial-navy);
  font-size: 14px;
  font-weight: 750;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.inner-page
  #mainNav
  .category-mega-group
  > .category-mega-title:is(:hover, :focus-visible) {
  color: #765900;
}

.inner-page #mainNav .category-mega-all {
  display: inline-flex;
  width: fit-content;
  margin-top: 18px;
  padding: 9px 13px;
  align-items: center;
  gap: 8px;
  border: 1px solid #e7dcc2;
  border-radius: 9px;
  color: #173867;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.inner-page #mainNav .category-mega-all:hover {
  background: #fff8e6;
  border-color: #d6b15b;
}

.inner-page #mainNav .category-mega-title i {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid rgba(184, 132, 0, 0.3);
  border-radius: 10px;
  background: linear-gradient(145deg, #fff7d4, #ffe28a);
  color: #8b6100;
  font-size: 17px;
  box-shadow:
    0 3px 9px rgba(160, 116, 0, 0.12),
    inset 0 1px rgba(255, 255, 255, 0.9);
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.inner-page
  #mainNav
  .category-mega-group
  > .category-mega-title:is(:hover, :focus-visible)
  i {
  transform: translateY(-1px) scale(1.05);
  border-color: rgba(173, 123, 0, 0.5);
  background: linear-gradient(145deg, #ffdf63, #f6c515);
  color: #102a56;
  box-shadow:
    0 5px 13px rgba(166, 123, 0, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.7);
}

.inner-page #mainNav .category-nav-dropdown > .nav-link .nav-menu-icon {
  color: #ffd21f !important;
  filter: drop-shadow(0 0 5px rgba(246, 197, 21, 0.42));
}

@media (max-width: 991.98px) {
  .inner-page #mainNav .category-nav-mega {
    display: none !important;
  }
}

#mainNav .compare-wrap {
  position: relative;
  display: flex;
  flex: 0 0 auto;
}

#mainNav .favorites-wrap {
  position: relative;
  display: flex;
  flex: 0 0 auto;
}

#mainNav .compare-toggle {
  padding: 0;
  font: inherit;
  cursor: pointer;
}

#mainNav .nav-actions {
  display: flex;
  align-items: center;
  gap: 13px !important;
}

#mainNav .nav-shortcut > i,
#mainNav .cart-btn.cart-icon-theme > i {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  font-size: 20px !important;
  line-height: 1;
  transform: translateY(2px);
}

#mainNav .nav-count,
#mainNav .cart-btn.cart-icon-theme > b {
  position: absolute;
  top: -10px;
  right: -7px;
  display: grid;
  min-width: 24px;
  height: 24px;
  padding: 0 3px;
  place-items: center;
  border: 2px solid var(--industrial-navy);
  border-radius: 999px;
  background: var(--industrial-yellow);
  color: var(--industrial-navy);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(16, 42, 67, 0.2);
}

@media (max-width: 767px) {
  #mainNav .cart-btn.cart-icon-theme > b {
    top: -9px;
    right: -6px;
    width: 24px;
    height: 24px;
    left: auto;
    bottom: auto;
  }
}

#mainNav .nav-shortcut:hover {
  transform: translateY(-1px);
  border-color: var(--industrial-yellow);
  color: var(--industrial-yellow-dark) !important;
}

#mainNav .cart-btn.cart-icon-theme:hover,
#mainNav .cart-wrap.open .cart-btn.cart-icon-theme {
  transform: translateY(-1px);
  border-color: var(--industrial-yellow) !important;
  background-color: #fff8d9 !important;
  color: var(--industrial-yellow-dark) !important;
  box-shadow: 0 3px 10px rgba(16, 42, 67, 0.12);
}

.inner-page #mainNav .nav-link:hover,
.inner-page #mainNav .nav-link.active,
.inner-nav .nav-link:hover,
.inner-nav .nav-link.active {
  color: var(--industrial-yellow) !important;
}

.brand > span,
.search-brand > span,
.footer-logo > span,
.login-brand > span {
  border-color: var(--industrial-navy) !important;
  background: var(--industrial-navy) !important;
  color: var(--industrial-yellow) !important;
  box-shadow: none !important;
}

.navbar-toggler,
.page-menu-toggle {
  border-color: var(--industrial-line) !important;
  background: #fff !important;
  color: var(--industrial-navy) !important;
}

/* Page heroes */
.inner-page .page-hero {
  border-bottom: 4px solid var(--industrial-yellow);
  background-color: var(--industrial-navy);
}

.inner-page .page-hero::before {
  background: linear-gradient(
    90deg,
    rgba(16, 42, 67, 0.94),
    rgba(16, 42, 67, 0.62),
    rgba(16, 42, 67, 0.28)
  ) !important;
}

.inner-page .page-hero :is(h1, h2, p, .hero-trail, .page-kicker) {
  color: #fff;
}

.inner-page .page-hero :is(em, .page-kicker, i) {
  color: var(--industrial-yellow) !important;
}

.hero-trail span,
.breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.68) !important;
}

/* Sections and surfaces */
.page-section,
.flow-main,
.journal-page,
.article-page,
.profile-edit-page,
.search-main {
  background-color: var(--industrial-bg);
}

.search-intro {
  background-image:
    linear-gradient(90deg, rgba(16, 42, 67, 0.3), rgba(16, 42, 67, 0.93)),
    url("../../images/heroes/hero-electrical-editorial.png") !important;
  background-position: center !important;
  background-size: cover !important;
}

.inner-page
  :is(.page-hero, .search-intro)
  :is(h1, h2, h3, p, .hero-trail, .page-kicker, .search-kicker) {
  color: #fff !important;
}

.inner-page .search-intro h1 em,
.inner-page .search-intro .search-kicker,
.inner-page .page-hero :is(em, .page-kicker, i) {
  color: #ffdf54 !important;
}

.inner-page .search-intro p {
  color: rgba(255, 255, 255, 0.92) !important;
}

.page-section[style] {
  background: var(--industrial-bg) !important;
}

.inner-page .filter-panel {
  border-color: var(--industrial-line) !important;
  background: #fff !important;
  color: var(--industrial-ink) !important;
  box-shadow: var(--industrial-shadow) !important;
}

.inner-page .filter-panel .text-muted {
  color: var(--industrial-muted) !important;
}

.inner-page .filter-group {
  border-color: var(--industrial-line) !important;
  background: #fff !important;
}

.inner-page .filter-group-arrow {
  border-color: var(--industrial-line) !important;
  background: var(--industrial-bg) !important;
  color: var(--industrial-steel) !important;
}

.inner-page .filter-option:not(.active):not(:hover) {
  border-color: var(--industrial-line) !important;
  background: var(--industrial-bg) !important;
  color: var(--industrial-steel) !important;
}

.inner-page .search-product-image,
.inner-page .product-image {
  border-color: var(--industrial-line) !important;
  background-color: #fff !important;
}

:is(
  .flow-card,
  .contact-form,
  .contact-info-card,
  .branch-card,
  .faq-item,
  .tracking-card,
  .shipping-card,
  .warranty-card,
  .invoice-card,
  .checkout-card,
  .address-card,
  .journal-card,
  .article-card,
  .brand-card,
  .gallery-card,
  .filter-card,
  .summary-card,
  .cart-summary,
  .product-details-card
) {
  border-color: var(--industrial-line) !important;
  background: var(--industrial-surface) !important;
  box-shadow: var(--industrial-shadow) !important;
}

:is(
  .branch-card,
  .journal-card,
  .brand-card,
  .gallery-card,
  .address-card
):hover {
  border-color: var(--industrial-yellow) !important;
  box-shadow: var(--industrial-shadow-hover) !important;
}

.ui-surface-card,
.product-card,
.service-card,
.benefit,
.store-card,
.testimonial-card {
  border-color: var(--industrial-line) !important;
  background: #fff !important;
  box-shadow: var(--industrial-shadow) !important;
}

.ui-surface-card--interactive:hover,
.product-card:hover,
.service-card:hover,
.store-card:hover {
  border-color: var(--industrial-yellow) !important;
  box-shadow: var(--industrial-shadow-hover) !important;
}

/* Buttons and actions */
:is(
  .btn-primary,
  .contact-submit,
  .form-confirm-accept,
  .checkout-submit,
  .tracking-submit,
  .profile-save,
  .add-cart,
  .page-cta a,
  .featured-buy button
) {
  border-color: var(--industrial-yellow) !important;
  background: var(--industrial-yellow) !important;
  color: var(--industrial-navy) !important;
  box-shadow: 0 8px 18px rgba(201, 157, 0, 0.2) !important;
}

:is(
  .btn-primary,
  .contact-submit,
  .form-confirm-accept,
  .checkout-submit,
  .tracking-submit,
  .profile-save,
  .add-cart,
  .page-cta a,
  .featured-buy button
):hover {
  border-color: var(--industrial-navy) !important;
  background: var(--industrial-navy) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

:is(
  .btn-warning,
  .badge-best,
  .featured-badge,
  .discount-badge
) {
  border-color: var(--industrial-yellow) !important;
  background: var(--industrial-yellow) !important;
  color: var(--industrial-navy) !important;
}

:is(.btn-outline-primary, .ui-inline-action, .quick, .page-action) {
  border-color: var(--industrial-navy) !important;
  background: #fff !important;
  color: var(--industrial-navy) !important;
}

:is(.btn-outline-primary, .ui-inline-action, .quick, .page-action):hover {
  border-color: var(--industrial-navy) !important;
  background: var(--industrial-navy) !important;
  color: #fff !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(246, 197, 21, 0.48) !important;
  outline-offset: 2px;
}

/* Forms */
:is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not(
    [type="range"]
  ) {
  border-color: var(--industrial-line) !important;
  background-color: #fff !important;
  color: var(--industrial-ink) !important;
}

:is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not(
    [type="range"]
  ):focus {
  border-color: var(--industrial-steel) !important;
  box-shadow: 0 0 0 4px rgba(36, 59, 83, 0.1) !important;
}

label {
  color: var(--industrial-steel);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--industrial-yellow-dark);
}

/* Product catalogue */
.product-image,
.product-gallery,
.product-media {
  background: #edf2f4 !important;
}

.product-info h3,
.product-title,
.product-card h3 {
  color: var(--industrial-navy) !important;
}

.product-info > p,
.product-price,
.price-current {
  color: var(--industrial-navy) !important;
}

.product-info small,
.price-old,
.product-meta {
  color: var(--industrial-muted) !important;
}

/* Keep the cart glyph legible on the yellow special-offer buttons. */
.category-showcase .showcase-card-body .add-cart > i {
  color: var(--industrial-yellow) !important;
  opacity: 1;
}

.category-showcase
  .showcase-card-body
  .add-cart:is(:hover, :focus-visible, .added)
  > i {
  color: var(--industrial-navy) !important;
}

/* One image height across every product-card layout and viewport. */
.product-card .product-image,
.search-product .search-product-image,
.showcase-card .product-image,
.rail-card .rail-image {
  height: var(--product-card-image-height) !important;
  min-height: var(--product-card-image-height) !important;
  max-height: var(--product-card-image-height) !important;
}

.product-card .product-image > img,
.search-product .search-product-image img,
.showcase-card .product-image img,
.rail-card .rail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compare-trigger {
  display: grid;
  place-items: center;
  width: 40px !important;
  height: 40px !important;
  border: 1px solid var(--industrial-line) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--industrial-navy) !important;
  box-shadow: 0 5px 16px rgba(16, 42, 67, 0.18) !important;
  cursor: pointer;
}

.compare-trigger:hover,
.compare-trigger:focus-visible,
.compare-trigger.active {
  border-color: var(--industrial-yellow) !important;
  background: var(--industrial-yellow) !important;
  color: var(--industrial-navy) !important;
}

#loginModal .login-auth-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 12px;
  padding: 5px;
  border: 1px solid #dce4ea;
  border-radius: 15px;
  background: linear-gradient(135deg, #f4f7f9, #e9eff3);
  box-shadow: inset 0 2px 5px rgba(16, 42, 67, 0.06);
}

#loginModal .login-auth-tabs button {
  position: relative;
  overflow: hidden;
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--industrial-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

#loginModal .login-auth-tabs button::before {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  content: "";
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

#loginModal .login-auth-tabs button.active {
  border-color: rgba(246, 197, 21, 0.62);
  background: linear-gradient(135deg, #173a58 0%, #102a43 68%, #0b2035 100%);
  color: #fff;
  box-shadow:
    0 5px 13px rgba(16, 42, 67, 0.24),
    inset 0 1px rgba(255, 255, 255, 0.12);
}

#loginModal .login-auth-tabs button.active::before {
  border: 4px solid var(--industrial-yellow);
  background: #fff;
  box-shadow:
    0 0 0 2px rgba(246, 197, 21, 0.23),
    0 0 10px rgba(246, 197, 21, 0.38);
}

#loginModal .register-name-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#loginModal .register-name-row label {
  min-width: 0;
}

#loginModal .register-name-row .login-input {
  gap: 7px;
  padding-inline: 9px;
}

#loginModal .register-name-row .login-input input {
  padding-inline: 4px;
  direction: rtl;
  text-align: right;
}

#loginModal .register-name-row .login-input i {
  font-size: 16px;
}

#loginModal .login-auth-tabs button:focus-visible {
  outline: 2px solid var(--industrial-yellow-dark);
  outline-offset: 2px;
}

#loginModal .register-name-row input {
  direction: rtl;
  text-align: right;
}

#loginModal #loginEmail,
#loginModal #registerEmail {
  direction: ltr;
  text-align: left;
}

#loginModal .login-demo-note {
  display: flex;
  gap: 7px;
  margin: -5px 0 10px;
  padding: 7px 10px;
  align-items: flex-start;
  border: 1px solid rgba(185, 143, 0, 0.22);
  border-radius: 10px;
  background: #fff8df;
  color: #695412;
  font-size: 11px;
  line-height: 1.55;
}

#loginModal .login-demo-note i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #9a7400;
}

#loginModal .otp-input {
  width: 100%;
  height: 48px;
  border: 1px solid var(--industrial-line);
  border-radius: 11px;
  background: #fff;
  color: var(--industrial-navy);
  direction: ltr;
  font-family: var(--font-latin);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.55rem;
  text-align: center;
}

#loginModal .otp-input:focus {
  border-color: var(--industrial-yellow-dark);
  outline: 3px solid rgba(246, 197, 21, 0.2);
}

@media (max-width: 575px) {
  #loginModal .register-name-row {
    gap: 8px;
  }

  #loginModal .register-name-row .login-input {
    padding-inline: 7px;
  }
}

/* Keep every login step inside the viewport without an inner scrollbar. */
#loginModal .modal-dialog {
  width: min(440px, calc(100vw - 24px));
  max-width: none;
  margin: 12px auto;
}

#loginModal .modal-content {
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  padding: 18px 24px 16px;
}

#loginModal .login-brand {
  padding-bottom: 10px;
}

#loginModal .login-step {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding-top: 12px !important;
}

#loginModal .login-step[hidden] {
  display: none !important;
}

#loginModal .login-step h2 {
  margin-bottom: 5px;
  font-size: 21px;
}

#loginModal .login-step > p {
  margin-bottom: 18px;
  color: #526477;
  font-size: 14px;
  line-height: 1.85;
  text-wrap: pretty;
  white-space: normal;
}

#loginModal .login-step form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

#loginModal .login-step label {
  margin-bottom: 5px;
  font-size: 13px;
}

#loginModal .login-input input {
  height: 44px;
}

#loginModal .login-step form > button {
  height: 45px;
  flex: 0 0 auto;
  margin-top: auto;
  padding-block: 10px;
}

#loginModal .login-step form > label,
#loginModal .login-step form > .register-name-row {
  margin-bottom: 8px;
}

#loginModal .login-forgot-link {
  align-self: flex-start;
  margin: 7px 0 5px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: #315a78;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(49, 90, 120, 0.35);
  text-underline-offset: 3px;
  cursor: pointer;
}

#loginModal .login-forgot-link:hover,
#loginModal .login-forgot-link:focus-visible {
  color: #a87800;
  text-decoration-color: currentColor;
}

#loginModal .login-step form > .login-error {
  flex: 0 0 auto;
}

#loginModal .login-error {
  min-height: 15px;
  margin: 4px 0 0;
}

#loginModal .login-back {
  padding-bottom: 4px;
}

@media (max-width: 575px) {
  #loginModal .modal-dialog {
    width: calc(100vw - 20px);
    margin: 10px auto;
  }

  #loginModal .modal-content {
    max-height: calc(100dvh - 20px);
    padding: 15px 16px 13px;
  }

  #loginModal .login-brand {
    padding-bottom: 7px;
  }

  #loginModal .login-brand img,
  #loginModal .login-brand .brand-mark {
    width: 38px;
    height: 38px;
  }

  #loginModal .login-auth-tabs {
    margin-top: 9px;
  }

  #loginModal .login-auth-tabs button {
    min-height: 38px;
  }

  #loginModal .login-step {
    padding-top: 9px !important;
  }

  #loginModal .login-step h2 {
    font-size: 19px;
  }

  #loginModal .login-step > p {
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.7;
  }

  #loginModal .login-input input {
    height: 40px;
  }

  #loginModal .login-step form > button {
    height: 41px;
    margin-top: auto;
  }

  #loginModal .login-demo-note {
    margin-bottom: 7px;
    padding: 6px 8px;
    font-size: 10px;
    line-height: 1.45;
  }

  #loginModal .otp-input {
    height: 42px;
  }
}

@media (max-height: 640px) {
  #loginModal .modal-dialog {
    margin-top: 6px;
    margin-bottom: 6px;
  }

  #loginModal .modal-content {
    max-height: calc(100dvh - 12px);
    padding-top: 10px;
    padding-bottom: 9px;
  }

  #loginModal .login-brand {
    padding-bottom: 4px;
  }

  #loginModal .login-brand img,
  #loginModal .login-brand .brand-mark {
    width: 34px;
    height: 34px;
  }

  #loginModal .login-auth-tabs {
    margin-top: 6px;
  }

  #loginModal .login-auth-tabs button {
    min-height: 32px;
  }

  #loginModal .login-step {
    padding-top: 6px !important;
  }

  #loginModal .login-step > p {
    margin-bottom: 6px;
    line-height: 1.45;
  }

  #loginModal .login-step label {
    margin-bottom: 3px;
  }

  #loginModal .login-input input {
    height: 36px;
  }

  #loginModal .login-step form > button {
    height: 38px;
    margin-top: 4px;
  }

  #loginModal .login-demo-note {
    margin-bottom: 5px;
    padding: 4px 7px;
  }
}

@media (min-width: 1200px) {
  .inner-page .product-results {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1480px) {
  .inner-page .product-results {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.favorite {
  border-color: var(--industrial-line) !important;
  background: #fff !important;
  color: var(--industrial-steel) !important;
}

.favorite:hover,
.favorite.active {
  border-color: var(--industrial-danger) !important;
  color: var(--industrial-danger) !important;
}

.category-filter button.active,
.catalogue-filter button.active,
.account-nav a.active,
.pagination .active > * {
  border-color: var(--industrial-navy) !important;
  background: var(--industrial-navy) !important;
  color: #fff !important;
}

/* Status colors */
.status-success,
.in-stock,
.order-status.success,
.contact-form-status:not(.is-error) {
  color: var(--industrial-success) !important;
}

.status-danger,
.out-of-stock,
.validation-summary-errors,
.field-validation-error,
.contact-form-status.is-error {
  color: var(--industrial-danger) !important;
}

/* Shared manual validation and focus treatment across storefront forms. */
form input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
form select,
form textarea {
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

form
  input:not([type="radio"]):not([type="checkbox"]):not(
    [type="hidden"]
  ):focus-visible,
form select:focus-visible,
form textarea:focus-visible {
  border-color: var(--industrial-yellow-dark) !important;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(246, 197, 21, 0.2) !important;
}

form input.is-invalid:not([type="radio"]):not([type="checkbox"]),
form select.is-invalid,
form textarea.is-invalid {
  border-color: var(--industrial-danger) !important;
  background-color: #fffafa !important;
  box-shadow: 0 0 0 3px rgba(185, 73, 73, 0.1) !important;
}

form input[type="radio"].is-invalid,
form input[type="checkbox"].is-invalid {
  outline: 2px solid var(--industrial-danger);
  outline-offset: 2px;
}

form .form-field-error {
  display: block;
  margin: 5px 0 0;
  color: var(--industrial-danger);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.7;
}

form .form-field-error[hidden] {
  display: none;
}

.contact-form-status:not(.is-error) > i {
  background: var(--industrial-success) !important;
}
.contact-form-status.is-error > i {
  background: var(--industrial-danger) !important;
}

/* Account, cart and modal panels */
.account-panel,
.cart-panel,
.login-modal-content,
.search-modal-content,
.page-menu-drawer {
  border-color: var(--industrial-line) !important;
  background: #fff !important;
  color: var(--industrial-ink) !important;
  box-shadow: 0 24px 60px rgba(16, 42, 67, 0.2) !important;
}

.account-links a:hover,
.cart-item:hover,
.page-menu-drawer nav a:hover {
  background: #edf2f4 !important;
  color: var(--industrial-navy) !important;
}

.account-avatar,
.ui-icon-tile,
.branch-icon,
.service-icon,
.contact-icon,
.order-product-icon {
  border-color: var(--industrial-icon-border) !important;
  background: var(--industrial-icon-surface) !important;
  color: var(--industrial-icon-ink) !important;
}

.compare-category-icon {
  border-color: var(--industrial-icon-accent-border) !important;
  background: var(--industrial-icon-accent-surface) !important;
  color: var(--industrial-icon-accent-ink) !important;
}

/* Tables, separators and pagination */
table,
thead,
tbody,
tr,
th,
td,
.accordion-item,
.list-group-item {
  border-color: var(--industrial-line) !important;
}

thead,
.table-light > * > * {
  background: #edf2f4 !important;
  color: var(--industrial-navy) !important;
}

.pagination a,
.pagination button,
.page-link {
  border-color: var(--industrial-line) !important;
  background: #fff !important;
  color: var(--industrial-steel) !important;
}

.pagination a:hover,
.pagination button:hover,
.page-link:hover {
  border-color: var(--industrial-yellow) !important;
  color: var(--industrial-navy) !important;
}

/* Calls to action */
.page-cta,
.journal-connect,
.featured-products {
  background: linear-gradient(
    135deg,
    var(--industrial-navy),
    #173d5c
  ) !important;
  color: #fff;
}

.page-cta :is(h2, h3, p),
.journal-connect :is(h2, h3, p),
.featured-products :is(h2, h3, p) {
  color: #fff !important;
}

.featured-products .featured-side-content h3 {
  color: var(--industrial-navy) !important;
}

.featured-products .featured-side-content p {
  color: var(--industrial-steel) !important;
}

.featured-products .featured-side-content .editor-caption {
  border: 1px solid rgba(184, 137, 0, 0.22);
  background: #fff4cf;
  color: #765900;
}

.featured-products .featured-main::before,
.featured-products .featured-side::before {
  display: none;
}

.recommendations .recommend-head > div > .eyebrow.dark {
  border-color: rgba(16, 35, 61, 0.16) !important;
  background: #fff4cf !important;
  color: var(--industrial-navy) !important;
  box-shadow: 0 5px 14px rgba(16, 35, 61, 0.06);
}

.testimonial-card .quote-mark {
  top: 18px;
  left: 20px;
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #8798a5;
  font-family: Georgia, serif;
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.7;
}

.testimonial-card .quote-mark i {
  display: none;
}

.testimonial-card .quote-mark::before {
  content: "“";
}

.testimonials .reviewer > i {
  color: var(--industrial-success) !important;
}

.page-cta em,
.journal-connect em,
.featured-products em,
.eyebrow,
.page-kicker,
.section-title > span {
  color: var(--industrial-yellow) !important;
}

.contact-panel {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: linear-gradient(
    145deg,
    var(--industrial-steel),
    var(--industrial-navy)
  ) !important;
  color: #fff !important;
}

.contact-panel :is(h2, h3, p, strong, small) {
  color: #fff !important;
}

.contact-panel .page-kicker,
.contact-panel .contact-method > i {
  color: var(--industrial-yellow) !important;
}

.contact-panel .contact-method {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

.contact-panel .contact-method:hover {
  border-color: var(--industrial-yellow) !important;
  background: rgba(246, 197, 21, 0.1) !important;
}

/* Footer */
footer {
  border-top: 5px solid var(--industrial-yellow) !important;
  background: var(--industrial-navy) !important;
  color: rgba(255, 255, 255, 0.76) !important;
}

footer h4,
footer .brand,
footer strong {
  color: #fff !important;
}

footer a {
  color: rgba(255, 255, 255, 0.72) !important;
}
footer a:hover {
  color: var(--industrial-yellow) !important;
}

footer .socials a,
footer .social-placeholder,
footer .trust-badge {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--industrial-yellow) !important;
}

footer .socials a,
footer .socials .social-placeholder {
  transition:
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.22s ease,
    background-color 0.22s ease,
    box-shadow 0.22s ease,
    color 0.22s ease;
}

footer .socials a > i,
footer .socials .social-placeholder > i {
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

footer .socials a:hover,
footer .socials .social-placeholder:hover {
  transform: translateY(-4px) scale(1.08);
  border-color: var(--industrial-yellow) !important;
  background: var(--industrial-yellow) !important;
  color: var(--industrial-navy) !important;
  box-shadow:
    0 8px 20px rgba(246, 197, 21, 0.28),
    0 0 0 3px rgba(246, 197, 21, 0.1) !important;
}

footer .socials a:hover > i,
footer .socials .social-placeholder:hover > i {
  transform: scale(1.12) rotate(-6deg);
}

footer .trust-badges .trust-badge-image {
  display: block;
  flex: 0 0 102px;
  width: 102px;
  height: 102px;
  padding: 5px;
  border: 3px solid #fff;
  border-radius: 7px;
  background: #fff;
  object-fit: contain;
}

.footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.12) !important;
}

.back-to-top {
  border-color: var(--industrial-yellow) !important;
  background: var(--industrial-yellow) !important;
  color: var(--industrial-navy) !important;
}

/* Product labels share one shape and use clear, coordinated status colors. */
:is(.badge-best, .badge-new, .badge-offer) {
  display: inline-flex !important;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 5px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  box-shadow: 0 4px 12px rgba(16, 42, 67, 0.16) !important;
}

.badge-best {
  border-color: var(--industrial-navy) !important;
  background: var(--industrial-navy) !important;
  color: #fff !important;
}

.badge-new {
  border-color: var(--industrial-success) !important;
  background: var(--industrial-success) !important;
  color: #fff !important;
}

.badge-offer {
  border-color: var(--industrial-yellow) !important;
  background: var(--industrial-yellow) !important;
  color: var(--industrial-navy) !important;
}

@media (min-width: 1200px) {
  #productGrid > .product-col {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

/* Responsive consistency */
#mainNav .mobile-header-search {
  display: none;
}

@media (max-width: 991px) {
  #mainNav .mobile-header-search {
    display: none !important;
  }

  #mainNav,
  #mainNav.scrolled,
  .home-page #mainNav,
  .home-page #mainNav.scrolled {
    border-bottom: 3px solid var(--industrial-yellow) !important;
    background: var(--industrial-navy) !important;
  }

  #mainNav .navbar-brand {
    color: #fff !important;
  }

  .home-nav-groups,
  .home-nav-menu-group,
  .home-nav-action-group {
    display: contents !important;
  }

  #mainNav .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--industrial-yellow) !important;
  }

  #mainNav .nav-tools > button,
  #mainNav .nav-tools .account-btn {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
  }

  .mobile-menu,
  .offcanvas,
  .page-menu-drawer {
    background: var(--industrial-navy) !important;
    color: #fff !important;
  }

  .mobile-menu a,
  .mobile-menu button,
  .offcanvas a,
  .offcanvas button {
    color: #fff !important;
  }

  .mobile-menu a:hover,
  .mobile-menu button:hover,
  .offcanvas a:hover,
  .offcanvas button:hover {
    color: var(--industrial-yellow) !important;
  }
}

/* Remove the bright focus outline/ring from fields site-wide, including auth forms. */
:where(input, select, textarea):focus,
:where(input, select, textarea):focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  border-color: var(--industrial-line) !important;
}

:where(
  .login-input,
  .tracking-input,
  .search-box,
  .flow-coupon-entry
):focus-within {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--industrial-line) !important;
}

#loginModal .login-input:focus-within {
  border-color: var(--industrial-line) !important;
  background: #fff !important;
  box-shadow: none !important;
}

#loginModal .login-input input:focus,
#loginModal .login-input input:focus-visible {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Compact the signed-in account menu on smaller screens. */
@media (max-width: 991px) {
  .shared-account-card .account-user {
    min-height: 82px;
    margin-bottom: 4px;
    padding: 10px 12px;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 9px;
  }

  .shared-account-card .account-avatar {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  .shared-account-card .account-links {
    padding-top: 5px;
    padding-bottom: 2px;
    gap: 4px;
  }

  .shared-account-card .account-links a,
  .shared-account-card .account-logout {
    min-height: 44px;
    padding-inline: 9px;
    grid-template-columns: 35px 1fr auto;
    gap: 8px;
    border-radius: 11px;
  }

  .shared-account-card .account-links a > i,
  .shared-account-card .account-logout > i {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 16px;
  }

  .shared-account-card .account-logout {
    margin-top: 2px;
  }
}

@media (max-width: 575px) {
  .shared-account-card .account-user {
    min-height: 76px;
    padding: 8px 10px;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px;
  }

  .shared-account-card .account-avatar {
    width: 40px;
    height: 40px;
  }

  .shared-account-card .account-links a,
  .shared-account-card .account-logout {
    min-height: 42px;
  }

  .shared-account-card .account-links a > i,
  .shared-account-card .account-logout > i {
    width: 30px;
    height: 30px;
  }
}

/* Keep the mobile header actions in one row when desktop flex rules no longer apply. */
@media (max-width: 991px) {
  .home-page #mainNav .nav-tools {
    display: flex !important;
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  .home-page #mainNav .nav-actions {
    display: flex !important;
    height: auto;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 5px;
  }

  .home-page #mainNav .nav-shortcut,
  .home-page #mainNav .cart-wrap {
    flex: 0 0 auto;
  }
}

@media (max-width: 767px) {
  .home-page #mainNav > .container {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
  }

  .home-page #mainNav .navbar-toggler,
  .home-page #mainNav .nav-tools {
    flex: 0 0 auto;
  }

  .shared-account-card.account-panel {
    top: calc(env(safe-area-inset-top) + 86px) !important;
  }
}

/* Keep ordinary form focus states neutral across every page and layout. */
html
  body
  form
  :is(input, select, textarea):not([type="hidden"]):not(.is-invalid):not(
    [aria-invalid="true"]
  ):is(:focus, :focus-visible) {
  border-color: var(--industrial-line) !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

html body .login-input:focus-within,
html body .tracking-input:focus-within,
html body .search-box:focus-within,
html body .flow-coupon-entry:focus-within,
html body .newsletter .subscribe:focus-within {
  border-color: var(--industrial-line) !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body .shared-login-modal .login-input:focus-within {
  border-color: var(--industrial-line) !important;
  background: #fff !important;
  box-shadow: none !important;
}

#loginModal .otp-input:focus,
#loginModal .otp-input:focus-visible {
  border-color: var(--industrial-line) !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

html body .payment-method input:focus-visible ~ .payment-method-icon {
  outline: none !important;
  outline-offset: 0 !important;
}

/* Split welcome panel for the sign-in and registration modal. */
#loginModal .modal-dialog {
  width: min(820px, calc(100vw - 32px));
}

#loginModal .modal-content {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, 0.85fr) minmax(0, 1.15fr);
  max-height: min(680px, calc(100dvh - 32px));
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 24px;
  background: #fbfaf7;
  box-shadow: 0 30px 90px rgba(8, 29, 49, 0.27);
}

#loginModal .modal-content::before {
  content: none;
}

#loginModal .login-modal-promo {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 38px 30px;
  background:
    radial-gradient(
      circle at 8% 12%,
      rgba(246, 197, 21, 0.28),
      transparent 33%
    ),
    linear-gradient(145deg, #183c59 0%, #102a43 57%, #091c30 100%);
  color: #fff;
  isolation: isolate;
}

#loginModal .login-modal-promo::before {
  position: absolute;
  z-index: -1;
  top: -92px;
  right: -105px;
  width: 310px;
  height: 310px;
  border: 1px solid rgba(246, 197, 21, 0.3);
  border-radius: 50%;
  box-shadow:
    0 0 0 24px rgba(246, 197, 21, 0.045),
    0 0 0 50px rgba(255, 255, 255, 0.035);
  content: "";
}

#loginModal .login-modal-promo-mark {
  display: grid;
  width: 54px;
  height: 54px;
  margin-bottom: auto;
  place-items: center;
  border: 1px solid rgba(246, 197, 21, 0.42);
  border-radius: 17px;
  background: rgba(246, 197, 21, 0.13);
  color: var(--industrial-yellow);
  font-size: 24px;
}

#loginModal .login-modal-promo > small {
  margin-bottom: 10px;
  color: var(--industrial-yellow);
  font-size: 12px;
  font-weight: 800;
}

#loginModal .login-modal-promo h2 {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 850;
}

#loginModal .login-modal-promo p {
  max-width: 310px;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  line-height: 2;
}

#loginModal .login-modal-promo-note {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-top: 26px;
  padding-top: 17px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
}

#loginModal .login-modal-promo-note i {
  color: var(--industrial-yellow);
  font-size: 17px;
}

#loginModal .login-modal-form-panel {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  padding: 27px 30px 22px;
  background: #fbfaf7;
}

#loginModal .login-modal-form-panel .login-brand {
  padding: 0 0 14px;
}

#loginModal .login-modal-form-panel .login-auth-tabs {
  flex: 0 0 auto;
}

#loginModal .login-modal-form-panel .login-step {
  flex: 1 0 auto;
}

#loginModal > .modal-dialog > .modal-content > .login-close {
  position: absolute;
  z-index: 3;
  top: 18px;
  left: 18px;
  box-shadow: 0 4px 14px rgba(16, 42, 67, 0.1);
}

@media (max-width: 640px) {
  #loginModal .modal-dialog {
    width: calc(100vw - 20px);
    margin: 10px auto;
  }

  #loginModal .modal-content {
    display: flex;
    max-height: calc(100dvh - 20px);
    flex-direction: column;
    border-radius: 20px;
  }

  #loginModal .login-modal-promo {
    min-height: 116px;
    flex: 0 0 116px;
    justify-content: center;
    padding: 17px 64px 16px 19px;
  }

  #loginModal .login-modal-promo-mark,
  #loginModal .login-modal-promo-note {
    display: none;
  }

  #loginModal .login-modal-promo > small {
    margin-bottom: 3px;
    font-size: 10px;
  }

  #loginModal .login-modal-promo h2 {
    margin-bottom: 2px;
    font-size: 22px;
  }

  #loginModal .login-modal-promo p {
    max-width: 100%;
    font-size: 11px;
    line-height: 1.65;
  }

  #loginModal .login-modal-form-panel {
    min-height: 0;
    flex: 1 1 auto;
    padding: 26px 18px 18px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  #loginModal > .modal-dialog > .modal-content > .login-close {
    top: 10px;
    left: 12px;
    background: #102a43 !important;
    color: var(--industrial-yellow) !important;
    box-shadow: 0 4px 14px rgba(16, 42, 67, 0.2) !important;
  }
}

/* Reusable shop-service strip shared by shopping and product pages. */
.purchase-benefits--showcase {
  margin-block: 34px;
  padding-block: 32px;
  border: 1px solid rgba(20, 46, 81, 0.08);
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 8% 12%,
      rgba(246, 197, 21, 0.12),
      transparent 30%
    ),
    linear-gradient(115deg, #f7f9fb 0%, #f4f6f8 58%, #fbfaf6 100%);
}

.purchase-benefits--showcase .benefit-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.purchase-benefits--showcase .benefits-intro {
  display: flex;
  min-width: 0;
  grid-column: 1 / -1;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 4px 4px;
}

.purchase-benefits--showcase .benefits-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  color: var(--industrial-yellow-dark);
  font-size: 11px;
  font-weight: 800;
}

.purchase-benefits--showcase .benefits-kicker i {
  color: var(--industrial-yellow-dark);
}

.purchase-benefits--showcase .benefits-intro h2 {
  margin: 0;
  color: var(--industrial-navy);
  font-size: clamp(22px, 2vw, 29px);
  font-weight: 850;
  line-height: 1.6;
}

.purchase-benefits--showcase .benefits-intro h2 em {
  color: var(--industrial-yellow-dark);
  font-style: normal;
}

.purchase-benefits--showcase .benefits-intro p {
  max-width: 340px;
  margin: 0;
  color: var(--industrial-muted);
  font-size: 13px;
  line-height: 1.9;
}

.purchase-benefits--showcase .benefit {
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
  min-height: 166px;
  padding: 20px 16px;
  border: 1px solid #e0e5e9 !important;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 22px rgba(16, 42, 67, 0.06);
  text-align: center;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.purchase-benefits--showcase .benefit:hover {
  transform: translateY(-3px);
  border-color: rgba(195, 151, 39, 0.52) !important;
  box-shadow: 0 10px 22px rgba(16, 42, 67, 0.11);
}

.purchase-benefits--showcase .benefit > i {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border: 1px solid rgba(170, 128, 20, 0.18);
  border-radius: 15px;
  background: linear-gradient(145deg, #fff8dc, #f3ead7);
  color: #9a7100;
  font-size: 21px;
  box-shadow: 0 6px 14px rgba(16, 42, 67, 0.08);
}

.purchase-benefits--showcase .benefit > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.purchase-benefits--showcase .benefit strong {
  color: var(--industrial-navy);
  font-size: 13px;
  line-height: 1.65;
}

.purchase-benefits--showcase .benefit span {
  margin-top: 5px;
  color: var(--industrial-muted);
  font-size: 11px;
  line-height: 1.8;
}

/* Clear, readable layout for the store's policy and help pages. */
.legal-main {
  max-width: 1040px;
  padding-block: 34px 72px;
}

.legal-document {
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid var(--industrial-line) !important;
  border-radius: 22px;
  background: #fff !important;
  box-shadow: var(--industrial-shadow) !important;
}

.legal-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 28px;
  padding: 16px 18px;
  border: 1px solid rgba(36, 59, 83, 0.12);
  border-radius: 14px;
  background: linear-gradient(110deg, #eef3f7, #f7f8f8);
  color: var(--industrial-steel);
}

.legal-note > i {
  flex: 0 0 auto;
  margin-top: 3px;
  color: #a87800;
  font-size: 18px;
}

.legal-note p,
.legal-section p,
.legal-section li {
  margin: 0;
  color: #4c5b65;
  font-size: 14px;
  line-height: 2;
}

.legal-section + .legal-section {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid #e7ebee;
}

.legal-section h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--industrial-navy);
  font-size: 18px;
  font-weight: 800;
}

.legal-section h2 i {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 10px;
  background: #fff6d6;
  color: #947000;
  font-size: 16px;
}

.legal-section ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-inline-start: 22px;
}

.legal-updated {
  margin: 26px 0 0;
  color: #78858e;
  font-size: 11px;
}

.legal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.legal-actions .flow-button {
  display: inline-flex;
  width: auto;
  align-items: center;
  gap: 10px;
}

@media (max-width: 575px) {
  .legal-main {
    padding-block: 22px 48px;
  }

  .legal-document {
    padding: 18px 15px;
    border-radius: 17px;
  }

  .legal-note {
    gap: 9px;
    padding: 13px;
  }

  .legal-note p,
  .legal-section p,
  .legal-section li {
    font-size: 13px;
  }

  .legal-section h2 {
    font-size: 16px;
  }
}

@media (max-width: 1199px) {
  .purchase-benefits--showcase .benefit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .purchase-benefits--showcase .benefits-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
    padding: 0 4px 5px;
  }
}

@media (max-width: 640px) {
  .purchase-benefits--showcase {
    margin-block: 22px;
    padding-block: 17px;
    border-radius: 16px;
  }

  .purchase-benefits--showcase .benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .purchase-benefits--showcase .benefits-intro h2 {
    font-size: 18px;
  }

  .purchase-benefits--showcase .benefit {
    min-height: 142px;
    gap: 9px;
    padding: 14px 10px;
  }

  .purchase-benefits--showcase .benefit > i {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    font-size: 18px;
  }

  .purchase-benefits--showcase .benefit strong {
    font-size: 11px;
  }

  .purchase-benefits--showcase .benefit span {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .purchase-benefits--showcase .benefit {
    transition: none;
  }

  .purchase-benefits--showcase .benefit:hover {
    transform: none;
  }
}

/* Polished header search with keyboard-friendly product suggestions. */
.home-header-search {
  position: relative;
  z-index: 1040;
  overflow: visible !important;
  border: 1px solid var(--industrial-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 5px 18px rgba(16, 42, 67, 0.07);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.home-header-search:focus-within {
  border-color: var(--industrial-yellow-dark) !important;
  background: #fff !important;
  box-shadow:
    0 0 0 4px rgba(246, 197, 21, 0.2),
    0 14px 30px rgba(16, 42, 67, 0.12) !important;
  transform: translateY(-1px);
}

.home-header-search > button {
  display: grid;
  width: 42px;
  height: calc(100% - 10px);
  margin: 5px;
  place-items: center;
  border: 0 !important;
  border-radius: 10px;
  background: var(--industrial-yellow) !important;
  color: var(--industrial-navy) !important;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.home-header-search > button:hover {
  transform: scale(1.04);
  background: var(--industrial-navy) !important;
  color: var(--industrial-yellow) !important;
}

.home-header-search > button:focus-visible {
  outline: 2px solid var(--industrial-navy) !important;
  outline-offset: 2px;
}

.home-header-search > input[type="search"] {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0 24px 0 16px !important;
  border: 0 !important;
  border-radius: 0 12px 12px 0;
  outline: none !important;
  background: transparent !important;
  color: var(--industrial-ink) !important;
  direction: rtl;
  font-size: 13px !important;
  text-align: right;
  -webkit-appearance: none;
  appearance: none;
}

.home-header-search > input[type="search"]::placeholder {
  color: #84919a !important;
  opacity: 1;
}

.header-search-suggestions[hidden] {
  display: none !important;
}

.header-search-suggestions {
  position: absolute;
  z-index: 1200;
  top: calc(100% + 11px);
  right: 0;
  left: 0;
  overflow: auto;
  max-height: min(520px, calc(100dvh - 110px));
  padding: 8px;
  border: 1px solid #e0e6e9;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 22px 48px rgba(16, 42, 67, 0.2);
  color: var(--industrial-ink);
  direction: rtl;
  scrollbar-color: rgba(16, 42, 67, 0.28) transparent;
  scrollbar-width: thin;
}

.header-search-suggestions::-webkit-scrollbar {
  width: 6px;
}

.header-search-suggestions::-webkit-scrollbar-track {
  background: transparent;
}

.header-search-suggestions::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: rgba(16, 42, 67, 0.26);
}

.header-search-suggestions-head {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 9px 7px;
  border-bottom: 1px solid #edf0f2;
  color: var(--industrial-navy);
  font-size: 11px;
  font-weight: 800;
}

.header-search-suggestions-head > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.header-search-suggestions-head i {
  color: var(--industrial-yellow-dark);
  font-size: 15px;
}

.header-search-suggestions-head small {
  color: var(--industrial-muted);
  font-size: 10px;
  font-weight: 600;
}

.header-search-suggestions ul {
  display: grid;
  gap: 3px;
  margin: 5px 0;
  padding: 0;
  list-style: none;
}

.header-search-suggestion {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 11px;
  min-height: 68px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: inherit !important;
  text-decoration: none !important;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    transform 0.18s ease;
}

.header-search-suggestion:hover,
.header-search-suggestion:focus-visible {
  transform: translateX(-2px);
  border-color: #e8d78d;
  outline: none;
  background: #fffbee;
}

.header-search-suggestion-image {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #edf0f2;
  border-radius: 9px;
  background: #f7f9fa;
}

.header-search-suggestion-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.header-search-suggestion-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.header-search-suggestion-copy > strong {
  overflow: hidden;
  color: var(--industrial-navy);
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-search-suggestion-copy > small {
  overflow: hidden;
  color: var(--industrial-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-search-suggestion-copy > b {
  color: var(--industrial-yellow-dark);
  font-size: 11px;
  font-weight: 800;
}

.header-search-suggestion-copy > b small {
  color: var(--industrial-muted);
  font-size: 9px;
  font-weight: 500;
}

.header-search-suggestion > i {
  color: #99a4ab;
  font-size: 13px;
  transition:
    color 0.18s ease,
    transform 0.18s ease;
}

.header-search-suggestion:hover > i,
.header-search-suggestion:focus-visible > i {
  transform: translateX(-2px);
  color: var(--industrial-yellow-dark);
}

.header-search-all,
.header-search-empty > a {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  border-top: 1px solid #edf0f2;
  color: var(--industrial-navy) !important;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none !important;
}

.header-search-all:hover,
.header-search-empty > a:hover {
  color: var(--industrial-yellow-dark) !important;
}

.header-search-empty {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 20px 12px 6px;
  color: var(--industrial-muted);
  font-size: 12px;
}

.header-search-empty > i {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: #f2f5f6;
  color: var(--industrial-yellow-dark);
  font-size: 17px;
}

.header-search-empty > a {
  width: 100%;
  margin-top: 3px;
}

/* Make favorite feedback messages easier to read on every product surface. */
#liveToast .toast-body,
#searchToast {
  font-size: 14px !important;
  line-height: 1.75;
}

/* Storefront product cards: clear product image, compact details, visible purchase action. */
.product-card,
.search-product.product-card {
  overflow: hidden;
  border: 1px solid #e1e7eb !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 5px 18px rgba(16, 42, 67, 0.07) !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.product-card:hover,
.search-product.product-card:hover {
  border-color: rgba(201, 157, 0, 0.58) !important;
  box-shadow: 0 14px 28px rgba(16, 42, 67, 0.12) !important;
  transform: translateY(-3px);
}

.product-card .product-image,
.search-product.product-card .search-product-image {
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  border-bottom: 1px solid #edf0f2 !important;
  background: #f6f8f9 !important;
}

.product-card .product-image > img,
.search-product.product-card .search-product-image img {
  padding: 12px;
  object-fit: contain !important;
}

.product-card .product-info,
.search-product.product-card .product-info {
  min-height: 118px;
  padding: 14px 15px 12px !important;
}

.product-card .product-info > div > small,
.search-product.product-card .search-product-heading > small {
  margin-bottom: 3px;
  color: #687985 !important;
  font-size: 10.5px;
  letter-spacing: 0;
}

.product-card .product-info h3,
.search-product.product-card .product-info h3 {
  min-height: 48px;
  color: var(--industrial-ink) !important;
  font-size: 15px;
  line-height: 1.65;
}

.product-card .product-info > p,
.search-product.product-card .search-product-price {
  min-height: 28px;
  margin-top: auto;
  color: var(--industrial-navy) !important;
  font-size: 16px;
  font-weight: 800;
}

.product-card > .add-cart,
.search-product.product-card > .search-add-cart {
  width: calc(100% - 28px);
  min-height: 42px;
  margin: 0 14px 14px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 12.5px;
}

@media (min-width: 390px) and (max-width: 767px) {
  #productGrid > .product-col {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .inner-page .product-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .product-card .product-image,
  .search-product.product-card .search-product-image {
    height: 154px !important;
    min-height: 154px !important;
    max-height: 154px !important;
  }

  .product-card .product-info,
  .search-product.product-card .product-info {
    min-height: 104px;
    padding: 10px 11px 8px !important;
  }

  .product-card .product-info h3,
  .search-product.product-card .product-info h3 {
    min-height: 42px;
    font-size: 13px;
  }

  .product-card .product-info > p,
  .search-product.product-card .search-product-price {
    font-size: 14px;
  }

  .product-card > .add-cart,
  .search-product.product-card > .search-add-cart {
    width: calc(100% - 20px);
    min-height: 38px;
    margin: 0 10px 10px;
    gap: 5px;
    font-size: 11px;
  }
}

@media (max-width: 389px) {
  .inner-page .product-results {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-card .product-image,
  .search-product.product-card .search-product-image {
    height: 195px !important;
    min-height: 195px !important;
    max-height: 195px !important;
  }
}

.product-card,
.search-product.product-card,
.showcase-card,
.rail-card,
.product-rail .owl-item .rail-card {
  display: flex;
  height: 100%;
  min-height: 470px;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--industrial-line) !important;
  border-radius: 15px !important;
  background: #fff !important;
  box-shadow: 0 7px 22px rgba(16, 42, 67, 0.08) !important;
}

.showcase-card .product-image,
.rail-card .rail-image {
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  flex: 0 0 220px;
  background: #f6f8f9 !important;
}

.showcase-card .product-image img,
.rail-card .rail-image img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  padding: 12px;
}

.showcase-card-body {
  display: flex;
  min-height: 214px;
  padding: 15px 16px 16px !important;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
}

.showcase-card-body > p,
.rail-card > p {
  display: none !important;
}

.showcase-card-body > small,
.rail-card > small {
  min-height: 18px;
  margin: 0 0 5px !important;
  color: #687985 !important;
  font-size: 10.5px !important;
  letter-spacing: 0 !important;
}

.showcase-card-body h3,
.rail-card h3 {
  min-height: 50px;
  margin: 0 0 8px !important;
  color: var(--industrial-ink) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

.showcase-card-body > strong,
.rail-card > strong {
  min-height: 30px;
  margin: auto 0 0 !important;
  color: var(--industrial-navy) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.showcase-card-body .add-cart,
.rail-card .add-cart {
  width: 100%;
  min-height: 43px;
  margin: 12px 0 0 !important;
  border-radius: 9px;
  font-size: 12px;
}

.product-card > .add-cart i,
.showcase-card-body .add-cart i,
.rail-card .add-cart i,
.search-product.product-card > .search-add-cart i {
  color: var(--industrial-navy) !important;
  opacity: 1;
}

.product-card > .add-cart:is(:hover, :focus-visible, .added) i,
.showcase-card-body .add-cart:is(:hover, :focus-visible, .added) i,
.rail-card .add-cart:is(:hover, :focus-visible, .added) i,
.search-product.product-card
  > .search-add-cart:is(:hover, :focus-visible, .added)
  i {
  color: var(--industrial-yellow) !important;
}

.compare-panel {
  position: absolute;
  top: calc(100% + 15px);
  left: 0;
  z-index: 1060;
  width: min(390px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid rgba(16, 42, 67, 0.12);
  border-radius: 17px;
  background: #fff;
  color: var(--industrial-ink);
  box-shadow: 0 22px 58px rgba(7, 26, 46, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(9px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
  pointer-events: none;
}

.compare-wrap.open .compare-panel,
.favorites-wrap.open .favorites-panel,
.compare-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.favorites-wrap.open .favorites-panel,
.favorites-wrap:focus-within .favorites-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.favorites-panel .compare-panel-head > span > i {
  color: #ffcf3f;
}

.compare-panel-head {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--industrial-navy);
  color: #fff;
}

.compare-panel-head > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.compare-panel-head > span > i {
  color: var(--industrial-yellow);
  font-size: 18px;
}

.compare-panel-head button,
.compare-panel-item > button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}

.compare-panel-count {
  margin: 0;
  padding: 11px 16px 5px;
  color: var(--industrial-muted);
  font-size: 12px;
}

.compare-panel-items {
  max-height: 300px;
  overflow: auto;
  padding: 4px 12px 10px;
}

.compare-panel-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 11px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--industrial-line);
}

.compare-panel-item img {
  width: 52px;
  height: 52px;
  border-radius: 9px;
  background: #f2f5f6;
  object-fit: cover;
}

.compare-panel-item > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.compare-panel-item strong {
  overflow: hidden;
  color: var(--industrial-navy);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-panel-item small {
  color: var(--industrial-muted);
  font-size: 11px;
}

.compare-panel-item > button {
  border-color: #e5e9eb;
  background: #f6f8f9;
  color: var(--industrial-muted);
}

.compare-panel-item > button:hover {
  border-color: var(--industrial-danger);
  color: var(--industrial-danger);
}

.compare-panel-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 24px 12px;
  color: var(--industrial-muted);
  text-align: center;
}

.compare-panel-empty > i {
  color: var(--industrial-yellow-dark);
  font-size: 25px;
}

.compare-panel-empty strong {
  color: var(--industrial-navy);
  font-size: 13px;
}

.compare-panel-empty span {
  font-size: 11px;
}

#cartPanel .header-panel-empty,
#favoritesPanelItems .header-panel-empty,
#comparePanelItems .header-panel-empty {
  display: grid;
  min-height: 220px;
  padding: 24px 16px;
  align-content: center;
  justify-items: center;
  gap: 8px;
  box-sizing: border-box;
  color: var(--industrial-muted);
  text-align: center;
}

#cartPanel .header-panel-empty-icon,
#favoritesPanelItems .header-panel-empty-icon,
#comparePanelItems .header-panel-empty-icon {
  display: grid;
  width: 56px;
  height: 56px;
  margin: 0 0 3px;
  place-items: center;
  border: 1px solid rgba(16, 42, 67, 0.12);
  border-radius: 16px;
  background: #f3f6f8;
  color: var(--industrial-navy);
  box-shadow: none;
  transform: none;
}

#cartPanel .header-panel-empty-icon i,
#favoritesPanelItems .header-panel-empty-icon i,
#comparePanelItems .header-panel-empty-icon i {
  color: inherit;
  font-size: 24px;
}

#cartPanel .header-panel-empty strong,
#favoritesPanelItems .header-panel-empty strong,
#comparePanelItems .header-panel-empty strong {
  color: var(--industrial-navy);
  font-size: 14px;
  line-height: 1.7;
}

#cartPanel .header-panel-empty p,
#favoritesPanelItems .header-panel-empty p,
#comparePanelItems .header-panel-empty p {
  margin: 0;
  color: var(--industrial-muted);
  font-size: 12px;
  line-height: 1.8;
}

.compare-panel-link {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-top: 1px solid var(--industrial-line);
  background: #f8fafb;
  color: var(--industrial-navy);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.compare-panel-link:hover {
  background: #fff9df;
  color: var(--industrial-navy);
}

.product-card .product-image > .compare-trigger,
.search-product .search-product-image > .compare-trigger,
.showcase-card .product-image > .compare-trigger,
.rail-card .rail-image > .compare-trigger {
  top: 13px !important;
  right: auto !important;
  bottom: auto !important;
  left: 60px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  z-index: 5;
  font-size: 15px;
}

.product-card .product-image > .favorite,
.search-product .search-product-image > .favorite,
.showcase-card .product-image > .favorite,
.rail-card .rail-image > .favorite {
  top: 13px !important;
  right: auto !important;
  bottom: auto !important;
  left: 14px !important;
  z-index: 5;
}

@media (max-width: 991px) {
  .compare-panel,
  .compare-panel.open {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    z-index: 1060;
    width: auto;
    max-height: min(70vh, 520px);
    margin: 0 auto;
    transform: translateY(12px);
  }

  .compare-panel.open {
    transform: translateY(0);
  }
}

/* High-contrast cart glyph shared by every add-to-cart action. */
:is(
    .add-cart,
    .quick-add-cart,
    .product-detail-add,
    .featured-buy button,
    .featured-side-content button
  )
  > i {
  display: inline-grid;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  background: var(--industrial-navy);
  color: var(--industrial-yellow) !important;
  font-size: 15px;
  line-height: 1;
  opacity: 1 !important;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

:is(
    .add-cart,
    .quick-add-cart,
    .product-detail-add,
    .featured-buy button,
    .featured-side-content button
  ):is(:hover, :focus-visible, .added)
  > i {
  border-color: rgba(16, 42, 67, 0.16);
  background: var(--industrial-yellow);
  color: var(--industrial-navy) !important;
  transform: scale(1.04);
}

#productView .product-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: start;
  gap: 22px;
  margin: 0 0 44px;
}

#productView .product-detail-gallery,
#productView .product-detail-summary {
  min-width: 0;
  border: 1px solid var(--industrial-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--industrial-shadow);
}

#productView .product-detail-gallery {
  padding: 16px;
}

#productView .product-detail-image-frame {
  position: relative;
  display: grid;
  min-height: 460px;
  overflow: hidden;
  place-items: center;
  border: 1px solid #edf0f2;
  border-radius: 13px;
  background: #f6f8f9;
}

#productView .product-detail-image {
  display: block;
  width: 100%;
  height: 440px;
  max-height: 62vw;
  padding: 40px;
  border-radius: 0;
  object-fit: contain !important;
}

#productView .product-detail-image-code {
  position: absolute;
  z-index: 1;
  top: 14px;
  right: 14px;
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid #e2e8eb;
  border-radius: 999px;
  background: #fff;
  color: var(--industrial-muted);
  direction: ltr;
  font-size: 11px;
  font-weight: 700;
}

#productView .product-detail-image-code i {
  color: var(--industrial-yellow-dark);
}

#productView .product-detail-gallery-caption {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 8px;
  padding: 8px 4px 0;
  color: var(--industrial-steel);
  font-size: 12px;
  font-weight: 700;
}

#productView .product-detail-gallery-caption > i {
  color: var(--industrial-yellow-dark);
  font-size: 16px;
}

#productView .product-detail-gallery-caption small {
  margin-inline-start: auto;
  color: #78858d;
  font-size: 10px;
  font-weight: 500;
}

#productView .product-detail-summary {
  padding: 25px;
}

#productView .product-detail-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--industrial-muted);
  font-size: 11px;
}

#productView .product-detail-meta > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--industrial-yellow-dark);
  font-weight: 800;
}

#productView .product-detail-meta i {
  font-size: 15px;
}

#productView .product-detail-summary > h2 {
  margin: 16px 0 9px;
  color: var(--industrial-navy) !important;
  font-size: clamp(21px, 2.2vw, 29px);
  font-weight: 800;
  line-height: 1.7;
}

#productView .product-detail-description {
  margin: 0 0 21px;
  color: var(--industrial-muted);
  font-size: 13px;
  line-height: 2;
}

#productView .product-detail-specs {
  padding: 16px;
  border: 1px solid #e8edf0;
  border-radius: 13px;
  background: #fbfcfc;
}

#productView .product-detail-specs h3 {
  margin: 0 0 9px;
  color: var(--industrial-navy);
  font-size: 14px;
  font-weight: 800;
}

#productView .product-detail-specs dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

#productView .product-detail-specs dl > div {
  display: flex;
  min-height: 39px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #edf0f2;
}

#productView .product-detail-specs dl > div:last-child {
  border-bottom: 0;
}

#productView .product-detail-specs dt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--industrial-muted);
  font-size: 12px;
}

#productView .product-detail-specs dt i {
  color: var(--industrial-yellow-dark);
  font-size: 14px;
}

#productView .product-detail-specs dd {
  margin: 0;
  color: var(--industrial-ink);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

#productView .product-detail-price {
  margin-top: 15px;
  padding: 15px;
  border: 1px solid #ecdfaf;
  border-radius: 13px;
  background: #fffaf0;
}

#productView .product-detail-price > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--industrial-muted);
  font-size: 11px;
}

#productView .product-detail-price > div small {
  color: #866600;
  font-size: 10px;
}

#productView .product-detail-price > strong {
  display: block;
  margin-top: 5px;
  color: var(--industrial-navy);
  font-size: 23px;
  font-weight: 900;
}

#productView .product-detail-price > p {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 7px 0 0;
  color: var(--industrial-muted);
  font-size: 10.5px;
  line-height: 1.8;
}

#productView .product-detail-price > p i {
  margin-top: 2px;
  color: var(--industrial-yellow-dark);
}

#productView .product-detail-actions {
  display: grid;
  gap: 10px;
  margin-top: 15px;
}

#productView .product-detail-add {
  display: inline-flex;
  width: 100%;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--industrial-yellow) !important;
  border-radius: 10px;
  background: var(--industrial-yellow) !important;
  color: var(--industrial-navy) !important;
  font-size: 14px;
  font-weight: 800;
}

#productView .product-detail-add i {
  color: var(--industrial-navy) !important;
  font-size: 17px;
}

#productView .product-detail-add:hover,
#productView .product-detail-add:focus-visible {
  border-color: var(--industrial-navy) !important;
  background: var(--industrial-navy) !important;
  color: #fff !important;
}

#productView .product-detail-add:hover i,
#productView .product-detail-add:focus-visible i {
  color: var(--industrial-yellow) !important;
}

#productView .product-detail-secondary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

#productView .product-detail-secondary-actions > a,
#productView .product-detail-favorite {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--industrial-line);
  border-radius: 9px;
  background: #fff;
  color: var(--industrial-navy);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

#productView .product-detail-secondary-actions > a:hover,
#productView .product-detail-favorite:hover,
#productView .product-detail-favorite[aria-pressed="true"] {
  border-color: var(--industrial-yellow);
  background: #fffaf0;
  color: var(--industrial-navy);
}

#productView .product-detail-favorite[aria-pressed="true"] i {
  color: #c84350;
}

#productView .product-detail-status {
  min-height: 24px;
  margin: 8px 0 0;
  color: var(--industrial-success);
  font-size: 12px;
}

@media (max-width: 991px) {
  #productView .product-detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #productView .product-detail-image-frame {
    min-height: 360px;
  }

  #productView .product-detail-image {
    height: 340px;
    max-height: none;
  }
}

@media (max-width: 575px) {
  .product-card,
  .search-product.product-card,
  .showcase-card,
  .rail-card,
  .product-rail .owl-item .rail-card {
    min-height: 420px;
  }

  .showcase-card .product-image,
  .rail-card .rail-image {
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    flex-basis: 190px;
  }

  .showcase-card-body {
    min-height: 195px;
    padding: 13px !important;
  }

  .showcase-card-body h3,
  .rail-card h3 {
    font-size: 14px !important;
  }

  #productView .product-detail-layout {
    gap: 13px;
  }

  #productView .product-detail-gallery {
    padding: 10px;
  }

  #productView .product-detail-image-frame {
    min-height: 285px;
  }

  #productView .product-detail-image {
    height: 270px;
    padding: 23px;
  }

  #productView .product-detail-summary {
    padding: 17px;
  }

  #productView .product-detail-price > strong {
    font-size: 20px;
  }
}

/* Homepage section panels: consistent surfaces with clear visual hierarchy. */
.home-page > section > .container {
  width: min(1480px, calc(100% - 56px));
  max-width: none;
}

.home-page #collection > .container,
.home-page .category-showcase > .container,
.home-page #brands > .container,
.home-page #journal > .container {
  position: relative;
  padding: clamp(22px, 3.2vw, 42px);
  border: 1px solid rgba(16, 42, 67, 0.09);
  border-radius: 22px;
  background: linear-gradient(145deg, #fff 0%, #f8fafb 100%);
  box-shadow: 0 14px 38px rgba(16, 42, 67, 0.07);
}

.home-page #collection > .container::before,
.home-page .category-showcase > .container::before,
.home-page #journal > .container::before {
  position: absolute;
  top: 0;
  right: 28px;
  left: 28px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--industrial-yellow),
    transparent
  );
  content: "";
}

.home-page
  :is(#collection, #amazing, #bestsellers, #newest, #brands, #journal) {
  padding-block: clamp(34px, 5vw, 64px);
  background: var(--industrial-bg);
}

.home-page .featured-products.py-section {
  padding-block: clamp(36px, 5vw, 68px);
  background: linear-gradient(120deg, #102a43 0%, #183b57 58%, #21455f 100%);
}

.home-page .featured-products .featured-main,
.home-page .featured-products .featured-side {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.2);
}

.home-page .featured-products .featured-side-content {
  background: linear-gradient(145deg, #fff 0%, #f5f7f8 100%);
}

.home-page
  .featured-products
  .featured-side-content
  :is(h3, p, .featured-price) {
  color: var(--industrial-navy);
}

.home-page .category-showcase-head {
  margin-bottom: clamp(20px, 3vw, 34px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--industrial-line);
}

.home-page .category-showcase-head h2,
.home-page .section-head h2,
.home-page .recommend-head h2 {
  letter-spacing: -0.035em;
}

.home-page .showcase-card {
  border-color: #e2e8eb;
  box-shadow: 0 7px 22px rgba(16, 42, 67, 0.06);
}

.home-page .showcase-card:hover {
  border-color: rgba(246, 197, 21, 0.72);
  box-shadow: 0 16px 34px rgba(16, 42, 67, 0.12);
  transform: translateY(-4px);
}

@media (min-width: 1200px) {
  #amazing .row > .col-xl {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

.home-page .recommendations.py-section {
  padding-block: clamp(36px, 5vw, 68px);
  background: linear-gradient(180deg, #eef3f5 0%, #f5f7f8 100%);
}

.home-page .recommend-box {
  padding: clamp(20px, 3vw, 38px);
  border: 1px solid rgba(16, 42, 67, 0.1);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(16, 42, 67, 0.08);
}

.home-page #brands > .container {
  background: linear-gradient(135deg, #102a43 0%, #183b57 100%);
  color: #fff;
}

.home-page .brands-heading h2 {
  color: #fff;
}

.home-page .brands-heading .brands-line {
  background: rgba(246, 197, 21, 0.62);
}

.home-page .brand-card {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.home-page .brand-card:hover {
  transform: translateY(-3px);
  border-color: var(--industrial-yellow);
  background: rgba(255, 255, 255, 0.13);
}

.home-page #brandsSlider {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 16px;
  direction: rtl;
}

.home-page #brandsSlider > .brand-card {
  min-height: 150px;
  height: 100%;
}

.home-page #brandsSlider .brand-logo-frame {
  display: grid;
  width: 100%;
  min-height: 74px;
  padding: 10px 14px;
  place-items: center;
  border: 1px solid rgba(16, 42, 67, 0.08);
  border-radius: 10px;
  background: #fff;
}

.home-page #brandsSlider .brand-logo-image {
  display: block;
  width: min(100%, 170px);
  height: 50px;
  object-fit: contain;
  object-position: center;
}

.home-page #brandsSlider .brand-logo-image[src$="/uni-t.png"],
.home-page #brandsSlider .brand-logo-image[src$="/yihua.png"] {
  filter: brightness(0);
}

@media (max-width: 991px) {
  .home-page #brandsSlider {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .home-page #brandsSlider {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .home-page #brandsSlider > .brand-card {
    min-height: 118px;
    padding: 12px 8px;
  }
}

.home-page .testimonials.py-section {
  padding-block: clamp(38px, 5vw, 70px);
  background: #edf2f4;
}

.home-page .testimonials .testimonial-card {
  border: 1px solid #e0e7ea;
  box-shadow: 0 10px 26px rgba(16, 42, 67, 0.08);
}

.home-page #journal > .container {
  background: linear-gradient(145deg, #fff 0%, #f7f9fa 100%);
}

@media (max-width: 767px) {
  .home-page > section > .container {
    width: calc(100% - 24px);
  }

  .home-page #collection > .container,
  .home-page .category-showcase > .container,
  .home-page #brands > .container,
  .home-page #journal > .container,
  .home-page .recommend-box {
    padding: 18px;
    border-radius: 16px;
  }

  .home-page .category-showcase-head {
    align-items: flex-start;
    gap: 12px;
  }
}

/* Keep the shared two-tier header consistent on every inner page. */
@media (min-width: 992px) {
  .inner-page #mainNav,
  .inner-page #mainNav.scrolled {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 164px !important;
    min-height: 164px;
    padding: 0;
    border-bottom: 3px solid var(--industrial-yellow) !important;
    background: linear-gradient(
      to bottom,
      #f4f6f7 0 85px,
      var(--industrial-navy) 85px 100%
    ) !important;
    box-shadow: 0 10px 28px rgba(16, 42, 67, 0.14) !important;
  }

  .inner-page {
    padding-top: 164px !important;
  }

  .inner-page #mainNav > .container {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 78px;
    padding-right: max(28px, calc((100% - 1480px) / 2)) !important;
    padding-left: max(28px, calc((100% - 1480px) / 2)) !important;
    border: 0 !important;
    background: transparent !important;
  }

  .inner-page #mainNav .home-header-top {
    position: absolute;
    top: 0;
    right: 50%;
    z-index: 2;
    display: grid;
    width: min(1480px, calc(100% - 56px));
    height: 85px;
    padding: 13px 220px 13px 190px;
    grid-template-columns: minmax(260px, 480px) 180px;
    gap: 20px;
    align-items: center;
    color: var(--industrial-ink);
    transform: translateX(50%);
  }

  .inner-page #mainNav .home-nav-groups {
    position: absolute;
    inset: 0 max(28px, calc((100% - 1480px) / 2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    direction: rtl;
  }

  .inner-page #mainNav .home-nav-menu-group,
  .inner-page #mainNav .home-nav-action-group,
  .inner-page #mainNav .collapse,
  .inner-page #mainNav .navbar-nav {
    display: flex;
    height: 100%;
    align-items: center;
  }

  .inner-page #mainNav .collapse {
    position: static;
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
    justify-content: flex-start;
    margin: 0 !important;
  }

  .inner-page #mainNav .navbar-nav {
    width: max-content;
    height: 56px;
    padding: 3px 6px;
    margin: 0 !important;
    flex-direction: row;
    direction: rtl;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
  }

  .inner-page #mainNav .navbar-brand {
    position: absolute;
    top: -64px;
    right: max(28px, calc((100% - 1480px) / 2));
    margin: 0;
    color: var(--industrial-navy) !important;
    text-shadow: none !important;
  }

  .inner-page #mainNav .navbar-brand > span {
    border: 0 !important;
    background: var(--industrial-yellow) !important;
    color: var(--industrial-navy) !important;
  }

  .inner-page #mainNav .nav-link {
    display: flex;
    width: auto;
    height: 46px;
    min-height: 46px;
    padding: 0 14px !important;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.88) !important;
    line-height: 1.2;
    white-space: nowrap;
  }

  .inner-page #mainNav .nav-link:hover,
  .inner-page #mainNav .nav-link.active,
  .inner-page #mainNav .dropdown.show > .nav-link {
    border-color: rgba(246, 197, 21, 0.3);
    background: rgba(246, 197, 21, 0.1);
    color: var(--industrial-yellow) !important;
  }

  .inner-page #mainNav .nav-tools {
    position: relative;
    display: flex;
    width: max-content;
    height: 100%;
    align-items: center;
    gap: 10px;
    color: #fff;
  }

  .inner-page #mainNav .account-wrap {
    position: absolute;
    top: -64px;
    left: 0;
    z-index: 8;
    padding: 0;
    margin: 0;
    border: 0;
  }

  .inner-page #mainNav .account-btn {
    display: flex;
    min-width: 142px;
    height: 46px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #d6dfe4 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: var(--industrial-navy) !important;
    box-shadow: 0 5px 16px rgba(16, 42, 67, 0.08) !important;
  }

  .inner-page #mainNav .nav-actions {
    display: flex;
    height: auto;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .inner-page #mainNav .home-header-search {
    height: 54px;
    border-color: #dce3e7 !important;
    border-radius: 9px;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(16, 42, 67, 0.04);
  }

  .inner-page #mainNav .home-header-search > button {
    background: var(--industrial-yellow) !important;
    color: var(--industrial-navy) !important;
  }
}

@media (max-width: 991px) {
  .inner-page #mainNav,
  .inner-page #mainNav.scrolled {
    min-height: 76px;
    border-bottom: 3px solid var(--industrial-yellow) !important;
    background: var(--industrial-navy) !important;
  }

  .inner-page {
    padding-top: 76px !important;
  }

  .inner-page #mainNav .navbar-brand {
    color: #fff !important;
  }

  .inner-page #mainNav .home-header-top {
    display: none !important;
  }
}

@media (max-width: 575px) {
  #mainNav .account-btn .account-label,
  #mainNav .account-btn > .bi-chevron-down {
    display: none !important;
  }

  #mainNav .account-btn,
  .home-page #mainNav .account-btn,
  .inner-page #mainNav .account-btn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    flex: 0 0 40px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
}

.filter-group.open .filter-options {
  max-height: 280px;
  overflow-y: auto;
}
.filter-options > .filter-search {
  grid-column: 1 / -1;
}

/* Final icon contrast wins over page-specific legacy button rules. */
:is(
    .add-cart,
    .quick-add-cart,
    .product-detail-add,
    .featured-buy button,
    .featured-side-content button
  )
  > i,
#productView .product-detail-add > i {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--industrial-yellow-dark) !important;
  box-shadow: none !important;
}

:is(
    .add-cart,
    .quick-add-cart,
    .product-detail-add,
    .featured-buy button,
    .featured-side-content button
  ):is(:hover, :focus-visible, .added)
  > i,
#productView .product-detail-add:is(:hover, :focus-visible) > i {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--industrial-yellow) !important;
}

.quick-add-cart > i {
  color: var(--industrial-yellow) !important;
}

/* Product-card actions share one vertical hover dock. */
.product-card .product-image,
.search-product .search-product-image,
.showcase-card .product-image,
.rail-card .rail-image {
  position: relative;
}

.product-card-actions {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 8;
  display: grid;
  gap: 8px;
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transform: translateX(-7px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
}

.product-card:is(:hover, :focus-within) .product-card-actions,
.showcase-card:is(:hover, :focus-within) .product-card-actions,
.rail-card:is(:hover, :focus-within) .product-card-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.product-card-actions > .favorite,
.product-card-actions > .compare-trigger,
.product-card-actions > .add-cart {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center;
  border: 1px solid #dbe3e7 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--industrial-navy) !important;
  box-shadow: 0 5px 15px rgba(16, 42, 67, 0.2) !important;
  cursor: pointer;
  transform: none;
}

.product-card-actions > .favorite,
.product-card-actions > .compare-trigger {
  font-size: 16px !important;
}

.product-card-actions > .favorite:hover,
.product-card-actions > .favorite.active,
.product-card-actions > .compare-trigger:hover,
.product-card-actions > .compare-trigger.active {
  border-color: var(--industrial-yellow) !important;
  background: #fff8d9 !important;
  color: var(--industrial-navy) !important;
}

.product-card-actions > .add-cart {
  border-color: var(--industrial-navy) !important;
  background: var(--industrial-navy) !important;
  color: var(--industrial-yellow) !important;
  font-size: 0 !important;
}

.product-card-actions > .add-cart > i {
  display: grid;
  width: 100%;
  height: 100%;
  flex: none;
  place-items: center;
  border: 0 !important;
  background: transparent !important;
  color: var(--industrial-yellow) !important;
  font-size: 18px !important;
}

.product-card-actions > .add-cart:hover,
.product-card-actions > .add-cart:focus-visible,
.product-card-actions > .add-cart.added {
  border-color: var(--industrial-yellow) !important;
  background: var(--industrial-yellow) !important;
  color: var(--industrial-navy) !important;
}

.product-card-actions > .add-cart:hover > i,
.product-card-actions > .add-cart:focus-visible > i,
.product-card-actions > .add-cart.added > i {
  background: transparent !important;
  color: var(--industrial-navy) !important;
}

@media (hover: none), (max-width: 991px) {
  .product-card-actions {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-card-actions {
    transition: none;
  }
}

/* Show every product fully inside the shared card image frame. */
.product-card .product-image img,
.search-product .search-product-image img,
.showcase-card .product-image img,
.rail-card .rail-image img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
}

/* Product detail information architecture and media-aware gallery. */
#productView .product-detail-media-frame {
  display: grid;
  width: 100%;
  min-height: 440px;
  place-items: center;
}

#productView .product-detail-media-frame :is(img, video) {
  display: block;
  width: 100%;
  height: 440px;
  max-height: 62vw;
  padding: 32px;
  background: #f6f8f9;
  object-fit: contain;
}

#productView .product-detail-thumbnails {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 12px 2px 3px;
}

#productView .product-detail-thumb {
  display: grid;
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--industrial-line);
  border-radius: 10px;
  background: #f6f8f9;
  cursor: pointer;
}

#productView .product-detail-thumb.is-active,
#productView .product-detail-thumb:hover,
#productView .product-detail-thumb:focus-visible {
  border-color: var(--industrial-yellow-dark);
  box-shadow: 0 0 0 2px rgba(246, 197, 21, 0.2);
}

#productView .product-detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#productView .product-detail-thumb > span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: var(--industrial-navy);
  font-size: 22px;
}

#productView .product-detail-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  grid-template-areas:
    "stage thumbs"
    "caption caption";
  gap: 10px;
  direction: ltr;
}

#productView .product-detail-image-frame {
  grid-area: stage;
  min-height: 460px;
}

#productView .product-detail-thumbnails {
  grid-area: thumbs;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: center;
  max-height: 460px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 3px;
  direction: rtl;
}

#productView .product-detail-thumb {
  position: relative;
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  background: #fff;
}

#productView .product-detail-thumb img {
  width: 100%;
  height: 100%;
  padding: 4px;
  object-fit: contain;
}

#productView .product-detail-thumb > span {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  background: rgba(16, 39, 59, 0.32);
  color: #fff;
}

#productView .product-detail-gallery-caption {
  grid-area: caption;
  direction: rtl;
}

@media (max-width: 575px) {
  #productView .product-detail-gallery {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #productView .product-detail-thumbnails {
    flex-direction: row;
    align-self: stretch;
    max-width: 100%;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 3px 0 7px;
  }

  #productView .product-detail-thumb {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
  }
}

#productView .product-detail-image-frame {
  padding: 0;
  background: #eef1f3;
}

#productView .product-detail-media-frame {
  width: 100%;
  height: 100%;
  min-height: 460px;
}

#productView .product-detail-media-frame :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 460px;
  max-height: none;
  padding: 0;
  object-fit: cover;
}

#productView .product-detail-related-card .product-image img {
  object-fit: cover;
}

@media (max-width: 991px) {
  #productView .product-detail-media-frame,
  #productView .product-detail-media-frame :is(img, video) {
    min-height: 360px;
  }
}

@media (max-width: 575px) {
  #productView .product-detail-media-frame,
  #productView .product-detail-media-frame :is(img, video) {
    min-height: 270px;
    height: 270px;
  }
}

.inner-page .search-product.product-card,
.home-page :is(.product-card, .showcase-card, .rail-card) {
  height: auto !important;
  min-height: 0 !important;
  align-self: start;
}

.inner-page .search-product.product-card .search-product-image,
.home-page
  :is(
    .product-card .product-image,
    .showcase-card .product-image,
    .rail-card .rail-image
  ) {
  flex: 0 0 220px;
  padding: 0 !important;
  background: #edf1f3 !important;
}

.inner-page .search-product.product-card .search-product-image > a,
.home-page
  :is(
    .product-card .product-image > a,
    .showcase-card .product-image > a,
    .rail-card .rail-image > a
  ) {
  display: block;
  width: 100%;
  height: 100%;
}

.inner-page .search-product.product-card .search-product-image img,
.home-page
  :is(
    .product-card .product-image img,
    .showcase-card .product-image img,
    .rail-card .rail-image img
  ) {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center;
}

.inner-page .search-product.product-card .product-info {
  min-height: 0;
  padding: 12px 14px !important;
  flex: 0 0 auto;
}

.inner-page .search-product.product-card .product-info h3 {
  min-height: 0;
  margin: 0;
}

.inner-page .search-product.product-card .search-product-price {
  min-height: 0;
  margin: 9px 0 0;
}

.home-page :is(.product-card .product-info, .showcase-card-body) {
  min-height: 0;
  padding: 13px 14px !important;
  flex: 0 0 auto;
}

.home-page
  :is(.product-card .product-info h3, .showcase-card-body h3, .rail-card h3) {
  min-height: 0;
  margin-bottom: 7px !important;
}

.home-page
  :is(
    .product-card .product-info > p,
    .showcase-card-body > strong,
    .rail-card > strong
  ) {
  min-height: 0;
  margin: 8px 0 0 !important;
}

@media (max-width: 767px) {
  .inner-page .search-product.product-card .search-product-image {
    flex-basis: 154px;
  }

  .home-page
    :is(
      .product-card .product-image,
      .showcase-card .product-image,
      .rail-card .rail-image
    ) {
    flex-basis: 190px;
  }
}

@media (max-width: 389px) {
  .inner-page .search-product.product-card .search-product-image {
    flex-basis: 195px;
  }
}

.product-price-deal {
  display: contents;
}

.product-price-deal .price-old,
.product-detail-sale-meta .price-old {
  color: #91a5be !important;
  font-size: 14px;
  font-weight: 650;
  text-decoration: line-through;
  text-decoration-color: #a9b9cd;
  text-decoration-thickness: 1.5px;
}

.product-price-discount {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff0f0;
  color: #b83242;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.product-price-current {
  display: block;
  color: var(--industrial-navy) !important;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.65;
  white-space: nowrap;
}

.product-price-current small {
  color: var(--industrial-muted) !important;
  font-size: 10px !important;
  font-weight: 600;
}

.search-product.product-card .search-product-price.has-discount {
  display: grid;
  gap: 2px;
  align-content: start;
}

.product-detail-sale-meta {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin-top: 8px;
}

#productView .product-detail-price > .product-price-current {
  margin-top: 3px;
  font-size: 23px;
}

#productView .product-detail-related-card .product-info > p {
  display: grid;
  gap: 2px;
  margin-top: auto;
}

#productView .product-feedback-admin-reply {
  margin: 14px 0 0;
  padding: 13px 15px;
  border: 1px solid #dce6eb;
  border-right: 3px solid var(--industrial-yellow-dark);
  border-radius: 12px;
  background: linear-gradient(135deg, #f5f9fb, #fff);
}

#productView .product-feedback-admin-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#productView .product-feedback-admin-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--industrial-navy);
  font-size: 12px;
  font-weight: 850;
}

#productView .product-feedback-admin-meta > span i {
  color: #9a7500;
  font-size: 15px;
}

#productView .product-feedback-admin-meta > small {
  padding: 4px 8px;
  border-radius: 999px;
  background: #e8f0f4;
  color: #536a79;
  font-size: 10px;
  font-weight: 700;
}

#productView .product-feedback-admin-reply > p {
  margin: 8px 0 0;
  color: #465b69;
  font-size: 12px;
  line-height: 1.95;
}

#productView .product-question-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: 20px;
  direction: rtl;
}

#productView .product-question-form-column,
#productView .product-question-list-column {
  min-width: 0;
}

#productView .product-question-form-column {
  padding: 17px;
  border: 1px solid #e3e9ec;
  border-radius: 15px;
  background: linear-gradient(150deg, #f8fafb, #fff);
}

#productView .product-question-form-heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  margin-bottom: 13px;
}

#productView .product-question-form-heading > span {
  display: grid;
  width: 42px;
  height: 42px;
  grid-row: span 2;
  place-items: center;
  border-radius: 12px;
  background: #fff1bb;
  color: #896800;
  font-size: 18px;
}

#productView .product-question-form-heading > strong {
  color: var(--industrial-navy);
  font-size: 14px;
  font-weight: 850;
}

#productView .product-question-form-heading > small {
  margin-top: 2px;
  color: var(--industrial-muted);
  font-size: 11px;
  line-height: 1.7;
}

#productView .product-question-form-column .product-feedback-form {
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  border: 0;
  background: transparent;
}

#productView .product-question-form-column .product-feedback-form label {
  grid-column: 1;
}

#productView .product-question-list-column .product-feedback-list {
  gap: 12px;
  margin: 0;
}

#productView .product-question-faq {
  padding: 15px 16px;
  border-color: #e3e9ec;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(16, 42, 67, 0.045);
}

#productView .product-question-faq .product-feedback-meta {
  justify-content: flex-start;
}

#productView .product-question-faq .product-feedback-meta strong {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--industrial-navy);
  font-size: 12.5px;
  line-height: 1.8;
}

#productView .product-question-faq .product-feedback-meta strong::before {
  content: "پ";
  display: grid;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  place-items: center;
  border-radius: 7px;
  background: #fff1bb;
  color: #896800;
  font-size: 12px;
  font-weight: 900;
}

#productView .product-question-faq > p {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  background: #f4f8fa;
  color: #465b69;
}

#productView .product-question-faq > p::before {
  content: "پاسخ فروشگاه";
  display: block;
  margin-bottom: 4px;
  color: #8a6a12;
  font-size: 10px;
  font-weight: 850;
}

@media (max-width: 767px) {
  #productView .product-question-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
  }
}

.product-card > .add-cart,
.search-product.product-card > .search-add-cart,
.showcase-card-body > .add-cart,
.rail-card > .add-cart,
.product-detail-related-card > .add-cart {
  position: static !important;
  display: inline-flex !important;
  width: calc(100% - 28px);
  min-height: 44px;
  margin: auto 14px 14px !important;
  padding: 9px 12px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--industrial-navy) !important;
  border-radius: 10px;
  background: var(--industrial-navy) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1.5;
  transform: none !important;
}

.showcase-card-body > .add-cart {
  width: 100%;
  margin: 12px 0 0 !important;
}

.product-card > .add-cart > i,
.search-product.product-card > .search-add-cart > i,
.showcase-card-body > .add-cart > i,
.rail-card > .add-cart > i,
.product-detail-related-card > .add-cart > i {
  color: var(--industrial-yellow) !important;
}

.product-card > .add-cart:is(:hover, :focus-visible, .added),
.search-product.product-card
  > .search-add-cart:is(:hover, :focus-visible, .added),
.showcase-card-body > .add-cart:is(:hover, :focus-visible, .added),
.rail-card > .add-cart:is(:hover, :focus-visible, .added),
.product-detail-related-card > .add-cart:is(:hover, :focus-visible, .added) {
  border-color: var(--industrial-yellow) !important;
  background: var(--industrial-yellow) !important;
  color: var(--industrial-navy) !important;
}

.product-card > .add-cart:is(:hover, :focus-visible, .added) > i,
.search-product.product-card
  > .search-add-cart:is(:hover, :focus-visible, .added)
  > i,
.showcase-card-body > .add-cart:is(:hover, :focus-visible, .added) > i,
.rail-card > .add-cart:is(:hover, :focus-visible, .added) > i,
.product-detail-related-card
  > .add-cart:is(:hover, :focus-visible, .added)
  > i {
  color: var(--industrial-navy) !important;
}

#productView .product-detail-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 9px;
  margin-bottom: 14px;
}

#productView .product-detail-meta > .product-meta-pill {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border: 1px solid #e4e9ec;
  border-radius: 11px;
  background: #f8fafb;
  color: var(--industrial-navy);
  font-size: 12px;
  font-weight: 800;
}

#productView .product-detail-meta > .product-meta-pill > i {
  color: #a47b00;
  font-size: 15px;
}

#productView .product-detail-meta .product-meta-pill > span {
  display: grid;
  gap: 1px;
}

#productView .product-detail-meta .product-meta-pill small {
  color: #75828b;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.3;
}

#productView .product-detail-meta > .product-meta-code {
  direction: ltr;
  text-align: left;
}

#productView .product-detail-summary > h2 {
  margin: 13px 0 1px;
  font-size: clamp(25px, 2.5vw, 34px);
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: -0.035em;
}

#productView .product-detail-english-name {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 13px;
  color: #7a8790;
  font-family: Arial, sans-serif;
  font-size: clamp(14px, 1.35vw, 17px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.025em;
  overflow-wrap: anywhere;
}

#productView
  :is(.product-detail-content-panel, .product-detail-related)
  > header
  > span {
  margin-bottom: 6px;
  font-size: 12px;
}

#productView
  :is(.product-detail-content-panel, .product-detail-related)
  > header
  h2 {
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: -0.025em;
}

#productView .product-detail-tabs > a {
  font-size: 13px;
  font-weight: 800;
}

#productView .product-expert-grid strong,
#productView .product-spec-group h3 {
  font-size: 14px;
  font-weight: 850;
}

#productView .product-spec-group :is(dt, dd) {
  font-size: 12.5px;
  line-height: 1.8;
}

@media (max-width: 575px) {
  #productView .product-detail-summary {
    padding: 16px;
  }

  #productView .product-detail-summary > h2 {
    font-size: clamp(23px, 6vw, 28px);
  }

  #productView .product-detail-english-name {
    font-size: 14px;
  }

  #productView .product-detail-meta > .product-meta-pill {
    min-height: 36px;
    padding: 5px 8px;
    font-size: 11px;
  }

  #productView
    :is(.product-detail-content-panel, .product-detail-related)
    > header
    h2 {
    font-size: 21px;
  }
}

#productView .product-detail-intro-points {
  display: grid;
  gap: 9px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

#productView .product-detail-intro-points li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--industrial-steel);
  font-size: 12px;
  line-height: 1.9;
}

#productView .product-detail-intro-points i {
  flex: 0 0 auto;
  margin-top: 4px;
  color: #21845b;
}

#productView .product-feedback-form > .product-feedback-submit {
  grid-column: 1 / -1;
  justify-self: start;
  min-width: 156px;
  min-height: 46px;
  padding: 10px 20px;
  border: 1px solid var(--industrial-yellow);
  border-radius: 11px;
  background: var(--industrial-yellow);
  box-shadow: 0 5px 14px rgba(190, 144, 0, 0.2);
  color: var(--industrial-navy);
  font-size: 13px;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

#productView .product-feedback-form > .product-feedback-submit i {
  font-size: 15px;
}

#productView .product-feedback-form > .product-feedback-submit:hover {
  transform: translateY(-2px);
  border-color: var(--industrial-navy);
  background: var(--industrial-navy);
  box-shadow: 0 8px 18px rgba(16, 42, 67, 0.2);
  color: #fff;
}

#productView .product-feedback-form > .product-feedback-submit:focus-visible {
  outline: 3px solid rgba(16, 42, 67, 0.25);
  outline-offset: 3px;
}

#productView .product-main-feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 15px;
}

#productView .product-main-feature-chips > span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid #e6ebee;
  border-radius: 999px;
  background: #f8fafb;
  color: var(--industrial-steel);
  font-size: 11px;
  font-weight: 700;
}

#productView .product-main-feature-chips i {
  color: var(--industrial-yellow-dark);
}

#productView .product-detail-tabs {
  position: sticky;
  top: 172px;
  z-index: 20;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  margin: 0 0 18px;
  padding: 8px;
  border: 1px solid var(--industrial-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 22px rgba(16, 42, 67, 0.08);
  scrollbar-width: thin;
}

#productView .product-detail-tabs > a {
  display: inline-flex;
  min-height: 42px;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 9px;
  color: var(--industrial-steel);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

#productView .product-detail-tabs > a:hover,
#productView .product-detail-tabs > a:focus-visible {
  background: #fff6d2;
  color: var(--industrial-navy);
}

#productView .product-detail-tabs > a > i {
  color: var(--industrial-yellow-dark);
}

#productView .product-detail-tabs > a > b {
  display: grid;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  place-items: center;
  border-radius: 999px;
  background: #edf2f4;
  color: var(--industrial-navy);
  font-size: 10px;
}

#productView :is(.product-detail-content-panel, .product-detail-related) {
  scroll-margin-top: 184px;
  margin: 0 0 18px;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid rgba(16, 42, 67, 0.1);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 42, 67, 0.055);
}

#productView
  :is(.product-detail-content-panel, .product-detail-related)
  > header {
  margin-bottom: 17px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--industrial-line);
}

#productView
  :is(.product-detail-content-panel, .product-detail-related)
  > header
  > span {
  display: block;
  margin-bottom: 3px;
  color: var(--industrial-yellow-dark);
  font-size: 11px;
  font-weight: 800;
}

#productView
  :is(.product-detail-content-panel, .product-detail-related)
  > header
  h2 {
  margin: 0;
  color: var(--industrial-navy);
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 850;
}

#productView #product-intro > p {
  max-width: 900px;
  margin: 0;
  color: var(--industrial-muted);
  font-size: 13px;
  line-height: 2.2;
}

#productView .product-expert-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#productView .product-expert-grid > div {
  min-height: 150px;
  padding: 17px;
  border: 1px solid #e5ebee;
  border-radius: 13px;
  background: linear-gradient(145deg, #fff, #f6f8f9);
}

#productView .product-expert-grid > div > i {
  display: grid;
  width: 36px;
  height: 36px;
  margin-bottom: 10px;
  place-items: center;
  border-radius: 10px;
  background: #fff4c4;
  color: var(--industrial-navy);
  font-size: 17px;
}

#productView .product-expert-grid strong {
  color: var(--industrial-navy);
  font-size: 13px;
}

#productView .product-expert-grid p {
  margin: 6px 0 0;
  color: var(--industrial-muted);
  font-size: 11.5px;
  line-height: 1.9;
}

#productView .product-spec-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#productView .product-spec-group {
  padding: 17px;
  border: 1px solid #e5ebee;
  border-radius: 13px;
  background: #fbfcfc;
}

#productView .product-spec-group h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--industrial-navy);
  font-size: 14px;
}

#productView .product-spec-group h3 i {
  color: var(--industrial-yellow-dark);
}

#productView .product-spec-group dl {
  margin: 0;
}

#productView .product-spec-group dl > div {
  display: flex;
  min-height: 39px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #e9eef0;
  font-size: 12px;
}

#productView .product-spec-group dl > div:last-child {
  border-bottom: 0;
}

#productView .product-spec-group dt {
  color: var(--industrial-muted);
}

#productView .product-spec-group dd {
  margin: 0;
  color: var(--industrial-navy);
  font-weight: 750;
  text-align: left;
}

#productView .product-feedback-list {
  display: grid;
  gap: 9px;
  margin-bottom: 17px;
}

#productView .product-feedback-empty {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 22px 14px;
  border: 1px dashed #d8e0e4;
  border-radius: 13px;
  background: #f8fafb;
  color: var(--industrial-muted);
  text-align: center;
}

#productView .product-feedback-empty > i {
  color: var(--industrial-yellow-dark);
  font-size: 23px;
}

#productView .product-feedback-empty strong {
  color: var(--industrial-navy);
  font-size: 13px;
}

#productView .product-feedback-empty span {
  font-size: 11px;
}

#productView .product-feedback-card {
  padding: 13px 15px;
  border: 1px solid #e5ebee;
  border-radius: 12px;
  background: #fff;
}

#productView .product-feedback-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#productView .product-feedback-meta strong {
  color: var(--industrial-navy);
  font-size: 12px;
}

#productView .product-feedback-stars {
  color: #ae8200;
  letter-spacing: 2px;
}

#productView .product-feedback-card p {
  margin: 7px 0 0;
  color: var(--industrial-muted);
  font-size: 12px;
  line-height: 1.9;
}

#productView .product-feedback-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.5fr);
  gap: 12px;
  padding: 16px;
  border: 1px solid #e5ebee;
  border-radius: 13px;
  background: #f8fafb;
}

#productView .product-feedback-form label {
  display: grid;
  gap: 6px;
  color: var(--industrial-navy);
  font-size: 11px;
  font-weight: 700;
}

#productView .product-feedback-form :is(input, select, textarea) {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #dce4e8 !important;
  border-radius: 9px;
  background: #fff !important;
  color: var(--industrial-ink) !important;
  font: inherit;
  font-size: 12px;
}

#productView .product-feedback-form textarea {
  resize: vertical;
}

#productView .product-feedback-wide {
  grid-column: 1 / -1;
}

#productView .product-feedback-submit {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 17px;
  border: 1px solid var(--industrial-navy);
  border-radius: 9px;
  background: var(--industrial-navy);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

#productView .product-feedback-submit:hover {
  border-color: var(--industrial-yellow);
  background: var(--industrial-yellow);
  color: var(--industrial-navy);
}

#productView .product-feedback-note {
  align-self: center;
  color: var(--industrial-muted);
  font-size: 10px;
}

#productView .product-detail-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

#productView .product-detail-related-card {
  min-width: 0;
  min-height: 390px;
  margin: 0;
}

#productView .product-detail-related-card .product-image {
  display: block;
  height: 190px;
  min-height: 190px;
  overflow: hidden;
  background: #f2f5f6;
}

#productView .product-detail-related-card .product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#productView .product-detail-related-card .product-info {
  min-height: 110px;
  padding: 12px !important;
}

#productView .product-detail-related-card .product-info h3 {
  min-height: 43px;
  margin: 5px 0;
  font-size: 13px;
}

#productView .product-detail-related-card .product-info h3 a {
  color: inherit;
  text-decoration: none;
}

#productView .product-detail-related-card > .add-cart {
  width: calc(100% - 20px);
  min-height: 39px;
  margin: auto 10px 10px;
  font-size: 11px;
}

@media (max-width: 991px) {
  #productView .product-detail-tabs {
    top: 82px;
  }

  #productView :is(.product-detail-content-panel, .product-detail-related) {
    scroll-margin-top: 92px;
  }

  #productView .product-detail-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  #productView .product-detail-media-frame,
  #productView .product-detail-media-frame :is(img, video) {
    min-height: 270px;
    height: 270px;
    max-height: none;
  }

  #productView .product-detail-media-frame :is(img, video) {
    padding: 18px;
  }

  #productView .product-detail-thumb {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }

  #productView .product-detail-image-frame {
    height: 270px;
    min-height: 270px;
  }

  #productView .product-detail-media-frame {
    height: 100%;
    min-height: 0;
  }

  #productView .product-detail-media-frame :is(img, video) {
    height: 100%;
    min-height: 0;
    padding: 0;
    object-fit: contain;
  }

  #productView .product-detail-tabs {
    top: 78px;
    padding: 5px;
  }

  #productView .product-detail-tabs > a {
    min-height: 38px;
    padding-inline: 10px;
    font-size: 11px;
  }

  #productView .product-expert-grid,
  #productView .product-spec-groups {
    grid-template-columns: minmax(0, 1fr);
  }

  #productView .product-expert-grid > div {
    min-height: 0;
  }

  #productView .product-feedback-form {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }

  #productView .product-feedback-wide {
    grid-column: auto;
  }

  #productView .product-detail-related-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #productView .product-detail-related-card {
    min-height: 390px;
  }
}
#mainNav .nav-actions .nav-shortcut {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(155deg, #fff, #f5f7f9);
  transition:
    border-color 0.2s,
    color 0.2s,
    transform 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}

#mainNav .nav-actions .nav-shortcut:hover {
  transform: translateY(-2px);
  border-color: var(--industrial-yellow);
  background: #fff8dc;
  color: var(--industrial-navy) !important;
  box-shadow: 0 7px 16px rgba(16, 42, 67, 0.13);
}

#mainNav .nav-actions .nav-shortcut:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--industrial-yellow) 70%, white);
  outline-offset: 3px;
}

#mainNav .nav-actions .nav-shortcut.active > i {
  color: #b63c4b;
}

#bestsellersSlider .showcase-card-body > .add-cart > i {
  color: var(--industrial-yellow) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

:is(
    .search-product-price,
    .product-card-sale-price,
    .favorite-item-price,
    .compare-price-values,
    .product-info > p
  ).has-discount {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "current discount"
    "old discount";
  align-items: center;
  column-gap: 10px;
  row-gap: 0;
}

:is(
    .search-product-price,
    .product-card-sale-price,
    .favorite-item-price,
    .compare-price-values,
    .product-info > p
  ).has-discount > .product-price-current {
  grid-area: current;
  justify-self: start;
  margin: 0;
  text-align: right;
}

:is(
    .search-product-price,
    .product-card-sale-price,
    .favorite-item-price,
    .compare-price-values,
    .product-info > p
  ).has-discount .price-old {
  grid-area: old;
  justify-self: start;
  margin: 0;
  text-align: right;
}

:is(
    .search-product-price,
    .product-card-sale-price,
    .favorite-item-price,
    .compare-price-values,
    .product-info > p
  ).has-discount .product-price-discount {
  grid-area: discount;
  align-self: start;
  justify-self: end;
}

#productView .product-detail-related-card .product-info > p.has-discount {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "current discount"
    "old discount";
}

#bestsellersSlider
  .showcase-card-body
  > .add-cart:is(:hover, :focus-visible, .added)
  > i {
  color: var(--industrial-navy) !important;
}

#newestSlider .showcase-card-body > .add-cart > i {
  color: var(--industrial-yellow) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#newestSlider
  .showcase-card-body
  > .add-cart:is(:hover, :focus-visible, .added)
  > i {
  color: var(--industrial-navy) !important;
}

@media (max-width: 991px) {
  html body > #favoritesPanel,
  html body > #favoritesPanel.open,
  html body > #comparePanel,
  html body > #comparePanel.open {
    z-index: 7000 !important;
  }
}

@media (min-width: 992px) {
  .home-page #mainNav .nav-link:is(:hover, .active, :focus-visible),
  .home-page #mainNav .dropdown.show > .nav-link,
  .inner-page #mainNav .nav-link:is(:hover, .active, :focus-visible),
  .inner-page #mainNav .dropdown.show > .nav-link {
    border-color: rgba(246, 197, 21, 0.28) !important;
    background: rgba(246, 197, 21, 0.1) !important;
    color: var(--industrial-yellow) !important;
  }

  .home-page
    #mainNav
    .navbar-nav
    > .nav-item:first-child
    > .nav-link:is(:hover, .active, :focus-visible),
  .inner-page
    #mainNav
    .navbar-nav
    > .nav-item:first-child
    > .nav-link:is(:hover, .active, :focus-visible) {
    border-color: rgba(255, 223, 84, 0.72) !important;
    background: var(--industrial-yellow) !important;
    color: var(--industrial-navy) !important;
    box-shadow: 0 4px 14px rgba(246, 197, 21, 0.28);
  }

  .home-page
    #mainNav
    .navbar-nav
    > .nav-item:first-child
    > .nav-link:is(:hover, .active, :focus-visible)
    .nav-menu-icon,
  .inner-page
    #mainNav
    .navbar-nav
    > .nav-item:first-child
    > .nav-link:is(:hover, .active, :focus-visible)
    .nav-menu-icon {
    color: var(--industrial-navy) !important;
    transform: scale(1.12);
  }
}

#productView .product-detail-image-code {
  display: none !important;
}

.product-mobile-buybar {
  display: none;
}

@media (max-width: 767px) {
  body:has(#productView .product-detail-layout) {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }
  #productView .product-mobile-buybar {
    position: fixed;
    z-index: 1040;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 12px;
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px 8px 14px;
    border: 1px solid rgba(16, 42, 67, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 10px 34px rgba(16, 42, 67, 0.2);
    backdrop-filter: blur(12px);
  }
  #productView .product-mobile-buy-price {
    display: grid;
    min-width: 0;
    gap: 2px;
  }
  #productView .product-mobile-buy-price small {
    color: var(--industrial-muted);
    font-size: 10px;
  }
  #productView .product-mobile-buy-price strong {
    color: var(--industrial-navy);
    font-size: 14px;
    white-space: nowrap;
  }
  #productView .product-mobile-buy-button {
    display: inline-flex;
    min-height: 44px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border: 0;
    border-radius: 11px;
    background: var(--industrial-navy);
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
  }
  #productView .product-mobile-buy-button i {
    color: var(--industrial-yellow);
    font-size: 16px;
  }
  #productView .product-mobile-buy-button:active {
    transform: scale(0.98);
  }
}

#productView .product-detail-meta {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 9px;
}

#productView .product-detail-meta > .product-meta-pill {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 8px 12px;
  border-radius: 13px;
}

#productView .product-detail-meta .product-meta-pill small {
  font-size: 10px;
}
#productView .product-detail-meta .product-meta-pill strong {
  font-size: 13px;
  line-height: 1.5;
}
#productView .product-detail-meta > .product-meta-brand {
  grid-column: 1;
  grid-row: 1;
}
#productView .product-detail-meta > .product-meta-code {
  grid-column: 2;
  grid-row: 1;
}
#productView .product-detail-meta > .product-meta-category {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 0;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-color: #e9dfcd;
  background: linear-gradient(135deg, #fffdf8, #f7f3eb);
}
#productView .product-detail-meta .product-meta-category-content {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 8px;
}
#productView .product-detail-meta .product-meta-category-content > small {
  color: #7d8790;
  font-size: 10px;
  font-weight: 700;
}
#productView .product-detail-meta .product-meta-path {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--industrial-navy);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
}
#productView .product-detail-meta .product-meta-path > li {
  position: relative;
  max-width: 100%;
  padding: 5px 10px;
  border: 1px solid #e8e0d3;
  border-radius: 8px;
  background: #fff;
  overflow-wrap: anywhere;
}
#productView
  .product-detail-meta
  .product-meta-path
  > li:not(:last-child)::after {
  position: absolute;
  top: 50%;
  left: -16px;
  color: #b3a78f;
  content: "‹";
  font-size: 16px;
  font-weight: 500;
  transform: translateY(-52%);
}

@media (max-width: 575px) {
  #productView .product-detail-meta {
    gap: 8px;
  }
  #productView .product-detail-meta > .product-meta-category {
    gap: 9px;
    padding: 11px;
  }
  #productView .product-detail-meta .product-meta-path {
    gap: 8px 20px;
    font-size: 11px;
  }
  #productView .product-detail-meta .product-meta-path > li {
    padding: 5px 8px;
  }
}

#productView .product-review-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: 20px;
  direction: rtl;
}

#productView .product-review-form-column,
#productView .product-review-list-column {
  min-width: 0;
}
#productView .product-review-list-column .product-feedback-list {
  gap: 12px;
  margin: 0;
}
#productView .product-review-list-column .product-feedback-card {
  padding: 16px;
  border-radius: 14px;
  box-shadow: 0 5px 16px rgba(16, 42, 67, 0.045);
}
#productView .product-feedback-avatar {
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  overflow: hidden;
  border: 1px solid #e7dcc8;
  border-radius: 50%;
  object-fit: cover;
}
#productView .product-review-list-column .product-feedback-meta {
  justify-content: flex-start;
}
#productView .product-review-list-column .product-feedback-meta strong {
  margin-inline-end: auto;
  font-size: 14px;
}
#productView .product-review-list-column .product-feedback-stars {
  white-space: nowrap;
  font-size: 14px;
}
#productView .product-review-list-column .product-feedback-card > p {
  font-size: 13px;
  line-height: 2;
}
#productView .product-review-form-column .product-feedback-form {
  grid-template-columns: minmax(0, 1fr) minmax(125px, 0.55fr);
}
#productView
  .product-review-form-column
  .product-feedback-form
  label:first-child {
  grid-column: 1 / -1;
}

.search-main
  :is(
    .filter-panel,
    .search-box,
    .sort-box,
    .search-product,
    .filter-chip,
    .clear-filters
  ) {
  border-color: #d8e1e6 !important;
}
.search-main .filter-panel,
.search-main .search-box,
.search-main .sort-box,
.search-main .search-product {
  border-width: 1px !important;
}
.search-main .filter-panel {
  border-radius: 16px;
}
.search-main .results-toolbar :is(.search-box, .sort-box) {
  min-height: 54px;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(16, 42, 67, 0.035);
}
.search-main .results-toolbar :is(.search-box, .sort-box):focus-within {
  border-color: #c4a24d !important;
  box-shadow: 0 0 0 3px rgba(246, 197, 21, 0.13);
}
.search-main .search-box input,
.search-main .sort-box select {
  font-family: inherit;
  font-size: 14px;
}
.search-main .sort-box select {
  min-height: 38px;
  border: 1px solid #d8e1e6;
  border-radius: 8px;
  background: #fff;
}
.search-main .sort-box label,
.search-main .filter-option,
.search-main .price-filter small,
.search-main .results-summary p,
.search-main .search-product-heading small,
.search-main .search-product .search-product-price small,
.search-main .product-specs span {
  font-size: 13px;
}
.search-main .filter-chip,
.search-main .product-brand {
  font-size: 11px;
}
.search-main .filter-group {
  border-color: #d8e1e6;
}
.search-main .filter-option {
  min-height: 40px;
  padding: 5px 9px;
  border: 1px solid #d8e1e6;
  border-radius: 9px;
  background: #fff;
}
.search-main .filter-group.open .filter-options {
  display: grid;
  gap: 7px;
}
.search-main .filter-option input {
  width: 17px;
  height: 17px;
}
.search-main .search-product {
  border-radius: 15px;
}

@media (max-width: 767px) {
  #productView .product-review-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
  }
}

@media (max-width: 575px) {
  #productView .product-review-form-column .product-feedback-form {
    grid-template-columns: minmax(0, 1fr);
  }
  #productView
    .product-review-form-column
    .product-feedback-form
    label:first-child {
    grid-column: auto;
  }
  #productView .product-review-list-column .product-feedback-card {
    padding: 13px;
  }
  #productView .product-feedback-avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  #productView .product-review-list-column .product-feedback-meta strong {
    font-size: 13px;
  }
  .search-main .results-toolbar :is(.search-box, .sort-box) {
    min-height: 50px;
  }
  .search-main .search-box input,
  .search-main .sort-box select,
  .search-main .sort-box label {
    font-size: 13px;
  }
}

#productView .product-detail-intro,
#productView #product-intro > p,
#productView .product-detail-description,
#productView .product-expert-grid p,
#productView .product-spec-group dl > div,
#productView .product-question-faq > p,
#productView .product-review-list-column .product-feedback-card > p,
#productView .product-feedback-admin-reply > p {
  font-size: 14px;
}

#productView .product-expert-grid strong,
#productView .product-spec-group h3,
#productView .product-question-faq .product-feedback-meta strong,
#productView .product-review-list-column .product-feedback-meta strong {
  font-size: 15px;
}

#productView .product-feedback-form label,
#productView .product-feedback-form :is(input, select, textarea),
#productView .product-feedback-submit,
#productView .product-feedback-admin-meta > span {
  font-size: 13px;
}

#productView .product-feedback-admin-meta > small,
#productView .product-feedback-note,
#productView .product-spec-group dt {
  font-size: 12px;
}

#productView .product-feedback-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 16px 0 4px;
  direction: rtl;
}

#productView .product-feedback-pagination button {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #d8e1e6;
  border-radius: 10px;
  background: #fff;
  color: #19344c;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

#productView .product-feedback-pagination button:hover:not(:disabled),
#productView .product-feedback-pagination button[aria-current="page"] {
  border-color: #17344d;
  background: #17344d;
  color: #fff;
}

#productView .product-feedback-pagination button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#productView .product-detail-related-card .product-image {
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
  padding: 0;
  background: #eef2f4;
}

#productView .product-detail-related-card .product-image img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  object-position: center;
}

#productView .product-detail-related-card .product-info {
  min-height: 128px;
}

#productView .product-related-meta {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 7px;
}

#productView .product-related-brand {
  color: #526573;
  font-size: 12px;
  font-weight: 800;
}

#productView .product-related-category {
  display: inline-flex;
  max-width: 100%;
  min-height: 25px;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid #f0d878;
  border-radius: 999px;
  background: #fff8d9;
  color: #725800;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
  white-space: normal;
}

#productView .product-related-category i {
  flex: 0 0 auto;
  color: #8c6d00;
}

.purchase-benefits--showcase .benefits-intro p {
  max-width: 430px;
  min-height: 58px;
  display: flex;
  align-items: center;
  padding: 11px 16px;
  border: 1px solid #e0e6e9;
  border-inline-start: 3px solid var(--industrial-yellow-dark);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(16, 42, 67, 0.05);
  color: var(--industrial-navy);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.9;
}

@media (max-width: 767px) {
  .purchase-benefits--showcase .benefits-intro p {
    max-width: none;
    min-height: 0;
    padding: 10px 13px;
    font-size: 14px;
  }
}

#productView .product-detail-tabs {
  border-color: #e9e3d8;
  background: rgba(255, 254, 251, 0.97);
  box-shadow: 0 9px 24px rgba(16, 42, 67, 0.07);
}

#productView .product-detail-tabs > a {
  border: 1px solid transparent;
}

#productView .product-detail-tabs > a:is(:hover, :focus-visible, :active) {
  border-color: #e6ddcc;
  background: #f5f1e8;
  color: var(--industrial-navy);
}

#productView .product-detail-tabs > a > i {
  color: #9c8050;
}

#productView .product-detail-tabs > a > b {
  background: #f1eee7;
  color: #655a48;
}

#productView :is(.product-detail-content-panel, .product-detail-related) {
  position: relative;
  overflow: hidden;
  border-color: #e8e2d7;
  background: linear-gradient(145deg, #fff 0%, #fdfbf7 100%);
  box-shadow: 0 12px 30px rgba(16, 42, 67, 0.06);
}

#productView
  :is(.product-detail-content-panel, .product-detail-related)
  > header {
  border-bottom-color: #ebe6dd;
}

#productView
  :is(.product-detail-content-panel, .product-detail-related)
  > header
  > span {
  width: fit-content;
  padding: 4px 9px;
  border: 1px solid #eee6d8;
  border-radius: 999px;
  background: #f8f5ef;
  color: #91774d;
}

#productView .product-expert-grid > div {
  border-color: #e9e5dc;
  background: linear-gradient(145deg, #fff, #faf9f6);
  box-shadow: 0 6px 16px rgba(16, 42, 67, 0.035);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

#productView .product-expert-grid > div:hover {
  transform: translateY(-2px);
  border-color: #d9c9aa;
  box-shadow: 0 10px 22px rgba(16, 42, 67, 0.08);
}

#productView .product-expert-grid > div > i {
  border: 1px solid #e9e1d1;
  background: #f4efe5;
  color: #8d744b;
}

#productView .product-spec-group {
  border-color: #e9e5dc;
  background: #fcfbf8;
}

#productView .product-spec-group h3 i,
#productView .product-feedback-empty > i {
  color: #9b8052;
}

#productView .product-spec-group dl > div {
  padding: 5px 9px;
  border-bottom-color: #ece8e0;
}

#productView .product-spec-group dl > div:nth-child(even) {
  border-radius: 7px;
  background: #f6f5f1;
}

#productView .product-feedback-card,
#productView .product-question-faq {
  border-color: #e9e4db;
  background: #fff;
  box-shadow: 0 6px 17px rgba(16, 42, 67, 0.045);
}

#productView .product-feedback-form {
  border-color: #e8e2d7;
  border-radius: 14px;
  background: #faf8f3;
}

#productView .product-feedback-form > .product-feedback-submit {
  border-color: #dfd2b9;
  background: #eee6d7;
  box-shadow: none;
  color: var(--industrial-navy);
}

#productView .product-feedback-form > .product-feedback-submit i {
  color: #91774d;
}

#productView .product-feedback-form > .product-feedback-submit:hover {
  border-color: var(--industrial-navy);
  background: var(--industrial-navy);
  color: #fff;
}

#productView .product-feedback-form > .product-feedback-submit:hover i {
  color: #e6d6b7;
}

#productView .product-related-category {
  border-color: #e8e0d2;
  background: #f7f4ee;
  color: #716149;
}

#productView .product-related-category i {
  color: #9b8052;
}

@media (min-width: 992px) {
  .inner-page
    #mainNav
    .navbar-nav
    > .nav-item:not(.dropdown)
    > .nav-link::after {
    right: 14px;
    bottom: 10px;
    left: 14px;
    background: var(--industrial-yellow) !important;
  }
}

:is(
    .product-card .product-image,
    .search-product .search-product-image,
    .showcase-card .product-image,
    .rail-card .rail-image,
    .product-card-actions
  )
  > :is(.favorite, .compare-trigger) {
  display: grid !important;
  box-sizing: border-box;
  place-items: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}

:is(
    .product-card .product-image,
    .search-product .search-product-image,
    .showcase-card .product-image,
    .rail-card .rail-image,
    .product-card-actions
  )
  > :is(.favorite, .compare-trigger)
  > i {
  display: grid !important;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  place-items: center !important;
  line-height: 1 !important;
}

@media (max-width: 575px) {
  #productView :is(.product-detail-content-panel, .product-detail-related) {
    padding: 17px 14px;
    border-radius: 15px;
  }

  #productView .product-expert-grid > div {
    min-height: 0;
    padding: 14px;
  }
}

:root {
  --site-scrollbar-track: #edf1f4;
  --site-scrollbar-thumb: #8493a1;
  --site-scrollbar-thumb-hover: #173653;
  --site-scrollbar-size: 7px;
}

html,
body,
* {
  scrollbar-color: var(--site-scrollbar-thumb) var(--site-scrollbar-track);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: var(--site-scrollbar-size);
  height: var(--site-scrollbar-size);
}

::-webkit-scrollbar-track {
  border-radius: 999px;
  background: var(--site-scrollbar-track);
}

::-webkit-scrollbar-thumb {
  min-height: 40px;
  border: 2px solid var(--site-scrollbar-track);
  border-radius: 999px;
  background: var(--site-scrollbar-thumb);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--site-scrollbar-thumb-hover);
}

.ui-scrollbar,
.ui-scrollbar--navy,
.ui-scrollbar--gold-on-dark,
.electrical-stories,
.header-search-suggestions {
  scrollbar-color: var(--site-scrollbar-thumb) var(--site-scrollbar-track);
  scrollbar-width: thin;
}

:is(
  .ui-scrollbar,
  .ui-scrollbar--navy,
  .ui-scrollbar--gold-on-dark,
  .electrical-stories,
  .header-search-suggestions
)::-webkit-scrollbar {
  width: var(--site-scrollbar-size);
  height: var(--site-scrollbar-size);
}

:is(
  .ui-scrollbar,
  .ui-scrollbar--navy,
  .ui-scrollbar--gold-on-dark,
  .electrical-stories,
  .header-search-suggestions
)::-webkit-scrollbar-track {
  margin: 0;
  background: var(--site-scrollbar-track);
}

:is(
  .ui-scrollbar,
  .ui-scrollbar--navy,
  .ui-scrollbar--gold-on-dark,
  .electrical-stories,
  .header-search-suggestions
)::-webkit-scrollbar-thumb {
  border-color: var(--site-scrollbar-track);
  background: var(--site-scrollbar-thumb);
}

:is(
    .ui-scrollbar,
    .ui-scrollbar--navy,
    .ui-scrollbar--gold-on-dark,
    .electrical-stories,
    .header-search-suggestions
  )::-webkit-scrollbar-thumb:hover {
  background: var(--site-scrollbar-thumb-hover);
}

@media (max-width: 767px) {
  html,
  body {
    scrollbar-width: none !important;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}

#questionForm.flow-card,
#addresses #addressList > .flow-empty {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

#mainNav .nav-actions .cart-btn.cart-icon-theme:is(:hover, :focus-visible),
#mainNav .nav-actions .cart-wrap.open .cart-btn.cart-icon-theme,
#mainNav .nav-actions .favorites-toggle:is(:hover, :focus-visible),
#mainNav .nav-actions .favorites-wrap.open .favorites-toggle,
#mainNav .nav-actions .compare-toggle:is(:hover, :focus-visible),
#mainNav .nav-actions .compare-wrap.open .compare-toggle {
  transform: translateY(-1px);
  border-color: var(--industrial-yellow) !important;
  background-color: #fff8d9 !important;
  color: var(--industrial-yellow-dark) !important;
  box-shadow: 0 3px 10px rgba(16, 42, 67, 0.12) !important;
}

#mainNav .nav-actions .favorites-toggle.list-received,
#mainNav .nav-actions .compare-toggle.list-received {
  z-index: 2;
  border-color: #e5b51b !important;
  background: #f6d75e !important;
  color: #765700 !important;
  box-shadow:
    0 0 0 5px rgba(246, 197, 21, 0.2),
    0 7px 18px rgba(166, 123, 0, 0.22) !important;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
  animation: cartReceive 0.46s cubic-bezier(0.2, 0.85, 0.25, 1);
}

@media (prefers-reduced-motion: reduce) {
  #mainNav .nav-actions .favorites-toggle.list-received,
  #mainNav .nav-actions .compare-toggle.list-received {
    animation: none;
  }
}

/* Clear, tactile quantity stepper in the header cart drawer. */
#cartPanel .cart-item-info .cart-quantity {
  display: inline-flex !important;
  width: fit-content !important;
  min-width: 120px !important;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 5px !important;
  margin-top: 7px;
  padding: 4px 6px !important;
  box-sizing: border-box;
  border: 1px solid #ead9a4 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #fffdf6, #fbf2d7) !important;
  box-shadow:
    inset 0 1px 2px rgba(16, 42, 67, 0.04),
    0 3px 8px rgba(166, 123, 0, 0.08) !important;
  direction: ltr;
}

#cartPanel .cart-item-info .cart-quantity > button {
  display: grid;
  width: 29px !important;
  min-width: 29px;
  height: 29px !important;
  min-height: 29px;
  padding: 0 !important;
  place-items: center;
  border: 1px solid #e8d595 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #18344c !important;
  font-size: 18px !important;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(16, 42, 67, 0.08) !important;
  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

#cartPanel .cart-item-info .cart-quantity > button[data-action="plus"] {
  border-color: #e8bd34 !important;
  background: linear-gradient(145deg, #ffdf68, #f6c515) !important;
}

#cartPanel .cart-item-info .cart-quantity > button:hover,
#cartPanel .cart-item-info .cart-quantity > button:focus-visible {
  transform: translateY(-1px) scale(1.07);
  border-color: #17344b !important;
  background: #17344b !important;
  color: #ffdb4c !important;
  box-shadow: 0 4px 9px rgba(16, 42, 67, 0.18) !important;
}

#cartPanel .cart-item-info .cart-quantity > button:active {
  transform: scale(0.94);
}

#cartPanel .cart-item-info .cart-quantity > b {
  display: grid;
  min-width: 27px;
  height: 28px;
  padding-inline: 3px;
  place-items: center;
  border-radius: 9px;
  background: #fff;
  color: #17344b;
  font-size: 14px !important;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

#mainNav .cart-btn.cart-icon-theme > b {
  border-color: var(--industrial-navy);
  background: var(--industrial-yellow);
  box-shadow: 0 2px 6px rgba(16, 42, 67, 0.2);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

#mainNav .cart-btn.cart-icon-theme:hover > b,
#mainNav .cart-wrap.open .cart-btn.cart-icon-theme > b {
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(16, 42, 67, 0.2);
}

/* Keep the header search's focus treatment on the outer frame only. */
html
  body
  #mainNav
  .home-header-search
  > input[type="search"]:is(:focus, :focus-visible) {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Match the favorite and compare drawers to the cart drawer's scale and type. */
#favoritesPanel,
#comparePanel {
  width: min(410px, calc(100vw - 24px)) !important;
  border: 1px solid rgba(180, 137, 77, 0.32) !important;
  border-radius: 22px !important;
  background: rgba(255, 253, 249, 0.98) !important;
  box-shadow:
    0 28px 80px rgba(4, 20, 55, 0.24),
    0 4px 18px rgba(4, 20, 55, 0.08) !important;
}

:is(#favoritesPanel, #comparePanel) .compare-panel-head {
  min-height: 84px;
  padding: 0 22px;
  background: linear-gradient(135deg, #0b2868 0%, var(--color-navy) 100%);
}

:is(#favoritesPanel, #comparePanel) .compare-panel-head > span {
  gap: 12px;
}

:is(#favoritesPanel, #comparePanel) .compare-panel-head > span > i {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.13);
  color: #ffdb4c;
  font-size: 20px;
}

:is(#favoritesPanel, #comparePanel) .compare-panel-head strong {
  color: #fff;
  font-size: 16px;
  font-weight: 750;
}

:is(#favoritesPanel, #comparePanel) .compare-panel-head > button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 13px;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

:is(#favoritesPanel, #comparePanel) .compare-panel-head > button:hover {
  transform: rotate(90deg);
  background: rgba(255, 255, 255, 0.16);
}

:is(#favoritesPanel, #comparePanel) .compare-panel-count {
  padding: 12px 20px 6px;
  font-size: 11px;
  line-height: 1.7;
}

:is(#favoritesPanel, #comparePanel) .compare-panel-items {
  max-height: 340px;
  padding: 8px 10px 12px;
  background: linear-gradient(180deg, #fffdf9, #faf7f1);
}

:is(#favoritesPanel, #comparePanel) .compare-panel-item {
  grid-template-columns: 76px minmax(0, 1fr) 36px;
  gap: 14px;
  margin-bottom: 8px;
  padding: 11px;
  border: 1px solid rgba(11, 34, 117, 0.08);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(11, 34, 117, 0.055);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

:is(#favoritesPanel, #comparePanel) .compare-panel-item:hover {
  transform: translateY(-2px);
  border-color: rgba(180, 137, 77, 0.32);
  box-shadow: 0 9px 22px rgba(11, 34, 117, 0.1);
}

:is(#favoritesPanel, #comparePanel) .compare-panel-item img {
  width: 76px;
  height: 84px;
  border-radius: 11px;
  background: #f4efe7;
}

:is(#favoritesPanel, #comparePanel) .compare-panel-item strong {
  color: #0b2868;
  font-size: 15px;
  line-height: 1.65;
}

:is(#favoritesPanel, #comparePanel) .compare-panel-item small {
  color: #9a6d31;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

:is(#favoritesPanel, #comparePanel) .compare-panel-item > button {
  width: 34px;
  height: 34px;
  border-color: rgba(180, 137, 77, 0.2);
  border-radius: 10px;
  background: #f8f4ec;
  color: #a75555;
}

:is(#favoritesPanel, #comparePanel) .compare-panel-item > button:hover {
  border-color: #c43d3d;
  background: #fff0ef;
  color: #c43d3d;
}

:is(#favoritesPanel, #comparePanel) .compare-panel-link {
  min-height: 52px;
  padding-inline: 20px;
  background: #f7f4ee;
  font-size: 13px;
}

/* Preserve the full product photo and leave a clear frame around it. */
.home-page
  :is(
    .product-card .product-image img,
    .showcase-card .product-image img,
    .rail-card .rail-image img
  ) {
  box-sizing: border-box;
  padding: 8px !important;
  border: 1px solid #dce3e8;
  border-radius: 12px;
  background: #fff !important;
  object-fit: contain !important;
  object-position: center;
}

/* Search cards use the entire image frame, without the padding used by home cards. */
.inner-page .search-product.product-card .search-product-image img {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: cover !important;
  object-position: center;
}

/* Give every header counter enough room for multi-digit quantities. */
#mainNav .nav-count,
#mainNav .cart-btn.cart-icon-theme > b {
  width: max-content;
  min-width: 28px !important;
  height: 26px !important;
  padding-inline: 5px !important;
  white-space: nowrap;
  font-size: 13px !important;
  line-height: 1;
}

/* Turn the purchase reassurance line into a clear one-line badge. */
.purchase-benefits--showcase .benefits-kicker {
  display: inline-flex;
  max-width: 100%;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid rgba(192, 147, 17, 0.32);
  border-radius: 999px;
  background: linear-gradient(135deg, #fff9df, #fff1b8);
  box-shadow: 0 3px 10px rgba(166, 123, 0, 0.09);
  color: #795c00;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}

.purchase-benefits--showcase .benefits-kicker i {
  flex: 0 0 auto;
  color: #b58a00;
  font-size: 14px;
}

/* Align the remove action with the quantity stepper on each cart row. */
#cartPanel .cart-item > .cart-remove {
  align-self: end;
  margin-bottom: 2px;
}

/* Branded best sellers use the full image frame instead of the padded fit. */
#collection .product-card .product-image > img,
#collection .product-card .product-image > a > img {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  object-fit: cover !important;
  object-position: center;
}

/* Use the same temporary gold receive state for the header cart icon. */
#mainNav .nav-actions .cart-btn.cart-icon-theme {
  transition:
    transform 0.2s ease,
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

#mainNav .nav-actions .cart-btn.cart-icon-theme.cart-received {
  border-color: #e5b51b !important;
  background: #f6d75e !important;
  color: #765700 !important;
  box-shadow:
    0 0 0 5px rgba(246, 197, 21, 0.2),
    0 7px 18px rgba(166, 123, 0, 0.22) !important;
}

/* Keep small labels readable across the light and dark surfaces they sit on. */
.home-page .eyebrow.dark {
  color: #684d14 !important;
}

.home-page .recommend-head > div > .eyebrow.dark {
  color: var(--industrial-navy) !important;
}

.inner-page
  main
  :where(.page-kicker, .article-eyebrow):not(.page-hero .page-kicker) {
  color: #76551f !important;
}

.inner-page main .page-hero .page-kicker,
.inner-page main .search-intro .page-kicker {
  color: var(--industrial-yellow) !important;
}

.electrical-art-badge {
  color: var(--industrial-navy) !important;
}

.search-main .filter-chip {
  border-color: #d8bc68 !important;
  background: #fff6d9 !important;
  color: #594300 !important;
}

/* Match product copy and pricing across the cart, compare, and favorites drawers. */
#cartPanel .cart-item-info > strong,
:is(#favoritesPanel, #comparePanel) .compare-panel-item > span > strong {
  font-size: 12px !important;
  line-height: 1.6;
}

#cartPanel .cart-item-info > span,
:is(#favoritesPanel, #comparePanel) .compare-panel-item > span > small {
  font-size: 14px !important;
  line-height: 1.5;
}

/* One quiet, branded delete control for all three header panels. */
#cartPanel .cart-item > .cart-remove,
:is(#favoritesPanel, #comparePanel) .compare-panel-item > .cart-remove,
#cartPanel .cart-item > .cart-remove:hover,
:is(#favoritesPanel, #comparePanel) .compare-panel-item > .cart-remove:hover,
#cartPanel .cart-item > .cart-remove:focus,
:is(#favoritesPanel, #comparePanel) .compare-panel-item > .cart-remove:focus,
#cartPanel .cart-item > .cart-remove:active,
:is(#favoritesPanel, #comparePanel) .compare-panel-item > .cart-remove:active {
  display: grid !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  place-items: center;
  border: 1px solid rgba(180, 137, 77, 0.24) !important;
  border-radius: 10px !important;
  background: #f8f4ec !important;
  box-shadow: none !important;
  color: #8a5a50 !important;
  transform: none;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

#cartPanel .cart-item > .cart-remove:is(:hover, :focus-visible, :active),
:is(#favoritesPanel, #comparePanel)
  .compare-panel-item
  > .cart-remove:is(:hover, :focus-visible, :active) {
  border-color: rgba(164, 79, 79, 0.42) !important;
  background: #fff0ed !important;
  color: #a44343 !important;
}

#cartPanel .cart-item > .cart-remove:focus-visible,
:is(#favoritesPanel, #comparePanel)
  .compare-panel-item
  > .cart-remove:focus-visible {
  box-shadow: 0 0 0 3px rgba(246, 197, 21, 0.25) !important;
}

#cartPanel .cart-item > .cart-remove > i,
:is(#favoritesPanel, #comparePanel) .compare-panel-item > .cart-remove > i {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: 15px !important;
}

/* Keep the item count in the same title-and-subtitle position in each drawer. */
:is(#favoritesPanel, #comparePanel)
  .compare-panel-head
  .compare-panel-title-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

:is(#favoritesPanel, #comparePanel) .compare-panel-head .compare-panel-count {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.74) !important;
  font-size: 12px !important;
  font-weight: 550;
  line-height: 1.5;
}

/* Let long product names use the available drawer width instead of clipping. */
#cartPanel .cart-item-info > strong,
:is(#favoritesPanel, #comparePanel) .compare-panel-item > span > strong {
  display: block;
  min-width: 0;
  overflow: visible;
  text-align: justify;
  text-align-last: right;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.75 !important;
  text-wrap: pretty;
}

#cartPanel .cart-item-info {
  min-width: 0;
}

/* Recommendation cards use edge-to-edge imagery, including images wrapped in product links. */
#recommendations .rail-card .rail-image {
  overflow: hidden;
  padding: 0 !important;
}

#recommendations .rail-card .rail-image > a {
  display: block;
  width: 100%;
  height: 100%;
}

#recommendations .rail-card .rail-image img {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: cover !important;
  object-position: center;
}

/* Refine the product identity block above the detail title. */
#productView .product-detail-summary > .product-detail-meta {
  gap: 12px;
  margin-bottom: 20px;
}

#productView .product-detail-meta > .product-meta-pill {
  min-height: 62px;
  padding: 10px 15px;
  gap: 11px;
  border-color: #e1e7eb;
  border-radius: 15px;
  background: linear-gradient(145deg, #fff, #f7f9fa);
  box-shadow:
    0 4px 12px rgba(16, 42, 67, 0.045),
    inset 0 1px #fff;
}

#productView .product-detail-meta > .product-meta-pill > i {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  place-items: center;
  border: 1px solid rgba(202, 159, 43, 0.2);
  border-radius: 10px;
  background: #fff8e7;
  color: #987000;
  font-size: 15px;
}

#productView .product-detail-meta .product-meta-pill > span {
  gap: 3px;
}

#productView .product-detail-meta .product-meta-pill small,
#productView .product-detail-meta .product-meta-category-content > small {
  color: #687887;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.5;
}

#productView .product-detail-meta .product-meta-pill strong {
  color: var(--industrial-navy);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}

#productView .product-detail-meta > .product-meta-category {
  min-height: 76px;
  align-items: center;
  gap: 13px;
  padding: 12px 15px;
  border-color: #eadfc8;
  border-radius: 16px;
  background: linear-gradient(135deg, #fffefa, #f8f4eb);
  box-shadow:
    0 4px 14px rgba(110, 83, 31, 0.045),
    inset 0 1px #fff;
}

#productView .product-detail-meta > .product-meta-category > i {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid rgba(202, 159, 43, 0.22);
  border-radius: 11px;
  background: #fff6dc;
  color: #967000;
}

#productView .product-detail-meta .product-meta-category-content {
  gap: 7px;
}

#productView .product-detail-meta .product-meta-path {
  justify-content: flex-start;
  gap: 7px 20px;
  line-height: 1.55;
}

#productView .product-detail-meta .product-meta-path > li {
  padding: 6px 11px;
  border-color: #e8dfd0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 6px rgba(16, 42, 67, 0.035);
}

#productView .product-detail-summary > h2 {
  margin-top: 22px;
  margin-bottom: 8px;
  line-height: 1.6;
}

@media (max-width: 575px) {
  #productView .product-detail-summary > .product-detail-meta {
    gap: 9px;
    margin-bottom: 16px;
  }

  #productView .product-detail-meta > .product-meta-pill {
    min-height: 56px;
    padding: 8px 10px;
    gap: 8px;
    border-radius: 13px;
  }

  #productView .product-detail-meta > .product-meta-pill > i {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
    border-radius: 9px;
    font-size: 13px;
  }

  #productView .product-detail-meta .product-meta-pill strong {
    font-size: 12px;
  }

  #productView .product-detail-meta > .product-meta-category {
    min-height: 0;
    padding: 10px;
  }

  #productView .product-detail-meta .product-meta-path {
    gap: 7px 16px;
  }

  #productView .product-detail-meta .product-meta-path > li {
    padding: 5px 8px;
  }

  #productView .product-detail-summary > h2 {
    margin-top: 18px;
  }
}

/* Recent product-detail refinements: readable navigation, RTL specs and full-width reviews. */
#productView .product-detail-tabs {
  gap: 8px;
  padding: 10px;
}

#productView .product-detail-tabs > a {
  min-height: 48px;
  gap: 9px;
  padding: 9px 16px;
  font-size: 15px !important;
  font-weight: 800;
}

#productView .product-detail-tabs > a > i {
  font-size: 16px;
}

#productView .product-detail-tabs > a > b {
  min-width: 24px;
  height: 24px;
  font-size: 12px;
}

#productView .product-spec-groups {
  align-items: stretch;
  gap: 16px;
}

#productView .product-spec-group {
  direction: rtl;
  text-align: right;
}

#productView .product-spec-group h3 {
  justify-content: flex-start;
  direction: rtl;
  text-align: right;
}

#productView .product-spec-group dl,
#productView .product-spec-group dl > div {
  direction: rtl;
  text-align: right;
}

#productView .product-spec-group dl > div {
  display: grid;
  grid-template-columns: minmax(88px, 0.7fr) minmax(0, 1.3fr);
  align-items: center;
  justify-content: initial;
  gap: 12px;
  padding: 9px 10px;
}

#productView .product-spec-group dt,
#productView .product-spec-group dd {
  min-width: 0;
  direction: rtl;
  text-align: right;
  overflow-wrap: anywhere;
}

#productView .product-spec-group dd {
  justify-self: stretch;
}

#productView .product-review-layout {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 18px;
}

#productView .product-review-form-column,
#productView .product-review-list-column,
#productView .product-review-form-column .product-feedback-form {
  width: 100%;
  max-width: none;
}

#productView .product-review-form-column .product-feedback-form {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.55fr);
}

#productView
  .product-review-form-column
  .product-feedback-form
  .product-feedback-wide {
  grid-column: 1 / -1;
  width: 100%;
}

#productView .product-review-form-column .product-feedback-form textarea {
  display: block;
  width: 100%;
  min-height: 130px;
  resize: vertical;
}

#productView .product-question-faq > .product-question-user-text {
  position: relative;
  margin: 12px 0 0;
  padding: 12px 15px;
  border-inline-start: 3px solid #d6b55e;
  border-radius: 0 10px 10px 0;
  background: #f4f8fa;
  color: #344b5d;
  direction: rtl;
  font-size: 14px;
  line-height: 2;
  text-align: justify;
  text-indent: 0;
  overflow-wrap: anywhere;
}

#productView .product-question-faq > .product-question-user-text::before {
  display: block;
  margin-bottom: 4px;
  color: #7c6330;
  content: "پرسش کاربر";
  font-size: 11px;
  font-weight: 800;
}

#productView .product-question-faq > .product-question-user-text::after {
  content: none;
}

#productView .product-question-faq .product-feedback-admin-reply {
  margin: 10px 0 0 16px;
  padding: 11px 14px;
  border-inline-start: 3px solid #d8bd79;
  border-radius: 0 10px 10px 0;
  background: #fffbf0;
  direction: rtl;
}

#productView .product-question-faq .product-feedback-admin-reply > p {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.9;
  text-align: justify;
  overflow-wrap: anywhere;
}

/* Keep the cart, favorites, and compare controls and drawers on one visual system. */
#mainNav
  .nav-actions
  :is(.favorites-toggle, .compare-toggle, .cart-btn.cart-icon-theme) {
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  border: 1px solid #d8dee5 !important;
  border-radius: 13px !important;
  background: linear-gradient(155deg, #fff, #f5f7f9) !important;
  color: var(--industrial-navy) !important;
  box-shadow: 0 2px 8px rgba(4, 17, 30, 0.07) !important;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease !important;
}

#mainNav
  .nav-actions
  :is(
    .favorites-toggle:not(.list-received),
    .compare-toggle:not(.list-received),
    .cart-btn.cart-icon-theme:not(.cart-received)
  ):is(:hover, :focus, :focus-visible, :active),
#mainNav
  .nav-actions
  :is(
    .favorites-wrap.open .favorites-toggle:not(.list-received),
    .compare-wrap.open .compare-toggle:not(.list-received),
    .cart-wrap.open .cart-btn.cart-icon-theme:not(.cart-received)
  ) {
  transform: translateY(-1px) !important;
  border-color: #e4bd35 !important;
  background: #fff8d9 !important;
  background-image: none !important;
  color: #765700 !important;
  box-shadow: 0 4px 12px rgba(166, 123, 0, 0.14) !important;
}

#mainNav .nav-actions :is(.nav-count, .cart-btn.cart-icon-theme > b) {
  top: -10px !important;
  bottom: auto !important;
  left: auto !important;
  right: -8px !important;
  min-width: 28px !important;
  width: auto !important;
  height: 26px !important;
  padding: 0 6px !important;
  border: 2px solid var(--industrial-navy) !important;
  border-radius: 999px !important;
  background: linear-gradient(145deg, #ffe16a, #f6c515) !important;
  color: #17344b !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  box-shadow: 0 2px 6px rgba(16, 42, 67, 0.18) !important;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 992px) {
  #mainNav .cart-wrap > .cart-panel,
  #mainNav .favorites-wrap > .favorites-panel,
  #mainNav .compare-wrap > .compare-panel {
    top: calc(100% + 15px) !important;
  }
}

#cartPanel .cart-head,
:is(#favoritesPanel, #comparePanel) .compare-panel-head {
  min-height: 84px !important;
  margin: 0 !important;
  padding: 0 22px !important;
  border-bottom: 1px solid rgba(215, 182, 108, 0.24) !important;
  background:
    radial-gradient(
      circle at 8% 10%,
      rgba(215, 182, 108, 0.2),
      transparent 32%
    ),
    linear-gradient(135deg, #173867, #0b2550 70%, #123466) !important;
  color: #fff !important;
}

#cartPanel .cart-head {
  border: 0 !important;
  border-radius: 21px 21px 0 0 !important;
  box-shadow: none !important;
}

#cartPanel,
#favoritesPanel,
#comparePanel {
  border: 1px solid rgba(180, 137, 77, 0.32) !important;
  border-radius: 22px !important;
  background: rgba(255, 253, 249, 0.98) !important;
  box-shadow:
    0 28px 80px rgba(4, 20, 55, 0.24),
    0 4px 18px rgba(4, 20, 55, 0.08) !important;
}

#cartPanel .cart-head .cart-head-title,
:is(#favoritesPanel, #comparePanel) .compare-panel-head > span {
  gap: 12px !important;
}

#cartPanel .cart-head .cart-head-icon,
:is(#favoritesPanel, #comparePanel) .compare-panel-head > span > i {
  display: grid !important;
  width: 43px !important;
  min-width: 43px !important;
  height: 43px !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.13) !important;
  color: #ffdb4c !important;
  font-size: 20px !important;
}

#cartPanel .cart-head .cart-head-title strong,
:is(#favoritesPanel, #comparePanel) .compare-panel-head strong {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 750 !important;
}

#cartPanel .cart-head .cart-head-title small,
:is(#favoritesPanel, #comparePanel) .compare-panel-head .compare-panel-count {
  margin: 3px 0 0 !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

#cartPanel .cart-head > button,
:is(#favoritesPanel, #comparePanel) .compare-panel-head > button {
  display: none !important;
}

#cartPanel .cart-footer .cart-safety-badge {
  display: flex;
  width: auto;
  min-height: 40px;
  margin: 0;
  padding: 0 12px 0 0;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  border: 0;
  border-inline-start: 1px solid rgba(197, 157, 75, 0.32);
  border-radius: 0;
  background: transparent;
  color: #17344b;
  box-shadow: none;
}

#cartPanel .cart-footer .cart-total-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 76px;
  margin: 0 0 12px;
  padding: 10px 13px;
  align-items: center;
  border: 1px solid rgba(197, 157, 75, 0.32);
  border-radius: 15px;
  background: linear-gradient(110deg, #fffdf7, #fff8e8 75%, #fffdf7);
}

#cartPanel .cart-footer .cart-total-amount {
  display: flex;
  min-width: 0;
  margin: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  line-height: 1.4;
}

#cartPanel .cart-footer .cart-total-amount > span {
  color: #536477;
  font-size: 12px;
}

#cartPanel .cart-footer .cart-total-amount > strong {
  color: #173867 !important;
  font-size: 17px;
  white-space: nowrap;
}

#cartPanel .cart-safety-icon {
  display: grid;
  width: 34px;
  min-width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: #f6c515;
  color: #17344b;
  font-size: 18px;
}

#cartPanel .cart-safety-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
  line-height: 1.45;
}

#cartPanel .cart-safety-copy strong {
  color: #17344b !important;
  font-size: 13px;
  font-weight: 850;
}

#cartPanel .cart-safety-copy small {
  color: #745a20 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

#cartPanel .cart-safety-check {
  margin-inline-start: auto;
  color: #39714e;
  font-size: 17px;
}

/* Make a selected compare action as clear and persistent as a saved favorite. */
.compare-trigger.active,
.product-card-actions > .compare-trigger.active,
.compare-trigger.active:is(:hover, :focus-visible) {
  border-color: #173653 !important;
  background: #fff !important;
  color: #173653 !important;
  box-shadow: 0 5px 15px rgba(16, 42, 67, 0.16) !important;
}

.compare-trigger.active > i {
  color: inherit !important;
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0.45px currentColor;
}

.compare-trigger:not(.active) > i {
  color: #111 !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-text-stroke: 0 !important;
}

.compare-trigger:not(.active):is(:hover, :focus, :focus-visible, :active) {
  border-color: #dbe3e7 !important;
  background: #fff !important;
  color: #173653 !important;
  box-shadow: 0 5px 15px rgba(16, 42, 67, 0.16) !important;
}

/* Prevent inherited link/active styles from flashing navy on the header compare control. */
html
  body
  #mainNav
  .nav-actions
  #compareToggle:not(.list-received):is(
    :hover,
    :focus,
    :focus-visible,
    :active
  ),
html
  body
  #mainNav
  .nav-actions
  .compare-wrap.open
  #compareToggle:not(.list-received) {
  border-color: #e4bd35 !important;
  background: #fff8d9 !important;
  background-image: none !important;
  color: #765700 !important;
  box-shadow: 0 4px 12px rgba(166, 123, 0, 0.14) !important;
  transform: translateY(-1px) !important;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease !important;
}

html
  body
  #mainNav
  .nav-actions
  #favoritesToggle:not(.list-received):is(
    :hover,
    :focus,
    :focus-visible,
    :active
  ),
html
  body
  #mainNav
  .nav-actions
  .favorites-wrap.open
  #favoritesToggle:not(.list-received),
html
  body
  #mainNav
  .nav-actions
  #cartToggle:not(.cart-received):is(:hover, :focus, :focus-visible, :active),
html
  body
  #mainNav
  .nav-actions
  .cart-wrap.open
  #cartToggle:not(.cart-received) {
  border-color: #e4bd35 !important;
  background: #fff8d9 !important;
  background-image: none !important;
  color: #765700 !important;
  box-shadow: 0 4px 12px rgba(166, 123, 0, 0.14) !important;
  transform: translateY(-1px) !important;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease !important;
}

/* Keep add-to-cart confirmation on product cards neutral; the gold pulse belongs to the header cart. */
.product-card > .add-cart.added,
.search-product.product-card > .search-add-cart.added,
.showcase-card-body > .add-cart.added,
.rail-card > .add-cart.added,
.product-detail-related-card > .add-cart.added {
  border-color: #dbe3e7 !important;
  background: #f2f5f7 !important;
  color: var(--industrial-navy) !important;
  box-shadow: none !important;
  transform: none !important;
}

.product-card > .add-cart.added > i,
.search-product.product-card > .search-add-cart.added > i,
.showcase-card-body > .add-cart.added > i,
.rail-card > .add-cart.added > i,
.product-detail-related-card > .add-cart.added > i {
  color: #39714e !important;
}

/* Keep favorite and compare buttons white while their symbols show selection in navy. */
.product-card-actions > .favorite,
.product-card-actions > .favorite:is(:hover, :focus, :focus-visible, :active),
.product-card .product-image > .favorite,
.product-card
  .product-image
  > .favorite:is(:hover, :focus, :focus-visible, :active),
.showcase-card .product-image > .favorite,
.showcase-card
  .product-image
  > .favorite:is(:hover, :focus, :focus-visible, :active),
.rail-card .rail-image > .favorite,
.rail-card .rail-image > .favorite:is(:hover, :focus, :focus-visible, :active),
.search-product .search-product-image > .favorite,
.search-product
  .search-product-image
  > .favorite:is(:hover, :focus, :focus-visible, :active) {
  border-color: #dbe3e7 !important;
  background: #fff !important;
  color: var(--industrial-navy) !important;
}

.product-card-actions > .favorite.active,
.product-card-actions > .favorite.active:is(:hover, :focus-visible),
.product-card .product-image > .favorite.active,
.product-card .product-image > .favorite.active:is(:hover, :focus-visible),
.showcase-card .product-image > .favorite.active,
.showcase-card .product-image > .favorite.active:is(:hover, :focus-visible),
.rail-card .rail-image > .favorite.active,
.rail-card .rail-image > .favorite.active:is(:hover, :focus-visible),
.search-product .search-product-image > .favorite.active,
.search-product
  .search-product-image
  > .favorite.active:is(:hover, :focus-visible) {
  border-color: var(--industrial-navy) !important;
  background: #fff !important;
  color: var(--industrial-navy) !important;
}

.favorite.active > i {
  color: #173653 !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-text-stroke: 0.15px currentColor;
}

.favorite:not(.active) > i {
  color: #111 !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-text-stroke: 0 !important;
}

/* Fill the image frame edge to edge in the home page's special-offer cards. */
#amazing .showcase-card .product-image {
  overflow: hidden;
  padding: 0 !important;
  background: #edf1f3 !important;
}

#amazing .showcase-card .product-image > img {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: cover !important;
  object-position: center;
}

/* The best-seller carousel also needs edge-to-edge photos, overriding the global contained-photo rule. */
#bestsellersSlider .showcase-card .product-image {
  overflow: hidden;
  padding: 0 !important;
  background: #edf1f3 !important;
}

#bestsellersSlider .showcase-card .product-image > img {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: cover !important;
  object-position: center;
}

#bestsellersSlider .showcase-card .product-image > a {
  display: block;
  width: 100%;
  height: 100%;
}

#bestsellersSlider .showcase-card .product-image > a > img {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: cover !important;
  object-position: center;
}

@media (max-width: 575px) {
  .home-page .featured-products > .container {
    padding-right: 12px;
    padding-left: 12px;
  }

  .home-page .featured-products > .container > .row:last-child {
    margin-right: -6px;
    margin-left: -6px;
    --bs-gutter-x: 12px;
  }

  .home-page .featured-products > .container > .row:last-child > [class*="col-"] {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    padding-right: 6px;
    padding-left: 6px;
  }

  .home-page .featured-products .featured-main,
  .home-page .featured-products .featured-side {
    height: 360px;
    min-height: 0;
    border-radius: 14px;
  }

  .home-page .featured-products .featured-main {
    min-height: 360px;
  }

  .home-page .featured-products .featured-main > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .home-page .featured-products .featured-content {
    right: 10px;
    bottom: 12px;
    left: 10px;
  }

  .home-page .featured-products .featured-content h3 {
    font-size: 16px;
  }

  .home-page .featured-products .featured-content p,
  .home-page .featured-products .featured-content > small {
    font-size: 11px;
  }

  .home-page .featured-products .featured-buy {
    gap: 8px;
  }

  .home-page .featured-products .featured-buy .add-cart {
    min-height: 40px;
    padding: 8px;
    font-size: 11px;
  }

  .home-page .featured-products .featured-side-image {
    height: 155px;
  }

  .home-page .featured-products .featured-side-content {
    min-height: 205px;
    padding: 12px 10px;
  }

  .home-page .featured-products .featured-side-content h3 {
    font-size: 15px;
  }

  .home-page .featured-products .featured-side-content p {
    font-size: 11px;
    line-height: 1.7;
  }

  .home-page .featured-products .featured-side-content .add-cart {
    width: 100%;
    min-height: 40px;
    padding: 8px;
    font-size: 11px;
  }

  .home-page .featured-products .editor-caption,
  .home-page .featured-products .editor-ribbon {
    display: none;
  }
}

/* Apply the same full-frame crop to the newest-products carousel. */
#newestSlider .showcase-card .product-image {
  overflow: hidden;
  padding: 0 !important;
  background: #edf1f3 !important;
}

#newestSlider .showcase-card .product-image > img,
#newestSlider .showcase-card .product-image > a > img {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: cover !important;
  object-position: center;
}

/* Let the header cart's add confirmation win over the generic hover theme and pulse once in gold. */
html body #mainNav .nav-actions #cartToggle.cart-received {
  border-color: #e5b51b !important;
  background: #f6d75e !important;
  background-image: none !important;
  color: #765700 !important;
  box-shadow:
    0 0 0 5px rgba(246, 197, 21, 0.2),
    0 7px 18px rgba(166, 123, 0, 0.22) !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.3s ease !important;
  animation: cartReceive 0.46s cubic-bezier(0.2, 0.85, 0.25, 1);
}

/* Keep the favorites and compare receive pulse gold on their header controls. */
html
  body
  #mainNav
  .nav-actions
  :is(#favoritesToggle, #compareToggle).list-received {
  border-color: #e5b51b !important;
  background: #f6d75e !important;
  background-image: none !important;
  color: #765700 !important;
  box-shadow:
    0 0 0 5px rgba(246, 197, 21, 0.2),
    0 7px 18px rgba(166, 123, 0, 0.22) !important;
  animation: cartReceive 0.46s cubic-bezier(0.2, 0.85, 0.25, 1);
}

/* Keep every cart drawer balanced against the shared favorites panel in RTL. */
html
  body
  :is(
    #cartPanel.cart-panel .cart-items,
    .page-cart-panel .page-cart-items,
    .search-cart-drawer .search-cart-items
  ) {
  box-sizing: border-box;
  padding-inline: 0 !important;
  scrollbar-gutter: stable both-edges !important;
}

html
  body
  :is(
    #cartPanel.cart-panel .cart-items > .cart-item,
    .page-cart-panel .page-cart-items > .page-cart-item,
    .search-cart-drawer .search-cart-items > .search-cart-item
  ) {
  box-sizing: border-box;
  width: 100%;
  margin-inline: 0 !important;
}

/* Use one hover response for cart, favorites, and compare product rows. */
html
  body
  :is(
    #cartPanel .cart-item,
    #favoritesPanel .compare-panel-item,
    #comparePanel .compare-panel-item,
    .page-cart-panel .page-cart-item,
    .search-cart-drawer .search-cart-item
  ) {
  transition:
    transform 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease !important;
}

html
  body
  :is(
    #cartPanel .cart-item,
    #favoritesPanel .compare-panel-item,
    #comparePanel .compare-panel-item,
    .page-cart-panel .page-cart-item,
    .search-cart-drawer .search-cart-item
  ):hover {
  transform: translateY(-2px) !important;
  border-color: rgba(180, 137, 77, 0.32) !important;
  background: #fff !important;
  box-shadow: 0 9px 22px rgba(11, 34, 117, 0.1) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body #mainNav .nav-actions #cartToggle.cart-received {
    animation: none;
  }

  html
    body
    #mainNav
    .nav-actions
    :is(#favoritesToggle, #compareToggle).list-received {
    animation: none;
  }
}

@media (max-width: 767px) {
  #mainNav
    .nav-actions
    :is(.favorites-toggle, .compare-toggle, .cart-btn.cart-icon-theme) {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }

  #mainNav .nav-actions :is(.favorites-toggle, .compare-toggle, .cart-btn.cart-icon-theme) > i {
    font-size: 19px !important;
  }

  #mainNav .nav-actions :is(.nav-count, .cart-btn.cart-icon-theme > b) {
    top: -9px !important;
    right: -7px !important;
  }
}

@media (max-width: 575px) {
  #productView .product-detail-tabs > a {
    min-height: 46px;
    padding: 8px 13px;
    font-size: 14px !important;
  }

  #productView .product-spec-groups {
    gap: 12px;
  }

  #productView .product-spec-group dl > div {
    grid-template-columns: minmax(72px, 0.7fr) minmax(0, 1.3fr);
    gap: 8px;
    padding: 8px 7px;
  }

  #productView .product-review-form-column .product-feedback-form {
    grid-template-columns: minmax(0, 1fr);
  }

  #productView
    .product-review-form-column
    .product-feedback-form
    label:first-child,
  #productView
    .product-review-form-column
    .product-feedback-form
    .product-feedback-wide {
    grid-column: 1;
  }

  #productView .product-question-faq .product-feedback-admin-reply {
    margin-inline-start: 8px;
  }
}
/* Product detail spacing, clearer price panel, and larger actions */
#productView .product-main-feature-heading {
  margin: 20px 0 12px;
  font-size: 15px;
  gap: 9px;
}
#productView .product-main-feature-chips {
  gap: 12px;
  margin-bottom: 19px;
}
#productView .product-main-feature-chips > span {
  min-height: 39px;
  padding: 7px 14px;
  gap: 9px;
  font-size: 13px;
}
#productView .product-main-feature-chips i {
  font-size: 14px;
}
#productView .product-detail-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  align-items: center;
  column-gap: 20px;
  row-gap: 5px;
  min-height: 148px;
  margin-top: 19px;
  padding: 19px 22px;
}
#productView .product-detail-price > .product-price-heading {
  grid-column: 2;
  grid-row: 1;
  justify-content: flex-start;
  gap: 14px;
  font-size: 13px;
}
#productView .product-detail-price > .product-price-heading span {
  font-size: 14px;
  font-weight: 800;
}
#productView .product-detail-price > .product-price-heading small {
  font-size: 12px;
}
#productView .product-detail-price > .product-price-context {
  grid-column: 1;
  grid-row: 1 / 4;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  min-width: 0;
  padding: 14px 17px;
  border: 1px solid #eee2c4;
  border-radius: 14px;
  background: linear-gradient(135deg, #fffdf8, #fff4d4);
  color: var(--industrial-navy);
}
#productView .product-detail-price > .product-price-context > i {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 12px;
  background: #f8c51a;
  color: #17375d;
  font-size: 21px;
}
#productView .product-detail-price > .product-price-context > span {
  display: grid;
  gap: 5px;
}
#productView .product-detail-price > .product-price-context strong {
  font-size: 14px;
  font-weight: 900;
}
#productView .product-detail-price > .product-price-context small {
  color: #76664a;
  font-size: 12px;
  line-height: 1.7;
}
#productView .product-detail-price > .product-detail-sale-meta {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  margin: 0;
}
#productView .product-detail-price > #productFinalPrice {
  grid-column: 2;
  grid-row: 3;
  margin-top: 0;
  font-size: clamp(25px, 2.2vw, 31px);
  line-height: 1.5;
}
#productView .product-detail-actions {
  gap: 13px;
  margin-top: 19px;
}
#productView .product-detail-add {
  min-height: 58px;
  border-radius: 12px;
  font-size: 16px;
}
#productView .product-detail-add i {
  font-size: 20px;
}
#productView .product-detail-secondary-actions {
  gap: 12px;
}
#productView .product-detail-secondary-actions > a,
#productView .product-detail-favorite {
  min-height: 52px;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 11px;
  font-size: 13px;
}
#productView .product-detail-secondary-actions > a > i,
#productView .product-detail-favorite > i {
  font-size: 16px;
}
@media (max-width: 575px) {
  #productView .product-detail-price {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    min-height: 126px;
    padding: 14px;
  }
  #productView .product-detail-price > .product-price-context {
    gap: 8px;
    padding: 10px;
  }
  #productView .product-detail-price > .product-price-context > i {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 17px;
  }
  #productView .product-detail-price > .product-price-context strong {
    font-size: 12px;
  }
  #productView .product-detail-price > .product-price-context small {
    font-size: 10px;
  }
  #productView .product-detail-price > .product-price-heading {
    gap: 7px;
    font-size: 11px;
  }
  #productView .product-detail-price > .product-price-heading span {
    font-size: 12px;
  }
  #productView .product-detail-price > .product-price-heading small {
    font-size: 10px;
  }
  #productView .product-detail-price > #productFinalPrice {
    font-size: 22px;
  }
  #productView .product-detail-secondary-actions > a,
  #productView .product-detail-favorite {
    min-height: 48px;
    padding-inline: 8px;
    font-size: 12px;
  }
}
#productView .product-detail-price {
  direction: ltr;
}
#productView .product-detail-price > .product-price-heading,
#productView .product-detail-price > .product-price-context,
#productView .product-detail-price > #productFinalPrice {
  direction: rtl;
  text-align: right;
}
#productView .product-detail-price > .product-detail-sale-meta {
  justify-self: end;
}
/* Consistent product photo and video gallery with one-hand horizontal browsing */
#productView .product-detail-gallery {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "stage" "thumbs" "caption";
  gap: 12px;
}
#productView .product-detail-thumbnails {
  grid-area: thumbs;
  display: flex;
  flex-direction: row;
  align-self: stretch;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 9px;
  direction: rtl;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #c8d1dc transparent;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
#productView .product-detail-thumb {
  width: 78px;
  height: 78px;
  flex: 0 0 78px;
  scroll-snap-align: start;
}
#productView .product-detail-thumb img {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
}
#productView .product-detail-thumb > span {
  display: grid;
  overflow: hidden;
  place-items: center;
  background: #142d46;
}
#productView .product-detail-thumb > span > img {
  position: absolute;
  inset: 0;
  opacity: 0.82;
}
#productView .product-detail-thumb > span > i {
  position: relative;
  z-index: 1;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #ffffffb3;
  border-radius: 50%;
  background: #102a43c9;
  color: #fff;
  font-size: 18px;
}
#productView .product-detail-media-frame :is(img, video) {
  width: 100%;
  height: 100%;
  min-height: 460px;
  max-height: none;
  padding: 0;
  object-fit: cover;
}
#productView .product-detail-media-frame video {
  object-fit: contain;
  background: #101820;
}
@media (max-width: 991px) {
  #productView .product-detail-media-frame :is(img, video) {
    min-height: 360px;
  }
}
@media (max-width: 575px) {
  #productView .product-detail-thumbnails {
    gap: 8px;
    padding: 3px 1px 8px;
  }
  #productView .product-detail-thumb {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }
  #productView .product-detail-media-frame :is(img, video) {
    height: 270px;
    min-height: 270px;
  }
}
/* Full-screen product media viewer */
#productView .product-detail-gallery-open {
  position: absolute;
  z-index: 3;
  bottom: 14px;
  left: 14px;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid #ffffffb8;
  border-radius: 11px;
  background: #fff;
  color: #102b49;
  box-shadow: 0 5px 18px #102b4926;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}
#productView .product-detail-gallery-open:hover,
#productView .product-detail-gallery-open:focus-visible {
  background: #f6c515;
  color: #102b49;
  outline: 2px solid #fff;
  outline-offset: 2px;
}
#productView .product-detail-gallery-open > i {
  font-size: 15px;
}
#productView .product-detail-gallery-open > b {
  display: grid;
  min-width: 22px;
  height: 22px;
  padding-inline: 5px;
  place-items: center;
  border-radius: 999px;
  background: #102b49;
  color: #fff;
  font-size: 10px;
}
.product-gallery-dialog {
  width: min(1160px, calc(100vw - 40px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  padding: 0;
  overflow: hidden;
  border: 1px solid #e0e6ec;
  border-radius: 20px;
  background: #fff;
  color: #142f4d;
  box-shadow: 0 28px 90px #061a3180;
  direction: rtl;
}
.product-gallery-dialog[open] {
  display: block;
}
.product-gallery-dialog::backdrop {
  background: #071a2dcc;
  backdrop-filter: blur(6px);
}
.product-gallery-dialog-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: min(820px, calc(100dvh - 40px));
  min-height: 420px;
}
.product-gallery-dialog-head {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 22px;
  border-bottom: 1px solid #e7ebef;
  background: linear-gradient(110deg, #fff, #f8fafc);
}
.product-gallery-dialog-head > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.product-gallery-dialog-head > div:first-child > span {
  color: #98712d;
  font-size: 11px;
  font-weight: 800;
}
.product-gallery-dialog-head h2 {
  margin: 0;
  overflow: hidden;
  color: #102b49;
  font-size: 17px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-gallery-dialog-tools {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
}
.product-gallery-dialog-count {
  padding: 7px 11px;
  border-radius: 999px;
  background: #eef2f6;
  color: #42556a;
  font-size: 12px;
  font-weight: 800;
}
.product-gallery-dialog-tools button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #dce3eb;
  border-radius: 12px;
  background: #fff;
  color: #263e58;
  font-size: 16px;
  cursor: pointer;
}
.product-gallery-dialog-tools button:hover {
  border-color: #d4aa32;
  background: #fff7df;
}
.product-gallery-dialog-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  min-height: 0;
  direction: rtl;
}
.product-gallery-full-stage {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: 24px;
  place-items: center;
  background: #f2f5f8;
}
.product-gallery-full-stage :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  border-radius: 12px;
  background: #111820;
}
.product-gallery-full-stage img {
  background: #fff;
}
.product-gallery-dialog-rail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  border-inline-start: 1px solid #e4e9ee;
  background: #fff;
}
.product-gallery-rail-title {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #edf0f3;
}
.product-gallery-rail-title strong {
  color: #183654;
  font-size: 12px;
}
.product-gallery-rail-title span {
  color: #6c7b89;
  font-size: 10px;
}
.product-gallery-full-thumbs {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #c8d1dc transparent;
  overscroll-behavior: contain;
}
.product-gallery-full-thumb {
  position: relative;
  display: block;
  width: 100%;
  flex: 0 0 auto;
  aspect-ratio: 1.6;
  padding: 0;
  overflow: hidden;
  border: 2px solid #e2e7ed;
  border-radius: 11px;
  background: #15263a;
  cursor: pointer;
  scroll-snap-align: start;
}
.product-gallery-full-thumb:is(.is-active, :hover, :focus-visible) {
  border-color: #17385f;
  box-shadow: 0 0 0 2px #f6c51580;
  outline: none;
}
.product-gallery-full-thumb > img,
.product-gallery-full-thumb > span,
.product-gallery-full-thumb > span > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-gallery-full-thumb > span {
  display: block;
  overflow: hidden;
  background: #17283b;
}
.product-gallery-full-thumb > span > img {
  opacity: 0.8;
}
.product-gallery-full-thumb > span > i {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  place-items: center;
  border: 1px solid #ffffffb0;
  border-radius: 50%;
  background: #102a43c9;
  color: #fff;
  font-size: 19px;
}
.product-gallery-full-thumb > b {
  position: absolute;
  right: 7px;
  bottom: 7px;
  display: grid;
  min-width: 23px;
  height: 23px;
  padding-inline: 5px;
  place-items: center;
  border: 1px solid #ffffff90;
  border-radius: 7px;
  background: #102a43d9;
  color: #fff;
  font-size: 11px;
}
@media (max-width: 700px) {
  .product-gallery-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 16px;
  }
  .product-gallery-dialog-shell {
    height: calc(100dvh - 16px);
    min-height: 0;
  }
  .product-gallery-dialog-head {
    min-height: 66px;
    padding: 10px 13px;
  }
  .product-gallery-dialog-head h2 {
    max-width: 62vw;
    font-size: 14px;
  }
  .product-gallery-dialog-tools {
    gap: 7px;
  }
  .product-gallery-dialog-tools button {
    width: 36px;
    height: 36px;
  }
  .product-gallery-dialog-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 144px;
  }
  .product-gallery-full-stage {
    padding: 10px;
  }
  .product-gallery-dialog-rail {
    grid-template-rows: 34px minmax(0, 1fr);
    border-inline-start: 0;
    border-top: 1px solid #e4e9ee;
  }
  .product-gallery-rail-title {
    min-height: 0;
    padding: 4px 11px;
    border-bottom: 0;
  }
  .product-gallery-full-thumbs {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 3px 10px 9px;
    scroll-snap-type: x mandatory;
  }
  .product-gallery-full-thumb {
    width: 125px;
    flex: 0 0 125px;
    aspect-ratio: 1.7;
  }
}
/* Fill product photo frames completely; keep video aspect ratio intact */
#productView .product-detail-media-frame > img.product-detail-image {
  width: 100% !important;
  height: 100% !important;
  min-height: 460px !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: cover !important;
}
.product-gallery-full-stage > img {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: cover !important;
}
.product-gallery-full-thumb > img,
.product-gallery-full-thumb > span > img {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: cover !important;
}
@media (max-width: 991px) {
  #productView .product-detail-media-frame > img.product-detail-image {
    min-height: 360px !important;
  }
}
@media (max-width: 575px) {
  #productView .product-detail-media-frame > img.product-detail-image {
    min-height: 270px !important;
    height: 270px !important;
  }
}
/* Larger gallery count, secondary actions, and individually framed detail tabs */
#productView .product-detail-gallery-caption small {
  margin-inline-start: auto;
  padding: 6px 11px;
  border: 1px solid #e8d9b2;
  border-radius: 999px;
  background: #fff8e8;
  color: #785b20;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}
#productView .product-detail-secondary-actions > a,
#productView .product-detail-favorite {
  min-height: 56px;
  padding: 11px 15px;
  font-size: 15px;
  font-weight: 800;
}
#productView .product-detail-secondary-actions > a > i,
#productView .product-detail-favorite > i {
  font-size: 18px;
}
#productView .product-detail-tabs {
  gap: 9px;
  padding: 10px;
  border: 1px solid #d8e1ea;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff, #f7f9fb);
  box-shadow: 0 8px 22px rgba(16, 42, 67, 0.09);
}
#productView .product-detail-tabs > a {
  min-height: 48px;
  gap: 9px;
  padding: 9px 15px;
  border: 1px solid #dfe5eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 7px rgba(16, 42, 67, 0.045);
  font-size: 14px;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease;
}
#productView .product-detail-tabs > a:is(:hover, :focus-visible) {
  border-color: #d8b64f;
  background: #fff9e9;
  box-shadow: 0 4px 12px rgba(164, 126, 35, 0.12);
  color: var(--industrial-navy);
  outline: none;
}
#productView .product-detail-tabs > a.is-active,
#productView .product-detail-tabs > a.is-active:is(:hover, :focus-visible) {
  border-color: var(--industrial-navy);
  background: linear-gradient(135deg, #183d63, #102a43);
  color: #fff;
  box-shadow:
    0 5px 14px rgba(16, 42, 67, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
#productView .product-detail-tabs > a.is-active > i {
  color: #f6c515;
}
#productView .product-detail-tabs > a.is-active > b {
  border-color: rgba(246, 197, 21, 0.45);
  background: rgba(246, 197, 21, 0.16);
  color: #ffe17b;
}
#productView .product-detail-tabs > a > b {
  min-width: 24px;
  height: 24px;
  font-size: 11px;
}
@media (max-width: 575px) {
  #productView .product-detail-secondary-actions > a,
  #productView .product-detail-favorite {
    min-height: 52px;
    padding-inline: 9px;
    font-size: 13px;
  }
  #productView .product-detail-tabs {
    gap: 7px;
    padding: 7px;
  }
  #productView .product-detail-tabs > a {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 13px;
  }
}

#cartPanel .cart-footer .cart-safety-check {
  display: none;
}

@media (max-width: 380px) {
  #cartPanel .cart-footer .cart-total-summary {
    gap: 6px;
    padding-inline: 9px;
  }
  #cartPanel .cart-footer .cart-total-amount > strong {
    font-size: 15px;
  }
  #cartPanel .cart-footer .cart-safety-badge {
    gap: 5px;
    padding-inline-start: 8px;
  }
  #cartPanel .cart-safety-icon {
    width: 30px;
    min-width: 30px;
    height: 30px;
  }
  #cartPanel .cart-safety-copy strong {
    font-size: 11px;
  }
  #cartPanel .cart-safety-copy small {
    font-size: 9px !important;
  }
}

@media (max-width: 991px) {
  .shared-account-card .account-user {
    grid-template-columns: 54px minmax(0, 1fr) !important;
  }

}

@media (max-width: 575px) {
  .shared-account-card .account-user {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }
}

.shared-account-card .account-links a.account-logout,
.shared-account-card .account-logout {
  margin-top: 8px;
  border: 1px solid #efd6d3 !important;
  background: linear-gradient(105deg, #fff8f7, #fff2f0) !important;
  color: #a34f49 !important;
  font-weight: 700;
  box-shadow:
    inset -3px 0 #c8756e,
    0 3px 10px rgba(143, 69, 66, 0.045) !important;
}

.shared-account-card .account-links a.account-logout > i,
.shared-account-card .account-logout > i {
  border-color: #efd2ce !important;
  background: #fbe7e4 !important;
  color: #a34f49 !important;
}

.shared-account-card .account-links a.account-logout:hover,
.shared-account-card .account-logout:hover {
  border-color: #dfb4af !important;
  background: #fff0ee !important;
  color: #8e3e39 !important;
  box-shadow:
    inset -3px 0 #b75e57,
    0 7px 16px rgba(143, 69, 66, 0.1) !important;
}

@media (max-width: 991px) {
  .shared-account-card .account-links a.account-logout,
  .shared-account-card .account-logout {
    margin-top: 6px;
  }
}

#productView .product-detail-thumb {
  position: relative;
  padding: 0 !important;
  overflow: hidden;
}

#productView .product-detail-thumb > img,
#productView .product-detail-thumb > span,
#productView .product-detail-thumb > span > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  object-fit: cover !important;
}

#productView .product-detail-thumb > span {
  background: #142d46;
}

#productView .product-detail-thumb > span > i {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

.header-search-quick-section {
  padding: 9px 8px 11px;
}

.header-search-quick-section + .header-search-quick-section {
  border-top: 1px solid #edf0f2;
}

.header-search-quick-heading {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.header-search-quick-heading strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--industrial-ink);
  font-size: 12px;
  font-weight: 800;
}

.header-search-quick-heading strong > i {
  color: var(--industrial-yellow-dark);
  font-size: 14px;
}

.header-search-quick-heading > button {
  padding: 4px 7px;
  border: 0;
  border-radius: 7px;
  color: var(--industrial-muted);
  background: transparent;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.header-search-quick-heading > button:hover,
.header-search-quick-heading > button:focus-visible {
  color: var(--industrial-navy);
  background: #f1f4f6;
  outline: none;
}

.header-search-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.header-search-quick-chip {
  display: inline-flex;
  min-height: 34px;
  max-width: 100%;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid #e0e5e9;
  border-radius: 999px;
  color: #30445a !important;
  background: #fff;
  font-size: 12px;
  line-height: 1.5;
  text-decoration: none !important;
  transition:
    border-color 0.16s ease,
    background-color 0.16s ease,
    color 0.16s ease;
}

.header-search-quick-chip > i {
  flex: 0 0 auto;
  color: #8593a0;
  font-size: 12px;
}

.header-search-quick-chip:hover,
.header-search-quick-chip:focus-visible {
  border-color: #d6c18c;
  color: var(--industrial-navy) !important;
  background: #fffaf0;
  outline: none;
}

.header-search-quick-chip:hover > i,
.header-search-quick-chip:focus-visible > i {
  color: #9b7842;
}

.header-search-quick-empty {
  margin: 2px 0 4px;
  color: var(--industrial-muted);
  font-size: 11px;
}

@media (max-width: 575px) {
  .header-search-suggestions {
    max-height: min(440px, calc(100dvh - 90px));
  }

  .header-search-quick-section {
    padding-inline: 5px;
  }
  .header-search-quick-chips {
    gap: 7px;
  }
  .header-search-quick-chip {
    min-height: 32px;
    padding-inline: 9px;
    font-size: 11px;
  }
}

:is(
  .modal button[data-bs-dismiss="modal"],
  .site-modal-close,
  .login-close,
  [data-gallery-close]
),
#loginModal .login-close {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(189, 163, 111, 0.52);
  border-radius: 50%;
  background: linear-gradient(145deg, #173653, #102a43);
  color: #f2d27c;
  box-shadow:
    0 6px 16px rgba(16, 42, 67, 0.18),
    inset 0 1px rgba(255, 255, 255, 0.12);
  font-size: 16px;
  line-height: 1;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

:is(
  .modal button[data-bs-dismiss="modal"],
  .site-modal-close,
  .login-close,
  [data-gallery-close]
):is(:hover, :focus-visible),
#loginModal .login-close:is(:hover, :focus-visible) {
  border-color: #d2b761;
  background: linear-gradient(145deg, #21486d, #173653);
  color: #ffe28a;
  box-shadow:
    0 8px 20px rgba(16, 42, 67, 0.24),
    0 0 0 3px rgba(210, 183, 97, 0.16);
  outline: none;
  transform: translateY(-1px);
}

:is(
    .modal button[data-bs-dismiss="modal"],
    .site-modal-close,
    .login-close,
    [data-gallery-close]
  )
  > i,
#loginModal .login-close > i {
  display: grid;
  width: 1em;
  height: 1em;
  place-items: center;
  line-height: 1;
  transform-origin: center;
  transform: translateX(-1px);
  transition: transform 0.18s ease;
}

:is(
    .modal button[data-bs-dismiss="modal"],
    .site-modal-close,
    .login-close,
    [data-gallery-close]
  ):hover
  > i,
#loginModal .login-close:hover > i {
  transform: translateX(-1px) rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .modal button[data-bs-dismiss="modal"],
    .site-modal-close,
    .login-close,
    [data-gallery-close]
  ),
  #loginModal .login-close,
  :is(
      .modal button[data-bs-dismiss="modal"],
      .site-modal-close,
      .login-close,
      [data-gallery-close]
    )
    > i,
  #loginModal .login-close > i {
    transition: none;
  }
}

@media (min-width: 992px) {
  #productView .product-detail-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

#productView .product-review-layout {
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr) !important;
}

@media (max-width: 767px) {
  #productView .product-review-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

#productView .product-detail-price {
  grid-template-columns: minmax(0, 0.58fr) minmax(0, 1.42fr);
  column-gap: 14px;
}

#productView .product-detail-price > .product-price-context {
  gap: 9px;
  padding: 10px 11px;
}

#productView .product-detail-price > .product-price-context > i {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-radius: 10px;
  font-size: 18px;
}

#productView .product-detail-price > .product-price-context strong {
  font-size: 13px;
}
#productView .product-detail-price > .product-price-context small {
  font-size: 11px;
}

#productView .product-detail-price > .product-detail-sale-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
}

#productView
  .product-detail-price
  > .product-detail-sale-meta
  .product-price-discount {
  padding: 4px 9px;
  font-size: 13px;
  font-weight: 900;
}

#productView
  .product-detail-price
  > .product-detail-sale-meta
  .product-price-savings {
  color: #a33e37;
  font-size: 12px;
  font-weight: 850;
}

#productView .product-detail-price > #productFinalPrice {
  font-size: clamp(31px, 2.7vw, 38px);
  font-weight: 950;
}

@media (max-width: 575px) {
  #productView .product-detail-price {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 7px;
  }
  #productView .product-detail-price > .product-price-heading,
  #productView .product-detail-price > .product-detail-sale-meta,
  #productView .product-detail-price > #productFinalPrice,
  #productView .product-detail-price > .product-price-context {
    grid-column: 1;
  }
  #productView .product-detail-price > .product-price-heading {
    grid-row: 1;
  }
  #productView .product-detail-price > .product-detail-sale-meta {
    grid-row: 2;
  }
  #productView .product-detail-price > #productFinalPrice {
    grid-row: 3;
    font-size: 27px;
  }
  #productView .product-detail-price > .product-price-context {
    grid-row: 4;
  }
}

#productView .product-detail-price {
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
}

#productView .product-detail-price > .product-price-context {
  gap: 11px;
  padding: 12px 14px;
}

#productView .product-detail-price > .product-price-context > i {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
}

#productView .product-detail-price > .product-price-context strong {
  font-size: 15px;
}
#productView .product-detail-price > .product-price-context small {
  font-size: 13px;
}
#productView .product-detail-price > .product-price-heading span {
  font-size: 16px;
}
#productView .product-detail-price > .product-detail-sale-meta .price-old {
  font-size: 13px;
}
#productView
  .product-detail-price
  > .product-detail-sale-meta
  .product-price-discount {
  font-size: 15px;
}

#productView .product-accessory-price {
  min-width: 132px;
  padding: 8px 11px;
}

#productView .product-accessory-price > small {
  font-size: 12px;
}
#productView .product-accessory-price > .product-price-current {
  font-size: 15px;
}

@media (max-width: 575px) {
  #productView .product-detail-price {
    grid-template-columns: minmax(0, 1fr);
  }
  #productView .product-detail-price > .product-price-heading span {
    font-size: 15px;
  }
  #productView
    .product-detail-price
    > .product-detail-sale-meta
    .product-price-discount {
    font-size: 14px;
  }
  #productView .product-detail-price > .product-price-context strong {
    font-size: 14px;
  }
  #productView .product-detail-price > .product-price-context small {
    font-size: 12px;
  }
  #productView .product-accessory-price {
    min-width: 0;
    padding: 7px 9px;
  }
  #productView .product-accessory-price > small {
    font-size: 11px;
  }
  #productView .product-accessory-price > .product-price-current {
    font-size: 14px;
  }
}

.inner-page .search-intro .taxonomy-breadcrumb ol {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(7, 25, 45, 0.78);
  background-image: none;
  box-shadow:
    0 5px 16px rgba(3, 14, 34, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.08);
}

.inner-page .search-intro .taxonomy-breadcrumb a {
  color: #fff;
}

.inner-page .search-intro .taxonomy-breadcrumb a:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}

.inner-page .search-intro .taxonomy-breadcrumb [aria-current] {
  border-color: rgba(255, 218, 102, 0.75);
  background: linear-gradient(135deg, #fff4c7, #f3df9a);
  color: #17324b;
}

.inner-page .search-intro .taxonomy-breadcrumb li > .bi-chevron-left {
  color: #ffd44f;
}

#productView .product-price-trust-list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#productView .product-price-trust-list > li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #66583e;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

#productView .product-price-trust-list > li > i {
  color: #947321;
  font-size: 13px;
}

#productView .product-detail-gallery,
#productView .product-detail-summary {
  border-color: #dce4e9;
  border-radius: 20px;
  box-shadow: 0 14px 36px rgba(16, 42, 67, 0.08);
}

#productView .product-detail-gallery {
  padding: 18px;
}

#productView .product-detail-summary {
  padding: clamp(20px, 2.3vw, 30px);
}

#productView .product-detail-image-code {
  font-size: 12px;
}

#productView .product-detail-gallery-caption {
  font-size: 14px;
}

#productView .product-detail-gallery-caption small {
  font-size: 12px;
}

#productView .product-detail-meta {
  font-size: 13px;
}

#productView .product-detail-summary > h2 {
  margin-block: 18px 12px;
  font-size: clamp(25px, 2.4vw, 34px);
  line-height: 1.5;
}

#productView .product-detail-description,
#productView .product-detail-content-panel > p,
#productView .product-expert-grid p {
  font-size: 15px;
  line-height: 2.1;
}

#productView .product-main-feature-chips > span {
  font-size: 14px;
}

#productView .product-variant-field legend {
  font-size: 15px;
}

#productView .product-variant-current,
#productView .product-variant-required,
#productView .product-variant-optional {
  font-size: 13px;
}

#productView .product-variant-choice {
  font-size: 14px;
}

#productView .product-variant-choice small {
  font-size: 12px;
}

#productView .product-accessories > header strong {
  font-size: 16px;
}

#productView .product-accessories > header small,
#productView .product-accessory-copy small {
  font-size: 13px;
}

#productView .product-accessory-copy strong {
  font-size: 15px;
}

#productView .product-accessory-copy .product-accessory-status {
  font-size: 12px;
}

#productView .product-accessory-price > small {
  font-size: 12px;
}

#productView .product-accessory-price > .product-price-current {
  font-size: 15px;
}

#productView .product-detail-price > .product-price-heading span {
  font-size: 18px;
}

#productView .product-detail-price > .product-price-heading small,
#productView .product-detail-price > .product-detail-sale-meta .price-old {
  font-size: 14px;
}

#productView .product-detail-price > .product-price-context strong {
  font-size: 16px;
}

#productView .product-detail-price > .product-price-context small {
  font-size: 14px;
}

#productView .product-detail-price > #productFinalPrice {
  font-size: clamp(32px, 2.8vw, 40px);
}

#productView .product-detail-add,
#productView .product-detail-secondary-actions > a,
#productView .product-detail-favorite {
  font-size: 15px;
}

#productView .product-spec-group dt,
#productView .product-spec-group dd,
#productView .product-feedback-form label,
#productView .product-feedback-user-text,
#productView .product-question-user-text {
  font-size: 14px;
}

#productView .product-feedback-note {
  font-size: 13px;
}

#productView .product-detail-add {
  min-height: 62px;
  gap: 12px;
  padding: 10px 20px;
  border-radius: 15px;
  background: linear-gradient(135deg, #ffda4b, #f3bd0b) !important;
  box-shadow:
    0 9px 22px rgba(191, 145, 0, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.6);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

#productView .product-detail-add > i {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 1px solid rgba(16, 42, 67, 0.12);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.52);
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

#productView .product-detail-add:is(:hover, :focus-visible) {
  border-color: var(--industrial-navy) !important;
  background: linear-gradient(135deg, #173a5b, #102a43) !important;
  box-shadow: 0 12px 25px rgba(16, 42, 67, 0.24);
  color: #fff !important;
  transform: translateY(-2px);
}

#productView .product-detail-add:is(:hover, :focus-visible) > i {
  background: var(--industrial-yellow);
  color: var(--industrial-navy) !important;
  transform: scale(1.04);
}

#productView .product-detail-add:active {
  transform: translateY(0) scale(0.99);
}

#productView .product-detail-add:focus-visible,
#productView .product-detail-secondary-actions > a:focus-visible,
#productView .product-detail-favorite:focus-visible,
#productView .product-variant-choice:focus-visible,
#productView .product-feedback-submit:focus-visible {
  outline: 3px solid rgba(23, 59, 93, 0.28);
  outline-offset: 3px;
}

#productView .product-detail-secondary-actions > a,
#productView .product-detail-favorite {
  border-color: #dce4e9;
  border-radius: 13px;
  background: linear-gradient(180deg, #fff, #f7f9fa);
  box-shadow: 0 4px 12px rgba(16, 42, 67, 0.05);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

#productView .product-detail-secondary-actions > a > i,
#productView .product-detail-favorite > i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: #edf2f5;
  color: var(--industrial-navy);
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

#productView .product-detail-secondary-actions > a:is(:hover, :focus-visible),
#productView .product-detail-favorite:is(:hover, :focus-visible, [aria-pressed="true"]) {
  border-color: #e4c65e;
  background: #fffaf0;
  box-shadow: 0 8px 18px rgba(16, 42, 67, 0.09);
  color: var(--industrial-navy);
  transform: translateY(-1px);
}

#productView .product-detail-secondary-actions > a:is(:hover, :focus-visible) > i,
#productView .product-detail-favorite:is(:hover, :focus-visible) > i {
  background: #fff0b8;
  color: #765d08;
}

#productView .product-variant-choice {
  min-height: 46px;
  border-radius: 12px;
  box-shadow: 0 2px 7px rgba(16, 42, 67, 0.045);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

#productView .product-variant-choice:is(:hover, :focus-visible) {
  border-color: #d7b63d;
  background: #fffaf0;
  box-shadow: 0 7px 15px rgba(16, 42, 67, 0.08);
  transform: translateY(-1px);
}

#productView .product-variant-choice.is-selected {
  border-color: var(--industrial-navy);
  background: linear-gradient(135deg, #173b5d, #102a43);
  box-shadow: 0 6px 14px rgba(16, 42, 67, 0.16);
  color: #fff;
}

#productView .product-variant-choice.is-selected small {
  color: #ffdc55;
}

#productView .product-detail-gallery-open {
  min-height: 44px;
  border-color: rgba(255, 255, 255, 0.7);
  border-radius: 13px;
  background: rgba(16, 42, 67, 0.92);
  color: #fff;
  box-shadow: 0 7px 18px rgba(16, 42, 67, 0.2);
  font-size: 14px;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

#productView .product-detail-gallery-open:is(:hover, :focus-visible) {
  background: var(--industrial-yellow);
  box-shadow: 0 10px 22px rgba(16, 42, 67, 0.28);
  color: var(--industrial-navy);
  transform: translateY(-2px);
}

#productView .product-feedback-form > .product-feedback-submit {
  min-height: 48px;
  padding-inline: 20px;
  border: 1px solid var(--industrial-navy);
  border-radius: 12px;
  background: linear-gradient(135deg, #173b5d, #102a43);
  box-shadow: 0 6px 15px rgba(16, 42, 67, 0.14);
  color: #fff;
  font-size: 14px;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

#productView .product-feedback-form > .product-feedback-submit:is(:hover, :focus-visible) {
  border-color: #d5ad15;
  background: linear-gradient(135deg, #ffda4b, #f3bd0b);
  box-shadow: 0 8px 18px rgba(191, 145, 0, 0.2);
  color: var(--industrial-navy);
  transform: translateY(-1px);
}

@media (max-width: 575px) {
  #productView .product-price-trust-list > li {
    font-size: 12px;
  }

  #productView .product-detail-gallery {
    padding: 12px;
  }

  #productView .product-detail-summary {
    padding: 18px;
  }

  #productView .product-detail-summary > h2 {
    font-size: 25px;
  }

  #productView .product-detail-price > #productFinalPrice {
    font-size: 30px;
  }
}

@media (min-width: 992px) {
  .home-page #mainNav .mega-menu,
  .inner-page #mainNav .category-nav-mega {
    border: 1px solid #dce4e9 !important;
    border-top: 3px solid var(--industrial-yellow) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 20px 46px rgba(16, 42, 67, 0.2) !important;
    backdrop-filter: none !important;
  }

  .home-page #mainNav .mega-sidebar,
  .inner-page #mainNav .category-mega-sidebar {
    border-left: 1px solid #e3e9ed !important;
    background: #f7f9fa !important;
  }

  .home-page #mainNav .mega-sidebar > a,
  .inner-page #mainNav .category-mega-sidebar > button {
    border-color: transparent !important;
    border-top: 1px solid #e8edef !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--industrial-steel) !important;
    box-shadow: none !important;
  }

  .home-page #mainNav .mega-sidebar > a:first-child,
  .inner-page #mainNav .category-mega-sidebar > button:first-child {
    border-top-color: transparent !important;
  }

  .home-page #mainNav .mega-sidebar > a > i:first-child,
  .inner-page #mainNav .category-mega-sidebar > button > i:first-child {
    color: var(--industrial-icon-gold) !important;
  }

  .home-page #mainNav .mega-sidebar > a:is(:hover, .active),
  .inner-page
    #mainNav
    .category-mega-sidebar
    > button:is(:hover, :focus-visible, .active) {
    border-color: #efdfa8 !important;
    border-radius: 8px !important;
    background: #fff8df !important;
    color: var(--industrial-navy) !important;
    box-shadow: inset -3px 0 var(--industrial-yellow) !important;
  }

  .home-page #mainNav .mega-content,
  .inner-page #mainNav .category-mega-content {
    background: #fff !important;
  }

  .inner-page
    #mainNav
    .navbar-nav
    > .category-nav-dropdown:is(:hover, :focus-within, .show, .is-mega-open)
    > .nav-link.dropdown-toggle {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--industrial-yellow) !important;
    box-shadow: none !important;
  }

  .inner-page
    #mainNav
    .navbar-nav
    > .category-nav-dropdown:is(:hover, :focus-within, .show, .is-mega-open)
    > .nav-link.dropdown-toggle::before {
    transform: scaleX(1) !important;
  }

  .home-page #mainNav .mega-content-grid > .mega-links + .mega-links,
  .inner-page #mainNav .category-mega-group {
    border-right-color: #e8edef !important;
  }

  .home-page #mainNav .mega-content-grid > .mega-links > a,
  .inner-page #mainNav .category-mega-group > a:not(.category-mega-title) {
    color: #5b6c7a !important;
  }

  .home-page
    #mainNav
    .mega-content-grid
    > .mega-links
    > a:is(:hover, :focus-visible),
  .inner-page
    #mainNav
    .category-mega-group
    > a:not(.category-mega-title):is(:hover, :focus-visible) {
    color: var(--industrial-navy) !important;
  }

  .home-page #mainNav .mega-bottom,
  .inner-page #mainNav .category-mega-all {
    border-color: #dfe6eb !important;
    background: #f7f9fa !important;
  }
}

#productView .product-detail-summary > .product-detail-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 22px;
}

#productView .product-meta-identity {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  overflow: hidden;
  border: 1px solid #dce4e9;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff, #f7f9fa);
  box-shadow:
    0 5px 15px rgba(16, 42, 67, 0.055),
    inset 0 1px #fff;
}

#productView .product-meta-identity > .product-meta-pill {
  display: flex;
  width: auto;
  min-width: 0;
  min-height: 76px;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#productView .product-meta-identity > .product-meta-code {
  border-inline-start: 1px solid #dce4e9;
}

#productView .product-meta-identity > .product-meta-pill > i {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 11px;
  font-size: 17px;
}

#productView .product-meta-identity .product-meta-pill > span {
  min-width: 0;
  gap: 4px;
}

#productView .product-meta-identity .product-meta-pill small,
#productView .product-detail-meta .product-meta-category-content > small {
  color: #657587;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

#productView .product-meta-identity .product-meta-pill strong {
  color: var(--industrial-navy);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

#productView .product-meta-identity .product-meta-code strong {
  direction: ltr;
  text-align: right;
}

#productView .product-detail-meta > .product-meta-category {
  min-height: 0;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 17px;
  border-color: #e7dfcf;
  border-radius: 16px;
  background: linear-gradient(135deg, #fffefa, #f8f5ee);
}

#productView .product-detail-meta > .product-meta-category > i {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  border-radius: 12px;
  font-size: 17px;
}

#productView .product-detail-meta .product-meta-category-content {
  gap: 9px;
}

#productView .product-detail-meta .product-meta-path {
  gap: 9px 24px;
  font-size: 14px;
  line-height: 1.7;
}

#productView .product-detail-meta .product-meta-path > li {
  padding: 7px 12px;
  border-color: #e5dece;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(16, 42, 67, 0.045);
}

#productView
  :is(.product-detail-content-panel, .product-detail-related)
  > header {
  display: grid;
  justify-items: start;
  gap: 9px;
  margin-bottom: 22px;
  padding-bottom: 16px;
}

#productView
  :is(.product-detail-content-panel, .product-detail-related)
  > header
  > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 12px;
  border-color: #eadfca;
  border-radius: 999px;
  background: linear-gradient(135deg, #fffaf0, #f8f3e8);
  color: #765e25;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

#productView
  :is(.product-detail-content-panel, .product-detail-related)
  > header
  > span::before {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--industrial-yellow-dark);
  content: "";
}

#productView
  :is(.product-detail-content-panel, .product-detail-related)
  > header
  h2 {
  font-size: clamp(21px, 2.1vw, 26px);
  line-height: 1.55;
}

.purchase-benefits--showcase .benefits-intro p {
  width: min(100%, 620px);
  max-width: 620px;
  flex: 0 1 620px;
  white-space: nowrap;
}

@media (max-width: 1199px) {
  .purchase-benefits--showcase .benefits-intro p {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 640px) {
  #productView .product-meta-identity > .product-meta-pill {
    min-height: 68px;
    gap: 8px;
    padding: 10px;
  }

  #productView .product-meta-identity > .product-meta-pill > i {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    font-size: 14px;
  }

  #productView .product-meta-identity .product-meta-pill small,
  #productView .product-detail-meta .product-meta-category-content > small {
    font-size: 12px;
  }

  #productView .product-meta-identity .product-meta-pill strong {
    font-size: 14px;
  }

  #productView .product-detail-meta > .product-meta-category {
    gap: 10px;
    padding: 12px;
  }

  #productView .product-detail-meta .product-meta-path {
    gap: 8px 18px;
    font-size: 13px;
  }

  #productView .product-detail-meta .product-meta-path > li {
    padding: 6px 9px;
  }

  #productView
    :is(.product-detail-content-panel, .product-detail-related)
    > header {
    gap: 7px;
    margin-bottom: 18px;
    padding-bottom: 13px;
  }

  #productView
    :is(.product-detail-content-panel, .product-detail-related)
    > header
    > span {
    font-size: 12px;
  }

  .purchase-benefits--showcase .benefits-intro p {
    white-space: normal;
  }
}

/* Final shared layout for inner-page banners and their breadcrumb trails. */
.inner-page .page-hero {
  min-height: 360px !important;
  padding: 28px 0 36px !important;
  align-items: flex-start;
  text-align: right;
}

.inner-page .page-hero > .container {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  direction: rtl;
  text-align: right;
}

.inner-page .page-hero > .container > .article-breadcrumb {
  min-height: 46px;
  margin: 0 0 10px !important;
  align-self: flex-start;
}

.inner-page .page-hero > .container > .page-kicker {
  margin: 0 !important;
  align-self: flex-start;
  clear: none;
}

.inner-page .page-hero > .container > :is(h1, p, .hero-trail) {
  text-align: right;
}

.inner-page .page-hero > .container > h1 {
  max-width: 100%;
  margin: 0;
}

.inner-page .page-hero > .container > p {
  max-width: 760px;
  margin: 0;
}

.inner-page .page-hero > .container > .hero-trail {
  justify-content: flex-start;
  margin-top: 12px;
}

.inner-page :is(.article-breadcrumb, .cart-breadcrumb) {
  display: flex;
  width: max-content;
  max-width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  align-items: center;
  gap: 5px 9px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: rgba(7, 25, 45, 0.78);
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  box-shadow: 0 5px 16px rgba(3, 14, 34, 0.2);
  direction: rtl;
  text-align: right;
  backdrop-filter: blur(10px);
}

.inner-page .article-breadcrumb::after {
  content: none;
}

.inner-page :is(.article-breadcrumb, .cart-breadcrumb) ol {
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 9px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  direction: rtl;
}

.inner-page :is(.article-breadcrumb, .cart-breadcrumb) :is(li, a, .breadcrumb-current, [aria-current]) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: right;
}

.inner-page :is(.article-breadcrumb, .cart-breadcrumb) :is(a, .breadcrumb-current, [aria-current]) {
  min-height: 36px;
  padding: 4px 9px;
  align-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  box-shadow: none;
  font-size: inherit;
  text-decoration: none;
}

.inner-page :is(.article-breadcrumb, .cart-breadcrumb) :is(a, .breadcrumb-current, [aria-current]) > i {
  color: var(--industrial-yellow);
}

.inner-page :is(.article-breadcrumb, .cart-breadcrumb) :is(.breadcrumb-separator, li > .bi-chevron-left) {
  display: inline-grid;
  width: 18px;
  height: 18px;
  margin: 0 2px;
  flex: 0 0 18px;
  place-items: center;
  border: 1px solid rgba(255, 212, 79, 0.34);
  border-radius: 50%;
  background: rgba(255, 212, 79, 0.12);
  color: #ffe07a;
  font-size: 9px;
  opacity: 1;
}

.inner-page :is(.article-breadcrumb, .cart-breadcrumb) :is(.breadcrumb-current, [aria-current]) {
  border-color: rgba(255, 218, 102, 0.75);
  background: linear-gradient(135deg, #fff4c7, #f3df9a);
  color: #17324b;
  font-weight: 700;
}

.inner-page :is(.article-breadcrumb, .cart-breadcrumb) :is(.breadcrumb-current, [aria-current]) > i {
  color: #17324b;
}

.inner-page :is(.article-breadcrumb, .cart-breadcrumb) a:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  box-shadow: none;
  transform: none;
}

.inner-page :is(.article-breadcrumb, .cart-breadcrumb) a:focus-visible {
  outline: 2px solid #ffd44f;
  outline-offset: 2px;
}

.inner-page .cart-breadcrumb ol {
  background-image: none;
}

.inner-page .cart-breadcrumb.profile-breadcrumb {
  width: max-content;
}

@media (max-width: 767px) {
  .inner-page .page-hero {
    min-height: 0 !important;
    padding: 22px 0 30px !important;
  }

  .inner-page .page-hero > .container > h1 {
    font-size: clamp(30px, 8vw, 40px);
  }
}

@media (max-width: 575px) {
  .inner-page :is(.article-breadcrumb, .cart-breadcrumb) {
    min-height: 44px;
    padding: 4px 6px;
    font-size: 12px;
  }

  .inner-page :is(.article-breadcrumb, .cart-breadcrumb) :is(a, .breadcrumb-current, [aria-current]) {
    min-height: 34px;
    padding: 3px 8px;
  }

  .inner-page .cart-breadcrumb.profile-breadcrumb,
  .inner-page .cart-breadcrumb.profile-breadcrumb ol {
    width: max-content;
    max-width: 100%;
  }
}

/* Keep Cart content aligned with the shared inner-page direction. */
.inner-page .cart-page-main {
  direction: rtl;
  text-align: right;
}

.inner-page .cart-page-hero .cart-breadcrumb {
  align-self: flex-start;
}

/* Keep the desktop brand menu anchored while its trigger enters the open state. */
@media (min-width: 992px) {
  #mainNav .brand-dropdown > .nav-link,
  #mainNav .brand-dropdown > .nav-link:is(:hover, :focus-visible, .show) {
    transform: none !important;
  }

  #mainNav .brand-dropdown > .brand-menu {
    top: 100% !important;
    margin-top: 0 !important;
    border-top: 3px solid var(--industrial-yellow) !important;
    animation: none !important;
    transition: none !important;
    transform: translate(-50%, 0) !important;
  }

  #mainNav .brand-dropdown:is(:hover, :focus-within) > .brand-menu {
    display: grid !important;
  }

  #mainNav .brand-dropdown > .brand-menu::after {
    position: absolute;
    top: -36px;
    right: 0;
    left: 0;
    height: 36px;
    content: "";
    pointer-events: auto;
  }
}

/* Match the header cart stepper to the quantity controls on the Cart page. */
#cartPanel .cart-item-info .cart-quantity {
  min-width: 0 !important;
  min-height: 38px;
  gap: 2px !important;
  padding: 2px !important;
  border-color: #dfceb3 !important;
  background: linear-gradient(180deg, #fffdf8, #f4eee3) !important;
  box-shadow: inset 0 1px 0 #fff, 0 4px 10px -6px #80633740 !important;
}

#cartPanel .cart-item-info .cart-quantity > button,
#cartPanel .cart-item-info .cart-quantity > button[data-action="plus"] {
  width: 32px !important;
  min-width: 32px;
  height: 32px !important;
  min-height: 32px;
  border: 1px solid #e5dac8 !important;
  border-radius: 50% !important;
  background: #fffdf9 !important;
  color: #8b6b3a !important;
  box-shadow: 0 2px 4px #142e5105 !important;
}

#cartPanel .cart-item-info .cart-quantity > button:hover,
#cartPanel .cart-item-info .cart-quantity > button:focus-visible {
  transform: none !important;
  border-color: #e8bd34 !important;
  background: linear-gradient(145deg, #ffdf68, #f6c515) !important;
  color: #142e51 !important;
  box-shadow: 0 3px 8px rgba(166, 123, 0, 0.2) !important;
}

#cartPanel .cart-item-info .cart-quantity > button:active {
  transform: translateY(0);
}

/* Keep quantity counter hover identical in the header cart and cart page. */
#cartPanel .cart-item-info .cart-quantity > button:hover:not(:disabled),
#cartPanel .cart-item-info .cart-quantity > button:focus-visible:not(:disabled),
#cartView .cart-quantity button:hover:not(:disabled),
#cartView .cart-quantity button:focus-visible:not(:disabled) {
  transform: none !important;
  border-color: #e8bd34 !important;
  background: linear-gradient(145deg, #ffdf68, #f6c515) !important;
  color: #142e51 !important;
  box-shadow: 0 3px 8px rgba(166, 123, 0, 0.2) !important;
}

/* Header cart item: title above a balanced price / quantity / remove row. */
#cartPanel .cart-item-info {
  display: grid !important;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title title"
    "price quantity";
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
}

#cartPanel .cart-item-info > strong {
  grid-area: title;
}

#cartPanel .cart-item-info > span {
  grid-area: price;
  align-self: center;
  margin: 0 !important;
  white-space: nowrap;
}

#cartPanel .cart-item-info > .cart-quantity {
  grid-area: quantity;
  justify-self: end;
  min-height: 30px;
  gap: 3px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  align-self: center;
}

#cartPanel .cart-item-info > .cart-quantity > button,
#cartPanel .cart-item-info > .cart-quantity > button[data-action="plus"] {
  width: 30px !important;
  min-width: 30px;
  height: 30px !important;
  min-height: 30px;
  border: 1px solid #e5dac8 !important;
  border-radius: 50% !important;
  background: #fffdf9 !important;
  color: #8b6b3a !important;
  box-shadow: 0 2px 4px #142e5105 !important;
}

#cartPanel .cart-item-info > .cart-quantity > button[data-action="plus"] {
  border-color: #e8bd34 !important;
  background: linear-gradient(145deg, #ffdf68, #f6c515) !important;
  color: #142e51 !important;
}

#cartPanel .cart-item-info > .cart-quantity > b {
  min-width: 25px;
  height: auto;
  background: #fff !important;
  color: #142e51 !important;
  font-size: 13px !important;
}

#cartPanel .cart-item > .cart-remove {
  align-self: end;
  margin-bottom: 0;
}

@media (max-width: 420px) {
  #cartPanel .cart-item-info {
    column-gap: 5px;
  }

  #cartPanel .cart-item-info > .cart-quantity > button {
    width: 27px !important;
    min-width: 27px;
    height: 27px !important;
    min-height: 27px;
  }

  #cartPanel .cart-item-info > .cart-quantity > b {
    min-width: 21px;
  }
}

#cartPanel .cart-item-info .cart-quantity > b {
  min-width: 34px;
  height: auto;
  background: transparent;
  color: #142e51;
  font-size: 13px !important;
  font-weight: 700;
}

/* Shared border rhythm for separators and accent frames across pages. */
:where(
  hr,
  .flow-row,
  .flow-related,
  .flow-card details,
  .cart-summary-heading,
  .orders-pagination,
  .profile-order-card header,
  .profile-order-card footer,
  .product-variant-options,
  .product-variant-field,
  .product-variant-field legend,
  .article-enhanced .article-section,
  .article-checklist label,
  .product-gallery-dialog-rail,
  .product-gallery-rail-title
) {
  border-color: var(--industrial-line) !important;
}

:where(
  .profile-order-card,
  .article-checklist,
  .article-enhanced .article-share,
  .flow-notice,
  .cart-summary,
  .cart-address-section,
  .cart-payment-section
) {
  border-color: var(--industrial-accent-border-soft);
}

:where(.cart-address-section, .cart-payment-section, .cart-summary) {
  border-width: 1px;
}

:where(.flow-notice, .article-enhanced .article-lead, .article-checklist) {
  border-inline-start-color: var(--industrial-accent-border) !important;
}

.product-gallery-dialog-tools button:hover {
  border-color: var(--industrial-accent-border) !important;
}

/* Restore the Cart-page toolbar frame inside the header cart drawer. */
#cartPanel .cart-item {
  grid-template-columns: 72px minmax(0, 1fr) !important;
  align-items: center;
}

#cartPanel .cart-item-info {
  display: grid !important;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "actions";
  gap: 6px;
}

#cartPanel .cart-item-info > strong {
  grid-area: title;
}

#cartPanel .cart-item-info > .cart-item-actions {
  grid-area: actions;
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto 32px;
  align-items: center;
  column-gap: 5px;
  padding: 3px 5px;
  border: 1px solid #dfceb3;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffdf8, #f4eee3);
  box-shadow: inset 0 1px 0 #fff, 0 4px 10px -6px #80633740;
}

#cartPanel .cart-item-actions > span {
  min-width: 0;
  margin: 0 !important;
  color: #9a6d31 !important;
  font-size: 12px !important;
  font-weight: 700;
  white-space: nowrap;
}

#cartPanel .cart-item-actions > .cart-quantity {
  min-height: 30px;
  gap: 3px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#cartPanel .cart-item-actions > .cart-quantity > button,
#cartPanel .cart-item-actions > .cart-quantity > button[data-action="plus"] {
  width: 30px !important;
  min-width: 30px;
  height: 30px !important;
  min-height: 30px;
  border: 1px solid #e5dac8 !important;
  border-radius: 50% !important;
  background: #fffdf9 !important;
  color: #8b6b3a !important;
  box-shadow: 0 2px 4px #142e5105 !important;
}

#cartPanel .cart-item-actions > .cart-quantity > button[data-action="plus"] {
  border-color: #e8bd34 !important;
  background: linear-gradient(145deg, #ffdf68, #f6c515) !important;
  color: #142e51 !important;
}

#cartPanel .cart-item-actions > .cart-quantity > b {
  min-width: 25px;
  height: auto;
  background: transparent !important;
  color: #142e51 !important;
  font-size: 13px !important;
}

#cartPanel .cart-item-actions > .cart-remove {
  display: grid !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  place-items: center;
  border: 0 !important;
  border-inline-start: 1px solid #dfceb3 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #8a5a50 !important;
}

#cartPanel .cart-item-actions > .cart-remove > i {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}

@media (max-width: 420px) {
  #cartPanel .cart-item {
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }

  #cartPanel .cart-item-actions {
    grid-template-columns: minmax(0, 1fr) auto 29px;
    column-gap: 3px;
    padding: 2px 4px;
  }

  #cartPanel .cart-item-actions > .cart-quantity > button {
    width: 27px !important;
    min-width: 27px;
    height: 27px !important;
    min-height: 27px;
  }

  #cartPanel .cart-item-actions > .cart-quantity > b {
    min-width: 21px;
  }
}

/* Keep the price outside the framed quantity and delete controls. */
#cartPanel .cart-item-info > .cart-item-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#cartPanel .cart-item-actions > .cart-item-controls {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 2px;
  padding: 2px 5px;
  border: 1px solid #dfceb3;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffdf8, #f4eee3);
  box-shadow: inset 0 1px 0 #fff, 0 4px 10px -6px #80633740;
}

#cartPanel .cart-item-controls > .cart-quantity {
  min-height: 30px;
  gap: 3px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#cartPanel .cart-item-controls > .cart-remove {
  display: grid !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  margin-inline-start: 2px;
  padding: 0 !important;
  place-items: center;
  border: 0 !important;
  border-inline-start: 1px solid #dfceb3 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #8a5a50 !important;
}

#cartPanel .cart-item-controls > .cart-remove:is(:hover, :focus-visible) {
  color: #a44343 !important;
}

#cartPanel .cart-item-controls > .cart-remove > i {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}

@media (max-width: 420px) {
  #cartPanel .cart-item-controls {
    min-height: 32px;
    padding: 1px 3px;
  }

  #cartPanel .cart-item-controls > .cart-quantity > button {
    width: 27px !important;
    min-width: 27px;
    height: 27px !important;
    min-height: 27px;
  }
}

/* Put every part of the price-and-actions row on one shared vertical axis. */
#cartPanel .cart-item-actions {
  min-height: 40px;
  align-items: center !important;
}

#cartPanel .cart-item-actions > span {
  display: flex;
  height: 32px;
  align-items: center;
  line-height: 1.2 !important;
}

#cartPanel .cart-item-controls {
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  align-items: center !important;
}

#cartPanel .cart-item-controls > .cart-quantity {
  display: inline-flex !important;
  height: 30px;
  min-height: 30px;
  align-items: center !important;
  align-self: center;
  margin: 0 !important;
}

#cartPanel .cart-item-controls > .cart-quantity > button {
  align-self: center;
  margin: 0 !important;
  transform: none;
}

#cartPanel .cart-item-controls > .cart-quantity > b {
  display: grid;
  height: 30px;
  min-height: 30px;
  margin: 0 !important;
  padding: 0;
  align-self: center;
  place-items: center;
  line-height: 1;
}

#cartPanel .cart-item-controls > .cart-remove {
  align-self: center;
}

@media (max-width: 420px) {
  #cartPanel .cart-item-actions {
    min-height: 36px;
  }

  #cartPanel .cart-item-controls {
    height: 36px;
    min-height: 36px;
  }
}

#cartPanel .cart-item-controls > .cart-quantity {
  gap: 2px !important;
}

#cartPanel .cart-item-controls > .cart-quantity > button {
  width: 28px !important;
  min-width: 28px;
  height: 28px !important;
  min-height: 28px;
}

#cartPanel .cart-item-controls > .cart-quantity > b {
  min-width: 20px;
}

#cartPanel .cart-item > img {
  width: 72px !important;
  height: 72px !important;
  aspect-ratio: 1 / 1;
  align-self: center;
  object-fit: cover !important;
}

@media (max-width: 420px) {
  #cartPanel .cart-item-controls > .cart-quantity > button {
    width: 26px !important;
    min-width: 26px;
    height: 26px !important;
    min-height: 26px;
  }

  #cartPanel .cart-item-controls > .cart-quantity > b {
    min-width: 18px;
  }

  #cartPanel .cart-item > img {
    width: 60px !important;
    height: 60px !important;
  }
}

/* Use square, edge-to-edge product imagery in favorites and compare surfaces. */
:is(#favoritesPanel, #comparePanel) .compare-panel-item {
  grid-template-columns: 72px minmax(0, 1fr) 34px;
}

:is(#favoritesPanel, #comparePanel) .compare-panel-item > img {
  width: 72px !important;
  height: 72px !important;
  aspect-ratio: 1 / 1;
  object-fit: cover !important;
}

#favoritesView .favorite-item-card .flow-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

#compareView .compare-product-image {
  height: auto;
  aspect-ratio: 1 / 1;
}

#compareView .compare-product-image > img,
.compare-product-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 0 !important;
  object-fit: cover;
}

@media (max-width: 420px) {
  :is(#favoritesPanel, #comparePanel) .compare-panel-item {
    grid-template-columns: 60px minmax(0, 1fr) 32px;
  }

  :is(#favoritesPanel, #comparePanel) .compare-panel-item > img {
    width: 60px !important;
    height: 60px !important;
  }
}

/* Slightly widen only the header cart quantity-control outline. */
#cartPanel .cart-item-controls {
  padding-inline: 14px;
}

@media (max-width: 420px) {
  #cartPanel .cart-item-controls {
    padding-inline: 10px;
  }
}

/* Improve header-cart readability without shrinking text on narrow phones. */
#cartPanel .cart-head .cart-head-title strong {
  font-size: 18px !important;
}

#cartPanel .cart-head .cart-head-title small {
  font-size: 13px !important;
}

#cartPanel .cart-item-info > strong {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

#cartPanel .cart-item-actions > span {
  font-size: 13px !important;
}

#cartPanel .cart-footer .cart-total-amount > span {
  font-size: 13px;
}

#cartPanel .cart-footer .cart-total-amount > strong {
  font-size: 19px;
}

#cartPanel .cart-safety-copy strong {
  font-size: 14px;
}

#cartPanel .cart-safety-copy small {
  font-size: 12px !important;
}

#cartPanel .cart-footer > a {
  font-size: 14px !important;
}

@media (max-width: 420px) {
  #cartPanel .cart-item-info > strong {
    font-size: 14px !important;
  }

  #cartPanel .cart-footer .cart-total-amount > strong {
    font-size: 18px;
  }

  #cartPanel .cart-safety-copy strong {
    font-size: 13px;
  }

  #cartPanel .cart-safety-copy small {
    font-size: 12px !important;
  }
}

/* Shared readable type scale for page content, following the header-cart treatment. */
.inner-page main p {
  font-size: max(14px, 1em) !important;
}

.inner-page main label,
.inner-page main input,
.inner-page main select,
.inner-page main textarea {
  font-size: max(14px, 0.875em) !important;
}

.inner-page main :is(.page-kicker, .tracking-eyebrow, .journal-kicker) {
  font-size: 14px !important;
}

.inner-page main :is(.filter-option, .tracking-card li, .cart-breadcrumb li) {
  font-size: 14px !important;
}

/* Bring the smallest functional copy up while keeping metadata compact. */
.inner-page main :is(.payment-method strong, .contact-form .field-validation-error) {
  font-size: 13px !important;
}

.inner-page main .payment-method small,
.inner-page main .payment-method-soon {
  font-size: 12px !important;
}

.inner-page main :is(.cart-shipping-note, .cart-address-section > p, .cart-address-section .invoice-section-title p, .cart-address-section .address-preview p) {
  font-size: 14px !important;
  line-height: 1.8;
}

.inner-page main :is(.tracking-card-heading p, .tracking-support-card p, .tracking-field) {
  font-size: 14px !important;
  line-height: 1.85;
}

.inner-page main :is(.timeline-item small, .contact-method small, .compare-product-meta > small, .compare-price small, .compare-category-heading small, .compare-overview-copy small) {
  font-size: 13px !important;
}

.inner-page main :is(.journal-post .journal-read, .journal-count-badge, .journal-post .journal-meta, .journal-post time) {
  font-size: 13px !important;
}

@media (max-width: 575px) {
  .inner-page main p {
    font-size: max(14px, 1em) !important;
  }

  .inner-page main label,
  .inner-page main input,
  .inner-page main select,
  .inner-page main textarea {
    font-size: max(14px, 0.875em) !important;
  }
}

/* Keep high-value labels and price units comfortably readable on every route. */
.inner-page main :is(.cart-continue-link, .cart-clear-action, .checkout-address-action, .account-profile-edit) span,
.inner-page main .cart-continue-link,
.inner-page main .cart-clear-action,
.inner-page main .checkout-address-action,
.inner-page main .account-profile-edit {
  font-size: 14px !important;
}

.inner-page main .section-title > span,
.inner-page main .address-dialog-kicker {
  font-size: 14px !important;
}

.inner-page main :is(.cart-line-item small, .cart-product-row small, .product-detail-gallery-caption, .product-accessory-price small, .product-question-form-heading small, .product-feedback-admin-meta, .journal-post time, .journal-post .journal-meta) {
  font-size: 13px !important;
}

.inner-page main :is(.search-product .product-price-current small, .search-product .product-price-discount, .search-product .badge-best) {
  font-size: 13px !important;
}

.inner-page main .search-product .price-old {
  font-size: 14px !important;
}

.inner-page main :is(.account-nav a, .account-profile-edit, .account-stats small, .order-total small) {
  font-size: 13px !important;
}

.inner-page main .product-detail-gallery-open b,
.inner-page main .compare-card-top > span,
.inner-page main .compare-product-meta > span {
  font-size: 13px !important;
}

.inner-page main :is(.search-add-cart, .overview-heading > span, .product-price-trust-list, .product-price-context, .product-meta-pill, .product-meta-category-content, .product-detail-gallery-caption) {
  font-size: 13px !important;
}

.inner-page main :is(.search-results-count, .product-result-count, .compare-overview-copy small) {
  font-size: 13px !important;
}

.showcase-card-body h3 > .showcase-product-detail {
  color: inherit !important;
  text-decoration: none;
}

.showcase-card-body h3 > .showcase-product-detail:is(:hover, :focus-visible) {
  color: var(--industrial-yellow-dark) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Match drawer price and product-name sizes across all header panels. */
#cartPanel .cart-item-actions > span {
  font-size: 14px !important;
}

#cartPanel .cart-item-info > strong,
:is(#favoritesPanel, #comparePanel) .compare-panel-item > span > strong {
  font-size: 14px !important;
}

/* Product cards: keep the cart symbol legible and align card content across rows. */
.product-card > .add-cart > i,
.search-product.product-card > .search-add-cart > i,
.showcase-card-body > .add-cart > i,
.rail-card > .add-cart > i,
.product-detail-related-card > .add-cart > i {
  display: inline-block !important;
  color: var(--industrial-yellow) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.product-card > .add-cart:is(:hover, :focus-visible) > i,
.search-product.product-card > .search-add-cart:is(:hover, :focus-visible) > i,
.showcase-card-body > .add-cart:is(:hover, :focus-visible) > i,
.rail-card > .add-cart:is(:hover, :focus-visible) > i,
.product-detail-related-card > .add-cart:is(:hover, :focus-visible) > i {
  color: var(--industrial-navy) !important;
}

.product-card,
.search-product.product-card,
.showcase-card,
.rail-card,
#productView .product-detail-related-card {
  height: 100%;
}

.product-card .product-info,
.search-product.product-card .product-info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.product-card .product-info h3,
.search-product.product-card .product-info h3,
.showcase-card-body h3,
.rail-card h3,
#productView .product-detail-related-card .product-info h3 {
  display: -webkit-box;
  min-height: 4.95em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.product-card .product-info > p,
.search-product.product-card .search-product-price,
.showcase-card-body > strong,
.rail-card > strong {
  margin-top: auto !important;
}

.showcase-card-body,
.rail-card {
  display: flex;
  flex-direction: column;
}

.showcase-card-body > .add-cart,
.rail-card > .add-cart {
  margin-top: auto !important;
}

body.home-page .product-card .product-info,
body.home-page .showcase-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

body.home-page .product-card .product-info h3,
body.home-page .showcase-card-body h3,
body.home-page .rail-card h3 {
  min-height: 4.95em !important;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

body.home-page .product-card .product-info > p,
body.home-page .showcase-card-body > strong,
body.home-page .rail-card > strong {
  margin-top: auto !important;
}

@media (max-width: 767px) {
  body.home-page .product-card .product-info h3,
  body.home-page .showcase-card-body h3,
  body.home-page .rail-card h3 {
    min-height: 3.4em !important;
  }

  #recommendations #productRail > .owl-nav {
    display: none !important;
  }

  #recommendations #productRail > .owl-dots {
    display: flex !important;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    margin: 14px auto 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #recommendations #productRail > .owl-dots > .owl-dot {
    display: inline-flex !important;
    width: 28px !important;
    height: 28px !important;
    align-items: center;
    justify-content: center;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .home-page #mainNav .navbar-brand {
    top: 50%;
    right: 68px;
    left: auto;
    transform: translateY(-50%);
    font-size: 17px;
  }
}

/* Keep the offer-card cart icon visible on its navy action button. */
.home-page #amazing .showcase-card-body > .add-cart > i {
  color: var(--industrial-yellow) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.home-page #amazing .showcase-card-body > .add-cart:is(
    :hover,
    :focus-visible,
    .added
  ) > i {
  color: var(--industrial-navy) !important;
}

/* Keep the header support promise on one line beside the phone number. */
@media (min-width: 992px) {
  .home-page #mainNav .home-header-top {
    padding-right: 220px;
    padding-left: 190px;
    grid-template-columns: minmax(260px, 480px) 230px;
  }

  .home-page #mainNav .home-header-support small {
    white-space: nowrap;
  }
}

/* Equalize product cards across search, collection, and home-page grids. */
.product-results {
  align-items: stretch;
  grid-auto-rows: 1fr;
}

/* Outside the product detail page, product cards lead with the Persian name. */
.home-page .product-card .product-info > div > small,
.home-page .showcase-card-body > small,
.home-page :is(.featured-content, .featured-side-content) > small,
.search-main .search-product-heading > small,
#compareView .compare-product-meta,
#compareView .compare-product-card > dl > div:first-child {
  display: none !important;
}

.inner-page .search-product.product-card {
  height: 100% !important;
  min-height: 0 !important;
  align-self: stretch !important;
}

.home-page :is(.product-card, .showcase-card, .rail-card) {
  height: 100% !important;
  align-self: stretch !important;
}

.product-card,
.search-product.product-card,
.showcase-card,
.rail-card,
#productView .product-detail-related-card {
  height: 100% !important;
  align-self: stretch !important;
}

.product-card .product-info,
.search-product.product-card .product-info,
.showcase-card-body,
.rail-card,
#productView .product-detail-related-card .product-info {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.inner-page .search-product.product-card .product-info h3 {
  display: -webkit-box;
  min-height: 4.95em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.inner-page .search-product.product-card .search-product-body {
  flex: 1 1 auto;
}

.inner-page .search-product.product-card .search-product-price {
  display: flex;
  min-height: 58px;
  margin: auto 0 0 !important;
  flex-direction: column;
  justify-content: center;
}

.inner-page .search-product.product-card .search-product-price.has-discount {
  display: grid;
  min-height: 58px;
  align-content: center;
}

.product-card > .add-cart,
.search-product.product-card > .search-add-cart,
.showcase-card-body > .add-cart,
.rail-card > .add-cart,
#productView .product-detail-related-card > .add-cart {
  margin-top: auto !important;
  flex-shrink: 0;
}

/* Reserve the same price row for discounted and regular product cards. */
.product-card .product-info > p,
.search-product.product-card .search-product-price,
.showcase-card-body > strong,
.showcase-card-body > .product-card-sale-price,
.rail-card > strong,
.rail-card > .product-card-sale-price {
  min-height: 58px !important;
  margin-top: auto !important;
  margin-bottom: 8px !important;
  align-content: start;
  justify-content: flex-start;
}

.showcase-card-body > strong,
.rail-card > strong {
  display: flex;
  align-items: flex-start;
}

.product-card > .add-cart,
.search-product.product-card > .search-add-cart,
.showcase-card-body > .add-cart,
.rail-card > .add-cart,
#productView .product-detail-related-card > .add-cart {
  margin-top: 0 !important;
}

@media (max-width: 767px) {
  footer .footer-main > div:not(:first-child) a {
    font-size: 14px !important;
    line-height: 1.8;
  }
}

/* Refined back-to-top control with a light upward cue on hover. */
.back-to-top {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(246, 197, 21, 0.58) !important;
  border-radius: 50% !important;
  background: rgba(16, 42, 67, 0.94) !important;
  box-shadow: 0 5px 16px rgba(16, 42, 67, 0.2) !important;
  color: var(--industrial-yellow) !important;
  font-size: 17px !important;
  transform: translateY(12px) scale(0.92);
  transition:
    opacity 0.24s ease,
    visibility 0.24s ease,
    transform 0.34s cubic-bezier(0.2, 0.85, 0.25, 1.2),
    background-color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.back-to-top.is-visible {
  transform: translateY(0) scale(1);
}

.back-to-top > i {
  display: block;
  transition: transform 0.24s ease;
}

.back-to-top:is(:hover, :focus-visible) {
  border-color: var(--industrial-yellow) !important;
  background: var(--industrial-yellow) !important;
  box-shadow: 0 8px 20px rgba(16, 42, 67, 0.24) !important;
  color: var(--industrial-navy) !important;
  transform: translateY(-2px) scale(1.03);
}

.back-to-top:is(:hover, :focus-visible) > i {
  animation: back-to-top-arrow 0.7s ease-in-out infinite;
}

@keyframes back-to-top-arrow {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@media (max-width: 575px) {
  .back-to-top {
    bottom: 16px;
    left: 14px;
    width: 40px !important;
    height: 40px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top,
  .back-to-top > i {
    transition: none !important;
    animation: none !important;
  }
}

/* One sale-price treatment across home, search, favorites, and comparison cards. */
.product-card-sale-price {
  display: grid;
  min-height: 58px;
  margin-top: auto;
  align-content: center;
  gap: 2px;
}

.product-card-sale-price .product-price-deal,
.compare-price-values .product-price-deal {
  justify-content: flex-start;
}

.product-card-sale-price .product-price-current {
  font-size: 18px;
}

.product-card .product-info > p.has-discount {
  display: grid;
  min-height: 58px;
  align-content: center;
  gap: 2px;
}

#favoritesView .favorite-item-card > p.has-discount {
  display: grid;
  gap: 3px;
}

.compare-price-values {
  display: grid;
  justify-items: start;
  gap: 3px;
}

.compare-price-values.has-discount .product-price-current {
  font-size: 18px;
}

.product-price-discount {
  font-size: 12px;
}

.product-card-sale-price,
.product-card .product-info > p,
.search-product .search-product-price,
.showcase-card-body > strong,
.showcase-card-body > .product-card-sale-price,
.rail-card > strong,
.rail-card > .product-card-sale-price,
#productView .product-detail-related-card .product-info > p {
  margin-bottom: 8px !important;
}

.inner-page .search-product.product-card .search-product-price {
  margin-bottom: 8px !important;
}

body.home-page .product-card .product-info > p {
  margin-bottom: 8px !important;
}

/* Keep related-product titles, sale prices, and cart actions on shared rows. */
#productView .product-detail-related-card {
  display: flex;
  flex-direction: column;
}

#productView .product-detail-related-card .product-info {
  flex: 1 1 auto;
}

#productView .product-detail-related-card .product-info h3 {
  display: -webkit-box;
  min-height: 43px;
  max-height: 43px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

#productView .product-detail-related-card .product-info > p {
  display: grid;
  min-height: 58px;
  margin: auto 0 8px !important;
  align-content: start;
  justify-items: start;
  line-height: 1.65;
}

#productView .product-detail-related-card .product-info > p.has-discount {
  grid-template-rows: 29px 23px;
  align-content: start;
  row-gap: 0;
}

#productView .product-detail-related-card > .add-cart {
  margin: 0 10px 10px !important;
  flex: 0 0 auto;
}

#productView .product-detail-related-card .product-info > p > .product-price-current {
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.55;
}

#productView .product-detail-related-card .product-info > p > .product-price-current small {
  font-size: 11px !important;
}

#productView .product-detail-related-card .product-info > p .price-old {
  font-size: 14px !important;
  line-height: 1.5;
}

#productView .product-detail-related-card .product-info > p .product-price-discount {
  min-height: 25px;
  font-size: 12px !important;
}

/* Give customer reviews a compact, consistent card layout with clear hierarchy. */
.home-page .testimonials.py-section {
  background:
    radial-gradient(ellipse at 92% 6%, rgba(190, 151, 91, 0.1), transparent 34%),
    linear-gradient(180deg, #f8f6f1, #f1eee7);
}

.home-page .testimonials .testimonial-card,
.home-page .testimonials .testimonial-card.featured-review {
  min-height: 292px;
  padding: 25px 26px 21px;
  overflow: hidden;
  border: 1px solid rgba(178, 146, 96, 0.3) !important;
  border-radius: 18px;
  background: linear-gradient(155deg, #fff 0%, #fff 68%, #fbf8f1 100%) !important;
  box-shadow: 0 12px 30px rgba(20, 39, 60, 0.07) !important;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease;
}

.home-page .testimonials .testimonial-card::before {
  right: 28%;
  left: 28%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #c29a5c, transparent);
}

.home-page .testimonials .testimonial-card:hover {
  transform: translateY(-4px);
  border-color: rgba(178, 146, 96, 0.52) !important;
  box-shadow: 0 18px 36px rgba(20, 39, 60, 0.11) !important;
}

.home-page .testimonials .testimonial-card .quote-mark {
  top: 18px;
  left: 20px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(178, 146, 96, 0.18);
  border-radius: 11px;
  background: #f8f3e9;
  color: #aa8248;
  font-family: Georgia, serif;
  font-size: 29px;
  line-height: 1;
  opacity: 0.9;
}

.home-page .testimonials .testimonial-card .quote-mark::before {
  content: "“";
}

.home-page .testimonials .testimonial-card .rating-stars {
  color: #b58b50;
  font-size: 12px;
}

.home-page .testimonials .testimonial-card > p {
  display: -webkit-box;
  min-height: 5.2em;
  margin: 20px 0 18px;
  overflow: hidden;
  color: #4b5a70 !important;
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.home-page .testimonials .testimonial-card .reviewer {
  min-height: 58px;
  padding-top: 14px;
  border-top: 1px solid rgba(27, 48, 72, 0.09);
}

.home-page .testimonials .testimonial-card .reviewer-avatar {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(27, 48, 72, 0.06);
  overflow: hidden;
  padding: 0;
}

.home-page .testimonials .testimonial-card .reviewer-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center 38%;
}

.home-page .testimonials .testimonial-card .reviewer strong {
  font-size: 13px;
  font-weight: 800;
}

.home-page .testimonials .testimonial-card .reviewer small {
  margin-top: 4px;
  font-size: 11px;
}

.home-page .testimonials .testimonial-card .reviewer > i {
  color: #16845b !important;
  font-size: 16px;
}

@media (max-width: 767px) {
  .home-page .testimonials .testimonial-card,
  .home-page .testimonials .testimonial-card.featured-review {
    min-height: 260px;
    padding: 23px 19px 18px;
  }

  .home-page .testimonials .testimonial-card > p {
    min-height: 4.8em;
    font-size: 14px;
    line-height: 1.9;
  }
}

/* Use the same arrow and pill-dot language for every carousel on the site. */
body .owl-carousel > .owl-nav button,
body .electrical-swiper .electrical-arrow {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #183d63, var(--industrial-navy)) !important;
  color: var(--industrial-yellow) !important;
  box-shadow:
    0 5px 14px rgba(16, 42, 67, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.12) !important;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

body .owl-carousel > .owl-nav button:is(:hover, :focus-visible),
body .electrical-swiper .electrical-arrow:is(:hover, :focus-visible) {
  border-color: var(--industrial-yellow) !important;
  background: var(--industrial-yellow) !important;
  color: var(--industrial-navy) !important;
  box-shadow: 0 7px 17px rgba(16, 42, 67, 0.22) !important;
  transform: translateY(-1px) scale(1.05);
}

body .owl-carousel > .owl-nav button:focus-visible,
body .electrical-swiper .electrical-arrow:focus-visible {
  outline: 3px solid rgba(246, 197, 21, 0.42) !important;
  outline-offset: 3px;
}

body .owl-carousel > .owl-nav button:disabled {
  opacity: 0.42;
  cursor: default;
  transform: none;
}

body .owl-carousel > .owl-dots {
  display: flex !important;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 18px auto 0 !important;
  direction: ltr;
}

body .owl-carousel > .owl-dots > .owl-dot {
  display: inline-flex !important;
  width: 28px !important;
  height: 28px !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  box-shadow: none !important;
}

body .owl-carousel > .owl-dots > .owl-dot span,
body .electrical-swiper .swiper-pagination-bullet {
  display: block;
  width: 8px;
  height: 8px;
  margin: 0 !important;
  border: 1px solid rgba(16, 42, 67, 0.24);
  border-radius: 999px;
  background: #d7d0c5;
  opacity: 1;
  transition:
    width 0.24s ease,
    height 0.24s ease,
    background-color 0.24s ease,
    border-color 0.24s ease,
    transform 0.24s ease;
}

body .owl-carousel > .owl-dots > .owl-dot:is(:hover, :focus-visible) span {
  border-color: var(--industrial-yellow-dark);
  background: #c3a16c;
  transform: scale(1.12);
}

body .owl-carousel > .owl-dots > .owl-dot.active span,
body .electrical-swiper .swiper-pagination-bullet-active {
  width: 28px !important;
  height: 8px;
  border-color: var(--industrial-navy) !important;
  border-radius: 999px !important;
  background: var(--industrial-navy) !important;
}

body .electrical-swiper .swiper-pagination-bullet-active {
  border-color: var(--industrial-yellow) !important;
  background: var(--industrial-yellow) !important;
}

@media (max-width: 767px) {
  body .electrical-swiper .electrical-arrow {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .owl-carousel > .owl-nav button,
  body .electrical-swiper .electrical-arrow,
  body .owl-carousel > .owl-dots > .owl-dot span,
  body .electrical-swiper .swiper-pagination-bullet {
    transition: none;
  }
}

/* Blend the cream and white surfaces between the home service and journal areas. */
.home-page #services.purchase-benefits--showcase {
  border-color: rgba(178, 146, 96, 0.12);
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(246, 197, 21, 0.1),
      transparent 30%
    ),
    linear-gradient(118deg, #fffdf8 0%, #faf8f1 46%, #f5f7f8 100%);
  box-shadow: 0 14px 34px rgba(27, 39, 67, 0.045);
}

.home-page #journal.py-section {
  background: linear-gradient(
    180deg,
    #f5f7f8 0%,
    #f8f6f0 22%,
    #f5f7f8 100%
  );
}

.home-page #journal > .container {
  background: linear-gradient(145deg, #fff 0%, #fffdf8 54%, #f8f5ed 100%);
}

/* Varied review ratings and a quiet date label at the lower-left of each testimonial. */
.home-page .testimonials .testimonial-card .rating-stars {
  gap: 3px;
}

.home-page .testimonials .testimonial-card .reviewer {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  column-gap: 10px;
}

.home-page .testimonials .testimonial-card .review-date {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid rgba(178, 146, 96, 0.2);
  border-radius: 999px;
  background: #f8f5ee;
  color: #758194;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.home-page .testimonials .testimonial-card .review-date i {
  color: #b28a4f;
  font-size: 11px;
}

@media (max-width: 575px) {
  .home-page .testimonials .testimonial-card .reviewer {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    column-gap: 7px;
  }

  .home-page .testimonials .testimonial-card .review-date {
    gap: 4px;
    padding: 6px 8px;
    font-size: 10px;
  }
}
/* Give customer portraits more presence in the testimonial cards. */
.home-page .testimonials .testimonial-card .reviewer {
  grid-template-columns: 52px minmax(0, 1fr) auto;
}

.home-page .testimonials .testimonial-card .reviewer-avatar {
  width: 52px;
  height: 52px;
}

@media (max-width: 575px) {
  .home-page .testimonials .testimonial-card .reviewer {
    grid-template-columns: 46px minmax(0, 1fr) auto;
  }

  .home-page .testimonials .testimonial-card .reviewer-avatar {
    width: 46px;
    height: 46px;
  }
}
/* Keep the purchased category and review date on one shared baseline. */
.home-page .testimonials .testimonial-card .reviewer {
  grid-template-columns: 52px minmax(0, 1fr);
}

.home-page .testimonials .testimonial-card .reviewer > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name name"
    "category date";
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
  min-width: 0;
}

.home-page .testimonials .testimonial-card .reviewer > div > strong {
  grid-area: name;
}

.home-page .testimonials .testimonial-card .reviewer > div > small {
  grid-area: category;
  min-width: 0;
  margin-top: 0;
  white-space: nowrap;
}

.home-page .testimonials .testimonial-card .reviewer > div > .review-date {
  grid-area: date;
  justify-self: start;
}

@media (max-width: 575px) {
  .home-page .testimonials .testimonial-card .reviewer {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .home-page .testimonials .testimonial-card .reviewer > div {
    column-gap: 5px;
  }
}
/* Improve the visibility of the support line and mobile number in the header. */
.home-page #mainNav .home-header-support small {
  color: #657486;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.home-page #mainNav .home-header-support strong {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
}
/* Align the home header with the shared header layout used on inner pages. */
@media (min-width: 992px) {
  .home-page #mainNav .navbar-brand {
    top: -64px;
  }

  .home-page #mainNav .home-header-support small,
  .inner-page #mainNav .home-header-support small {
    color: #657486;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
  }

  .home-page #mainNav .home-header-support strong,
  .inner-page #mainNav .home-header-support strong {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.45;
  }
}
/* Smooth desktop category and brand menus, including their closing state. */
@media (min-width: 992px) {
  .home-page #mainNav .mega-dropdown > .mega-menu,
  .inner-page #mainNav .category-nav-mega,
  #mainNav .brand-dropdown > .brand-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(9px);
    transition:
      opacity 180ms ease,
      transform 180ms ease,
      visibility 0s linear 180ms;
    will-change: opacity, transform;
  }

  .home-page #mainNav .mega-dropdown > .mega-menu {
    display: block !important;
    transform: translate(50%, 9px) !important;
  }

  .inner-page #mainNav .category-nav-mega,
  #mainNav .brand-dropdown > .brand-menu {
    display: grid !important;
  }

  #mainNav .brand-dropdown > .brand-menu {
    transform: translate(-50%, 9px) !important;
  }

  .home-page #mainNav .mega-dropdown:is(:hover, :focus-within, .show) > .mega-menu,
  .inner-page #mainNav .category-nav-dropdown:is(:hover, :focus-within, .show, .is-mega-open) > .category-nav-mega,
  #mainNav .brand-dropdown:is(:hover, :focus-within, .show) > .brand-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .home-page #mainNav .mega-dropdown:is(:hover, :focus-within, .show) > .mega-menu {
    transform: translate(50%, 0) !important;
  }

  #mainNav .brand-dropdown:is(:hover, :focus-within, .show) > .brand-menu {
    transform: translate(-50%, 0) !important;
  }

  #mainNav .navbar-brand {
    transition: color 180ms ease;
  }

  #mainNav .navbar-brand:hover,
  #mainNav .navbar-brand:focus-visible {
    color: var(--industrial-navy) !important;
  }

  #mainNav .navbar-brand > span {
    transition:
      background-color 180ms ease,
      color 180ms ease,
      transform 180ms ease,
      box-shadow 180ms ease;
  }

  #mainNav .navbar-brand:hover > span,
  #mainNav .navbar-brand:focus-visible > span {
    background: #ffdc4d !important;
    color: var(--industrial-navy) !important;
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 4px 12px rgba(246, 197, 21, 0.28) !important;
  }

  #mainNav .nav-link:is(:hover, :focus-visible, .active) .nav-menu-icon,
  #mainNav .dropdown:is(:hover, :focus-within, .show) > .nav-link .nav-menu-icon {
    color: #ffd447 !important;
    filter: drop-shadow(0 0 4px rgba(246, 197, 21, 0.28));
  }

  .home-page #mainNav .navbar-nav > .nav-item:first-child > .nav-link:is(:hover, :focus-visible, .active) .nav-menu-icon {
    color: var(--industrial-navy) !important;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page #mainNav .mega-dropdown > .mega-menu,
  .inner-page #mainNav .category-nav-mega,
  #mainNav .brand-dropdown > .brand-menu,
  #mainNav .navbar-brand,
  #mainNav .navbar-brand > span,
  #mainNav .nav-menu-icon {
    transition-duration: 0.01ms !important;
  }
}
/* Keep the contact submit icon clear against its yellow button. */
.inner-page .contact-submit > i {
  color: var(--industrial-navy) !important;
  transition: color 180ms ease, transform 180ms ease;
}

.inner-page .contact-submit:hover > i,
.inner-page .contact-submit:focus-visible > i {
  color: var(--industrial-yellow) !important;
  transform: translateX(-2px);
}
/* Set testimonial portraits to 60px and rebalance spacing around reviewer details. */
.home-page .testimonials .testimonial-card .reviewer {
  min-height: 78px;
  grid-template-columns: 60px minmax(0, 1fr);
  column-gap: 13px;
  padding-top: 16px;
}

.home-page .testimonials .testimonial-card .reviewer-avatar {
  width: 60px;
  height: 60px;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(16, 42, 67, 0.14);
}

.home-page .testimonials .testimonial-card .reviewer > div {
  row-gap: 6px;
  column-gap: 10px;
  align-self: center;
}

.home-page .testimonials .testimonial-card .reviewer > div > small {
  line-height: 1.4;
}

@media (max-width: 575px) {
  .home-page .testimonials .testimonial-card .reviewer {
    min-height: 76px;
    grid-template-columns: 60px minmax(0, 1fr);
    column-gap: 10px;
  }

  .home-page .testimonials .testimonial-card .reviewer-avatar {
    width: 60px;
    height: 60px;
  }

  .home-page .testimonials .testimonial-card .reviewer > div {
    column-gap: 6px;
    row-gap: 5px;
  }
}

/* Make homepage journal metadata clearer without increasing the article list height. */
.home-page #journal .journal-main-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-bottom: 8px;
  color: #f4f6f8;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.home-page #journal .journal-main-meta-copy {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.home-page #journal .journal-main-meta :is(.journal-main-category, .journal-main-read, time) {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.home-page #journal .journal-main-category {
  color: #ffdc78;
}

.home-page #journal .journal-main-read,
.home-page #journal .journal-main-meta time {
  color: #eef3f6;
}

.home-page #journal .journal-main-meta i {
  color: #f6c515;
  font-size: 14px;
}

.home-page #journal .journal-main h3 {
  font-size: 28px;
  line-height: 1.65;
}

.home-page #journal .journal-list small {
  font-size: 13px !important;
  font-weight: 700;
}

.home-page #journal .journal-list h4 {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 767px) {
  .home-page #journal .journal-main-meta {
    gap: 6px 9px;
    font-size: 11px;
  }

  .home-page #journal .journal-main-meta-copy {
    gap: 6px 9px;
  }

  .home-page #journal .journal-main h3 {
    font-size: 20px;
    line-height: 1.5;
  }

  .home-page #journal .journal-list small {
    font-size: 12px !important;
  }

  .home-page #journal .journal-list h4 {
    font-size: 15px;
    line-height: 1.4;
  }
}
/* Contemporary hover and keyboard-focus treatment for homepage journal cards. */
.home-page #journal .journal-main {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(16, 42, 67, 0.16);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.home-page #journal .journal-main > img {
  transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 300ms ease;
}

.home-page #journal .journal-main > div {
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    transform 220ms ease,
    box-shadow 220ms ease;
}

.home-page #journal .journal-main:is(:hover, :focus-within) {
  transform: translateY(-4px);
  border-color: rgba(246, 197, 21, 0.72);
  box-shadow: 0 22px 44px rgba(16, 42, 67, 0.22);
}

.home-page #journal .journal-main:is(:hover, :focus-within) > img {
  transform: scale(1.045);
  filter: saturate(1.08);
}

.home-page #journal .journal-main:is(:hover, :focus-within) > div {
  border-color: rgba(255, 220, 77, 0.48);
  background-color: rgba(7, 26, 46, 0.88);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(4, 16, 35, 0.3);
}

.home-page #journal .journal-list article {
  position: relative;
  border: 1px solid transparent;
  border-bottom-color: rgba(16, 42, 67, 0.1);
  border-radius: 12px;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.home-page #journal .journal-list article::before {
  position: absolute;
  top: 18%;
  right: 0;
  width: 3px;
  height: 64%;
  border-radius: 999px;
  background: var(--industrial-yellow);
  content: "";
  opacity: 0;
  transform: scaleY(0.5);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.home-page #journal .journal-list article:is(:hover, :focus-within) {
  z-index: 1;
  border-color: rgba(212, 177, 77, 0.34);
  background: linear-gradient(100deg, #fff 0%, #fffdf7 100%);
  box-shadow: 0 8px 20px rgba(16, 42, 67, 0.09);
  transform: translateX(-3px);
}

.home-page #journal .journal-list article:is(:hover, :focus-within)::before {
  opacity: 1;
  transform: scaleY(1);
}

.home-page #journal .journal-list article > span {
  transition: color 180ms ease, transform 180ms ease;
}

.home-page #journal .journal-list article:is(:hover, :focus-within) > span {
  color: #9b7300;
  transform: scale(1.08);
}

.home-page #journal .journal-list h4 a {
  text-decoration: none;
  transition: color 180ms ease;
}

.home-page #journal .journal-list article:is(:hover, :focus-within) h4 a {
  color: var(--industrial-navy) !important;
}

.home-page #journal .section-head > a {
  display: inline-flex;
  min-height: 42px;
  padding: 8px 14px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(16, 42, 67, 0.14);
  border-radius: 999px;
  background: #fff;
  color: var(--industrial-navy) !important;
  text-decoration: none;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.home-page #journal .section-head > a:is(:hover, :focus-visible) {
  border-color: var(--industrial-yellow);
  background: #fff9df;
  box-shadow: 0 7px 18px rgba(16, 42, 67, 0.1);
  transform: translateY(-2px);
}

.home-page #journal :is(a, button):focus-visible {
  outline: 3px solid rgba(246, 197, 21, 0.7);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .home-page #journal :is(.journal-main, .journal-main > img, .journal-main > div, .journal-list article, .journal-list article::before, .journal-list article > span, .section-head > a, .journal-list h4 a) {
    transition: none !important;
    transform: none !important;
  }
}
/* Round the newsletter email input on its right-hand corners. */
.newsletter .subscribe input {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .inner-page #mainNav .navbar-nav {
    gap: 4px;
  }

  .inner-page #mainNav .nav-link {
    padding-inline: 8px !important;
    font-size: 13px;
  }

  .inner-page #mainNav .home-nav-groups {
    gap: 8px;
  }
}