:root {
  --swiper-theme-color: #007aff;
  /* Colors */
  --primary-color: #f47e2c;
  --primary-color-alt: #f57f2d;
  --primary-color-light: rgba(245, 127, 45, 0.15);
  --text-color: #231f20;
  --body-text-color: rgba(0, 0, 0, 0.6);
  --text-color-light: #000;
  --text-color-gray: #666;
  --text-color-gray-light: #888;
  --text-color-gray-lighter: #999;
  --text-color-gray-dark: #333;
  --text-color-gray-darker: #444;
  --text-color-gray-darkest: #555;
  --text-color-gray-medium: #777;
  --text-color-placeholder: #9ca3af;
  --white: #fff;
  --black: #000;
  --gray: #949494;
  --black-color: #222;
  --light-gray: #f2f2f2;
  --gray-light: #e0e0e0;
  --gray-lighter: #e6e6e6;
  --gray-lightest: #ececec;
  --gray-border: #cfcdcd;
  --gray-border-alt: #d6d6d6;
  --gray-border-alt2: #d0d0d0;
  --gray-border-alt3: #d1d1d1;
  --gray-border-alt4: #bebebe;
  --gray-border-alt5: #efefef;
  --gray-border-alt6: #eee;
  --gray-border-alt7: #a6a6a6;
  --gray-dark: #666666;
  --background-color: #e6e7e8;
  --background-color-white: #fff;
  --background-color-gray: #ebebeb;
  --background-color-gray-light: #f1f1f2;
  --background-color-gray-lighter: #f5f5f5;
  --background-color-gray-lightest: #e0e0e0;
  --border-color: #949494;
  --border-color-light: #ccc;
  --border-color-lighter: #ddd;
  --border-color-lightest: #e0e0e0;
  --secondary-color: #414042;
  --text-color-secondary: #6d6e72;
  --text-color-muted: #585858;
  --dark-blue: #145474;
  --blue: #1d4ed8;
  --blue-light: #46b8da;
  --blue-text: #5865c3;
  --background-color-gray-alt: #f2f2f2;
  --background-color-gray-alt2: #f9fafb;
  --border-color-gray: #d1d5db;
  --border-color-gray-light: #e5e7eb;
  --border-color-gray-lighter: #9ca3af;
  --text-color-gray-lightest: #6b7280;
  --primary-color-orange-darkest: #e36a00;
  --light-orange: rgba(245, 127, 45, 0.25);
  --primary-color-orange: #ff6b35;
  --primary-color-orange-light: #eb690b;
  --primary-color-orange-dark: #d96b1a;
  --primary-color-orange-darker: #c45100;
  --warning-color: #f39c12;
  --info-color: #bdc3c7;
  --shadow-color: #7d7d7d;
  --error-color: #d32f2f;
  --error-bg: #ffebee;
  --success-color: #2e7d32;
  --success-bg: #e8f5e9;
  --primary-color-orange-alt3: #d66a1f;
  --background-dark: #2a2a2a;
  /* Tier marketing cards (usai-product-tiers-v2): 1=blue, 2=purple, 3=green */
  --tier-bg: #9cbe4b;
  --tier-bg2: #77439a;
  --tier-bg3: #2288c9;
  /* Color indicator colors */
  --color-warm-glow: #f5a623;
  --color-primary-orange-alt2: #ff6b35;
  --color-blue-indicator: #4a90d9;
  --color-cyan-indicator: #50e3c2;
  --color-purple-indicator: #7b68ee;
  --color-pink-indicator: #ff69b4;
  --color-gold-indicator: #ffd700;
  /* Tier badge colors (Tier 1 / 2 / 3) */
  --tier-1-color: #2288c9;
  --tier-2-color: #77439a;
  --tier-3-color: #9cbe4b;
  /* Base Values */
  --base-font-size: 16px;
  --base-spacing: 8px;
  --base-line-height: 1.5;

  /* Typography - Simplified variables */
  --font-family-primary: "futura-pt", sans-serif;
  --font-family-heading: "futura-pt", sans-serif;
  --font-family-times: "times-new-roman", sans-serif;

  --font-size-1xs: 12px;
  --font-size-2xs: 14px;
  --font-size-xs: 16px;
  --font-size-sm: 18px;
  --font-size-sm2: 20px;
  --font-size-ssm: 22px;
  --font-size-md: 24px;
  --font-size-lg: 28px;
  --font-size-1lg: 30px;
  --font-size-xl: 38px;
  --font-size-1xl: 40px;
  --font-size-2xl: 48px;
  --font-size-3xl: 58px;

  --line-height-xs: 19.9px;
  --line-height-sm: 22px;
  --line-height-md: 28px;
  --line-height-lg: 32px;
  --line-height-1lg: 38px;
  --line-height-xl: 44px;
  --line-height-2xl: 52px;
  --line-height-3xl: 64px;
  --line-height-sms: 26px;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-strong: 600;
  --font-weight-bold: 700;
  --font-weight-light: 300;

  /* Line Heights - Using calc() with base line height */
  --line-height-tight: calc(var(--base-line-height) * 0.8); /* 1.2 */
  --line-height-base: var(--base-line-height); /* 1.5 */
  --line-height-relaxed: calc(var(--base-line-height) * 1.2); /* 1.8 */
  --line-height-loose: calc(var(--base-line-height) * 1.5); /* 2.25 */

  /* Spacing - Using calc() with base spacing */
  --spacing-xs: var(--base-spacing); /* 8px */
  --spacing-sm: calc(var(--base-spacing) * 1.25); /* 10px */
  --spacing-md: calc(var(--base-spacing) * 1.875); /* 15px */
  --spacing-lg: calc(var(--base-spacing) * 2.25); /* 18px */
  --spacing-xl: calc(var(--base-spacing) * 2.5); /* 20px */
  --spacing-2xl: calc(var(--base-spacing) * 3.125); /* 25px */
  --spacing-3xl: calc(var(--base-spacing) * 3.75); /* 30px */
  --spacing-3xl-lg: calc(var(--base-spacing) * 5); /* 40px */
  --spacing-4xl: calc(var(--base-spacing) * 6.25); /* 50px */
  --spacing-5xl: calc(var(--base-spacing) * 7.5); /* 60px */
  --spacing-6xl: calc(var(--base-spacing) * 10); /* 80px */
  --spacing-8xl: calc(var(--base-spacing) * 15); /* 120px */

  /* Layout */
  --section-h-padding: var(
    --spacing-3xl-lg
  ); /* 40px – matches header desktop padding */
  --card-h-padding: var(
    --spacing-4xl
  ); /* 50px – horizontal padding inside white content cards */
  --content-inset: var(
    --section-h-padding
  ); /* total distance from max-width edge to text (card h-padding removed for alignment) */
  --max-width: 1800px;
  --border-radius-sm: calc(var(--base-spacing) * 1); /* 8px */
  --border-radius-md: calc(var(--base-spacing) * 1.875); /* 15px */
  --border-radius-lg: calc(var(--base-spacing) * 2.5); /* 20px */
  --border-radius-full: 100px;

  /* Shadows */
  --shadow-light: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);

  /* Z-index */
  --z-index-base: 1;
  --z-index-overlay: 2;

  /* Mega-menu "Description Dive" highlighted item background. Light tone is the
     legacy peach previously hard-coded in Customizer Additional CSS / Mega Menu
     plugin Custom Styling; the dark-mode counterpart is a desaturated warm dim
     so the block remains readable against a dark surface. */
  --discripition-dive-bg: #fef2ea;

  /* Always-white text/icon color for content that sits on a saturated brand
     (orange) or dark-translucent surface. Intentionally NOT overridden in dark
     mode: those surfaces stay colored/dark, so the foreground must stay white
     (unlike --white, which flips to a dark value for light surfaces). */
  --on-primary-color: #fff;

  /* "Not finding what you need?" (us-ai help bar) surface. Light = the legacy
     peach; the dark counterparts live in the [data-theme="dark"] block so the
     bar adapts without any hard-coded hex in the rules themselves. */
  --usai-help-bar-bg: #fcebdd;
  --usai-help-bar-bg-hover: #fbe2cf;
}

/* Dark Mode Variables */
[data-theme="dark"] {
  --primary-color: #cc4a1f;
  --primary-color-alt: #d95a2f;
  --text-color: #e8e8e8;
  --black-color: #c0c0c0;
  --body-text-color: #e0e0e0;
  --text-color-light: #f5f5f5;
  --text-color-gray: #b8b8b8;
  --text-color-gray-light: #a0a0a0;
  --text-color-gray-lighter: #909090;
  --text-color-gray-dark: #d0d0d0;
  --text-color-gray-darker: #e0e0e0;
  --text-color-gray-darkest: #c0c0c0;
  --text-color-gray-medium: #b0b0b0;
  --text-color-placeholder: #909090;
  --white: #1e1e1e;
  --black: #e8e8e8;
  --gray: #707070;
  --light-gray: #404040;
  --gray-light: #505050;
  --gray-lighter: #404040;
  --gray-lightest: #353535;
  --gray-border: #4a4a4a;
  --gray-border-alt: #4a4a4a;
  --gray-border-alt2: #4a4a4a;
  --gray-border-alt3: #4a4a4a;
  --gray-border-alt4: #4a4a4a;
  --gray-border-alt5: #404040;
  --gray-border-alt6: #404040;
  --gray-border-alt7: #4a4a4a;
  --gray-dark: #909090;
  --background-color: #1a1a1a;
  --background-color-white: #1e1e1e;
  --background-color-gray: #353535;
  --background-color-gray-light: #262626;
  --background-color-gray-lighter: #2a2a2a;
  --background-color-gray-lightest: #353535;
  --border-color: #4a4a4a;
  --border-color-light: #4a4a4a;
  --border-color-lighter: #3a3a3a;
  --border-color-lightest: #353535;
  --blue-light: #6ab8da;
  --blue-text: #7a8ae8;
  --primary-color-orange: #cc4a1f;
  --primary-color-orange-light: #d95a2f;
  --primary-color-orange-dark: #b83d0f;
  --primary-color-orange-darker: #a6350a;
  --warning-color: #f5a623;
  --info-color: #8a9ba8;
  --shadow-color: #000000;
  --error-color: #e84a4a;
  --error-bg: #3a1f1f;
  --success-color: #4a9a4a;
  --success-bg: #1f2a1f;
  --primary-color-orange-alt3: #e67a4f;
  --background-dark: #3a3a3a;
  /* Color indicator colors - slightly adjusted for dark mode */
  --color-warm-glow: #f5a623;
  --color-primary-orange-alt2: #ff6b35;
  --color-blue-indicator: #5aa0e9;
  --color-cyan-indicator: #60f3d2;
  --color-purple-indicator: #8b78fe;
  --color-pink-indicator: #ff79c4;
  --color-gold-indicator: #ffe700;
  /* Tier badge colors — same brand palette in dark mode */
  --tier-1-color: #2288c9;
  --tier-2-color: #77439a;
  --tier-3-color: #9cbe4b;

  /* Dark-mode counterpart of the mega-menu "Description Dive" peach highlight.
     Warm dim tone keeps the block legible without glaring against the rest of
     the dark mega panel. */
  --discripition-dive-bg: #3a2c25;

  /* Dark-mode us-ai help bar: warm-dim surface (matches the mega-menu peach
     highlight's dark counterpart) with a slightly lighter hover. */
  --usai-help-bar-bg: #3a2c25;
  --usai-help-bar-bg-hover: #463730;
}

/* Default anchor tag color in dark mode - very light gray instead of blue */
[data-theme="dark"] a {
  color: var(--text-color-light);
}

/* ---------------------------------------------------------------------------
   Clickable affordance: every interactive control shows the pointer cursor so
   it reads as clickable. Disabled controls and explicit opt-outs (e.g. the
   aria-disabled "View All" placeholder, which keeps cursor:default) are
   excluded so the cue stays honest.
   --------------------------------------------------------------------------- */
button:not(:disabled):not([disabled]),
[role="button"]:not([aria-disabled="true"]),
input[type="button"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="reset"]:not(:disabled),
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
select:not(:disabled),
summary,
label[for] {
  cursor: pointer;
}

/*
  @media (prefers-color-scheme: dark){
      :root{
  
          --text-color: #ffffff;
          --text-color-light: #e0e0e0;
          --background-color: #1a1a1a;
          --white: #2a2a2a;
          --border-color: #404040;
      }
  }
  
  */

/* http://meyerweb.com/eric/tools/css/reset/ 
     v2.0 | 20110126
     License: none (public domain)
  */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
img.header-logo {
  position: relative;
  top: 5px;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/********* custom css *******/
body {
  font-family: var(--font-family-primary);
  font-optical-sizing: auto;
  font-style: normal;
  background-color: var(--white);
  color: var(--body-text-color);
  overflow-x: hidden;
}
main {
  padding-bottom: 0;
  margin-bottom: 0;
  background-color: var(--white);
  padding-top: var(--spacing-xl);
}
footer {
  padding: var(--spacing-3xl-lg) 0 var(--spacing-3xl);
  background-color: var(--white);
  margin: 0;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-medium);
  font-style: normal;
  color: var(--text-color);
}
h1 {
  font-size: var(--font-size-xl);
}
h2 {
  font-size: var(--font-size-lg);
}
h3 {
  font-size: var(--font-size-sm);
}
h4,
h5 {
  font-size: var(--font-size-xs);
}

p {
  font-size: var(--font-size-xs);
  font-style: normal;
  margin-bottom: var(--spacing-md);
}
.btn {
  border-radius: 20px;
  display: flex;
  padding: var(--spacing-xs) var(--spacing-3xl);
  text-decoration: none;
  transition: all 0.5s ease;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-strong);
  min-width: 100px;
  text-align: center;
  justify-content: center;
  cursor: pointer;
  white-space: nowrap;
}
select {
  padding: var(--spacing-lg) var(--spacing-4xl) var(--spacing-lg)
    var(--spacing-3xl);
  border-radius: var(--border-radius-full);
  background-repeat: no-repeat;
  background-position: right center;
  background-repeat: no-repeat;
  background-position: right 14px center;
  -webkit-appearance: none;
  -moz-appearance: window;
  background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"/></svg>');
  font-size: var(--font-size-2xs);
  background-color: var(--white);
  color: var(--text-color);
  border: 1px solid var(--border-color-light);
}
input[type="text"] {
  padding: var(--spacing-lg) var(--spacing-4xl) var(--spacing-lg)
    var(--spacing-3xl);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-2xs);
  border: 1px solid var(--border-color-light);
  background-color: var(--white);
  color: var(--text-color);
}

input[type="text"]::placeholder,
input[type="text"]::-webkit-input-placeholder,
input[type="text"]::-moz-placeholder,
input[type="text"]:-ms-input-placeholder {
  color: var(--text-color-placeholder);
}

textarea {
  background-color: var(--white);
  color: var(--text-color);
  border: 1px solid var(--border-color-light);
}

textarea::placeholder,
textarea::-webkit-input-placeholder,
textarea::-moz-placeholder,
textarea:-ms-input-placeholder {
  color: var(--text-color-placeholder);
}
iframe {
  max-width: 100%;
}
/*
  .btn-full{
      width: 100%;
      text-align: center;
      padding-left: 0;
      padding-right: 0;
  }*/
.no-result-found {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-6xl) 0;
}
.no-result-found-wrap svg {
  width: 100%;
}
.fw-normal {
  font-weight: var(--font-weight-normal) !important;
}
.fw-strong {
  font-weight: var(--font-weight-strong) !important;
}
.btn-primary {
  color: var(--white);
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
}
.btn-primary:hover {
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--primary-color);
}
.btn-secondary {
  color: var(--white);
  background: var(--black);
  border: 1px solid var(--black);
}
.btn-sm {
  padding: var(--spacing-sm) var(--spacing-md) !important;
}
.btn-secondary:hover {
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--black);
}
.btn-tertiary {
  color: var(--gray);
  background: var(--white);
  border: 1px solid var(--gray);
}
.btn-tertiary:hover {
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--gray);
}
.header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--max-width);
  margin: auto;
  padding: var(--spacing-3xl);
  background-color: var(--background-color); /* Gray header background */
}
.single main {
  max-width: var(--max-width);
  margin: var(--spacing-3xl) auto;
  background-color: var(--white);
  padding: var(--spacing-4xl);
  border-bottom: 1px solid var(--gray-border-alt);
}
.single main h2 {
  margin-top: var(--spacing-3xl-lg);
  margin-bottom: var(--spacing-xl);
  font-size: var(--font-size-xl);
}
.single main h3 {
  font-size: var(--font-size-xl);
}
.single main ul {
  margin-bottom: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}
.single .wp-block-image {
  margin-bottom: var(--spacing-xl);
}
.wp-block-image img {
  width: 100%;
}
.search-wrapper {
  max-width: var(--max-width);
  margin: auto;
}
.search-summary {
  background-color: var(--primary-color);
  color: var(--white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}
.search-summary-tag a {
  font-size: var(--font-size-1xs);
  color: var(--white);
  text-decoration: none;
  border-radius: 50px;
  border: 1px solid var(--white);
  padding: var(--spacing-xs) var(--spacing-lg);
}
/* AI search results — meta line (see USAI AI Search Demo.html .srch-meta) */
.usai-srch-meta-area {
  padding: 4px 0 12px;
  margin: 0;
}
.usai-srch-meta {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #888;
}
.usai-srch-meta b {
  font-weight: 600;
  color: #1a1a1a;
}

.search-ai-content {
  background-color: var(--white);
  padding-top: var(--spacing-3xl);
}
.search-padding {
  padding: var(--spacing-3xl) var(--spacing-3xl);
}
.search-summary {
  background-color: var(--primary-color);
  color: var(--white);
}
.usai-search {
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm)
    var(--spacing-3xl-lg) !important;
  background-color: var(--white);
  border: 1px solid var(--black) !important;
  outline: none;
  background-image: url(/wp-content/themes/usailighting/images/search.png) !important;
  background-position: 15px center;
  background-repeat: no-repeat;
  background-size: 15px;
}

.usai-search-2 {
  width: 100%;
  display: inline-block;
  box-sizing: border-box;
  border: none !important;
  outline: none !important;
  border-radius: 8px !important;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
  background-image: url(/wp-content/themes/usailighting/images/search.png) !important;
  background-position: 20px center;
  background-repeat: no-repeat;
  background-size: 15px;
  padding-left: var(--spacing-4xl) !important;
}
.header-left {
  display: flex;
  gap: 40px;
  align-items: center;
}
.filter-wrap {
  display: flex;
  flex-direction: row;
  gap: 15px;
  flex-wrap: wrap;
}
.section-wrapper {
  max-width: var(--max-width);
  margin: auto;
  padding: var(--spacing-xl) var(--section-h-padding) 0;
  margin-bottom: 0;
}
.breadcrumbs-wrap + main > .section-wrapper:first-child {
  padding-top: 0;
  margin-top: 0;
}
.breadcrumbs-wrap + main > .section-wrapper:first-child > .wysiwyg-main,
.breadcrumbs-wrap
  + main
  > .section-wrapper:first-child
  > .usailighting-title-with-navigation-main,
.breadcrumbs-wrap + main > .section-wrapper:first-child > .section-wrap-main,
.breadcrumbs-wrap + main > .section-wrapper:first-child > .our-product-main {
  padding-top: 0;
}
.hero {
  display: flex;
  gap: var(--spacing-lg);
}

.m-a-w-w p {
  margin-bottom: 0;
}

.hero-sliders img {
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-md);
  object-position: right;
}

.hero-info {
  background-color: var(--white);
  padding: var(--spacing-3xl);
  border-radius: var(--border-radius-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-2xl);
  align-items: flex-start;
}

.image-collection {
  display: flex;
  gap: var(--spacing-xl);
  flex-direction: row;
}
.our-product-main {
  background-color: var(--white);
  padding: var(--spacing-2xl) 0;
  border-radius: var(--border-radius-md);
}
.wysiwyg-main {
  background-color: var(--white);
  padding: var(--spacing-2xl) 0;
  border-radius: var(--border-radius-md);
}
.wysiwyg-main h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--background-color-gray);
  padding-bottom: var(--spacing-xl);
}
figure + h1,
figure + h2,
figure + h3,
figure + h4,
figure + h5,
figure + h6 {
  margin-top: var(--spacing-xl);
}
.download-main {
  background-color: var(--white);
  padding: var(--spacing-2xl) 0;
  border-radius: var(--border-radius-md);
}
.map-main {
  background-color: var(--white);
  padding: var(--spacing-2xl) 0;
  border-radius: var(--border-radius-md);
}
.usailighting-title-with-navigation-main {
  background-color: var(--white);
  padding: var(--spacing-2xl) 0;
  border-radius: var(--border-radius-md);
}
.usailighting-title-with-navigation-main .two-col-2 {
  display: none;
}
.section-wrap-main {
  border-radius: var(--border-radius-md);
  margin-left: auto;
  margin-right: auto;
}
.section-wrap-main .section-wrap-main-content {
  background-color: var(--white);
  padding: var(--spacing-2xl) 0;
  border-radius: var(--border-radius-md);
}
.single .section-wrap-main,
.single .section-wrap-main .section-wrap-main-content,
.single .section-wrapper .wysiwyg-main {
  padding-top: 0;
  padding-bottom: 0;
}
.single h1,
.single h2,
.single h3,
.single h4 {
  color: var(--primary-color) !important;
}
.single .section-wrapper .wysiwyg-main p:last-of-type,
.single .section-wrapper .wysiwyg-main img:last-of-type {
  margin-bottom: 0;
}
.video-two-column-main {
  background-color: var(--white);
  padding: var(--spacing-2xl) 0;
  border-radius: var(--border-radius-md);
}
.featured-cta-main {
  padding: var(--spacing-2xl) var(--spacing-2xl) 300px;
  border-radius: var(--border-radius-md);
  color: var(--white);
  position: relative;
  z-index: var(--z-index-overlay);
  background-size: cover;
  background-position: center;
}
.featured-cta-main-info {
  position: relative;
  z-index: var(--z-index-overlay);
  border-radius: var(--border-radius-md);
}
.featured-cta-main-overlay {
  content: "";
  background: linear-gradient(180deg, var(--black) 0%, rgba(0, 0, 0, 0) 95.68%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-index-base);
  border-radius: var(--border-radius-md);
}

.desc-cta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--spacing-2xl);
  margin-top: var(--spacing-3xl);
}

.our-product-items {
  display: grid;
  gap: 20px;
  margin-top: var(--spacing-2xl);
  margin-bottom: var(--spacing-sm);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.our-product-items {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.our-product-items-with-filter {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Product Card Grid - Match product-filter page design */
.our-product-items .product-card-section {
  width: 100%;
}

/* Update grid for product cards to match product-filter page */
@media (min-width: 1201px) {
  .our-product-items .product-card-section {
    /* Cards will fit in existing grid */
  }
}

@media (max-width: 1200px) {
  .our-product-items:not(.our-product-items-with-filter) {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 18px;
  }
}

@media (max-width: 768px) {
  .our-product-items .product-card-section {
    /* Responsive styles handled below */
  }
}
.our-product-items-clear .our-product-item-desc {
  border: none;
  padding: var(--spacing-md) 0 0 0;
  text-align: left;
}
.navigation-wysiwyg {
  margin-top: var(--spacing-3xl);
}
.color-choices {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  margin-bottom: 0;
}
.color-choices li {
  margin-bottom: 0 !important;
}
.color-choices img {
  width: 30px;
}
.navigation-wysiwyg h2 {
  margin-bottom: var(--spacing-xl);
}
.navigation-wysiwyg img {
  width: 100%;
  height: auto;
}
.our-product-item-desc {
  text-align: left !important;
}
.our-product-items-clear .our-product-item-img {
  margin-bottom: 0;
}
.our-product-main-wrap {
  display: flex;
  gap: 3%;
}
.our-product-filter {
  flex-shrink: 0;
  flex-grow: 0;
  width: 27%;
  margin-top: var(--spacing-2xl);
}
.our-product-filter-header {
  background-color: var(--primary-color);
  padding: var(--spacing-sm);
  border-radius: 12px 12px 0 0;
}
.our-product-filter-header h3 {
  color: var(--white);
  font-size: var(--font-size-sm);
}
.filter-item-main-wrap {
  padding: var(--spacing-sm);
  border: 1px solid var(--gray-border);
}
.filter-item li {
  border-bottom: 1px solid var(--gray-border);
  padding-bottom: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  position: relative;
  cursor: pointer;
}
.our-product-family-w-filter .our-product-items-wrap {
  flex-shrink: 0;
  flex-grow: 0;
  width: 70%;
}

.our-product-items-head {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-2xl);
}
.our-product-items-summary p {
  margin-bottom: 5px;
  font-size: var(--font-size-2xs);
}
.download-main .filter-wrap select {
  background-color: var(--background-color);
  border-radius: 8px;
  border: none;
  color: var(--text-color-gray);
  outline: none;
  background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="grey"/></svg>');
}
.download-main .filter-wrap input[type="text"] {
  background-color: var(--background-color);
  border-radius: 8px;
  border: none;
  color: var(--text-color-gray);
  outline: none;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  background: none !important;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  background: none;
  background-color: var(--primary-color) !important;
  color: var(--white) !important;
}
.ui-accordion .ui-accordion-header {
  margin-top: var(--spacing-xl) !important;
}
.ui-state-active .ui-icon,
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
  background-image: url("images/ui-icons_ffffff_256x240.png") !important;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  background: none;
  background-color: var(--primary-color) !important;
  color: var(--white) !important;
}
.download-main .filter-wrap .btn {
  border-radius: 8px;
  padding: var(--spacing-md) var(--spacing-3xl-lg);
}
.our-product-item-img img {
  height: 100%;
  margin-bottom: 0 !important;
}

/* Product Swiper Styles - Similar to configurator */
.product-swiper {
  width: 100%;
  height: 100%;
}

.product-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.product-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Swiper Pagination */
.product-swiper .swiper-pagination {
  bottom: 8px;
  z-index: 10;
}

.product-swiper .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  background-color: rgba(255, 255, 255, 0.7);
  opacity: 1;
  transition: all 0.3s ease;
  border: 0.05px solid rgba(0, 0, 0, 0.05);
}

.product-swiper .swiper-pagination-bullet-active {
  width: 7px;
  height: 7px;
  /* border-radius: 2px; */
  background-color: var(--text-color-placeholder) !important;
}

.product-swiper .swiper-pagination-bullet:hover {
  background-color: rgba(255, 255, 255, 0.9);
  transform: scale(1.2);
}

/* Prevent swiper from interfering with card click */
.product-swiper .swiper-pagination {
  pointer-events: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .product-swiper .swiper-pagination {
    bottom: 4px;
  }

  .product-swiper .swiper-pagination-bullet {
    width: 4px;
    height: 4px;
  }

  .product-swiper .swiper-pagination-bullet-active {
    width: 4px;
    height: 4px;
  }
}
.filter-item li:after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
}
.filter-results {
  display: inline-block;
  margin-right: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  border: 1px solid var(--black);
  border-radius: 8px;
  font-size: var(--font-size-2xs);
}
.filter-sub-item {
  margin-top: var(--spacing-md);
  display: none;
}
.filter-sub-item li:after {
  display: none;
}
.filter-results {
  display: inline-block;
  margin-right: var(--spacing-sm);
}
.filter-sub-item li {
  border: none;
  margin: 0;
  display: flex;
  gap: 5px;
}
.our-product-items-ai-search {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.our-product-items-ai-search.ai-list {
  display: flex;
  flex-direction: column;
}
.our-product-items-ai-search.ai-list .our-product-item-img {
  margin-bottom: 0;
  flex-basis: 30%;
}

.our-product-items-ai-search.ai-list .our-product-item-desc {
  flex-basis: 70%;
  border-radius: 0 10px 10px 0;
}
.our-product-items-ai-search .our-product-item-desc p {
  display: none;
}
.our-product-items-ai-search.ai-list .our-product-item-desc p {
  display: block;
}
.our-product-items-ai-search.ai-list .our-product-item {
  display: flex;
}
.our-product-items-ai-search .our-product-item-img img {
  height: 100%;
}
/* AI search cards: Swiper in image area (matches Our Products + configurator ProductCard). */
.our-product-items-ai-search .our-product-item-img .product-swiper.swiper {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
.our-product-items-ai-search .our-product-item-img .product-swiper .swiper-slide {
  height: auto;
}
.our-product-items-ai-search .our-product-item-img .product-swiper .product-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.our-product-items-ai-search.ai-list .our-product-item-img .product-swiper.swiper {
  border-radius: 10px 0 0 10px;
}
.our-product-items-ai-search.ai-list .our-product-item-img img {
  border-radius: 10px 0 0 10px;
}
.our-product-item-desc {
  border-radius: 0;
  color: var(--dark-blue);
  text-align: left;
  padding: var(--spacing-md) 0 0 0;
  background: transparent;
}
.our-product-items-ai-search .our-product-item-desc {
  text-align: left;
  border: 1px solid var(--gray);
  border-top: none;
  padding: var(--spacing-xl);
  height: 100%;
  min-height: 210px;
}
.product-search-wrap {
  margin-top: var(--spacing-3xl);
}
.jcarousel.product-search-wrap .our-product-item {
  padding-bottom: var(--spacing-sm);
  padding-left: 1px;
}

.jcarousel.product-search-wrap .our-product-item.product-card-section {
  width: 220px;
  max-width: 220px;
}
.jcarousel.product-search-wrap .our-product-item-desc p {
  font-size: var(--font-size-2xs);
}
.search-product-wrap {
  padding: var(--spacing-4xl) var(--spacing-3xl);
  background-color: var(--white);
  border-radius: 12px;
}
.our-product-item-desc-orange {
  color: var(--dark-blue);
  background: transparent;
  padding: var(--spacing-md) 0 0 0;
  height: auto;
}
.our-product-item-desc-orang h3 {
  color: var(--dark-blue) !important;
}

.ai-list .our-product-item-desc-orange {
  padding: var(--spacing-lg);
}
.our-product-item-desc-orange h3 {
  margin-bottom: 0;
  font-size: var(--font-size-sm);
  color: var(--dark-blue) !important;
  font-weight: var(--font-weight-normal);
}
.our-product-items-ai-search .our-product-item-desc-orange {
  font-size: var(--font-size-sm);
  height: auto;
}
.our-product-items-ai-search.ai-list .our-product-item-desc-orange {
  height: auto;
}
.our-product-items-ai-search .our-product-item-desc-orange p {
  font-size: var(--font-size-sm);
  color: var(--body-text-color);
}
strong {
  font-weight: var(--font-weight-strong);
}

.toggle p {
  display: flex;
  gap: 10px;
}
.toggle a {
  display: inline-block;
  color: var(--info-color);
  font-size: 1.6em;
  text-decoration: none;
  vertical-align: middle;
}
.toggle a.on {
  color: var(--warning-color);
}
.toggle a i.fa-bars {
  /* align icons */
  transform: translateY(-1px);
}

.our-product-item ul {
  margin: var(--spacing-sm) 0;
  font-size: var(--font-size-xs);
  margin-top: 0;
  width: auto;
}
.our-product-items-ai-search .our-product-item-desc-orange li {
  color: var(--body-text-color);
  margin-bottom: 2px;
}
.our-product-items-ai-search .our-product-item-desc-orange h3 {
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-md);
  color: var(--dark-blue) !important;
}
.our-product-items-ai-search.ai-list .our-product-item-desc-orange h3 {
  font-size: var(--font-size-lg);
}
.our-product-items-ai-search.ai-list ul {
  font-size: var(--font-size-md);
}
.search-product {
  padding-top: var(--spacing-4xl);
  padding-bottom: var(--spacing-4xl);
}
.ai-search-colors {
  flex-direction: row;
  gap: 10px;
  margin-bottom: var(--spacing-md);
}
.ai-search-colors {
  display: flex;
}
.ai-search-colors img {
  width: 30px;
}
.search-product .our-product-item-desc {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}
.page-template-template-search .search-product .our-product-item-desc {
  box-shadow: unset;
}

/* Unified search & Ask us-ai — results chrome */
.usai-jump-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  padding: 10px 0 16px;
  border-bottom: 1px solid var(--gray-border);
  margin-bottom: 8px;
}
.usai-jump-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-color-gray-lighter);
  margin-right: 12px;
}
.usai-jump-link {
  font-size: var(--font-size-2xs);
  font-weight: 500;
  color: var(--text-color-gray-lighter);
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
.usai-jump-link:hover,
.usai-jump-link.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

/* Match horizontal inset of .search-padding.search-ai-content (base rules use padding shorthand that overwrote search-padding sides). */
.usai-jump-bar.search-padding {
  padding: 10px var(--spacing-3xl) 16px;
}

.usai-ai-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  margin: 12px 0 20px;
  background: var(--background-color-gray-lighter);
  border: 1px solid var(--gray-border);
  border-radius: var(--border-radius-md);
}

/* Inset bordered banner to match horizontal alignment of .search-padding.search-ai-content below (padding on that block, margin on this one). */
.usai-ai-banner.search-padding {
  margin-left: var(--spacing-3xl);
  margin-right: var(--spacing-3xl);
  padding: 14px 16px;
}
.usai-ai-banner-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.usai-ai-banner-text {
  margin: 0 0 8px;
  font-size: var(--font-size-2xs);
  color: var(--text-color-gray-dark);
  line-height: 1.5;
}
.usai-spec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.usai-spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 24px;
  background: var(--white);
  border: 1px solid var(--gray-border);
  font-size: 12px;
}
.usai-spec-chip-remove {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-color-gray-lighter);
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}
.usai-spec-chip-remove:hover {
  color: var(--error-color);
}
.usai-btn-primary,
.usai-btn-secondary {
  margin-right: 8px;
  margin-top: 6px;
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid var(--primary-color);
}
.usai-btn-primary {
  background: var(--primary-color);
  color: var(--white);
}
.usai-btn-secondary {
  background: transparent;
  color: var(--primary-color);
}

/* Round 5 follow-up: keep the search-page Fix-it CTA brand-orange even when the
 * React configurator's bundled app.css forces .usai-btn-primary to blue with
 * !important. The id selector + !important matches that precedence. */
#usai-fix-with-usai.usai-btn-primary,
#usai-fix-with-usai.usai-btn-primary:focus {
  background-color: var(--primary-color) !important;
  border-color:     var(--primary-color) !important;
  color:            var(--white) !important;
}
#usai-fix-with-usai.usai-btn-primary:hover {
  background-color: var(--primary-color-orange-darkest) !important;
  border-color:     var(--primary-color-orange-darkest) !important;
  color:            var(--white) !important;
}

/* "From our knowledge base" section -- rendered as the LAST section of the
 * AI search results page (after #search-pages) when /ai_search/ returns
 * citations[]. Visual language mirrors the AI banner card chrome
 * (gray-lighter fill, gray border, soft radius) plus the gallery-section
 * heading + desc-cta scale used elsewhere on the search page. */
