/*
 * Public storefront visual polish.
 * Adds glass/grid structure and a calmer color hierarchy without relying on shadows.
 */

html[data-theme] body .home-storefront,
html[data-theme] body .industrial-detail-shell,
html[data-theme] body .industrial-product-grid {
  --visual-blue: #4f8fcb;
  --visual-cyan: #39b9d6;
  --visual-teal: #3db39f;
  --visual-mint: #69c7a7;
  --visual-amber: #d7a557;
  --visual-rose: #d8828c;
  --visual-violet: #9b8bdc;
  --visual-card-tone: var(--visual-blue);
  --visual-grid-line: color-mix(in srgb, var(--visual-card-tone) 17%, transparent);
  --visual-grid-line-soft: color-mix(in srgb, var(--text-primary) 5%, transparent);
  --visual-glass: color-mix(in srgb, var(--panel-bg-strong) 84%, transparent);
  --visual-glass-strong: color-mix(in srgb, var(--panel-bg-strong) 92%, transparent);
  --visual-border: color-mix(in srgb, var(--visual-card-tone) 32%, var(--line-color));
  --visual-heading: color-mix(in srgb, var(--text-primary) 80%, var(--visual-card-tone));
  --visual-copy: color-mix(in srgb, var(--text-soft) 78%, var(--visual-card-tone));
  --visual-muted: color-mix(in srgb, var(--text-muted) 82%, var(--visual-card-tone));
}

