/**
 * Cutsmart Front-End Professional Polish v0.3.18
 * 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.1 refines the homepage hero/help panel/shop-by-need presentation; v0.3.6 keeps the v0.3.1 speed baseline, restores one top application pill only, and preserves brand/title markers.
 */

: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;
}

/* v0.3.14: cart positioning/styling is intentionally not touched.
   The existing site/mobile cart already handles its own bottom-left position. */

/* 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;
}


/* v0.3.17 Small laptop header menu: keep the main menu horizontal instead of turning it into
   the compact drawer. Tighten text/spacing so 11-13 inch laptops have enough room. */
@media (min-width: 800px) and (max-width: 1368px) {
  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: calc(100vw - 16px) !important;
  }

  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse,
  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.show,
  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.collapsing,
  html.cutsmart-polish-enabled body.site header.header .navbar-collapse,
  html.cutsmart-polish-enabled body.site header.header .navbar-collapse.show,
  html.cutsmart-polish-enabled body.site header.header .navbar-collapse.collapsing,
  html.cutsmart-polish-enabled body.site #header .navbar-collapse,
  html.cutsmart-polish-enabled body.site #header .navbar-collapse.show,
  html.cutsmart-polish-enabled body.site #header .navbar-collapse.collapsing,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.show,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.collapsing,
  html.cutsmart-polish-enabled body header.header .navbar-collapse,
  html.cutsmart-polish-enabled body header.header .navbar-collapse.show,
  html.cutsmart-polish-enabled body header.header .navbar-collapse.collapsing,
  html.cutsmart-polish-enabled body #header .navbar-collapse,
  html.cutsmart-polish-enabled body #header .navbar-collapse.show,
  html.cutsmart-polish-enabled body #header .navbar-collapse.collapsing {
    position: static !important;
    display: flex !important;
    flex-basis: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  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 !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    width: auto !important;
  }

  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 {
    font-size: clamp(12px, 1.05vw, 14px) !important;
    padding: 7px 9px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  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: 34px !important;
    padding: 6px 11px !important;
  }
}

/* v0.3.17 True mobile/till menu containment only.
   The compact drawer is now limited to narrow screens so small laptops keep the full menu. */
@media (max-width: 799px) {
  html.cutsmart-polish-enabled body.site .container-header .navbar-toggler,
  html.cutsmart-polish-enabled body.site header.header .navbar-toggler,
  html.cutsmart-polish-enabled body.site #header .navbar-toggler,
  html.cutsmart-polish-enabled body .container-header .navbar-toggler,
  html.cutsmart-polish-enabled body header.header .navbar-toggler,
  html.cutsmart-polish-enabled body #header .navbar-toggler {
    position: relative;
    z-index: 1110;
  }

  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.show,
  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.collapsing,
  html.cutsmart-polish-enabled body.site header.header .navbar-collapse.show,
  html.cutsmart-polish-enabled body.site header.header .navbar-collapse.collapsing,
  html.cutsmart-polish-enabled body.site #header .navbar-collapse.show,
  html.cutsmart-polish-enabled body.site #header .navbar-collapse.collapsing,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.show,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.collapsing,
  html.cutsmart-polish-enabled body header.header .navbar-collapse.show,
  html.cutsmart-polish-enabled body header.header .navbar-collapse.collapsing,
  html.cutsmart-polish-enabled body #header .navbar-collapse.show,
  html.cutsmart-polish-enabled body #header .navbar-collapse.collapsing {
    position: fixed !important;
    top: clamp(66px, 10vh, 96px) !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;
    width: min(320px, calc(100vw - 20px)) !important;
    max-width: min(320px, calc(100vw - 20px)) !important;
    max-height: calc(100vh - 84px) !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 12px !important;
    z-index: 1100 !important;
    flex-basis: auto !important;
    background: linear-gradient(180deg, rgba(4, 43, 89, .99), rgba(6, 59, 120, .98)) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.32) !important;
  }

  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.show .mod-menu,
  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.show .navbar-nav,
  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.show nav > ul,
  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.collapsing .mod-menu,
  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.collapsing .navbar-nav,
  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.collapsing nav > ul,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.show .mod-menu,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.show .navbar-nav,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.show nav > ul,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.collapsing .mod-menu,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.collapsing .navbar-nav,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.collapsing nav > ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.show .mod-menu > li,
  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.show .navbar-nav > li,
  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.show nav > ul > li,
  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.collapsing .mod-menu > li,
  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.collapsing .navbar-nav > li,
  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.collapsing nav > ul > li,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.show .mod-menu > li,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.show .navbar-nav > li,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.show nav > ul > li,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.collapsing .mod-menu > li,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.collapsing .navbar-nav > li,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.collapsing nav > ul > li {
    display: block !important;
    width: 100% !important;
  }

  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.show .mod-menu > li > a,
  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.show .navbar-nav > li > a,
  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.show nav > ul > li > a,
  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.collapsing .mod-menu > li > a,
  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.collapsing .navbar-nav > li > a,
  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.collapsing nav > ul > li > a,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.show .mod-menu > li > a,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.show .navbar-nav > li > a,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.show nav > ul > li > a,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.collapsing .mod-menu > li > a,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.collapsing .navbar-nav > li > a,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.collapsing nav > ul > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 11px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }

  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.show .mod-menu ul,
  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.show .metismenu.mod-menu .mm-collapse,
  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.show .metismenu.mod-menu .mm-collapsing,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.show .mod-menu ul,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.show .metismenu.mod-menu .mm-collapse,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.show .metismenu.mod-menu .mm-collapsing {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 4px 0 0 0 !important;
    padding: 4px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.07) !important;
    box-shadow: none !important;
  }
}

/* Keep the header compact on low-height till screens without changing normal desktop layout. */
@media (max-width: 1368px), (max-height: 820px) {
  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: 64px;
  }

  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: 34px;
    padding: 6px 10px;
  }
}

/* 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.1 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;
  }
}



/* v0.2.3 Staff dropdown contrast + 11-inch/till menu hardening
   Fixes white hover text inside light dropdown panels and keeps the opened staff/menu area usable
   on small laptop screens without changing the public desktop layout. */
html.cutsmart-polish-enabled body.site .container-header .dropdown-menu,
html.cutsmart-polish-enabled body.site header.header .dropdown-menu,
html.cutsmart-polish-enabled body.site #header .dropdown-menu,
html.cutsmart-polish-enabled body .container-header .dropdown-menu,
html.cutsmart-polish-enabled body header.header .dropdown-menu,
html.cutsmart-polish-enabled body #header .dropdown-menu,
html.cutsmart-polish-enabled body.site .container-header .metismenu.mod-menu .mm-collapse,
html.cutsmart-polish-enabled body.site header.header .metismenu.mod-menu .mm-collapse,
html.cutsmart-polish-enabled body.site #header .metismenu.mod-menu .mm-collapse,
html.cutsmart-polish-enabled body .container-header .metismenu.mod-menu .mm-collapse,
html.cutsmart-polish-enabled body header.header .metismenu.mod-menu .mm-collapse,
html.cutsmart-polish-enabled body #header .metismenu.mod-menu .mm-collapse {
  background: #fff !important;
  color: #063b78 !important;
  border: 1px solid rgba(6, 59, 120, .12) !important;
  border-radius: 0 0 2px 2px;
  box-shadow: 0 12px 30px rgba(4, 43, 89, .16) !important;
}