/* Outer alignment is delegated to .section-wrapper (max-width / centered /
 * --section-h-padding inset), which is what the sibling search columns
 * (#search-related-project, #search-news-insight, #search-articles,
 * #search-pages, etc.) already use. The card chrome (gray fill, border,
 * radius, inner padding) lives on the inner .usai-kb-card so the outer
 * <section> stays a clean alignment shell that matches its siblings at
 * every breakpoint. */
.usai-kb-card {
  margin: 12px 0 24px;
  padding: 18px 20px;
  background: var(--background-color-gray-lighter);
  border: 1px solid var(--gray-border);
  border-radius: var(--border-radius-md);
}
.usai-knowledge-base h2 {
  margin: 0 0 4px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-gray-dark);
}
.usai-knowledge-base .desc-cta {
  margin: 0 0 14px;
  font-size: var(--font-size-2xs);
  color: var(--text-color-gray);
}
.usai-kb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 768px) {
  .usai-kb-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.usai-kb-item {
  margin: 0;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: var(--border-radius-md);
}
.usai-kb-snippet {
  margin: 0 0 8px;
  font-size: var(--font-size-2xs);
  color: var(--text-color-gray-dark);
  line-height: 1.5;
}
.usai-kb-source {
  margin: 0;
  font-size: 11px;
  color: var(--primary-color-alt);
  font-weight: var(--font-weight-medium);
}
.usai-kb-source .usai-kb-pdf-name {
  word-break: break-word;
}
.usai-kb-source .usai-kb-page {
  color: var(--text-color-gray);
  font-weight: var(--font-weight-normal);
}

.usai-family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}
.usai-family-block {
  margin-bottom: 8px;
}
/* Search results: separate family sections like USAI AI Search Demo (.fam). */
.usai-family-block-search {
  margin-bottom: 32px;
}
.usai-family-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-color-gray, #666);
  margin: 8px 0 0;
  max-width: 52rem;
}
.usai-family-hdr-main .usai-family-desc + .usai-family-id {
  margin-top: 6px;
}
.usai-family-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.usai-family-hdr-main {
  min-width: 0;
}
.usai-family-hdr .usai-family-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}
/* Secondary line under family name (USAI AI Search Demo.html .fam-id). */
.usai-family-id {
  font-size: 12px;
  color: var(--text-color-gray-lighter, #aaa);
  margin: 3px 0 0;
  line-height: 1.35;
}
.usai-family-badge {
  flex-shrink: 0;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--primary-color);
}
.usai-pricing-tier-hint {
  font-size: 11px;
  color: var(--text-color-gray-lighter);
  margin: 8px 0 0;
}

.usai-search-nudge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin: 24px 0 0;
  border: 1px solid var(--primary-color);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  background: var(--white);
}
.usai-search-nudge:hover {
  background: var(--background-color-gray-lighter);
}
.usai-search-nudge-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.usai-search-nudge-title {
  font-weight: 600;
  margin-bottom: 4px;
}
.usai-search-nudge-sub {
  margin: 0;
  font-size: 12px;
  color: var(--text-color-gray-lighter);
}
.usai-search-nudge-arrow {
  margin-left: auto;
  color: var(--primary-color);
  font-size: 20px;
  font-weight: 600;
}

.usai-search-empty {
  padding: 80px 20px;
  text-align: center;
}
.usai-search-empty-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: 8px;
}
.usai-search-empty-hint {
  color: var(--text-color-gray-lighter);
  font-size: var(--font-size-2xs);
  max-width: 520px;
  margin: 0 auto;
}

/* Chat dock modes — top aligns with bottom of sticky header (see --mega-menu-top in mega-menu.js) */
.chat-box.dock-right-full {
  top: var(--mega-menu-top, 0px);
  right: 0;
  bottom: 0;
  left: auto;
  width: min(400px, 100vw);
  max-height: none;
  height: auto;
  border-radius: 0;
  transform: translateX(0);
}
.chat-box.dock-left-full {
  top: var(--mega-menu-top, 0px);
  left: 0;
  bottom: 0;
  right: auto;
  width: min(400px, 100vw);
  max-height: none;
  height: auto;
  border-radius: 0;
}
/* Popout: center in viewport *below* sticky header (same --mega-menu-top as dock left/right) */
.chat-box.dock-popout {
  top: calc((100vh + var(--mega-menu-top, 0px)) / 2);
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(520px, 96vw);
  max-height: min(640px, calc(100vh - var(--mega-menu-top, 0px) - 32px));
}
.chat-box.chat-visible.dock-popout {
  transform: translate(-50%, -50%);
}
.chat-dock-btn {
  background: transparent;
  border: none;
  color: var(--white);
  cursor: pointer;
  padding: 4px;
  opacity: 0.85;
  font-size: 14px;
}
.chat-dock-btn:hover {
  opacity: 1;
}
.chat-dock-btn.is-active {
  color: var(--white);
  text-decoration: underline;
}
.search-product-family {
  background-color: var(--white);
  max-width: unset;
}
.search-product-family-wrap {
  max-width: var(--max-width);
  margin: auto;
}

.our-product-item-img img {
  object-fit: cover;
  max-width: 100%;
  width: 100%;
  object-position: center;
  border-radius: var(--border-radius-md);
  display: block;
}
.our-product-item-desc p {
  margin-bottom: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
/*
  .our-product-item-desc ul{
      margin-top: var(--spacing-xl);
  }*/
.our-product-item-desc ul li {
  margin-bottom: var(--spacing-xs);
  float: none;
}
.our-product-item-desc h3 {
  font-size: var(--font-size-sm);
  margin-bottom: 0 !important;
  font-weight: var(--font-weight-normal);
  color: var(--dark-blue);
}
.usailighting-post .our-product-item-desc h3 {
  margin-bottom: 0 !important;
}
.jcarousel-control-next {
  position: absolute;
  right: 5px;
  color: var(--white);
  background-color: var(--black);
  border-radius: 50px;
  padding: var(--spacing-xs) var(--spacing-sm);
  top: 50%;
}
.jcarousel-control-prev {
  position: absolute;
  left: 5px;
  color: var(--white);
  background-color: var(--black);
  border-radius: 50px;
  padding: var(--spacing-xs) var(--spacing-sm);
  top: 50%;
}
.our-product-item {
  position: relative;
}
.our-product-items-ai-search .our-product-item {
  display: flex;
  flex-direction: column;
}
.jcarousel .our-product-item {
  width: 220px;
  margin-right: var(--spacing-md);
  max-width: 220px;
}

.jcarousel .our-product-item.product-card-section {
  width: 220px;
  max-width: 220px;
}

/* Ensure carousel cards maintain proper structure */
.jcarousel .product-card-section {
  width: 100%;
  max-width: 220px;
  height: auto;
  max-height: none;
}

.jcarousel .product-card-section .product-image {
  aspect-ratio: 1 / 1; /* Keep square in carousel */
  height: auto;
  max-height: 220px;
}

.jcarousel .product-card-section .our-product-item-img {
  aspect-ratio: 1 / 1; /* Keep square in carousel */
  height: auto;
  max-height: 220px;
}

.jcarousel .product-card-section .product-content {
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm)
    var(--spacing-md);
  max-height: none;
}

.jcarousel .product-card-section .product-title-name {
  font-size: var(--font-size-xs);
  margin-bottom: 0;
  font-weight: var(--font-weight-bold);
  color: var(--black);
}

.jcarousel .product-card-section .product-attribute {
  font-size: var(--font-size-1xs);
}

/* Narrow carousel slides: keep configurator typography; slightly tighter padding */
.jcarousel .product-card-section.usai-configurator-card .product-image,
.jcarousel .product-card-section.usai-configurator-card .our-product-item-img {
  aspect-ratio: unset !important;
  height: 220px;
  min-height: 220px;
  max-height: 220px;
  width: 100%;
}

.jcarousel .product-card-section.usai-configurator-card .product-content,
.jcarousel .product-card-section.usai-configurator-card .product-content.our-product-item-desc {
  padding: var(--spacing-md) !important;
}

.jcarousel .product-card-section.usai-configurator-card .product-title-name {
  font-size: var(--font-size-sm);
}

.jcarousel .product-card-section.usai-configurator-card .product-attribute {
  font-size: var(--font-size-2xs) !important;
  color: var(--gray) !important;
}

.our-product-item {
  display: flex;
  flex-direction: column;
}
.our-product-item a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.our-product-brochures .our-product-item a {
  position: static;
}
/* Footer grid: see css/footer.css (.site-footer-columns.footer-wrap) */

.footer-1,
.footer-2,
.footer-3,
.footer-4 {
  flex-grow: 0;
  flex-shrink: 0;
}

/* Footer Column 1 - Logo & Address */

.footer-1 img {
  max-width: 160px !important;
  width: auto !important;
  height: auto;
}
.footer-1 p {
  font-size: var(--font-size-2xs);
  color: var(--text-color-gray);
  margin-bottom: 0;
}
.footer-1 p a {
  color: var(--text-color-gray);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-1 p a:hover {
  color: var(--primary-color);
}

/* Footer Column 2 - Newsletter */
.footer-2 {
  display: flex;
  flex-direction: column;
}
.footer-2 > p:first-of-type {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-gray-dark);
  margin-bottom: var(--spacing-sm);
}
.footer-2 > p:last-of-type {
  font-size: var(--font-size-1xs);
  color: var(--text-color-gray-light);
  margin-bottom: 0;
}

/* Footer Column 3 - Navigation Menus */
.footer-3 {
  display: flex;
  gap: 60px;
}
.footer-3 .menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-3 li {
  margin-bottom: var(--spacing-xs);
}
.footer-3 li a {
  text-decoration: none;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-gray-dark);
  transition: color 0.2s ease;
}
.footer-3 li a:hover {
  color: var(--primary-color);
  text-decoration: none;
}

/* Footer Column 4 - Warranty & Social */
.footer-4 {
}
.footer-4 > p {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-strong);
  color: var(--text-color-gray-dark);
  margin-bottom: var(--spacing-xs);
}
.footer-4 > p:last-of-type {
  margin-top: var(--spacing-md);
}

/* Warranty/Certification Icons */
.footer-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.footer-images img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: contain;
}

/* Social Icons */
.footer-4 .footer-images:last-of-type {
  gap: 8px;
}
.footer-4 .footer-images:last-of-type img {
  width: 29px;
  height: 29px;
}

/* Newsletter Form */
.input-btn-wrap {
  margin-bottom: var(--spacing-md);
  display: flex;
}
.input-btn-wrap input[type="text"],
.input-btn-wrap input[type="email"] {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color-light);
  border-right: none;
  font-size: var(--font-size-1xs);
  width: 120px;
  outline: none;
  color: var(--text-color-gray);
  background-color: var(--white);
}
.input-btn-wrap input[type="text"] {
  border-radius: 4px 0 0 4px;
}
.input-btn-wrap input[type="email"] {
  border-radius: 0;
}
.input-btn-wrap input[type="text"]::placeholder,
.input-btn-wrap input[type="email"]::placeholder {
  color: var(--text-color-placeholder);
}
.footer-form-errors {
  display: none;
  font-size: var(--font-size-1xs);
  margin-bottom: var(--spacing-xs);
}
.footer-submit-btn {
  padding: var(--spacing-sm) var(--spacing-xl);
  border: none;
  background-color: var(--primary-color);
  color: var(--white);
  border-radius: 0 4px 4px 0;
  font-weight: var(--font-weight-strong);
  font-size: var(--font-size-1xs);
  cursor: pointer;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}
.footer-submit-btn:hover {
  background-color: var(--primary-color-orange-dark);
}

/* Dark mode styles for form inputs */
[data-theme="dark"] .input-btn-wrap input[type="text"],
[data-theme="dark"] .input-btn-wrap input[type="email"] {
  background-color: var(--background-color-white);
  color: var(--text-color);
  border-color: var(--border-color-light);
}

[data-theme="dark"] .input-btn-wrap input[type="text"]::placeholder,
[data-theme="dark"] .input-btn-wrap input[type="email"]::placeholder {
  color: var(--text-color-placeholder);
}

/* General email input styles for dark mode */
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="email"] {
  background-color: var(--background-color-white);
  color: var(--text-color);
  border-color: var(--border-color-light);
}

[data-theme="dark"] input[type="email"]::placeholder,
[data-theme="dark"] input[type="email"]::placeholder,
[data-theme="dark"] input[type="email"]::-webkit-input-placeholder,
[data-theme="dark"] input[type="email"]::-webkit-input-placeholder,
[data-theme="dark"] input[type="email"]::-moz-placeholder,
[data-theme="dark"] input[type="email"]::-moz-placeholder,
[data-theme="dark"] input[type="email"]:-ms-input-placeholder,
[data-theme="dark"] input[type="email"]:-ms-input-placeholder {
  color: var(--text-color-placeholder);
}

/* General email input styles for light mode (ensure good defaults) */
input[type="email"],
input[type="email"] {
  background-color: var(--white);
  color: var(--text-color);
  border-color: var(--border-color-light);
}

input[type="email"]::placeholder,
input[type="email"]::placeholder,
input[type="email"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
input[type="email"]::-moz-placeholder,
input[type="email"]::-moz-placeholder,
input[type="email"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder {
  color: var(--text-color-placeholder);
}

/* WPForms and general form field styles for dark mode */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--background-color-white);
  color: var(--text-color);
  border-color: var(--border-color-light);
}

[data-theme="dark"] input[type="text"]::placeholder,
[data-theme="dark"] input[type="text"]::placeholder,
[data-theme="dark"] input[type="tel"]::placeholder,
[data-theme="dark"] input[type="tel"]::placeholder,
[data-theme="dark"] input[type="number"]::placeholder,
[data-theme="dark"] input[type="number"]::placeholder,
[data-theme="dark"] input[type="url"]::placeholder,
[data-theme="dark"] input[type="url"]::placeholder,
[data-theme="dark"] input[type="search"]::placeholder,
[data-theme="dark"] input[type="search"]::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-color-placeholder);
}

/* Cross-browser placeholder support for dark mode */
[data-theme="dark"] input[type="text"]::-webkit-input-placeholder,
[data-theme="dark"] input[type="text"]::-webkit-input-placeholder,
[data-theme="dark"] input[type="tel"]::-webkit-input-placeholder,
[data-theme="dark"] input[type="tel"]::-webkit-input-placeholder,
[data-theme="dark"] input[type="number"]::-webkit-input-placeholder,
[data-theme="dark"] input[type="number"]::-webkit-input-placeholder,
[data-theme="dark"] input[type="url"]::-webkit-input-placeholder,
[data-theme="dark"] input[type="url"]::-webkit-input-placeholder,
[data-theme="dark"] input[type="search"]::-webkit-input-placeholder,
[data-theme="dark"] input[type="search"]::-webkit-input-placeholder,
[data-theme="dark"] textarea::-webkit-input-placeholder {
  color: var(--text-color-placeholder);
}

[data-theme="dark"] input[type="text"]::-moz-placeholder,
[data-theme="dark"] input[type="text"]::-moz-placeholder,
[data-theme="dark"] input[type="tel"]::-moz-placeholder,
[data-theme="dark"] input[type="tel"]::-moz-placeholder,
[data-theme="dark"] input[type="number"]::-moz-placeholder,
[data-theme="dark"] input[type="number"]::-moz-placeholder,
[data-theme="dark"] input[type="url"]::-moz-placeholder,
[data-theme="dark"] input[type="url"]::-moz-placeholder,
[data-theme="dark"] input[type="search"]::-moz-placeholder,
[data-theme="dark"] input[type="search"]::-moz-placeholder,
[data-theme="dark"] textarea::-moz-placeholder {
  color: var(--text-color-placeholder);
}

[data-theme="dark"] input[type="text"]:-ms-input-placeholder,
[data-theme="dark"] input[type="text"]:-ms-input-placeholder,
[data-theme="dark"] input[type="tel"]:-ms-input-placeholder,
[data-theme="dark"] input[type="tel"]:-ms-input-placeholder,
[data-theme="dark"] input[type="number"]:-ms-input-placeholder,
[data-theme="dark"] input[type="number"]:-ms-input-placeholder,
[data-theme="dark"] input[type="url"]:-ms-input-placeholder,
[data-theme="dark"] input[type="url"]:-ms-input-placeholder,
[data-theme="dark"] input[type="search"]:-ms-input-placeholder,
[data-theme="dark"] input[type="search"]:-ms-input-placeholder,
[data-theme="dark"] textarea:-ms-input-placeholder {
  color: var(--text-color-placeholder);
}

/* WPForms specific styles for dark mode */
[data-theme="dark"] .wpforms-field input[type="text"],
[data-theme="dark"] .wpforms-field input[type="text"],
[data-theme="dark"] .wpforms-field input[type="email"],
[data-theme="dark"] .wpforms-field input[type="email"],
[data-theme="dark"] .wpforms-field input[type="tel"],
[data-theme="dark"] .wpforms-field input[type="tel"],
[data-theme="dark"] .wpforms-field input[type="number"],
[data-theme="dark"] .wpforms-field input[type="number"],
[data-theme="dark"] .wpforms-field input[type="url"],
[data-theme="dark"] .wpforms-field input[type="url"],
[data-theme="dark"] .wpforms-field textarea,
[data-theme="dark"] .wpforms-field select {
  background-color: var(--background-color-white) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color-light) !important;
}

[data-theme="dark"] .wpforms-field input[type="text"]::placeholder,
[data-theme="dark"] .wpforms-field input[type="text"]::placeholder,
[data-theme="dark"] .wpforms-field input[type="email"]::placeholder,
[data-theme="dark"] .wpforms-field input[type="email"]::placeholder,
[data-theme="dark"] .wpforms-field input[type="tel"]::placeholder,
[data-theme="dark"] .wpforms-field input[type="tel"]::placeholder,
[data-theme="dark"] .wpforms-field input[type="number"]::placeholder,
[data-theme="dark"] .wpforms-field input[type="number"]::placeholder,
[data-theme="dark"] .wpforms-field input[type="url"]::placeholder,
[data-theme="dark"] .wpforms-field input[type="url"]::placeholder,
[data-theme="dark"] .wpforms-field textarea::placeholder {
  color: var(--text-color-placeholder) !important;
}

/* Cross-browser placeholder support for WPForms in dark mode */
[data-theme="dark"]
  .wpforms-field
  input[type="text"]::-webkit-input-placeholder,
[data-theme="dark"]
  .wpforms-field
  input[type="text"]::-webkit-input-placeholder,
[data-theme="dark"]
  .wpforms-field
  input[type="email"]::-webkit-input-placeholder,
[data-theme="dark"]
  .wpforms-field
  input[type="email"]::-webkit-input-placeholder,
[data-theme="dark"] .wpforms-field input[type="tel"]::-webkit-input-placeholder,
[data-theme="dark"] .wpforms-field input[type="tel"]::-webkit-input-placeholder,
[data-theme="dark"]
  .wpforms-field
  input[type="number"]::-webkit-input-placeholder,
[data-theme="dark"]
  .wpforms-field
  input[type="number"]::-webkit-input-placeholder,
[data-theme="dark"] .wpforms-field input[type="url"]::-webkit-input-placeholder,
[data-theme="dark"] .wpforms-field input[type="url"]::-webkit-input-placeholder,
[data-theme="dark"] .wpforms-field textarea::-webkit-input-placeholder {
  color: var(--text-color-placeholder) !important;
}

[data-theme="dark"] .wpforms-field input[type="text"]::-moz-placeholder,
[data-theme="dark"] .wpforms-field input[type="text"]::-moz-placeholder,
[data-theme="dark"] .wpforms-field input[type="email"]::-moz-placeholder,
[data-theme="dark"] .wpforms-field input[type="email"]::-moz-placeholder,
[data-theme="dark"] .wpforms-field input[type="tel"]::-moz-placeholder,
[data-theme="dark"] .wpforms-field input[type="tel"]::-moz-placeholder,
[data-theme="dark"] .wpforms-field input[type="number"]::-moz-placeholder,
[data-theme="dark"] .wpforms-field input[type="number"]::-moz-placeholder,
[data-theme="dark"] .wpforms-field input[type="url"]::-moz-placeholder,
[data-theme="dark"] .wpforms-field input[type="url"]::-moz-placeholder,
[data-theme="dark"] .wpforms-field textarea::-moz-placeholder {
  color: var(--text-color-placeholder) !important;
}

[data-theme="dark"] .wpforms-field input[type="text"]:-ms-input-placeholder,
[data-theme="dark"] .wpforms-field input[type="text"]:-ms-input-placeholder,
[data-theme="dark"] .wpforms-field input[type="email"]:-ms-input-placeholder,
[data-theme="dark"] .wpforms-field input[type="email"]:-ms-input-placeholder,
[data-theme="dark"] .wpforms-field input[type="tel"]:-ms-input-placeholder,
[data-theme="dark"] .wpforms-field input[type="tel"]:-ms-input-placeholder,
[data-theme="dark"] .wpforms-field input[type="number"]:-ms-input-placeholder,
[data-theme="dark"] .wpforms-field input[type="number"]:-ms-input-placeholder,
[data-theme="dark"] .wpforms-field input[type="url"]:-ms-input-placeholder,
[data-theme="dark"] .wpforms-field input[type="url"]:-ms-input-placeholder,
[data-theme="dark"] .wpforms-field textarea:-ms-input-placeholder {
  color: var(--text-color-placeholder) !important;
}

/* WPForms labels and containers for dark mode */
[data-theme="dark"] .wpforms-field-label,
[data-theme="dark"] .wpforms-field-sublabel,
[data-theme="dark"] .wpforms-field-description {
  color: var(--text-color) !important;
}

[data-theme="dark"] .wpforms-container {
  background-color: transparent;
}

[data-theme="dark"] .wpforms-form {
  background-color: transparent;
}

/* WPForms field containers */
[data-theme="dark"] .wpforms-field-container {
  background-color: transparent;
}

/* WPForms submit button styling */
#wpforms-submit-634 {
  border-radius: 20px;
  padding: var(--spacing-xs) var(--spacing-3xl);
  background: var(--primary-color);
  color: var(--white);
  border: 1px solid var(--primary-color);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-primary);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.5s ease;
  min-width: 100px;
}
#wpforms-submit-634:hover {
  background: var(--primary-color);
  color: var(--white);
  border-color: var(--primary-color);
}

/* WPForms submit button for dark mode */
[data-theme="dark"] .wpforms-submit-container button[type="submit"],
[data-theme="dark"] .wpforms-submit-container input[type="submit"],
[data-theme="dark"] .wpforms-submit-container button[type="submit"],
[data-theme="dark"] .wpforms-submit-container input[type="submit"] {
  background-color: var(--primary-color) !important;
  color: var(--white) !important;
  border-color: var(--primary-color) !important;
}

[data-theme="dark"] .wpforms-submit-container button[type="submit"]:hover,
[data-theme="dark"] .wpforms-submit-container input[type="submit"]:hover,
[data-theme="dark"] .wpforms-submit-container button[type="submit"]:hover,
[data-theme="dark"] .wpforms-submit-container input[type="submit"]:hover {
  background-color: var(--primary-color-hover) !important;
}

.input-btn-wrap input[type="button"] {
  padding: var(--spacing-sm) var(--spacing-xl);
  border: none;
  background-color: var(--primary-color);
  color: var(--white);
  border-radius: 0 4px 4px 0;
  font-weight: var(--font-weight-strong);
  font-size: var(--font-size-1xs);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.input-btn-wrap input[type="button"]:hover {
  background-color: var(--primary-color-orange-dark);
}
.font-orange {
  color: var(--primary-color) !important;
}

.font-sm {
  font-size: var(--font-size-xs) !important; /* 14px */
}
.our-product-item-img {
  margin-bottom: 0;
}
.our-product-item-desc-plain {
  border-radius: 0;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-md) 0 0 0;
}
.map-sec {
  display: flex;
  gap: 32px;
  justify-content: space-between;
}
.map-address-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex-basis: 30%;
}
.m-a-w {
  display: none;
}
.m-a-w-w {
  border-radius: 6px;
  border: 1px solid var(--gray-border-alt5);
  padding: var(--spacing-3xl);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.m-a-w-w a {
  position: absolute;
  width: 100%;
  height: 100%;
}
.usailighting-wysiwyg h2,
.usailighting-wysiwyg h1 {
  margin-bottom: var(--spacing-3xl);
}
.usailighting-download h2,
.usailighting-download h1 {
  margin-bottom: var(--spacing-3xl);
}
.usailighting-map h2,
.usailighting-map h1 {
  margin-bottom: var(--spacing-3xl);
}
.usailighting-wysiwyg h3 {
  color: var(--secondary-color);
  margin-bottom: var(--spacing-xl);
}

.usailighting-wysiwyg img {
  width: 100%;
  margin-bottom: var(--spacing-2xl);
  height: auto;
}

/* The product-files tab bar lives inside .usailighting-wysiwyg on product
   pages, so the wysiwyg img rule above forces 100% width and a large bottom
   margin onto the small tab icons. Scope an exception so the tab icons
   stay at their intrinsic size and stay vertically centered. */
.usailighting-wysiwyg .usai-coordinating-product-slide__img,
.usai-coordinating-models-carousel img {
  width: auto;
  max-width: 100%;
  height: auto;
  margin-bottom: 0;
}

.usailighting-wysiwyg .product-files-tab img,
.usailighting-wysiwyg .product-files-tab svg,
.product-files-tab img,
.product-files-tab svg {
  width: auto;
  max-width: none;
  margin-bottom: 0;
  height: auto;
}

.two-col-video video {
  width: 100%;
}
.two-wrap {
  display: flex;
  gap: 40px;
  margin-top: var(--spacing-3xl);
}
.usailighting-two-column .two-wrap {
  margin-top: 0;
}
.two-wrap-1 {
  width: 50%;
}
.two-wrap-2 {
  width: 50%;
}
.two-wrap img {
  width: 100%;
  height: auto;
}
.two-wrap-heading {
  display: flex;
  align-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--background-color-gray);
  padding-bottom: var(--spacing-xl);
}
.two-col {
  display: flex;
  justify-content: space-between;
  gap: 5%;
}
.two-col-1 {
  flex-basis: 75%;
  width: 75%;
  flex-shrink: 0;
  flex-grow: 0;
}
.two-col-2 {
  flex-basis: 20%;
  width: 20%;
  flex-shrink: 0;
  flex-grow: 0;
}
.two-column-main .two-wrap {
  gap: 60px;
  align-items: center;
}
.two-column-main .two-wrap h2 {
  color: var(--primary-color);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-xl);
}
.two-col h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-2xl);
}
.two-col h1 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-2xl);
}
.two-col .hsmall {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-light);
  margin-bottom: var(--spacing-2xl);
}
/* ── Page Tab Bar (replaces .button-group pill buttons) ── */
.usailighting-title-with-navigation-main .two-col-1 {
  flex-basis: 100%;
  width: 100%;
}
.usai-page-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0px 20px;
  border: 0 !important;
  margin-bottom: 0;
}
.usailighting-title-with-navigation-main:has(.usai-page-tabs) {
  padding-bottom: 0;
}
.usai-page-tabs__tab {
  position: relative;
  padding: 5px var(--spacing-sm) 5px 0;
  font-family: "futura-pt", var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-gray, #666);
  text-decoration: none;
  background: none;
  border: 0 !important;
  cursor: pointer;
  transition: color 0.2s ease;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.usai-page-tabs__tab:hover {
  color: var(--black, #1a1a1a);
  border: 0 !important;
}
.usai-page-tabs__tab--active {
  color: var(--primary-color-orange, #e87a2e);
  font-weight: var(--font-weight-bold);
  border: 0 !important;
}
[data-theme="dark"] .usai-page-tabs__tab {
  color: #999;
}
[data-theme="dark"] .usai-page-tabs__tab:hover {
  color: #fff;
}
[data-theme="dark"] .usai-page-tabs__tab--active {
  color: var(--primary-color-orange, #e87a2e);
}
/* ── USAI Section Blocks (news-section-v2, category-section-v2) ── */
.usai-section-block {
  padding: var(--section-h-padding) 0;
}
.usai-section-block__heading {
  font-size: var(--font-size-1lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-sm);
}
.usai-section-block__desc {
  margin-bottom: var(--spacing-md);
  color: var(--text-color-gray-darkest);
  font-size: var(--font-size-xs);
}
.usai-section-block__search {
  display: flex;
  gap: var(--spacing-sm);
  margin: var(--spacing-xl) 0;
}
.usai-section-block__search-input {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color-light);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-2xs);
  font-family: var(--font-family-primary);
}
.usai-section-block__search-btn {
  padding: var(--spacing-sm) calc(var(--spacing-xl) * 1.75);
  border-radius: var(--border-radius-full);
  border: none;
  background: var(--black);
  color: var(--white);
  cursor: pointer;
  font-family: var(--font-family-primary);
}
.usai-section-block__clear-btn {
  padding: var(--spacing-sm) var(--spacing-3xl);
  border-radius: var(--border-radius-full);
  border: 1px solid var(--black);
  background: var(--white);
  cursor: pointer;
  font-weight: var(--font-weight-strong);
  font-family: var(--font-family-primary);
}
.usai-section-block__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-xs);
}
.usai-section-block__tabs {
  display: flex;
  gap: var(--spacing-2xl);
  list-style: none;
  padding: 0;
  margin: 0;
}
.usai-section-block__tabs li {
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  padding-bottom: var(--spacing-xs);
}
.usai-section-block__meta {
  display: flex;
  align-items: center;
}
.usai-section-block__count {
  font-weight: var(--font-weight-medium);
  margin-right: var(--spacing-xl);
}
.usai-section-block__sort {
  position: relative;
  cursor: pointer;
}
.usai-section-block__sort-label {
  font-weight: var(--font-weight-medium);
}
.usai-section-block__sort-options {
  display: none;
  position: absolute;
  right: 0;
  background: var(--white);
  padding: var(--spacing-sm) 0;
  list-style: none;
  border: 1px solid var(--border-color-lighter);
  width: 120px;
  z-index: var(--z-index-overlay);
}
.usai-section-block__sort-options li {
  padding: var(--spacing-xs) calc(var(--spacing-xs) * 1.5);
  cursor: pointer;
}
.usai-section-block__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-2xl);
}
@media only screen and (max-width: 1200px) {
  .usai-section-block__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 768px) {
  .usai-section-block__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }
  .usai-section-block__toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
  .usai-section-block__search {
    flex-wrap: wrap;
  }
}
@media only screen and (max-width: 480px) {
  .usai-section-block__grid {
    grid-template-columns: 1fr;
  }
}

/* Card inside section blocks */
.usai-section-card {
  background: var(--white);
  border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
  overflow: hidden;
  box-shadow: var(--shadow-light);
  transition: all 0.3s ease;
  position: relative;
}
/* Whole-card click overlay (V2 News / Category / Carousel cards). */
.usai-section-card__link,
.usai-card__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  text-indent: -9999px;
  overflow: hidden;
}
.usai-section-card__img {
  height: 200px;
  overflow: hidden;
}
.usai-section-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.usai-section-card__body {
  padding: var(--spacing-xl);
}
.usai-section-card__category {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  color: var(--primary-color);
  text-transform: capitalize;
}
.usai-section-card__title {
  font-size: var(--font-size-sm);
  margin: 2px 0 var(--spacing-xs);
  font-weight: var(--font-weight-bold);
}
.usai-section-card__subtitle {
  font-size: var(--font-size-2xs);
  margin: 0 0 calc(var(--spacing-xs) * 0.75);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-gray-dark);
}
.usai-section-card__desc {
  font-size: var(--font-size-2xs);
  color: var(--text-color-gray);
  margin: 0;
}

/* ── Credentials box (thank-you page) ── */
.credentials-box {
  background: var(--background-color-gray-light);
  border: 1px solid var(--border-color-light);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  text-align: left;
}
.credentials-box p {
  margin: 0 0 var(--spacing-sm);
}
.credentials-box p:last-child {
  margin-bottom: 0;
}
.credentials-box .credentials-label {
  font-weight: var(--font-weight-strong);
}
.credentials-box code {
  background: var(--background-color-gray);
  padding: 4px var(--spacing-sm);
  border-radius: 4px;
  font-size: var(--font-size-2xs);
  letter-spacing: 0.5px;
  user-select: all;
}
.credentials-box .credentials-copy-btn {
  margin-left: var(--spacing-xs);
  padding: 4px var(--spacing-sm);
  font-size: var(--font-size-1xs);
  cursor: pointer;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: transparent;
  color: inherit;
}
.credentials-box .credentials-note {
  font-size: var(--font-size-1xs);
  color: var(--text-color-gray-lighter);
  margin-bottom: 0;
}

/* ── 404 page ── */
.a404-wrap {
  display: flex;
  justify-content: center;
  padding-top: var(--spacing-5xl);
  padding-bottom: var(--spacing-5xl);
  align-items: center;
  gap: var(--spacing-5xl);
}
.error404 main {
  min-height: unset;
}
.error404 .message-box {
  font-weight: var(--font-weight-light);
}
.error404 .message-box h1 {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--section-h-padding);
}
.error404 .message-box .btn {
  margin-bottom: var(--spacing-md);
}
.a404-wrap svg {
  max-width: 100%;
}
@media (max-width: 450px) {
  .a404-wrap {
    flex-direction: column-reverse;
    padding: var(--spacing-xl) var(--spacing-3xl);
    gap: var(--spacing-xl);
    text-align: center;
  }
  .error404 .message-box {
    width: 100%;
  }
}

/* ── Search page ── */
.search-product-family-heading {
  margin-top: var(--spacing-3xl);
}

/* ── Login form conditional fields ── */
.form-field-conditional {
  display: none;
  margin-top: var(--spacing-sm);
}

/* ── User profile status banner ── */
.profile-status-pending {
  background: var(--warning-color);
  color: var(--text-color);
  border: 1px solid var(--warning-color);
}

/* ── User profile config wrapper ── */
.config-manager-wrapper {
  max-width: 800px;
}

/* Legacy .button-group kept for backward compat but hidden */
.button-group {
  gap: 16px;
  display: flex;
  flex-wrap: wrap;
}
.download-wrap {
  margin-top: var(--spacing-3xl);
}
.hamburger-menu {
  display: none;
}

/*---------------------
  Mobiles Menu - Slide IN 
  ----------------------*/
