/* DK final template UI: socks; profile: fashion-catalog; version: 20261002-final-template-ui-1 */
:root {
  color-scheme: light;
  --dk-accent: #304a70;
  --dk-accent-2: #b7736b;
  --dk-paper: #f5f6f8;
  --dk-surface: #ffffff;
  --dk-ink: #202a37;
  --dk-muted: color-mix(in srgb, var(--dk-ink) 66%, transparent);
  --dk-line: color-mix(in srgb, #202a37 16%, transparent);
  --dk-radius: 6px;
  --dk-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body.template-ui {
  margin: 0;
  background: var(--dk-paper) !important;
  color: var(--dk-ink) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  letter-spacing: 0;
}
body.template-ui *, body.template-ui *::before, body.template-ui *::after { box-sizing: border-box; }
body.template-ui img { display: block; max-width: 100%; height: auto; }
body.template-ui a { text-underline-offset: 3px; }
body.template-ui h1, body.template-ui h2, body.template-ui h3 { color: var(--dk-ink); letter-spacing: 0; }
body.template-ui h1 {
  max-width: 22ch !important;
  margin: 0 0 16px !important;
  font-family: var(--dk-display) !important;
  font-size: clamp(2rem, 3.5vw, 3.25rem) !important;
  line-height: 1.03 !important;
  font-weight: 760;
  text-wrap: balance;
}
body.template-ui h2 {
  font-family: var(--dk-display) !important;
  font-size: clamp(1.45rem, 2.2vw, 2.3rem) !important;
  line-height: 1.13 !important;
  text-wrap: balance;
}
body.template-ui p { color: var(--dk-muted) !important; }
body.template-ui .topbar,
body.template-ui .live-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px max(18px, calc((100vw - 1240px) / 2));
  border-bottom: 1px solid color-mix(in srgb, var(--dk-ink) 18%, transparent) !important;
  background: var(--dk-surface) !important;
  color: var(--dk-ink) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.template-ui .brand,
body.template-ui .live-brand {
  color: inherit !important;
  font-family: var(--dk-display) !important;
  font-size: 1.03rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none;
}
body.template-ui .brand-mark {
  border-radius: 3px !important;
  background: var(--dk-accent-2) !important;
  box-shadow: none !important;
}
body.template-ui .topbar nav,
body.template-ui .live-nav { gap: 4px !important; }
body.template-ui .topbar nav a,
body.template-ui .live-nav a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  color: inherit !important;
  border-radius: 3px !important;
  padding: 8px 10px !important;
  font-size: .86rem;
  font-weight: 720;
  text-decoration: none;
}
body.template-ui .topbar nav a:hover,
body.template-ui .topbar nav a:focus-visible,
body.template-ui .live-nav a:hover,
body.template-ui .live-nav a:focus-visible { background: color-mix(in srgb, var(--dk-ink) 12%, transparent) !important; outline: none; }
body.template-ui .topbar .nav-cta,
body.template-ui .live-nav .nav-cta {
  background: var(--dk-accent-2) !important;
  color: #ffffff !important;
  border: 1px solid var(--dk-accent-2) !important;
}
body.template-ui main { max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 34px); }
body.template-ui .hero,
body.template-ui .live-hero {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, .93fr) minmax(360px, 1.07fr) !important;
  align-items: center;
  gap: clamp(24px, 4vw, 58px) !important;
  padding: clamp(36px, 5.5vw, 76px) 0 clamp(30px, 4vw, 54px) !important;
}
body.template-ui .hero-copy,
body.template-ui .live-hero-copy { max-width: 600px; }
body.template-ui .hero-copy > p,
body.template-ui .live-hero-copy > p { max-width: 58ch; font-size: 1.03rem; }
body.template-ui .hero-visual,
body.template-ui .hero-media,
body.template-ui .hero-product,
body.template-ui .live-hero-media,
body.template-ui .visual {
  width: 100%;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid var(--dk-line) !important;
  border-radius: var(--dk-radius) !important;
  background: var(--dk-surface) !important;
  box-shadow: none !important;
}
body.template-ui .hero-visual img,
body.template-ui .hero-media img,
body.template-ui .hero-product img,
body.template-ui .live-hero-media img,
body.template-ui .visual img {
  width: 100%;
  height: clamp(300px, 37vw, 510px) !important;
  object-fit: cover;
  object-position: center;
}
body.template-ui .hero-visual figcaption,
body.template-ui .source-note {
  display: block;
  padding: 9px 12px;
  background: var(--dk-surface);
  color: var(--dk-muted) !important;
  font-size: .76rem;
}
body.template-ui .hero-actions,
body.template-ui .live-hero-actions,
body.template-ui .form-actions { gap: 10px !important; margin-top: 20px !important; }
body.template-ui .button,
body.template-ui button,
body.template-ui .live-button,
body.template-ui .dkxp-button {
  min-height: 44px;
  border-radius: 3px !important;
  padding: 10px 15px !important;
  box-shadow: none !important;
  font-weight: 760 !important;
  letter-spacing: 0;
}
body.template-ui .primary,
body.template-ui .live-button.primary,
body.template-ui .dkxp-button.primary { background: var(--dk-accent) !important; color: #ffffff !important; border-color: var(--dk-accent) !important; }
body.template-ui .secondary,
body.template-ui .live-button.secondary { background: transparent !important; color: var(--dk-ink) !important; border-color: var(--dk-line) !important; }
body.template-ui .chip-row,
body.template-ui .hero-notes,
body.template-ui .mini-list { gap: 8px !important; }
body.template-ui .chip-row span,
body.template-ui .hero-notes li,
body.template-ui .mini-list span,
body.template-ui .meta-pill {
  border: 1px solid var(--dk-line) !important;
  border-radius: 3px !important;
  background: var(--dk-surface) !important;
  color: var(--dk-muted) !important;
  font-size: .76rem;
}
body.template-ui .section,
body.template-ui .live-section,
body.template-ui .dkxp-section,
body.template-ui .section-head,
body.template-ui .split-feature,
body.template-ui .content-section { border-color: var(--dk-line) !important; }
body.template-ui .section,
body.template-ui .live-section,
body.template-ui .dkxp-section { padding-block: clamp(30px, 4vw, 54px) !important; }
body.template-ui .section-head,
body.template-ui .live-section-head,
body.template-ui .dkxp-section-head { align-items: end !important; gap: 16px !important; margin-bottom: 18px !important; }
body.template-ui .category-grid,
body.template-ui .live-category-grid,
body.template-ui .category-board,
body.template-ui .category-tile-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
body.template-ui .category-card,
body.template-ui .live-category-card,
body.template-ui .category-tile {
  min-height: 0 !important;
  overflow: hidden;
  border: 1px solid var(--dk-line) !important;
  border-radius: var(--dk-radius) !important;
  background: var(--dk-surface) !important;
  box-shadow: none !important;
  transform: none !important;
}
body.template-ui .category-card > img,
body.template-ui .category-card img,
body.template-ui .live-category-card img,
body.template-ui .category-tile img {
  width: 100%;
  aspect-ratio: 1.25 / 1;
  object-fit: cover;
}
body.template-ui .category-card a,
body.template-ui .live-category-card a,
body.template-ui .category-tile { text-decoration: none; }
body.template-ui .category-card strong,
body.template-ui .category-card span,
body.template-ui .live-card-body,
body.template-ui .category-tile-copy { display: block; padding: 10px 12px; }
body.template-ui .product-grid,
body.template-ui .live-product-grid,
body.template-ui .dkxp-card-grid,
body.template-ui .path-grid,
body.template-ui .proof-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
body.template-ui .product-card,
body.template-ui .live-product-card,
body.template-ui .path-link {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--dk-line) !important;
  border-radius: var(--dk-radius) !important;
  background: var(--dk-surface) !important;
  box-shadow: none !important;
  transform: none !important;
}
body.template-ui .product-card > a,
body.template-ui .live-product-card > a { display: block; height: 100%; text-decoration: none; }
body.template-ui .product-card .product-media,
body.template-ui .product-card > a > picture,
body.template-ui .product-card > a > img,
body.template-ui .live-product-card img {
  display: block;
  width: 100%;
  overflow: hidden;
  background: color-mix(in srgb, var(--dk-paper) 70%, var(--dk-surface));
}
body.template-ui .product-card .product-media img,
body.template-ui .product-card > a > picture img,
body.template-ui .product-card > a > img,
body.template-ui .live-product-card img {
  width: 100%;
  aspect-ratio: 1 / .88;
  object-fit: cover;
}
body.template-ui .product-card-body,
body.template-ui .product-copy,
body.template-ui .live-product-info {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 132px;
  padding: 12px !important;
  background: var(--dk-surface);
}
body.template-ui .product-card strong,
body.template-ui .live-product-card strong { color: var(--dk-ink); font-size: .96rem; line-height: 1.28; }
body.template-ui .product-card p,
body.template-ui .product-card .product-summary,
body.template-ui .product-card-body > span:not(.meta-pill),
body.template-ui .live-product-kicker { color: var(--dk-muted) !important; font-size: .82rem; }
body.template-ui .live-product-action,
body.template-ui .product-action { color: var(--dk-accent) !important; font-size: .83rem; font-weight: 780; }
/* Expansion pages retain their links but do not lead the new image-first homepage with SVG concept tiles. */
body.template-ui .dkxp-card-grid .dkxp-card {
  min-height: 0;
  border: 1px solid var(--dk-line) !important;
  border-radius: 3px !important;
  background: var(--dk-surface) !important;
  color: var(--dk-ink);
  padding: 13px !important;
  text-decoration: none;
}
body.template-ui .dkxp-card-grid .dkxp-card img { display: block !important; }
body.template-ui .dkxp-card-grid .dkxp-card span { font-weight: 720; line-height: 1.28; }
body.template-ui .dkxp-card-grid .dkxp-card p { margin: 7px 0 0; font-size: .76rem; }
/* The expanded library stays available on product listings; homepages lead with their real category and product photography. */
body.template-ui .hero + .dkxp-section { display: none !important; }
body.template-ui .product-hero,
body.template-ui .product-detail,
body.template-ui .pdp-layout { gap: clamp(22px, 4vw, 48px) !important; }
body.template-ui .product-gallery,
body.template-ui .product-image,
body.template-ui .pdp-gallery {
  overflow: hidden;
  border: 1px solid var(--dk-line) !important;
  border-radius: var(--dk-radius) !important;
  background: var(--dk-surface) !important;
}
body.template-ui .product-gallery img,
body.template-ui .product-image img,
body.template-ui .pdp-gallery img { width: 100%; aspect-ratio: 1 / .9; object-fit: cover; }
body.template-ui .rfq-form,
body.template-ui form[data-rfq-form],
body.template-ui .rfq-panel {
  border: 1px solid var(--dk-line) !important;
  border-radius: var(--dk-radius) !important;
  background: var(--dk-surface) !important;
  box-shadow: none !important;
}
body.template-ui input,
body.template-ui select,
body.template-ui textarea {
  border: 1px solid var(--dk-line) !important;
  border-radius: 3px !important;
  background: var(--dk-surface) !important;
  color: var(--dk-ink) !important;
}
body.template-ui .footer,
body.template-ui footer {
  margin-top: 36px;
  padding: 30px max(18px, calc((100vw - 1240px) / 2));
  border-top: 1px solid var(--dk-line) !important;
  background: color-mix(in srgb, var(--dk-paper) 72%, var(--dk-surface)) !important;
}

