/* DIY Promo UI System v160.40.6
   Open Props-inspired design tokens, implemented locally with a diy- prefix.
   This file intentionally loads last and does not import or reset a third-party framework. */
:root {
  --diy-blue-50: #f4f8ff;
  --diy-blue-100: #e7f0ff;
  --diy-blue-200: #cfe0fa;
  --diy-blue-500: #2474dc;
  --diy-blue-600: #1769d2;
  --diy-blue-700: #1255ad;
  --diy-navy-700: #14365f;
  --diy-navy-800: #0b2b52;
  --diy-navy-900: #071f3d;
  --diy-ink: #142033;
  --diy-muted: #617087;
  --diy-border: #dce4ee;
  --diy-border-strong: #c4d1e0;
  --diy-surface: #ffffff;
  --diy-surface-soft: #f7f9fc;
  --diy-success: #087a55;
  --diy-radius-1: 6px;
  --diy-radius-2: 10px;
  --diy-radius-3: 14px;
  --diy-radius-round: 999px;
  --diy-space-1: 4px;
  --diy-space-2: 8px;
  --diy-space-3: 12px;
  --diy-space-4: 16px;
  --diy-space-5: 20px;
  --diy-space-6: 24px;
  --diy-space-8: 32px;
  --diy-shadow-1: 0 1px 2px rgb(7 31 61 / 5%);
  --diy-shadow-2: 0 8px 24px rgb(7 31 61 / 8%);
  --diy-shadow-3: 0 18px 48px rgb(7 31 61 / 12%);
  --diy-focus: 0 0 0 3px rgb(36 116 220 / 24%);
  --diy-motion-fast: 160ms;
  --diy-motion-base: 240ms;
}

html { color-scheme: light; scroll-behavior: smooth; }
body { color: var(--diy-ink); background: var(--diy-surface); }
body, button, input, select, textarea { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
button, input, select, textarea, a { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--diy-blue-600); outline-offset: 2px; box-shadow: var(--diy-focus); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }

/* Shared chrome */
.top-trust { background: var(--diy-navy-900); letter-spacing: .01em; }
.site-header, .site-nav { border-color: var(--diy-border); }
.site-nav a { border-radius: var(--diy-radius-1); transition: color var(--diy-motion-fast), background var(--diy-motion-fast); }
.site-nav a:hover { color: var(--diy-blue-700); background: var(--diy-blue-50); }
.site-nav .header-cta, .btn.primary, button.btn.primary, .home-market-search button, .floating-quote-btn {
  border: 1px solid var(--diy-blue-600);
  background: var(--diy-blue-600);
  color: #fff;
  border-radius: var(--diy-radius-2);
  box-shadow: var(--diy-shadow-1);
  transition: background var(--diy-motion-fast), border-color var(--diy-motion-fast), transform var(--diy-motion-fast), box-shadow var(--diy-motion-fast);
}
.site-nav .header-cta:hover, .btn.primary:hover, button.btn.primary:hover, .home-market-search button:hover, .floating-quote-btn:hover {
  background: var(--diy-blue-700);
  border-color: var(--diy-blue-700);
  color: #fff;
  box-shadow: var(--diy-shadow-2);
  transform: translateY(-1px);
}
.btn.secondary { border-color: var(--diy-border-strong); color: var(--diy-navy-800); background: #fff; border-radius: var(--diy-radius-2); }
.btn.secondary:hover { border-color: var(--diy-blue-500); color: var(--diy-blue-700); background: var(--diy-blue-50); }
.skip-link { border-radius: 0 0 var(--diy-radius-2) 0; }

/* Home */
body[data-page="home"] .home-market-header { box-shadow: var(--diy-shadow-1); }
.home-market-search { border: 1px solid var(--diy-border-strong); border-radius: var(--diy-radius-2); background: #fff; box-shadow: var(--diy-shadow-1); overflow: hidden; }
.home-market-search:focus-within { border-color: var(--diy-blue-500); box-shadow: var(--diy-focus); }
.home-market-search input, .home-market-search select { border-color: var(--diy-border); color: var(--diy-ink); }
.home-shop-category-toggle { border-radius: var(--diy-radius-2); transition: background var(--diy-motion-fast); }
.home-shop-category-toggle:hover { background: var(--diy-blue-50); }
.home-category-mega { border: 1px solid var(--diy-border); border-radius: var(--diy-radius-2); box-shadow: var(--diy-shadow-3); }
.category-grid article, .popular-category-grid > *, .process-row article, .solution-grid a, .service-grid article, .home-faq-grid article {
  border-color: var(--diy-border);
  border-radius: var(--diy-radius-3);
  box-shadow: var(--diy-shadow-1);
  transition: border-color var(--diy-motion-base), box-shadow var(--diy-motion-base), transform var(--diy-motion-base);
}
.category-grid article:hover, .popular-category-grid > *:hover, .solution-grid a:hover {
  border-color: var(--diy-blue-200);
  box-shadow: var(--diy-shadow-2);
  transform: translateY(-2px);
}
.eyebrow { color: var(--diy-blue-700); letter-spacing: .08em; }
.why-grid span { border-color: var(--diy-border); background: var(--diy-surface-soft); border-radius: var(--diy-radius-round); }

/* Catalog search, sidebar, controls */
body[data-page="products"] .catalog-shell { color: var(--diy-ink); }
.catalog-search-row.catalog-search-block {
  border: 1px solid var(--diy-border);
  border-radius: var(--diy-radius-3);
  background: linear-gradient(180deg, #fff, var(--diy-blue-50));
  box-shadow: var(--diy-shadow-1);
}
.catalog-search-label span { color: var(--diy-navy-900); }
.catalog-search-label small, .catalog-search-hint { color: var(--diy-muted); }
.catalog-search-control { border-color: var(--diy-border-strong); border-radius: var(--diy-radius-2); background: #fff; transition: border-color var(--diy-motion-fast), box-shadow var(--diy-motion-fast); }
.catalog-search-control:focus-within { border-color: var(--diy-blue-500); box-shadow: var(--diy-focus); }
.catalog-search-icon { color: var(--diy-muted); }
.search-suggestions { border: 1px solid var(--diy-border); border-radius: var(--diy-radius-2); box-shadow: var(--diy-shadow-3); overflow: hidden; }
.search-suggestions [role="option"]:hover, .search-suggestions [aria-selected="true"] { background: var(--diy-blue-50); }
.catalog-sidebar, .catalog-filter-panel, .promoplace-filter-panel { border-color: var(--diy-border); }
.catalog-sidebar button, .category-parent, .category-child { border-radius: var(--diy-radius-1); }
.catalog-sidebar button:hover, .category-parent:hover, .category-child:hover { background: var(--diy-blue-50); color: var(--diy-blue-700); }
.catalog-toolbar select, .catalog-toolbar button, .catalog-controls select, .catalog-controls button, .per-page-select, .sort-select {
  min-height: 42px;
  border: 1px solid var(--diy-border-strong);
  border-radius: var(--diy-radius-1);
  background-color: #fff;
  color: var(--diy-ink);
}
.catalog-filter-toggle { border-radius: var(--diy-radius-2); }

/* Product cards */
.product-card, .promoplace-card {
  border: 1px solid transparent;
  border-radius: var(--diy-radius-2);
  background: #fff;
  overflow: hidden;
  box-shadow: none;
  transition: border-color var(--diy-motion-base), box-shadow var(--diy-motion-base), transform var(--diy-motion-base);
}
.product-card:hover, .promoplace-card:hover { border-color: var(--diy-border); box-shadow: var(--diy-shadow-2); transform: translateY(-2px); }
.product-image-link { background: #fff; border-radius: var(--diy-radius-2); overflow: hidden; }
.product-image-link img { transition: transform var(--diy-motion-base); }
.product-card:hover .product-image-link img { transform: scale(1.018); }
.product-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--diy-space-2); padding: var(--diy-space-3) var(--diy-space-3) var(--diy-space-4); }
.product-title-link { display: block; color: var(--diy-ink); text-decoration: none; font-weight: 680; line-height: 1.35; overflow-wrap: anywhere; }
.product-sku, .product-price, .product-price-line { display: block; }
.product-title-link:hover { color: var(--diy-blue-700); }
.product-sku { color: var(--diy-muted); font-size: .88rem; }
.product-price, .product-price-line { color: var(--diy-success); font-weight: 720; }
.pagination { gap: var(--diy-space-2); }
.pagination button, .pagination a { border: 1px solid var(--diy-border); border-radius: var(--diy-radius-1); background: #fff; color: var(--diy-navy-800); min-width: 42px; min-height: 42px; }
.pagination button:hover:not(:disabled), .pagination a:hover, .pagination .active { border-color: var(--diy-blue-500); background: var(--diy-blue-50); color: var(--diy-blue-700); }

/* Product details: static and dynamic share v152 classes */
body[data-ui-page="product"] { background: #fff; }
.v152-breadcrumb { color: var(--diy-muted); font-size: 15px; }
.v152-breadcrumb a { color: var(--diy-navy-700); }
.v152-breadcrumb a:hover { color: var(--diy-blue-700); }
.v152-product-page { gap: clamp(32px, 4vw, 64px); }
.v152-main-image { border: 1px solid var(--diy-border); border-radius: var(--diy-radius-3); background: #fff; box-shadow: var(--diy-shadow-1); padding: var(--diy-space-4); }
.v152-product-info h1 { color: var(--diy-navy-900); font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.v152-sku { color: var(--diy-muted); }
.v152-tabs { gap: clamp(16px, 2vw, 28px); border-color: var(--diy-border); scrollbar-width: none; }
.v152-tabs::-webkit-scrollbar { display: none; }
.v152-tabs button { color: var(--diy-muted); white-space: nowrap; border-radius: var(--diy-radius-1) var(--diy-radius-1) 0 0; }
.v152-tabs button:hover { color: var(--diy-blue-700); background: var(--diy-blue-50); }
.v152-tabs button.active { color: var(--diy-navy-900); border-color: var(--diy-blue-600); }
.v152-tab-panel { color: var(--diy-ink); }
.geo-direct-answer { background: var(--diy-blue-50); border-color: var(--diy-blue-600); border-radius: 0 var(--diy-radius-1) var(--diy-radius-1) 0; }
.v152-pricing { border-color: var(--diy-border); }
.v152-pricing h2 { color: var(--diy-navy-900); letter-spacing: .02em; }
.v152-price-table { border-radius: var(--diy-radius-2); overflow: hidden; }
.v152-price-table th, .v152-price-table td { border-color: var(--diy-border); }
.v152-price-table th { background: var(--diy-surface-soft); color: var(--diy-navy-900); }
.v152-pricing-notice, .v152-disclaimer { border: 1px solid var(--diy-border); border-radius: var(--diy-radius-2); background: var(--diy-surface-soft); color: var(--diy-muted); padding: var(--diy-space-4); }
.v152-quote-form { border-color: var(--diy-border); border-radius: var(--diy-radius-3); box-shadow: var(--diy-shadow-2); }
.v152-quote-form input, .v152-quote-form select, .v152-quote-form textarea { border-color: var(--diy-border-strong); border-radius: var(--diy-radius-1); background: #fff; }
.v152-quote-form input:focus, .v152-quote-form select:focus, .v152-quote-form textarea:focus { outline: 0; border-color: var(--diy-blue-500); box-shadow: var(--diy-focus); }
.v152-thumb-row-wrap, .v152-related-wrap { grid-template-columns: 44px minmax(0, 1fr) 44px; }
.v152-thumb-row { gap: var(--diy-space-3); scroll-snap-type: x proximity; }
.v152-thumb { border-color: var(--diy-border); border-radius: var(--diy-radius-1); scroll-snap-align: start; }
.v152-thumb:hover { border-color: var(--diy-blue-500); }
.v152-thumb.active { border: 2px solid var(--diy-blue-600); box-shadow: var(--diy-focus); }
.v152-arrow {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--diy-border-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--diy-navy-900);
  font-size: 0;
  box-shadow: var(--diy-shadow-1);
  transition: border-color var(--diy-motion-fast), color var(--diy-motion-fast), background var(--diy-motion-fast), transform var(--diy-motion-fast);
}
.v152-arrow::before { content: ""; width: 8px; height: 8px; border-top: 1.8px solid currentColor; border-right: 1.8px solid currentColor; }
.v152-arrow-left::before, .v152-related-left::before { transform: rotate(-135deg); margin-left: 3px; }
.v152-arrow-right::before, .v152-related-right::before { transform: rotate(45deg); margin-right: 3px; }
.v152-arrow:hover { border-color: var(--diy-blue-500); color: var(--diy-blue-700); background: var(--diy-blue-50); transform: scale(1.04); }
.v152-arrow[hidden], .v152-arrow.is-unneeded { display: none !important; }

/* Recommendations */
.v152-related { border-color: var(--diy-border); border-radius: var(--diy-radius-3); padding: clamp(24px, 3vw, 40px); box-shadow: var(--diy-shadow-1); }
.v152-related h2 { color: var(--diy-navy-900); font-size: clamp(20px, 2vw, 26px); font-weight: 720; }
.v152-related-row { gap: var(--diy-space-4); scroll-snap-type: x mandatory; }
.v152-related-card { border: 1px solid var(--diy-border); border-radius: var(--diy-radius-2); background: #fff; overflow: hidden; padding-bottom: var(--diy-space-3); scroll-snap-align: start; transition: border-color var(--diy-motion-fast), box-shadow var(--diy-motion-fast), transform var(--diy-motion-fast); }
.v152-related-card:hover { border-color: var(--diy-blue-200); box-shadow: var(--diy-shadow-2); transform: translateY(-2px); }
.v152-related-card strong, .v152-related-card span, .v152-related-card em { margin-left: var(--diy-space-3); margin-right: var(--diy-space-3); }
.v152-related-card strong { color: var(--diy-ink); }
.v152-related-card em { color: var(--diy-success); font-weight: 700; }
.v152-related-loading { color: var(--diy-muted); }

/* Dialog-like and utility surfaces */
.floating-quote-panel, .date-popover, .date-panel { border: 1px solid var(--diy-border); border-radius: var(--diy-radius-3); box-shadow: var(--diy-shadow-3); }
.site-footer { background: var(--diy-navy-900); }
.site-footer a:focus-visible { outline-color: #fff; }

/* Tablet */
@media (max-width: 1199px) {
  .catalog-search-row.catalog-search-block { border-radius: var(--diy-radius-2); }
  .catalog-sidebar, .catalog-filter-panel, .promoplace-filter-panel { box-shadow: var(--diy-shadow-3); }
  .v152-product-page { grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr); padding-inline: 20px; }
  .v152-main-image { min-height: 420px; }
  .v152-related { margin-inline: 20px; }
}

/* Mobile */
@media (max-width: 767px) {
  :root { --diy-shadow-2: 0 6px 18px rgb(7 31 61 / 8%); }
  .top-trust { font-size: 11px; line-height: 1.35; padding-inline: 12px; text-align: center; }
  .site-header { padding-inline: 14px; }
  .home-market-search { border-radius: var(--diy-radius-2); }
  .catalog-search-row.catalog-search-block { margin-inline: 12px; padding: 16px; }
  .catalog-search-label { gap: 4px; }
  .product-grid { gap: 14px; }
  .product-card-body { padding: 10px 8px 14px; }
  .product-title-link { font-size: .94rem; }
  .v152-product-page { display: block; padding: 0 14px 24px; }
  .v152-gallery, .v152-product-info { box-sizing: border-box; width: calc(100vw - 28px) !important; max-width: calc(100vw - 28px) !important; min-width: 0 !important; }
  .v152-mobile-positioned-title { box-sizing: border-box; width: calc(100vw - 28px) !important; max-width: calc(100vw - 28px) !important; white-space: normal !important; overflow-wrap: anywhere; color: var(--diy-navy-900) !important; font-weight: 700 !important; }
  .v152-main-image { box-sizing: border-box; width: calc(100vw - 28px) !important; max-width: calc(100vw - 28px) !important; min-width: 0 !important; min-height: 320px; padding: 10px; overflow: hidden; }
  .v152-main-image img { width: 100%; max-width: 100%; height: auto; }
  .v152-product-info { margin-top: 24px; }
  .v152-product-info h1 { font-size: clamp(24px, 7vw, 30px); }
  .v152-tabs { overflow-x: auto; gap: 18px; margin-right: -14px; padding-right: 14px; }
  .v152-price-table { width: 100%; display: block; overflow-x: auto; }
  .v152-price-table th, .v152-price-table td { min-width: 88px; padding: 11px 10px; }
  .v152-thumb-row-wrap, .v152-related-wrap { grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 4px; }
  .v152-arrow { width: 36px; height: 36px; }
  .v152-thumb { min-width: 82px; width: 82px; height: 70px; }
  .v152-related { margin: 32px 12px 0; padding: 22px 12px 26px; }
  .v152-related-card { min-width: min(72vw, 240px); max-width: min(72vw, 240px); }
  .v152-related-card img { width: 100%; height: 180px; }
  .v152-quote-form.open { grid-template-columns: 1fr; padding: 16px; }
  .v152-quote-form .wide { grid-column: 1; }
  .floating-quote-btn { min-height: 48px; }
}

/* v160.40.7: compact homepage navigation and clean recommendation cards */
body[data-page="home"] .site-header.home-market-header {
  min-height: 82px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto !important;
  align-items: center;
  gap: 24px !important;
  padding: 10px 3vw !important;
  box-shadow: 0 1px 0 rgb(8 42 76 / 10%);
}
body[data-page="home"] .home-market-header .brand { grid-column: 1 !important; grid-row: 1 !important; align-self: center; }
body[data-page="home"] .home-secondary-nav {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: static !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(18px, 2.4vw, 44px);
  width: auto !important;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none;
}
body[data-page="home"] .home-secondary-nav a { white-space: nowrap; }

.product-grid > .product-card:nth-child(n + 9) {
  content-visibility: auto;
  contain-intrinsic-size: 360px 520px;
}

.v152-related {
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}
.v152-related-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.v152-related-card:hover { transform: translateY(-2px); box-shadow: none !important; }
.v152-related-image {
  border: 1px solid #d6dee8 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgb(7 31 61 / 4%);
}
.v152-related-card:hover .v152-related-image {
  border-color: #8da2b8 !important;
  box-shadow: 0 8px 22px rgb(7 31 61 / 9%);
}
.v152-related-card img {
  box-sizing: border-box;
  background: #fff;
  object-fit: contain;
  padding: 12px;
}

/* One icon per control; arrows are present only when the row truly overflows. */
.v152-thumb-row-wrap > .v152-arrow,
.v152-related .v152-arrow {
  display: inline-grid !important;
  place-items: center;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px;
  padding: 0 !important;
  border: 1px solid #94a3b8 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #0f172a !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: 0 2px 8px rgb(15 23 42 / 7%) !important;
}
.v152-thumb-row-wrap > .v152-arrow::before,
.v152-related .v152-arrow::before {
  width: 8px;
  height: 8px;
  border-width: 1.8px;
}
.v152-thumb-row-wrap > .v152-arrow:hover:not(:disabled),
.v152-related .v152-arrow:hover:not(:disabled) {
  border-color: #1769d2 !important;
  background: #f4f8ff !important;
  color: #1769d2 !important;
  transform: translateY(-1px);
}
.v152-arrow:disabled { opacity: .28 !important; }
.v152-arrow[hidden],
.v152-arrow.is-unneeded,
.v152-no-overflow > .v152-arrow,
.diy-carousel-static > .v152-arrow { display: none !important; }
.v152-thumb-row-wrap.v152-no-overflow,
.v152-thumb-row-wrap.diy-carousel-static { grid-template-columns: minmax(0, 1fr) !important; }
.v152-thumb-row-wrap.v152-no-overflow .v152-thumb-row,
.v152-thumb-row-wrap.diy-carousel-static .v152-thumb-row { justify-content: center; }

@media (max-width: 760px) {
  body[data-page="home"] .site-header.home-market-header {
    display: grid !important;
    min-height: 68px;
    padding-block: 8px;
  }
  body[data-page="home"] .home-secondary-nav {
    grid-column: auto !important;
    grid-row: auto !important;
    position: fixed !important;
    display: none !important;
    width: min(88vw, 360px);
    padding: 28px 22px !important;
  }
  body[data-page="home"] .home-secondary-nav.open { display: flex !important; }
}