.mobile-menu {
  top: 0;
  max-width: 250px;
  left: -100%;
  width: 100%;
  background: var(--background-color-gray);
  color: var(--black);
  height: 100%;
  position: fixed;
  z-index: 9997;
  overflow-y: auto;
  -webkit-transform: translate3d(0, 0, 205px);
  -moz-transform: translate3d(0, 0, 205px);
  transform: translate3d(0, 0, 205px);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

/*---------------------
  Mobiles Menu - Dropdown Submenu
  ----------------------*/
.has-children:hover {
  cursor: hand;
}

.children {
  display: none;
}

.main-menu-wrap .children li:first-child {
  margin-top: 0;
}

.icon-arrow {
  position: absolute;
  display: block;
  font-size: 0.7em;
  color: var(--black);
  top: 5px;
  right: 10px;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transition: 0.6s;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
}

.icon-arrow:after {
  content: "▼";
}

.icon-arrow.open {
  transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  transition: 0.6s;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
}

.float-container {
  position: fixed;
  bottom: 20px;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  width: auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.float-container a {
  -webkit-box-sizing: unset;
  -moz-box-sizing: unset;
  box-sizing: unset;
  z-index: 99;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 200px;
  height: 30px;
  margin-right: -190px;
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-xl);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  color: var(--white);
  border-color: var(--blue-light);
  border-radius: 5px 0 0 5px;
  background-color: var(--primary-color-orange-light);
  -webkit-box-shadow: 0 2px 4px var(--shadow-color);
  box-shadow: 0 2px 4px var(--shadow-color);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  font-family: sans-serif;
}

.float-container a:hover {
  margin-right: 0;
  background-color: var(--primary-color-orange-darker);
  -webkit-box-shadow: 0 2px 4px var(--shadow-color);
  box-shadow: 0 2px 4px var(--shadow-color);
  color: var(--white);
  text-decoration: none;
}

/* Icon settings - remove if not needed*/
.float-container .icon:before {
  font-family: "Font Awesome 5 Free";
  margin-right: var(--spacing-2xl);
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.icon.one:before {
  content: "\f073";
}

.icon.two:before {
  content: "\f086";
}

.icon.three:before {
  content: "\f1d8";
}

.modal.fade.in .lab-modal-body {
  bottom: 0;
  opacity: 1;
}

.lab-modal-body h1 {
  font-size: var(--font-size-3xl);
}

.lab-modal-body p {
  margin: 0 0 1.62rem 0;
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-md);
  color: var(--text-color-gray);
}

.lab-modal-body {
  position: relative;
  bottom: -250px;
  margin: 150px auto 0;
  padding: var(--spacing-3xl-lg);
  max-width: 60%;
  height: auto;
  background-color: rgb(248, 250, 247);
  border: 1px solid var(--gray-border-alt4);
  opacity: 0;
  -webkit-transition:
    opacity 0.3s ease-out,
    bottom 0.3s ease-out;
  -moz-transition:
    opacity 0.3s ease-out,
    bottom 0.3s ease-out;
  -o-transition:
    opacity 0.3s ease-out,
    bottom 0.3s ease-out;
  transition:
    opacity 0.3s ease-out,
    bottom 0.3s ease-out;
}

.close {
  margin-top: calc(-1 * var(--spacing-xl));
  margin-right: calc(-1 * var(--spacing-xl));
  text-shadow: 0 1px 0 var(--white);
}

.popup-button {
  margin-top: var(--spacing-4xl);
}

/* FAB — matches USAI AI Search Demo.html .fab (Ask / us-ai label) */
#chat-circle.usai-chat-fab {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  font-family: inherit;
}
#chat-circle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-color);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(224, 104, 32, 0.4);
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
  opacity: 1;
  visibility: visible;
  z-index: 9998;
}
#chat-circle .usai-chat-fab-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  color: #fff;
  pointer-events: none;
}
#chat-circle .usai-chat-fab-line {
  display: block;
}
#chat-circle:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(224, 104, 32, 0.45);
}
#chat-circle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
#chat-circle.chat-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.8);
}

.btn#my-btn {
  background: var(--white);
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-radius: 45px;
  padding-right: var(--spacing-3xl-lg);
  padding-left: var(--spacing-3xl-lg);
  color: var(--blue-text);
}
.desc-cta-cont {
  flex-grow: 0;
  flex-shrink: 0;
  width: 100%;
}
.desc-cta-cont h2,
.desc-cta-cont h3 {
  margin: var(--spacing-3xl-lg) 0 var(--spacing-xl);
}
.chat-box {
  display: block;
  background: var(--white);
  position: fixed;
  right: 30px;
  bottom: 50px;
  width: 400px;
  max-width: 85vw;
  max-height: 120vh;
  border-radius: var(--border-radius-md);
  z-index: 9999;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease;
}
.chat-box.chat-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Ask us-ai panel — chat layout + interior */
/* Keep position: fixed from .chat-box; do NOT use relative here or the panel drops out of the viewport corner. */
.chat-box.chatbot {
  --usai-chat-accent: var(--primary-color, #e06820);
  --usai-chat-header: #121212;
  --usai-chat-surface: #faf9f7;
  --usai-chat-ai-bubble: #ffffff;
  position: fixed;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-primary, "Helvetica Neue", Helvetica, Arial, sans-serif);
  max-height: min(580px, calc(100vh - 96px));
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.04),
    0 20px 50px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.chat-box.chatbot .chat-box-header.cb-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(180deg, #1e1e1e 0%, var(--usai-chat-header) 100%);
  color: #fff;
  padding: 14px 16px;
  flex-shrink: 0;
  border-radius: 18px 18px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* Draggable panel: drag from header (not the action buttons) */
.chat-box.chatbot:not(.dock-right-full):not(.dock-left-full) .cb-hdr {
  cursor: grab;
}
.chat-box.chatbot:not(.dock-right-full):not(.dock-left-full) .cb-hdr .cb-hdr-actions {
  cursor: default;
}
.chat-box.chatbot:not(.dock-right-full):not(.dock-left-full) .cb-hdr .cb-hdr-actions button {
  cursor: pointer;
}
.chat-box.chatbot:not(.dock-right-full):not(.dock-left-full).cb-dragging,
.chat-box.chatbot:not(.dock-right-full):not(.dock-left-full).cb-dragging.chat-visible {
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease !important;
}
.chat-box.chatbot:not(.dock-right-full):not(.dock-left-full).cb-dragging {
  box-shadow:
    0 8px 12px rgba(0, 0, 0, 0.12),
    0 24px 56px rgba(0, 0, 0, 0.18);
}
body.usai-chat-dragging {
  user-select: none;
  -webkit-user-select: none;
}
.chat-box.chatbot.dock-right-full .chat-box-header.cb-hdr,
.chat-box.chatbot.dock-left-full .chat-box-header.cb-hdr {
  border-radius: 0;
}
.chat-box.chatbot .cb-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  flex-wrap: wrap;
  line-height: 1.2;
}
.chat-box.chatbot .cb-title span {
  display: inline;
  color: var(--usai-chat-accent);
  font-style: italic;
  font-weight: 600;
}
.chat-box.chatbot .cb-hdr-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px;
  align-items: center;
}
.chat-box.chatbot .cb-dock-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.chat-box.chatbot .cb-hdr-btn {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  font-size: 13px;
  transition: all 0.15s ease;
}
.chat-box.chatbot .cb-hdr-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.chat-box.chatbot .cb-hdr-btn:hover {
  background: #333;
  color: #ccc;
}
.chat-box.chatbot .cb-hdr-btn:active {
  transform: scale(0.96);
}
.chat-box.chatbot .chat-dock-btn.cb-hdr-btn.is-active {
  color: var(--usai-chat-accent);
  background: rgba(224, 104, 32, 0.12);
}
.chat-box.chatbot .cb-hdr-divider {
  width: 1px;
  height: 16px;
  background: #444;
  margin: 0 4px;
  display: inline-block;
  flex-shrink: 0;
}
.chat-box.chatbot .cb-hdr-close {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: inherit;
}
.chat-box.chatbot .chat-clear-btn {
  color: #666;
}
.chat-box.chatbot .chat-clear-btn:hover {
  color: #ccc;
  opacity: 1;
}
.chat-box.chatbot .chat-clear-btn .dashicons {
  font-size: 14px;
  width: 14px;
  height: 14px;
}
.chat-box.chatbot .chat-box-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--usai-chat-surface);
}
.chat-box.chatbot:not(.dock-right-full):not(.dock-left-full):not(.dock-popout) .chat-logs.cb-body {
  height: 400px;
  max-height: min(400px, 52vh);
  flex: none;
}
.chat-box.chatbot.dock-right-full .chat-logs.cb-body,
.chat-box.chatbot.dock-left-full .chat-logs.cb-body {
  flex: 1;
  height: auto;
  min-height: 0;
  max-height: none;
}
.chat-box.chatbot.dock-popout .chat-logs.cb-body {
  height: min(440px, 52vh);
  max-height: min(440px, 52vh);
  flex: none;
}
.chat-box.chatbot .chat-logs.cb-body {
  background:
    linear-gradient(180deg, rgba(250, 249, 247, 0.97) 0%, rgba(240, 236, 229, 0.55) 100%),
    var(--usai-chat-surface);
  padding: 16px 14px 20px;
  box-sizing: border-box;
  scroll-behavior: smooth;
}
.chat-box.chatbot .cb-input-area {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
  flex-shrink: 0;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.04);
}
.chat-box.chatbot .cb-input-form {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 0;
  position: relative;
  width: 100%;
  min-width: 0;
}
.chat-box.chatbot .cb-input-form #chat-input,
.chat-box.chatbot .cb-input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 22px;
  padding: 11px 16px;
  font-size: 14px;
  line-height: 1.35;
  background: #f7f7f6;
  color: var(--text-color, #1a1a1a);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}
.chat-box.chatbot .cb-input-form #chat-input::placeholder,
.chat-box.chatbot .cb-input::placeholder {
  color: rgba(0, 0, 0, 0.38);
}
.chat-box.chatbot .cb-input-form #chat-input:focus,
.chat-box.chatbot .cb-input:focus {
  outline: none;
  border-color: var(--usai-chat-accent) !important;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(224, 104, 32, 0.15);
}
.chat-box.chatbot .chat-submit.cb-send,
.chat-box.chatbot .cb-send {
  position: static;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--usai-chat-accent);
  color: #fff;
  font-size: 0;
  font-weight: 600;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition:
    background 0.15s ease,
    transform 0.12s ease,
    box-shadow 0.15s ease;
}
.chat-box.chatbot .cb-send .dashicons {
  font-size: 22px;
  width: 22px;
  height: 22px;
  line-height: 1;
}
.chat-box.chatbot .cb-send:hover {
  background: var(--secondary-color, #c9571a);
  transform: scale(1.04);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.chat-box.chatbot .cb-send:active {
  transform: scale(0.98);
}
.chat-box.chatbot .cb-msg {
  clear: both;
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
  max-width: 92%;
  overflow: visible;
}
.chat-box.chatbot .cb-msg.cb-ai {
  margin-right: auto;
  align-items: flex-start;
}
.chat-box.chatbot .cb-msg.cb-ai.cb-search-seed .cb-bubble {
  border-left: 3px solid var(--usai-chat-accent);
  padding-left: 13px;
}

/* Search → chat: summary, spec chips, horizontal product cards (demo-aligned) */
.chat-box.chatbot .cb-bubble .cb-search-context-rich {
  margin: 0;
}
.chat-box.chatbot .cb-bubble .cb-search-query {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-color, #1a1a1a);
}
.chat-box.chatbot .cb-bubble .cb-search-query strong {
  font-weight: 600;
  color: var(--usai-chat-accent, #e06820);
}
.chat-box.chatbot .cb-bubble .cb-search-summary {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: #3d3a36;
}
.chat-box.chatbot .cb-bubble .cb-search-followup {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #1a1a1a;
}
.chat-box.chatbot .cb-bubble .cb-search-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.chat-box.chatbot .cb-bubble .cb-search-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-color, #1a1a1a);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  line-height: 1.3;
}
.chat-box.chatbot .cb-bubble .cb-search-cards-label {
  margin: 4px 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8680;
}
.chat-box.chatbot .cb-bubble .cb-seed-cards-scroll {
  margin: 0 -4px 4px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.chat-box.chatbot .cb-bubble .cb-seed-cards {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 4px 4px 8px;
  min-width: min-content;
}
.chat-box.chatbot .cb-bubble .cb-seed-card {
  flex: 0 0 auto;
  width: 148px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}
.chat-box.chatbot .cb-bubble .cb-seed-card:hover {
  border-color: var(--usai-chat-accent, #e06820);
  box-shadow: 0 4px 14px rgba(224, 104, 32, 0.12);
  transform: translateY(-1px);
}
.chat-box.chatbot .cb-bubble .cb-seed-card-img {
  height: 88px;
  background: linear-gradient(180deg, #f5f4f1 0%, #ebe8e2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.chat-box.chatbot .cb-bubble .cb-seed-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.chat-box.chatbot .cb-bubble .cb-seed-card-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #c5c0b8;
}
.chat-box.chatbot .cb-bubble .cb-seed-card-body {
  padding: 10px 10px 11px;
}
.chat-box.chatbot .cb-bubble .cb-seed-card-name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: #1a1a1a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
  min-height: 2.7em;
}
.chat-box.chatbot .cb-bubble .cb-seed-card-tier {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--usai-chat-accent, #e06820);
  margin-bottom: 6px;
}
.chat-box.chatbot .cb-bubble .cb-seed-card-specs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-box.chatbot .cb-bubble .cb-seed-card-spec {
  font-size: 10px;
  line-height: 1.35;
  color: #7a756d;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Search-context / history bubbles: structured layout inside .cb-bubble */
.chat-box.chatbot .cb-bubble .cb-bubble-hint {
  margin: 0 0 10px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.45;
  color: #6a6560;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  border-left: 3px solid var(--usai-chat-accent, #e06820);
}
.chat-box.chatbot .cb-bubble .cb-context-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px 10px;
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 13px;
  line-height: 1.45;
}
.chat-box.chatbot .cb-bubble .cb-context-row:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.chat-box.chatbot .cb-bubble .cb-context-k {
  display: block;
  font-weight: 600;
  color: #1a1a1a;
}
.chat-box.chatbot .cb-bubble .cb-context-v {
  display: block;
  color: #444;
  word-break: break-word;
}
.chat-box.chatbot .cb-bubble .cb-bubble-p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #1a1a1a;
}
.chat-box.chatbot .cb-bubble .cb-bubble-p:last-child {
  margin-bottom: 0;
}
.chat-box.chatbot .cb-msg.cb-human {
  margin-left: auto;
  margin-right: 0;
  align-items: flex-end;
}
.chat-box.chatbot .cb-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8680;
  margin-bottom: 5px;
}
.chat-box.chatbot .cb-msg.cb-human .cb-label {
  text-align: right;
  color: #a69f96;
}
.chat-box.chatbot .cb-bubble {
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
  float: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  white-space: normal;
}
.chat-box.chatbot .cb-msg.cb-ai .cb-bubble {
  background: var(--usai-chat-ai-bubble);
  color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border-bottom-left-radius: 4px;
}
.chat-box.chatbot .cb-msg.cb-human .cb-bubble {
  background: linear-gradient(145deg, var(--usai-chat-accent) 0%, #c75a18 100%);
  color: #fff;
  margin-left: auto;
  border: none;
  box-shadow: 0 2px 10px rgba(224, 104, 32, 0.35);
  border-bottom-right-radius: 4px;
}
.chat-box.chatbot .cb-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.chat-box.chatbot .cb-opt {
  font-size: 13px;
  padding: 8px 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  color: #1a1a1a;
  font-family: inherit;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}
.chat-box.chatbot .cb-opt:hover:not(.disabled) {
  background: #fff8f3;
  border-color: var(--usai-chat-accent);
  color: var(--usai-chat-accent);
  box-shadow: 0 1px 4px rgba(224, 104, 32, 0.12);
}
.chat-box.chatbot .cb-opt.selected {
  background: var(--usai-chat-accent);
  color: #fff;
  border-color: var(--usai-chat-accent);
}
.chat-box.chatbot .cb-opt.disabled {
  pointer-events: none;
  opacity: 0.35;
}
.chat-box.chatbot.dock-popout {
  max-height: min(680px, calc(100vh - var(--mega-menu-top, 0px) - 32px));
  width: min(480px, 96vw);
}
.chat-box.chatbot.dock-right-full,
.chat-box.chatbot.dock-left-full {
  max-height: none;
  border-radius: 0;
}
.chat-box.chatbot .chat-clear-popover {
  top: 54px;
  right: 12px;
  z-index: 40;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
  padding: 14px 16px;
}
.chat-box.chatbot .chat-box-toggle.cb-hdr-btn {
  float: none;
}

.chat-box-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-clear-popover {
  position: absolute;
  top: 56px;
  right: 20px;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--white);
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 10;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}
.chat-clear-popover.chat-clear-popover-visible {
  opacity: 1;
  visibility: visible;
}
.chat-clear-popover-text {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-2xs);
  color: var(--text-color);
  font-weight: var(--font-weight-medium);
}
.chat-clear-popover-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.chat-clear-popover-actions button {
  padding: 6px var(--spacing-md);
  font-size: var(--font-size-1xs);
  font-weight: var(--font-weight-strong);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
  border: none;
}
.chat-clear-confirm-yes {
  background: var(--primary-color);
  color: var(--white);
}
.chat-clear-confirm-yes:hover {
  opacity: 0.9;
}
.chat-clear-confirm-no {
  background: var(--background-color-gray-lighter);
  color: var(--text-color-gray-dark);
}
.chat-clear-confirm-no:hover {
  background: var(--gray-light);
}
.chat-clear-btn {
  background: transparent;
  border: none;
  color: var(--white);
  cursor: pointer;
  padding: 4px;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-clear-btn:hover {
  opacity: 1;
}
.chat-clear-btn .dashicons {
  font-size: var(--font-size-xs);
  width: 16px;
  height: 16px;
}
.chat-box-toggle {
  float: right;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
.chat-box-toggle:hover {
  opacity: 1;
}
.chat-box-header {
  background: var(--primary-color);
  border-radius: 0;
  color: var(--white);
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-strong);
  padding: var(--spacing-md) var(--spacing-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chat-box-header span {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-box-body {
  position: relative;
  height: auto;
  background: var(--background-color);
  border: none;
  overflow: hidden;
}
.chat-box-body:after {
  display: none;
}
#chat-input {
  background: var(--white);
  width: 100%;
  position: relative;
  padding: var(--spacing-md) var(--spacing-4xl) var(--spacing-md)
    var(--spacing-md);
  border: none;
  resize: none;
  outline: none;
  border-top: 1px solid var(--gray-light);
  color: var(--text-color);
  border-radius: 0 !important;
  overflow: hidden;
  box-sizing: border-box;
  font-size: var(--font-size-2xs);
}
#chat-input:focus {
  border-top-color: var(--primary-color);
}
.chat-auto-rec {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  margin-top: var(--spacing-md);
}
.ai-recommendations-container {
  clear: both;
  padding: var(--spacing-sm) var(--spacing-md);
  margin: var(--spacing-xs) 0;
  background: transparent;
  width: 100%;
}
.ai-recommendations-container .ai-s-card {
  margin: var(--spacing-sm) 0;
}
.ai-s-card {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  border: none;
  border-radius: var(--border-radius-sm);
  position: relative;
  height: 80px;
  margin: var(--spacing-sm) 0;
  overflow: hidden;
  width: 100%;
  background-color: var(--white);
  transition: box-shadow 0.2s ease;
  box-shadow: 0 0 13px rgba(0, 0, 0, 0.15);
}
.ai-s-card:hover {
  box-shadow: 0 0 13px rgba(0, 0, 0, 0.15);
}
.ai-s-card a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
.ai-s-card-1 {
  width: 50%;
  flex-grow: 0;
  flex-shrink: 0;
  height: 100%;
  min-height: 80px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.ai-s-card-1 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm);
}
.ai-s-card-1 .product-image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--background-color-gray-lighter) 0%,
    var(--gray-light) 100%
  );
  color: var(--text-color-placeholder);
  border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm);
}
.ai-s-card-1 .product-image-placeholder svg {
  width: 30%;
  height: auto;
  opacity: 0.6;
}
.ai-s-card-1 .product-image-placeholder .placeholder-text {
  font-size: var(--font-size-1xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-placeholder);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ai-s-card-2 {
  width: 50%;
  flex-grow: 0;
  flex-shrink: 0;
  padding-right: 1rem;
}
.chat-input > form {
  margin-bottom: 0;
}
#chat-input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: var(--gray);
}
#chat-input::-moz-placeholder {
  /* Firefox 19+ */
  color: var(--gray);
}
#chat-input:-ms-input-placeholder {
  /* IE 10+ */
  color: var(--gray);
}
#chat-input:-moz-placeholder {
  /* Firefox 18- */
  color: var(--gray);
}
.chat-submit {
  position: absolute;
  bottom: 8px;
  right: 10px;
  background: var(--primary-color);
  box-shadow: none;
  border: none;
  border-radius: 50%;
  color: var(--white);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.chat-submit:hover {
  background: var(--secondary-color);
  transform: scale(1.05);
}
.chat-logs {
  padding: var(--spacing-md);
  height: 400px;
  overflow-y: auto;
  background: var(--background-color);
}

.chat-logs::-webkit-scrollbar-track {
  background-color: var(--background-color-gray-lightest);
  border-radius: 4px;
}

.chat-logs::-webkit-scrollbar {
  width: 6px;
  background-color: transparent;
}

.chat-logs::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 4px;
}
.chat-logs::-webkit-scrollbar-thumb:hover {
  background-color: var(--secondary-color);
}

@media only screen and (max-width: 500px) {
  .chat-logs {
    height: 50vh;
    max-height: 350px;
  }
  .chat-box.chatbot:not(.dock-right-full):not(.dock-left-full):not(.dock-popout) .chat-logs.cb-body {
    height: 50vh;
    max-height: 350px;
  }
}

.chat-msg.user > .msg-avatar span {
  height: 36px;
  border-radius: 50%;
  float: left;

  display: block;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.chat-msg.self > .msg-avatar span {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 36px;
  border-radius: 50%;
  float: right;
}
.cm-msg-text {
  background: var(--white);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--text-color);
  max-width: 80%;
  float: left;
  margin-left: var(--spacing-sm);
  position: relative;
  margin-bottom: var(--spacing-xs);
  margin-top: var(--spacing-xs);
  border-radius: 16px 16px 16px 4px;
  word-break: break-word;
  white-space: pre-line;
  font-size: var(--font-size-2xs);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.breadcrumbs-wrap {
  background-color: var(--white);
}
.yoast-breadcrumbs {
  padding: var(--spacing-xl) var(--spacing-3xl-lg);
  color: var(--text-color-gray);
  font-size: var(--font-size-1xs);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  max-width: var(--max-width);
  margin: 0 auto;
}
.yoast-breadcrumbs a {
  text-decoration: none;
  color: var(--text-color-gray);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-1xs);
}
.yoast-breadcrumbs a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}
.yoast-breadcrumbs span.breadcrumb_last {
  color: var(--primary-color);
}

.chat-msg {
  clear: both;
  overflow: hidden;
}

/* Relevant Questions Chips */
.relevant-questions-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--spacing-sm) 0;
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
  clear: both;
  width: 100%;
}

.relevant-question-chip {
  display: inline-block;
  padding: 6px var(--spacing-sm);
  background-color: var(--background-color-gray-lighter);
  border: 1px solid var(--gray-border-alt2);
  border-radius: 20px;
  font-size: var(--font-size-2xs);
  color: var(--text-color-gray-dark);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-family: inherit;
}

.relevant-question-chip:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.relevant-question-chip:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.chat-msg.self > .cm-msg-text {
  float: right;
  margin-right: var(--spacing-sm);
  margin-left: 0;
  background: var(--primary-color);
  color: var(--white);
  border-radius: 16px 16px 4px 16px;
}
.cm-msg-button > ul > li {
  list-style: none;
  float: left;
  width: 50%;
}
.cm-msg-button {
  clear: both;
  margin-bottom: var(--spacing-4xl);
}

.loader {
  text-align: center;
}
.loader span {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background: var(--black);
  border-radius: 20px;
  animation: loader 0.8s infinite alternate;
}
.loader span:nth-of-type(2) {
  animation-delay: 0.2s;
}
.loader span:nth-of-type(3) {
  animation-delay: 0.6s;
}
.tier-wrap-top-heading {
  margin-bottom: var(--spacing-3xl);
}
.tier-wrap-top-heading h2 {
  margin-bottom: var(--spacing-2xl);
}
.tier-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing-2xl);
}
.tier-wrap-heading {
  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
  padding: var(--spacing-2xl);
  color: var(--white);
}
.border-rad {
  display: inline-block;
  border: 1px solid var(--white);
  border-radius: var(--border-radius-full);
  width: 20px;
  height: 20px;
  text-align: center;
  position: relative;
  top: -3px;
}
.tier-wrap-heading-text h3 {
  display: inline-block;
  margin-right: 5px;
  font-size: var(--font-size-lg);
}
.tier-wrap-heading-text p {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-md);
}
.tier-wrap-heading-text a {
  background-color: rgba(0, 0, 0, 0.1);
  padding: var(--spacing-md);
  color: var(--white);
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  margin-top: var(--spacing-md);
  display: inline-block;
  font-size: var(--font-size-xs);
}
.tier-wrap-content {
  padding: var(--spacing-2xl);
  border: 1px solid var(--gray);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}
.tier-wrap-desc .hl {
  font-size: var(--font-size-lg);
}
.tier-wrap-desc p {
  margin-bottom: 0;
}
.tier-wrap-desc ul {
  margin-top: var(--spacing-2xl);
}
.tier-wrap-desc ul li {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}
.tier-wrap-more-info {
  margin-top: var(--spacing-3xl);
  border-top: 1px solid var(--gray);
  padding-top: var(--spacing-3xl);
}
.tier-wrap-more-info h4 {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
}
.tier-wrap-more-info h5 {
  margin-top: 0;
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
}
.tier-wrap-more-info li {
  margin-bottom: var(--spacing-sm);
}
.tier-wrap-poe {
  margin-top: var(--spacing-3xl);
  border-top: 1px solid var(--gray);
  padding-top: var(--spacing-3xl);
}
.tier-wrap-poe h3 {
  margin-bottom: var(--spacing-xl);
  font-size: var(--font-size-lg);
  text-decoration: underline;
}
@keyframes loader {
  0% {
    opacity: 0.9;
    transform: scale(0.5);
  }
  100% {
    opacity: 0.1;
    transform: scale(1);
  }
}

.usailighting-awards .our-product-item-desc-orange h3 {
  color: var(--dark-blue);
  margin-bottom: 0;
}

.usailighting-awards .our-product-item-img {
  border: none;
  border-radius: 0;
  padding: 0;
}

.usailighting-awards .our-product-item-img img {
  margin-bottom: 0;
}

.header {
  background-color: var(--dark-blue);
  display: flex;
  align-items: center;
}

.nav {
  width: 100%;
}

.main-menu-wrap {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  text-align: center;
  gap: 0 !important;
}
.main-menu-wrap ul {
  min-width: 150px;
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: -999em;
  left: -999em;
}
.main-menu-wrap li {
  display: inline-block;
  position: relative;
  text-align: left;
}

.main-menu-wrap li li {
  display: block;
}
.main-menu-wrap li li.focus > ul,
.main-menu-wrap li li:hover > ul {
  left: 100%;
  top: 0;
}
.main-menu-wrap a {
  text-decoration: none;
  display: block;
  white-space: nowrap;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--black);
  font-size: var(--font-size-sm);
}

.main-menu-wrap .main-menu-wrap-item-has-children > a::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-top-color: currentColor;
}
.main-menu-wrap ul .main-menu-wrap-item-has-children > a::before {
  right: 2px;
  border-top-color: transparent;
  border-left-color: currentColor;
}
.main-menu-wrap .sub-menu {
  flex-direction: column;
  gap: 0;
  background-color: var(--white);
  border: var(--gray-border-alt5) solid 1px;
  border-top: var(--primary-color) solid 4px;
}
.main-menu-wrap .sub-menu li:not(:last-child) {
  border-bottom: 1px solid var(--gray);
}
.pagination-wrap {
  margin-top: var(--spacing-3xl);
  display: none;
}
.our-product-family-w-filter .pagination-wrap {
  display: block;
}
#pagination {
  margin: 0;
  padding: 0;
  text-align: center;
}
#pagination li {
  display: inline;
}
#pagination li a {
  display: inline-block;
  text-decoration: none;
  padding: 5px var(--spacing-sm);
  color: var(--black);
  border-radius: 5px;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

#pagination li a.active {
  background-color: var(--primary-color);
  color: var(--white);
}
#pagination li a:hover:not(.active) {
  background-color: var(--border-color-lighter);
}
.menu-item-has-children a:not(.sub-menu a):after {
  padding-left: 4px;
  content: " ▾";
}
.three-sliders {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing-2xl);
  img {
    width: 100%;
    height: auto;
  }
}
.three-sliders.product-showcase .three-sliders-item {
  border: 1px solid var(--gray);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-3xl);
}
.three-sliders.product-showcase ul {
  padding: var(--spacing-md);
}
.three-sliders.product-showcase ul li {
  margin-bottom: var(--spacing-sm);
  display: flex;
}
.three-sliders.product-showcase ul li p {
  margin-bottom: 0;
}
.three-sliders.product-showcase ul li img {
  margin-right: var(--spacing-sm);
}
.three-sliders.product-showcase h3,
.three-sliders.product-showcase h4,
.three-sliders.product-showcase h5 {
  margin: var(--spacing-2xl) 0 var(--spacing-md);
}
.flexible-row {
  grid-template-columns: repeat(
    auto-fit,
    minmax(100px, 1fr)
  ); /* Example columns */
  grid-template-rows: 1fr; /* Defines a single row that takes up available space */
}

.three-sliders-heading {
  margin-bottom: var(--spacing-xl);
}
.three-sliders-img {
  margin-bottom: var(--spacing-xl);
}
.three-sliders-img img {
  width: 100%;
  object-fit: cover;
  height: 250px;
}
/* Media queries */
@media screen and (max-width: 440px) {
  .float-container .icon:last-child {
    display: none;
  }
  .float-container {
    position: fixed;
    top: auto;
    bottom: 0;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;

    width: 100%;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: auto;
    -webkit-box-align: auto;
    -ms-flex-align: auto;
    align-items: auto;
  }
  .float-container a.icon {
    right: 0;
    bottom: 0;

    width: 100%;
    margin-right: 0;
    margin-bottom: 0;
    padding: 5px;

    border-radius: 0;
    -webkit-box-shadow: 0 0 0 var(--shadow-color);
    box-shadow: 0 0 0 var(--shadow-color);
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-left: 1px solid var(--primary-color-orange);
    border-right: 1px solid var(--primary-color-orange);
  }
}
@media only screen and (min-width: 1301px) {
  .main-menu-wrap li.focus > ul,
  .main-menu-wrap li:hover > ul {
    top: auto;
    left: auto;
    z-index: 100;
  }
}
@media only screen and (max-width: 1300px) {
  .main-menu-wrap li:not(.sub-menu li) {
    padding: var(--spacing-2xl) var(--spacing-xl);
    border-bottom: 1px solid var(--gray);
  }
  .main-menu-wrap {
    display: none;
    flex-direction: column;
    padding: var(--spacing-xl);
  }
  .hamburger-menu {
    display: block;
    top: 0;
    right: 0;
    height: 43px;
    cursor: pointer;
    z-index: 9998;
  }

  .main-menu-wrap li > ul {
    display: none;
    width: 100%;
    position: static;
    margin-top: var(--spacing-xl);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }

  .bar,
  .bar:after,
  .bar:before {
    width: 30px;
    height: 3px;
  }
  .bar {
    position: relative;
    transform: translateY(10px);
    background: var(--black);
    transition: all 0ms 300ms;
  }
  .bar.animate {
    background: rgba(255, 255, 255, 0);
  }

  .bar:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 10px;
    background: var(--black);
    transition:
      bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
      transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .bar:after {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    background: var(--black);
    transition:
      top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
      transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .bar.animate:after {
    top: 0;
    transform: rotate(45deg);
    transition:
      top 300ms cubic-bezier(0.23, 1, 0.32, 1),
      transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .bar.animate:before {
    bottom: 0;
    transform: rotate(-45deg);
    transition:
      bottom 300ms cubic-bezier(0.23, 1, 0.32, 1),
      transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .body-fixed {
    overflow: hidden !important;
  }
  .main-menu-wrap {
    display: none;
    position: fixed;
    left: 0px;
    top: 70px;
    background-color: var(--white);
    height: 100%;
    width: 100%;
    flex-direction: column !important;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
    z-index: 2;
  }
  .main-menu-wrap a {
    padding: 0;
    color: var(--black);
    font-size: var(--font-size-sm2);
  }
  .main-menu-wrap.active {
    display: flex !important;
    padding: 0;
  }
  .main-menu-wrap ul {
    flex-direction: column;
    gap: 0;
  }
  .main-menu-wrap ul li {
    padding: var(--spacing-2xl) var(--spacing-xl);
  }
  .main-menu-wrap ul li a {
    font-size: var(--font-size-sm2);
  }
  /* Round 5 (Issue 6): footer-wrap responsiveness moved to dedicated
     standard breakpoints (1024px / 768px) further below. */
  .map-sec {
    flex-direction: column;
    overflow: hidden;
  }
}
@media only screen and (max-width: 900px) {
  .hero {
    flex-direction: column-reverse;
  }
  .our-product-items {
    display: flex;
    flex-direction: column;
  }
}

/* Footer responsiveness: css/footer.css (Issue #11 / #23) */

@media only screen and (max-width: 768px) {
  .section-wrapper {
    margin: var(--spacing-xl) var(--spacing-md);
    padding: 0;
  }
  .wysiwyg-main,
  .our-product-main,
  .usailighting-title-with-navigation-main,
  .wysiwyg-download,
  .map-main,
  .video-two-column-main {
    padding: var(--spacing-2xl) 0;
  }
}
@media only screen and (max-width: 600px) {
  .three-sliders {
    grid-template-columns: 1fr;
  }
  .chat-logs {
    height: 350px;
  }
  .header-left {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }
  .header-wrap {
    align-items: flex-start;
  }
  #chat-circle {
    bottom: 20px;
    right: 20px;
  }
  .chat-box {
    right: 15px;
    bottom: 20px;
    width: 350px;
    max-width: calc(100vw - 30px);
  }

  .map-address-wrap {
    flex-basis: 100%;
  }
  .filter-wrap {
    flex-direction: column;
  }
  #mapcontainer {
    display: none !important;
  }
  .two-col {
    flex-direction: column;
  }

  .two-wrap {
    flex-direction: column;
    gap: 30px;
  }
  .two-wrap-1 {
    width: 100%;
  }
  .two-wrap-2 {
    width: 100%;
  }
  .wysiwyg-main {
    padding: var(--spacing-2xl) 0;
  }
  .wysiwyg-download {
    padding: var(--spacing-2xl) 0;
  }
  .map-main {
    padding: var(--spacing-2xl) 0;
  }
  .video-two-column-main {
    padding: var(--spacing-2xl) 0;
  }
  h1,
  h2 {
    font-size: calc(var(--base-font-size) * 3.25); /* 26px */
  }

  .header-wrap {
    padding: var(--spacing-xl);
  }
  .section-wrapper {
    margin: var(--spacing-xl) var(--spacing-md);
    padding: 0;
  }

  .hero-info {
    padding: var(--spacing-xl);
  }
  .section-wrap-main .section-wrap-main-content {
    padding: var(--spacing-2xl) 0;
  }
  .desc-cta {
    flex-direction: column;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-3xl);
    align-items: flex-start;
  }
  .desc-cta p {
    max-width: 100%;
  }
  .our-product-main {
    padding: var(--spacing-2xl) 0;
  }

  .featured-cta-main {
    padding: var(--spacing-xl);
  }
}
@media only screen and (max-width: 1300px) {
  .our-product-items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .our-product-items.our-product-items-with-filter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 1000px) {
  .our-product-family .our-product-items {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Fallback for other cases */
  .our-product-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tablet portrait (600px - 900px): 2 columns */
@media only screen and (max-width: 900px) {
  .our-product-family .our-product-items:not(.our-product-items-with-filter) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    display: grid;
  }

  /* Fallback for other cases */
  .our-product-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }
}