/* Marketplace receives its own dense catalog treatment without changing its search or quote-cart behavior. */
body.template-ui .market-header { background: var(--dk-surface) !important; border-bottom: 1px solid var(--dk-line) !important; box-shadow: none !important; }
body.template-ui .market-brand-mark { border-radius: 3px !important; background: var(--dk-accent) !important; }
body.template-ui .search-shell { border: 2px solid var(--dk-accent) !important; border-radius: 4px !important; box-shadow: none !important; }
body.template-ui .search-shell button { background: var(--dk-accent) !important; border-radius: 0 !important; }
body.template-ui .search-switch,
body.template-ui .search-switch a,
body.template-ui .cart-link,
body.template-ui .mobile-quote-dock { border-radius: 3px !important; }
body.template-ui .market-search-hero { max-width: 1240px; padding-top: 22px; text-align: left; }
body.template-ui .market-search-hero h1 { max-width: 22ch !important; font-family: Inter, ui-sans-serif, system-ui, sans-serif !important; font-size: clamp(2rem, 3vw, 3.25rem) !important; }
body.template-ui .market-section { padding-block: 28px !important; }
body.template-ui .market-section .product-grid.dense { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 12px !important; }
body.template-ui .market-section .category-tile-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 10px !important; }
body.template-ui .market-section .category-tile { border-radius: 4px !important; }

