/**
 * Cutsmart Front-End Professional Polish v0.2.0
 * CSS-only design-system layer for Joomla/Cassiopeia + VirtueMart + Cutsmart Assistant.
 * Safe intent: polish spacing, cards, buttons, typography, assistant styling and header/navigation presentation without hiding functionality. v0.1.1 fixed broad container centering; v0.1.2 adds safer header/nav polish; v0.2.0 refines the homepage hero/help panel/shop-by-need presentation.
 */

:root {
  --cs-blue: #063b78;
  --cs-blue-dark: #042b59;
  --cs-blue-soft: #eaf3ff;
  --cs-orange: #ff6a1a;
  --cs-orange-dark: #e85b10;
  --cs-bg: #f4f8fc;
  --cs-bg-card: #ffffff;
  --cs-border: #d9e6f2;
  --cs-border-strong: #b9cce2;
  --cs-text: #0b2440;
  --cs-muted: #5f7185;
  --cs-success: #138a45;
  --cs-radius-sm: 8px;
  --cs-radius: 12px;
  --cs-radius-lg: 18px;
  --cs-shadow-sm: 0 4px 14px rgba(6, 59, 120, .08);
  --cs-shadow: 0 12px 30px rgba(6, 59, 120, .12);
  --cs-shadow-lift: 0 18px 44px rgba(6, 59, 120, .16);
  --cs-container: 1360px;
}

html.cutsmart-polish-enabled,
html.cutsmart-polish-enabled body {
  scroll-behavior: smooth;
}