/* Mobile (below 600px): 1 column */
@media only screen and (max-width: 600px) {
  .our-product-family .our-product-items:not(.our-product-items-with-filter) {
    grid-template-columns: 1fr !important;
    display: grid;
  }

  /* Fallback for other cases - 1 column */
  .our-product-items {
    grid-template-columns: 1fr !important;
    display: grid;
  }
  /* Round 5 (Issue 6): .footer-wrap / .footer-3 responsive rules moved
     to the dedicated 1023px / 767px media queries above. */
  .input-btn-wrap input[type="text"],
  .input-btn-wrap input[type="email"] {
    width: auto;
    flex: 1;
  }
  .desc-cta-cont {
    width: 100%;
  }
}

@media only screen and (max-width: 500px) {
  .our-product-items {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    display: grid;
  }
}

@media only screen and (max-width: 950px) {
  .tier-wrap {
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (max-width: 768px) {
  #mega-menu-wrap-main-menu
    .mega-menu-toggle.mega-menu-open
    + #mega-menu-main-menu {
    position: absolute !important;
  }
  #mega-menu-wrap-main-menu .mega-menu-toggle .mega-toggle-blocks-right {
    background-color: var(--white) !important;
  }
  #mega-menu-wrap-main-menu
    .mega-menu-toggle
    .mega-toggle-block-0
    .mega-toggle-animated-inner,
  #mega-menu-wrap-main-menu
    .mega-menu-toggle
    .mega-toggle-block-0
    .mega-toggle-animated-inner::before,
  #mega-menu-wrap-main-menu
    .mega-menu-toggle
    .mega-toggle-block-0
    .mega-toggle-animated-inner::after {
    background-color: var(--primary-color-alt) !important;
  }
  .two-col {
    flex-direction: column;
    gap: 30px;
  }
  .two-col-2 {
    flex-basis: 100%;
    width: 100%;
  }
  .two-col-1 {
    flex-basis: 100%;
    width: 100%;
  }
  .tier-wrap {
    grid-template-columns: 1fr;
  }
}

.footer-images img {
  width: 33px !important;
}
.our-product-item-desc {
  border: none;
}
.our-product-item-img img {
  width: 100%;
}

.modula-gallery {
  margin-bottom: var(--spacing-xl);
}
.image_items {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}
.our-product-item {
  border: none;
  border-radius: var(--border-radius-md);
  overflow: hidden;
}
.page-id-3504 .three-sliders.def {
  width: 50%;
}
.wysiwyg-main b {
  font-weight: var(--font-weight-strong);
}
.page-id-3504 .three-sliders-item {
  border: 1px solid var(--border-color-light);
  padding: var(--spacing-xl);
}
section#post-template-block_b919d8e5a3c18b91b4bc3ca0d363a12d
  .our-product-item-img
  img {
  width: 100%;
  height: auto;
}
.page-id-669 .our-product-item-desc h3 {
  font-size: var(--font-size-ssm);
}
.our-product-item-desc {
  border: none !important;
}
.usaicls {
  display: flex;
  flex-direction: column;
  margin: 0 64px;
}
.usaicls table tr th {
  background: var(--gray-dark);
  color: var(--white);
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md);
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.2px;
  border-bottom: 1px solid var(--gray-lighter);
}
.usaicls table tr td {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--black);
  vertical-align: middle;
  border-right: 1px solid var(--gray-border-alt3);
  border-left: 1px solid var(--gray-border-alt3);
}
.usaicls a {
  color: var(--primary-color-alt);
  text-decoration: none;
}
.usaicls a:hover {
  text-decoration: underline;
}
.page.page-id-3505 .usaicls a {
  color: var(--white);
}
.page-id-3520 .usaicls a {
  color: var(--white);
}
@media only screen and (max-width: 767px) {
  .usailighting-title-with-navigation-main {
    padding: var(--spacing-2xl) 0;
  }
  .page-id-669 .our-product-items-clear .our-product-item-desc {
    height: auto !important;
  }
  .our-product-items {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  .two-col p img {
    margin-bottom: 0;
  }
  .desc-cta {
    display: none;
  }
  .our-product-item.newitems {
    word-wrap: break-word;
  }
  .two-col p img {
    width: 100% !important;
  }
  .our-product-item-desc-orange {
    height: auto;
  }
  .two-col-1,
  .two-col-2 {
    width: 100% !important;
    flex-basis: 100% !important;
  }
  p {
    word-wrap: break-word;
  }
  .usai-page-tabs__tab {
    padding: 5px var(--spacing-sm) 5px 0;
    font-size: var(--font-size-sm);
    letter-spacing: 0.2px;
  }
  .button-group {
    flex-wrap: nowrap !important;
    overflow: scroll !important;
    padding-bottom: var(--spacing-md) !important;
  }
  .our-product-item-img img {
    width: 100% !important;
  }
  .button-group a {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
  }
  .two-col {
    gap: 25px !important;
  }
  .two-col-1 h1 {
    font-size: var(--font-size-ssm);
  }
  #menu-main-menu .menu-item-has-children > a::before {
    right: 40px;
  }
  .menu ul li a {
    font-size: var(--font-size-xs);
  }
  #menu-main-menu li.focus > ul,
  #menu-main-menu li:hover > ul {
    left: 0;
    width: 100%;
  }

  #menu-main-menu .sub-menu li {
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
    margin-top: var(--spacing-sm);
    border-bottom: 1px solid var(--gray-lightest);
  }
}

#mega-menu-wrap-main-menu {
  background-color: transparent !important;
}
#mega-menu-wrap-main-menu
  #mega-menu-main-menu
  > li.mega-menu-item
  > a.mega-menu-link {
  color: var(--black) !important;
}
div#carousel {
  display: flex;
  gap: 17px;
  overflow-x: hidden;
}
.card__caption a {
  color: var(--black) !important;
}

@media screen and (min-device-width: 768px) and (max-device-width: 1200px) {
  .our-product-items-clear .our-product-item-desc {
    height: 270px;
  }
  .page-id-669 .our-product-items-clear .our-product-item-desc {
    height: 170px !important;
  }
  .page-id-663 .our-product-items-clear .our-product-item-desc {
    height: 280px !important;
  }
  p {
    word-wrap: break-word;
  }
  .three-sliders-heading h3 {
    height: 50px;
  }
  .our-product-item-desc-plain {
    height: 80px;
  }
  .our-product-items.our-product-items-clear:first-child,
  .our-product-items:first-child {
    margin-top: 0;
  }
}
@media only screen and (min-width: 769px) {
  #mega-menu-wrap-main-menu
    #mega-menu-main-menu
    > li.mega-menu-item
    > a.mega-menu-link {
    background-color: transparent !important;
  }
  #mega-menu-wrap-main-menu
    #mega-menu-main-menu
    > li.mega-menu-item
    > a.mega-menu-link:hover,
  #mega-menu-wrap-main-menu
    #mega-menu-main-menu
    > li.mega-menu-item
    > a.mega-menu-link:focus {
    color: var(--primary-color) !important;
    background-color: transparent !important;
  }
}

.usailighting-wysiwyg img,
.two-wrap-2 img {
  max-width: 100%;
}

body .usailighting-wysiwyg footer img {
  width: 33px !important;
}
.usailighting-wysiwyg footer .footer-1 img {
  width: auto !important;
  max-width: 160px !important;
}

@media screen and (min-device-width: 1500px) and (max-device-width: 1920px) {
  .page-id-669 .our-product-items-clear .our-product-item-desc {
    height: 120px;
  }
}

@media only screen and (max-width: 1300px) {
  .main-menu-wrap.active {
    overflow-y: scroll;
  }
}
/* custom css */
.resource-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.resource-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
  color: var(--text-color-gray-darkest);
}

.resource-list i {
  color: var(--text-color-gray-medium);
  font-size: var(--font-size-2xs);
}

.resource-list a {
  text-decoration: none;
  color: var(--text-color-gray-darker);
  font-weight: var(--font-weight-strong);
}

.resource-list a:hover {
  color: var(--black);
}
/* Product detail block — full-width section strip; text/carousel blocks stay in constrained main */
.section-wrapper.usailighting-product-detail {
  overflow-x: clip;
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.usailighting-product-detail-main {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: var(--spacing-3xl) auto;
  padding-left: 0;
  padding-right: 0;
  overflow-x: clip;
  max-width: min(1400px, 100%);
  box-sizing: border-box;
}

/* Issue #8–9: breakout hero / swatch imagery to viewport width */
.product-detail-fullbleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
  box-sizing: border-box;
}

.product-detail-fullbleed .product-detail-one-column img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 0 !important;
}

/* Swatch set — two-column layout (Features / Finishes comp) */
.usai-product-swatch-set {
  width: 100%;
}

.usai-swatch-set__grid {
  display: grid;
  grid-template-columns: minmax(0, 70%) minmax(0, 30%);
  gap: var(--spacing-4xl);
  align-items: center;
}

.product-detail-swatch-main-wrap,
.usai-swatch-set__media {
  width: 100%;
}

.product-detail-swatch-main-wrap.usai-swatch-set__media {
  aspect-ratio: 2.11;
  overflow: hidden;
  border-radius: var(--border-radius-sm);
}

.product-detail-swatch-main-wrap .product-detail-swatch-main,
.usai-swatch-set__media .swatch-main {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

.usai-swatch-set__heading {
  margin: 0 0 var(--spacing-md);
  font-family: var(--font-family-heading, "futura-pt-bold", sans-serif);
  font-size: var(--font-size-md, 1.5rem);
  font-weight: 600;
  color: var(--text-color, #1a1a1a);
}

.usai-swatch-set__description {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-2xs, 0.875rem);
  line-height: 1.5;
  color: var(--text-color, #1a1a1a);
}

.usai-swatch-set__label-line {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-size-2xs, 0.875rem);
  line-height: 1.5;
}

.usai-swatch-set__thumbs,
.swatch-thumbs.usai-swatch-set__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  justify-content: flex-start;
}

.swatch-thumb {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: var(--white);
  box-sizing: border-box;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.swatch-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.swatch-thumb.is-selected {
  zoom: 110%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  border-color: var(--primary-color, #c41230);
}

@media (max-width: 900px) {
  .usai-swatch-set__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
}

/* Coordinating Products — product page rail (parent .usailighting-wysiwyg has 5xl padding). */
.usai-coordinating-models-carousel {
  margin: var(--spacing-3xl) 0 0;
  padding: 0;
  max-width: none;
  box-sizing: border-box;
}

.usailighting-wysiwyg > .usai-coordinating-models-carousel {
  margin: var(--spacing-3xl) 0 0;
  padding: 0;
  max-width: none;
}

.usai-coordinating-models-carousel .product-top-row.usai-coordinating-models__heading-row {
  max-width: none;
  margin: 0 0 var(--spacing-xs);
  padding: 0;
}

/* Generic product-swiper centers each slide; keep coordinating images flush left. */
.usai-coordinating-models-carousel .products-swiper .swiper-slide {
  justify-content: flex-start;
  align-items: stretch;
}

.usai-coordinating-models-carousel .products-swiper .swiper-slide img.usai-coordinating-product-slide__img {
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

.usai-coordinating-models__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
  color: var(--text-color-secondary);
  margin: 0;
}

/* .usailighting-wysiwyg h2 sets margin-bottom: 3xl — reset for this label only. */
.usailighting-wysiwyg .usai-coordinating-models-carousel .usai-coordinating-models__title {
  margin: 0;
}

/* Dedicated wrappers — avoid legacy .product-carousel-wrapper / .our-product-items padding. */
.usai-coordinating-models-carousel .usai-coordinating-models__carousel,
.usai-coordinating-models-carousel .usai-coordinating-models__swiper-wrap {
  position: relative;
  margin: 0;
  padding: 0;
  max-width: none;
}

.usai-coordinating-models-carousel .usai-coordinating-swiper {
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.usai-coordinating-models-carousel .usai-coordinating-swiper .swiper-pagination {
  display: none;
}
.usai-coordinating-models-carousel .usai-coordinating-swiper .swiper-wrapper {
  align-items: stretch;
}

.usai-coordinating-models-carousel .usai-coordinating-swiper .swiper-slide {
  height: auto;
  box-sizing: border-box;
  display: flex;
}

/* Minimal coordinating slide: image + name only (no full product card). */
.usai-coordinating-product-slide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
}

.usai-coordinating-product-slide__media {
  display: block;
  width: 100%;
  line-height: 0;
  text-decoration: none;
}

.usai-coordinating-product-slide__img {
  width: 100%;
  max-width: 100%;
  height: 150px;
  margin: 0;
  object-fit: contain;
  object-position: left center;
  display: block;
  border-radius: var(--border-radius-sm);
}

.usai-coordinating-product-slide__name {
  margin: var(--spacing-xs) 0 0;
  padding: 0;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-normal);
  color: var(--text-color-secondary);
  line-height: 1.35;
  text-align: left;
  width: 100%;
}
.usai-coordinating-product-slide__name a {
  color: inherit;
  text-decoration: none;
}
.usai-coordinating-product-slide__name a:hover {
  color: var(--primary-color);
}

.usai-coordinating-models-carousel .products-swiper .products-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.usai-coordinating-models-carousel .products-swiper .products-nav-btn:hover {
  opacity: 0.85;
  transform: translateY(-50%) scale(1.06);
}
/* CTA circle-arrow SVG — theme tokens (light/dark via [data-theme="dark"]) */
.usai-cta-circle-arrow-svg circle {
  fill: var(--background-color-white);
}
.usai-cta-circle-arrow-svg path {
  stroke: var(--black);
}

.usai-coordinating-models-carousel .products-swiper .products-nav-btn .usai-cta-circle-arrow-svg {
  width: 28px;
  height: 28px;
  display: block;
  flex-shrink: 0;
}

.usai-coordinating-models-carousel .products-swiper .products-nav-btn .usai-cta-circle-arrow-svg circle {
  fill: var(--background-color-white);
}

.usai-coordinating-models-carousel .products-swiper .products-nav-btn .usai-cta-circle-arrow-svg path {
  stroke: var(--black);
}
.usai-coordinating-models-carousel .products-swiper .products-nav-prev {
  left: 16px;
  right: auto;
}
.usai-coordinating-models-carousel .products-swiper .products-nav-next {
  right: 16px;
  left: auto;
}

[data-theme='dark'] .usai-coordinating-models-carousel .products-swiper .products-nav-btn {
  background-color: var(--card-bg, #2a2a2a);
  color: var(--text-color, #fff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
/* Match the Swatch Set treatment: 70/30 grid, short image, centered copy. */
.product-detail-two-column {
  display: grid;
  grid-template-columns: minmax(0, 70%) minmax(0, 30%);
  gap: var(--spacing-4xl);
  align-items: center;
}
/* Swap layout: image on the right, text on the left (keeps 70/30 widths). */
.product-detail-two-column--image-right {
  grid-template-columns: minmax(0, 30%) minmax(0, 70%);
}
.product-detail-two-column--image-right .product-detail-two-column-content {
  order: 1;
}
.product-detail-two-column--image-right .product-detail-two-column-img {
  order: 2;
}
/* Image presents at the shorter Swatch Set height (866x410 ≈ 2.11:1). */
.product-detail-two-column-img {
  width: 100%;
  aspect-ratio: 866 / 410;
  overflow: hidden;
  border-radius: var(--border-radius-sm);
}
.product-detail-two-column-img img {
  margin-bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}
.product-detail-two-column-content {
  width: 100%;
  padding: 0;
  color: var(--text-color, #1a1a1a);
}
/* Apply the Swatch Set font treatment to the Two Column copy. */
.product-detail-two-column-content h1,
.product-detail-two-column-content h2,
.product-detail-two-column-content h3,
.product-detail-two-column-content h4,
.product-detail-two-column-content h5,
.product-detail-two-column-content h6 {
  margin: 0 0 var(--spacing-md);
  font-family: var(--font-family-heading, "futura-pt", sans-serif);
  font-size: var(--font-size-md, 24px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-color, #1a1a1a);
}
.product-detail-two-column-content p,
.product-detail-two-column-content li {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-2xs, 14px);
  line-height: 1.5;
  color: var(--text-color, #1a1a1a);
}
.product-detail-two-column-content > :last-child {
  margin-bottom: 0;
}
/* Stack the Two Column layout at the same breakpoint as the swatch. Placed
   after the base rule above so it wins the cascade when the query matches. */
@media (max-width: 900px) {
  .product-detail-two-column,
  .product-detail-two-column--image-right {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
  .product-detail-two-column--image-right .product-detail-two-column-img {
    order: 1;
  }
  .product-detail-two-column--image-right .product-detail-two-column-content {
    order: 2;
  }
}

body .usailighting-product-detail-main .product-detail-one-column:not(.product-detail-fullbleed) img,
body .usailighting-product-detail-main .usai-pd-rail-image img {
  margin-bottom: 0;
  border-radius: var(--border-radius-sm);
  width: 100% !important;
}

/* Product detail ACF: Swiper carousels (match discover-slider nav + progress) */
.usailighting-product-detail .product-detail-swiper-root {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.usailighting-product-detail .product-detail-swiper-wrap {
  position: relative;
}

.usailighting-product-detail .product-detail-swiper.swiper {
  overflow: hidden;
  padding-bottom: var(--spacing-sm);
}

.usailighting-product-detail .product-detail-swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.usailighting-product-detail .product-detail-swiper .swiper-slide {
  height: auto;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 285px;
}

.usailighting-product-detail .product-detail-slide-card {
  min-width: 0;
  width: 100%;
  height: 100%;
}

.usailighting-product-detail .product-detail-slide-img,
.usailighting-product-detail .usai-gallery-slide__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-sm);
}

.usailighting-product-detail .product-detail-slide-img img,
.usailighting-product-detail .usai-gallery-slide__media > img {
  width: 100%;
  height: 270px;
  object-fit: cover;
  border-radius: var(--border-radius-sm);
  display: block;
}

.usailighting-product-detail
  .product-detail-slide-card--brochure
  .product-detail-slide-img
  img {
  border-radius: 15px;
  height: 256px;
}

.usailighting-product-detail .product-detail-swiper-wrap .nav-btn {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--white);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  font-size: 22px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.usailighting-product-detail .product-detail-swiper-wrap .nav-btn.prev {
  left: -20px;
}

.usailighting-product-detail .product-detail-swiper-wrap .nav-btn.next {
  right: -20px;
}

.usailighting-product-detail .product-detail-swiper-wrap .nav-btn.swiper-button-disabled {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Arrow glyph size: match home discover-slider (usai-gallery-slider-v2.php) — no fixed img dimensions */
.usailighting-product-detail .product-detail-swiper-wrap .nav-btn img {
  max-width: 20px;
  width: auto;
  height: auto;
  display: block;
  flex-shrink: 0;
  margin: 0;
  object-fit: contain;
}

.usailighting-product-detail .product-detail-swiper-wrap .nav-btn:hover {
  background: var(--primary-color);
}

.usailighting-product-detail .product-detail-swiper-wrap .nav-btn:hover img {
  filter: invert(1);
}

.usailighting-product-detail .product-detail-swiper-root .slider-progress {
  width: 100%;
  height: 2px;
  background: var(--background-color-gray-light);
  position: relative;
  overflow: hidden;
}

.usailighting-product-detail .product-detail-swiper-root .slider-progress span {
  display: block;
  height: 100%;
  width: 10%;
  min-width: 10%;
  background: var(--black);
  transition: width 0.2s ease;
}

.usailighting-product-detail .product-detail-swiper-wrap .pd-swiper-prev,
.usailighting-product-detail .product-detail-swiper-wrap .pd-swiper-next {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.usailighting-product-detail .product-detail-swiper-wrap:hover .pd-swiper-prev,
.usailighting-product-detail .product-detail-swiper-wrap:hover .pd-swiper-next {
  opacity: 1;
  pointer-events: auto;
}

/* Gallery slide caption-on-hover (product detail + discover slider) */
.usai-gallery-slide__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.usai-gallery-slide__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--spacing-lg) var(--spacing-xl);
  color: var(--white);
  z-index: 2;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  pointer-events: none;
}

.usai-gallery-slide__caption-title {
  font-family: var(--font-family-heading, "futura-pt-bold", sans-serif);
  font-size: var(--font-size-lg, 1.25rem);
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}

.usai-gallery-slide__caption-body {
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.45;
  opacity: 0.95;
}

.usai-gallery-slide__arrow {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 1.25rem;
  z-index: 3;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.discover-card.is-hover .usai-gallery-slide__overlay,
.product-detail-slide-card.is-hover .usai-gallery-slide__overlay {
  opacity: 1;
}

.discover-card.is-hover .usai-gallery-slide__caption,
.product-detail-slide-card.is-hover .usai-gallery-slide__caption {
  transform: translateY(0);
}

.discover-card.is-hover .usai-gallery-slide__arrow,
.product-detail-slide-card.is-hover .usai-gallery-slide__arrow {
  opacity: 1;
  transform: translateY(0);
}

.discover-slider--caption-hover .discover-image-wrapper,
.product-detail-swiper-root--caption-hover .usai-gallery-slide__media {
  border-radius: var(--border-radius-sm);
}

.discover-slider--caption-hover .discover-image-wrapper img {
  border-radius: var(--border-radius-sm);
}

/* Product page content rail + unified image radius */
body.usai-product-page .wp-block-image img {
  border-radius: var(--border-radius-sm);
}

body.usai-product-page .usai-project-gallery-hero-v2 {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  height: auto !important;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

body.usai-product-page .usai-project-gallery-hero-v2:not(.usai-project-gallery-hero-v2--two-slides) .hero-slider-wrapper,
body.usai-product-page .usai-project-gallery-hero-v2:not(.usai-project-gallery-hero-v2--two-slides) .project-gallery-hero-swiper,
body.usai-product-page .usai-project-gallery-hero-v2:not(.usai-project-gallery-hero-v2--two-slides) .shero-slide {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  max-height: none;
}

body.usai-product-page .usai-project-gallery-hero-v2--two-slides .hero-slider-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  max-height: none;
  overflow: visible;
}

body.usai-product-page .usai-project-gallery-hero-v2--two-slides .project-gallery-hero-swiper.swiper {
  overflow: visible;
  touch-action: pan-x pan-y;
}

body.usai-product-page .usai-project-gallery-hero-v2--two-slides .project-gallery-hero-swiper .swiper-slide {
  aspect-ratio: 16 / 9;
  height: auto;
}

body.usai-product-page .usai-project-gallery-hero-v2--two-slides .shero-slide,
body.usai-product-page .usai-project-gallery-hero-v2--two-slides .shero-slide__cover-link {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

body.usai-product-page .usai-project-gallery-hero-v2 .hero-slider-wrapper,
body.usai-product-page .usai-project-gallery-hero-v2 .project-gallery-hero-swiper {
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

body.usai-product-page .usai-project-gallery-hero-v2 .project-gallery-hero-swiper.swiper,
body.usai-product-page .usai-project-gallery-hero-v2 .project-gallery-hero-swiper .swiper-wrapper,
body.usai-product-page .usai-project-gallery-hero-v2 .project-gallery-hero-swiper .swiper-slide {
  height: auto;
}

body.usai-product-page .usai-project-gallery-hero-v2 .shero-slide {
  position: relative;
  overflow: hidden;
}

body.usai-product-page .usai-project-gallery-hero-v2 .shero-slide .hero-cta {
  position: absolute;
  bottom: var(--spacing-3xl);
  right: var(--spacing-3xl);
  z-index: 2;
}

/* CTA arrow is decoupled from the caption text: keep it vertically centered on
   the slide with the same right offset as the product-page .hero-cta. */
body.usai-product-page .usai-project-gallery-hero-v2 .shero-slide .cta-arrow-circle {
  right: var(--spacing-3xl);
}

body.usai-product-page .usai-project-gallery-hero-v2 .shero-slide img,
body.usai-product-page .usai-project-gallery-hero-v2 .shero-slide__cover-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-sm);
}

body.usai-product-page .usai-project-gallery-hero-v2 .shero-slide__cover-link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

body.usai-product-page .section-wrapper.usailighting-wysiwyg {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-5xl);
  padding-right: var(--spacing-5xl);
  box-sizing: border-box;
}

.our-product-brochures .our-product-item-img {
  margin-bottom: 0;
}
.our-product-brochures .our-product-item-img img {
  height: 320px;
  border-radius: 15px;
  object-fit: cover;
}

.our-product-brochures h2 {
  margin-bottom: var(--spacing-lg);
}

/* Search: jump links hidden until their content section renders an inline display:inline-block */
.page-template-template-search #search-related-project-trigger,
.page-template-template-search #search-news-insights-trigger,
.page-template-template-search #search-articles-trigger,
.page-template-template-search #search-brochures-trigger,
.page-template-template-search #search-pages-trigger {
  display: none;
}

.page-template-template-search .usai-brochure-pdf-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: #e04040;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.page-template-template-search .usai-search-brochure-slide-title {
  margin: 10px 4px 0;
  font-size: var(--font-size-2xs);
  color: var(--text-color-gray-lighter);
  text-align: center;
  line-height: 1.35;
}

@media (max-width: 768px) {
  .usailighting-product-detail .product-detail-swiper .swiper-slide {
    width: 220px;
  }
  .usailighting-product-detail .product-detail-slide-img img {
    height: 220px !important;
  }
  .usailighting-product-detail .product-detail-swiper-wrap .nav-btn.next {
    right: -10px;
  }
  .usailighting-product-detail .product-detail-swiper-wrap .nav-btn.prev {
    left: -10px !important;
  }
}

@media screen and (min-device-width: 768px) and (max-device-width: 1100px) {
  .usailighting-product-detail .product-detail-swiper-wrap .nav-btn.prev {
    left: 0 !important;
  }
}
.our-product-items1 {
  margin-top: var(--spacing-lg);
}
.search-summary-trigger {
  display: none;
}
@media only screen and (max-width: 769px) {
  .usailighting-product-detail-main {
    flex-direction: column;
    gap: 30px;
  }
  .product-detail-two-column-img {
    width: 100%;
  }
  .product-detail-two-column-content {
    width: 100%;
    padding: var(--spacing-xl) 0 0;
  }
  /* Full-bleed 100vw caused horizontal scroll inside padded section-wrapper */
  .section-wrapper.usailighting-product-detail .product-detail-one-column {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0;
    box-sizing: border-box;
    border-radius: 0;
  }
  .section-wrapper.usailighting-product-detail .product-detail-one-column img {
    border-radius: 0;
  }
}

/* usai-single-gallery-slider-v2*/

.usai-single-gallery-slider,
.usai-single-gallery-slider .swiper-slide {
  width: 100%;
  height: 100vh;
}

.usai-single-gallery-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gallery page – white background for section wrapper */
.gallery-main-section.section-wrapper {
  background-color: var(--white);
  padding-bottom: var(--spacing-3xl);
}

/* Gallery page: remove extra breadcrumb padding so it aligns with content below */
.gallery-main-section .breadcrumbs-wrap .yoast-breadcrumbs.product-breadcrumb {
  padding-left: 0;
  padding-right: 0;
}

/* Gallery search (single field, no label) */
.gallery-main-section .gallery-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.gallery-main-section .gallery-search-row .filter-group-search {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  width: 100%;
  max-width: 720px;
}

/*
 * Gallery search row — input + Search + Clear share typography and pill height.
 * --font-size-xs (16px); min-height scales with font; extra vertical padding vs header filter pill.
 */
.gallery-main-section .gallery-search-row .gallery-search-input,
.gallery-main-section .gallery-search-row .gallery-search-btn,
.gallery-main-section .gallery-search-row .gallery-search-clear-btn {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  font-family: "futura-pt", var(--font-family-primary, sans-serif);
  line-height: 1.5;
  border-radius: 30px;
  box-sizing: border-box;
  min-height: calc(10px + 1.5 * var(--font-size-xs));
  padding: 5px var(--spacing-2xl);
}

.gallery-main-section .gallery-search-row .gallery-search-input {
  flex: 1;
  min-width: 160px;
  margin: 0;
  background: var(--background-color-white);
  color: var(--text-color);
  border: 1px solid var(--text-color-gray);
  -webkit-appearance: none;
  appearance: none;
}
.gallery-main-section .gallery-search-row .gallery-search-input::placeholder {
  font-family: "futura-pt", var(--font-family-primary, sans-serif);
  color: var(--text-color-gray);
  opacity: 1;
}
.gallery-main-section .gallery-search-row .gallery-search-input:focus {
  outline: 2px solid var(--text-color-gray-darkest);
  outline-offset: 2px;
}
.gallery-main-section .gallery-search-row .gallery-search-input:-webkit-autofill,
.gallery-main-section .gallery-search-row .gallery-search-input:-webkit-autofill:hover,
.gallery-main-section .gallery-search-row .gallery-search-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-color);
  box-shadow: 0 0 0 1000px var(--background-color-white) inset;
  transition: background-color 9999s ease-out;
}

.gallery-main-section .gallery-search-row .gallery-search-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  background: var(--primary-color-alt);
  color: var(--white) !important;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none !important;
  transition: opacity 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.gallery-main-section .gallery-search-row .gallery-search-btn:hover {
  background: var(--primary-color-alt);
  color: var(--white) !important;
  opacity: 0.92;
}

.gallery-main-section .gallery-search-row .gallery-search-clear-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  background: var(--background-color-white);
  color: var(--text-color) !important;
  border: 1px solid var(--text-color-gray);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.gallery-main-section .gallery-search-row .gallery-search-clear-btn:hover {
  background: var(--background-color-gray-alt, #f0f0f0);
  color: var(--text-color) !important;
  border-color: var(--text-color-gray-dark);
  opacity: 1;
}

.gallery-main-section .gallery-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.gallery-main-section .gallery-filters .filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.gallery-main-section .gallery-filters .filter-group label {
  white-space: nowrap;
}
.gallery-main-section .gallery-filters .filter-group select {
  min-width: 180px;
}

/* Dark mode: gallery filter select carets – light gray so they are visible on dark background */
[data-theme="dark"]
  .gallery-main-section
  .gallery-filters
  .filter-group
  select {
  background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="%23B8B8B8"/></svg>');
}

/* ================================================================
     Gallery Tab Filters – matches news-about-usai-lighting tab style
     ================================================================ */

/* "Filter By:" label */
.gallery-main-section .gallery-filter-by-label {
  font-size: var(--font-size-1xs);
  font-weight: var(--font-weight-normal);
  color: var(--text-color-gray-darkest);
  font-family: "futura-pt", sans-serif;
  margin: 0 0 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Tab wrapper: positioned relative for the dropdown */
.gallery-main-section .gallery-tab-wrapper {
  position: relative;
  margin-bottom: 1rem;
}

/* Tab bar – flush with .gallery-filter-by-label (no negative margin) */
.gallery-main-section .gallery-filter-tabs {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-left: 0;
}

/* Individual tab */
.gallery-main-section .gallery-filter-tab {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-color-gray-medium);
  font-weight: var(--font-weight-normal);
  font-family: "futura-pt", sans-serif;
  font-size: var(--font-size-sm);
  letter-spacing: 0.2px;
  padding: var(--spacing-xs) var(--spacing-md);
  transition:
    color 0.15s,
    background 0.15s;
  border-radius: 6px 6px 0 0;
}

/* First tab: keep horizontal padding; negative margin aligns label with “Filter By:” */
.gallery-main-section .gallery-filter-tabs > .gallery-filter-tab:first-of-type {
  padding-left: var(--spacing-md);
  margin-left: calc(-1 * var(--spacing-md));
}
.gallery-main-section .gallery-filter-tab:hover,
.gallery-main-section .gallery-filter-tab.active {
  color: var(--primary-color-alt);
  background: var(--background-color-gray-alt, #f0f0f0);
}

/* Result count next to tabs */
/* Results count + Sort By – right-aligned in the tab bar */
.gallery-main-section .gallery-filter-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: "futura-pt", sans-serif;
  /* Match Sort By toggle text (button otherwise uses its own color) */
  color: var(--text-color);
}
.gallery-main-section .gallery-filter-count {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-2xs);
  color: inherit;
}
.gallery-main-section .gallery-filter-count strong {
  font-weight: var(--font-weight-bold);
}

/* Sort By toggle */
.gallery-main-section .gallery-sort {
  position: relative;
}
.gallery-main-section .gallery-sort-toggle {
  border: none !important;
  background: transparent !important;
  font-family: "futura-pt", sans-serif !important;
  font-size: var(--font-size-2xs) !important;
  font-weight: var(--font-weight-bold) !important;
  color: inherit !important;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
}
.gallery-main-section .gallery-sort-arrow img {
  max-width: 10px;
}
.gallery-main-section .gallery-sort-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--white);
  padding: var(--spacing-md) var(--spacing-xl);
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-radius: 5px;
  list-style: none;
  margin: 4px 0 0;
  z-index: 60;
  min-width: 80px;
}
.gallery-main-section .gallery-sort-dropdown li {
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-2xs);
  cursor: pointer;
  padding: 3px 0;
  white-space: nowrap;
}
.gallery-main-section .gallery-sort-dropdown li:hover {
  color: var(--primary-color);
}

/* Dropdown panel – full width of tab wrapper, left-aligned with tabs / “Filter By:” */
.gallery-main-section .gallery-filter-dropdown {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  width: calc(100% + var(--spacing-md));
  margin-left: calc(-1 * var(--spacing-md));
  background: var(--background-color-gray-alt, #f0f0f0);
  padding: var(--spacing-xl) var(--spacing-3xl);
  z-index: 50;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

/* Grid of items inside the dropdown */
.gallery-main-section .gallery-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 8px 30px;
}

/* Label + hollow square — flex aligns box with text; padding spaces rows in the grid */
.gallery-main-section .gallery-filter-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
  cursor: pointer;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-normal);
  font-family: "futura-pt", sans-serif;
}
.gallery-main-section .gallery-filter-item::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border: 1px solid var(--black);
  background: transparent;
  box-sizing: border-box;
}
/* Hide native checkbox */
.gallery-main-section .gallery-filter-item input[type="checkbox"] {
  width: 0;
  height: 0;
  position: absolute;
  opacity: 0;
}
/* Checked state: fill the square */
.gallery-main-section
  .gallery-filter-item
  input[type="checkbox"]:checked
  ~ span {
  font-weight: var(--font-weight-strong);
}
.gallery-main-section .gallery-filter-item:has(input:checked)::before {
  background: var(--black);
}

