/*
 * 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-section-header h3, .storefront-rfq-panel h2, .storefront-rfq-panel h3) {
  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 :is(h2, h3) {
  display: inline-grid;
  gap: 0.42rem;
  justify-items: start;
}

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

html[data-theme] body .home-storefront .storefront-section-header :is(h2, h3)::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] body :is(.brand-index-hero, .brand-index-grid) {
  --brand-card-tone: var(--visual-blue);
  --brand-card-grid: transparent;
  --brand-card-grid-soft: transparent;
  --brand-card-border: color-mix(in srgb, var(--visual-blue) 26%, var(--line-color));
  --brand-card-panel: color-mix(in srgb, var(--panel-bg-strong) 92%, transparent);
  --brand-card-heading: var(--text-primary);
  --brand-card-copy: var(--text-soft);
  --brand-card-muted: var(--text-muted);
}

:root[data-theme="light"] body :is(.brand-index-hero, .brand-index-grid) {
  --brand-card-border: #c9d8e8;
  --brand-card-panel: color-mix(in srgb, #ffffff 92%, #eef5fb);
  --brand-card-heading: #0f172a;
  --brand-card-copy: #475569;
  --brand-card-muted: #64748b;
}

html[data-theme] body .brand-index-hero,
html[data-theme] body .brand-index-card,
html[data-theme] body .brand-index-logo,
html[data-theme] body .brand-index-stat {
  background: var(--brand-card-panel) !important;
  background-size: auto !important;
}

html[data-theme] body .brand-index-card::after {
  content: none !important;
}

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

html[data-theme] body .brand-index-card:hover,
html[data-theme] body .brand-index-card:focus-within {
  border-color: color-mix(in srgb, var(--visual-blue) 42%, var(--line-color)) !important;
  transform: none;
}

html[data-theme] body .brand-index-logo,
html[data-theme] body .brand-index-logo-fallback,
html[data-theme] body .brand-index-country,
html[data-theme] body .brand-index-product-count {
  border-color: color-mix(in srgb, var(--visual-blue) 24%, var(--line-color)) !important;
}

html[data-theme] body .brand-index-logo {
  background: color-mix(in srgb, var(--panel-bg) 62%, transparent) !important;
}

html[data-theme] body .brand-index-country,
html[data-theme] body .brand-index-product-count {
  background: color-mix(in srgb, var(--panel-bg) 72%, transparent) !important;
  color: var(--brand-card-muted) !important;
}

html[data-theme] body .brand-index-card-foot .industrial-btn {
  border-color: color-mix(in srgb, var(--visual-blue) 36%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--visual-blue) 18%, var(--panel-bg-strong)) !important;
  color: color-mix(in srgb, var(--text-primary) 86%, var(--visual-blue)) !important;
}

:root[data-theme="light"] body .brand-index-card-foot .industrial-btn {
  background: color-mix(in srgb, var(--visual-blue) 14%, #ffffff) !important;
  color: color-mix(in srgb, #0f172a 82%, var(--visual-blue)) !important;
}

:root[data-theme="light"] body .brand-index-card.brand-index-card,
:root[data-theme="light"] body .brand-index-stat.brand-index-stat,
:root[data-theme="light"] body .brand-index-logo.brand-index-logo {
  background: #ffffff !important;
  background-image: none !important;
}

:root[data-theme="light"] body .brand-index-card.brand-index-card {
  border-color: #cbd8e6 !important;
}

:root[data-theme="light"] body .brand-index-card.brand-index-card:hover,
:root[data-theme="light"] body .brand-index-card.brand-index-card:focus-within {
  border-color: color-mix(in srgb, var(--visual-blue) 34%, #cbd8e6) !important;
  transform: none !important;
}

:root[data-theme="light"] body .brand-index-country.brand-index-country,
:root[data-theme="light"] body .brand-index-product-count.brand-index-product-count {
  border-color: color-mix(in srgb, #94a3b8 44%, #d7e2ee) !important;
  background: #f8fafc !important;
  color: #526174 !important;
}

:root[data-theme="light"] body .brand-index-card-foot .industrial-btn.industrial-btn {
  border-color: color-mix(in srgb, var(--visual-blue) 30%, #cbd8e6) !important;
  background: color-mix(in srgb, var(--visual-blue) 12%, #ffffff) !important;
  color: color-mix(in srgb, #0f172a 86%, var(--visual-blue)) !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;
}

html[data-theme][data-theme] body .home-storefront .storefront-recommend-carousel {
  padding-inline: clamp(2.75rem, 4vw, 3.35rem) !important;
}

html[data-theme][data-theme] body .home-storefront .storefront-recommend-carousel::before,
html[data-theme][data-theme] body .home-storefront .storefront-recommend-carousel::after {
  width: 1.45rem !important;
}

html[data-theme][data-theme] body .home-storefront .storefront-recommend-carousel .storefront-recommend-nav {
  --slider-nav-accent: var(--home-brand, var(--visual-teal, #3db39f));
  inset-block-start: 50% !important;
  box-sizing: border-box !important;
  width: 2.5rem !important;
  min-width: 2.5rem !important;
  max-width: 2.5rem !important;
  height: 2.5rem !important;
  min-height: 2.5rem !important;
  max-height: 2.5rem !important;
  border-radius: 0.7rem !important;
  background: color-mix(in srgb, var(--surface-muted) 90%, transparent) !important;
  color: color-mix(in srgb, var(--slider-nav-accent) 78%, var(--text-primary)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: translateY(-50%) !important;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease !important;
}

html[data-theme][data-theme] body .home-storefront .storefront-recommend-carousel .storefront-recommend-nav-prev {
  inset-inline-start: 0.3rem !important;
}

html[data-theme][data-theme] body .home-storefront .storefront-recommend-carousel .storefront-recommend-nav-next {
  inset-inline-end: 0.3rem !important;
}

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

html[data-theme][data-theme] body .home-storefront .storefront-recommend-carousel .storefront-recommend-nav:hover {
  outline: none !important;
  outline-offset: 0 !important;
}

html[data-theme][data-theme] body .home-storefront .storefront-recommend-carousel .storefront-recommend-nav:disabled {
  opacity: 0.34 !important;
  transform: translateY(-50%) !important;
}

html[data-theme][data-theme] body .home-storefront .storefront-recommend-carousel .storefront-recommend-nav svg {
  width: 1.08rem !important;
  height: 1.08rem !important;
}

html[data-theme][data-theme] body .home-storefront .storefront-recommend-body .storefront-price-row {
  grid-template-columns: minmax(0, 0.9fr) minmax(8.65rem, 1fr) !important;
  align-items: stretch !important;
  gap: 0.7rem !important;
}

html[data-theme][data-theme] body .home-storefront .storefront-recommend-body .storefront-card-action {
  width: 100% !important;
  min-width: 8.65rem !important;
  min-height: 2.36rem !important;
  border-radius: 0.62rem !important;
  padding-inline: 0.85rem !important;
  line-height: 1.35 !important;
  text-align: center !important;
  white-space: normal !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-showcase {
  overflow: hidden !important;
  border-color: color-mix(in srgb, var(--visual-card-tone) 20%, var(--line-color)) !important;
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--visual-glass-strong) 78%, transparent), color-mix(in srgb, var(--visual-glass) 94%, transparent)) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: auto !important;
}

html[data-theme="light"][data-theme] body .home-storefront[data-home-storefront].home-storefront > .storefront-brand-showcase.storefront-brand-showcase {
  border-color: color-mix(in srgb, #9cb9d8 36%, #d8e4f1) !important;
  background:
    linear-gradient(180deg, #eef5fb, #e8f1f8) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: auto !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-rail-shell {
  padding-inline: clamp(2.75rem, 4vw, 3.2rem) !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-rail {
  gap: 0.7rem !important;
  padding-block: 0.08rem 0.42rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-slide {
  flex-basis: clamp(13rem, 21vw, 15.25rem) !important;
  min-height: 9.15rem !important;
  border-radius: 0.72rem !important;
  border-color: color-mix(in srgb, var(--visual-card-tone) 22%, var(--line-color)) !important;
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-bg-strong) 76%, transparent), color-mix(in srgb, var(--panel-bg) 92%, transparent)) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: auto !important;
}

html[data-theme="light"][data-theme] body .home-storefront[data-home-storefront].home-storefront .storefront-brand-showcase .storefront-brand-slide.storefront-brand-slide {
  border-color: color-mix(in srgb, #9cb9d8 42%, #d8e4f1) !important;
  background:
    linear-gradient(180deg, #f8fbff, #edf5fc) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: auto !important;
  color: #0f172a !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-slide-media,
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-slide-media.has-logo {
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-bg-strong) 70%, transparent), color-mix(in srgb, var(--panel-bg) 88%, transparent)) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: auto !important;
}

html[data-theme="light"][data-theme] body .home-storefront[data-home-storefront].home-storefront .storefront-brand-showcase .storefront-brand-slide-media.storefront-brand-slide-media,
html[data-theme="light"][data-theme] body .home-storefront[data-home-storefront].home-storefront .storefront-brand-showcase .storefront-brand-slide-media.storefront-brand-slide-media.has-logo {
  background:
    linear-gradient(180deg, #eaf3fb, #f7fbff) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: auto !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-slide-media img {
  height: clamp(2.25rem, 30%, 3.45rem) !important;
  max-width: min(62%, 9.7rem) !important;
  max-height: 38% !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-slide-count {
  inset-block-start: 0.68rem !important;
  inset-inline-start: 0.68rem !important;
  padding: 0.2rem 0.5rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-slide-copy {
  inset-inline: 0.74rem !important;
  inset-block-end: 0.7rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-slide-copy strong {
  font-size: 0.92rem !important;
  line-height: 1.35 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-slide-copy small {
  font-size: 0.7rem !important;
  line-height: 1.48 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-showcase .storefront-brand-nav {
  --brand-rail-nav-accent: var(--home-brand, #38bdf8);
  inset-block-start: 50% !important;
  box-sizing: border-box !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 2.5rem !important;
  min-width: 2.5rem !important;
  height: 2.5rem !important;
  min-height: 2.5rem !important;
  border-radius: 0.7rem !important;
  border-color: color-mix(in srgb, var(--brand-rail-nav-accent) 30%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--surface-muted) 90%, transparent) !important;
  color: color-mix(in srgb, var(--brand-rail-nav-accent) 78%, var(--text-primary)) !important;
  backdrop-filter: none !important;
  transform: translateY(-50%) !important;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease !important;
}

html[data-theme="light"][data-theme] body .home-storefront[data-home-storefront].home-storefront .storefront-brand-showcase .storefront-brand-nav.storefront-brand-nav {
  border-color: color-mix(in srgb, #3b82f6 32%, #cbd5e1) !important;
  background: color-mix(in srgb, #f8fbff 92%, transparent) !important;
  color: #245b9d !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-showcase .storefront-brand-nav-prev {
  inset-inline-start: 0.34rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-showcase .storefront-brand-nav-next {
  inset-inline-end: 0.34rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-showcase .storefront-brand-nav:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--brand-rail-nav-accent) 52%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--brand-rail-nav-accent) 12%, var(--surface-muted)) !important;
  color: color-mix(in srgb, var(--brand-rail-nav-accent) 86%, var(--text-primary)) !important;
  transform: translateY(-50%) !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-showcase .storefront-brand-nav:hover {
  outline: none !important;
  outline-offset: 0 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-showcase .storefront-brand-nav svg {
  width: 1.08rem !important;
  height: 1.08rem !important;
}

/*
 * Homepage density pass.
 * Keep the public storefront readable at normal desktop zoom by anchoring the
 * homepage to the compact account/sidebar type scale used elsewhere.
 */