:root[data-theme="light"] body .home-storefront,
:root[data-theme="light"] body .industrial-detail-shell,
:root[data-theme="light"] body .industrial-product-grid {
  --visual-grid-line: color-mix(in srgb, var(--visual-card-tone) 16%, transparent);
  --visual-grid-line-soft: color-mix(in srgb, #35516b 8%, transparent);
  --visual-glass: color-mix(in srgb, #ffffff 78%, transparent);
  --visual-glass-strong: color-mix(in srgb, #ffffff 90%, transparent);
  --visual-border: color-mix(in srgb, var(--visual-card-tone) 34%, #cbd9ea);
  --visual-heading: color-mix(in srgb, #0f172a 82%, var(--visual-card-tone));
  --visual-copy: color-mix(in srgb, #475569 76%, var(--visual-card-tone));
  --visual-muted: color-mix(in srgb, #64748b 82%, var(--visual-card-tone));
}

html[data-theme] body .home-storefront {
  --home-shadow-sm: none;
  --home-shadow-md: none;
  --home-muted: var(--visual-muted);
}

html[data-theme] body .home-storefront :is(
  .home-hero-shell,
  .home-hero-copy-card,
  .home-hero-media-frame,
  .home-hero-point-item,
  .home-hero-metric-card,
  .storefront-service-card,
  .storefront-category-card,
  .storefront-brand-card,
  .storefront-compact-product,
  .storefront-product-card,
  .storefront-process-card,
  .storefront-trust-card,
  .storefront-sales-path-card,
  .storefront-recommend-card,
  .storefront-rfq-product-row,
  .storefront-procurement-panel,
  .storefront-rfq-panel
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: var(--visual-border) !important;
  background:
    linear-gradient(var(--visual-grid-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--visual-grid-line) 1px, transparent 1px),
    linear-gradient(135deg, color-mix(in srgb, var(--visual-card-tone) 13%, transparent), transparent 54%),
    linear-gradient(180deg, color-mix(in srgb, var(--visual-glass-strong) 82%, transparent), var(--visual-glass)) !important;
  background-size: 4.35rem 4.35rem, 4.35rem 4.35rem, auto, auto !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html[data-theme] body .home-storefront :is(
  .home-hero-shell,
  .storefront-service-card,
  .storefront-product-card,
  .storefront-category-card,
  .storefront-process-card,
  .storefront-trust-card,
  .storefront-sales-path-card,
  .storefront-procurement-panel,
  .storefront-rfq-panel
)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(118deg, transparent 0 34%, color-mix(in srgb, var(--visual-card-tone) 14%, transparent) 34% 38%, transparent 38% 100%),
    linear-gradient(118deg, transparent 0 55%, color-mix(in srgb, var(--visual-cyan) 10%, transparent) 55% 58%, transparent 58% 100%);
  opacity: 0.72;
}

html[data-theme] body .home-storefront :is(.home-hero-shell, .home-hero-copy-card)::before {
  background-image:
    linear-gradient(var(--visual-grid-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--visual-grid-line) 1px, transparent 1px) !important;
  background-size: 4.6rem 4.6rem !important;
}

html[data-theme] body .home-storefront :is(
  .home-hero-progress-segment,
  .home-hero-progress-segment.is-active,
  .home-hero-action,
  .home-hero-nav-button,
  .storefront-brand-card,
  .storefront-service-icon
) {
  box-shadow: none !important;
  text-shadow: none !important;
}

html[data-theme] body .home-storefront .storefront-product-media::after {
  box-shadow: none !important;
}

html[data-theme] body .home-storefront :is(.home-hero-slide-title, .storefront-section-header h2, .storefront-rfq-panel h2) {
  color: var(--visual-heading);
  text-shadow: none !important;
}

html[data-theme] body .home-storefront :is(.home-hero-slide-summary, .storefront-section-header p, .storefront-service-card small, .storefront-product-copy, .storefront-trust-card p, .storefront-process-card p) {
  color: var(--visual-copy);
}

html[data-theme] body .home-storefront :is(.storefront-service-card strong, .storefront-product-card h3, .storefront-brand-card strong, .storefront-category-card strong, .storefront-process-card h3, .storefront-trust-card strong) {
  color: color-mix(in srgb, var(--text-primary) 78%, var(--visual-card-tone));
}

html[data-theme] body .home-storefront .storefront-section-header h2 {
  display: inline-grid;
  gap: 0.42rem;
  justify-items: start;
}

html[dir="rtl"][data-theme] body .home-storefront .storefront-section-header h2 {
  justify-items: end;
}

html[data-theme] body .home-storefront .storefront-section-header h2::after {
  content: "";
  width: min(6.2rem, 72%);
  height: 0.16rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--visual-card-tone), color-mix(in srgb, var(--visual-cyan) 72%, transparent));
}

html[data-theme] body .home-storefront .home-hero-slide-title::after,
html[data-theme] body .home-storefront .home-hero-point-item::before {
  background: color-mix(in srgb, var(--visual-card-tone) 82%, var(--visual-cyan));
  box-shadow: none !important;
}

html[data-theme] body .home-storefront .home-hero-progress-segment.is-active {
  background: linear-gradient(90deg, var(--visual-card-tone), var(--visual-teal), var(--visual-amber));
}

html[data-theme] body .home-storefront .storefront-service-card-primary,
html[data-theme] body .home-storefront .home-hero-surface-midnight,
html[data-theme] body .home-storefront .storefront-product-card:nth-child(4n+1),
html[data-theme] body .home-storefront .storefront-category-card:nth-child(4n+1),
html[data-theme] body .home-storefront .storefront-process-card:nth-child(3n+1),
html[data-theme] body .home-storefront .storefront-trust-card:nth-child(4n+1) {
  --visual-card-tone: var(--visual-blue);
}

html[data-theme] body .home-storefront .storefront-service-card-warning,
html[data-theme] body .home-storefront .home-hero-surface-pearl,
html[data-theme] body .home-storefront .storefront-product-card:nth-child(4n+2),
html[data-theme] body .home-storefront .storefront-category-card:nth-child(4n+2),
html[data-theme] body .home-storefront .storefront-process-card:nth-child(3n+2),
html[data-theme] body .home-storefront .storefront-trust-card:nth-child(4n+2) {
  --visual-card-tone: var(--visual-amber);
}

html[data-theme] body .home-storefront .storefront-service-card-success,
html[data-theme] body .home-storefront .home-hero-surface-brand,
html[data-theme] body .home-storefront .storefront-product-card:nth-child(4n+3),
html[data-theme] body .home-storefront .storefront-category-card:nth-child(4n+3),
html[data-theme] body .home-storefront .storefront-process-card:nth-child(3n),
html[data-theme] body .home-storefront .storefront-trust-card:nth-child(4n+3) {
  --visual-card-tone: var(--visual-teal);
}

html[data-theme] body .home-storefront .storefront-service-card-info,
html[data-theme] body .home-storefront .storefront-product-card:nth-child(4n),
html[data-theme] body .home-storefront .storefront-category-card:nth-child(4n),
html[data-theme] body .home-storefront .storefront-trust-card:nth-child(4n) {
  --visual-card-tone: var(--visual-violet);
}

html[data-theme] body .home-storefront .storefront-sales-path-card-teal,
html[data-theme] body .home-storefront .storefront-procurement-panel,
html[data-theme] body .home-storefront .storefront-rfq-panel {
  --visual-card-tone: var(--visual-teal);
}

html[data-theme] body .home-storefront .storefront-sales-path-card-amber,
html[data-theme] body .home-storefront .storefront-recommend-card:nth-child(3n+2) {
  --visual-card-tone: var(--visual-amber);
}

html[data-theme] body .home-storefront .storefront-sales-path-card-cyan,
html[data-theme] body .home-storefront .storefront-recommend-card:nth-child(3n+1) {
  --visual-card-tone: var(--visual-cyan);
}

html[data-theme] body .home-storefront .storefront-recommend-card:nth-child(3n) {
  --visual-card-tone: var(--visual-rose);
}

html[data-theme] body .home-storefront :is(.storefront-product-media, .storefront-compact-media, .storefront-brand-logo, .storefront-category-visual) {
  background:
    linear-gradient(color-mix(in srgb, var(--visual-card-tone) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--visual-card-tone) 12%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--panel-bg) 50%, transparent) !important;
  background-size: 3.3rem 3.3rem !important;
  box-shadow: none !important;
}

html[data-theme] body .home-storefront :is(.storefront-brand-logo img, .storefront-product-image, .storefront-compact-media img) {
  background: transparent !important;
}

/*
 * Homepage-only finish: keep the industrial/product-page structure, but remove
 * the busy diagonal overlays and reserve the grid for large composition areas.
 */
html[data-theme] body .home-storefront[data-home-storefront] {
  --visual-grid-line: color-mix(in srgb, var(--visual-card-tone) 2.5%, transparent);
  --visual-grid-line-soft: color-mix(in srgb, var(--text-primary) 0.8%, transparent);
}

:root[data-theme="light"] body .home-storefront[data-home-storefront] {
  --visual-grid-line: color-mix(in srgb, var(--visual-card-tone) 3%, transparent);
  --visual-grid-line-soft: color-mix(in srgb, #35516b 1%, transparent);
}

html[data-theme] body .home-storefront[data-home-storefront] :is(
  .home-hero-shell,
  .storefront-brand-showcase,
  .storefront-procurement-panel,
  .storefront-rfq-panel
) {
  background:
    linear-gradient(var(--visual-grid-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--visual-grid-line) 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in srgb, var(--visual-glass-strong) 86%, transparent), var(--visual-glass)) !important;
  background-position: 0 0, 0 0, center !important;
  background-size: 6.2rem 6.2rem, 6.2rem 6.2rem, auto !important;
}

html[data-theme] body .home-storefront[data-home-storefront] :is(
  .home-hero-copy-card,
  .home-hero-media-frame,
  .home-hero-point-item,
  .home-hero-metric-card,
  .storefront-service-card,
  .storefront-category-card,
  .storefront-brand-card,
  .storefront-compact-product,
  .storefront-product-card,
  .storefront-process-card,
  .storefront-trust-card,
  .storefront-sales-path-card,
  .storefront-recommend-card,
  .storefront-rfq-product-row
) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--visual-glass-strong) 84%, transparent), var(--visual-glass)) !important;
  background-position: center !important;
  background-size: auto !important;
}