/* Responsive: tablet */
@media screen and (max-width: 1024px) {
  .gallery-main-section .gallery-filter-grid {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
  }
}
/* Responsive: mobile */
@media screen and (max-width: 767px) {
  .gallery-main-section .gallery-filter-grid {
    grid-template-columns: repeat(1, minmax(100px, 1fr));
  }
  .gallery-main-section .gallery-filter-tabs {
    gap: 5px;
  }
  .gallery-main-section .gallery-search-row .gallery-search-input,
  .gallery-main-section .gallery-search-row .gallery-search-btn,
  .gallery-main-section .gallery-search-row .gallery-search-clear-btn {
    padding: 5px var(--spacing-md);
  }
}

/* Gallery listing page – responsive 4/3/2/1 column grid */
.gallery-main-section .gallery-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 480px) {
  .gallery-main-section .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) {
  .gallery-main-section .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .gallery-main-section .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Gallery "+ See More" collapse — show exactly 2 rows by default per breakpoint. */
#search-related-project .usai-gallery-collapse:not(.is-expanded) .gallery-grid > :nth-child(n+3),
#search-related-project .usai-gallery-collapse:not(.is-expanded) .our-product-items > :nth-child(n+3) {
  display: none;
}
@media (min-width: 480px) {
  #search-related-project .usai-gallery-collapse:not(.is-expanded) .gallery-grid > :nth-child(n+3),
  #search-related-project .usai-gallery-collapse:not(.is-expanded) .our-product-items > :nth-child(n+3) {
    display: block;
  }
  #search-related-project .usai-gallery-collapse:not(.is-expanded) .gallery-grid > :nth-child(n+5),
  #search-related-project .usai-gallery-collapse:not(.is-expanded) .our-product-items > :nth-child(n+5) {
    display: none;
  }
}
@media (min-width: 768px) {
  #search-related-project .usai-gallery-collapse:not(.is-expanded) .gallery-grid > :nth-child(n+5),
  #search-related-project .usai-gallery-collapse:not(.is-expanded) .our-product-items > :nth-child(n+5) {
    display: block;
  }
  #search-related-project .usai-gallery-collapse:not(.is-expanded) .gallery-grid > :nth-child(n+7),
  #search-related-project .usai-gallery-collapse:not(.is-expanded) .our-product-items > :nth-child(n+7) {
    display: none;
  }
}
@media (min-width: 1024px) {
  #search-related-project .usai-gallery-collapse:not(.is-expanded) .gallery-grid > :nth-child(n+7),
  #search-related-project .usai-gallery-collapse:not(.is-expanded) .our-product-items > :nth-child(n+7) {
    display: block;
  }
  #search-related-project .usai-gallery-collapse:not(.is-expanded) .gallery-grid > :nth-child(n+9),
  #search-related-project .usai-gallery-collapse:not(.is-expanded) .our-product-items > :nth-child(n+9) {
    display: none;
  }
}
/* Gallery "+ See More" toggle: left-aligned underlined link, mirrors .usai-fam-more-btn. */
#search-related-project .usai-gallery-toggle {
  display: inline-block;
  margin-top: var(--spacing-sm);
  padding: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-normal);
  color: var(--primary-color-alt);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--primary-color-alt);
  text-underline-offset: 2px;
}
#search-related-project .usai-gallery-toggle:hover,
#search-related-project .usai-gallery-toggle:focus {
  color: var(--primary-color-orange-darkest);
  text-decoration-color: var(--primary-color-orange-darkest);
  outline: none;
}
#search-related-project .usai-gallery-toggle.is-hidden {
  display: none;
}

/* Gallery cards – match design: rounded corners, shadow, location (orange) above title, spacing */
.gallery-main-section .gallery-project-tile {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 0 13px rgba(0, 0, 0, 0.15);
  border: none;
}
.gallery-main-section .gallery-project-tile a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.gallery-main-section .gallery-project-tile .project-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--background-color-gray-alt);
  border-radius: 12px 12px 0 0;
}
.gallery-main-section .gallery-project-tile .project-thumbnail-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.gallery-main-section .gallery-project-tile .project-thumbnail-spinner::after {
  content: "";
  width: 28px;
  height: 28px;
  border: 3px solid var(--gray-light);
  border-top-color: var(--text-color-gray-lighter);
  border-radius: 50%;
  animation: gallery-thumb-spin 0.8s linear infinite;
}
@keyframes gallery-thumb-spin {
  to {
    transform: rotate(360deg);
  }
}
.gallery-main-section
  .gallery-project-tile
  .project-thumbnail.thumb-loaded
  .project-thumbnail-spinner {
  display: none;
}
.gallery-main-section
  .gallery-project-tile
  .project-thumbnail
  img.gallery-thumb-img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.gallery-main-section
  .gallery-project-tile
  .project-thumbnail
  img.gallery-thumb-img.loaded {
  opacity: 1;
}

/* Same hover as hero-media-slider .hero-region (usai-hero-media-banner-v2.php) */
.gallery-main-section
  .gallery-project-tile
  .project-thumbnail.thumb-loaded::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
  pointer-events: none;
}
.gallery-main-section
  .gallery-project-tile
  .project-thumbnail.thumb-loaded:hover::after {
  background: rgba(0, 0, 0, 0.12);
}
.gallery-main-section
  .gallery-project-tile
  .project-thumbnail.thumb-loaded
  img.gallery-thumb-img.loaded {
  transform: scale(1.08);
  transform-origin: center center;
  transition:
    opacity 0.25s ease,
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gallery-main-section
  .gallery-project-tile
  .project-thumbnail.thumb-loaded:hover
  img.gallery-thumb-img.loaded {
  transform: scale(1.08) translateY(-2%);
}
.gallery-main-section .gallery-project-tile .project-tile-content {
  padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);
  background: var(--white);
}
.gallery-main-section
  .gallery-project-tile
  a
  > .project-tile-content:first-child {
  border-radius: 12px 12px 0 0;
}
.gallery-main-section .gallery-project-tile .project-location {
  font-size: var(--font-size-1xs);
  color: var(--primary-color-orange-light);
  font-weight: var(--font-weight-normal);
  margin: 0 0 3px;
}
.gallery-main-section .gallery-project-tile .project-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--black);
  margin: 0;
}

/* Gallery detail page – remove max-width/padding from main so gallery can be full-bleed */
.single main.site-main-gallery-detail {
  max-width: none;
  padding: 0;
  margin: 0;
}
/* Gallery panoramic viewer – stitched images, auto-scroll, jump arrows */
.gallery-panoramic-wrapper {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-bottom: 2rem;
  overflow: hidden;
}
/* Gallery single image – full-bleed, height scales with viewport width */
.gallery-single-image-wrapper {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.gallery-single-image-frame {
  display: block;
  width: 100%;
}
.gallery-single-image-frame img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
.gallery-panoramic {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.gallery-panoramic-viewport {
  width: 100%;
  height: 42vw;
  min-height: 200px;
  max-height: 720px;
  overflow: hidden;
  cursor: default;
}
.gallery-panoramic-strip {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  height: 100%;
  align-items: stretch;
  will-change: transform;
}
.gallery-panoramic-frame {
  flex: 0 0 auto;
  height: 100%;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.gallery-panoramic-frame img {
  height: 100%;
  min-width: 100%;
  width: auto;
  object-fit: cover;
  display: block;
  vertical-align: bottom;
}

/* "+" zoom indicator overlay (bottom-right of every hero image).
   Visual affordance for the lightbox-on-click behavior. The overlay is non-interactive
   (`pointer-events: none`) so the click still hits the parent <a> and opens the lightbox.
   Visually: black "+" inside a thin black-border circle on a transparent background. */
.gallery-panoramic-frame,
.gallery-single-image-frame {
  position: relative;
}
.gallery-panoramic-zoom-icon {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--black);
  border: 1.5px solid var(--black);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  transition: transform 0.15s ease;
}
.gallery-panoramic-zoom-icon svg {
  width: 9px;
  height: 9px;
  display: block;
}
.gallery-panoramic-frame:hover .gallery-panoramic-zoom-icon,
.gallery-single-image-frame:hover .gallery-panoramic-zoom-icon {
  transform: scale(1.08);
}
@media screen and (max-width: 767px) {
  .gallery-panoramic-zoom-icon {
    width: 15px;
    height: 15px;
    right: 8px;
    bottom: 8px;
    border-width: 1px;
  }
  .gallery-panoramic-zoom-icon svg { width: 7px; height: 7px; }
}

/* Match .hero-media-slider .swiper-button-prev|next (usai-hero-media-banner-v2.php): 24px circle, white bg, opacity hover, bottom/right 20px, 7px gap */
.gallery-panoramic-controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  z-index: 50;
  pointer-events: auto;
}
.gallery-panoramic-jump {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: none;
  border-radius: 100%;
  background: var(--background-color-white) !important;
  color: var(--black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  opacity: 0.8;
  filter: brightness(1) !important;
  transition: opacity 0.2s ease;
}
.gallery-panoramic-jump:hover {
  background: var(--background-color-white) !important;
  opacity: 1;
}
.gallery-panoramic-jump:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.9);
  outline-offset: 1px;
}
/* Kill Swiper-bundle / theme pseudo arrows so only the PNG chevrons show (match hero, not filled triangles). */
.gallery-panoramic-jump::before,
.gallery-panoramic-jump::after {
  content: none !important;
  display: none !important;
}
/* Same asset + sizing as hero inline .swiper-button-prev img / .swiper-button-next img */
.gallery-panoramic-jump img,
.gallery-panoramic-jump .gallery-panoramic-nav-icon {
  max-width: 12px !important;
  width: 12px !important;
  height: auto !important;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  opacity: 1;
  filter: none;
  pointer-events: none;
}
/* Dark-mode contrast fix: the base rule sets `background: var(--background-color-white) !important`,
   which in [data-theme="dark"] resolves to #1e1e1e — a near-black surface that
   blends into the page and makes the static black PNG arrow disappear ("dark
   on dark"). Swap the surface for the dark theme's card-elevated tone and
   invert the PNG so the chevron renders light. Mirrors the
   .usai-coordinating-models-carousel .products-nav-btn dark-mode rule
   (style.css:5252), which uses SVG-with-currentColor; we need the explicit
   `filter: invert(...)` here because the gallery buttons use raster PNGs. */
[data-theme="dark"] .gallery-panoramic-jump,
[data-theme="dark"] .gallery-panoramic-jump:hover {
  background: var(--background-color-gray-lighter) !important;
  color: var(--text-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .gallery-panoramic-jump img,
[data-theme="dark"] .gallery-panoramic-jump .gallery-panoramic-nav-icon {
  filter: invert(1) brightness(2);
}

/* Gallery project detail – content below panoramic (breadcrumb, title, description, metadata) */
.gallery-project-detail .gallery-project-detail-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem 2rem;
  background: var(--white);
}
.gallery-project-detail .gallery-breadcrumb {
  font-size: var(--font-size-2xs);
  margin-bottom: 0.65rem;
  color: var(--text-color-gray);
}
.gallery-project-detail .gallery-breadcrumb a {
  color: var(--text-color-gray);
  text-decoration: none;
}
.gallery-project-detail .gallery-breadcrumb a:hover {
  color: var(--primary-color-orange-light);
}
.gallery-project-detail .gallery-breadcrumb .breadcrumb-sep {
  margin: 0 0.35em;
}
.gallery-project-detail .gallery-breadcrumb .breadcrumb-current {
  color: var(--primary-color-orange-light);
}
.gallery-project-detail .gallery-project-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-strong);
  color: var(--black) !important;
  margin: 0 0 0.85rem;
}
.gallery-project-detail .gallery-project-description {
  font-size: var(--font-size-xs);
  color: var(--black);
  margin-bottom: 1.5rem;
}
.gallery-project-detail .gallery-social-share {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.gallery-project-detail .social-share-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-color-light);
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  text-decoration: none;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-strong);
  transition:
    border-color 0.2s,
    background 0.2s;
}
.gallery-project-detail .social-share-btn:hover {
  border-color: var(--text-color-gray-dark);
  background: var(--background-color-gray-lighter);
}
.gallery-project-detail .social-share-btn span,
.gallery-project-detail .social-share-btn svg {
  display: block;
  flex-shrink: 0;
}
.gallery-project-detail .social-share-btn span {
  font-size: var(--font-size-xs);
}
.gallery-project-detail .social-share-btn svg {
  width: 16px;
  height: 16px;
}
.gallery-project-detail .gallery-project-metadata {
  margin-bottom: 1.25rem;
}
.gallery-project-detail .gallery-project-metadata p {
  margin: 0 0 0.5rem;
  font-size: var(--font-size-2xs);
}
.gallery-project-detail .gallery-project-metadata .meta-label {
  color: var(--primary-color) !important;
  font-weight: var(--font-weight-strong);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gallery-project-detail .gallery-project-metadata .meta-value {
  color: var(--black) !important;
}
.gallery-project-detail .gallery-detail-divider {
  border: none;
  border-top: 1px solid var(--gray-light);
  margin: 0;
}

/* Products Used Section (gallery detail) – uses same card design as product-family */
.products-used-section {
  margin-top: 2rem;
}
/* Reduce space above Products Used on gallery detail pages; align with content above */
.gallery-project-detail .products-used-section {
  margin: 0 auto 0;
  padding: 0 1.5rem 0;
  padding-top: 0;
  max-width: 900px;
}
.gallery-project-detail .products-used-section .our-product-main {
  padding-top: 0;
  padding-left: 0;
}
.gallery-project-detail .gallery-products-used-unavailable {
  color: var(--gray-dark, #555);
  font-size: 0.95rem;
  margin: 0.5rem 0 0;
}
/* Remove top margin from main h2 on gallery detail pages only */
.single main .gallery-project-detail h2 {
  margin-top: 0;
  padding-top: 0;
}

/* Hero media banner v2 – no max-height: 60vh; overrides any such rule */
.hero-media-v2.layout-1,
.hero-media-v2.layout-2,
.hero-media-v2.layout-3,
.hero-media-v2.layout-4,
.hero-media-v2.layout-5,
.hero-media-v2.layout-6,
.hero-media-v2.layout-7,
.hero-media-v2.layout-8,
.hero-media-v2.layout-9,
.hero-media-v2.layout-10 {
  max-height: none !important;
}

@media screen and (min-width: 801px) {
  .hero-media-slider,
  .hero-media-slider .swiper-wrapper,
  .hero-media-slider .swiper-slide {
    height: 50vh !important;
    min-height: unset !important;
  }
}

/* Gallery project detail page slider – large main images (legacy) */
.gallery-slider-wrapper {
  width: 100%;
  margin: 1.5rem 0;
  position: relative;
}
.gallery-image-slider,
.gallery-image-slider .swiper-slide {
  width: 100%;
  min-height: 50vh;
  height: 60vh;
}
.gallery-image-slider img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.gallery-image-slider .gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  max-width: 100px;
  width: auto;
  height: auto;
}
.gallery-image-slider .gallery-arrow img {
  max-width: 20px;
  height: auto;
  display: block;
}
.gallery-image-slider .gallery-prev {
  left: 0.5rem;
}
.gallery-image-slider .gallery-next {
  right: 0.5rem;
}
.gallery-image-slider .swiper-pagination {
  position: relative;
  margin-top: 0.5rem;
}

.usai-arrow {
  position: absolute;
  bottom: 40px;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 20;
}

button.usai-arrow {
  background: var(--white) !important;
  height: 45px;
  width: 45px;
  border-radius: 60px;
}

.usai-arrow img {
  max-width: 20px;
  height: auto;
  display: block;
  margin: auto;
}

.usai-prev {
  right: 90px;
}

.usai-next {
  right: 40px;
}

/* usai-single-card-image-v2 */

.usai-single-card-image-v2 {
  max-width: 800px;
  margin: auto;
}
.lighting_image {
  background: var(--white);
  padding: var(--spacing-3xl) 0 var(--spacing-xl);
}
.usai-single-card-image-v2 img {
  width: 100%;
  height: auto;
  display: block;
}

/* usai-4-column-section-v2 */

.critical-goals {
  background: var(--background-color-gray-light);
  padding: var(--spacing-3xl) 0;
}

.usai-4-column-v2 {
  max-width: 700px;
  margin: var(--spacing-sm) auto;
  padding: 0 var(--spacing-xl);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 55px;
  align-items: self-start;
}

.usai-left-heading {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}
.usai-left-number {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-strong);
}

.usai-left-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
  margin-top: 6px;
}

.usai-left-text {
  font-size: var(--font-size-xs);
  margin-bottom: 0;
  max-width: 260px;
}

.usai-right-number {
  color: var(--primary-color);
  font-weight: var(--font-weight-strong);
  font-size: var(--font-size-ssm);
}

.usai-right-title {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-strong);
  margin-bottom: var(--spacing-xs);
}

.usai-right-text {
  font-size: var(--font-size-2xs);
  margin-bottom: 0;
}

@media screen and (min-device-width: 768px) and (max-device-width: 1200px) {
  .usai-4-column-v2 {
    grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
  }
}

@media (max-width: 991px) {
  .usai-left-text {
    max-width: 100%;
  }
}

@media screen and (min-device-width: 320px) and (max-device-width: 767px) {
  .usai-4-column-v2 {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
}

/* usai-2-image-caption-slider-v2 */

.usai-2-image-caption-slider-v2 {
  padding: var(--spacing-3xl) 0 var(--spacing-md) var(--spacing-6xl);
  display: grid;
  grid-template-columns: 2.3fr 1fr;
  gap: 15px;
  position: relative;
  background: var(--white) !important;
}

.usai-2-image-caption-slider-v2__left {
  position: relative;
  height: 520px;
  overflow: hidden;
  border-radius: 12px;
}

.usai-2-image-caption-slider-v2__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.usai-2-image-caption-slider-v2__slide.is-active {
  opacity: 1;
  z-index: 2;
}

.usai-2-image-caption-slider-v2__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.usai-2-image-caption-slider-v2__caption {
  position: absolute;
  left: 20px;
  bottom: 20px;
  max-width: 320px;
  font-size: var(--font-size-2xs);
  background: var(--white);
  color: var(--black);
  padding: var(--spacing-xs);
  border-radius: 9px;
  transition: opacity 0.3s ease;
  opacity: 0.9;
}
.usai-2-image-caption-slider-v2__caption p {
  font-size: var(--font-size-1xs);
  margin-bottom: 0;
}
.usai-2-image-caption-slider-v2__slide.is-active
  .usai-2-image-caption-slider-v2__caption {
  opacity: 0.9;
}
.usai-single-column-text-v2 .section-content a {
  text-decoration: none;
}
.usai-2-image-caption-slider-v2__right {
  position: relative;
  height: 520px;
  overflow: hidden;
}

.usai-2-image-caption-slider-v2__preview {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.usai-2-image-caption-slider-v2__preview.is-next {
  opacity: 1;
}

.usai-2-image-caption-slider-v2__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.usai-2-image-caption-slider-v2__next {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  cursor: pointer;
  z-index: 10;
  background: var(--white);
  height: 45px;
  width: 45px;
  border-radius: 50px;
}

.usai-2-image-caption-slider-v2__next img {
  max-width: 20px;
  height: auto;
  display: block;
}

@media (max-width: 991px) {
  .usai-2-image-caption-slider-v2 {
    grid-template-columns: 1fr;
    margin-left: 0;
  }

  .usai-2-image-caption-slider-v2__right {
    display: none;
  }

  .usai-2-image-caption-slider-v2__left {
    height: 360px;
  }

  .usai-2-image-caption-slider-v2__next {
    right: 10px;
  }
}

/* usai-category-carousel-section-v2*/

* {
  box-sizing: border-box;
}

.USAI-carousel-section-v2 {
  padding: 0;
}

.usai-container {
  max-width: 1400px;
  margin: auto;
  padding: var(--spacing-3xl) 0 var(--spacing-3xl) var(--spacing-6xl);
  background: var(--white);
}

.main-section-heading {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
  margin-bottom: var(--spacing-sm);
}

.usai-heading {
  font-size: var(--font-size-sm2);
  font-weight: var(--font-weight-strong);
  padding-top: var(--spacing-3xl);
  margin-bottom: var(--spacing-md);
}

.usai-category-tabs {
  display: flex;
  gap: 25px;
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
}

button.usai-arrow.right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

button.usai-arrow.left {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

.usai-carousel-area {
  position: relative;
}

.usai-tab {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-gray);
  cursor: pointer;
  opacity: 0.6;
  text-decoration: none;
}

.usai-tab.active {
  opacity: 1;
  color: var(--primary-color);
}

.usai-carousel-wrapper {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.usai-carousel-wrapper::-webkit-scrollbar {
  display: none;
}

.usai-carousel-wrapper.dragging {
  scroll-behavior: auto;
}

.usai-carousel-track {
  display: flex;
  gap: 20px;
  padding-bottom: var(--spacing-sm);
}
.filtered-itemsed .usai-card {
  min-width: auto !important;
  max-width: 100% !important;
}
.usai-card {
  min-width: 275px;
  max-width: 250px;
  background: var(--white);
  border-radius: 10px 10px 0 0;
  border: none;
  box-shadow: 0 0 13px rgba(0, 0, 0, 0.15);
  position: relative;
}

.usai-thumb img,
.placeholder {
  width: 100%;
  height: 150px;
  background: var(--black);
  border-radius: 10px 10px 0 0;
  object-fit: cover;
}

.usai-content {
  padding: var(--spacing-md);
}

.usai-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  margin: 0 0 5px;
}

.usai-subcopy {
  font-size: var(--font-size-1xs);
  opacity: 0.7;
  margin: 0;
}

.usai-desc {
  font-size: var(--font-size-1xs);
  opacity: 0.8;
  margin: 5px 0 0;
}

.usai-arrow {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--black);
  color: var(--white);
  cursor: pointer;
}

.usai-arrow img {
  max-width: 20px;
  height: auto;
  display: block;
  filter: invert(1);
}

.usai-category-block.has-scroll .usai-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.usai-arrow.left {
  margin-right: var(--spacing-sm);
}

.usai-arrow.right {
  margin-left: var(--spacing-sm);
}

/* Category Carousel V2 arrows: inline SVG icon on a solid black disc.
   Scoped + !important to defeat the global gallery rule
   `button.usai-arrow { background: var(--white) !important }`. */
.USAI-carousel-section-v2 button.usai-arrow {
  background: var(--black) !important;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  padding: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.USAI-carousel-section-v2 .usai-arrow .usai-cta-circle-arrow-svg {
  width: 20px;
  height: 20px;
  display: block;
}

.USAI-carousel-section-v2 .usai-arrow .usai-cta-circle-arrow-svg circle {
  fill: transparent;
}

.USAI-carousel-section-v2 .usai-arrow .usai-cta-circle-arrow-svg path {
  stroke: var(--white);
}

.usai-progress {
  display: none;
  margin-top: var(--spacing-md);
  height: 2px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 999px;
  position: relative;
}

.usai-category-block.has-scroll .usai-progress {
  display: block;
}

.usai-progress span {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  width: 20%;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 999px;
  cursor: grab;
  transition: height 0.2s;
}

.usai-progress span:hover {
  height: 6px;
}

.usai-progress span.dragging {
  height: 8px;
  cursor: grabbing;
}

/* usai-brochures-carousel-v2  */

.usai-brochure-carousel-v2 {
  padding: var(--spacing-3xl) 0;
  background: var(--background-color-gray-lighter);
  width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
}

.usai-brochure-carousel-v2__inner {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* Brochure carousel arrows — cta-arrow-circle SVG (28px circle + chevron) */
.usai-brochure-carousel-v2 .brochure-carousel-nav-btn .usai-cta-circle-arrow-svg {
  display: block;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

.usai-brochure-carousel-v2 .brochure-carousel-nav-btn .usai-cta-circle-arrow-svg circle {
  fill: var(--background-color-white);
}

.usai-brochure-carousel-v2 .brochure-carousel-nav-btn .usai-cta-circle-arrow-svg path {
  stroke: var(--black);
}

.usai-brochure-carousel-v2 .brochure-swiper.swiper {
  width: 100%;
  overflow: hidden;
  touch-action: pan-x pan-y;
}

.usai-brochure-carousel-v2 .brochure-swiper .swiper-slide {
  width: 180px;
  flex-shrink: 0;
  height: auto;
}

.usai-brochure-carousel-v2 .brochure-swiper .swiper-slide .brochure-card {
  width: 100%;
}

.usai-project-gallery-hero-v2 .cta-arrow-circle .usai-cta-circle-arrow-svg {
  width: 28px;
  height: 28px;
  vertical-align: middle;
}

.usai-brochure-carousel-v2 .brochure-title {
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-md);
}

.brochure-card a {
  text-decoration: none;
}
.usai-arrow {
  display: block !important;
}
.usai-brochure-carousel-v2 .brochure-carousel-wrapper,
.brochure-carousel-wrapper {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding-inline: 0 !important;
  margin-inline: 0;
}

@media screen and (min-width: 1200px) {
  .usai-brochure-carousel-v2 .brochure-carousel-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline: 0 !important;
  }
}

.brochure-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-inline: 0;
}

.brochure-track::-webkit-scrollbar {
  display: none;
}

.brochure-card {
  width: 180px;
  flex-shrink: 0;
}

.brochure-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  display: block;
}

.brochure-name {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-normal);
  color: var(--text-color-gray-darkest);
}

.ViewAllBower a:hover {
  background: var(--primary-color) !important;
}
.usai-single-column-text-v2 p {
  color: var(--body-text-color) !important;
}
.usai-single-column-text-v2 b {
  color: var(--primary-color-alt);
  text-transform: uppercase;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-normal) !important;
}
.mainSBO {
  max-width: 1400px;
  margin: 0 auto 5px;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brochure-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  color: inherit;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.brochure-arrow:hover {
  opacity: 0.85;
  transform: translateY(-50%) scale(1.06);
}

.brochure-arrow.prev {
  left: 0;
}

.brochure-arrow.next {
  right: 0;
}

.brochure-arrow[style*="display: none"] {
  pointer-events: none;
  opacity: 0.3;
}

.ViewAllBower a {
  font-size: var(--font-size-1xs);
  font-weight: var(--font-weight-normal);
  color: var(--white);
  text-decoration: none;
  padding: 6px var(--spacing-md);
  border-radius: 20px;
  background: var(--black);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  transition: 0.3s;
  display: block;
}

.ViewAllBower a:hover {
  background: var(--black);
  color: var(--white);
}

@media (max-width: 1024px) {
  .usai-brochure-carousel-v2 .brochure-swiper .swiper-slide {
    width: 170px;
  }

  .brochure-card {
    width: 170px;
  }

  .brochure-card img {
    height: 230px;
  }
}

@media (max-width: 768px) {
  .mainSBO {
    padding-left: 0;
    padding-right: 0;
  }

  .usai-brochure-carousel-v2 .brochure-carousel-wrapper,
  .brochure-carousel-wrapper {
    padding-inline: 0 !important;
  }

  .brochure-track {
    padding-inline: 0;
  }

  .usai-brochure-carousel-v2 .brochure-swiper .swiper-slide {
    width: 160px;
  }

  .brochure-card {
    width: 160px;
  }

  .brochure-card img {
    height: 210px;
  }

  .ViewAllBower {
    position: static;
    text-align: right;
  }
}

/*  usai-related-projects-v2  */

.usai-related-projects {
  padding: var(--spacing-3xl) 70px;
  background: var(--background-color-gray-light);
  position: relative;
  max-width: 1400px !important;
  margin: 0 auto;
}

.usai-related-projects .top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.project-card a {
  text-decoration: none;
}

.section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-strong);
  margin: 0;
}

a.view-all-btn:hover {
  background: var(--primary-color);
  color: var(--white) !important;
}

.view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary-color);
  color: var(--white) !important;
  padding: var(--spacing-xs) var(--spacing-lg);
  border-radius: 25px;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  text-decoration: none !important;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.projects-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px !important;
}

.project-image img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 10px;
}
.project-card h3 {
  margin-top: 5px;
  color: var(--black);
}

.project-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
  margin-top: var(--spacing-sm);
  margin-bottom: 2px;
}

.project-location {
  font-size: var(--font-size-2xs);
  color: var(--text-color-gray);
  margin-bottom: 0;
}

@media screen and (min-device-width: 768px) and (max-device-width: 1200px) {
  .usai-related-projects {
    padding: var(--spacing-3xl) var(--spacing-xl);
  }
}

@media screen and (min-device-width: 320px) and (max-device-width: 767px) {
  .usai-related-projects {
    padding: var(--spacing-3xl) var(--spacing-xl);
  }

  .projects-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }

  .top-bar {
    display: block !important;
  }

  .view-all-btn {
    margin-top: var(--spacing-sm) !important;
    display: inline-block;
  }
}

/*  Gallery detail – Product Family Used / Related Projects / Brochures  */

.gallery-project-detail .gallery-section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-strong);
  color: var(--black) !important;
  margin: 0 0 var(--spacing-md);
}

.gallery-project-detail .gallery-product-families {
  margin-top: var(--spacing-3xl);
  /* Strip the global .section-wrapper outer padding/max-width so the inner
     div drives horizontal extent — matches the Related Projects layout below
     so all three gallery-detail carousels align edge-for-edge. */
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}
.gallery-project-detail .gallery-product-families-inner {
  max-width: 1400px;
  margin: 0 auto;
  /* Mirrors the .usai-related-projects horizontal padding scheme: 70px on
     desktop, 20px on tablet (768-1200), 10px on mobile. Breakpoint overrides
     live just below the brochures rules. */
  padding: 0 70px;
}
.product-family-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-xl);
}
.product-family-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.product-family-card-img {
  background: var(--background-color-gray-lighter);
  border-radius: 10px;
  overflow: hidden;
}
.product-family-card-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.product-family-card-name {
  margin: var(--spacing-sm) 0 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
  color: var(--black);
}
@media screen and (max-width: 1023px) {
  .product-family-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
  .product-family-grid { grid-template-columns: 1fr; }
}

/* "View All Projects" pill: black variant for gallery detail */
.view-all-btn--dark {
  background: var(--black) !important;
  color: var(--white) !important;
}
a.view-all-btn--dark:hover {
  background: var(--text-color-gray-dark) !important;
  color: var(--white) !important;
}

/* Gallery detail Related Projects wrapper.
   The gray bg was previously on the inner .usai-related-projects (capped at 1400px
   via the global rule at style.css:7099), so the gray ribbon stopped well short of
   the screen edges. Instead, we override the outer .section-wrapper to be full-width
   and paint the gray on it; the inner element keeps its 1400px max-width but is now
   transparent so only the outer band shows. */
.gallery-project-detail .gallery-related-projects-wrap {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  margin-top: var(--spacing-3xl);
  background: var(--background-color-gray-lighter);
}
.gallery-project-detail .usai-related-projects.gallery-related-projects {
  background: transparent;
  max-width: 1400px !important;
  margin: 0 auto;
}
.gallery-project-detail .usai-related-projects.gallery-related-projects .section-title {
  color: var(--black) !important;
  margin-bottom: 0;
}
.gallery-project-detail .usai-related-projects.gallery-related-projects .project-title {
  color: var(--black);
}
.gallery-project-detail .usai-related-projects.gallery-related-projects .project-location {
  color: var(--text-color-gray);
}
/* Mobile horizontal-crunch fix: the global .usai-related-projects rule adds
   `padding: var(--spacing-3xl) var(--spacing-xl)` (30px / 20px) on phones, which
   eats ~40px of viewport, leaving the two-up project cards crunched in the middle
   of the gray ribbon. Tighten the horizontal padding to 10px on the gallery-detail
   variant only so the cards extend close to the screen edges; vertical spacing and
   desktop padding are unchanged. */
@media screen and (max-width: 767px) {
  .gallery-project-detail .usai-related-projects.gallery-related-projects {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }
}

/* Brochures (gallery detail) – static grid, 5 / 3 / 2 cols */
.gallery-project-detail .gallery-brochures {
  margin-top: var(--spacing-3xl);
  margin-bottom: var(--spacing-3xl);
  /* Width parity with Related Projects — see .gallery-product-families above. */
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}
.gallery-project-detail .gallery-brochures-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 70px;
}
/* Breakpointed horizontal padding so Product Family Used + Brochures inner
   widths track the Related Projects ribbon at every viewport (70 / 20 / 10). */
@media screen and (max-width: 1200px) {
  .gallery-project-detail .gallery-product-families-inner,
  .gallery-project-detail .gallery-brochures-inner {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
  }
}
@media screen and (max-width: 767px) {
  .gallery-project-detail .gallery-product-families-inner,
  .gallery-project-detail .gallery-brochures-inner {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }
}
.brochure-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--spacing-xl);
}
.brochure-card a {
  text-decoration: none;
  color: inherit;
  display: block;
}
.brochure-card-img {
  background: var(--background-color-gray-lighter);
  border-radius: 10px;
  padding: var(--spacing-md);
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brochure-card-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.brochure-card-name {
  margin: var(--spacing-sm) 0 0;
  font-size: var(--font-size-2xs);
  color: var(--black);
  text-align: left;
}
@media screen and (max-width: 1023px) {
  .brochure-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
  .brochure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Gallery detail Swiper carousels (Product Family Used / Related Projects / Brochures).
   Mirrors the .usai-product-family-carousel-v2 .products-swiper rules but scoped to the
   gallery sections so the same layout/nav/pagination works without adding the v2 wrapper class. */
.gallery-project-detail .gallery-product-families,
.gallery-project-detail .gallery-related-projects-wrap,
.gallery-project-detail .gallery-brochures {
  overflow-x: hidden;
}
.gallery-project-detail .products-swiper {
  position: relative;
  display: block !important;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
  z-index: 1;
}
.gallery-project-detail .products-swiper .swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}
.gallery-project-detail .products-swiper.swiper-horizontal .swiper-wrapper {
  flex-direction: row;
}
.gallery-project-detail .products-swiper .swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: auto;
  position: relative;
  transition-property: transform;
  display: block;
  box-sizing: border-box;
}
.gallery-project-detail .products-swiper.swiper-horizontal {
  touch-action: pan-y;
}

/* Pagination dots — hidden by design on the three gallery-detail carousels (Product
   Family Used, Related Projects, Brochures). The prev/next nav arrows still render and
   are the sole pagination affordance. The bullet styles below are kept for future
   re-enablement; flip `display: none` off here to bring the dots back. */
.gallery-project-detail .products-swiper .swiper-pagination {
  display: none !important;
}
.gallery-project-detail .products-swiper .swiper-pagination.swiper-pagination-horizontal {
  bottom: auto;
  top: auto;
  left: 0;
  width: 100%;
}
.gallery-project-detail .products-swiper .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: var(--black);
  opacity: 0.2;
  margin: 0 4px;
}
.gallery-project-detail .products-swiper .swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.gallery-project-detail .products-swiper .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--primary-color);
}