html.cutsmart-polish-enabled body.site .container-header .dropdown-menu a,
html.cutsmart-polish-enabled body.site header.header .dropdown-menu a,
html.cutsmart-polish-enabled body.site #header .dropdown-menu a,
html.cutsmart-polish-enabled body .container-header .dropdown-menu a,
html.cutsmart-polish-enabled body header.header .dropdown-menu a,
html.cutsmart-polish-enabled body #header .dropdown-menu a,
html.cutsmart-polish-enabled body.site .container-header .metismenu.mod-menu .mm-collapse a,
html.cutsmart-polish-enabled body.site header.header .metismenu.mod-menu .mm-collapse a,
html.cutsmart-polish-enabled body.site #header .metismenu.mod-menu .mm-collapse a,
html.cutsmart-polish-enabled body .container-header .metismenu.mod-menu .mm-collapse a,
html.cutsmart-polish-enabled body header.header .metismenu.mod-menu .mm-collapse a,
html.cutsmart-polish-enabled body #header .metismenu.mod-menu .mm-collapse a {
  color: #063b78 !important;
  background: transparent !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

html.cutsmart-polish-enabled body.site .container-header .dropdown-menu a:hover,
html.cutsmart-polish-enabled body.site .container-header .dropdown-menu a:focus,
html.cutsmart-polish-enabled body.site header.header .dropdown-menu a:hover,
html.cutsmart-polish-enabled body.site header.header .dropdown-menu a:focus,
html.cutsmart-polish-enabled body.site #header .dropdown-menu a:hover,
html.cutsmart-polish-enabled body.site #header .dropdown-menu a:focus,
html.cutsmart-polish-enabled body .container-header .dropdown-menu a:hover,
html.cutsmart-polish-enabled body .container-header .dropdown-menu a:focus,
html.cutsmart-polish-enabled body header.header .dropdown-menu a:hover,
html.cutsmart-polish-enabled body header.header .dropdown-menu a:focus,
html.cutsmart-polish-enabled body #header .dropdown-menu a:hover,
html.cutsmart-polish-enabled body #header .dropdown-menu a:focus,
html.cutsmart-polish-enabled body.site .container-header .metismenu.mod-menu .mm-collapse a:hover,
html.cutsmart-polish-enabled body.site .container-header .metismenu.mod-menu .mm-collapse a:focus,
html.cutsmart-polish-enabled body.site header.header .metismenu.mod-menu .mm-collapse a:hover,
html.cutsmart-polish-enabled body.site header.header .metismenu.mod-menu .mm-collapse a:focus,
html.cutsmart-polish-enabled body.site #header .metismenu.mod-menu .mm-collapse a:hover,
html.cutsmart-polish-enabled body.site #header .metismenu.mod-menu .mm-collapse a:focus,
html.cutsmart-polish-enabled body .container-header .metismenu.mod-menu .mm-collapse a:hover,
html.cutsmart-polish-enabled body .container-header .metismenu.mod-menu .mm-collapse a:focus,
html.cutsmart-polish-enabled body header.header .metismenu.mod-menu .mm-collapse a:hover,
html.cutsmart-polish-enabled body header.header .metismenu.mod-menu .mm-collapse a:focus,
html.cutsmart-polish-enabled body #header .metismenu.mod-menu .mm-collapse a:hover,
html.cutsmart-polish-enabled body #header .metismenu.mod-menu .mm-collapse a:focus {
  color: #042b59 !important;
  background: #edf5ff !important;
  box-shadow: inset 4px 0 0 #ff6a1a !important;
}

/* v0.3.17 More aggressive containment only for true mobile widths.
   Small laptops now keep the normal horizontal menu. */