html[data-theme] body .home-storefront[data-home-storefront] :is(
  .home-hero-shell,
  .storefront-service-card,
  .storefront-product-card,
  .storefront-category-card,
  .storefront-process-card,
  .storefront-trust-card,
  .storefront-sales-path-card,
  .storefront-procurement-panel,
  .storefront-rfq-panel
)::after {
  content: none !important;
  background: none !important;
}

html[data-theme] body .home-storefront[data-home-storefront] :is(.home-hero-shell, .home-hero-copy-card)::before {
  background-image:
    linear-gradient(var(--visual-grid-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--visual-grid-line) 1px, transparent 1px) !important;
  background-position: 0 0, 0 0 !important;
  background-size: 6.2rem 6.2rem, 6.2rem 6.2rem !important;
  opacity: 0.56 !important;
}

html[data-theme] body .home-storefront[data-home-storefront] :is(.home-hero-shell, .home-hero-copy-card) {
  overflow: visible !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html[data-theme] body .home-storefront[data-home-storefront] :is(.home-hero-shell, .home-hero-copy-card)::before,
html[data-theme] body .home-storefront[data-home-storefront] .home-hero-shell::after {
  content: none !important;
  background: none !important;
}

html[data-theme] body .home-storefront[data-home-storefront] :is(
  .storefront-product-media,
  .storefront-compact-media,
  .storefront-brand-logo,
  .storefront-category-visual,
  .storefront-brand-slide,
  .storefront-brand-slide-media,
  .storefront-brand-slide-media.has-logo
) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-bg-strong) 78%, transparent), color-mix(in srgb, var(--panel-bg) 88%, transparent)) !important;
  background-size: auto !important;
}

html[data-theme] body .home-storefront[data-home-storefront] .storefront-brand-slide::after {
  background:
    linear-gradient(180deg, transparent 34%, color-mix(in srgb, var(--panel-bg) 48%, transparent) 72%, color-mix(in srgb, var(--panel-bg) 86%, transparent)) !important;
}