/* Round nav arrows (left/right), white circle with shadow, like the v2 carousel block. */
.gallery-project-detail .products-swiper .products-nav-btn {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 10;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--white);
  color: var(--black);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.gallery-project-detail .products-swiper .products-nav-btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-50%) scale(1.08);
}
.gallery-project-detail .products-swiper .products-nav-btn:disabled,
.gallery-project-detail .products-swiper .products-nav-btn.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
  cursor: default;
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
}
.gallery-project-detail .products-swiper .products-nav-btn img {
  max-width: 12px;
  height: auto;
  display: block;
}
/* Dark-mode contrast fix: same problem as .gallery-panoramic-jump above.
   `background-color: var(--white)` resolves to #1e1e1e in [data-theme="dark"]
   and the PNG chevron is black, so the button disappears against the dark
   page. Repaint the surface with the elevated card tone and invert the PNG
   so the chevron renders light. */
[data-theme="dark"] .gallery-project-detail .products-swiper .products-nav-btn {
  background-color: var(--background-color-gray-lighter);
  color: var(--text-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .gallery-project-detail .products-swiper .products-nav-btn img {
  filter: invert(1) brightness(2);
}
.gallery-project-detail .products-swiper .products-nav-prev {
  left: 16px;
  right: auto;
}
.gallery-project-detail .products-swiper .products-nav-next {
  right: 16px;
  left: auto;
}

@media screen and (max-width: 767px) {
  .gallery-project-detail .products-swiper .products-nav-prev { left: 4px; }
  .gallery-project-detail .products-swiper .products-nav-next { right: 4px; }
}

/* Gallery detail card text overrides — global .single h3/h4 has `color: var(--primary-color) !important;`
   (style.css:803-805), which would otherwise paint the family name and project title orange.
   Scope these overrides to .gallery-project-detail so they don't leak into other carousels. */
.gallery-project-detail .gallery-product-families .product-family-card-name {
  color: var(--black) !important;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  margin: var(--spacing-sm) 0 0;
  line-height: 1.3;
}
.gallery-project-detail .gallery-related-projects-wrap .project-title {
  color: var(--black) !important;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  margin-top: var(--spacing-sm);
  margin-bottom: 2px;
  line-height: 1.3;
}
.gallery-project-detail .gallery-related-projects-wrap .project-card h3 {
  color: var(--black) !important;
}
.gallery-project-detail .gallery-brochures .brochure-card-name {
  color: var(--black) !important;
}
/* Gallery brochures: drop the gray frame around each brochure cover, render image flush. */
.gallery-project-detail .gallery-brochures .brochure-card-img {
  background: transparent;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
}
.gallery-project-detail .gallery-brochures .brochure-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Tighter slide gutter for the brochures carousel so more cards fit per row. */
.gallery-project-detail .gallery-brochures .products-swiper .swiper-slide {
  padding-right: 0;
}

/*  usai-related-projects-v2  */

.usai-news-grid-multiple-category-v2 {
  background: var(--white);
}

.usai-news-grid-multiple-category-v2__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  padding-left: var(--spacing-3xl-lg);
  padding-right: var(--spacing-3xl-lg);
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--white) !important;
  padding-bottom: var(--spacing-3xl);
  margin-top: var(--spacing-sm);
}

.usai-news-grid-multiple-category-v2__subcats label {
  display: flex;
  font-size: var(--font-size-2xs);
  align-items: center;
  gap: 5px;
}

select.usai-news-grid-multiple-category-v2__sort {
  padding: 0;
  border: none !important;
  font-weight: var(--font-weight-strong);
  font-family: "futura-pt";
}

.usai-news-grid-multiple-category-v2__meta {
  float: right;
  padding-right: var(--spacing-5xl);
  margin-top: -36px;
  justify-content: flex-end;
  gap: 20px;
}

span.usai-news-grid-multiple-category-v2__count {
  font-weight: var(--font-weight-strong);
}

.usai-news-grid-multiple-category-v2__tabs,
.usai-news-grid-multiple-category-v2__title {
  padding-left: var(--spacing-3xl-lg);
  padding-right: var(--spacing-3xl-lg);
  max-width: var(--max-width);
  margin: 0 auto;
}

.usai-news-grid-multiple-category-v2__tab.active:hover {
  color: var(--primary-color-orange-dark);
  background: var(--background-color-gray-light) !important;
  border-radius: 7px 7px 0px 0px;
}

.usai-news-grid-multiple-category-v2__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-strong);
  margin-bottom: 5px;
}

.usai-news-grid-multiple-category-v2__subtitle {
  color: var(--text-color-gray);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-light);
  margin-bottom: var(--spacing-xl);
}

.usai-news-grid-multiple-category-v2__tabs {
  display: flex;
  gap: 20px;
}

.usai-news-grid-multiple-category-v2__tab {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-color-gray-medium);
  font-weight: var(--font-weight-strong);
  font-family: "futura-pt";
  font-size: var(--font-size-xs);
  padding: 5px var(--spacing-sm);
}
.usai-news-grid-multiple-category-v2__tab:first-child {
  padding-left: 0;
}

.usai-news-grid-multiple-category-v2__card {
  background: var(--white);
  border: none;
}

.usai-news-grid-multiple-category-v2__img img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.usai-news-grid-multiple-category-v2__body {
  padding: var(--spacing-md);
}

.usai-news-grid-multiple-category-v2__label {
  color: var(--primary-color-orange-dark);
  font-size: var(--font-size-1xs);
  font-weight: var(--font-weight-strong);
}

.usai-news-grid-multiple-category-v2__card-title {
  font-size: var(--font-size-sm);
  margin: 5px 0;
}

.usai-news-grid-multiple-category-v2__desc {
  font-size: var(--font-size-1xs);
  color: var(--text-color-gray);
}

.usai-news-grid-multiple-category-v2__hide {
  display: none !important;
}

.usai-news-grid-multiple-category-v2__filter-bar {
  position: relative;
}

.usai-news-grid-multiple-category-v2__subcats {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  background: var(--background-color-gray-alt);
  padding: var(--spacing-xl) var(--spacing-5xl);
  z-index: 50;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 8px 30px;
}

.usai-news-grid-multiple-category-v2__tabs:hover
  + .usai-news-grid-multiple-category-v2__filter-bar
  .usai-news-grid-multiple-category-v2__subcats,
.usai-news-grid-multiple-category-v2__subcats:hover {
  display: grid;
}

.usai-news-grid-multiple-category-v2__subcats:hover {
  display: grid;
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
  .usai-news-grid-multiple-category-v2__meta {
    margin-top: calc(-1 * var(--spacing-2xl));
  }

  .usai-news-grid-multiple-category-v2__grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .usai-news-grid-multiple-category-v2__subcats {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }
}

@media screen and (max-width: 767px) {
  .usai-news-grid-multiple-category-v2__meta {
    float: none;
    padding: 0 var(--spacing-md);
    margin: 0 !important;
  }

  .usai-news-grid-multiple-category-v2__tabs,
  .usai-news-grid-multiple-category-v2__title,
  .usai-news-grid-multiple-category-v2__grid {
    padding-left: var(--spacing-md) !important;
    padding-right: var(--spacing-md) !important;
  }

  .usai-news-grid-multiple-category-v2__grid {
    grid-template-columns: repeat(1, 1fr) !important;
  }

  .usai-news-grid-multiple-category-v2__subcats {
    grid-template-columns: repeat(1, minmax(100px, 1fr));
  }
}

/* usai-product-family-carousel-v2 */

.usai-product-family-carousel-v2 {
  padding: var(--spacing-3xl) 0;
  background: var(--white);
  overflow-x: hidden;
}

/* USAI Product Family Carousel V2 – Swiper base (match Swiper core so carousel works) */
.usai-product-family-carousel-v2 .products-swiper.our-product-items {
  display: block !important;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  grid-template-columns: unset;
  gap: unset;
}

.usai-product-family-carousel-v2 .products-swiper .swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.usai-product-family-carousel-v2
  .products-swiper.swiper-horizontal
  .swiper-wrapper {
  flex-direction: row;
}

.usai-product-family-carousel-v2 .products-swiper .swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
  height: auto;
  box-sizing: border-box;
}

.usai-product-family-carousel-v2 .products-swiper.swiper-horizontal {
  touch-action: pan-y;
}

/* Swiper pagination – carousel block */
.usai-product-family-carousel-v2 .products-swiper .swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 0.3s opacity;
  transform: translateZ(0);
  z-index: 10;
}

.usai-product-family-carousel-v2
  .products-swiper
  .swiper-pagination.swiper-pagination-horizontal {
  bottom: 8px;
  top: auto;
  left: 0;
  width: 100%;
}

.usai-product-family-carousel-v2 .products-swiper .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: #000;
  opacity: 0.2;
}

.usai-product-family-carousel-v2
  .products-swiper
  .swiper-pagination-clickable
  .swiper-pagination-bullet {
  cursor: pointer;
}

.usai-product-family-carousel-v2
  .products-swiper
  .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--swiper-theme-color, #007aff);
}

.usai-product-family-carousel-v2
  .products-swiper
  .swiper-pagination-horizontal
  .swiper-pagination-bullet {
  margin: 0 4px;
}

/* Left/right arrows – product family carousel v2 (products-nav-btn style) */
.usai-product-family-carousel-v2 .our-product-items-wrap {
  position: relative;
}
.usai-product-family-carousel-v2 .products-swiper .products-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--white);
  color: var(--black);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.usai-product-family-carousel-v2 .products-swiper .products-nav-btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-50%) scale(1.08);
}
.usai-product-family-carousel-v2 .products-swiper .products-nav-btn:disabled,
.usai-product-family-carousel-v2
  .products-swiper
  .products-nav-btn.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
  cursor: default;
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
}
.usai-product-family-carousel-v2 .products-swiper .products-nav-btn img {
  max-width: 20px;
  height: auto;
  display: block;
}
.usai-product-family-carousel-v2 .products-swiper .products-nav-prev {
  left: 16px;
  right: auto;
}
.usai-product-family-carousel-v2 .products-swiper .products-nav-next {
  right: 16px;
  left: auto;
}

.usai-product-family-carousel-v2 .product-card-section[role="button"] {
  cursor: pointer;
}

.product-top-row {
  max-width: 1400px;
  margin: 0 auto 5px;
  padding: 0 var(--spacing-5xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

button.product-arrow {
  justify-content: center !important;
  align-items: center !important;
}

.product-top-row h2 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
  color: var(--text-color-secondary);
}

.usai-product-family-carousel-v2 .view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary-color);
  color: var(--white) !important;
  padding: var(--spacing-xs) var(--spacing-lg);
  border-radius: 25px;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  text-decoration: none !important;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.usai-product-family-carousel-v2 .view-all-btn:hover {
  background: var(--primary-color);
  color: var(--white) !important;
}

.product-track a {
  text-decoration: none;
}

.product-carousel-wrapper {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 0 0 43px;
}

.product-track {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-right: 0;
}

.product-track::-webkit-scrollbar {
  display: none;
}
.product-card {
  width: 275px;
  flex-shrink: 0;
  border-radius: 10px;
  padding: var(--spacing-sm);
  text-align: center;
}

button.product-arrow img {
  width: 16px;
}

.product-card img {
  width: 100%;
  height: 230px;
  border-radius: 4px;
}
.product-carousel-wrapper .product-card img {
  height: 190px;
  object-fit: cover;
}
.usai-single-column-text-v2 .section-content h4 {
  color: var(--primary-color);
}
.product-card p {
  margin-top: 6px;
  font-size: var(--font-size-1xs);
  color: var(--text-color-gray);
  text-align: left;
}

.product-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: var(--white);
  color: var(--black);
  border-radius: 50%;
  border: none;
  font-size: var(--font-size-sm2);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.product-arrow.prev {
  left: 15px;
}

.product-arrow.next {
  right: 15px;
}

@media (max-width: 768px) {
  .product-carousel-wrapper {
    padding: 0 var(--spacing-xl);
  }

  .product-card {
    width: 230px;
  }
}

@media screen and (min-device-width: 320px) and (max-device-width: 1200px) {
  .product-top-row {
    padding: 0 var(--spacing-xl);
  }

  .product-carousel-wrapper {
    padding: 0 var(--spacing-sm);
  }
}

/* usai-grid-gallery-v2 */

.usai-grid-gallery {
  display: grid;
  grid-template-columns: 1.4fr 1.3fr 1.3fr 1.3fr;
  grid-template-rows: repeat(2, 280px);
  gap: 5px;
  width: 100%;
}

a.usai-gallery-item:after {
  content: "";
  position: absolute;
  background: url("/wp-content/uploads/plus-icon.png");
  left: auto;
  right: 10px;
  top: auto;
  bottom: 10px;
  background-repeat: no-repeat;
  background-size: contain;
  width: 13px;
  z-index: 9;
  height: 25px;
}

a.usai-gallery-item {
  position: relative;
}

.usai-grid-gallery > a {
  display: block;
}

.usai-gallery-item {
  position: relative;
  overflow: hidden;
  background-color: var(--background-color-gray-alt);
}

.usai-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.usai-gallery-item:hover img {
  transform: scale(1.08);
}

.usai-gallery-item:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.usai-gallery-item:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1;
}

.usai-gallery-item:nth-child(3) {
  grid-column: 3 / 5;
  grid-row: 1;
}

.usai-gallery-item:nth-child(4) {
  grid-column: 2 / 4;
  grid-row: 2;
}

.usai-gallery-item:nth-child(5) {
  grid-column: 4 / 5;
  grid-row: 2;
}

.usai-gallery-item:nth-child(n + 6) {
  display: none;
}

@media (max-width: 1024px) {
  .usai-grid-gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .usai-gallery-item {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

@media (max-width: 576px) {
  .usai-grid-gallery {
    grid-template-columns: 1fr;
  }
}

/*  usai-text-with-image-section-v2  */

.usai-text-image-section-v2 {
  max-width: 700px !important;
  margin: 0 auto;
  padding: var(--spacing-3xl) var(--spacing-xl) !important;
}

.usai-tiw-row {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.usai-tiw-text {
  width: 80%;
}

.usai-tiw-text h2 {
  font-size: var(--font-size-1lg);
  font-weight: var(--font-weight-strong);
  margin-bottom: var(--spacing-xl);
}

.usai-tiw-content br {
  display: none;
}

.usai-tiw-content {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
  color: var(--body-text-color);
}

.usai-tiw-image {
  width: 20%;
  text-align: center;
  margin-top: var(--spacing-3xl);
}

.usai-tiw-image img {
  width: 100%;
  height: auto;
  border: 1px solid var(--border-color-lighter);
}

.usai-tiw-caption {
  font-size: var(--font-size-1xs);
  margin-top: 6px;
  color: var(--text-color-gray-medium);
}

/* usai-two-image-grid-section-v2 */

.usai-two-image-grid-v2 {
  background: var(--white);
}

.usai-image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin: auto;
}

.usai-image-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1200px) {
  .usai-image-grid {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }
}

@media (max-width: 768px) {
  .usai-image-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* usai-grid-gallery-slider-v2 */

.usai-center-carousel {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.swiper-button-prev,
.swiper-button-next {
  background: var(--white);
  height: 40px;
  width: 40px;
  border-radius: 20px;
  top: auto !important;
  bottom: 10px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper-button-disabled {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.swiper-button-prev img,
.swiper-button-next img {
  max-width: 20px;
  height: auto;
  display: block;
}

.swiper-slide {
  position: relative;
}

.usai-center-carousel__slide a {
  position: relative;
  display: block;
  height: 100%;
}
.product-carousel-wrapper .product-card {
  width: 310px;
  padding: 7px;
}
.usai-center-carousel__slide a::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: url("/wp-content/uploads/add.png") no-repeat center;
  background-size: contain;
  width: 16px;
  height: 16px;
  z-index: 9;
}

.swiper-button-prev {
  right: 55px !important;
  left: auto !important;
}

.usai-center-carousel .swiper-wrapper {
  align-items: stretch;
}

.usai-center-carousel .swiper-slide {
  margin: var(--spacing-3xl-lg) 0 0;
  box-sizing: border-box;
}

#lightboxOverlay {
  z-index: 99999 !important;
}

.lightbox,
#lightbox {
  z-index: 99999 !important;
}

.lb-data .lb-close {
  position: absolute;
  top: 0;
  /* width: 100px; */
  height: 30px;
  margin-top: calc(-1 * var(--spacing-3xl-lg));
}

.usai-center-carousel .swiper-slide-active {
  width: 60% !important;
  opacity: 1;
}

.usai-center-carousel .swiper-slide-prev,
.usai-center-carousel .swiper-slide-next {
  width: 20% !important;
}

.usai-center-carousel__slide {
  height: 500px;
  width: 100%;
  overflow: hidden;
}

.usai-center-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.usai-center-carousel .swiper-button-prev::after,
.usai-center-carousel .swiper-button-next::after {
  display: none;
}
.usai-center-carousel .swiper-button-prev,
.usai-center-carousel .swiper-button-next {
  width: 25px;
  height: 25px;
  background: none;
}
.usai-center-carousel .swiper-button-prev img,
.usai-center-carousel .swiper-button-next img {
  max-width: 20px;
  height: auto;
  display: block;
}
.usai-center-carousel .swiper-button-prev {
  left: 15px;
}

.usai-center-carousel .swiper-button-next {
  right: 15px;
}

@media (max-width: 1024px) {
  .usai-center-carousel__slide {
    height: 320px;
  }
}

@media (max-width: 767px) {
  .usai-center-carousel__slide {
    height: 240px;
  }

  .usai-center-carousel .swiper-slide-prev,
  .usai-center-carousel .swiper-slide-next {
    display: none;
  }

  .usai-center-carousel .swiper-slide-active {
    width: 100% !important;
  }
}

/* usai-five-text-column-section-v2 */

.usai-five-text_column-v2 {
  background: var(--background-color-gray-light);
}

.usai-five-text_column-v2 .container {
  padding: var(--spacing-3xl) var(--spacing-md) var(--spacing-xl);
  max-width: 1000px !important;
  margin: 0 auto;
}

.usai-five-text_column-v2 p {
  color: var(--text-color-muted);
  font-size: var(--font-size-1xs);
}

.usai-five-text_column-v2 .five-column-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px;
}

.usai-five-text_column-v2 .column-item {
  font-size: var(--font-size-1xs);
  color: var(--text-color-gray-dark);
}

.usai-five-text_column-v2 h4 {
  text-align: left !important;
  margin-bottom: var(--spacing-md) !important;
  text-transform: capitalize !important;
  font-size: var(--font-size-sm) !important;
  letter-spacing: 0 !important;
  font-weight: var(--font-weight-medium) !important;
}

.usai-five-text_column-v2 strong {
  font-weight: var(--font-weight-medium);
  color: var(--black);
}

@media (max-width: 1024px) {
  .usai-five-text_column-v2 .five-column-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 20px;
  }
}

@media (max-width: 600px) {
  .usai-five-text_column-v2 .five-column-grid {
    grid-template-columns: 1fr;
  }
}

/*  usai-category-section-v2 */

ul.news-tabs .active {
  color: var(--primary-color);
  font-weight: var(--font-weight-strong) !important;
  border: none !important;
}

.usai-category-wrapper {
  position: relative;
  max-width: 1400px !important;
  margin: 0 auto;
  padding: var(--spacing-3xl) 70px !important;
  background: var(--white);
}

.news-tabs li {
  color: rgb(153, 153, 153);
}

.maine-wrapper {
  display: flex;
}

@media screen and (min-device-width: 768px) and (max-device-width: 1200px) {
  .usai-category-wrapper {
    padding: 0 var(--spacing-xl) !important;
  }
}

@media screen and (min-device-width: 320px) and (max-device-width: 767px) {
  .usai-grid.filtered-itemsed {
    grid-template-columns: repeat(1, 1fr) !important;
  }

  .usai-category-wrapper {
    padding: var(--spacing-3xl) var(--spacing-md) !important;
  }

  ul.news-tabs {
    flex-wrap: wrap;
    gap: 0px 15px !important;
  }

  .news-top-bar {
    display: block !important;
  }

  .maine-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .maine-wrapper .results-count {
    margin: inherit !important;
  }
}

/* usai-single-column-text-section-v2  */

.usai-single-column-text-v2 {
  padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-3xl)
    var(--spacing-3xl);
  background: var(--white);
}

.usai-single-column-text-v2 br {
  display: none;
}
.usai-single-column-text-v2 .section-content a {
  text-decoration: none;
  color: var(--primary-color);
}
.usai-single-column-text-v2 .section-content h4 em {
  color: var(--black);
}
.usai-single-column-text-v2 strong {
  font-weight: var(--font-weight-strong);
  display: block;
  color: var(--primary-color);
}

.usai-single-column-text-v2 .container {
  max-width: 600px;
  margin: 0 auto;
}

.usai-single-column-text-v2 .section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-strong);
  margin-bottom: var(--spacing-md);
}

.usai-single-column-text-v2 .section-description {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
  color: var(--text-color-gray);
  margin-bottom: var(--spacing-md);
}

.usai-single-column-text-v2 .section-content {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
  color: var(--body-text-color);
}

@media screen and (min-device-width: 320px) and (max-device-width: 767px) {
  .usai-single-column-text-v2 {
    padding: var(--spacing-3xl) var(--spacing-md) var(--spacing-sm) !important;
    background: var(--white);
  }
}

/* usai-two-column-text-section-v2  */
.usai-section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-strong);
  margin-bottom: var(--spacing-sm);
}

.usai-two-col-wrapper p {
  color: var(--text-color-gray-light);
}

.usai-two-col-wrapper {
  display: flex;
  gap: 50px;
  align-items: flex-start;
}

.usai-col {
  width: 50%;
}

.usai-col-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
  color: var(--primary-color-orange-darkest);
  margin-bottom: var(--spacing-xs);
}

.usai-col-desc {
  font-size: var(--font-size-2xs);
  color: var(--text-color-gray-darker);
}

.usai-two-column-text-v2 {
  max-width: 700px;
  margin: 0 auto;
  padding: var(--spacing-3xl) var(--spacing-xl) !important;
}

@media screen and (min-device-width: 768px) and (max-device-width: 1200px) {
  .usai-two-column-text-v2 {
    padding: var(--spacing-3xl) var(--spacing-xl) !important;
  }
}

@media screen and (min-device-width: 320px) and (max-device-width: 767px) {
  .usai-two-column-text-v2 {
    padding: var(--spacing-3xl) var(--spacing-xl) !important;
  }

  .usai-two-column-text-v2 .usai-two-col-wrapper {
    display: block;
  }

  .usai-two-column-text-v2 .usai-col {
    width: 100% !important;
  }
}

/* usai-news-section-v2 */

.news_banner {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--spacing-3xl) 70px !important;
}

.NewClass.search-items {
  width: 65%;
}

.news_tabs li {
  color: rgb(153, 153, 153);
  text-transform: capitalize;
}

.news_tabs {
  gap: 35px !important;
  margin-bottom: 5px !important;
}

[data-usai-news-v2] [data-tab][data-active="1"] {
  color: var(--primary-color) !important;
  font-weight: var(--font-weight-bold) !important;
  border-bottom: 2px solid var(--primary-color) !important;
}

input[type="text"],
button.NewClass {
  font-family: "futura-pt", sans-serif;
}

@media screen and (min-device-width: 768px) and (max-device-width: 1200px) {
  .news_banner {
    padding: var(--spacing-3xl) var(--spacing-xl) !important;
  }
}

@media screen and (min-device-width: 320px) and (max-device-width: 767px) {
  .news_banner {
    padding: var(--spacing-3xl) var(--spacing-xl) !important;
  }

  .maine-grid-items {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 20px !important;
  }

  .NewClass.search-items {
    display: block !important;
    width: 100% !important;
  }

  .NewClass.search-items input {
    width: 100% !important;
  }

  .search-items input[type="text"] {
    margin-bottom: var(--spacing-sm);
  }

  .NewClass.category_wrapper_items {
    display: block !important;
  }

  .NewClass.category_wrapper_items ul {
    flex-wrap: wrap;
    gap: 0px 10px !important;
  }
}

/* usai-banner-video-section-v2 */

section.usai-bv2,
img.usai-bv2-image {
  width: 100% !important;
  height: auto !important;
  background: var(--white) !important;
}

/* Break out of the 1800px `.single main` column so the banner goes full-bleed
   on single posts; pages already have a full-width main so they're unaffected.
   `!important` on width/max-width is required to beat the `width:100% !important`
   rule above, which would otherwise keep the banner pinned inside the 1800px column. */
.single main > section.usai-bv2,
.single main > img.usai-bv2-image {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

section.usai-bv2 {
  position: relative;
}

.usai-bv2-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 650;
  min-height: 200px;
}

.usai-bv2-video-wrap .usai-bv2-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mirror .hero-media-slider .swiper-button-next (usai-hero-media-banner-v2.php) */
.usai-bv2-play-pause {
  position: absolute;
  bottom: 20px !important;
  right: 20px !important;
  left: auto !important;
  top: auto !important;
  z-index: 2;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  min-height: 24px;
  border-radius: 100%;
  border: none;
  background: var(--background-color-white) !important;
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0.8;
  filter: brightness(1) !important;
  transition: opacity 0.2s ease;
  box-sizing: border-box;
}

.usai-bv2-play-pause:hover {
  background: var(--background-color-white) !important;
  opacity: 1;
}

.usai-bv2-play-pause:focus {
  outline: 1px solid rgba(255, 255, 255, 0.9);
  outline-offset: 1px;
}

.usai-bv2-play-pause .usai-bv2-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* Same as .hero-media-slider .swiper-button-next img (inline in usai-hero-media-banner-v2.php) */
.usai-bv2-play-pause .usai-bv2-ico img {
  max-width: 12px;
  width: auto;
  height: auto;
  display: block;
}

.usai-bv2-play-pause .usai-bv2-ico svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--black);
  fill: currentColor;
}

.usai-bv2-play-pause .usai-bv2-ico[hidden] {
  display: none !important;
}

/* Optional hero text: 48pt Demi Futura PT, floating above video/image */
.usai-bv2-hero-text {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  max-width: 50%;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--spacing-3xl);
  font-family: var(--font-family-primary);
  font-size: min(4vw, 48px);
  font-weight: var(--font-weight-strong);
  color: #fff;
  text-align: left;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* SUPERSEDED BY usai-react-configurator/assets/app.css; remove in follow-up. */
/* Product Card Styles - Matching product-filter page design */
.product-card-section {
  background: var(--white);
  border: none;
  border-radius: 0.75rem;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 13px rgba(0, 0, 0, 0.15);
  position: relative;
  width: 100%;
}

.product-card-section:hover {
  box-shadow: 0 0 13px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

[data-theme="dark"] .product-card-section {
  border: none;
}

.product-card-link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Match react-configurator ProductCard / ProductFamilyCard overlay actions */
.product-card-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 3px;
  z-index: 10;
}

.product-card-action-btn {
  width: auto;
  height: auto;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.product-card-action-btn:hover {
  transform: scale(1.1);
}

.product-card-action-btn svg {
  width: 17px;
  height: 17px;
  color: var(--gray);
  stroke: var(--gray);
  transition: all 0.2s ease;
}

.product-card-action-btn.favorite-btn:hover svg,
.product-card-action-btn.favorite-btn.active svg,
.product-card-action-btn.favorite-btn.is-favorite svg {
  color: #e74c3c;
  stroke: #e74c3c;
}

.product-card-action-btn.compare-btn:hover svg,
.product-card-action-btn.compare-btn.active svg {
  color: var(--primary-color-orange);
  stroke: var(--primary-color-orange);
}

.product-card-action-btn.favorite-btn.active svg,
.product-card-action-btn.favorite-btn.is-favorite svg {
  fill: #e74c3c;
}

[data-theme="dark"] .product-card-action-btn svg {
  color: var(--text-color-light);
  stroke: var(--text-color-light);
}

/* Main Image - Top Half */
.product-card-section .product-image {
  width: 100%;
  aspect-ratio: 1 / 1; /* Make image square */
  height: auto;
  overflow: hidden;
  background: var(--background-color-gray-alt2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 0.75rem 0.75rem 0 0;
}

.product-card-section .product-image img.product-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0;
}

.product-card-section .product-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(
    135deg,
    var(--background-color-gray-lighter) 0%,
    var(--gray-light) 100%
  );
  color: var(--text-color-placeholder);
}

.product-card-section .product-image-placeholder svg {
  opacity: 0.6;
}

.product-card-section .product-image-placeholder .placeholder-text {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-placeholder);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Content - Bottom Half */
.product-card-section .product-content {
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md)
    var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
  min-height: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

/* Product Name with Highlighted Aperture */
.product-card-section .product-title-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--black);
  margin: 0 0 0.3rem 0;
  flex-shrink: 0;
}

/* Registered/trademark/copyright marks rendered small + raised.
   `.usai-tm` is emitted by usai_superscript_trademark_html() so EVERY use of
   that helper (search family titles, resource group headings, result meta,
   product titles, etc.) is superscripted globally, regardless of container —
   the base reset above flattens bare <sup> to baseline, so this class is what
   actually raises the mark. Keep the legacy descendant selectors for any
   server-rendered <sup> that predates the class. */
.product-title-name sup,
.product-aperture sup,
.usai-tm {
  font-size: 0.65em;
  vertical-align: super;
  line-height: 0;
}

.product-card-section .product-aperture {
  color: var(--primary-color-orange);
  font-weight: var(--font-weight-bold);
}

/* Description */
.product-card-section .product-description {
  font-size: var(--font-size-2xs);
  color: var(--black);
  margin: 0;
  font-weight: var(--font-weight-normal);
}

/* Product Attributes - Technical Specifications */
.product-card-section .product-attributes {
  flex-direction: column;
  gap: 0;
  margin-top: 0;
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

.product-attributes.product-attributes--bulleted {
  list-style: disc !important;
  padding-left: 16px !important;
}

.product-attributes.product-attributes--bulleted .product-attribute {
  display: list-item;
  font-size: var(--font-size-1xs);
  color: var(--text-color-gray-lightest);
  line-height: 1.4;
}

.product-attributes.product-attributes--bulleted .attribute-value {
  font-weight: var(--font-weight-medium);
}

.product-attributes.product-attributes--bulleted .attribute-name {
  font-weight: var(--font-weight-normal);
  margin-left: 3px;
}

.product-card-section .product-attribute {
  font-size: var(--font-size-1xs);
  color: var(--text-color-gray-lightest);
}

.product-card-section .attribute-name {
  font-weight: var(--font-weight-medium);
}

.product-card-section .attribute-value {
  font-weight: var(--font-weight-normal);
}

/* Remove old ul styles for product card */
.product-card-section .product-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-card-section .product-content li {
  margin-bottom: 0;
  float: none;
}

/* Footer Section - Wrapper for Tiers and Color Choices */
.product-card-section .product-footer-section {
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0;
  margin-top: 0;
}

/* Pricing Tiers */
.product-card-section .product-tiers {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  align-items: center;
}

.product-card-section .tier-option-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.product-card-section .tier-name {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
}

.product-card-section .tier-badges-container {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.product-card-section .tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.product-card-section .tier-symbol {
  color: var(--white);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-1xs);
}

/* Infinite Color+ brand highlight */
.usai-infinite-color {
  color: #bd1861;
}

/* Color Choices */
.product-card-section .product-color-choices {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.product-card-section .color-circle {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  /* border: 2px solid var(--white);
      box-shadow: 0 0 0 1px var(--border-color-gray-light); */
  background: var(--border-color-gray-light);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  display: inline-block;
}

/* .product-card-section .color-circle:hover {
      transform: scale(1.1);
      box-shadow: 0 0 0 2px var(--border-color-gray-lighter);
  } */

/*
 * Catalog cards (class usai-configurator-card): parity with
 * configurator-usai/react-configurator/src/assets/css/configurator.css
 * (.product-card-section inside ProductFilter). Excludes marketing tiles
 * (.our-product-item-desc-plain / -orange) which omit this class.
 */
.product-card-section.usai-configurator-card .product-image,
.product-card-section.usai-configurator-card .product-image.our-product-item-img {
  aspect-ratio: unset !important;
  width: 100%;
  height: 220px;
  min-height: 220px;
  max-height: 220px;
  background-color: var(--background-color) !important;
}

.product-card-section.usai-configurator-card .product-image .product-swiper,
.product-card-section.usai-configurator-card .product-image .swiper {
  width: 100%;
  height: 100%;
}

.product-card-section.usai-configurator-card .product-image-placeholder {
  background: var(--background-color) !important;
  color: var(--gray);
  gap: var(--spacing-sm);
}

.product-card-section.usai-configurator-card .product-content,
.product-card-section.usai-configurator-card .product-content.our-product-item-desc {
  padding: var(--spacing-lg) !important;
  border: none !important;
  text-align: left;
  border-radius: 0;
  background: transparent !important;
}

.product-card-section.usai-configurator-card .product-title-name {
  margin: 0 !important;
  line-height: var(--line-height-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--black);
}

.product-card-section.usai-configurator-card .product-aperture {
  color: var(--primary-color);
}

.product-card-section.usai-configurator-card .product-description,
.product-card-section.usai-configurator-card p.product-description {
  font-size: var(--font-size-2xs) !important;
  color: var(--text-color) !important;
  margin: 0 0 0.5rem 0 !important;
  font-weight: var(--font-weight-normal);
  height: auto !important;
}

.product-card-section.usai-configurator-card .product-attributes {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.product-card-section.usai-configurator-card .product-attribute {
  font-size: var(--font-size-2xs) !important;
  line-height: 1.3;
  color: var(--gray) !important;
}

.product-card-section.usai-configurator-card .attribute-name {
  color: var(--gray);
}

.product-card-section.usai-configurator-card .attribute-value {
  font-weight: var(--font-weight-normal);
}

.product-card-section.usai-configurator-card .product-footer-section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.4rem;
  margin-top: 0;
  margin-bottom: var(--spacing-md);
}

.product-card-section.usai-configurator-card .product-tiers {
  gap: var(--spacing-xs);
}

.product-card-section.usai-configurator-card .tier-option-group {
  gap: var(--spacing-sm);
}

.product-card-section.usai-configurator-card .tier-badges-container {
  gap: var(--spacing-xs);
}

.product-card-section.usai-configurator-card .tier-symbol {
  font-size: 0.55rem;
  font-weight: bold;
}

/* Profile favorites: login-register.css used 4/3 image; match configurator with catalog class */
.favorites-card.product-card-section.usai-configurator-card .product-image,
.favorites-card.product-card-section.usai-configurator-card .product-image.our-product-item-img {
  aspect-ratio: unset !important;
  height: 220px;
  min-height: 220px;
  max-height: 220px;
  background-color: var(--background-color) !important;
}

@media (max-width: 768px) {
  .product-card-section.usai-configurator-card .product-image,
  .product-card-section.usai-configurator-card .product-image.our-product-item-img {
    height: 220px;
    min-height: 220px;
    max-height: 220px;
  }

  .product-card-section.usai-configurator-card .product-content,
  .product-card-section.usai-configurator-card .product-content.our-product-item-desc {
    padding: var(--spacing-md) !important;
  }
}

@media (max-width: 480px) {
  .product-card-section.usai-configurator-card .product-content,
  .product-card-section.usai-configurator-card .product-content.our-product-item-desc {
    padding: 0.875rem !important;
  }

  .product-card-section.usai-configurator-card .product-title-name {
    font-size: var(--font-size-xs);
  }

  .product-card-section.usai-configurator-card .product-description,
  .product-card-section.usai-configurator-card p.product-description {
    font-size: 0.8125rem !important;
  }

  .product-card-section.usai-configurator-card .product-attribute {
    font-size: var(--font-size-2xs) !important;
  }
}

/* Override old styles for product card */
.product-card-section .our-product-item-img {
  margin-bottom: 0;
  aspect-ratio: 1 / 1; /* Make image square */
  height: auto;
}

.product-card-section .our-product-item-img img {
  border-radius: 0;
  object-fit: cover;
}

.product-card-section .our-product-item-desc {
  border: none;
  padding: 1rem;
  text-align: left;
  border-radius: 0;
  background: transparent;
}

.product-card-section .our-product-item-desc h3 {
  margin-bottom: 0.3rem !important;
}

/* Preserve orange and plain styles for static homepage cards */
.product-card-section .our-product-item-desc-orange {
  color: var(--white);
  background: var(--primary-color) !important;
  padding: var(--spacing-xs) !important;
  height: 100%;
}

.product-card-section .our-product-item-desc-orange h3,
.product-card-section .our-product-item-desc-orange .product-title-name {
  color: var(--dark-blue) !important;
  margin-bottom: 0 !important;
  font-size: var(--font-size-sm);
}

.product-card-section .our-product-item-desc-orange .product-description {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-size-sm);
}

.product-card-section .our-product-item-desc-plain {
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  border: 1px solid var(--border-color);
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-xl) !important;
}