@media (max-width: 799.98px) {
  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 {
    position: relative;
    z-index: 1050;
  }

  html.cutsmart-polish-enabled body.site .container-header .container-nav,
  html.cutsmart-polish-enabled body.site header.header .container-nav,
  html.cutsmart-polish-enabled body.site #header .container-nav,
  html.cutsmart-polish-enabled body .container-header .container-nav,
  html.cutsmart-polish-enabled body header.header .container-nav,
  html.cutsmart-polish-enabled body #header .container-nav {
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Catch Bootstrap, Cassiopeia and MetisMenu open states. */
  html.cutsmart-polish-enabled body.site .container-header .collapse.show,
  html.cutsmart-polish-enabled body.site header.header .collapse.show,
  html.cutsmart-polish-enabled body.site #header .collapse.show,
  html.cutsmart-polish-enabled body .container-header .collapse.show,
  html.cutsmart-polish-enabled body header.header .collapse.show,
  html.cutsmart-polish-enabled body #header .collapse.show,
  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.show,
  html.cutsmart-polish-enabled body.site header.header .navbar-collapse.show,
  html.cutsmart-polish-enabled body.site #header .navbar-collapse.show,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.show,
  html.cutsmart-polish-enabled body header.header .navbar-collapse.show,
  html.cutsmart-polish-enabled body #header .navbar-collapse.show,
  html.cs-till-menu-open body.site .container-header .navbar-collapse,
  html.cs-till-menu-open body.site header.header .navbar-collapse,
  html.cs-till-menu-open body.site #header .navbar-collapse,
  html.cs-till-menu-open body .container-header .navbar-collapse,
  html.cs-till-menu-open body header.header .navbar-collapse,
  html.cs-till-menu-open body #header .navbar-collapse {
    position: fixed !important;
    top: var(--cs-till-menu-top, 72px) !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    width: min(310px, calc(100vw - 24px)) !important;
    max-width: min(310px, calc(100vw - 24px)) !important;
    max-height: calc(100vh - var(--cs-till-menu-top, 72px) - 12px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 10px !important;
    margin: 0 !important;
    flex-basis: auto !important;
    background: linear-gradient(180deg, rgba(4, 43, 89, .98), rgba(6, 59, 120, .96)) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.35) !important;
  }

  html.cutsmart-polish-enabled body.site .container-header .collapse.show > ul,
  html.cutsmart-polish-enabled body.site header.header .collapse.show > ul,
  html.cutsmart-polish-enabled body.site #header .collapse.show > ul,
  html.cutsmart-polish-enabled body .container-header .collapse.show > ul,
  html.cutsmart-polish-enabled body header.header .collapse.show > ul,
  html.cutsmart-polish-enabled body #header .collapse.show > ul,
  html.cs-till-menu-open body.site .container-header .navbar-collapse > ul,
  html.cs-till-menu-open body.site header.header .navbar-collapse > ul,
  html.cs-till-menu-open body.site #header .navbar-collapse > ul,
  html.cs-till-menu-open body .container-header .navbar-collapse > ul,
  html.cs-till-menu-open body header.header .navbar-collapse > ul,
  html.cs-till-menu-open body #header .navbar-collapse > ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.cutsmart-polish-enabled body.site .container-header .collapse.show > ul > li,
  html.cutsmart-polish-enabled body.site header.header .collapse.show > ul > li,
  html.cutsmart-polish-enabled body.site #header .collapse.show > ul > li,
  html.cutsmart-polish-enabled body .container-header .collapse.show > ul > li,
  html.cutsmart-polish-enabled body header.header .collapse.show > ul > li,
  html.cutsmart-polish-enabled body #header .collapse.show > ul > li,
  html.cs-till-menu-open body.site .container-header .navbar-collapse > ul > li,
  html.cs-till-menu-open body.site header.header .navbar-collapse > ul > li,
  html.cs-till-menu-open body.site #header .navbar-collapse > ul > li,
  html.cs-till-menu-open body .container-header .navbar-collapse > ul > li,
  html.cs-till-menu-open body header.header .navbar-collapse > ul > li,
  html.cs-till-menu-open body #header .navbar-collapse > ul > li {
    display: block !important;
    width: 100% !important;
  }

  html.cutsmart-polish-enabled body.site .container-header .collapse.show > ul > li > a,
  html.cutsmart-polish-enabled body.site header.header .collapse.show > ul > li > a,
  html.cutsmart-polish-enabled body.site #header .collapse.show > ul > li > a,
  html.cutsmart-polish-enabled body .container-header .collapse.show > ul > li > a,
  html.cutsmart-polish-enabled body header.header .collapse.show > ul > li > a,
  html.cutsmart-polish-enabled body #header .collapse.show > ul > li > a,
  html.cs-till-menu-open body.site .container-header .navbar-collapse > ul > li > a,
  html.cs-till-menu-open body.site header.header .navbar-collapse > ul > li > a,
  html.cs-till-menu-open body.site #header .navbar-collapse > ul > li > a,
  html.cs-till-menu-open body .container-header .navbar-collapse > ul > li > a,
  html.cs-till-menu-open body header.header .navbar-collapse > ul > li > a,
  html.cs-till-menu-open body #header .navbar-collapse > ul > li > a {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    color: #fff !important;
    background: transparent !important;
    border-radius: 11px !important;
    padding: 10px 12px !important;
    white-space: normal !important;
  }

  html.cutsmart-polish-enabled body.site .container-header .collapse.show .dropdown-menu,
  html.cutsmart-polish-enabled body.site header.header .collapse.show .dropdown-menu,
  html.cutsmart-polish-enabled body.site #header .collapse.show .dropdown-menu,
  html.cutsmart-polish-enabled body .container-header .collapse.show .dropdown-menu,
  html.cutsmart-polish-enabled body header.header .collapse.show .dropdown-menu,
  html.cutsmart-polish-enabled body #header .collapse.show .dropdown-menu,
  html.cutsmart-polish-enabled body.site .container-header .collapse.show .metismenu.mod-menu .mm-collapse,
  html.cutsmart-polish-enabled body.site header.header .collapse.show .metismenu.mod-menu .mm-collapse,
  html.cutsmart-polish-enabled body.site #header .collapse.show .metismenu.mod-menu .mm-collapse,
  html.cutsmart-polish-enabled body .container-header .collapse.show .metismenu.mod-menu .mm-collapse,
  html.cutsmart-polish-enabled body header.header .collapse.show .metismenu.mod-menu .mm-collapse,
  html.cutsmart-polish-enabled body #header .collapse.show .metismenu.mod-menu .mm-collapse,
  html.cs-till-menu-open body .container-header .navbar-collapse .dropdown-menu,
  html.cs-till-menu-open body header.header .navbar-collapse .dropdown-menu,
  html.cs-till-menu-open body #header .navbar-collapse .dropdown-menu,
  html.cs-till-menu-open body .container-header .navbar-collapse .metismenu.mod-menu .mm-collapse,
  html.cs-till-menu-open body header.header .navbar-collapse .metismenu.mod-menu .mm-collapse,
  html.cs-till-menu-open body #header .navbar-collapse .metismenu.mod-menu .mm-collapse {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 5px 0 0 !important;
    padding: 5px !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: none !important;
    border-radius: 12px !important;
  }

  html.cutsmart-polish-enabled body.site .container-header .collapse.show .dropdown-menu a,
  html.cutsmart-polish-enabled body.site header.header .collapse.show .dropdown-menu a,
  html.cutsmart-polish-enabled body.site #header .collapse.show .dropdown-menu a,
  html.cutsmart-polish-enabled body .container-header .collapse.show .dropdown-menu a,
  html.cutsmart-polish-enabled body header.header .collapse.show .dropdown-menu a,
  html.cutsmart-polish-enabled body #header .collapse.show .dropdown-menu a,
  html.cutsmart-polish-enabled body.site .container-header .collapse.show .metismenu.mod-menu .mm-collapse a,
  html.cutsmart-polish-enabled body.site header.header .collapse.show .metismenu.mod-menu .mm-collapse a,
  html.cutsmart-polish-enabled body.site #header .collapse.show .metismenu.mod-menu .mm-collapse a,
  html.cutsmart-polish-enabled body .container-header .collapse.show .metismenu.mod-menu .mm-collapse a,
  html.cutsmart-polish-enabled body header.header .collapse.show .metismenu.mod-menu .mm-collapse a,
  html.cutsmart-polish-enabled body #header .collapse.show .metismenu.mod-menu .mm-collapse a,
  html.cs-till-menu-open body .container-header .navbar-collapse .dropdown-menu a,
  html.cs-till-menu-open body header.header .navbar-collapse .dropdown-menu a,
  html.cs-till-menu-open body #header .navbar-collapse .dropdown-menu a,
  html.cs-till-menu-open body .container-header .navbar-collapse .metismenu.mod-menu .mm-collapse a,
  html.cs-till-menu-open body header.header .navbar-collapse .metismenu.mod-menu .mm-collapse a,
  html.cs-till-menu-open body #header .navbar-collapse .metismenu.mod-menu .mm-collapse a {
    color: #fff !important;
    background: transparent !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  html.cutsmart-polish-enabled body.site .container-header .collapse.show .dropdown-menu a:hover,
  html.cutsmart-polish-enabled body.site .container-header .collapse.show .dropdown-menu a:focus,
  html.cutsmart-polish-enabled body .container-header .collapse.show .dropdown-menu a:hover,
  html.cutsmart-polish-enabled body .container-header .collapse.show .dropdown-menu a:focus,
  html.cutsmart-polish-enabled body.site .container-header .collapse.show .metismenu.mod-menu .mm-collapse a:hover,
  html.cutsmart-polish-enabled body.site .container-header .collapse.show .metismenu.mod-menu .mm-collapse a:focus,
  html.cutsmart-polish-enabled body .container-header .collapse.show .metismenu.mod-menu .mm-collapse a:hover,
  html.cutsmart-polish-enabled body .container-header .collapse.show .metismenu.mod-menu .mm-collapse a:focus,
  html.cs-till-menu-open body .container-header .navbar-collapse .dropdown-menu a:hover,
  html.cs-till-menu-open body .container-header .navbar-collapse .dropdown-menu a:focus,
  html.cs-till-menu-open body .container-header .navbar-collapse .metismenu.mod-menu .mm-collapse a:hover,
  html.cs-till-menu-open body .container-header .navbar-collapse .metismenu.mod-menu .mm-collapse a:focus {
    color: #fff !important;
    background: rgba(255,255,255,.16) !important;
    box-shadow: inset 4px 0 0 #ff6a1a !important;
  }
}

/* v0.2.3 Compact header height refinement
   The previous header worked, but on shop/till screens it used too much vertical space.
   This keeps the same layout and branding, while reducing the logo/nav/button height enough to show more page content. */
@media (min-width: 992px) {
  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 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  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: 76px !important;
  }

  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 {
    gap: 6px !important;
  }

  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 {
    padding: 8px 13px !important;
    line-height: 1.05 !important;
  }

  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: 34px !important;
    padding: 6px 12px !important;
  }
}

@media (max-width: 1368px), (max-height: 820px) {
  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: 58px !important;
  }

  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 .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 {
    padding: 7px 10px !important;
  }
}


/* v0.2.4 Header breakpoint refinement
   Keep the full horizontal header menu down to 800px. Joomla/Bootstrap normally collapses
   the navbar at 991px; for Cutsmart till/tablet screens this wastes space and creates an
   awkward drawer too early. Below 800px the compact mobile drawer from v0.2.3 still applies. */