body.site,
body {
  color: var(--cs-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.site a,
body a {
  color: var(--cs-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.site a:hover,
body a:hover {
  color: var(--cs-orange-dark);
}

/* Controlled page width and breathing room
   v0.1.1: keep the Joomla site grid full-width, but centre the real content containers.
   The first polish pass was too broad and could leave the page content anchored left on wide screens. */
html.cutsmart-polish-enabled body.site .site-grid,
html.cutsmart-polish-enabled body .site-grid {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html.cutsmart-polish-enabled body.site .grid-child,
html.cutsmart-polish-enabled body.site .container,
html.cutsmart-polish-enabled body.site .container-sm,
html.cutsmart-polish-enabled body.site .container-md,
html.cutsmart-polish-enabled body.site .container-lg,
html.cutsmart-polish-enabled body.site .container-xl,
html.cutsmart-polish-enabled body.site .container-xxl,
html.cutsmart-polish-enabled body .grid-child,
html.cutsmart-polish-enabled body .container,
html.cutsmart-polish-enabled body .container-sm,
html.cutsmart-polish-enabled body .container-md,
html.cutsmart-polish-enabled body .container-lg,
html.cutsmart-polish-enabled body .container-xl,
html.cutsmart-polish-enabled body .container-xxl {
  max-width: min(var(--cs-container), calc(100vw - 32px));
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Some custom Cutsmart/VirtueMart pages wrap content outside Bootstrap containers. Centre those too,
   without touching full-width headers, offcanvas areas or the floating assistant. */
html.cutsmart-polish-enabled body.site main,
html.cutsmart-polish-enabled body.site #content,
html.cutsmart-polish-enabled body.site .com-content-article,
html.cutsmart-polish-enabled body.site .vm-page,
html.cutsmart-polish-enabled body.site .productdetails-view,
html.cutsmart-polish-enabled body.site .category-view,
html.cutsmart-polish-enabled body.site .browse-view,
html.cutsmart-polish-enabled body.site .featured-view,
html.cutsmart-polish-enabled body.site .latest-view,
html.cutsmart-polish-enabled body main,
html.cutsmart-polish-enabled body #content,
html.cutsmart-polish-enabled body .com-content-article,
html.cutsmart-polish-enabled body .vm-page,
html.cutsmart-polish-enabled body .productdetails-view,
html.cutsmart-polish-enabled body .category-view,
html.cutsmart-polish-enabled body .browse-view,
html.cutsmart-polish-enabled body .featured-view,
html.cutsmart-polish-enabled body .latest-view {
  max-width: min(var(--cs-container), calc(100vw - 32px));
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 640px) {
  html.cutsmart-polish-enabled body.site .grid-child,
  html.cutsmart-polish-enabled body.site .container,
  html.cutsmart-polish-enabled body .grid-child,
  html.cutsmart-polish-enabled body .container,
  html.cutsmart-polish-enabled body.site main,
  html.cutsmart-polish-enabled body.site #content,
  html.cutsmart-polish-enabled body main,
  html.cutsmart-polish-enabled body #content {
    max-width: calc(100vw - 20px);
  }
}

body.site main,
body main,
body #content,
body .com-content-article,
body .vm-page,
body .productdetails-view,
body .category-view,
body .browse-view,
body .featured-view,
body .latest-view {
  line-height: 1.55;
}

/* Header / navigation polish for Cassiopeia/custom header areas */
body.site .container-header,
body.site header.header,
body.site #header,
body .container-header,
body header.header,
body #header {
  background: linear-gradient(135deg, var(--cs-blue-dark), var(--cs-blue));
  box-shadow: 0 8px 22px rgba(4, 43, 89, .14);
}

body.site .container-header .navbar-brand,
body.site .container-header .brand-logo,
body.site .navbar-brand,
body .navbar-brand,
body .brand-logo {
  letter-spacing: -.02em;
}

body.site .container-header .mod-menu,
body.site .container-header nav,
body .container-header .mod-menu,
body .container-header nav {
  gap: 4px;
}

body.site .container-header .mod-menu a,
body.site .container-header nav a,
body .container-header .mod-menu a,
body .container-header nav a {
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 650;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

body.site .container-header .mod-menu a:hover,
body.site .container-header nav a:hover,
body .container-header .mod-menu a:hover,
body .container-header nav a:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}



/* v0.1.2 Header and navigation polish
   CSS-only: improve presentation without changing Joomla/VirtueMart/staff functionality. */
html.cutsmart-polish-enabled body.site .container-header,
html.cutsmart-polish-enabled body.site header.header,
html.cutsmart-polish-enabled body.site #header,
html.cutsmart-polish-enabled body .container-header,
html.cutsmart-polish-enabled body header.header,
html.cutsmart-polish-enabled body #header {
  background: linear-gradient(135deg, #042b59 0%, #063b78 58%, #0a477f 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 28px rgba(4, 43, 89, .18);
}

/* Centre header content but leave full-width background intact. */
html.cutsmart-polish-enabled body.site .container-header .grid-child,
html.cutsmart-polish-enabled body.site header.header .grid-child,
html.cutsmart-polish-enabled body.site #header .grid-child,
html.cutsmart-polish-enabled body.site .container-header .container,
html.cutsmart-polish-enabled body.site header.header .container,
html.cutsmart-polish-enabled body.site #header .container,
html.cutsmart-polish-enabled body .container-header .grid-child,
html.cutsmart-polish-enabled body header.header .grid-child,
html.cutsmart-polish-enabled body #header .grid-child,
html.cutsmart-polish-enabled body .container-header .container,
html.cutsmart-polish-enabled body header.header .container,
html.cutsmart-polish-enabled body #header .container {
  max-width: min(var(--cs-container), calc(100vw - 32px));
  margin-left: auto !important;
  margin-right: auto !important;
}

html.cutsmart-polish-enabled body.site .container-header a,
html.cutsmart-polish-enabled body.site header.header a,
html.cutsmart-polish-enabled body.site #header a,
html.cutsmart-polish-enabled body .container-header a,
html.cutsmart-polish-enabled body header.header a,
html.cutsmart-polish-enabled body #header a {
  text-decoration: none;
}

/* Keep the logo clean and consistent without crushing existing staff/internal layouts. */
html.cutsmart-polish-enabled body.site .container-header img,
html.cutsmart-polish-enabled body.site header.header img,
html.cutsmart-polish-enabled body.site #header img,
html.cutsmart-polish-enabled body .container-header img,
html.cutsmart-polish-enabled body header.header img,
html.cutsmart-polish-enabled body #header img {
  max-height: 92px;
  width: auto;
}

/* Primary navigation: modern spacing, clearer active/hover state. */
html.cutsmart-polish-enabled body.site .container-header .mod-menu,
html.cutsmart-polish-enabled body.site .container-header .navbar-nav,
html.cutsmart-polish-enabled body.site .container-header nav > ul,
html.cutsmart-polish-enabled body.site header.header .mod-menu,
html.cutsmart-polish-enabled body.site header.header .navbar-nav,
html.cutsmart-polish-enabled body.site header.header nav > ul,
html.cutsmart-polish-enabled body.site #header .mod-menu,
html.cutsmart-polish-enabled body.site #header .navbar-nav,
html.cutsmart-polish-enabled body.site #header nav > ul,
html.cutsmart-polish-enabled body .container-header .mod-menu,
html.cutsmart-polish-enabled body .container-header .navbar-nav,
html.cutsmart-polish-enabled body .container-header nav > ul,
html.cutsmart-polish-enabled body header.header .mod-menu,
html.cutsmart-polish-enabled body header.header .navbar-nav,
html.cutsmart-polish-enabled body header.header nav > ul,
html.cutsmart-polish-enabled body #header .mod-menu,
html.cutsmart-polish-enabled body #header .navbar-nav,
html.cutsmart-polish-enabled body #header nav > ul {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

html.cutsmart-polish-enabled body.site .container-header .mod-menu > li,
html.cutsmart-polish-enabled body.site .container-header .navbar-nav > li,
html.cutsmart-polish-enabled body.site .container-header nav > ul > li,
html.cutsmart-polish-enabled body.site header.header .mod-menu > li,
html.cutsmart-polish-enabled body.site header.header .navbar-nav > li,
html.cutsmart-polish-enabled body.site header.header nav > ul > li,
html.cutsmart-polish-enabled body.site #header .mod-menu > li,
html.cutsmart-polish-enabled body.site #header .navbar-nav > li,
html.cutsmart-polish-enabled body.site #header nav > ul > li,
html.cutsmart-polish-enabled body .container-header .mod-menu > li,
html.cutsmart-polish-enabled body .container-header .navbar-nav > li,
html.cutsmart-polish-enabled body .container-header nav > ul > li,
html.cutsmart-polish-enabled body header.header .mod-menu > li,
html.cutsmart-polish-enabled body header.header .navbar-nav > li,
html.cutsmart-polish-enabled body header.header nav > ul > li,
html.cutsmart-polish-enabled body #header .mod-menu > li,
html.cutsmart-polish-enabled body #header .navbar-nav > li,
html.cutsmart-polish-enabled body #header nav > ul > li {
  margin: 0;
}