html[data-theme] body .industrial-detail-shell,
html[data-theme] body .industrial-product-grid {
  --detail-accent: var(--visual-blue);
  --detail-grid-line: color-mix(in srgb, var(--detail-accent) 4%, transparent);
  --detail-grid-line-soft: color-mix(in srgb, var(--text-primary) 1.3%, transparent);
  --detail-panel: color-mix(in srgb, var(--panel-bg-strong) 88%, transparent);
  --detail-panel-strong: color-mix(in srgb, var(--panel-bg-strong) 94%, transparent);
  --detail-heading: color-mix(in srgb, var(--text-primary) 80%, var(--detail-accent));
  --detail-copy: color-mix(in srgb, var(--text-soft) 76%, var(--detail-accent));
  --detail-border: color-mix(in srgb, var(--detail-accent) 30%, var(--line-color));
}

:root[data-theme="light"] body .industrial-detail-shell,
:root[data-theme="light"] body .industrial-product-grid {
  --detail-grid-line: color-mix(in srgb, var(--detail-accent) 5%, transparent);
  --detail-grid-line-soft: color-mix(in srgb, #35516b 1.8%, transparent);
  --detail-panel: color-mix(in srgb, #ffffff 78%, transparent);
  --detail-panel-strong: color-mix(in srgb, #ffffff 92%, transparent);
  --detail-heading: color-mix(in srgb, #0f172a 82%, var(--detail-accent));
  --detail-copy: color-mix(in srgb, #475569 76%, var(--detail-accent));
  --detail-border: color-mix(in srgb, var(--detail-accent) 32%, #cbd9ea);
}

html[data-theme] body .industrial-detail-shell :is(
  .industrial-detail-hero,
  .industrial-gallery-main
) {
  --visual-card-tone: var(--detail-accent);
  border-color: var(--detail-border) !important;
  background:
    linear-gradient(var(--detail-grid-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--detail-grid-line) 1px, transparent 1px),
    linear-gradient(135deg, color-mix(in srgb, var(--detail-accent) 6%, transparent), transparent 58%),
    var(--detail-panel) !important;
  background-position: 0 0, 0 0, center, center !important;
  background-size: 5.4rem 5.4rem, 5.4rem 5.4rem, auto, auto !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

:root[data-theme="light"] body .industrial-detail-shell :is(
  .industrial-detail-hero,
  .industrial-gallery-main
) {
  border-color: var(--detail-border) !important;
  background:
    linear-gradient(var(--detail-grid-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--detail-grid-line) 1px, transparent 1px),
    linear-gradient(135deg, color-mix(in srgb, var(--detail-accent) 4%, transparent), transparent 58%),
    var(--detail-panel) !important;
  background-position: 0 0, 0 0, center, center !important;
  background-size: 5.4rem 5.4rem, 5.4rem 5.4rem, auto, auto !important;
}

html[data-theme] body .industrial-detail-shell :is(
  .industrial-product-summary,
  .industrial-section,
  .industrial-gallery,
  .industrial-gallery-strip-toolbar,
  .industrial-fact-grid div
),
html[data-theme] body .industrial-product-grid .industrial-product-card {
  --visual-card-tone: var(--detail-accent);
  border-color: var(--detail-border) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--detail-accent) 6%, transparent), transparent 58%),
    var(--detail-panel) !important;
  background-size: auto, auto !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

:root[data-theme="light"] body .industrial-detail-shell :is(
  .industrial-product-summary,
  .industrial-section,
  .industrial-gallery,
  .industrial-gallery-strip-toolbar,
  .industrial-fact-grid div
),
:root[data-theme="light"] body .industrial-product-grid .industrial-product-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--detail-accent) 5%, transparent), transparent 58%),
    var(--detail-panel) !important;
  background-size: auto, auto !important;
}

html[data-theme] body .industrial-product-grid .industrial-product-card:nth-child(4n+1),
html[data-theme] body .industrial-detail-main .industrial-section:nth-child(4n+1),
html[data-theme] body .industrial-fact-grid div:nth-child(4n+1) {
  --detail-accent: var(--visual-blue);
}

html[data-theme] body .industrial-product-grid .industrial-product-card:nth-child(4n+2),
html[data-theme] body .industrial-detail-main .industrial-section:nth-child(4n+2),
html[data-theme] body .industrial-fact-grid div:nth-child(4n+2) {
  --detail-accent: var(--visual-teal);
}

html[data-theme] body .industrial-product-grid .industrial-product-card:nth-child(4n+3),
html[data-theme] body .industrial-detail-main .industrial-section:nth-child(4n+3),
html[data-theme] body .industrial-fact-grid div:nth-child(4n+3) {
  --detail-accent: var(--visual-amber);
}

html[data-theme] body .industrial-product-grid .industrial-product-card:nth-child(4n),
html[data-theme] body .industrial-detail-main .industrial-section:nth-child(4n),
html[data-theme] body .industrial-fact-grid div:nth-child(4n) {
  --detail-accent: var(--visual-violet);
}

html[data-theme] body .industrial-gallery,
html[data-theme] body .industrial-gallery-main {
  --detail-accent: var(--visual-cyan);
}

html[data-theme] body .industrial-product-summary {
  --detail-accent: var(--visual-teal);
}

html[data-theme] body .industrial-detail-shell :is(.industrial-product-summary h1, .industrial-section-head h2, .industrial-section h3),
html[data-theme] body .industrial-product-grid .industrial-product-body h3 {
  color: var(--detail-heading) !important;
  text-shadow: none !important;
}

html[data-theme] body .industrial-detail-shell :is(.industrial-product-summary .industrial-en-name, .industrial-section p, .industrial-section li),
html[data-theme] body .industrial-product-grid .industrial-product-body p {
  color: var(--detail-copy) !important;
}

html[data-theme] body .industrial-detail-shell :is(.industrial-section-head span, .industrial-fact-grid dt, .industrial-card-meta, .industrial-gallery-strip-toolbar span),
html[data-theme] body .industrial-product-grid .industrial-card-meta {
  color: color-mix(in srgb, var(--text-muted) 78%, var(--detail-accent)) !important;
}

html[data-theme] body .industrial-detail-shell .industrial-fact-grid dd,
html[data-theme] body .industrial-detail-shell .industrial-gallery-strip-toolbar strong {
  color: color-mix(in srgb, var(--text-primary) 88%, var(--detail-accent)) !important;
}

html[data-theme] body .industrial-detail-shell :is(.industrial-product-media, .industrial-gallery-thumb, .industrial-gallery-empty),
html[data-theme] body .industrial-product-grid .industrial-product-media {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--detail-accent) 5%, transparent), transparent 58%),
    color-mix(in srgb, var(--panel-bg) 58%, transparent) !important;
  background-size: auto, auto !important;
  box-shadow: none !important;
}