@media (min-width: 800px) and (max-width: 991.98px) {
  html.cutsmart-polish-enabled body.site .container-header .navbar-toggler,
  html.cutsmart-polish-enabled body.site header.header .navbar-toggler,
  html.cutsmart-polish-enabled body.site #header .navbar-toggler,
  html.cutsmart-polish-enabled body .container-header .navbar-toggler,
  html.cutsmart-polish-enabled body header.header .navbar-toggler,
  html.cutsmart-polish-enabled body #header .navbar-toggler {
    display: none !important;
  }

  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse,
  html.cutsmart-polish-enabled body.site header.header .navbar-collapse,
  html.cutsmart-polish-enabled body.site #header .navbar-collapse,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse,
  html.cutsmart-polish-enabled body header.header .navbar-collapse,
  html.cutsmart-polish-enabled body #header .navbar-collapse,
  html.cutsmart-polish-enabled body.site .container-header .collapse:not(.show),
  html.cutsmart-polish-enabled body.site header.header .collapse:not(.show),
  html.cutsmart-polish-enabled body.site #header .collapse:not(.show),
  html.cutsmart-polish-enabled body .container-header .collapse:not(.show),
  html.cutsmart-polish-enabled body header.header .collapse:not(.show),
  html.cutsmart-polish-enabled body #header .collapse:not(.show) {
    display: flex !important;
  }

  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse,
  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.show,
  html.cutsmart-polish-enabled body.site .container-header .navbar-collapse.collapsing,
  html.cutsmart-polish-enabled body.site header.header .navbar-collapse,
  html.cutsmart-polish-enabled body.site header.header .navbar-collapse.show,
  html.cutsmart-polish-enabled body.site header.header .navbar-collapse.collapsing,
  html.cutsmart-polish-enabled body.site #header .navbar-collapse,
  html.cutsmart-polish-enabled body.site #header .navbar-collapse.show,
  html.cutsmart-polish-enabled body.site #header .navbar-collapse.collapsing,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.show,
  html.cutsmart-polish-enabled body .container-header .navbar-collapse.collapsing,
  html.cutsmart-polish-enabled body header.header .navbar-collapse,
  html.cutsmart-polish-enabled body header.header .navbar-collapse.show,
  html.cutsmart-polish-enabled body header.header .navbar-collapse.collapsing,
  html.cutsmart-polish-enabled body #header .navbar-collapse,
  html.cutsmart-polish-enabled body #header .navbar-collapse.show,
  html.cutsmart-polish-enabled body #header .navbar-collapse.collapsing,
  html.cs-till-menu-open body.site .container-header .navbar-collapse,
  html.cs-till-menu-open body.site header.header .navbar-collapse,
  html.cs-till-menu-open body.site #header .navbar-collapse,
  html.cs-till-menu-open body .container-header .navbar-collapse,
  html.cs-till-menu-open body header.header .navbar-collapse,
  html.cs-till-menu-open body #header .navbar-collapse {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  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,
  html.cs-till-menu-open body.site .container-header .navbar-collapse > ul,
  html.cs-till-menu-open body.site header.header .navbar-collapse > ul,
  html.cs-till-menu-open body.site #header .navbar-collapse > ul,
  html.cs-till-menu-open body .container-header .navbar-collapse > ul,
  html.cs-till-menu-open body header.header .navbar-collapse > ul,
  html.cs-till-menu-open body #header .navbar-collapse > ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  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 .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.cs-till-menu-open body.site .container-header .navbar-collapse > ul > li,
  html.cs-till-menu-open body .container-header .navbar-collapse > ul > li {
    display: list-item !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }

  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 .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.cs-till-menu-open body.site .container-header .navbar-collapse > ul > li > a,
  html.cs-till-menu-open body .container-header .navbar-collapse > ul > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    padding: 7px 9px !important;
    font-size: 14px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  html.cutsmart-polish-enabled body.site .container-header .dropdown-menu,
  html.cutsmart-polish-enabled body.site header.header .dropdown-menu,
  html.cutsmart-polish-enabled body.site #header .dropdown-menu,
  html.cutsmart-polish-enabled body .container-header .dropdown-menu,
  html.cutsmart-polish-enabled body header.header .dropdown-menu,
  html.cutsmart-polish-enabled body #header .dropdown-menu,
  html.cutsmart-polish-enabled body.site .container-header .metismenu.mod-menu .mm-collapse,
  html.cutsmart-polish-enabled body .container-header .metismenu.mod-menu .mm-collapse {
    position: absolute !important;
    width: max-content !important;
    min-width: 220px !important;
    max-width: min(320px, calc(100vw - 24px)) !important;
    background: #fff !important;
    border: 1px solid rgba(6,59,120,.12) !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.16) !important;
  }
}

@media (max-width: 799.98px) {
  html.cutsmart-polish-enabled body.site .container-header .navbar-toggler,
  html.cutsmart-polish-enabled body.site header.header .navbar-toggler,
  html.cutsmart-polish-enabled body.site #header .navbar-toggler,
  html.cutsmart-polish-enabled body .container-header .navbar-toggler,
  html.cutsmart-polish-enabled body header.header .navbar-toggler,
  html.cutsmart-polish-enabled body #header .navbar-toggler {
    display: inline-flex !important;
  }
}

/* v0.3.14: removed v0.2.5 mobile/tablet header cart override. Native mobile cart remains in control. */

/* v0.2.8 Safe Shop Categories hide from 999px down
   Only hide elements explicitly marked by the v0.2.8 JavaScript. Do not use broad
   [class*="shop-categories"] selectors because those can catch wrappers and hide page content. */