html.cutsmart-polish-enabled body.site .container-header .mod-menu > li > a,
html.cutsmart-polish-enabled body.site .container-header .navbar-nav > li > a,
html.cutsmart-polish-enabled body.site .container-header nav > ul > li > a,
html.cutsmart-polish-enabled body.site header.header .mod-menu > li > a,
html.cutsmart-polish-enabled body.site header.header .navbar-nav > li > a,
html.cutsmart-polish-enabled body.site header.header nav > ul > li > a,
html.cutsmart-polish-enabled body.site #header .mod-menu > li > a,
html.cutsmart-polish-enabled body.site #header .navbar-nav > li > a,
html.cutsmart-polish-enabled body.site #header nav > ul > li > a,
html.cutsmart-polish-enabled body .container-header .mod-menu > li > a,
html.cutsmart-polish-enabled body .container-header .navbar-nav > li > a,
html.cutsmart-polish-enabled body .container-header nav > ul > li > a,
html.cutsmart-polish-enabled body header.header .mod-menu > li > a,
html.cutsmart-polish-enabled body header.header .navbar-nav > li > a,
html.cutsmart-polish-enabled body header.header nav > ul > li > a,
html.cutsmart-polish-enabled body #header .mod-menu > li > a,
html.cutsmart-polish-enabled body #header .navbar-nav > li > a,
html.cutsmart-polish-enabled body #header nav > ul > li > a {
  color: rgba(255,255,255,.94) !important;
  border-radius: 999px;
  padding: 10px 15px;
  font-weight: 750;
  letter-spacing: -.01em;
  line-height: 1.1;
  background: transparent;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

html.cutsmart-polish-enabled body.site .container-header .mod-menu > li > a:hover,
html.cutsmart-polish-enabled body.site .container-header .navbar-nav > li > a:hover,
html.cutsmart-polish-enabled body.site .container-header nav > ul > li > a:hover,
html.cutsmart-polish-enabled body.site header.header .mod-menu > li > a:hover,
html.cutsmart-polish-enabled body.site header.header .navbar-nav > li > a:hover,
html.cutsmart-polish-enabled body.site header.header nav > ul > li > a:hover,
html.cutsmart-polish-enabled body.site #header .mod-menu > li > a:hover,
html.cutsmart-polish-enabled body.site #header .navbar-nav > li > a:hover,
html.cutsmart-polish-enabled body.site #header nav > ul > li > a:hover,
html.cutsmart-polish-enabled body .container-header .mod-menu > li > a:hover,
html.cutsmart-polish-enabled body .container-header .navbar-nav > li > a:hover,
html.cutsmart-polish-enabled body .container-header nav > ul > li > a:hover,
html.cutsmart-polish-enabled body header.header .mod-menu > li > a:hover,
html.cutsmart-polish-enabled body header.header .navbar-nav > li > a:hover,
html.cutsmart-polish-enabled body header.header nav > ul > li > a:hover,
html.cutsmart-polish-enabled body #header .mod-menu > li > a:hover,
html.cutsmart-polish-enabled body #header .navbar-nav > li > a:hover,
html.cutsmart-polish-enabled body #header nav > ul > li > a:hover,
html.cutsmart-polish-enabled body.site .container-header .mod-menu > li.active > a,
html.cutsmart-polish-enabled body.site .container-header .navbar-nav > li.active > a,
html.cutsmart-polish-enabled body.site .container-header nav > ul > li.active > a,
html.cutsmart-polish-enabled body .container-header .mod-menu > li.active > a,
html.cutsmart-polish-enabled body .container-header .navbar-nav > li.active > a,
html.cutsmart-polish-enabled body .container-header nav > ul > li.active > a {
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.16);
  color: #fff !important;
  box-shadow: inset 0 -2px 0 rgba(255, 106, 26, .65);
}

/* Header utility actions: cart, login/logout, QR and account links. */
html.cutsmart-polish-enabled body.site .container-header .btn,
html.cutsmart-polish-enabled body.site header.header .btn,
html.cutsmart-polish-enabled body.site #header .btn,
html.cutsmart-polish-enabled body .container-header .btn,
html.cutsmart-polish-enabled body header.header .btn,
html.cutsmart-polish-enabled body #header .btn {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 11px;
}

html.cutsmart-polish-enabled body.site .container-header a[href*="cart"],
html.cutsmart-polish-enabled body.site header.header a[href*="cart"],
html.cutsmart-polish-enabled body.site #header a[href*="cart"],
html.cutsmart-polish-enabled body .container-header a[href*="cart"],
html.cutsmart-polish-enabled body header.header a[href*="cart"],
html.cutsmart-polish-enabled body #header a[href*="cart"],
html.cutsmart-polish-enabled body.site .container-header .vmCartModule,
html.cutsmart-polish-enabled body.site header.header .vmCartModule,
html.cutsmart-polish-enabled body.site #header .vmCartModule,
html.cutsmart-polish-enabled body .container-header .vmCartModule,
html.cutsmart-polish-enabled body header.header .vmCartModule,
html.cutsmart-polish-enabled body #header .vmCartModule {
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

/* Search module in header: make it feel deliberate, not like a loose floating icon. */
html.cutsmart-polish-enabled body.site .container-header .mod-finder,
html.cutsmart-polish-enabled body.site .container-header .finder,
html.cutsmart-polish-enabled body.site .container-header .search,
html.cutsmart-polish-enabled body.site header.header .mod-finder,
html.cutsmart-polish-enabled body.site header.header .finder,
html.cutsmart-polish-enabled body.site header.header .search,
html.cutsmart-polish-enabled body.site #header .mod-finder,
html.cutsmart-polish-enabled body.site #header .finder,
html.cutsmart-polish-enabled body.site #header .search,
html.cutsmart-polish-enabled body .container-header .mod-finder,
html.cutsmart-polish-enabled body .container-header .finder,
html.cutsmart-polish-enabled body .container-header .search,
html.cutsmart-polish-enabled body header.header .mod-finder,
html.cutsmart-polish-enabled body header.header .finder,
html.cutsmart-polish-enabled body header.header .search,
html.cutsmart-polish-enabled body #header .mod-finder,
html.cutsmart-polish-enabled body #header .finder,
html.cutsmart-polish-enabled body #header .search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