html[data-theme] body .industrial-detail-shell :is(.industrial-product-media img, .industrial-gallery-main img, .industrial-gallery-thumb img),
html[data-theme] body .industrial-product-grid .industrial-product-media img {
  background: transparent !important;
}

html[data-theme] body :is(.brand-index-hero, .brand-index-grid) {
  --visual-blue: #4f8fcb;
  --visual-cyan: #39b9d6;
  --visual-teal: #3db39f;
  --visual-mint: #69c7a7;
  --visual-amber: #d7a557;
  --visual-rose: #d8828c;
  --visual-violet: #9b8bdc;
  --brand-card-tone: var(--visual-blue);
  --brand-card-grid: color-mix(in srgb, var(--brand-card-tone) 15%, transparent);
  --brand-card-grid-soft: color-mix(in srgb, var(--text-primary) 5%, transparent);
  --brand-card-border: color-mix(in srgb, var(--brand-card-tone) 34%, var(--line-color));
  --brand-card-panel: color-mix(in srgb, var(--panel-bg-strong) 88%, transparent);
  --brand-card-heading: color-mix(in srgb, var(--text-primary) 84%, var(--brand-card-tone));
  --brand-card-copy: color-mix(in srgb, var(--text-soft) 76%, var(--brand-card-tone));
  --brand-card-muted: color-mix(in srgb, var(--text-muted) 78%, var(--brand-card-tone));
}