@media (max-width: 999.98px) {
  html.cutsmart-polish-enabled body .cs-shop-categories-mobile-hidden,
  html.cutsmart-polish-enabled body .cs-hide-shop-categories-mobile {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}


/* v0.2.9 Application badge polish
   Goal: keep Cutsmart Homeowner/Landowner/Professional/Commercial intelligence,
   but make the category grid feel like a premium ecommerce product listing.
   Full-card colour tints are replaced with clean white cards, subtle top accents,
   and compact application badges. */
:root {
  --cs-app-home: #4caf50;
  --cs-app-home-soft: #edf8ee;
  --cs-app-home-border: #bde7c1;
  --cs-app-land: #f5b21b;
  --cs-app-land-soft: #fff7e4;
  --cs-app-land-border: #f5d483;
  --cs-app-pro: #2f80ed;
  --cs-app-pro-soft: #edf5ff;
  --cs-app-pro-border: #b9d8ff;
  --cs-app-com: #9b51e0;
  --cs-app-com-soft: #f5edff;
  --cs-app-com-border: #ddbfff;
}

/* Keep the guide, but make it compact and premium rather than dominant. */
html.cutsmart-polish-enabled body.site .card-colour-guide,
html.cutsmart-polish-enabled body.site .card-color-guide,
html.cutsmart-polish-enabled body.site .cs-card-colour-guide,
html.cutsmart-polish-enabled body.site .cs-card-color-guide,
html.cutsmart-polish-enabled body.site .application-guide,
html.cutsmart-polish-enabled body.site .cs-application-guide,
html.cutsmart-polish-enabled body [class*="colour-guide" i],
html.cutsmart-polish-enabled body [class*="color-guide" i],
html.cutsmart-polish-enabled body [class*="application-guide" i] {
  background: rgba(255,255,255,.96) !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 7px 22px rgba(6,59,120,.07) !important;
  padding: 12px 16px !important;
  margin: 14px 0 18px !important;
}

html.cutsmart-polish-enabled body.site .card-colour-guide h1,
html.cutsmart-polish-enabled body.site .card-colour-guide h2,
html.cutsmart-polish-enabled body.site .card-colour-guide h3,
html.cutsmart-polish-enabled body.site .card-colour-guide h4,
html.cutsmart-polish-enabled body.site .card-colour-guide strong,
html.cutsmart-polish-enabled body [class*="colour-guide" i] h1,
html.cutsmart-polish-enabled body [class*="colour-guide" i] h2,
html.cutsmart-polish-enabled body [class*="colour-guide" i] h3,
html.cutsmart-polish-enabled body [class*="colour-guide" i] h4,
html.cutsmart-polish-enabled body [class*="colour-guide" i] strong,
html.cutsmart-polish-enabled body [class*="application-guide" i] h1,
html.cutsmart-polish-enabled body [class*="application-guide" i] h2,
html.cutsmart-polish-enabled body [class*="application-guide" i] h3,
html.cutsmart-polish-enabled body [class*="application-guide" i] h4,
html.cutsmart-polish-enabled body [class*="application-guide" i] strong {
  color: var(--cs-blue-dark) !important;
}

/* Category/list product cards: neutral base, not full tinted blocks. */
html.cutsmart-polish-enabled body.site .browse-view .product,
html.cutsmart-polish-enabled body.site .category-view .product,
html.cutsmart-polish-enabled body.site .featured-view .product,
html.cutsmart-polish-enabled body.site .latest-view .product,
html.cutsmart-polish-enabled body.site .browse-view .product .spacer,
html.cutsmart-polish-enabled body.site .category-view .product .spacer,
html.cutsmart-polish-enabled body.site .featured-view .product .spacer,
html.cutsmart-polish-enabled body.site .latest-view .product .spacer,
html.cutsmart-polish-enabled body .browse-view .product,
html.cutsmart-polish-enabled body .category-view .product,
html.cutsmart-polish-enabled body .featured-view .product,
html.cutsmart-polish-enabled body .latest-view .product,
html.cutsmart-polish-enabled body .browse-view .product .spacer,
html.cutsmart-polish-enabled body .category-view .product .spacer,
html.cutsmart-polish-enabled body .featured-view .product .spacer,
html.cutsmart-polish-enabled body .latest-view .product .spacer {
  background: #fff !important;
  border-color: var(--cs-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(6,59,120,.08) !important;
  overflow: hidden;
}

html.cutsmart-polish-enabled body.site .browse-view .product.cs-app-card,
html.cutsmart-polish-enabled body.site .category-view .product.cs-app-card,
html.cutsmart-polish-enabled body.site .featured-view .product.cs-app-card,
html.cutsmart-polish-enabled body.site .latest-view .product.cs-app-card,
html.cutsmart-polish-enabled body .browse-view .product.cs-app-card,
html.cutsmart-polish-enabled body .category-view .product.cs-app-card,
html.cutsmart-polish-enabled body .featured-view .product.cs-app-card,
html.cutsmart-polish-enabled body .latest-view .product.cs-app-card,
html.cutsmart-polish-enabled body.site .browse-view .product .spacer.cs-app-card,
html.cutsmart-polish-enabled body.site .category-view .product .spacer.cs-app-card,
html.cutsmart-polish-enabled body.site .featured-view .product .spacer.cs-app-card,
html.cutsmart-polish-enabled body.site .latest-view .product .spacer.cs-app-card,
html.cutsmart-polish-enabled body .browse-view .product .spacer.cs-app-card,
html.cutsmart-polish-enabled body .category-view .product .spacer.cs-app-card,
html.cutsmart-polish-enabled body .featured-view .product .spacer.cs-app-card,
html.cutsmart-polish-enabled body .latest-view .product .spacer.cs-app-card {
  position: relative;
  border-top: 4px solid var(--cs-border-strong) !important;
}

html.cutsmart-polish-enabled body [data-cs-application="homeowner"],
html.cutsmart-polish-enabled body [data-cs-application="home"] {
  border-top-color: var(--cs-app-home) !important;
}
html.cutsmart-polish-enabled body [data-cs-application="landowner"],
html.cutsmart-polish-enabled body [data-cs-application="land"] {
  border-top-color: var(--cs-app-land) !important;
}
html.cutsmart-polish-enabled body [data-cs-application="professional"],
html.cutsmart-polish-enabled body [data-cs-application="pro"] {
  border-top-color: var(--cs-app-pro) !important;
}
html.cutsmart-polish-enabled body [data-cs-application="commercial"],
html.cutsmart-polish-enabled body [data-cs-application="com"] {
  border-top-color: var(--cs-app-com) !important;
}

/* Also support existing class names if the template/component already emits application classes.
   v0.3.1 removes :has() selectors here because they can be expensive on large VirtueMart grids. */
html.cutsmart-polish-enabled body .browse-view .product[class*="homeowner" i],
html.cutsmart-polish-enabled body .category-view .product[class*="homeowner" i] {
  border-top-color: var(--cs-app-home) !important;
}
html.cutsmart-polish-enabled body .browse-view .product[class*="landowner" i],
html.cutsmart-polish-enabled body .category-view .product[class*="landowner" i] {
  border-top-color: var(--cs-app-land) !important;
}
html.cutsmart-polish-enabled body .browse-view .product[class*="professional" i],
html.cutsmart-polish-enabled body .category-view .product[class*="professional" i] {
  border-top-color: var(--cs-app-pro) !important;
}
html.cutsmart-polish-enabled body .browse-view .product[class*="commercial" i],
html.cutsmart-polish-enabled body .category-view .product[class*="commercial" i] {
  border-top-color: var(--cs-app-com) !important;
}

/* Inserted by the small frontend helper after reading the visible Customer Information text. */
html.cutsmart-polish-enabled body .cs-app-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  max-width: calc(100% - 24px);
  margin: 10px auto 8px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  border: 1px solid var(--cs-border);
  box-shadow: 0 4px 12px rgba(6,59,120,.06);
  white-space: nowrap;
}

html.cutsmart-polish-enabled body .cs-app-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

html.cutsmart-polish-enabled body .cs-app-badge--homeowner {
  color: #177a32;
  background: var(--cs-app-home-soft);
  border-color: var(--cs-app-home-border);
}
html.cutsmart-polish-enabled body .cs-app-badge--landowner {
  color: #936300;
  background: var(--cs-app-land-soft);
  border-color: var(--cs-app-land-border);
}
html.cutsmart-polish-enabled body .cs-app-badge--professional {
  color: #0e62bd;
  background: var(--cs-app-pro-soft);
  border-color: var(--cs-app-pro-border);
}
html.cutsmart-polish-enabled body .cs-app-badge--commercial {
  color: #6f2bbd;
  background: var(--cs-app-com-soft);
  border-color: var(--cs-app-com-border);
}

/* Compact the long customer information block on category cards only.
   Full customer information remains available on the product detail page. */
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .cs-customer-info-long,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .cs-customer-info-long,
html.cutsmart-polish-enabled body:not(.view-productdetails) .featured-view .product .cs-customer-info-long,
html.cutsmart-polish-enabled body:not(.view-productdetails) .latest-view .product .cs-customer-info-long {
  display: none !important;
}

html.cutsmart-polish-enabled body .browse-view .product .product-price,
html.cutsmart-polish-enabled body .browse-view .product .PricesalesPrice,
html.cutsmart-polish-enabled body .category-view .product .product-price,
html.cutsmart-polish-enabled body .category-view .product .PricesalesPrice,
html.cutsmart-polish-enabled body .featured-view .product .product-price,
html.cutsmart-polish-enabled body .featured-view .product .PricesalesPrice,
html.cutsmart-polish-enabled body .latest-view .product .product-price,
html.cutsmart-polish-enabled body .latest-view .product .PricesalesPrice {
  color: var(--cs-blue-dark) !important;
  font-weight: 850 !important;
}

html.cutsmart-polish-enabled body .browse-view .product .product-title,
html.cutsmart-polish-enabled body .browse-view .product h2,
html.cutsmart-polish-enabled body .browse-view .product h3,
html.cutsmart-polish-enabled body .category-view .product .product-title,
html.cutsmart-polish-enabled body .category-view .product h2,
html.cutsmart-polish-enabled body .category-view .product h3,
html.cutsmart-polish-enabled body .featured-view .product .product-title,
html.cutsmart-polish-enabled body .featured-view .product h2,
html.cutsmart-polish-enabled body .featured-view .product h3,
html.cutsmart-polish-enabled body .latest-view .product .product-title,
html.cutsmart-polish-enabled body .latest-view .product h2,
html.cutsmart-polish-enabled body .latest-view .product h3 {
  color: var(--cs-blue-dark) !important;
  font-weight: 850 !important;
  letter-spacing: -.02em;
}

html.cutsmart-polish-enabled body .browse-view .product img,
html.cutsmart-polish-enabled body .category-view .product img,
html.cutsmart-polish-enabled body .featured-view .product img,
html.cutsmart-polish-enabled body .latest-view .product img {
  border-radius: 8px;
}

@media (max-width: 767px) {
  html.cutsmart-polish-enabled body .cs-app-badge {
    font-size: 11px;
    padding: 5px 9px;
  }
}


/* v0.3.2 fast application badge restore
   Keep brand markers in product titles/tab titles, but stop application colour from taking over the whole card.
   This remains light: no :has(), no full-page scanning dependency. */
html.cutsmart-polish-enabled body .browse-view .product.cs-app-card,
html.cutsmart-polish-enabled body .category-view .product.cs-app-card,
html.cutsmart-polish-enabled body .featured-view .product.cs-app-card,
html.cutsmart-polish-enabled body .latest-view .product.cs-app-card,
html.cutsmart-polish-enabled body .browse-view .browseProductContainer.cs-app-card,
html.cutsmart-polish-enabled body .category-view .browseProductContainer.cs-app-card,
html.cutsmart-polish-enabled body .browse-view .product .spacer.cs-app-card,
html.cutsmart-polish-enabled body .category-view .product .spacer.cs-app-card {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}

html.cutsmart-polish-enabled body .browse-view [data-cs-application],
html.cutsmart-polish-enabled body .category-view [data-cs-application],
html.cutsmart-polish-enabled body .featured-view [data-cs-application],
html.cutsmart-polish-enabled body .latest-view [data-cs-application] {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}

html.cutsmart-polish-enabled body .browse-view [data-cs-application="homeowner"],
html.cutsmart-polish-enabled body .category-view [data-cs-application="homeowner"] {
  border-top-color: var(--cs-app-home) !important;
}
html.cutsmart-polish-enabled body .browse-view [data-cs-application="landowner"],
html.cutsmart-polish-enabled body .category-view [data-cs-application="landowner"] {
  border-top-color: var(--cs-app-land) !important;
}
html.cutsmart-polish-enabled body .browse-view [data-cs-application="professional"],
html.cutsmart-polish-enabled body .category-view [data-cs-application="professional"] {
  border-top-color: var(--cs-app-pro) !important;
}
html.cutsmart-polish-enabled body .browse-view [data-cs-application="commercial"],
html.cutsmart-polish-enabled body .category-view [data-cs-application="commercial"] {
  border-top-color: var(--cs-app-com) !important;
}

/* Hide the old plain application heading on cards after the new badge has been inserted.
   Product names and their brand-colour marker are intentionally left alone. */
html.cutsmart-polish-enabled body .browse-view .cs-app-card > .cs-app-legacy-label,
html.cutsmart-polish-enabled body .category-view .cs-app-card > .cs-app-legacy-label {
  display: none !important;
}

/* v0.3.3 pill badge restore
   Reuse the existing visible application label where the template prints one, but style it as a real pill.
   This keeps performance light: no extra page-wide scanning or expensive selectors. */
html.cutsmart-polish-enabled body .browse-view .product .cs-app-badge,
html.cutsmart-polish-enabled body .category-view .product .cs-app-badge,
html.cutsmart-polish-enabled body .featured-view .product .cs-app-badge,
html.cutsmart-polish-enabled body .latest-view .product .cs-app-badge,
html.cutsmart-polish-enabled body .browse-view .browseProductContainer .cs-app-badge,
html.cutsmart-polish-enabled body .category-view .browseProductContainer .cs-app-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 24px) !important;
  margin: 10px auto 10px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  border: 1px solid currentColor !important;
  box-shadow: 0 4px 12px rgba(6,59,120,.06) !important;
  white-space: nowrap !important;
  background-image: none !important;
  text-align: center !important;
}