body.template-ui.ui-seasonal-contrast { background: #171312 !important; color: #f7f3ec !important; }
body.template-ui.ui-seasonal-contrast .section,
body.template-ui.ui-seasonal-contrast .live-section,
body.template-ui.ui-seasonal-contrast .dkxp-section { background: #171312 !important; }
body.template-ui.ui-seasonal-contrast .category-card,
body.template-ui.ui-seasonal-contrast .live-category-card,
body.template-ui.ui-seasonal-contrast .product-card,
body.template-ui.ui-seasonal-contrast .live-product-card,
body.template-ui.ui-seasonal-contrast .dkxp-card-grid .dkxp-card { background: #24201e !important; }
body.template-ui.ui-automation-technical .hero,
body.template-ui.ui-automation-technical .live-hero {
  border: 0 !important;
  border-bottom: 4px solid var(--dk-accent-2) !important;
  background: var(--dk-ink) !important;
  color: #ffffff !important;
  padding-inline: clamp(20px, 4vw, 48px) !important;
}
body.template-ui.ui-automation-technical .hero h1,
body.template-ui.ui-automation-technical .live-hero h1 { color: #ffffff !important; }
body.template-ui.ui-automation-technical .hero p,
body.template-ui.ui-automation-technical .live-hero p { color: color-mix(in srgb, #ffffff 72%, transparent) !important; }
body.template-ui.ui-automation-technical .hero .secondary,
body.template-ui.ui-automation-technical .live-hero .secondary { color: #ffffff !important; border-color: color-mix(in srgb, #ffffff 32%, transparent) !important; }
body.template-ui.ui-marketplace-dense .market-home .dkxp-section { display: none !important; }
body.template-ui.ui-technical-catalog .category-card,
body.template-ui.ui-electric-supply .category-card,
body.template-ui.ui-hardware-retail .category-card { border-top: 3px solid var(--dk-accent) !important; }
body.template-ui.ui-ceremony-editorial .hero,
body.template-ui.ui-ceremony-minimal .hero,
body.template-ui.ui-wedding-editorial .hero { grid-template-columns: minmax(0, .82fr) minmax(410px, 1.18fr) !important; }
body.template-ui.ui-awards-luxury .product-card .product-media img,
body.template-ui.ui-luxury-collection .product-card .product-media img { object-fit: contain; background: #fbfaf6; }
body.template-ui.ui-marketplace-dense .market-section .product-card .product-media img { aspect-ratio: 1 / .95; }

/* Profile-specific composition: each reviewed template direction gets a distinct public hierarchy. */
body.template-ui.ui-fashion-catalog .hero,
body.template-ui.ui-fashion-catalog .live-hero {
  grid-template-columns: .84fr 1.16fr !important;
  background: var(--dk-paper);
  border-radius: 0;
  padding-inline: clamp(18px, 3vw, 42px) !important;
}
body.template-ui.ui-fashion-catalog .hero-visual,
body.template-ui.ui-fashion-catalog .hero-media,
body.template-ui.ui-fashion-catalog .live-hero-media { order: 1; border-radius: 0 !important; }
body.template-ui.ui-fashion-catalog .category-card,
body.template-ui.ui-fashion-catalog .live-category-card,
body.template-ui.ui-fashion-catalog .product-card,
body.template-ui.ui-fashion-catalog .live-product-card { border-radius: 0 !important; }
body.template-ui.ui-fashion-catalog .product-grid,
body.template-ui.ui-fashion-catalog .live-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
body.template-ui.ui-fashion-catalog .section-head { border-bottom: 2px solid var(--dk-accent) !important; padding-bottom: 12px; }

@media (max-width: 900px) {
  body.template-ui .topbar,
  body.template-ui .live-header { align-items: flex-start; flex-direction: column; padding-block: 10px; }
  body.template-ui .topbar nav,
  body.template-ui .live-nav { width: 100%; overflow-x: auto; padding-bottom: 1px; }
  body.template-ui .hero,
  body.template-ui .live-hero,
  body.template-ui.ui-ceremony-editorial .hero,
  body.template-ui.ui-ceremony-minimal .hero,
  body.template-ui.ui-wedding-editorial .hero { grid-template-columns: 1fr !important; gap: 24px !important; padding-top: 28px !important; }
  body.template-ui .hero-copy,
  body.template-ui .live-hero-copy { max-width: 680px; }
  body.template-ui .hero-visual img,
  body.template-ui .hero-media img,
  body.template-ui .hero-product img,
  body.template-ui .live-hero-media img,
  body.template-ui .visual img { height: min(62vw, 460px) !important; }
  body.template-ui .category-grid,
  body.template-ui .live-category-grid,
  body.template-ui .category-board,
  body.template-ui .category-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.template-ui .product-grid,
  body.template-ui .live-product-grid,
  body.template-ui .dkxp-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.template-ui .market-section .product-grid.dense { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  body.template-ui .market-section .category-tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 560px) {
  body.template-ui main { padding-inline: 14px; }
  body.template-ui h1 { font-size: clamp(1.9rem, 8.3vw, 2.75rem) !important; max-width: 22ch !important; }
  body.template-ui .topbar nav a,
  body.template-ui .live-nav a { padding-inline: 9px !important; font-size: .82rem; }
  body.template-ui .hero-actions,
  body.template-ui .live-hero-actions { display: grid !important; grid-template-columns: 1fr 1fr; }
  body.template-ui .button,
  body.template-ui .live-button { width: 100%; }
  body.template-ui .category-grid,
  body.template-ui .live-category-grid,
  body.template-ui .category-board,
  body.template-ui .category-tile-grid { gap: 10px !important; }
  body.template-ui .product-grid,
  body.template-ui .live-product-grid,
  body.template-ui .dkxp-card-grid { gap: 10px !important; }
  body.template-ui .product-card-body,
  body.template-ui .product-copy,
  body.template-ui .live-product-info { min-height: 124px; padding: 10px !important; }
  body.template-ui .market-section .product-grid.dense { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.template-ui .market-section .category-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.template-ui .market-search-hero { padding-inline: 0; }
  body.template-ui.ui-marketplace-dense .rfq-card { min-height: 156px !important; padding: 18px !important; gap: 18px; }
  body.template-ui.ui-marketplace-dense .rfq-card strong { font-size: 1.16rem !important; line-height: 1.18 !important; }
  body.template-ui.ui-marketplace-dense .hero-visual-tile { min-height: 94px !important; }
}