:root[data-theme="light"] body :is(.brand-index-hero, .brand-index-grid) {
  --brand-card-grid: color-mix(in srgb, var(--brand-card-tone) 13%, transparent);
  --brand-card-grid-soft: color-mix(in srgb, #35516b 7%, transparent);
  --brand-card-border: color-mix(in srgb, var(--brand-card-tone) 32%, #cbd9ea);
  --brand-card-panel: color-mix(in srgb, #ffffff 86%, transparent);
  --brand-card-heading: color-mix(in srgb, #0f172a 84%, var(--brand-card-tone));
  --brand-card-copy: color-mix(in srgb, #475569 75%, var(--brand-card-tone));
  --brand-card-muted: color-mix(in srgb, #64748b 80%, var(--brand-card-tone));
}

html[data-theme] body .brand-index-hero {
  border-color: var(--brand-card-border) !important;
  background:
    linear-gradient(var(--brand-card-grid-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--brand-card-grid) 1px, transparent 1px),
    linear-gradient(128deg, color-mix(in srgb, var(--visual-cyan) 10%, transparent), transparent 48%),
    var(--brand-card-panel) !important;
  background-size: 4.4rem 4.4rem, 4.4rem 4.4rem, auto, auto !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html[data-theme] body .brand-index-stats {
  gap: 0.82rem !important;
}

html[data-theme] body .brand-index-stat {
  display: grid;
  align-content: center;
  min-height: 4.35rem;
  border-color: color-mix(in srgb, var(--brand-card-tone) 24%, var(--line-color)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-card-tone) 9%, transparent), transparent 58%),
    color-mix(in srgb, var(--panel-bg) 58%, transparent) !important;
  box-shadow: none !important;
}

html[data-theme] body .brand-index-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)) !important;
  align-items: stretch !important;
  gap: 1rem !important;
}

html[data-theme] body .brand-index-card {
  --brand-card-tone: var(--visual-blue);
  position: relative;
  isolation: isolate;
  display: grid !important;
  grid-template-columns: minmax(10rem, 12.25rem) minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 1rem !important;
  min-height: 12.25rem;
  padding: 1rem !important;
  overflow: hidden;
  border-color: var(--brand-card-border) !important;
  border-radius: 0.95rem !important;
  background:
    linear-gradient(var(--brand-card-grid-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--brand-card-grid) 1px, transparent 1px),
    linear-gradient(135deg, color-mix(in srgb, var(--brand-card-tone) 12%, transparent), transparent 54%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel-bg-strong) 90%, transparent), var(--brand-card-panel)) !important;
  background-size: 4.15rem 4.15rem, 4.15rem 4.15rem, auto, auto !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

html[data-theme] body .brand-index-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 38%, color-mix(in srgb, var(--brand-card-tone) 12%, transparent) 38% 42%, transparent 42% 100%),
    linear-gradient(120deg, transparent 0 62%, color-mix(in srgb, var(--visual-cyan) 8%, transparent) 62% 65%, transparent 65% 100%);
  opacity: 0.7;
}

html[data-theme] body .brand-index-card:hover,
html[data-theme] body .brand-index-card:focus-within {
  border-color: color-mix(in srgb, var(--brand-card-tone) 50%, var(--line-color)) !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}

html[data-theme] body .brand-index-card:nth-child(6n+1) {
  --brand-card-tone: var(--visual-blue);
}

html[data-theme] body .brand-index-card:nth-child(6n+2) {
  --brand-card-tone: var(--visual-teal);
}

html[data-theme] body .brand-index-card:nth-child(6n+3) {
  --brand-card-tone: var(--visual-amber);
}

html[data-theme] body .brand-index-card:nth-child(6n+4) {
  --brand-card-tone: var(--visual-cyan);
}

html[data-theme] body .brand-index-card:nth-child(6n+5) {
  --brand-card-tone: var(--visual-violet);
}

html[data-theme] body .brand-index-card:nth-child(6n) {
  --brand-card-tone: var(--visual-rose);
}

html[data-theme] body .brand-index-logo {
  width: 100% !important;
  min-height: 100% !important;
  height: auto !important;
  padding: 0.8rem !important;
  border-color: color-mix(in srgb, var(--brand-card-tone) 30%, var(--line-color)) !important;
  border-radius: 0.85rem !important;
  background:
    linear-gradient(color-mix(in srgb, var(--brand-card-tone) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--brand-card-tone) 10%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--panel-bg) 48%, transparent) !important;
  background-size: 3rem 3rem !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html[data-theme] body .brand-index-logo-media {
  width: min(100%, 10.6rem) !important;
  height: 7.4rem !important;
  min-height: 7.4rem !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-theme] body .brand-index-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 0 !important;
  background: transparent !important;
  filter: none !important;
  transform: none !important;
}

html[data-theme] body .brand-index-logo-fallback {
  border-color: color-mix(in srgb, var(--brand-card-tone) 34%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--brand-card-tone) 12%, transparent) !important;
  color: var(--brand-card-heading) !important;
  box-shadow: none !important;
}

html[data-theme] body .brand-index-card-body {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch !important;
  gap: 0.9rem !important;
  min-width: 0;
  min-height: 100%;
}

html[data-theme] body .brand-index-card-head,
html[data-theme] body .brand-index-title-group {
  display: grid !important;
  min-width: 0;
}

html[data-theme] body .brand-index-card-head {
  align-content: center;
  gap: 0.55rem !important;
}

html[data-theme] body .brand-index-title-group {
  gap: 0.34rem !important;
}

html[data-theme] body .brand-index-card-head h2 {
  margin: 0 !important;
  color: var(--brand-card-heading) !important;
  font-size: 1.06rem !important;
  font-weight: 910 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-align: start;
  text-shadow: none !important;
  unicode-bidi: plaintext;
}

html[data-theme] body .brand-index-card-head h2 a {
  color: inherit !important;
  text-decoration: none;
}