html.cutsmart-polish-enabled body.site .container-header input[type="search"],
html.cutsmart-polish-enabled body.site .container-header input[type="text"],
html.cutsmart-polish-enabled body.site header.header input[type="search"],
html.cutsmart-polish-enabled body.site header.header input[type="text"],
html.cutsmart-polish-enabled body.site #header input[type="search"],
html.cutsmart-polish-enabled body.site #header input[type="text"],
html.cutsmart-polish-enabled body .container-header input[type="search"],
html.cutsmart-polish-enabled body .container-header input[type="text"],
html.cutsmart-polish-enabled body header.header input[type="search"],
html.cutsmart-polish-enabled body header.header input[type="text"],
html.cutsmart-polish-enabled body #header input[type="search"],
html.cutsmart-polish-enabled body #header input[type="text"] {
  min-height: 38px;
  border-radius: 999px;
  border-color: rgba(255,255,255,.28);
}

html.cutsmart-polish-enabled body.site .container-header button[type="submit"],
html.cutsmart-polish-enabled body.site header.header button[type="submit"],
html.cutsmart-polish-enabled body.site #header button[type="submit"],
html.cutsmart-polish-enabled body .container-header button[type="submit"],
html.cutsmart-polish-enabled body header.header button[type="submit"],
html.cutsmart-polish-enabled body #header button[type="submit"] {
  min-height: 38px;
  border-radius: 999px;
  box-shadow: none;
}

/* Keep header cleaner on tablets/phones. */
@media (max-width: 991px) {
  html.cutsmart-polish-enabled body.site .container-header .grid-child,
  html.cutsmart-polish-enabled body.site header.header .grid-child,
  html.cutsmart-polish-enabled body.site #header .grid-child,
  html.cutsmart-polish-enabled body .container-header .grid-child,
  html.cutsmart-polish-enabled body header.header .grid-child,
  html.cutsmart-polish-enabled body #header .grid-child {
    max-width: calc(100vw - 20px);
  }

  html.cutsmart-polish-enabled body.site .container-header .mod-menu,
  html.cutsmart-polish-enabled body.site .container-header .navbar-nav,
  html.cutsmart-polish-enabled body.site header.header .mod-menu,
  html.cutsmart-polish-enabled body.site header.header .navbar-nav,
  html.cutsmart-polish-enabled body.site #header .mod-menu,
  html.cutsmart-polish-enabled body.site #header .navbar-nav,
  html.cutsmart-polish-enabled body .container-header .mod-menu,
  html.cutsmart-polish-enabled body .container-header .navbar-nav,
  html.cutsmart-polish-enabled body header.header .mod-menu,
  html.cutsmart-polish-enabled body header.header .navbar-nav,
  html.cutsmart-polish-enabled body #header .mod-menu,
  html.cutsmart-polish-enabled body #header .navbar-nav {
    gap: 5px;
  }

  html.cutsmart-polish-enabled body.site .container-header .mod-menu > li > a,
  html.cutsmart-polish-enabled body.site .container-header .navbar-nav > li > a,
  html.cutsmart-polish-enabled body.site header.header .mod-menu > li > a,
  html.cutsmart-polish-enabled body.site header.header .navbar-nav > li > a,
  html.cutsmart-polish-enabled body.site #header .mod-menu > li > a,
  html.cutsmart-polish-enabled body.site #header .navbar-nav > li > a,
  html.cutsmart-polish-enabled body .container-header .mod-menu > li > a,
  html.cutsmart-polish-enabled body .container-header .navbar-nav > li > a,
  html.cutsmart-polish-enabled body header.header .mod-menu > li > a,
  html.cutsmart-polish-enabled body header.header .navbar-nav > li > a,
  html.cutsmart-polish-enabled body #header .mod-menu > li > a,
  html.cutsmart-polish-enabled body #header .navbar-nav > li > a {
    padding: 9px 11px;
  }
}

/* Search / form input polish */
body.site input[type="text"],
body.site input[type="email"],
body.site input[type="tel"],
body.site input[type="search"],
body.site input[type="number"],
body.site input[type="password"],
body.site select,
body.site textarea,
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="search"],
body input[type="number"],
body input[type="password"],
body select,
body textarea {
  border: 1px solid var(--cs-border-strong);
  border-radius: 11px;
  min-height: 42px;
  color: var(--cs-text);
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}

body.site input:focus,
body.site select:focus,
body.site textarea:focus,
body input:focus,
body select:focus,
body textarea:focus {
  outline: none;
  border-color: var(--cs-blue);
  box-shadow: 0 0 0 4px rgba(6, 59, 120, .12);
}

