/* ═════ zintex26-product-grid ═════ */
.z26-prod{
  /* Brand */
  --z-navy:#003366; --z-white:#FFFFFF; --z-yellow:#FFE500;
  /* Supporting */
  --z-navy-900:#0A1A2E; --z-blue:#1F5FA8; --z-ink:#1B2430; --z-muted:#5B6675;
  --z-surface:#F4F7FA; --z-ivory:#FBF8F3; --z-ivory-line:#E7E1D7;

  font-family:"Open Sans",system-ui,sans-serif; font-weight:500; color:var(--z-ink);
}
.z26-prod *,.z26-prod *::before,.z26-prod *::after{box-sizing:border-box}

.z26-prod__inner{max-width:1200px; margin:0 auto; padding:48px 0}

/* ---------- Head (universal zintex26 eyebrow / heading / intro) ---------- */
.z26-prod__head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:8px 24px; padding:0 16px; margin-bottom:20px}
.z26-prod__titles{max-width:760px}
.z26-prod__eyebrow{
  margin:0 0 10px; color:var(--z-blue);
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.z26-prod__heading{margin:0; font-size:clamp(28px,3.6vw,40px); line-height:1.15; font-weight:800; letter-spacing:-.01em; color:var(--z-navy)}
.z26-prod__intro{margin:12px 0 0; color:var(--z-muted); font-size:17px; line-height:1.6}
.z26-prod__all{font-weight:700; font-size:16px; color:var(--z-blue); text-decoration:none}
.z26-prod__all:hover{color:var(--z-navy); text-decoration:underline; text-underline-offset:3px}

.z26-prod__list{list-style:none; margin:0; padding:0}
.z26-prod__card{position:relative; display:block; height:100%; text-decoration:none; color:inherit; border-radius:14px; overflow:hidden}
.z26-prod__card:focus-visible{outline:3px solid var(--z-blue); outline-offset:3px}
.z26-prod__media{display:block; position:relative; overflow:hidden; background:#C9D3DC}
.z26-prod__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease}
.z26-prod__card:hover .z26-prod__media img{transform:scale(1.03)}
.z26-prod__name{display:block; font-weight:800}
.z26-prod__tagline{display:block}

/* ---------- Style: Clear Glass (mobile: swipe row) ---------- */
.z26-prod--glass{background:var(--z-surface)}
.z26-prod--glass .z26-prod__list{
  display:flex; gap:12px; padding:0 16px;
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.z26-prod--glass .z26-prod__list::-webkit-scrollbar{display:none}
.z26-prod--glass .z26-prod__item{flex:none; width:260px; height:320px; scroll-snap-align:start}
.z26-prod--glass .z26-prod__media{position:absolute; inset:0}
.z26-prod--glass .z26-prod__caption{
  position:absolute; left:10px; right:10px; bottom:10px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px; color:var(--z-white);
  background:rgba(10,26,46,.55); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);
}
.z26-prod--glass .z26-prod__name{font-size:16px; line-height:1.25}
.z26-prod--glass .z26-prod__tagline{font-size:13px; line-height:1.35; color:rgba(255,255,255,.88); margin-top:2px}
.z26-prod--glass .z26-prod__arrow{font-size:17px; flex:none; transition:transform .2s ease}
.z26-prod--glass .z26-prod__card:hover .z26-prod__arrow{transform:translateX(3px)}
.z26-prod__hint{margin:12px 16px 0; font-size:13px; color:var(--z-muted)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .z26-prod--glass .z26-prod__caption{background:rgba(10,26,46,.9)}
}

/* ---------- Style: Warm & Solid (mobile: compact list) ---------- */
/* Warm uses brand colors only: navy text, yellow highlights, white/ivory grounds */
.z26-prod--warm{--z-ink:var(--z-navy); background:var(--z-ivory); color:var(--z-ink)}
.z26-prod--warm .z26-prod__eyebrow{
  display:inline-block; padding:6px 12px; border-radius:8px;
  background:var(--z-yellow); color:var(--z-navy);
  font-size:14px; letter-spacing:.02em; text-transform:none; margin-bottom:14px;
}
.z26-prod--warm .z26-prod__heading{color:var(--z-navy)}
.z26-prod--warm .z26-prod__intro{color:var(--z-navy); opacity:.8}
.z26-prod--warm .z26-prod__all{color:var(--z-navy)}
.z26-prod--warm .z26-prod__list{display:flex; flex-direction:column; gap:10px; padding:0 16px}
.z26-prod--warm .z26-prod__card{display:flex; align-items:center; gap:14px; padding:10px; border-radius:18px; background:var(--z-white); box-shadow:0 6px 20px rgba(60,45,20,.06)}
.z26-prod--warm .z26-prod__media{flex:none; width:84px; height:84px; border-radius:12px}
.z26-prod--warm .z26-prod__name{font-size:16px; line-height:1.3; color:var(--z-ink)}
.z26-prod--warm .z26-prod__tagline{font-size:13px; line-height:1.4; color:var(--z-muted); margin-top:2px}
.z26-prod--warm .z26-prod__cta{display:none; margin-top:12px; font-size:15px; font-weight:700; color:var(--z-navy)}

/* ---------- Tablet ---------- */
@media (min-width:640px){
  .z26-prod__inner{padding:72px 0}
  .z26-prod__head,.z26-prod--glass .z26-prod__list,.z26-prod--warm .z26-prod__list{padding-left:32px; padding-right:32px}
  .z26-prod__head{margin-bottom:32px}
  .z26-prod__hint{margin-left:32px}

  .z26-prod--warm .z26-prod__list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
  .z26-prod--warm .z26-prod__card{flex-direction:column; align-items:stretch; gap:0; padding:0; border-radius:22px}
  .z26-prod--warm .z26-prod__media{width:100%; height:220px; border-radius:0}
  .z26-prod--warm .z26-prod__caption{display:block; padding:18px 20px 20px}
  .z26-prod--warm .z26-prod__name{font-size:18px}
  .z26-prod--warm .z26-prod__tagline{font-size:15px; margin-top:4px}
  .z26-prod--warm .z26-prod__cta{display:inline-block}
}

/* ---------- Desktop ---------- */
@media (min-width:960px){
  .z26-prod__inner{padding:96px 0}
  .z26-prod__head{margin-bottom:40px}

  /* Clear Glass: mosaic, lead tile 2×2 */
  .z26-prod--glass .z26-prod__list{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:240px; gap:20px; overflow:visible}
  .z26-prod--glass .z26-prod__item{width:auto; height:auto}
  .z26-prod--glass .z26-prod__item--lead{grid-column:span 2; grid-row:span 2}
  .z26-prod--glass .z26-prod__item:not(.z26-prod__item--lead) .z26-prod__caption{
    left:12px; right:auto; bottom:12px; padding:8px 14px; border-radius:999px;
  }
  .z26-prod--glass .z26-prod__item:not(.z26-prod__item--lead) .z26-prod__name{font-size:14px; font-weight:700}
  .z26-prod--glass .z26-prod__item:not(.z26-prod__item--lead) .z26-prod__tagline,
  .z26-prod--glass .z26-prod__item:not(.z26-prod__item--lead) .z26-prod__arrow{display:none}
  .z26-prod--glass .z26-prod__item--lead .z26-prod__caption{left:16px; right:auto; bottom:16px; max-width:calc(100% - 32px); padding:12px 16px; gap:16px}
  .z26-prod--glass .z26-prod__item--lead .z26-prod__name{font-size:19px}
  .z26-prod--glass .z26-prod__item--lead .z26-prod__tagline{font-size:14px}
  .z26-prod__hint{display:none}

  /* Warm & Solid: 3 columns */
  .z26-prod--warm .z26-prod__list{grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
  .z26-prod--warm .z26-prod__media{height:240px}
}

@media (prefers-reduced-motion:reduce){
  .z26-prod__media img,.z26-prod__arrow{transition:none}
  .z26-prod__card:hover .z26-prod__media img{transform:none}
}