html.cutsmart-polish-enabled body .browse-view .product .cs-app-badge::before,
html.cutsmart-polish-enabled body .category-view .product .cs-app-badge::before,
html.cutsmart-polish-enabled body .featured-view .product .cs-app-badge::before,
html.cutsmart-polish-enabled body .latest-view .product .cs-app-badge::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  flex: 0 0 8px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  display: inline-block !important;
}

html.cutsmart-polish-enabled body .cs-app-badge.cs-app-badge--homeowner {
  color: #177a32 !important;
  background-color: var(--cs-app-home-soft) !important;
  border-color: var(--cs-app-home-border) !important;
}
html.cutsmart-polish-enabled body .cs-app-badge.cs-app-badge--landowner {
  color: #936300 !important;
  background-color: var(--cs-app-land-soft) !important;
  border-color: var(--cs-app-land-border) !important;
}
html.cutsmart-polish-enabled body .cs-app-badge.cs-app-badge--professional {
  color: #0e62bd !important;
  background-color: var(--cs-app-pro-soft) !important;
  border-color: var(--cs-app-pro-border) !important;
}
html.cutsmart-polish-enabled body .cs-app-badge.cs-app-badge--commercial {
  color: #6f2bbd !important;
  background-color: var(--cs-app-com-soft) !important;
  border-color: var(--cs-app-com-border) !important;
}

/* Keep the title brand marker visible, but ensure application colour no longer tints the whole card. */
html.cutsmart-polish-enabled body .browse-view .product.cs-app-card,
html.cutsmart-polish-enabled body .category-view .product.cs-app-card,
html.cutsmart-polish-enabled body .featured-view .product.cs-app-card,
html.cutsmart-polish-enabled body .latest-view .product.cs-app-card,
html.cutsmart-polish-enabled body .browse-view .product .spacer.cs-app-card,
html.cutsmart-polish-enabled body .category-view .product .spacer.cs-app-card,
html.cutsmart-polish-enabled body .featured-view .product .spacer.cs-app-card,
html.cutsmart-polish-enabled body .latest-view .product .spacer.cs-app-card,
html.cutsmart-polish-enabled body .browse-view .browseProductContainer.cs-app-card,
html.cutsmart-polish-enabled body .category-view .browseProductContainer.cs-app-card {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}

html.cutsmart-polish-enabled body .browse-view .cs-app-card > .cs-app-legacy-label:not(.cs-app-badge),
html.cutsmart-polish-enabled body .category-view .cs-app-card > .cs-app-legacy-label:not(.cs-app-badge) {
  display: none !important;
}


/* v0.3.5 badge activation fix
   Strong scoped fallback: if the helper successfully converts an existing visible application label, force it to render as a pill. */