.product-card-section .our-product-item-desc-plain .product-description {
  color: var(--text-color-light);
}

/* Responsive Design for Product Cards */
/* Tablet landscape and smaller (900px - 1200px): 3 columns */
@media (max-width: 1200px) {
  .our-product-family .our-product-items:not(.our-product-items-with-filter) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px;
  }

  /* Fallback for any other our-product-items */
  .our-product-items:not(.our-product-items-with-filter) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px;
  }
}

/* Tablet portrait (600px - 900px): 2 columns */
@media (max-width: 900px) {
  .product-card-section .product-title-name {
    font-size: var(--font-size-xs);
  }

  .product-card-section.usai-configurator-card .product-title-name {
    font-size: var(--font-size-sm);
  }

  .our-product-family .our-product-items:not(.our-product-items-with-filter) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px;
  }

  /* Fallback for other cases */
  .our-product-items:not(.our-product-items-with-filter) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px;
  }
}

/* Mobile (below 600px): 1 column */
@media (max-width: 600px) {
  .product-card-section .product-image {
    aspect-ratio: 1 / 1;
    height: auto;
  }

  .product-card-section .our-product-item-img {
    aspect-ratio: 1 / 1;
    height: auto;
  }

  .product-card-section .product-content {
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md)
      var(--spacing-md);
  }

  /* Single column for mobile */
  .our-product-family .our-product-items:not(.our-product-items-with-filter) {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* Fallback for other cases */
  .our-product-items:not(.our-product-items-with-filter) {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
}

/* Small mobile (below 480px): 1 column with adjusted spacing */
@media (max-width: 480px) {
  .product-card-section .product-content {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm)
      var(--spacing-md);
  }

  .product-card-section .product-title-name {
    font-size: var(--font-size-xs);
  }

  .product-card-section .product-description {
    font-size: var(--font-size-1xs);
  }

  .product-card-section .product-attribute {
    font-size: var(--font-size-1xs);
  }

  /* Single column with tighter gap for small screens */
  .our-product-family .our-product-items:not(.our-product-items-with-filter),
  .our-product-items:not(.our-product-items-with-filter) {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
}

/*
 * Search template — Hot Topics (#search-articles) and News & insights (#search-news-insight)
 * Gallery-style cards: rounded corners, shadow, hover zoom, orange date above title.
 */
#search-articles .our-product-items,
#search-news-insight .our-product-items,
#search-brochures .our-product-items {
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#search-articles .our-product-item,
#search-news-insight .our-product-item,
#search-brochures .our-product-item {
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 0 13px rgba(0, 0, 0, 0.15);
  border: none;
  transition: box-shadow 0.3s ease;
}
#search-articles .our-product-item:hover,
#search-news-insight .our-product-item:hover,
#search-brochures .our-product-item:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

#search-articles .our-product-item-img,
#search-news-insight .our-product-item-img,
#search-brochures .our-product-item-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--background-color-gray-alt);
  border-radius: 12px 12px 0 0;
}

#search-articles .our-product-item-img img,
#search-news-insight .our-product-item-img img,
#search-brochures .our-product-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#search-articles .our-product-item:hover .our-product-item-img img,
#search-news-insight .our-product-item:hover .our-product-item-img img,
#search-brochures .our-product-item:hover .our-product-item-img img {
  transform: scale(1.06);
}

#search-articles .our-product-item-img .product-image-placeholder,
#search-news-insight .our-product-item-img .product-image-placeholder,
#search-brochures .our-product-item-img .product-image-placeholder {
  min-height: 0;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--background-color-gray-alt) 0%, var(--gray-lightest) 100%);
}

.product-image-placeholder .placeholder-brand {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.15em;
  color: var(--text-color-gray-lighter);
  text-transform: uppercase;
  opacity: 0.5;
  user-select: none;
}

#search-articles .our-product-item-desc-plain,
#search-news-insight .our-product-item-desc-plain,
#search-brochures .our-product-item-desc-plain {
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
  gap: 3px;
}

#search-articles .our-product-item-desc-plain p.font-orange,
#search-news-insight .our-product-item-desc-plain p.font-orange,
#search-brochures .our-product-item-desc-plain p.font-orange {
  font-size: var(--font-size-1xs);
  color: var(--primary-color-orange-light);
  font-weight: var(--font-weight-normal);
  margin: 0 0 3px;
  order: -1;
}

#search-articles .our-product-item-desc-plain h3,
#search-news-insight .our-product-item-desc-plain h3,
#search-brochures .our-product-item-desc-plain h3 {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--black);
  margin: 0;
}

@media only screen and (max-width: 600px) {
  #search-articles .our-product-items,
  #search-news-insight .our-product-items,
  #search-brochures .our-product-items {
    grid-template-columns: 1fr !important;
  }
}

@media only screen and (max-width: 1400px) {
  #search-articles .our-product-items,
  #search-news-insight .our-product-items,
  #search-brochures .our-product-items {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media only screen and (max-width: 1100px) {
  #search-articles .our-product-items,
  #search-news-insight .our-product-items,
  #search-brochures .our-product-items {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media only screen and (max-width: 768px) {
  #search-news-insight .our-product-items {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media only screen and (max-width: 600px) {
  #search-news-insight .our-product-items {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/*
 * Classic/SearchWP "Articles & insights" (#csearch-articles) — gallery-style
 * cards on BOTH /searchwp (template-searchwp.php) and /new-search
 * (template-classic-search.php). Mirrors the Gallery tile look: rounded corners
 * + shadow, hover zoom, 16:9 image, and the orange date ABOVE the title. The
 * grid uses the SAME responsive 1/2/3/4 columns as the Gallery grid so the
 * shared 2-row "+ See More" collapse (cutoff 2/4/6/8 in js) lines up exactly.
 */
#csearch-articles .our-product-items {
  display: grid;
  gap: 1.5rem;
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  grid-template-columns: 1fr;
}
@media (min-width: 480px) {
  #csearch-articles .our-product-items {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) {
  #csearch-articles .our-product-items {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  #csearch-articles .our-product-items {
    grid-template-columns: repeat(4, 1fr);
  }
}

#csearch-articles .our-product-item {
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 0 13px rgba(0, 0, 0, 0.15);
  border: none;
  transition: box-shadow 0.3s ease;
}
#csearch-articles .our-product-item:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

#csearch-articles .our-product-item-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--background-color-gray-alt);
  border-radius: 12px 12px 0 0;
  margin-bottom: 0;
}
#csearch-articles .our-product-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#csearch-articles .our-product-item:hover .our-product-item-img img {
  transform: scale(1.06);
}
#csearch-articles .our-product-item-img .product-image-placeholder {
  min-height: 0;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--background-color-gray-alt) 0%, var(--gray-lightest) 100%);
}

#csearch-articles .our-product-item-desc-plain {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
  gap: 3px;
}
#csearch-articles .our-product-item-desc-plain p.font-orange {
  font-size: var(--font-size-1xs);
  color: var(--primary-color-orange-light);
  font-weight: var(--font-weight-normal);
  margin: 0 0 3px;
  order: -1;
}
#csearch-articles .our-product-item-desc-plain h3 {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--black);
  margin: 0;
}

/* Ensure AI search cards use product-card-section styling */
#search-ai .product-card-section {
  background: var(--white);
  border: none;
  border-radius: 0.75rem;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 13px rgba(0, 0, 0, 0.15);
  position: relative;
}

#search-ai .product-card-section:hover {
  box-shadow: 0 0 13px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

[data-theme="dark"] #search-ai .product-card-section {
  border: none;
}

#search-ai .product-card-section .product-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  overflow: hidden;
  background: var(--background-color-gray-alt2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 0.75rem 0.75rem 0 0;
  margin-bottom: 0;
}

#search-ai .product-card-section .product-image img.product-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0;
}

#search-ai .product-card-section .product-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(
    135deg,
    var(--background-color-gray-lighter) 0%,
    var(--gray-light) 100%
  );
  color: var(--text-color-placeholder);
}

#search-ai .product-card-section .product-image-placeholder svg {
  opacity: 0.6;
}

#search-ai .product-card-section .product-image-placeholder .placeholder-text {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-placeholder);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Dark mode styles for product image placeholder - ensures good appearance in both modes */
[data-theme="dark"] .product-image-placeholder {
  background: linear-gradient(
    135deg,
    var(--background-color-gray-lighter) 0%,
    var(--gray-light) 100%
  );
}

[data-theme="dark"] .ai-s-card-1 .product-image-placeholder {
  background: linear-gradient(
    135deg,
    var(--background-color-gray-lighter) 0%,
    var(--gray-light) 100%
  );
}

[data-theme="dark"]
  #search-ai
  .product-card-section
  .product-image-placeholder {
  background: linear-gradient(
    135deg,
    var(--background-color-gray-lighter) 0%,
    var(--gray-light) 100%
  );
}

#search-ai .product-card-section .product-content {
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md)
    var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
  min-height: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  text-align: left;
  height: auto;
  min-height: auto;
}

#search-ai .product-card-section .product-title-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--black);
  margin: 0 0 0.3rem 0;
  flex-shrink: 0;
}

#search-ai .product-card-section .product-attributes {
  flex-direction: column;
  gap: 0;
  margin-top: 0;
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

#search-ai .product-card-section .product-attributes--bulleted {
  list-style: disc !important;
  padding-left: 16px !important;
}

.usai-fam-more-btn {
  display: inline-block;
  margin-top: var(--spacing-sm);
  padding: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-normal);
  color: var(--primary-color-alt);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--primary-color-alt);
  text-underline-offset: 2px;
}
.usai-fam-more-btn:hover {
  color: var(--primary-color-orange-darkest);
  text-decoration-color: var(--primary-color-orange-darkest);
}

#search-ai .product-card-section .product-attribute {
  font-size: var(--font-size-1xs);
  color: var(--text-color-gray-lightest);
}

#search-ai .product-card-section .product-footer-section {
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0;
  margin-top: 0;
}

#search-ai .product-card-section .product-color-choices {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

#search-ai .product-card-section .color-circle {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--border-color-gray-light);
  background: var(--border-color-gray-light);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  display: inline-block;
}

#search-ai .product-card-section .color-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px var(--border-color-gray-lighter);
}

/* Override old AI search styles for product-card-section cards */
#search-ai .product-card-section.our-product-item {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  padding-left: 0;
}

#search-ai .product-card-section .our-product-item-img {
  margin-bottom: 0;
  aspect-ratio: 1 / 1;
  height: auto;
}

#search-ai .product-card-section .our-product-item-img img {
  border-radius: 0;
  object-fit: cover;
  height: 100%;
}

#search-ai .product-card-section .our-product-item-desc {
  border: none;
  padding: 1.25rem;
  text-align: left;
  border-radius: 0;
  background: transparent;
  height: auto;
  min-height: auto;
}

#search-ai .product-card-section.usai-configurator-card .our-product-item-img {
  aspect-ratio: unset !important;
  height: 220px;
  min-height: 220px;
  max-height: 220px;
}

#search-ai .product-card-section.usai-configurator-card .our-product-item-desc {
  padding: var(--spacing-lg) !important;
}

/* Ensure jcarousel cards in AI search use proper styling */
#search-ai .jcarousel .product-card-section.our-product-item {
  width: 220px;
  max-width: 220px;
  margin-right: var(--spacing-md);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

/* Search results: Resources — tabs (configurator category order + names) */
#search-resources .resources-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0;
  margin: var(--spacing-lg) 0 0;
  padding: 0;
  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
}
#search-resources .res-tab {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-color-gray, #555);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin: 0 1.25rem -1px 0;
  padding: 0.5rem 0 0.65rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}
#search-resources .res-tab:hover,
#search-resources .res-tab:focus-visible {
  color: var(--primary-color);
  outline: none;
}
#search-resources .res-tab.is-active {
  color: var(--primary-color);
  border-bottom-color: transparent;
  font-weight: var(--font-weight-medium, 500);
}
[data-theme='dark'] #search-resources .resources-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
[data-theme='dark'] #search-resources .res-tab {
  color: var(--text-color-gray-lighter, #aaa);
}
#search-resources .search-resources-related-heading {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-strong);
  margin: var(--spacing-xl) 0 var(--spacing-md);
}
#search-resources .res-files-panels-wrap {
  margin-top: var(--spacing-lg);
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}
.res-files-product-group + .res-files-product-group {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.06));
}
.res-files-group-heading {
  font-size: 0.8125rem;
  font-weight: var(--font-weight-strong, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-color-gray-lighter, #777);
  margin: 0 0 var(--spacing-sm);
}
.res-files-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.res-files-list li {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  padding: 0;
  border-bottom: none;
}
.res-files-link {
  font-size: var(--font-size-base, 1rem);
  font-weight: var(--font-weight-normal, 400);
  color: var(--text-color, #222);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.res-files-link:hover,
.res-files-link:focus-visible {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}
.res-files-meta {
  font-size: var(--font-size-xs);
  color: var(--gray);
}
.res-files-empty {
  margin: 0;
  color: var(--gray);
}

/* .product-page-container .product-files-content-wrapper {
      margin: 0;
      border-radius: 0.5rem;
      box-shadow: none;
  } */

/* .product-files-content-wrapper .product-files-grid {
      gap: 0;
  }
  .product-files-content-wrapper .product-files-item { 
      padding: 0.25rem 0;
  } */

.product-page-container .product-images-layout {
  background-color: var(--white);
}

/* .product-page-container .product-files-top-bar {
      background-color: var(--white);
      border-radius: 0.5rem;
      padding: 1rem;
  } */
.section-wrapper .product-page-container {
  border-radius: var(--border-radius-md);
  background: var(--white);
}
.section-wrapper .product-header-content {
  border-radius: var(--border-radius-sm);
  border: 0;
  background-color: var(--white);
  padding: var(--spacing-2xl) 0;
  box-shadow: none;
}

/* mega-menu column gap; column-count is now driven by per-item meta via
   --mega-cols (set inline by USAI_Mega_Menu_Walker) with the desktop default
   of 4 living in mega-menu.css. */
.mega-menu-container .mega-panel-content {
  gap: 1vw;
}
@media screen and (min-device-width: 1200px) and (max-device-width: 1920px) {
  /* news css */
  .usai-news-grid-multiple-category-v2__title {
    font-weight: var(--font-weight-strong);
    font-size: var(--font-size-1lg);
    margin-bottom: var(--spacing-xs) !important;
  }
  label.usai-checkbox-item span {
    font-size: var(--font-size-1xs);
    font-weight: var(--font-weight-normal);
  }
  .usai-news-grid-multiple-category-v2
    .usai-news-grid-multiple-category-v2__tab {
    font-size: var(--font-size-sm);
    letter-spacing: 0.2px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .usai-news-grid-multiple-category-v2__tabs {
    gap: 15px !important;
  }
}
@media screen and (max-width: 767px) {
  body .usai-news-grid-multiple-category-v2__subheding,
  body h2.usai-news-grid-multiple-category-v2__filterby {
    padding-left: var(--spacing-md) !important;
    padding-right: var(--spacing-md) !important;
  }
  .usai-news-grid-multiple-category-v2__subheding {
    margin-bottom: var(--spacing-md) !important;
  }
  .usai-news-grid-multiple-category-v2__tabs {
    gap: 5px !important;
  }
}
.usai-news-grid-multiple-category-v2__subcats label {
  align-items: flex-start !important;
}
.usai-checkbox-grid {
  max-width: var(--max-width) !important;
  padding-left: var(--spacing-3xl-lg) !important;
  padding-right: var(--spacing-3xl-lg) !important;
  width: 100% !important;
}
.usai-checkbox-item input {
  margin-right: 2px !important;
}
.usai-news-grid-multiple-category-v2__subheding {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-light);
  padding-left: var(--spacing-3xl-lg);
  padding-right: var(--spacing-3xl-lg);
  max-width: var(--max-width);
  margin: 0 auto;
  margin-bottom: var(--spacing-lg);
}
span.usai-news-grid-multiple-category-v2__cat-name {
  color: var(--primary-color-alt);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
}
.usai-news-grid-multiple-category-v2__meta {
  float: none !important;
  padding-right: 0 !important;
  margin-top: 0 !important;
  margin: 0 0 0 auto;
  justify-content: flex-end;
  gap: 20px;
}
h2.usai-news-grid-multiple-category-v2__filterby {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.05em;
  color: var(--text-color-gray-darkest);
  font-family: var(--font-family-primary);
  padding-left: var(--spacing-3xl-lg);
  padding-right: var(--spacing-3xl-lg);
  max-width: var(--max-width);
  margin: 0 auto;
  letter-spacing: 0.5px;
}
span.usai-news-grid-multiple-category-v2__count {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-2xs);
}
.usai-news-grid-multiple-category-v2 .usai-news-grid-multiple-category-v2__tab {
  color: var(--text-color-gray) !important;
  font-weight: var(--font-weight-medium);
}
.usai-news-grid-multiple-category-v2__filter-bar
  .usai-news-grid-multiple-category-v2__tab.active:hover {
  font-weight: var(--font-weight-medium) !important;
}
.usai-news-grid-multiple-category-v2__sort ul.sort-dropdown {
  position: absolute;
  background: var(--white);
  padding: var(--spacing-md) var(--spacing-xl);
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-radius: 5px;
}
ul.sort-dropdown li {
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-2xs);
  cursor: pointer;
}
.usai-news-grid-multiple-category-v2__card-title {
  margin-top: 0;
}
.usai-news-grid-multiple-category-v2__body {
  padding: var(--spacing-md) var(--spacing-2xl) !important;
}
.sort-toggle {
  border: none !important;
  background: transparent !important;
  font-family: "futura-pt" !important;
  font-size: var(--font-size-2xs) !important;
  font-weight: var(--font-weight-bold) !important;
  display: flex;
  align-items: center;
  gap: 4px;
}
.usai-news-grid-multiple-category-v2__subcats {
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
    rgba(0, 0, 0, 0.06) 0px 8px 8px -1px !important;
}
.usai-news-grid-multiple-category-v2__meta {
  display: flex !important;
  align-items: center;
}
.usai-news-grid-multiple-category-v2__tab.active {
  color: var(--primary-color-alt) !important;
  border-bottom: none !important;
  font-weight: var(--font-weight-bold);
}
body .usai-news-grid-multiple-category-v2__tab.active:hover {
  background: var(--background-color-gray-light) !important;
}
.usai-news-grid-multiple-category-v2__card {
  box-shadow: 0 0 13px rgba(0, 0, 0, 0.15);
  border: none !important;
}
.usai-news-grid-multiple-category-v2__grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
}
.usai-news-grid-multiple-category-v2__img img,
.usai-news-grid-multiple-category-v2__card {
  border-radius: 15px 15px 0px 0px !important;
}
.usai-news-grid-multiple-category-v2__subcats {
  background: var(--background-color-gray-light) !important;
}
span.sort-arrow img {
  max-width: 10px;
}
.usai-news-grid-multiple-category-v2__tabs {
  flex-wrap: wrap;
}
/* mega menu */
ul#menu-mega-menu li:first-child .mega-column:first-child a {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-strong);
  margin-bottom: 5px;
  padding-bottom: 5px;
  color: var(--black) !important;
}
.mega-column a:hover {
  padding-left: 0;
}
.mega-column-headers a {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-strong);
  margin-top: 5px;
  padding-top: 5px;
  color: var(--black) !important;
}
.hide-items {
  opacity: 0;
}
.mega-column a.featured {
  color: var(--text-color-gray-dark);
  font-weight: var(--font-weight-normal);
}
.mega-column-title {
  color: var(--black);
}
.mega-column a {
  color: var(--text-color-gray-dark);
}
.color-indicator.classic-white {
  background: url(../images/tiers/classicwhite_icon-3.png);
  border: none;
  background-size: contain;
}
.color-indicator.warm-glow,
.color-indicator.dim-to-warm {
  background: url(../images/tiers/warmglow-2.png);
  background-size: contain;
}
.color-indicator.tunable {
  background: url(../images/tiers/colorselect-4.png);
  background-size: contain;
}
.color-indicator.infinite {
  background: url(../images/tiers/infinitecolor-3.png);
  background-size: contain;
}
.mega-column .color-indicator {
  width: 14px;
  height: 14px;
}
/* Mega panel padding only - column-count is per-item via --mega-cols, set
   inline by USAI_Mega_Menu_Walker from the _usai_megamenu_columns post-meta.
   The desktop grid-template-columns rule lives in mega-menu.css. */
.mega-panel-content {
  padding: var(--spacing-3xl) var(--spacing-3xl);
  max-width: 1200px;
}
ul#menu-mega-menu li:first-child .mega-column:first-child h4.mega-column-title {
  margin-bottom: 5px;
  padding-bottom: 5px;
}
h4.mega-column-title {
  margin-bottom: 0;
  padding-bottom: 0;
}
.mobile-submenu-title {
  font-size: var(--font-size-2xs);
  color: var(--black);
}
/* header css */
.header-left img {
  max-width: 200px;
}

/* Footer logo: mirror header logo (light/dark aware) at ~60% of header width */
.footer-logo img.footer_logo {
  max-width: 120px;
  width: auto;
  height: auto;
  display: block;
}
.footer-logo a {
  display: inline-block;
  line-height: 0;
}
.header-left {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 15px 40px;
}
.right-btn_fillter {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-left input {
  border: none !important;
  width: 450px;
}

.right-btn_fillter a {
  background: var(--primary-color-alt);
  text-decoration: none;
  color: var(--white);
  padding: 4px var(--spacing-xl);
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.right-btn_fillter a img {
  max-width: 15px;
}
.right-btn_fillter img {
  max-width: 35px;
}
.header-wrap {
  background: var(--background-color-gray-light);
  flex-wrap: wrap;
}
@media screen and (min-device-width: 1200px) and (max-device-width: 1920px) {
  .header-right {
    display: block !important;
    padding-top: var(--spacing-3xl);
  }
  section.header-wrap {
    display: block;
  }
}
@media screen and (min-device-width: 320px) and (max-device-width: 767px) {
  .header-left input {
    width: 100%;
  }
  .header-right {
    padding-top: 0 !important;
    float: none;
    position: static;
  }
  .header-left {
    gap: 10px;
    flex-wrap: wrap;
  }
  img.header_logo {
    width: 150px;
  }
  .header-wrap {
    display: block;
  }
}

@media screen and (min-device-width: 768px) and (max-device-width: 1200px) {
  .header-left input {
    border: none !important;
    width: 200px;
  }
  .hamburger-menu {
    height: 25px;
  }
  .header-left {
    gap: 25px;
  }
  .header-right {
    padding-top: 0 !important;
  }
}

body .usai-single-column-text-v2 b {
  color: var(--primary-color) !important;
}
main {
  padding: 0 !important;
}
/* @media screen and (min-device-width: 1200px) and (max-device-width: 2500px) { 
  body section.usai-bv2, body  img.usai-bv2-image {
      height: 500px !important;
      object-fit: cover;
  }
  } */
/* page 1 css */
.usai-category-wrapper .section-desc {
  font-size: var(--font-size-sm2) !important;
  font-weight: var(--font-weight-light);
}

@media screen and (min-device-width: 768px) and (max-device-width: 1200px) {
  .usai-grid.filtered-itemsed {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  body .usai-category-wrapper {
    padding: var(--spacing-3xl) var(--spacing-xl) !important;
  }
}
body .usai-2-image-caption-slider-v2__next img {
  max-width: 20px;
  height: auto;
}
.maincalss {
  color: var(--black);
}
body .usai-2-image-caption-slider-v2__next {
  height: 35px;
  width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body .usai-2-image-caption-slider-v2__caption p {
  font-size: var(--font-size-2xs);
  margin-bottom: 0;
}

/* page 3 css */
video.usai-bv2-video {
  width: 100%;
}
@media screen and (min-device-width: 768px) and (max-device-width: 1200px) {
  body .news_banner {
    padding: var(--spacing-3xl) var(--spacing-xl) !important;
  }
  body .news_tabs {
    gap: 20px !important;
  }
  ul.NewClass.news_tabs li {
    padding-bottom: 0 !important;
  }
}
@media screen and (min-device-width: 1201px) and (max-device-width: 1920px) {
  body .news_banner {
    padding: var(--spacing-3xl) 70px !important;
  }
}
body .news_banner {
  background: var(--white);
}

@media screen and (min-device-width: 320px) and (max-device-width: 767px) {
  body .NewClass.search-items input {
    width: auto !important;
  }
  .usai-single-column-text-v2 .section-title {
    font-size: var(--font-size-lg) !important;
  }
  body .news_banner {
    padding: var(--spacing-3xl) var(--spacing-xl) !important;
  }
}

/* page 4 css  */
body .NewClass[data-tab][data-active="1"] {
  border-bottom: none !important;
}

@media screen and (min-device-width: 768px) and (max-device-width: 1200px) {
  .maine-grid-items {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* page 6 css  */
body section.usai-text-image-section-v2 {
  background: var(--white);
  max-width: unset !important;
  padding: var(--spacing-3xl) var(--spacing-xl) !important;
}
body section.usai-text-image-section-v2 .container {
  max-width: 760px;
  margin: auto;
}
.usai-text-image-section-v2 .usai-tiw-image {
  width: 30% !important;
}
.usai-text-image-section-v2 .usai-tiw-content strong {
  display: block;
}

@media screen and (min-device-width: 320px) and (max-device-width: 767px) {
  .usai-tiw-row {
    display: block !important;
  }
  .usai-tiw-text {
    width: 100% !important;
  }
  .usai-tiw-text a {
    word-wrap: break-word;
  }
  .usai-text-image-section-v2 .usai-tiw-image {
    width: 100% !important;
    margin-top: 0 !important;
  }
}

/* page 7 css  */
section.usai-single-column-text-v2 span {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-strong);
}
.\33 -column p {
  font-size: var(--font-size-1xs);
  margin: 0;
}
.\33 -column {
  border-top: 2px solid var(--border-color-light);
  border-bottom: 2px solid var(--border-color-light);
  padding: var(--spacing-sm) 0;
  margin-bottom: var(--spacing-2xl);
  display: flex;
  gap: 20px;
}
section.usai-two-column-text-v2 .container {
  max-width: 750px;
  margin: auto;
}
section.usai-two-column-text-v2 {
  max-width: unset;
  background: var(--white);
}

h3.quote-heading {
  font-size: var(--font-size-xl);
  text-align: left;
  font-weight: var(--font-weight-light);
  margin: var(--spacing-4xl) 0 var(--spacing-3xl);
}
section.usai-single-column-text-v2 b {
  font-weight: var(--font-weight-strong);
}

/* page 10 css */
.usai-center-carousel .swiper-slide {
  margin: 0 !important;
}
/* .usai-single-column-text-v2 .section-content {
      border-bottom: 1px solid var(--border-color-light);
      padding-bottom: var(--spacing-2xl);
  } */
section#product-family-694a5794db17a {
  padding: var(--spacing-3xl);
}
.usai-brochure-carousel-v2 {
  background: var(--white) !important;
}
section.usai-single-column-text-v2 span {
  font-size: var(--font-size-2xs) !important;
  font-weight: var(--font-weight-normal);
}

/* page 11 css */
.usai-product-family-carousel-v2 {
  padding: var(--spacing-3xl) 0 var(--spacing-xl) !important;
}
.tags_items {
  display: flex;
  gap: 5px;
}
section.usai-single-column-text-v2 span {
  font-size: var(--font-size-2xs) !important;
  font-weight: var(--font-weight-normal);
  display: inline;
}
.usai-single-column-text-v2 .section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-strong);
  margin-bottom: var(--spacing-md);
}
.project-card h3 {
  color: var(--black);
}

/* breadcrumb css – horizontal padding matches the header so breadcrumbs
   align with the logo / header content and the card edge below. */
.breadcrumbs-wrap {
  background: var(--white);
}

.breadcrumbs-wrap .yoast-breadcrumbs {
  padding: var(--spacing-xl) var(--spacing-3xl-lg);
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--white);
}

.breadcrumbs-wrap .yoast-breadcrumbs span {
  color: var(--text-color-gray);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-1xs) !important;
  font-family: var(--font-family-primary);
}

.breadcrumbs-wrap .yoast-breadcrumbs a {
  color: var(--text-color-gray) !important;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-1xs) !important;
  font-family: var(--font-family-primary);
  text-decoration: none;
}

.breadcrumbs-wrap .yoast-breadcrumbs a:hover {
  color: var(--primary-color) !important;
  text-decoration: underline;
}

.breadcrumbs-wrap span.breadcrumb_last {
  color: var(--primary-color);
}

/* Yoast breadcrumbs – product-breadcrumb structure/style (match product-family breadcrumb) */
/* Applies with or without .breadcrumbs-wrap (e.g. index.php wrapper or Yoast shortcode) */
.yoast-breadcrumbs.product-breadcrumb,
.breadcrumbs-wrap .yoast-breadcrumbs.product-breadcrumb {
  padding: var(--spacing-xl) var(--spacing-3xl-lg);
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--white);
  color: var(--text-color-gray);
  font-size: var(--font-size-1xs);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
}
.yoast-breadcrumbs.product-breadcrumb span,
.breadcrumbs-wrap .yoast-breadcrumbs.product-breadcrumb span {
  color: var(--text-color-gray);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-1xs) !important;
  font-family: var(--font-family-primary);
}
.yoast-breadcrumbs.product-breadcrumb a,
.breadcrumbs-wrap .yoast-breadcrumbs.product-breadcrumb a {
  color: var(--text-color-gray) !important;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-1xs) !important;
  font-family: var(--font-family-primary);
  text-decoration: none;
}
.yoast-breadcrumbs.product-breadcrumb a:hover,
.breadcrumbs-wrap .yoast-breadcrumbs.product-breadcrumb a:hover {
  color: var(--primary-color) !important;
  text-decoration: underline;
}
.yoast-breadcrumbs.product-breadcrumb span.breadcrumb_last,
.breadcrumbs-wrap .yoast-breadcrumbs.product-breadcrumb span.breadcrumb_last {
  color: var(--primary-color);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-1xs) !important;
  font-family: var(--font-family-primary);
}
/* Product pages: horizontal inset comes from .section-wrapper.usailighting-wysiwyg only. */
.section-wrapper.usailighting-wysiwyg > .yoast-breadcrumbs.product-breadcrumb {
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Product pages ONLY: pull the breadcrumb flush-left (remove its left padding).
   Scoped to body.usai-product-page (added only on the product-configurator
   route), so product-family / gallery / product-filter / index breadcrumbs that
   share the .product-breadcrumb class are unaffected. The second selector adds
   the .section-wrapper.usailighting-wysiwyg ancestor so it out-specifies the
   inline <style> override the configurator injects on product pages
   (.section-wrapper.usailighting-wysiwyg > .product-breadcrumb { padding-left:
   20px/10px !important } across breakpoints); without it that inline rule wins. */
body.usai-product-page .yoast-breadcrumbs.product-breadcrumb,
body.usai-product-page .section-wrapper.usailighting-wysiwyg > .yoast-breadcrumbs.product-breadcrumb {
  padding-left: 0 !important;
}

/* Product filter page ONLY: same flush-left breadcrumb fix as product pages.
   The configurator injects an inline <style>
   (.section-wrapper.usailighting-wysiwyg > .product-breadcrumb { padding-left:
   20px !important }) on /product-filter/ too, pushing the breadcrumb right.
   Scoped to body.usai-product-filter-page (added only on that route) so the
   higher-specificity prefix out-specifies the injected rule. */
body.usai-product-filter-page .yoast-breadcrumbs.product-breadcrumb,
body.usai-product-filter-page .section-wrapper.usailighting-wysiwyg > .yoast-breadcrumbs.product-breadcrumb {
  padding-left: 0 !important;
}

/* Product filter page: breadcrumb aligned with header */
.yoast-breadcrumbs.product-filter-breadcrumb {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--spacing-3xl-lg);
  padding-right: var(--spacing-3xl-lg);
}
@media (max-width: 768px) {
  .yoast-breadcrumbs.product-filter-breadcrumb {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }
}

/* ── Breadcrumb responsive alignment ──
   At mobile widths breadcrumbs use 15px padding matching the header. */
@media only screen and (max-width: 768px) {
  .yoast-breadcrumbs,
  .breadcrumbs-wrap .yoast-breadcrumbs,
  .yoast-breadcrumbs.product-breadcrumb,
  .breadcrumbs-wrap .yoast-breadcrumbs.product-breadcrumb {
    max-width: none;
    margin: 0;
    padding: var(--spacing-xl) var(--spacing-md);
  }
}

/* Find-by-Housing pages (body.usai-housing-page): keep the breadcrumb's
   horizontal gutter aligned with the 24px housing content container below it,
   overriding the 15px (<=768px) / 40px (769-900px) site-wide breadcrumb padding
   that otherwise leaves the breadcrumb misaligned with the headline on mobile. */