/* Button system */
body.site .btn,
body.site button,
body.site input[type="submit"],
body.site input[type="button"],
body.site a.button,
body.site .button,
body.site .vm-button-correct,
body.site .addtocart-button,
body.site .addtocart-bar input.addtocart-button,
body .btn,
body button,
body input[type="submit"],
body input[type="button"],
body a.button,
body .button,
body .vm-button-correct,
body .addtocart-button,
body .addtocart-bar input.addtocart-button {
  border-radius: 11px;
  font-weight: 750;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid transparent;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

body.site .btn-primary,
body.site .button.primary,
body.site .vm-button-correct,
body.site .addtocart-button,
body.site .addtocart-bar input.addtocart-button,
body.site input[type="submit"],
body .btn-primary,
body .button.primary,
body .vm-button-correct,
body .addtocart-button,
body .addtocart-bar input.addtocart-button,
body input[type="submit"] {
  background: var(--cs-orange);
  color: #fff !important;
  border-color: var(--cs-orange);
  box-shadow: 0 10px 18px rgba(255, 106, 26, .2);
}

body.site .btn-primary:hover,
body.site .button.primary:hover,
body.site .vm-button-correct:hover,
body.site .addtocart-button:hover,
body.site .addtocart-bar input.addtocart-button:hover,
body.site input[type="submit"]:hover,
body .btn-primary:hover,
body .button.primary:hover,
body .vm-button-correct:hover,
body .addtocart-button:hover,
body .addtocart-bar input.addtocart-button:hover,
body input[type="submit"]:hover {
  background: var(--cs-orange-dark);
  border-color: var(--cs-orange-dark);
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(255, 106, 26, .26);
}

body.site .btn-secondary,
body.site .btn-outline-primary,
body.site .btn-outline-secondary,
body.site .ask-button-secondary,
body.site .quote-button,
body .btn-secondary,
body .btn-outline-primary,
body .btn-outline-secondary,
body .ask-button-secondary,
body .quote-button {
  background: #fff;
  color: var(--cs-blue) !important;
  border-color: var(--cs-border-strong);
  box-shadow: var(--cs-shadow-sm);
}

body.site .btn-secondary:hover,
body.site .btn-outline-primary:hover,
body.site .btn-outline-secondary:hover,
body.site .ask-button-secondary:hover,
body.site .quote-button:hover,
body .btn-secondary:hover,
body .btn-outline-primary:hover,
body .btn-outline-secondary:hover,
body .ask-button-secondary:hover,
body .quote-button:hover {
  border-color: var(--cs-blue);
  background: var(--cs-blue-soft);
  transform: translateY(-1px);
}

/* Headings */
body.site h1,
body.site .h1,
body h1,
body .h1 {
  color: var(--cs-text);
  letter-spacing: -.035em;
  font-weight: 850;
  line-height: 1.08;
}

body.site h2,
body.site .h2,
body h2,
body .h2 {
  color: var(--cs-text);
  letter-spacing: -.025em;
  font-weight: 800;
  line-height: 1.15;
}

body.site h3,
body.site .h3,
body h3,
body .h3 {
  color: var(--cs-text);
  letter-spacing: -.015em;
  font-weight: 750;
}

body.site .lead,
body .lead,
body.site .muted,
body .muted,
body.site small,
body small {
  color: var(--cs-muted);
}

/* Generic card polish */
body.site .card,
body.site .well,
body.site .module,
body.site .moduletable,
body.site .product,
body.site .spacer,
body.site .vm-product,
body.site .vm-col,
body.site .category,
body .card,
body .well,
body .module,
body .moduletable,
body .product,
body .spacer,
body .vm-product,
body .vm-col,
body .category {
  border-radius: var(--cs-radius);
  border-color: var(--cs-border);
}

body.site .card,
body.site .vm-product,
body.site .product .spacer,
body.site .browse-view .product,
body.site .latest-view .product,
body.site .featured-view .product,
body.site .category-view .category,
body .card,
body .vm-product,
body .product .spacer,
body .browse-view .product,
body .latest-view .product,
body .featured-view .product,
body .category-view .category {
  background: var(--cs-bg-card);
  box-shadow: var(--cs-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.site .browse-view .product:hover,
body.site .latest-view .product:hover,
body.site .featured-view .product:hover,
body.site .product .spacer:hover,
body.site .category-view .category:hover,
body .browse-view .product:hover,
body .latest-view .product:hover,
body .featured-view .product:hover,
body .product .spacer:hover,
body .category-view .category:hover {
  transform: translateY(-2px);
  box-shadow: var(--cs-shadow);
  border-color: var(--cs-border-strong);
}

/* VirtueMart product page polish */
body.site .productdetails-view,
body .productdetails-view {
  padding-top: 16px;
}

body.site .productdetails-view .product-title,
body.site .productdetails-view h1,
body .productdetails-view .product-title,
body .productdetails-view h1 {
  color: var(--cs-text);
  margin-bottom: 10px;
}

body.site .productdetails-view .vm-product-media-container,
body.site .productdetails-view .main-image,
body .productdetails-view .vm-product-media-container,
body .productdetails-view .main-image {
  background: #fff;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-sm);
  padding: 14px;
}

body.site .productdetails-view .additional-images img,
body.site .productdetails-view .additional-images a,
body .productdetails-view .additional-images img,
body .productdetails-view .additional-images a {
  border-radius: 10px;
}

body.site .productdetails-view .product-price,
body.site .PricesalesPrice,
body .productdetails-view .product-price,
body .PricesalesPrice {
  color: var(--cs-blue-dark);
  font-weight: 850;
  letter-spacing: -.02em;
}

body.site .productdetails-view .availability,
body.site .availability,
body .productdetails-view .availability,
body .availability {
  color: var(--cs-success);
  font-weight: 700;
}

body.site .productdetails-view .product-short-description,
body.site .productdetails-view .product-description,
body .productdetails-view .product-short-description,
body .productdetails-view .product-description {
  color: var(--cs-text);
  line-height: 1.62;
}

/* Tabs and panels */
body.site .nav-tabs,
body .nav-tabs {
  border-bottom-color: var(--cs-border);
  gap: 6px;
}

body.site .nav-tabs .nav-link,
body .nav-tabs .nav-link {
  border-radius: 10px 10px 0 0;
  font-weight: 700;
  color: var(--cs-blue);
}

body.site .nav-tabs .nav-link.active,
body .nav-tabs .nav-link.active {
  color: var(--cs-text);
  border-color: var(--cs-border) var(--cs-border) #fff;
}

/* Homepage and future design-system utility classes */
body.site .cs-hero,
body .cs-hero {
  background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 70%, #fff2eb 100%);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-sm);
  padding: clamp(24px, 4vw, 52px);
}

body.site .cs-hero h1,
body .cs-hero h1 {
  color: var(--cs-blue-dark);
  font-size: clamp(32px, 5vw, 62px);
  max-width: 820px;
}

body.site .cs-hero p,
body .cs-hero p {
  color: var(--cs-text);
  font-size: clamp(16px, 1.8vw, 21px);
  max-width: 820px;
}

body.site .cs-help-panel,
body .cs-help-panel {
  background: #fff;
  border: 1px solid var(--cs-border-strong);
  border-left: 4px solid var(--cs-orange);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow);
  padding: 22px;
}

body.site .cs-shop-need-card,
body .cs-shop-need-card {
  background: #fff;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-sm);
  padding: 20px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.site .cs-shop-need-card:hover,
body .cs-shop-need-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--cs-shadow);
  border-color: var(--cs-border-strong);
}

/* Badges / Customer Information application labels */
body.site .badge,
body.site .label,
body.site .vm-badge,
body.site .product-field-display,
body .badge,
body .label,
body .vm-badge,
body .product-field-display {
  border-radius: 999px;
}

body.site .cs-usage-badge,
body.site .customer-information,
body.site .designated-application,
body .cs-usage-badge,
body .customer-information,
body .designated-application {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  background: var(--cs-blue-soft);
  color: var(--cs-blue-dark);
  border: 1px solid rgba(6, 59, 120, .14);
}

/* Related products */
body.site .related-products,
body.site .product-related-products,
body.site .vm-related-products,
body .related-products,
body .product-related-products,
body .vm-related-products {
  margin-top: 24px;
}

body.site .related-products .product,
body.site .product-related-products .product,
body.site .vm-related-products .product,
body .related-products .product,
body .product-related-products .product,
body .vm-related-products .product {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  box-shadow: var(--cs-shadow-sm);
  padding: 12px;
}

/* Cutsmart Assistant polish */
body.site .cutsmart-assistant,
body.site .cutsmart-assistant-widget,
body.site .cutsmart-assistant-panel,
body.site .cs-assistant,
body.site #cutsmart-assistant,
body [class*="cutsmart-assistant"],
body .cs-assistant,
body #cutsmart-assistant {
  border-radius: var(--cs-radius-lg);
}