html[data-theme] body .brand-index-card-head p {
  display: -webkit-box;
  min-height: 2.7rem;
  margin: 0 !important;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--brand-card-copy) !important;
  font-size: 0.82rem !important;
  font-weight: 760 !important;
  line-height: 1.65 !important;
  text-align: start;
  text-shadow: none !important;
  unicode-bidi: plaintext;
}

html[data-theme] body .brand-index-country,
html[data-theme] body .brand-index-product-count {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-height: 1.85rem;
  padding: 0.24rem 0.66rem;
  border: 1px solid color-mix(in srgb, var(--brand-card-tone) 38%, var(--line-color)) !important;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-card-tone) 14%, transparent) !important;
  color: color-mix(in srgb, var(--text-primary) 74%, var(--brand-card-tone)) !important;
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: none !important;
}

html[data-theme] body .brand-index-product-count {
  border-color: color-mix(in srgb, var(--visual-teal) 40%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--visual-teal) 12%, transparent) !important;
  color: color-mix(in srgb, var(--text-primary) 72%, var(--visual-teal)) !important;
}

html[data-theme] body .brand-index-card-foot {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.75rem !important;
  min-width: 0;
}

html[data-theme] body .brand-index-card-foot .industrial-btn {
  width: auto !important;
  min-width: 7.8rem;
  min-height: 2.42rem;
  padding: 0.54rem 0.95rem !important;
  border-color: color-mix(in srgb, var(--brand-card-tone) 42%, var(--line-color)) !important;
  border-radius: 0.68rem !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand-card-tone) 52%, transparent), color-mix(in srgb, var(--brand-card-tone) 26%, var(--panel-bg-strong))) !important;
  color: color-mix(in srgb, #ffffff 88%, var(--brand-card-tone)) !important;
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

:root[data-theme="light"] body .brand-index-card-foot .industrial-btn {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand-card-tone) 28%, #ffffff), color-mix(in srgb, var(--brand-card-tone) 17%, #ffffff)) !important;
  color: color-mix(in srgb, #0f172a 76%, var(--brand-card-tone)) !important;
}

html[data-theme][data-theme] body :is(
  .industrial-gallery-strip-nav-button,
  .storefront-recommend-nav,
  .storefront-brand-nav,
  .home-hero-arrow,
  .home-hero-mobile-nav-button,
  .slider-jalali-nav-button,
  .offer-jalali-nav-button,
  [data-storefront-rail-prev],
  [data-storefront-rail-next],
  [data-gallery-strip-nav],
  [data-jalali-prev],
  [data-jalali-next],
  [data-offer-jalali-prev],
  [data-offer-jalali-next]
) {
  --slider-nav-accent: var(--product-tab-specs, var(--visual-teal, #3db39f));
  cursor: pointer !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 2.02rem !important;
  min-width: 2.02rem !important;
  max-width: 2.02rem !important;
  height: 2.02rem !important;
  min-height: 2.02rem !important;
  max-height: 2.02rem !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--slider-nav-accent) 34%, var(--line-color)) !important;
  border-radius: 0.45rem !important;
  background: color-mix(in srgb, var(--surface-muted) 84%, transparent) !important;
  color: color-mix(in srgb, var(--slider-nav-accent) 72%, var(--text-primary)) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: blur(7px) saturate(1.02) !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.02) !important;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease !important;
}

:root[data-theme="light"] body :is(
  .industrial-gallery-strip-nav-button,
  .storefront-recommend-nav,
  .storefront-brand-nav,
  .home-hero-arrow,
  .home-hero-mobile-nav-button,
  .slider-jalali-nav-button,
  .offer-jalali-nav-button,
  [data-storefront-rail-prev],
  [data-storefront-rail-next],
  [data-gallery-strip-nav],
  [data-jalali-prev],
  [data-jalali-next],
  [data-offer-jalali-prev],
  [data-offer-jalali-next]
) {
  background: color-mix(in srgb, #ffffff 84%, var(--slider-nav-accent) 6%) !important;
  color: color-mix(in srgb, #153646 58%, var(--slider-nav-accent)) !important;
}

html[data-theme][data-theme] body :is(
  .industrial-gallery-strip-nav-button,
  .storefront-recommend-nav,
  .storefront-brand-nav,
  .home-hero-arrow,
  .home-hero-mobile-nav-button,
  .slider-jalali-nav-button,
  .offer-jalali-nav-button,
  [data-storefront-rail-prev],
  [data-storefront-rail-next],
  [data-gallery-strip-nav],
  [data-jalali-prev],
  [data-jalali-next],
  [data-offer-jalali-prev],
  [data-offer-jalali-next]
):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--slider-nav-accent) 52%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--slider-nav-accent) 13%, var(--surface-muted)) !important;
  color: var(--text-primary) !important;
  outline: 2px solid color-mix(in srgb, var(--slider-nav-accent) 22%, transparent) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