html.cutsmart-polish-enabled body .browse-view .product .cs-app-badge,
html.cutsmart-polish-enabled body .category-view .product .cs-app-badge,
html.cutsmart-polish-enabled body .featured-view .product .cs-app-badge,
html.cutsmart-polish-enabled body .latest-view .product .cs-app-badge,
html.cutsmart-polish-enabled body .browse-view .browseProductContainer .cs-app-badge,
html.cutsmart-polish-enabled body .category-view .browseProductContainer .cs-app-badge,
html.cutsmart-polish-enabled body .browse-view .spacer .cs-app-badge,
html.cutsmart-polish-enabled body .category-view .spacer .cs-app-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  margin: 10px auto 10px !important;
  border-radius: 999px !important;
  border: 1px solid currentColor !important;
  background-image: none !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  width: fit-content !important;
  max-width: calc(100% - 24px) !important;
}


/* v0.3.5 duplicate badge cleanup
   Keep one application pill near the top of each product card. Hide any second pill that is printed
   lower down in the customfield/cart area. */
html.cutsmart-polish-enabled body .browse-view .cs-app-badge-duplicate,
html.cutsmart-polish-enabled body .category-view .cs-app-badge-duplicate,
html.cutsmart-polish-enabled body .featured-view .cs-app-badge-duplicate,
html.cutsmart-polish-enabled body .latest-view .cs-app-badge-duplicate,
html.cutsmart-polish-enabled body .browse-view .cs-app-legacy-label,
html.cutsmart-polish-enabled body .category-view .cs-app-legacy-label,
html.cutsmart-polish-enabled body .featured-view .cs-app-legacy-label,
html.cutsmart-polish-enabled body .latest-view .cs-app-legacy-label {
  display: none !important;
}


/* v0.3.6 single top application badge enforcement
   Hide badges that VirtueMart prints/converts in the lower customfield/store-option/cart section.
   The top badge under the product image remains visible. */
html.cutsmart-polish-enabled body .browse-view .product .product-fields .cs-app-badge,
html.cutsmart-polish-enabled body .category-view .product .product-fields .cs-app-badge,
html.cutsmart-polish-enabled body .featured-view .product .product-fields .cs-app-badge,
html.cutsmart-polish-enabled body .latest-view .product .product-fields .cs-app-badge,
html.cutsmart-polish-enabled body .browse-view .product .product-field .cs-app-badge,
html.cutsmart-polish-enabled body .category-view .product .product-field .cs-app-badge,
html.cutsmart-polish-enabled body .browse-view .product .product-field-display .cs-app-badge,
html.cutsmart-polish-enabled body .category-view .product .product-field-display .cs-app-badge,
html.cutsmart-polish-enabled body .browse-view .product .vm-customfield-cart .cs-app-badge,
html.cutsmart-polish-enabled body .category-view .product .vm-customfield-cart .cs-app-badge,
html.cutsmart-polish-enabled body .browse-view .product .addtocart-area .cs-app-badge,
html.cutsmart-polish-enabled body .category-view .product .addtocart-area .cs-app-badge,
html.cutsmart-polish-enabled body .browse-view .product .addtocart-bar .cs-app-badge,
html.cutsmart-polish-enabled body .category-view .product .addtocart-bar .cs-app-badge,
html.cutsmart-polish-enabled body .browse-view .product form .cs-app-badge,
html.cutsmart-polish-enabled body .category-view .product form .cs-app-badge {
  display: none !important;
}


/* v0.3.7 compact product-card actions
   Keep the speed-safe v0.3.1 badge logic. This is CSS-only tidy-up for VirtueMart category cards. */
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .spacer,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .spacer,
html.cutsmart-polish-enabled body:not(.view-productdetails) .featured-view .product .spacer,
html.cutsmart-polish-enabled body:not(.view-productdetails) .latest-view .product .spacer {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding-bottom: 16px !important;
}

/* Make the lower controls feel like one tidy action block instead of floating pieces. */
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .addtocart-area,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .addtocart-area,
html.cutsmart-polish-enabled body:not(.view-productdetails) .featured-view .product .addtocart-area,
html.cutsmart-polish-enabled body:not(.view-productdetails) .latest-view .product .addtocart-area,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .addtocart-bar,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .addtocart-bar,
html.cutsmart-polish-enabled body:not(.view-productdetails) .featured-view .product .addtocart-bar,
html.cutsmart-polish-enabled body:not(.view-productdetails) .latest-view .product .addtocart-bar {
  margin-top: 12px !important;
  padding-top: 0 !important;
  text-align: center !important;
  position: static !important;
  width: 100% !important;
}

/* Store option/customfield box: compact, centered and less tall. */
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .product-fields,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .product-fields,
html.cutsmart-polish-enabled body:not(.view-productdetails) .featured-view .product .product-fields,
html.cutsmart-polish-enabled body:not(.view-productdetails) .latest-view .product .product-fields,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .product-field,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .product-field,
html.cutsmart-polish-enabled body:not(.view-productdetails) .featured-view .product .product-field,
html.cutsmart-polish-enabled body:not(.view-productdetails) .latest-view .product .product-field,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .vm-customfield-cart,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .vm-customfield-cart,
html.cutsmart-polish-enabled body:not(.view-productdetails) .featured-view .product .vm-customfield-cart,
html.cutsmart-polish-enabled body:not(.view-productdetails) .latest-view .product .vm-customfield-cart {
  margin: 6px auto 8px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  text-align: center !important;
}

html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .product-fields label,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .product-fields label,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .product-field label,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .product-field label,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .vm-customfield-cart label,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .vm-customfield-cart label,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .product-field-title,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .product-field-title {
  display: block !important;
  margin: 0 0 5px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: var(--cs-muted) !important;
  text-align: center !important;
}

html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .product-fields select,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .product-fields select,
html.cutsmart-polish-enabled body:not(.view-productdetails) .featured-view .product .product-fields select,
html.cutsmart-polish-enabled body:not(.view-productdetails) .latest-view .product .product-fields select,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .vm-customfield-cart select,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .vm-customfield-cart select,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product select,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product select {
  width: auto !important;
  max-width: 178px !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 5px 30px 5px 10px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
}

/* Quantity: keep manual quantity input, hide the duplicated tiny plus/minus icons that clutter category cards. */
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .quantity-controls,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .quantity-controls,
html.cutsmart-polish-enabled body:not(.view-productdetails) .featured-view .product .quantity-controls,
html.cutsmart-polish-enabled body:not(.view-productdetails) .latest-view .product .quantity-controls,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product input.quantity-plus,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product input.quantity-minus,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product input.quantity-plus,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product input.quantity-minus,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .vmicon.vm2-add_quantity_cart,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .vmicon.vm2-remove_from_cart,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .vmicon.vm2-add_quantity_cart,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .vmicon.vm2-remove_from_cart {
  display: none !important;
}

html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .quantity-box,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .quantity-box,
html.cutsmart-polish-enabled body:not(.view-productdetails) .featured-view .product .quantity-box,
html.cutsmart-polish-enabled body:not(.view-productdetails) .latest-view .product .quantity-box {
  display: block !important;
  margin: 8px auto 10px !important;
  width: fit-content !important;
  float: none !important;
}

html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product input.quantity-input,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product input.quantity-input,
html.cutsmart-polish-enabled body:not(.view-productdetails) .featured-view .product input.quantity-input,
html.cutsmart-polish-enabled body:not(.view-productdetails) .latest-view .product input.quantity-input,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product input[name="quantity"],
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product input[name="quantity"] {
  width: 54px !important;
  min-width: 54px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  text-align: center !important;
  margin: 0 auto !important;
}

/* Make category card CTAs sit cleanly and consistently. */
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .addtocart-button,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .addtocart-button,
html.cutsmart-polish-enabled body:not(.view-productdetails) .featured-view .product .addtocart-button,
html.cutsmart-polish-enabled body:not(.view-productdetails) .latest-view .product .addtocart-button,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .addtocart-bar input.addtocart-button,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .addtocart-bar input.addtocart-button {
  display: block !important;
  width: min(190px, calc(100% - 28px)) !important;
  min-height: 46px !important;
  margin: 8px auto 10px !important;
  border-radius: 12px !important;
}

