.products-page { background: #fff; }
.products-hero { position: relative; min-height: 68vh; overflow: hidden; color: #fff; background: #141414; }
.products-noise { position: absolute; inset: 0; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px; pointer-events: none; }
.products-glow { position: absolute; right: 25%; bottom: 0; width: 500px; height: 400px; border-radius: 999px; background: rgba(185,28,28,.10); filter: blur(160px); pointer-events: none; }
.products-corner { position: absolute; width: 40px; height: 40px; }
.products-corner-top { top: 32px; left: 32px; border-top: 1px solid rgba(255,255,255,.08); border-left: 1px solid rgba(255,255,255,.08); }
.products-corner-bottom { right: 32px; bottom: 32px; border-right: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.products-hero-inner { position: relative; z-index: 1; width: 100%; max-width: 1152px; min-height: 68vh; margin: 0 auto; padding: 128px 24px 64px; display: flex; flex-direction: column; justify-content: flex-end; }
.products-hero-copy { max-width: 768px; display: flex; flex-direction: column; gap: 24px; }
.products-hero-copy > .mono-label { margin: 0; font-size: 11px; line-height: 16px; letter-spacing: .45em; }
.products-hero h1 { margin: 0; font-family: Syne, sans-serif; font-size: 72px; font-weight: 700; line-height: .92; letter-spacing: -.025em; }
.products-hero-copy > p:not(.mono-label) { max-width: 576px; margin: 0; color: rgba(255,255,255,.40); font-size: 18px; line-height: 32px; }
.products-hero-actions { padding-top: 8px; display: flex; flex-wrap: wrap; gap: 12px; }
.products-hero-actions a { height: 48px; padding: 0 28px; display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; font-size: 14px; font-weight: 600; transition: color .15s, background .15s, border-color .15s; }
.products-hero-actions svg { width: 16px; height: 16px; }
.products-primary-button { color: #fff; background: var(--button-red); }
.products-primary-button:hover { background: var(--button-red-hover); }
.products-secondary-button { padding-left: 20px !important; padding-right: 20px !important; color: rgba(255,255,255,.70); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); backdrop-filter: blur(8px); font-weight: 500 !important; }
.products-secondary-button:hover { color: #fff; border-color: rgba(255,255,255,.20); background: rgba(255,255,255,.08); }

.products-catalog { padding: 80px 0; background: #fff; }
.products-catalog-inner { width: 100%; max-width: 1152px; margin: 0 auto; padding: 0 24px; }
.products-section-heading { margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid rgba(214,211,209,.60); }
.products-section-heading > .mono-label { margin: 0; color: #a8a29e; font-size: 10px; line-height: 15px; letter-spacing: .40em; }
.products-section-heading > div { margin-top: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.products-section-heading h2 { margin: 0; color: #1c1917; font-family: Syne, sans-serif; font-size: 36px; font-weight: 700; line-height: 43px; letter-spacing: -.02em; }
.products-section-heading h2 span { margin-left: 16px; color: #a8a29e; font-family: "DM Mono"; font-size: 20px; line-height: 28px; font-weight:500; letter-spacing: 0; }
.products-section-heading div > p { max-width: 576px; margin: 0; color: #737373; font-size: 15px; line-height: 28px; }
.products-tools { margin: -18px 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.products-filter-list { min-width: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.products-filter-list button { height: 38px; padding: 0 13px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #dddcd8; border-radius: 999px; color: #77736e; background: transparent; font-size: 12px; font-weight: 600; cursor: pointer; transition: .2s; }
.products-filter-list button span { color: #aaa6a0; font-family: "DM Mono"; font-size: 8px; font-weight:500; }
.products-filter-list button:hover, .products-filter-list button.active { color: #fff; border-color: #171717; background: #171717; }
.products-filter-list button.active span { color: rgba(255,255,255,.45); }
.products-search { width: 270px; height: 42px; flex: none; padding: 0 15px; display: flex; align-items: center; gap: 10px; border: 1px solid #dddcd8; border-radius: 12px; background: #fff; }
.products-search > span:first-child { color: #aaa6a0; font-size: 21px; line-height: 1; transform: rotate(-20deg); }
.products-search input { width: 100%; border: 0; outline: 0; color: #252321; background: transparent; font-size: 13px; }
.products-search input::placeholder { color: #aaa6a0; }
.products-empty { margin-top: 20px; padding: 58px 24px; text-align: center; border: 1px solid #dfdeda; border-radius: 16px; background: #faf9f7; }
.products-empty p { margin: 0 0 12px; color: #77736e; }
.products-empty button { border: 0; color: #a31820; background: transparent; font-weight: 650; cursor: pointer; }
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product-index-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; background: #141414; scroll-margin-top: 100px; transition: border-color .3s; }
.product-index-card:hover { border-color: rgba(255,255,255,.15); }
.product-index-link { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.product-index-visual { position: relative; height: 224px; overflow: hidden; background: #141414; }
.product-index-glow { position: absolute; bottom: 0; left: 50%; width: 208px; height: 144px; transform: translateX(-50%); border-radius: 999px; background: rgba(185,28,28,.10); filter: blur(56px); pointer-events: none; }
.product-index-corner { position: absolute; z-index: 1; width: 20px; height: 20px; }
.product-index-corner-top { top: 16px; left: 16px; border-top: 1px solid rgba(255,255,255,.08); border-left: 1px solid rgba(255,255,255,.08); }
.product-index-corner-bottom { right: 16px; bottom: 16px; border-right: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.product-index-category { position: absolute; z-index: 3; top: 16px; left: 16px; padding: 4px 10px; display: inline-flex; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; color: rgba(255,255,255,.30); background: rgba(255,255,255,.04); font-family: "DM Mono"; font-size: 9px; line-height: 14px; text-transform: uppercase; letter-spacing: .30em;  font-weight: 500;}
.product-index-visual img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transform: scale(1.06); filter: drop-shadow(0 16px 36px rgba(192,57,43,.16)); transition: transform .5s ease; }
.product-index-card:hover img { transform: scale(1.1); }
.product-index-visual.visual-missing { display: grid; place-items: center; }
.product-index-visual.visual-missing > p { margin: 0; color: rgba(255,255,255,.30); font-family: "DM Mono"; font-size: 9px; text-transform: uppercase; letter-spacing: .34em;  font-weight: 500;}
.product-index-copy { min-height: 98px; padding: 20px; display: flex; flex: 1; flex-direction: column; gap: 14px; border-top: 1px solid rgba(255,255,255,.06); background: #fff; }
.product-index-copy h2 { flex: 1; margin: 0; color: #1c1917; font-family: Syne; font-size: 17px; font-weight: 700; line-height: 23px; letter-spacing: -.01em; }
.product-index-code { margin-bottom: -7px; color: #9b9590; font-family: "DM Mono"; font-size: 8px; letter-spacing: .18em; text-transform: uppercase;  font-weight: 500;}
.product-index-price { margin-top: -5px; color: #1c1917; font-family: "DM Mono"; font-size: 12px; font-weight: 500; }
.product-index-cta { display: flex; align-items: center; gap: 8px; color: #a8a29e; }
.product-index-cta b { font-family: "DM Mono"; font-size: 10px; line-height: 15px; font-weight:500; text-transform: uppercase; letter-spacing: .32em; transition: color .2s; }
.product-index-cta i { font-family: "DM Mono"; font-size: 13px; line-height: 18px; font-style: normal; transition: color .2s, transform .2s;  font-weight: 500;}
.product-index-card:hover .product-index-cta { color: #44403c; }
.product-index-card:hover .product-index-cta i { transform: translateX(4px); }
.product-card-commerce { min-height: 72px; padding: 13px 14px 13px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid #ebe9e7; background: #fff; }
.product-card-price { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.product-card-price del { color: #a8a29e; font-family: "DM Mono"; font-size: 9px; line-height: 12px;  font-weight: 500;}
.product-card-price strong { color: #1c1917; font-family: Syne, sans-serif; font-size: 18px; line-height: 22px; white-space: nowrap; }
.product-card-add-cart { min-width: 142px; height: 42px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #fff; border: 0; border-radius: 11px; background: var(--button-red); font-size: 11px; font-weight: 700; cursor: pointer; transition: background .18s, transform .18s; }
.product-card-add-cart svg { width: 15px; height: 15px; }
.product-card-add-cart:hover { background: var(--button-red-hover); transform: translateY(-1px); }
.product-card-add-cart:disabled { color: #9b9590; background: #ebe9e7; cursor: not-allowed; transform: none; }

@media (max-width: 1023px) {
  .products-hero h1 { font-size: 60px; }
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .products-tools { align-items: stretch; flex-direction: column; }
  .products-search { width: 100%; }
}
@media (max-width: 767px) {
  .products-grid { grid-template-columns: 1fr 1fr; }
  .products-section-heading > div { align-items: flex-start; flex-direction: column; gap: 16px; }
  .products-filter-list { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding: 0 32px 4px 0; scroll-padding-inline: 4px 32px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%); mask-image: linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%); }
  .products-filter-list::-webkit-scrollbar { display: none; }
  .products-filter-list button { height: 44px; flex: none; justify-content: center; scroll-snap-align: start; }
}
@media (max-width: 639px) {
  .products-hero-inner { padding: 128px 24px 64px; }
  .products-hero h1 { font-size: 48px; line-height: .92; }
  .products-hero-copy > p:not(.mono-label) { font-size: 18px; line-height: 32px; }
  .products-hero-actions a { padding-left: 28px; padding-right: 28px; }
  .products-catalog-inner { padding: 0 24px; }
  .products-section-heading h2 { font-size: 30px; line-height: 36px; }
  .products-section-heading h2 span { font-size: 20px; }
  .products-grid { grid-template-columns: 1fr; }
  .product-index-visual { height: 224px; }
  .product-card-commerce { padding-left: 18px; }
  .product-card-add-cart { min-width: 150px; }
}

/* Keep the quote action inside the same white product information panel. */
.product-index-card > .quote-product-actions { padding: 0 20px 20px; background: #fff; }

/* Product photos use a light background; keep the category readable above them. */
.product-index-category { color: #57534e; border-color: rgba(28,25,23,.12); background: rgba(255,255,255,.88); }
@media (max-width: 639px) {
  .product-index-visual { height: auto; aspect-ratio: 3 / 2; flex: none; }
  .product-index-visual img, .product-index-card:hover img { object-fit: contain; transform: none; }
}