body.site .cutsmart-assistant-panel,
body.site .cutsmart-product-assistant,
body.site .cs-product-assistant,
body .cutsmart-assistant-panel,
body .cutsmart-product-assistant,
body .cs-product-assistant {
  background: #fff;
  border: 1px solid var(--cs-border-strong);
  box-shadow: var(--cs-shadow-sm);
}

body.site .cutsmart-assistant-header,
body.site .cs-assistant-header,
body .cutsmart-assistant-header,
body .cs-assistant-header {
  background: linear-gradient(135deg, var(--cs-blue-dark), var(--cs-blue));
  color: #fff;
  border-radius: var(--cs-radius-lg) var(--cs-radius-lg) 0 0;
}

body.site .cutsmart-assistant button,
body.site .cutsmart-assistant .btn,
body.site .cs-assistant button,
body.site .cs-assistant .btn,
body .cutsmart-assistant button,
body .cutsmart-assistant .btn,
body .cs-assistant button,
body .cs-assistant .btn {
  border-radius: 12px;
}

body.site .cutsmart-assistant .message,
body.site .cutsmart-assistant .chat-message,
body.site .cs-assistant .message,
body.site .cs-assistant .chat-message,
body .cutsmart-assistant .message,
body .cutsmart-assistant .chat-message,
body .cs-assistant .message,
body .cs-assistant .chat-message {
  border-radius: 14px;
  line-height: 1.5;
}

body.site .cutsmart-assistant input,
body.site .cutsmart-assistant textarea,
body.site .cs-assistant input,
body.site .cs-assistant textarea,
body .cutsmart-assistant input,
body .cutsmart-assistant textarea,
body .cs-assistant input,
body .cs-assistant textarea {
  border-radius: 12px;
}

body.site .cutsmart-assistant-product-card,
body.site .cs-assistant-product-card,
body .cutsmart-assistant-product-card,
body .cs-assistant-product-card {
  background: #fff;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  box-shadow: var(--cs-shadow-sm);
  padding: 12px;
}

/* Floating Ask Cutsmart button: keep prominent but polished */
body.site .cutsmart-assistant-floating-button,
body.site .cs-assistant-floating-button,
body.site .ask-cutsmart-button,
body .cutsmart-assistant-floating-button,
body .cs-assistant-floating-button,
body .ask-cutsmart-button {
  background: var(--cs-orange) !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 28px rgba(255, 106, 26, .28) !important;
  font-weight: 800;
}

/* Breadcrumbs */
body.site .breadcrumb,
body .breadcrumb {
  background: var(--cs-bg);
  border-radius: var(--cs-radius);
  padding: 10px 14px;
}

/* Table polish, useful for IPL parts tables */
body.site table,
body table {
  border-color: var(--cs-border);
}

body.site table th,
body table th {
  color: var(--cs-text);
  font-weight: 800;
  background: var(--cs-bg);
}

body.site table td,
body table td {
  border-color: var(--cs-border);
}