html[data-theme][data-theme] body :is(
  .storefront-recommend-nav,
  .home-hero-arrow,
  .home-hero-mobile-nav-button,
  .slider-jalali-nav-button,
  .offer-jalali-nav-button,
  [data-storefront-rail-prev],
  [data-storefront-rail-next],
  [data-jalali-prev],
  [data-jalali-next],
  [data-offer-jalali-prev],
  [data-offer-jalali-next]
):is(:hover, :focus-visible) {
  transform: none !important;
}

html[data-theme][data-theme] body .storefront-brand-nav:is(:hover, :focus-visible) {
  transform: translateY(-50%) !important;
}

html[data-theme][data-theme] body :is(
  .industrial-gallery-strip-nav-button,
  .storefront-recommend-nav,
  .storefront-brand-nav,
  .home-hero-arrow,
  .home-hero-mobile-nav-button,
  .slider-jalali-nav-button,
  .offer-jalali-nav-button,
  [data-storefront-rail-prev],
  [data-storefront-rail-next],
  [data-gallery-strip-nav],
  [data-jalali-prev],
  [data-jalali-next],
  [data-offer-jalali-prev],
  [data-offer-jalali-next]
):disabled {
  cursor: default !important;
  opacity: 0.42 !important;
  transform: none !important;
}

html[data-theme][data-theme] body :is(
  .industrial-gallery-strip-nav-button,
  .storefront-recommend-nav,
  .storefront-brand-nav,
  .home-hero-arrow,
  .home-hero-mobile-nav-button,
  .slider-jalali-nav-button,
  .offer-jalali-nav-button,
  [data-storefront-rail-prev],
  [data-storefront-rail-next],
  [data-gallery-strip-nav],
  [data-jalali-prev],
  [data-jalali-next],
  [data-offer-jalali-prev],
  [data-offer-jalali-next]
) svg {
  width: 0.95rem !important;
  height: 0.95rem !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  box-shadow: none !important;
}

html[dir="rtl"][data-theme][data-theme] body :is(
  .industrial-gallery-strip-nav-button,
  .storefront-recommend-nav,
  .storefront-brand-nav,
  .home-hero-arrow,
  .home-hero-mobile-nav-button,
  .slider-jalali-nav-button,
  .offer-jalali-nav-button,
  [data-storefront-rail-prev],
  [data-storefront-rail-next],
  [data-gallery-strip-nav],
  [data-jalali-prev],
  [data-jalali-next],
  [data-offer-jalali-prev],
  [data-offer-jalali-next]
) svg {
  transform: scaleX(-1) !important;
}

@media (max-width: 720px) {
  html[data-theme] body .home-storefront .storefront-section-header h2 {
    justify-items: inherit;
  }

  html[data-theme] body .home-storefront :is(
    .home-hero-shell,
    .storefront-service-card,
    .storefront-product-card,
    .storefront-category-card,
    .storefront-process-card,
    .storefront-trust-card,
    .storefront-rfq-panel
  ) {
    background-size: 3.35rem 3.35rem, 3.35rem 3.35rem, auto, auto !important;
  }

  html[data-theme] body :is(
    .industrial-detail-hero,
    .industrial-product-summary,
    .industrial-section,
    .industrial-gallery,
    .industrial-product-card
  ) {
    background-size: 3.2rem 3.2rem, 3.2rem 3.2rem, auto, auto !important;
  }

  html[data-theme] body .brand-index-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.85rem !important;
  }

  html[data-theme] body .brand-index-card {
    grid-template-columns: minmax(8rem, 9.5rem) minmax(0, 1fr) !important;
    min-height: 10.7rem;
    padding: 0.82rem !important;
    gap: 0.82rem !important;
    background-size: 3.25rem 3.25rem, 3.25rem 3.25rem, auto, auto !important;
  }

  html[data-theme] body .brand-index-logo {
    min-height: 9rem !important;
    padding: 0.6rem !important;
  }

  html[data-theme] body .brand-index-logo-media {
    width: min(100%, 8.6rem) !important;
    height: 6rem !important;
    min-height: 6rem !important;
  }

  html[data-theme] body .brand-index-card-head h2 {
    font-size: 0.98rem !important;
  }

  html[data-theme] body .brand-index-card-foot {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  html[data-theme] body .brand-index-card-foot .industrial-btn {
    width: 100% !important;
  }
}

@media (max-width: 340px) {
  html[data-theme] body .brand-index-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-theme] body .brand-index-logo {
    min-height: 8.4rem !important;
  }
}