html[data-theme][data-theme] body .home-storefront[data-home-storefront] {
  gap: 1.12rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-section {
  gap: 0.78rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-shell {
  gap: 1.15rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-copy-card {
  gap: 0.82rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-slide-title {
  gap: 0.38rem !important;
  font-size: 2.08rem !important;
  line-height: 1.34 !important;
  letter-spacing: 0 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-slide-title::after {
  height: 0.16rem !important;
  width: 6rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-slide-summary {
  font-size: 0.84rem !important;
  line-height: 1.86 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-point-item {
  min-height: 2.12rem !important;
  border-radius: 0.54rem !important;
  padding: 0.42rem 0.62rem !important;
  font-size: 0.74rem !important;
  line-height: 1.35 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-metric-card {
  min-height: 2.2rem !important;
  border-radius: 0.54rem !important;
  padding: 0.42rem 0.66rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-metric-card strong {
  font-size: 0.82rem !important;
  line-height: 1.35 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-metric-card span {
  font-size: 0.66rem !important;
  line-height: 1.45 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-service-strip {
  gap: 0.72rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-service-card {
  min-height: 4.1rem !important;
  border-radius: 0.64rem !important;
  padding: 0.72rem 0.82rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-service-card strong {
  font-size: 0.84rem !important;
  line-height: 1.42 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-service-card small {
  font-size: 0.66rem !important;
  line-height: 1.55 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-service-icon {
  width: 2.1rem !important;
  height: 2.1rem !important;
  border-radius: 0.54rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-section-header {
  gap: 0.62rem !important;
  padding-block: 0.05rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-section-header :is(h2, h3),
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-rfq-panel :is(h2, h3) {
  gap: 0.32rem !important;
  font-size: 1.16rem !important;
  line-height: 1.42 !important;
  letter-spacing: 0 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-product-rail-section .storefront-section-header :is(h2, h3) {
  font-size: 1.04rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-section-header p,
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-rfq-panel p {
  font-size: 0.76rem !important;
  line-height: 1.75 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-eyebrow {
  font-size: 0.66rem !important;
  line-height: 1.45 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-link,
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-action {
  min-height: 2.12rem !important;
  border-radius: 0.55rem !important;
  padding: 0.42rem 0.72rem !important;
  font-size: 0.74rem !important;
  line-height: 1.35 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-carousel {
  padding-inline: 2.7rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-rail {
  gap: 0.72rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-card {
  flex-basis: clamp(13.7rem, 17vw, 16.2rem) !important;
  grid-template-rows: 7.35rem minmax(0, 1fr) !important;
  border-radius: 0.62rem !important;
  transform: none !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-card:is(:hover, :focus-within),
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-product-card:is(:hover, :focus-within),
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-card-action:is(:hover, :focus-visible) {
  transform: none !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-media {
  min-height: 7.35rem !important;
  font-size: 1.35rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-media img {
  padding: 0.62rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-body {
  gap: 0.52rem !important;
  padding: 0.64rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-body h3,
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-product-copy h3 {
  font-size: 0.8rem !important;
  line-height: 1.48 !important;
  font-weight: 760 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-body p,
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-product-copy p {
  font-size: 0.68rem !important;
  line-height: 1.68 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-body .storefront-price-row,
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-price-row {
  gap: 0.46rem !important;
  padding-top: 0.48rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-body .storefront-price-row {
  grid-template-columns: minmax(0, 0.9fr) minmax(7.1rem, 0.95fr) !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-price-row strong {
  font-size: 0.76rem !important;
  line-height: 1.4 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-price-row del {
  font-size: 0.68rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-card-action,
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-body .storefront-card-action {
  min-width: 7.1rem !important;
  min-height: 2.04rem !important;
  border-radius: 0.52rem !important;
  padding: 0.36rem 0.62rem !important;
  font-size: 0.72rem !important;
  line-height: 1.25 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-product-grid {
  gap: 0.72rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-product-card {
  border-radius: 0.58rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-product-media {
  min-height: 8.65rem !important;
  padding: 0.62rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-product-image {
  padding: 2.35rem 1.05rem 2.2rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] :is(.storefront-product-category, .storefront-product-brand, .storefront-pill, .storefront-spec-row span) {
  min-height: 1.42rem !important;
  border-radius: 0.42rem !important;
  padding: 0.18rem 0.45rem !important;
  font-size: 0.64rem !important;
  line-height: 1.25 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-product-body {
  gap: 0.55rem !important;
  padding: 0.66rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-compact-grid {
  gap: 0.62rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] :is(.storefront-compact-product, .storefront-brand-card) {
  gap: 0.56rem !important;
  padding: 0.64rem !important;
  border-radius: 0.62rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-compact-media,
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-logo {
  width: 2.7rem !important;
  height: 2.7rem !important;
  min-height: 2.7rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] :is(.storefront-compact-product strong, .storefront-brand-card strong) {
  font-size: 0.76rem !important;
  line-height: 1.45 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] :is(.storefront-compact-product small, .storefront-brand-card small) {
  font-size: 0.66rem !important;
  line-height: 1.55 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-slide-copy strong {
  font-size: 0.82rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-slide-copy small,
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-slide-count {
  font-size: 0.64rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-carousel .storefront-recommend-nav,
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-showcase .storefront-brand-nav {
  width: 2.2rem !important;
  min-width: 2.2rem !important;
  max-width: 2.2rem !important;
  height: 2.2rem !important;
  min-height: 2.2rem !important;
  max-height: 2.2rem !important;
  border-radius: 0.6rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-carousel::before,
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-carousel::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-carousel .storefront-recommend-nav {
  border-color: transparent !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--home-brand, #1a4fd8) 82%, var(--text-primary, #0f172a)) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-carousel .storefront-recommend-nav:is(:hover, :active, :focus-visible) {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--home-brand-hover, var(--home-brand, #1a4fd8)) !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-carousel .storefront-recommend-nav:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--home-brand, #1a4fd8) 44%, transparent) !important;
  outline-offset: 0.2rem !important;
}

/*
 * Homepage professional polish.
 * Keep the public first page dense, but let the marketplace shell breathe on
 * wide desktop screens with the same compact typography and controls.
 */
html[data-theme][data-theme] body:has(.home-storefront[data-home-storefront]) {
  --page-shell-max-width: 124rem !important;
  --page-work-max-width: 124rem !important;
}

html[data-theme][data-theme] body .public-shell:has(.home-storefront[data-home-storefront]) {
  width: min(calc(100% - (var(--page-shell-gutter, 1rem) * 2)), var(--page-shell-max-width, 124rem)) !important;
  max-width: var(--page-shell-max-width, 124rem) !important;
}

html[data-theme][data-theme] body .public-shell:has(.home-storefront[data-home-storefront]) > main {
  padding-bottom: 1.5rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] {
  gap: 0.95rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] :is(.home-hero-shell, .storefront-section, .storefront-rfq-panel) {
  border-radius: 0.72rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-shell {
  --home-hero-slide-height: 24rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-slide {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.85fr) !important;
  gap: 0.72rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-copy-card {
  padding: 1.05rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-slide-topline {
  margin-bottom: 0.55rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] :is(.home-hero-slide-eyebrow, .home-hero-slide-index) {
  min-height: 1.55rem !important;
  padding: 0.22rem 0.55rem !important;
  font-size: 0.66rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-slide-title {
  max-width: min(100%, 44ch) !important;
  font-size: 1.76rem !important;
  line-height: 1.34 !important;
  text-shadow: none !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-slide-title::after {
  width: 4.4rem !important;
  height: 0.1rem !important;
  margin-block-start: 0.42rem !important;
  background: color-mix(in srgb, var(--home-brand, #1a4fd8) 78%, var(--home-accent, #2aa08f)) !important;
  box-shadow: none !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-slide-summary {
  max-width: 54ch !important;
  margin-top: 0.45rem !important;
  font-size: 0.86rem !important;
  line-height: 1.78 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-point-list {
  gap: 0.42rem !important;
  margin-top: 0.65rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-point-item {
  min-height: 2.02rem !important;
  padding: 0.42rem 0.58rem !important;
  padding-inline-start: 1.48rem !important;
  font-size: 0.76rem !important;
  font-weight: 720 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-point-item::before {
  inset-inline-start: 0.56rem !important;
  top: 0.72rem !important;
  width: 0.34rem !important;
  height: 0.34rem !important;
  box-shadow: none !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-action-row {
  gap: 0.48rem !important;
  margin-top: 0.72rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-action {
  min-height: 2.14rem !important;
  padding: 0.42rem 0.72rem !important;
  font-size: 0.8rem !important;
  box-shadow: none !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-action:is(:hover, :focus-visible) {
  transform: none !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-media-frame {
  background: color-mix(in srgb, var(--home-surface-strong, var(--panel-bg-strong)) 92%, var(--home-brand, #1a4fd8) 8%) !important;
  box-shadow: none !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-progress-segment,
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-progress-segment.is-active {
  box-shadow: none !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-progress-segment.is-active {
  background: color-mix(in srgb, var(--home-brand, #1a4fd8) 76%, var(--home-accent, #2aa08f)) !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-section {
  gap: 0.64rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-section-header :is(h2, h3),
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-rfq-panel :is(h2, h3) {
  font-size: 1.12rem !important;
  line-height: 1.45 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-product-rail-section .storefront-section-header :is(h2, h3) {
  font-size: 1.02rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-section-header p,
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-rfq-panel p {
  font-size: 0.7rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-link,
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-action {
  min-height: 1.9rem !important;
  border-radius: 0.48rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-service-strip {
  gap: 0.55rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-service-card {
  min-height: 3.65rem !important;
  padding: 0.6rem 0.7rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-service-card strong {
  font-size: 0.86rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-service-card small {
  font-size: 0.72rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-service-icon {
  width: 2.05rem !important;
  height: 2.05rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-carousel {
  padding-inline: 2.15rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-rail {
  gap: 0.55rem !important;
  padding-block: 0.1rem 0.36rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-card {
  flex-basis: clamp(12.2rem, 14.2vw, 14rem) !important;
  grid-template-rows: 6.2rem minmax(0, 1fr) !important;
  border-radius: 0.54rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-media {
  min-height: 6.2rem !important;
  border-bottom-color: color-mix(in srgb, var(--home-border, var(--line-color)) 78%, transparent) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--home-surface-strong, var(--panel-bg-strong)) 94%, var(--media-a, var(--home-brand)) 6%), var(--home-surface, var(--panel-bg))) !important;
  background-size: auto !important;
  font-size: 1rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-media img {
  padding: 0.48rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-body {
  gap: 0.4rem !important;
  padding: 0.52rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-body h3 {
  display: -webkit-box !important;
  min-height: 2.32rem !important;
  overflow: hidden !important;
  font-size: 0.82rem !important;
  line-height: 1.42 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-product-copy h3 {
  font-size: 0.84rem !important;
  line-height: 1.45 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-body p,
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-product-copy p {
  font-size: 0.72rem !important;
  line-height: 1.6 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-body .storefront-price-row {
  grid-template-columns: minmax(0, 1fr) minmax(5.9rem, 0.92fr) !important;
  gap: 0.34rem !important;
  padding-top: 0.34rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-price-row strong {
  font-size: 0.76rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-card-action,
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-body .storefront-card-action {
  min-width: 6.35rem !important;
  min-height: 1.92rem !important;
  padding: 0.32rem 0.56rem !important;
  font-size: 0.74rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-product-grid {
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)) !important;
  gap: 0.56rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-product-media {
  min-height: 7.15rem !important;
  background: color-mix(in srgb, var(--home-surface-strong, var(--panel-bg-strong)) 92%, var(--media-a, var(--home-brand)) 8%) !important;
  background-size: auto !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-product-media::before {
  content: none !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-product-image {
  padding: 1.55rem 0.85rem 1.45rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-product-body {
  gap: 0.42rem !important;
  padding: 0.52rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] :is(.storefront-product-category, .storefront-product-brand, .storefront-pill, .storefront-spec-row span) {
  min-height: 1.38rem !important;
  padding: 0.16rem 0.42rem !important;
  font-size: 0.66rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] :is(.storefront-compact-product, .storefront-brand-card) {
  padding: 0.52rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-rail {
  gap: 0.55rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-slide {
  flex-basis: min(62vw, 12.8rem) !important;
  min-height: 7.35rem !important;
  background: color-mix(in srgb, var(--home-surface-strong, var(--panel-bg-strong)) 92%, var(--home-brand, #1a4fd8) 8%) !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-slide::after {
  background: linear-gradient(180deg, transparent 38%, color-mix(in srgb, var(--bg-main, #0b0d10) 76%, transparent)) !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-slide:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--home-surface-strong, var(--panel-bg-strong)) 88%, var(--home-brand, #1a4fd8) 12%) !important;
  transform: none !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-slide-media,
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-slide-media.has-logo {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--home-surface-strong, var(--panel-bg-strong)) 96%, var(--home-brand, #1a4fd8) 4%), var(--home-surface, var(--panel-bg))) !important;
  background-size: auto !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-slide-media img {
  height: clamp(1.8rem, 26%, 2.75rem) !important;
  max-width: min(58%, 8rem) !important;
  max-height: 34% !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-slide-copy strong {
  font-size: 0.72rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-slide-copy small,
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-slide-count {
  font-size: 0.58rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-carousel .storefront-recommend-nav,
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-showcase .storefront-brand-nav {
  width: 1.95rem !important;
  min-width: 1.95rem !important;
  max-width: 1.95rem !important;
  height: 1.95rem !important;
  min-height: 1.95rem !important;
  max-height: 1.95rem !important;
  border-color: color-mix(in srgb, var(--home-brand, #1a4fd8) 28%, transparent) !important;
  background: color-mix(in srgb, var(--home-surface-strong, var(--panel-bg-strong)) 90%, transparent) !important;
  transform: translateY(-50%) !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-carousel .storefront-recommend-nav:is(:hover, :active, :focus-visible),
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-showcase .storefront-brand-nav:is(:hover, :active, :focus-visible) {
  border-color: color-mix(in srgb, var(--home-brand, #1a4fd8) 42%, transparent) !important;
  background: color-mix(in srgb, var(--home-surface-strong, var(--panel-bg-strong)) 82%, var(--home-brand, #1a4fd8) 18%) !important;
  transform: translateY(-50%) !important;
}

html[data-theme][data-theme] body .public-shell :is(
  .directory-hero-copy,
  .brand-index-hero-copy,
  .supplier-landing-copy
) .section-title.text-3xl {
  font-size: 1.58rem !important;
  line-height: 1.38 !important;
  letter-spacing: 0 !important;
}

html[data-theme][data-theme] body .public-shell :is(
  .directory-hero-copy,
  .brand-index-hero-copy,
  .supplier-landing-copy
) :is(p, .section-subtitle) {
  font-size: 0.86rem !important;
  line-height: 1.82 !important;
}

html[data-theme][data-theme] body .public-shell .supplier-landing-main .section-title.text-2xl {
  font-size: 1.18rem !important;
  line-height: 1.42 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 48rem) {
  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-rail-shell {
    padding-inline: 0 !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] {
    gap: 0.92rem !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-slide-title {
    font-size: 1.48rem !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-slide-summary {
    font-size: 0.8rem !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-point-item,
  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-action,
  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-link {
    font-size: 0.76rem !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-section-header :is(h2, h3),
  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-rfq-panel :is(h2, h3),
  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-product-rail-section .storefront-section-header :is(h2, h3) {
    font-size: 1.08rem !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-section-header p,
  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-rfq-panel p {
    font-size: 0.76rem !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-carousel {
    padding-inline: 0 !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-card {
    flex-basis: min(78vw, 15.2rem) !important;
    grid-template-rows: 7.15rem minmax(0, 1fr) !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-media {
    min-height: 7.15rem !important;
  }

  html[data-theme][data-theme] body .public-shell :is(
    .directory-hero-copy,
    .brand-index-hero-copy,
    .supplier-landing-copy
  ) .section-title.text-3xl {
    font-size: 1.34rem !important;
    line-height: 1.5 !important;
  }

  html[data-theme][data-theme] body .public-shell :is(
    .directory-hero-copy,
    .brand-index-hero-copy,
    .supplier-landing-copy
  ) :is(p, .section-subtitle) {
    font-size: 0.76rem !important;
  }

  html[data-theme][data-theme] body .public-shell .supplier-landing-main .section-title.text-2xl {
    font-size: 1.06rem !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-slide {
    flex-basis: min(76vw, 15rem) !important;
    min-height: 9.35rem !important;
  }

  html[data-theme][data-theme] body .home-storefront .storefront-recommend-carousel .storefront-recommend-nav,
  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-brand-showcase .storefront-brand-nav {
    display: none !important;
  }

  html[data-theme][data-theme] body .home-storefront .storefront-recommend-body .storefront-price-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.65rem !important;
  }

  html[data-theme][data-theme] body .home-storefront .storefront-recommend-body .storefront-card-action {
    min-width: 0 !important;
  }
}

@media (max-width: 720px) {
  html[data-theme] body .home-storefront .storefront-section-header :is(h2, h3) {
    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: 64rem) {
  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-slide {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    min-height: var(--home-hero-slide-height) !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-slide-media {
    position: absolute !important;
    inset: 0 !important;
    order: initial !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-slide-copy {
    position: relative !important;
    z-index: 1 !important;
    align-items: end !important;
    width: 100% !important;
  }
}

@media (max-width: 48rem) {
  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-shell {
    --home-hero-slide-height: auto !important;
    padding: 0.35rem 0 !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-carousel {
    min-height: 0 !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-slide {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 0.45rem !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-slide-media {
    position: relative !important;
    inset: auto !important;
    order: -1 !important;
    min-height: 0 !important;
    height: clamp(8.75rem, 42vw, 11.5rem) !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-slide-copy {
    align-items: stretch !important;
    padding: 0 !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-copy-card {
    padding: 0.72rem 0.82rem 0.86rem !important;
    justify-content: flex-start !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-slide-topline {
    margin-bottom: 0.42rem !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-slide-title {
    font-size: 1.36rem !important;
    line-height: 1.42 !important;
    -webkit-line-clamp: 2 !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-slide-summary {
    margin-top: 0.42rem !important;
    font-size: 0.78rem !important;
    line-height: 1.75 !important;
    -webkit-line-clamp: 2 !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-point-list {
    margin-top: 0.52rem !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-action-row {
    margin-top: 0.58rem !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-action {
    min-height: 2.08rem !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-mobile-nav {
    display: none !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-controls {
    justify-content: center !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-hero-dot-nav {
    justify-content: center !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;
  }
}