@media only screen and (max-width: 900px) {
  .usai-housing-page .yoast-breadcrumbs.product-breadcrumb,
  .usai-housing-page .breadcrumbs-wrap .yoast-breadcrumbs.product-breadcrumb {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Hide native checkbox */
.usai-news-grid-multiple-category-v2 input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 0;
  height: 0;
  position: absolute;
}
.usai-news-grid-multiple-category-v2 label {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
}
.usai-news-grid-multiple-category-v2 label::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 5px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--black);
  background: transparent;
}

/* Checked state */
.usai-news-grid-multiple-category-v2
  input[type="checkbox"]:checked
  + label::before {
  color: var(--black);
}

/* Column Bottom Filler - Override inline styles for dark mode */
.column-bottom-filler {
  background-color: var(--background-color-gray) !important;
  border-color: var(--border-color-light) !important;
}

[data-theme="dark"] .column-bottom-filler {
  background-color: var(--background-color-gray) !important;
  border-color: var(--border-color) !important;
}

/* Contact Page - Two Column Layout */
.contact-page-layout {
  display: flex;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-md);
}
.contact-form-column {
  flex: 1;
  min-width: 0;
}
.contact-sidebar-column {
  flex: 0 0 280px;
  padding-top: var(--spacing-sm);
}
.contact-sidebar-column p {
  font-size: var(--font-size-2xs);
  color: var(--body-text-color);
  margin-bottom: var(--spacing-md);
}
.contact-sidebar-column p strong {
  color: var(--text-color);
  font-weight: var(--font-weight-bold);
}
.contact-sidebar-column p a {
  color: var(--primary-color);
  text-decoration: none;
}
.contact-sidebar-column p a:hover {
  text-decoration: underline;
}
@media (max-width: 768px) {
  .contact-page-layout {
    flex-direction: column;
    gap: var(--spacing-xl);
  }
  .contact-sidebar-column {
    flex: 1;
  }
}

/* Contact Page - Info Cards */
.contact-info-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}
.contact-info-card {
  background-color: var(--background-color-gray-lighter);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-sm);
  display: flex;
  flex-direction: column;
}
.contact-info-card h2 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-sm);
  border-bottom: none;
  padding-bottom: 0;
}
.contact-info-card p {
  font-size: var(--font-size-2xs);
  color: var(--body-text-color);
  margin-bottom: var(--spacing-sm);
}
.contact-info-card > p:first-of-type {
  flex-grow: 1;
  margin-bottom: var(--spacing-md);
}
.contact-info-card p a {
  color: var(--primary-color);
  text-decoration: none;
}
.contact-info-card p a:hover {
  text-decoration: underline;
}
.contact-info-card .btn.btn-primary {
  display: inline-block;
  width: fit-content;
  padding: var(--spacing-xs) var(--spacing-xl);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--white);
}
.contact-info-card .btn.btn-primary:hover {
  color: var(--white);
  background: var(--primary-color);
  border-color: var(--primary-color);
}
.contact-info-card > p:last-child {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .contact-info-cards {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .contact-info-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Contact Page - Form field ordering */
#wpforms-634 .wpforms-field-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}
#wpforms-634 .wpforms-field-container .wpforms-field {
  width: 100%;
  margin-bottom: 0;
  padding-bottom: 0;
}
#wpforms-634 .wpforms-field-label {
  margin-bottom: 2px;
  font-size: var(--font-size-2xs);
}
#wpforms-634 .wpforms-submit-container {
  margin-top: var(--spacing-md);
  padding-top: 0;
}
#wpforms-634 .wpforms-field-container .wpforms-field-name {
  order: 1;
}
#wpforms-634 .wpforms-field-container .wpforms-field-email {
  order: 2;
}
#wpforms-634 .wpforms-field-container .wpforms-field[data-field-id="4"] {
  order: 3;
}
#wpforms-634 .wpforms-field-container .wpforms-field[data-field-id="5"] {
  order: 4;
}
#wpforms-634 .wpforms-field-container .wpforms-field[data-field-id="6"] {
  order: 5;
}
#wpforms-634 .wpforms-field-container .wpforms-field-select {
  order: 6;
}
#wpforms-634 .wpforms-field-container .wpforms-field-textarea {
  order: 7;
}
#wpforms-634 .wpforms-field-container .wpforms-field-checkbox {
  order: 8;
}

/* Dark mode for contact page */
[data-theme="dark"] .contact-info-card {
  background-color: var(--background-dark);
}
[data-theme="dark"] .contact-info-card h2 {
  color: var(--text-color);
}
[data-theme="dark"] .contact-info-card p {
  color: var(--body-text-color);
}
[data-theme="dark"] .contact-sidebar-column p {
  color: var(--body-text-color);
}
[data-theme="dark"] .contact-sidebar-column p strong {
  color: var(--text-color);
}

/* ── Article Cards Grid ── */
.article-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}

.article-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
  border: 1px solid var(--gray-light);
}
.article-card:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-2px);
}

.article-card__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  max-height: 120px;
}
.article-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.article-card__body {
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.article-card__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-color);
  margin: 0 0 var(--spacing-sm) 0;
}
.article-card:hover .article-card__title {
  color: var(--primary-color);
}

.article-card__desc {
  font-size: var(--font-size-2xs);
  color: var(--text-color-gray);
  margin: 0 0 var(--spacing-md) 0;
  flex-grow: 1;
}

.article-card__date {
  font-size: var(--font-size-3xs);
  color: var(--text-color-gray);
  margin-top: auto;
}

@media (max-width: 1400px) {
  .article-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1000px) {
  .article-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .article-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* =======================================================================
   QA: Paragraph Styling Consistency
   Ref: /Users/darrengates/Desktop/USAI_v2/paragraph-styling.pdf
   Spec: futura-pt / 16px / 22px / 60% black / 400
   All declarations reference var(--qa-body-*) alias tokens (no literals).
   ======================================================================= */
:root {
  --qa-body-font-family: var(--font-family-primary);
  --qa-body-font-size:   var(--font-size-xs);
  --qa-body-line-height: var(--line-height-sm);
  --qa-body-color:       var(--body-text-color);
  --qa-body-font-weight: var(--font-weight-normal);
}

/* Core WP Paragraph block + classic/editor content */
.entry-content p,
.entry-content .wp-block-paragraph,
main .wp-block-paragraph,
main p.wp-block-paragraph {
  font-family: var(--qa-body-font-family);
  font-size:   var(--qa-body-font-size);
  line-height: var(--qa-body-line-height);
  color:       var(--qa-body-color);
  font-weight: var(--qa-body-font-weight);
}

/* 1. USAi Content Section V2 - description_v2 & author_v2 */
.usai-content-section-v2 p.desc,
.usai-content-section-v2 p.author,
.usai-content-section-v2 .desc,
.usai-content-section-v2 .author,
.usai-content-section-v2 .desc p,
.usai-content-section-v2 .author p {
  font-family: var(--qa-body-font-family);
  font-size:   var(--qa-body-font-size);
  line-height: var(--qa-body-line-height);
  color:       var(--qa-body-color);
  font-weight: var(--qa-body-font-weight);
}

/* 2. USAi Lighting title with navigation - content field */
.usailighting-title-with-navigation .navigation-wysiwyg,
.usailighting-title-with-navigation .navigation-wysiwyg p,
.usailighting-title-with-navigation .navigation-wysiwyg li,
.usailighting-title-with-navigation .navigation-wysiwyg span {
  font-family: var(--qa-body-font-family);
  font-size:   var(--qa-body-font-size);
  line-height: var(--qa-body-line-height);
  color:       var(--qa-body-color);
  font-weight: var(--qa-body-font-weight);
}

/* 3 & 4. USAi Lighting wysiwyg + wysiwyg with sidebar */
.usailighting-wysiwyg .wysiwyg-main,
.usailighting-wysiwyg .wysiwyg-main p,
.usailighting-wysiwyg .wysiwyg-main li,
.usailighting-wysiwyg .wysiwyg-main span,
.usailighting-wysiwyg .two-col-1,
.usailighting-wysiwyg .two-col-1 p,
.usailighting-wysiwyg .two-col-1 li,
.usailighting-wysiwyg .two-col-1 span,
.usailighting-wysiwyg .two-col-2,
.usailighting-wysiwyg .two-col-2 p,
.usailighting-wysiwyg .two-col-2 li,
.usailighting-wysiwyg .two-col-2 span {
  font-family: var(--qa-body-font-family);
  font-size:   var(--qa-body-font-size);
  line-height: var(--qa-body-line-height);
  color:       var(--qa-body-color);
  font-weight: var(--qa-body-font-weight);
}

/* 5. USAI Single Column Text Section V2
   Pre-existing rules at css/style.css ~6607-6609 and ~9611-9677 use !important
   on color/font-size for p and inner span; match with !important using tokens. */
.usai-single-column-text-v2 .section-description,
.usai-single-column-text-v2 .section-description p,
.usai-single-column-text-v2 .section-content,
.usai-single-column-text-v2 .section-content p,
.usai-single-column-text-v2 p,
section.usai-single-column-text-v2 .section-description,
section.usai-single-column-text-v2 .section-description p,
section.usai-single-column-text-v2 .section-content,
section.usai-single-column-text-v2 .section-content p,
section.usai-single-column-text-v2 p {
  font-family: var(--qa-body-font-family) !important;
  font-size:   var(--qa-body-font-size)   !important;
  line-height: var(--qa-body-line-height) !important;
  color:       var(--qa-body-color)       !important;
  font-weight: var(--qa-body-font-weight) !important;
}
section.usai-single-column-text-v2 .section-content span,
section.usai-single-column-text-v2 .section-description span,
section.usai-single-column-text-v2 span,
body .usai-single-column-text-v2 b,
body .usai-single-column-text-v2 strong {
  font-family: var(--qa-body-font-family) !important;
  font-size:   var(--qa-body-font-size)   !important;
  line-height: var(--qa-body-line-height) !important;
  color:       var(--qa-body-color)       !important;
}
/* Keep <b>/<strong> semantically bold but still in-spec for size/color/family */
body .usai-single-column-text-v2 b,
body .usai-single-column-text-v2 strong {
  font-weight: var(--font-weight-bold) !important;
}

/* 6. USAI Text With Image Section V2 */
.usai-text-image-section-v2 .usai-tiw-content,
.usai-text-image-section-v2 .usai-tiw-content p,
.usai-text-image-section-v2 .usai-tiw-content li,
.usai-text-image-section-v2 .usai-tiw-content span {
  font-family: var(--qa-body-font-family);
  font-size:   var(--qa-body-font-size);
  line-height: var(--qa-body-line-height);
  color:       var(--qa-body-color);
  font-weight: var(--qa-body-font-weight);
}

/* 7. USAI Two Column Text Section V2
   Existing rule sets .usai-two-col-wrapper p color to --text-color-gray-light (#888);
   override with the 60%-black token and spec sizing. */
.usai-two-column-text-v2 .usai-two-col-wrapper,
.usai-two-column-text-v2 .usai-two-col-wrapper p,
.usai-two-column-text-v2 .usai-two-col-wrapper li,
.usai-two-column-text-v2 .usai-two-col-wrapper span,
.usai-two-column-text-v2 .usai-col-desc,
.usai-two-column-text-v2 .usai-col-desc p,
.usai-two-column-text-v2 .usai-col-desc li,
.usai-two-column-text-v2 .usai-col-desc span {
  font-family: var(--qa-body-font-family);
  font-size:   var(--qa-body-font-size);
  line-height: var(--qa-body-line-height);
  color:       var(--qa-body-color);
  font-weight: var(--qa-body-font-weight);
}

/* 8. Gallery Project Detail Fields - applies to ALL gallery detail pages
   (single-gallery_project.php -> content-gallery-detail.php).
   Covered selectors: main.site-main-gallery-detail, article.gallery-project-detail,
   and body.single-gallery_project as a fallback. */
main.site-main-gallery-detail .gallery-project-description,
main.site-main-gallery-detail .gallery-project-description p,
main.site-main-gallery-detail .gallery-project-description li,
main.site-main-gallery-detail .gallery-project-description span,
main.site-main-gallery-detail .gallery-project-metadata,
main.site-main-gallery-detail .gallery-project-metadata p,
main.site-main-gallery-detail .gallery-project-metadata .meta-label,
main.site-main-gallery-detail .gallery-project-metadata .meta-value,
article.gallery-project-detail .gallery-project-description,
article.gallery-project-detail .gallery-project-description p,
article.gallery-project-detail .gallery-project-description li,
article.gallery-project-detail .gallery-project-description span,
article.gallery-project-detail .gallery-project-metadata,
article.gallery-project-detail .gallery-project-metadata p,
article.gallery-project-detail .gallery-project-metadata .meta-label,
article.gallery-project-detail .gallery-project-metadata .meta-value,
body.single-gallery_project .gallery-project-description,
body.single-gallery_project .gallery-project-description p,
body.single-gallery_project .gallery-project-description li,
body.single-gallery_project .gallery-project-metadata,
body.single-gallery_project .gallery-project-metadata p,
body.single-gallery_project .gallery-project-metadata .meta-label,
body.single-gallery_project .gallery-project-metadata .meta-value {
  font-family: var(--qa-body-font-family);
  font-size:   var(--qa-body-font-size);
  line-height: var(--qa-body-line-height);
  color:       var(--qa-body-color);
  font-weight: var(--qa-body-font-weight);
}
/* =================== end QA paragraph styling ========================= */

/* ====================================================================== */
/*  USAI Find by Housing — Housing Types grid + Housing detail pages      */
/* ====================================================================== */

.breadcrumbs-wrap + main > .usai-housing-types:first-child,
.breadcrumbs-wrap + main > .usai-housing-products--detail-header:first-child {
    padding-top: 0;
}

.usai-housing-types {
    background: var(--white);
    padding: var(--spacing-xl) 0 72px;
}

.usai-housing-types .usai-container,
.usai-housing-products .usai-container,
.usai-housing-media-text .usai-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-3xl-lg);
    background: transparent;
}

.usai-housing-types__header {
    text-align: left;
    margin-bottom: var(--spacing-2xl);
}

.usai-housing-types__title {
    /* Inherit the global h1 typography; only spacing is customized here. */
    margin: 0 0 var(--spacing-md);
}

.usai-housing-types__subcopy {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--text-color-gray);
    max-width: 960px;
    margin: 0;
}

.usai-housing-types__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-lg);
}

/* Housing-type cards — white shell, light shadow, image on top, bold title,
   orange subtitle, gray desc, black links with orange carets. */
.usai-housing-card {
    background: var(--white);
    border-radius: var(--border-radius-md, 12px);
    box-shadow: var(--shadow-light);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.usai-housing-card:hover {
    box-shadow: var(--shadow-light);
    transform: translateY(-2px);
}

.usai-housing-card__media {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--white);
    overflow: hidden;
}

.usai-housing-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.usai-housing-card__image--placeholder {
    width: 100%;
    height: 100%;
    background: var(--background-color-gray-lighter);
}

.usai-housing-card__body {
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xs);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    background: transparent;
}

.usai-housing-card__title {
    font-size: var(--font-size-ssm);
    line-height: 1.15;
    font-weight: var(--font-weight-bold, 700);
    color: var(--text-color);
    margin: 0;
}

.usai-housing-card__subtitle {
    font-size: calc(var(--font-size-xs) * 1.1);
    font-weight: var(--font-weight-normal);
    letter-spacing: 0.02em;
    color: var(--primary-color);
    margin: 0;
    text-transform: none;
}

.usai-housing-card__desc {
    font-size: var(--font-size-2xs);
    color: var(--text-color-gray);
    margin: 0;
}

.usai-housing-card__actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-lg);
}

.usai-housing-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-color);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold, 700);
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.15s ease, transform 0.15s ease;
}

.usai-housing-card__link-icon {
    font-size: var(--font-size-sm);
    line-height: 1;
    color: var(--primary-color);
    transition: transform 0.15s ease;
}

.usai-housing-card__link:hover,
.usai-housing-card__link:focus {
    color: var(--text-color);
    text-decoration: none;
}

/* Underline the text label only on hover, not the orange caret icon. */
.usai-housing-card__link:hover .usai-housing-card__link-label,
.usai-housing-card__link:focus .usai-housing-card__link-label {
    text-decoration: underline;
}

.usai-housing-card__link:hover .usai-housing-card__link-icon,
.usai-housing-card__link:focus .usai-housing-card__link-icon {
    transform: translateX(3px);
}

@media (max-width: 1279px) {
    .usai-housing-types__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .usai-housing-types .usai-container,
    .usai-housing-products .usai-container,
    .usai-housing-media-text .usai-container { padding: 0 24px; }
    .usai-housing-types__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .usai-housing-types__grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Housing detail page: aperture tabs + product grid ---------- */

.usai-housing-products {
    background: var(--white);
    padding: 48px 0 96px;
}

/* Detail-page header lives in its own block/section just above the aperture
   products section; drop its bottom padding so the two sections don't stack a
   double vertical gap between the header and the tabs. */
.usai-housing-products--detail-header {
    padding-bottom: 0;
}

.usai-housing-products__header {
    margin-bottom: 48px;
    max-width: 960px;
}

.usai-housing-products__headline {
    /* Inherit the global h1 typography; only spacing is customized here. */
    margin: 0 0 var(--spacing-xs);
}

.usai-housing-products__eyebrow {
    font-size: var(--font-size-sm2);
    font-weight: var(--font-weight-normal);
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-color);
    margin: 0 0 var(--spacing-xl);
}

.usai-housing-products__desc {
    font-size: var(--font-size-2xs);
    color: var(--text-color-gray);
    margin: 0 0 16px;
}

/* The description now renders WYSIWYG HTML (wp_kses_post) inside a div, so
   inherit the desc typography on nested paragraphs and tidy their margins. */
.usai-housing-products__desc p {
    font-size: inherit;
    color: inherit;
    margin: 0 0 16px;
}

.usai-housing-products__desc p:last-child {
    margin-bottom: 0;
}

.usai-housing-products__cta {
    margin: 0;
}

.usai-housing-products__view-all {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-strong);
    color: var(--primary-color, #f47e2c);
    text-decoration: none;
    letter-spacing: 0.03em;
}

.usai-housing-products__view-all:hover {
    text-decoration: underline;
}

/* Compare-popup anchor on housing detail pages. The base .usai-family-hdr is
   flex/space-between (for a left title + right badge); here there is only the
   injected Compare pill, so right-align it and tighten the spacing. */
.usai-housing-products__compare-bar {
    justify-content: flex-end;
    align-items: center;
    margin-bottom: var(--spacing-md);
    min-height: 0;
}

.usai-housing-products__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) 24px;
    margin-bottom: 32px;
    padding-bottom: 4px;
}

.usai-housing-products__tab {
    appearance: none;
    background: transparent;
    border: none;
    padding: 10px 4px 14px;
    font-size: 15px;
    font-weight: var(--font-weight-strong);
    color: var(--text-color-gray-lighter, #999);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
}

.usai-housing-products__tab:hover {
    color: var(--black-color, #222);
}

.usai-housing-products__tab.is-active {
    color: var(--black-color, #222);
    font-weight: var(--font-weight-bold);
    /* Active tab is indicated by bold weight, not an orange underline. Keep the
       transparent border (from the base rule) so there is no layout shift. */
    border-bottom-color: transparent;
}

.usai-housing-products__panel {
    display: none;
}

.usai-housing-products__panel.is-active {
    display: block;
}

/* Hide the per-card Configure button on housing detail pages — these cards
   are presented as a passive slideshow, the user clicks the card to navigate
   to the full product page rather than configuring inline. */
/* Product card "Configure" CTA — rounded orange pill, near-full-width
   inside the card with breathing room beneath it. Used by
   template-parts/block/content-product-card.php (the /product-family/,
   /product-filter/, and gallery contexts) and
   template-parts/ai-search-product-li.php (AI-search results). Mirrors
   the .usai-btn-primary brand pattern (style.css:1404) sized as a card
   CTA: the wrapper supplies side + bottom padding so the pill stops short
   of the card edges, and the button stretches to width:100% inside it.
   Mixed-case label by design (matches the source PHP "Configure"). The
   .usai-housing-products override below opts housing-detail cards out by
   hiding the wrapper entirely. */
.product-configure-btn-wrapper {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-md, 12px);
    padding: 0 var(--spacing-md) var(--spacing-md);
}
.product-configure-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 7px 24px;
    border: 1px solid var(--primary-color);
    border-radius: 999px;
    background: var(--primary-color);
    color: var(--white);
    font-family: inherit;
    font-size: var(--font-size-2xs, 13px);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.product-configure-btn:hover,
.product-configure-btn:focus-visible {
    background: var(--white);
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.product-configure-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.usai-housing-products .product-configure-btn-wrapper {
    display: none !important;
}

/* Housing-detail Swiper slider (mirrors the home discover-slider visual
   patterns with prev/next nav-btns and a thin progress bar). */
.usai-housing-products__slider-wrapper {
    position: relative;
}

.usai-housing-products__slider {
    /* Horizontal clip hides off-screen slides; the vertical padding keeps the
       product cards' drop-shadow (~13px blur + hover lift) from being cut off. */
    overflow: hidden;
    padding: 6px 0 26px;
}

.usai-housing-products__slider .swiper-wrapper {
    align-items: stretch;
}

.usai-housing-products__slider .swiper-slide {
    width: 320px;
    height: auto;
    box-sizing: border-box;
}

.usai-housing-products__slider .swiper-slide > * {
    height: 100%;
}

.usai-housing-products__slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--gray-border, #cfcdcd);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: filter 0.15s ease;
}

.usai-housing-products__slider-nav:hover {
    filter: brightness(1.05);
}

.usai-housing-products__slider-nav.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.usai-housing-products__slider-nav--prev {
    left: -8px;
}

.usai-housing-products__slider-nav--next {
    right: -8px;
}

.usai-housing-products__slider-progress {
    margin-top: 16px;
    height: 2px;
    background: var(--gray-border-alt6, #eee);
    border-radius: 2px;
    overflow: hidden;
}

.usai-housing-products__slider-progress-bar {
    height: 100%;
    background: var(--primary-color);
    width: 0;
    transition: width 0.25s ease;
}

.usai-housing-products__empty {
    padding: 48px 0;
    text-align: center;
    color: var(--text-color-gray);
}

/* Housing detail: optional section title above carousel tabs */
.usai-housing-products__section-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    margin: 0 0 var(--spacing-lg);
    line-height: 1.2;
}

.usai-housing-products--carousel {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
    background: var(--background-color-gray-lighter);
}

/* On wide desktops let the carousel break out wider than the header/media-text
   sections (which stay capped at --max-width). Below 1500px it keeps the shared
   --max-width so it stays aligned with the header/media-text containers. */
@media (min-width: 1500px) {
    .usai-housing-products--carousel .usai-container {
        max-width: 2400px;
    }
}

/* Two-column promo: text + image/video (housing detail pages) */
.usai-housing-media-text {
    background: var(--background-color-gray-lighter);
    padding: var(--spacing-2xl) 0;
}

.usai-housing-media-text__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--spacing-4xl);
    align-items: center;
}

.usai-housing-media-text--media-left .usai-housing-media-text__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.usai-housing-media-text--media-left .usai-housing-media-text__content {
    order: 2;
}

.usai-housing-media-text--media-left .usai-housing-media-text__media {
    order: 1;
}

.usai-housing-media-text__section-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    margin: 0 0 var(--spacing-md);
    line-height: 1.2;
}

.usai-housing-media-text__body {
    font-size: var(--font-size-2xs);
    color: var(--text-color-gray);
    margin-bottom: var(--spacing-lg);
}

.usai-housing-media-text__body p {
    font-size: inherit;
    color: inherit;
    margin: 0 0 var(--spacing-md);
}

.usai-housing-media-text__body p:last-child {
    margin-bottom: 0;
}

/* View Products CTA styled as the primary orange button (matches the site's
   .usai-btn-primary design language: orange fill, white text, pill radius). */
.usai-housing-media-text__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-color);
    color: var(--white);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    padding: 10px 22px;
    border: 1px solid var(--primary-color);
    border-radius: 24px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Buttons in the site design language don't carry the inline caret. */
.usai-housing-media-text__cta-icon {
    display: none;
}

.usai-housing-media-text__cta:hover,
.usai-housing-media-text__cta:focus {
    color: var(--white);
    background: var(--primary-color-orange-darkest, #b34d12);
    border-color: var(--primary-color-orange-darkest, #b34d12);
    text-decoration: none;
}

.usai-housing-media-text__media {
    width: 100%;
    aspect-ratio: 866 / 410;
    overflow: hidden;
    border-radius: var(--border-radius-sm);
    background: var(--background-color-gray-lighter);
}

.usai-housing-media-text__media img,
.usai-housing-media-text__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 900px) {
    .usai-housing-products__slider .swiper-slide { width: 280px; }
    .usai-housing-products__slider-nav { display: none; }
    .usai-housing-media-text__inner {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    .usai-housing-media-text--media-left .usai-housing-media-text__content,
    .usai-housing-media-text--media-left .usai-housing-media-text__media {
        order: unset;
    }
}
/* ====================================================================== */
/*  END Find by Housing                                                   */
/* ====================================================================== */

/* ====================================================================== */
/*  Hero flush under mega-menu                                            */
/*  When the first ACF block in a post is a hero (e.g. usai-bv2),         */
/*  <main> gets the `has-hero-flush` class in index.php so the hero sits  */
/*  flush against the mega-menu (no top margin/padding gap).              */
/* ====================================================================== */
main.has-hero-flush,
.single main.has-hero-flush {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
main.has-hero-flush > .usai-bv2:first-child,
main.has-hero-flush > section.usai-bv2:first-child,
main.has-hero-flush > img.usai-bv2-image:first-child {
  margin-top: 0 !important;
}

/* ============================================================
   Search results: "Not finding what you need?" help bar +
   Gallery / Brochures / News carousels (classic + AI pages)
   ============================================================ */

/* --- Orange "Not finding what you need?" bar -> opens Ask us-ai chat --- */
.usai-ai-help-bar-wrap {
  margin: 32px auto;
}
/* AI search (/usai-search): match the centered .section-wrapper width + inset. */
.page-template-template-search .usai-ai-help-bar-wrap {
  max-width: var(--max-width);
  padding: 0 var(--section-h-padding);
}
/* Classic search (/searchwp): the .csearch-results container already insets,
   so the bar runs flush with the flat .csearch-section blocks. */
.csearch-main .usai-ai-help-bar-wrap {
  max-width: none;
  padding: 0;
}
.usai-ai-help-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  text-align: left;
  background: var(--usai-help-bar-bg);
  color: var(--text-color);
  border: none;
  border-radius: var(--border-radius-sm, 8px);
  padding: 22px 26px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  box-shadow: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.usai-ai-help-bar:hover {
  background: var(--usai-help-bar-bg-hover);
  box-shadow: 0 4px 16px rgba(224, 104, 32, 0.18);
}
.usai-ai-help-bar:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}
.usai-ai-help-bar__badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  /* The badge image is already the full circular US-AI mark on a transparent
     background, so the container just sizes it (no CSS-drawn circle). */
  background: transparent;
}
.usai-ai-help-bar__badge-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.usai-ai-help-bar__text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.usai-ai-help-bar__title {
  font-size: var(--font-size-lg, 20px);
  font-weight: 700;
  line-height: 1.2;
}
.usai-ai-help-bar__sub {
  font-size: var(--font-size-sm, 14px);
  line-height: 1.35;
  color: var(--text-color-gray);
  opacity: 1;
}
.usai-ai-help-bar__arrow {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 8px;
  color: var(--primary-color);
  transition: transform 0.18s ease;
}
.usai-ai-help-bar__arrow svg {
  display: block;
}
.usai-ai-help-bar:hover .usai-ai-help-bar__arrow {
  transform: translateX(4px);
}
@media (max-width: 600px) {
  .usai-ai-help-bar {
    gap: 14px;
    padding: 18px;
  }
  .usai-ai-help-bar__badge {
    width: 52px;
    height: 52px;
  }
}
/* Dark mode is handled by the --usai-help-bar-bg / --usai-help-bar-bg-hover
   variables (defined per-theme above); the orange badge + arrow keep working
   via --primary-color, and the (theme-aware) --text-color drives legible text. */

/* Classic search (/searchwp): the shared carousel uses the AI-search .section-wrapper
   + .our-product-main (white card) shell, but classic sections are flat
   .csearch-section blocks inside the centered .csearch-results container. Strip the
   card / extra inset so the carousel lines up with its sibling classic sections. */
.csearch-main .usai-search-carousel.section-wrapper {
  max-width: none;
  margin: 36px 0;
  padding: 0;
}
.csearch-main .usai-search-carousel .usai-search-carousel__main.our-product-main {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.csearch-main .usai-search-carousel .usai-search-carousel__title {
  font-size: 22px;
}

/* --- Carousel section header (heading + View All) --- */
.usai-search-carousel .usai-search-carousel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  /* Extra breathing room below the header (and its "View All" button) before the
     carousel starts. */
  padding-bottom: 3px;
}
.usai-search-carousel .usai-search-carousel__title {
  margin: 0;
}
.usai-view-all {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-color);
  color: var(--on-primary-color);
  font-weight: var(--font-weight-normal, 400);
  font-size: var(--font-size-2xs, 14px);
  line-height: 1;
  padding: 8px 18px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  margin-bottom: 5px;
  transition: filter 0.18s ease;
}
.usai-view-all:hover {
  filter: brightness(1.06);
  color: var(--on-primary-color);
}
/* The "View All" header link for Brochures & Guides / News & Insights has no
   real destination yet, so it renders with the --placeholder modifier. Per
   design, it must still read as the same orange CTA as the Project Gallery
   "View All" (only its dead-link href + aria-disabled differ). */
.usai-view-all--placeholder {
  background: var(--primary-color);
  color: var(--on-primary-color);
  cursor: default;
}
.usai-view-all--placeholder:hover {
  filter: brightness(1.06);
  color: var(--on-primary-color);
}

/* --- Carousel slide sizing: ~4 cards, no half-peek; cards fill the slide --- */
.usai-search-carousel .product-detail-swiper .swiper-slide {
  width: calc((100% - 45px) / 4);
}
.usai-search-carousel .product-detail-swiper .swiper-slide > * {
  width: 100%;
  height: 100%;
  margin: 0;
}
.usai-search-carousel .product-detail-swiper .swiper-slide .our-product-item,
.usai-search-carousel .product-detail-swiper .swiper-slide .gallery-project-tile {
  width: 100%;
  height: 100%;
  margin: 0;
}
@media (max-width: 1200px) {
  .usai-search-carousel .product-detail-swiper .swiper-slide {
    width: calc((100% - 30px) / 3);
  }
}
@media (max-width: 900px) {
  .usai-search-carousel .product-detail-swiper .swiper-slide {
    width: calc((100% - 15px) / 2);
  }
}
@media (max-width: 600px) {
  .usai-search-carousel .product-detail-swiper .swiper-slide {
    width: 78%;
  }
}

/* --- Brochures & Guides card title (issue 4b): match the News & Insights card
   text (--font-size-xs / medium) across BOTH the AI (#search-brochures) and
   classic (#csearch-brochures) carousels. The classic side otherwise falls back
   to `.our-product-item-desc h3` (--font-size-sm), which reads too large. Scoping
   to `.usai-search-carousel` keeps this to the search carousels only. --- */
.usai-search-carousel .our-product-item-desc-plain h3 {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--black);
  margin: 0;
}

/* --- Brochures & Guides search cards match the attachment-downloads
   "All Brochures and Guides" carousel (.brochure-card): fixed-width portrait
   cards (~180x250) with rounded corners and a soft drop shadow, rather than the
   shared 16:9 gallery-card look. Fixed slide width works because the
   product-detail swiper uses slidesPerView:'auto'. Id-scoped to the AI
   (#search-brochures) and classic (#csearch-brochures) brochure carousels. --- */
#search-brochures .product-detail-swiper .swiper-slide,
#csearch-brochures .product-detail-swiper .swiper-slide {
  width: 180px;
}
@media (max-width: 600px) {
  #search-brochures .product-detail-swiper .swiper-slide,
  #csearch-brochures .product-detail-swiper .swiper-slide {
    width: 150px;
  }
}

/* Neutralize the shared card container so the shadow/rounding live on the cover
   image itself (matching .brochure-card, which has no card box). */
#search-brochures .our-product-item,
#csearch-brochures .our-product-item {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
#search-brochures .our-product-item:hover,
#csearch-brochures .our-product-item:hover {
  box-shadow: none;
}

/* Portrait cover image: 18:25 ratio == 180x250, rounded 14px, soft shadow. */
#search-brochures .our-product-item-img,
#csearch-brochures .our-product-item-img {
  aspect-ratio: 18 / 25;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  background: var(--background-color-gray-alt);
}
#search-brochures .our-product-item-img img,
#csearch-brochures .our-product-item-img img {
  border-radius: 14px;
}

/* Title sits directly beneath the cover, like .brochure-name. */
#search-brochures .our-product-item-desc,
#csearch-brochures .our-product-item-desc {
  padding: 10px 2px 0;
}

/* --- Project Gallery cards inside the search carousel: match the /gallery card
   design (rounded card, shadow, 16:9 thumbnail with hover zoom, orange location
   above a dark title). The canonical rules at .gallery-main-section
   .gallery-project-tile are scoped to that page, so the same tile markup renders
   plain here; mirror the design under .usai-search-carousel. --- */
.usai-search-carousel .gallery-project-tile {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 0 13px rgba(0, 0, 0, 0.15);
  border: none;
}
.usai-search-carousel .gallery-project-tile a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.usai-search-carousel .gallery-project-tile .project-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--background-color-gray-alt);
  border-radius: 12px 12px 0 0;
}
.usai-search-carousel .gallery-project-tile .project-thumbnail img.gallery-thumb-img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.usai-search-carousel .gallery-project-tile .project-thumbnail img.gallery-thumb-img.loaded {
  opacity: 1;
}
.usai-search-carousel .gallery-project-tile .project-thumbnail.thumb-loaded::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
  pointer-events: none;
}
.usai-search-carousel .gallery-project-tile .project-thumbnail.thumb-loaded:hover::after {
  background: rgba(0, 0, 0, 0.12);
}
.usai-search-carousel .gallery-project-tile .project-thumbnail.thumb-loaded img.gallery-thumb-img.loaded {
  transform: scale(1.08);
  transform-origin: center center;
  transition:
    opacity 0.25s ease,
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.usai-search-carousel .gallery-project-tile .project-thumbnail.thumb-loaded:hover img.gallery-thumb-img.loaded {
  transform: scale(1.08) translateY(-2%);
}
.usai-search-carousel .gallery-project-tile .project-tile-content {
  padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);
  background: var(--white);
}
.usai-search-carousel .gallery-project-tile .project-location {
  font-size: var(--font-size-1xs);
  color: var(--primary-color-orange-light);
  font-weight: var(--font-weight-normal);
  margin: 0 0 3px;
}
.usai-search-carousel .gallery-project-tile .project-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--black);
  margin: 0;
}