/* Mobile refinements */
@media (max-width: 991px) {
  body.site .container-header .mod-menu a,
  body.site .container-header nav a,
  body .container-header .mod-menu a,
  body .container-header nav a {
    border-radius: 10px;
  }

  body.site .cs-hero,
  body .cs-hero {
    padding: 24px;
  }

  body.site .productdetails-view .vm-product-media-container,
  body.site .productdetails-view .main-image,
  body .productdetails-view .vm-product-media-container,
  body .productdetails-view .main-image {
    margin-bottom: 16px;
  }

  body.site .cutsmart-assistant-panel,
  body.site .cutsmart-product-assistant,
  body.site .cs-product-assistant,
  body .cutsmart-assistant-panel,
  body .cutsmart-product-assistant,
  body .cs-product-assistant {
    margin-top: 16px;
  }
}

@media (max-width: 640px) {
  body.site h1,
  body h1 {
    font-size: 30px;
  }

  body.site h2,
  body h2 {
    font-size: 24px;
  }

  body.site .btn,
  body.site button,
  body.site input[type="submit"],
  body.site input[type="button"],
  body.site a.button,
  body.site .button,
  body .btn,
  body button,
  body input[type="submit"],
  body input[type="button"],
  body a.button,
  body .button {
    min-height: 44px;
  }

  body.site .cutsmart-assistant-floating-button,
  body.site .cs-assistant-floating-button,
  body.site .ask-cutsmart-button,
  body .cutsmart-assistant-floating-button,
  body .cs-assistant-floating-button,
  body .ask-cutsmart-button {
    right: 14px !important;
    bottom: 14px !important;
    padding: 10px 14px !important;
  }
}

/* v0.2.0 Homepage hero layout refinement
   CSS-only: improves the existing homepage/article hero blocks where cs-hero, cs-help-panel and cs-shop-need-card classes are present. */
html.cutsmart-polish-enabled body .cs-hero {
  position: relative;
  overflow: hidden;
  margin-top: 18px;
  margin-bottom: 22px;
  padding: clamp(28px, 4.8vw, 58px);
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 8%, rgba(255, 106, 26, .16), transparent 34%),
    linear-gradient(135deg, #f9fcff 0%, #edf6ff 62%, #fff4ee 100%);
  border: 1px solid rgba(6, 59, 120, .14);
  box-shadow: 0 18px 46px rgba(6, 59, 120, .10);
}

html.cutsmart-polish-enabled body .cs-hero::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 18px;
  pointer-events: none;
}

/* Supports both wrapped and unwrapped hero markup. All direct children except the help panel stay on the left. */
@supports selector(:has(*)) {
  html.cutsmart-polish-enabled body .cs-hero:has(.cs-help-panel) {
    display: grid;
    grid-template-columns: minmax(0, 1.48fr) minmax(310px, .82fr);
    grid-auto-rows: min-content;
    column-gap: clamp(26px, 4vw, 56px);
    row-gap: 14px;
    align-items: center;
  }

  html.cutsmart-polish-enabled body .cs-hero:has(.cs-help-panel) > :not(.cs-help-panel) {
    grid-column: 1;
    position: relative;
    z-index: 1;
  }

  html.cutsmart-polish-enabled body .cs-hero:has(.cs-help-panel) > .cs-help-panel {
    grid-column: 2;
    grid-row: 1 / span 12;
    position: relative;
    z-index: 1;
    align-self: stretch;
  }
}

html.cutsmart-polish-enabled body .cs-hero .cs-eyebrow,
html.cutsmart-polish-enabled body .cs-hero .eyebrow,
html.cutsmart-polish-enabled body .cs-hero small:first-child,
html.cutsmart-polish-enabled body .cs-hero .small:first-child {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 8px;
  color: var(--cs-orange-dark);
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
}

html.cutsmart-polish-enabled body .cs-hero h1 {
  max-width: 780px;
  margin: 0 0 14px;
  color: var(--cs-text);
  font-size: clamp(38px, 5.25vw, 70px);
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}

html.cutsmart-polish-enabled body .cs-hero p {
  max-width: 780px;
  margin-bottom: 22px;
  color: #243b55;
  font-size: clamp(16px, 1.55vw, 21px);
  line-height: 1.5;
}

html.cutsmart-polish-enabled body .cs-hero .btn,
html.cutsmart-polish-enabled body .cs-hero .button,
html.cutsmart-polish-enabled body .cs-hero a.button,
html.cutsmart-polish-enabled body .cs-hero input[type="submit"] {
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 14px;
}

html.cutsmart-polish-enabled body .cs-hero .cs-hero-actions,
html.cutsmart-polish-enabled body .cs-hero .hero-actions,
html.cutsmart-polish-enabled body .cs-hero .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

html.cutsmart-polish-enabled body .cs-hero .cs-hero-actions a,
html.cutsmart-polish-enabled body .cs-hero .hero-actions a,
html.cutsmart-polish-enabled body .cs-hero .actions a {
  text-decoration: none;
}

html.cutsmart-polish-enabled body .cs-help-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 270px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 22px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(6, 59, 120, .18);
  border-left: 4px solid var(--cs-orange);
  box-shadow: 0 18px 46px rgba(6, 59, 120, .12);
  backdrop-filter: blur(8px);
}

html.cutsmart-polish-enabled body .cs-help-panel h2,
html.cutsmart-polish-enabled body .cs-help-panel h3,
html.cutsmart-polish-enabled body .cs-help-panel h4 {
  margin: 0 0 8px;
  color: var(--cs-blue-dark);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.15;
  letter-spacing: -.025em;
}