html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .product-details,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .product-details,
html.cutsmart-polish-enabled body:not(.view-productdetails) .featured-view .product .product-details,
html.cutsmart-polish-enabled body:not(.view-productdetails) .latest-view .product .product-details,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product a.product-details,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product a.product-details,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .productdetails,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .productdetails,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product a[href*="details"],
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product a[href*="details"] {
  display: block !important;
  width: min(170px, calc(100% - 36px)) !important;
  min-height: 38px !important;
  margin: 8px auto 0 !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  background: #eef6ff !important;
  border: 1px solid #cfe3fb !important;
  color: var(--cs-blue) !important;
  font-weight: 800 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

@media (max-width: 767px) {
  html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .addtocart-button,
  html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .addtocart-button,
  html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .addtocart-bar input.addtocart-button,
  html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .addtocart-bar input.addtocart-button,
  html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .product-details,
  html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .product-details,
  html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product a.product-details,
  html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product a.product-details {
    width: calc(100% - 24px) !important;
  }
}


/* v0.3.15 compact action spacing
   Reduce the extra white space in the lower category-card action area without touching cart/header behaviour. */
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .addtocart-area,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .addtocart-area,
html.cutsmart-polish-enabled body:not(.view-productdetails) .featured-view .product .addtocart-area,
html.cutsmart-polish-enabled body:not(.view-productdetails) .latest-view .product .addtocart-area,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .addtocart-bar,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .addtocart-bar,
html.cutsmart-polish-enabled body:not(.view-productdetails) .featured-view .product .addtocart-bar,
html.cutsmart-polish-enabled body:not(.view-productdetails) .latest-view .product .addtocart-bar {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  margin-top: 8px !important;
  min-height: 0 !important;
}

html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .product-fields,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .product-fields,
html.cutsmart-polish-enabled body:not(.view-productdetails) .featured-view .product .product-fields,
html.cutsmart-polish-enabled body:not(.view-productdetails) .latest-view .product .product-fields,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .product-field,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .product-field,
html.cutsmart-polish-enabled body:not(.view-productdetails) .featured-view .product .product-field,
html.cutsmart-polish-enabled body:not(.view-productdetails) .latest-view .product .product-field,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .vm-customfield-cart,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .vm-customfield-cart,
html.cutsmart-polish-enabled body:not(.view-productdetails) .featured-view .product .vm-customfield-cart,
html.cutsmart-polish-enabled body:not(.view-productdetails) .latest-view .product .vm-customfield-cart {
  margin: 4px auto 4px !important;
}

html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .quantity-box,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .quantity-box,
html.cutsmart-polish-enabled body:not(.view-productdetails) .featured-view .product .quantity-box,
html.cutsmart-polish-enabled body:not(.view-productdetails) .latest-view .product .quantity-box {
  margin: 4px auto 4px !important;
}

html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .addtocart-button,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .addtocart-button,
html.cutsmart-polish-enabled body:not(.view-productdetails) .featured-view .product .addtocart-button,
html.cutsmart-polish-enabled body:not(.view-productdetails) .latest-view .product .addtocart-button,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .addtocart-bar input.addtocart-button,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .addtocart-bar input.addtocart-button {
  margin: 4px auto 6px !important;
}

html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .product-details,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .product-details,
html.cutsmart-polish-enabled body:not(.view-productdetails) .featured-view .product .product-details,
html.cutsmart-polish-enabled body:not(.view-productdetails) .latest-view .product .product-details,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product a.product-details,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product a.product-details,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .productdetails,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .productdetails,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product a[href*="details"],
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product a[href*="details"] {
  margin: 4px auto 0 !important;
}

html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .addtocart-area > *,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .addtocart-area > *,
html.cutsmart-polish-enabled body:not(.view-productdetails) .featured-view .product .addtocart-area > *,
html.cutsmart-polish-enabled body:not(.view-productdetails) .latest-view .product .addtocart-area > *,
html.cutsmart-polish-enabled body:not(.view-productdetails) .browse-view .product .addtocart-bar > *,
html.cutsmart-polish-enabled body:not(.view-productdetails) .category-view .product .addtocart-bar > *,
html.cutsmart-polish-enabled body:not(.view-productdetails) .featured-view .product .addtocart-bar > *,
html.cutsmart-polish-enabled body:not(.view-productdetails) .latest-view .product .addtocart-bar > * {
  flex: 0 0 auto !important;
}


/* v0.3.18 Product detail small-laptop helper/sidebar refinement
   The product page is good on full laptops, but on smaller/till laptops the right-side
   customer/helper panels can become too narrow. Keep a practical minimum width for the
   action/helper column and stack the helper actions when the panel is narrow. */
@media (min-width: 800px) and (max-width: 1199.98px) {
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view,
  html.cutsmart-polish-enabled body .productdetails-view {
    --cs-product-sidebar-width: clamp(300px, 31vw, 360px);
    --cs-product-gap: clamp(14px, 1.8vw, 24px);
  }

  /* Common VirtueMart/Cutsmart right-hand product action containers. */
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .vm-product-details-container,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .spacer-buy-area,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .product-buy-area,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .addtocart-area,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .addtocart-bar,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .cs-product-assistant,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .cutsmart-product-assistant,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .cutsmart-assistant-panel,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .cs-help-panel {
    box-sizing: border-box !important;
    min-width: min(300px, 100%) !important;
    max-width: 100% !important;
  }

  /* If the template uses flex columns, reserve a usable percentage for the right side. */
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .vm-product-details-container,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .spacer-buy-area,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .product-buy-area {
    flex: 0 1 var(--cs-product-sidebar-width) !important;
  }

  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .vm-product-media-container,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .main-image,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .product-short-description,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .product-description,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .productdetails,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .tab-content {
    min-width: 0 !important;
  }

  /* Helper action buttons should not split into thin columns on till/small laptop sidebars. */
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .cs-product-assistant .actions,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .cs-product-assistant .cs-help-actions,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .cs-product-assistant .help-actions,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .cutsmart-product-assistant .actions,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .cutsmart-product-assistant .cs-help-actions,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .cutsmart-product-assistant .help-actions,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .cs-help-panel .actions,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .cs-help-panel .cs-help-actions,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .cs-help-panel .help-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .cs-product-assistant a,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .cs-product-assistant button,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .cutsmart-product-assistant a,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .cutsmart-product-assistant button,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .cs-help-panel a,
  html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .cs-help-panel button {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}

/* Container-query backup: if any helper card is physically narrow, stack its actions regardless of viewport. */
html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .cs-product-assistant,
html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .cutsmart-product-assistant,
html.cutsmart-polish-enabled body.view-productdetails .productdetails-view .cs-help-panel {
  container-type: inline-size;
}

@container (max-width: 330px) {
  .cs-product-assistant .actions,
  .cs-product-assistant .cs-help-actions,
  .cs-product-assistant .help-actions,
  .cutsmart-product-assistant .actions,
  .cutsmart-product-assistant .cs-help-actions,
  .cutsmart-product-assistant .help-actions,
  .cs-help-panel .actions,
  .cs-help-panel .cs-help-actions,
  .cs-help-panel .help-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .cs-product-assistant a,
  .cs-product-assistant button,
  .cutsmart-product-assistant a,
  .cutsmart-product-assistant button,
  .cs-help-panel a,
  .cs-help-panel button {
    white-space: normal !important;
    word-break: normal !important;
  }
}