html.cutsmart-polish-enabled body .cs-help-panel p {
  margin: 0 0 20px;
  color: #53677c;
  font-size: 15px;
  line-height: 1.55;
}

html.cutsmart-polish-enabled body .cs-help-panel .cs-help-actions,
html.cutsmart-polish-enabled body .cs-help-panel .help-actions,
html.cutsmart-polish-enabled body .cs-help-panel .actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}

html.cutsmart-polish-enabled body .cs-help-panel .cs-help-actions a,
html.cutsmart-polish-enabled body .cs-help-panel .help-actions a,
html.cutsmart-polish-enabled body .cs-help-panel .actions a,
html.cutsmart-polish-enabled body .cs-help-panel .btn,
html.cutsmart-polish-enabled body .cs-help-panel button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  padding: 12px 14px;
  border-radius: 15px;
  text-align: center;
  text-decoration: none;
  color: var(--cs-blue-dark) !important;
  background: #fff;
  border: 1px solid rgba(6, 59, 120, .14);
  box-shadow: 0 8px 18px rgba(6, 59, 120, .05);
  font-weight: 800;
  line-height: 1.25;
}

html.cutsmart-polish-enabled body .cs-help-panel .cs-help-actions a:hover,
html.cutsmart-polish-enabled body .cs-help-panel .help-actions a:hover,
html.cutsmart-polish-enabled body .cs-help-panel .actions a:hover,
html.cutsmart-polish-enabled body .cs-help-panel .btn:hover,
html.cutsmart-polish-enabled body .cs-help-panel button:hover {
  border-color: rgba(6, 59, 120, .32);
  background: var(--cs-blue-soft);
  transform: translateY(-1px);
}

/* Homepage section headings and shop-by-need cards */
html.cutsmart-polish-enabled body .cs-section-heading,
html.cutsmart-polish-enabled body .cs-home-section h2,
html.cutsmart-polish-enabled body .cs-shop-by-need h2 {
  margin-top: 24px;
  margin-bottom: 4px;
  color: var(--cs-blue-dark);
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: -.035em;
}

html.cutsmart-polish-enabled body .cs-section-subtitle,
html.cutsmart-polish-enabled body .cs-home-section > p,
html.cutsmart-polish-enabled body .cs-shop-by-need > p {
  margin-top: 0;
  color: var(--cs-muted);
  font-size: 16px;
}

html.cutsmart-polish-enabled body .cs-shop-need-grid,
html.cutsmart-polish-enabled body .cs-shop-by-need .items,
html.cutsmart-polish-enabled body .cs-shop-by-need .grid,
html.cutsmart-polish-enabled body .cs-shop-by-need .row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 14px;
}

html.cutsmart-polish-enabled body .cs-shop-need-card {
  min-height: 150px;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(6, 59, 120, .14);
  box-shadow: 0 10px 28px rgba(6, 59, 120, .08);
}

html.cutsmart-polish-enabled body .cs-shop-need-card h3,
html.cutsmart-polish-enabled body .cs-shop-need-card h4 {
  margin: 8px 0 6px;
  color: var(--cs-blue-dark);
  font-size: 18px;
  line-height: 1.2;
}

html.cutsmart-polish-enabled body .cs-shop-need-card p {
  margin: 0;
  color: var(--cs-muted);
  font-size: 14px;
  line-height: 1.45;
}

html.cutsmart-polish-enabled body .cs-shop-need-card a {
  text-decoration: none;
}

@media (max-width: 1100px) {
  @supports selector(:has(*)) {
    html.cutsmart-polish-enabled body .cs-hero:has(.cs-help-panel) {
      grid-template-columns: 1fr;
    }

    html.cutsmart-polish-enabled body .cs-hero:has(.cs-help-panel) > :not(.cs-help-panel),
    html.cutsmart-polish-enabled body .cs-hero:has(.cs-help-panel) > .cs-help-panel {
      grid-column: 1;
      grid-row: auto;
    }
  }

  html.cutsmart-polish-enabled body .cs-help-panel {
    min-height: 0;
  }

  html.cutsmart-polish-enabled body .cs-shop-need-grid,
  html.cutsmart-polish-enabled body .cs-shop-by-need .items,
  html.cutsmart-polish-enabled body .cs-shop-by-need .grid,
  html.cutsmart-polish-enabled body .cs-shop-by-need .row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  html.cutsmart-polish-enabled body .cs-hero {
    padding: 22px;
    border-radius: 18px;
  }

  html.cutsmart-polish-enabled body .cs-hero h1 {
    font-size: clamp(32px, 12vw, 44px);
    line-height: 1.03;
  }

  html.cutsmart-polish-enabled body .cs-help-panel .cs-help-actions,
  html.cutsmart-polish-enabled body .cs-help-panel .help-actions,
  html.cutsmart-polish-enabled body .cs-help-panel .actions,
  html.cutsmart-polish-enabled body .cs-shop-need-grid,
  html.cutsmart-polish-enabled body .cs-shop-by-need .items,
  html.cutsmart-polish-enabled body .cs-shop-by-need .grid,
  html.cutsmart-polish-enabled body .cs-shop-by-need .row {
    grid-template-columns: 1fr;
  }

  html.cutsmart-polish-enabled body .cs-help-panel .cs-help-actions a,
  html.cutsmart-polish-enabled body .cs-help-panel .help-actions a,
  html.cutsmart-polish-enabled body .cs-help-panel .actions a,
  html.cutsmart-polish-enabled body .cs-help-panel .btn,
  html.cutsmart-polish-enabled body .cs-help-panel button {
    min-height: 52px;
  }
}