/* =============================================
   PRODUCTS PAGE — Fully Responsive
   ============================================= */

.page-hero {
  padding: clamp(100px,14vw,140px) 0 clamp(48px,6vw,80px);
  background: var(--dark);
  color: var(--white);
}
.products-hero {
  background:
    linear-gradient(160deg,rgba(6,18,12,0.76) 0%,rgba(22,45,27,0.82) 100%),
    url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1400&q=80') center/cover no-repeat;
}
.page-hero h1 { color: var(--white); margin-bottom: clamp(14px,2.5vw,20px); }
.page-hero p  { color: rgba(255,255,255,0.5); font-size: clamp(0.9rem,1.5vw,1.05rem); font-weight: 300; max-width: 560px; margin: 0 auto; }

/* ---- PRODUCT CARDS ---- */
.product-compare { display: flex; flex-direction: column; }

.product-card {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 32px;
  background: #0c1a11;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  text-align: left;
}
.product-card:hover { box-shadow: var(--shadow-lg); border-color: rgba(47,107,74,0.28); }

.product-img-wrap { background: #07130d; }
.product-img {
  height: 100%; min-height: clamp(240px,35vw,320px);
  position: relative; display: flex;
  flex-direction: column; justify-content: space-between; padding: 20px;
}
.semi-img {
  background:
    linear-gradient(160deg,#080f0b,#122014 80%),
    repeating-linear-gradient(45deg,rgba(255,255,255,0.01) 0px,rgba(255,255,255,0.01) 1px,transparent 1px,transparent 10px);
}
.fully-img {
  background:
    linear-gradient(160deg,#07130d,#142017 80%),
    repeating-linear-gradient(45deg,rgba(255,255,255,0.01) 0px,rgba(255,255,255,0.01) 1px,transparent 1px,transparent 10px);
}

.product-tag-badge {
  display: inline-block;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7); font-size: 0.68rem;
  padding: 5px 14px; border-radius: 100px;
  font-family: var(--font-condensed); letter-spacing: 0.08em;
  font-weight: 600; text-transform: uppercase; align-self: flex-start;
}

.product-img-overlay {
  display: flex; align-items: center; justify-content: center; flex: 1;
  position: relative;
}
.product-machine-image {
  width: 100%; height: clamp(160px,22vw,260px);
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.35));
  transition: transform 0.35s ease;
}
.product-card:hover .product-machine-image { transform: scale(1.04); }

.product-body { padding: clamp(24px,4vw,40px) clamp(20px,4vw,44px); }
.product-body h3 { font-size: clamp(1.3rem,2.5vw,1.8rem); margin-bottom: 12px; color: var(--white); }
.product-desc { color: var(--text-muted); line-height: 1.75; margin-bottom: 24px; font-size: 0.96rem; font-weight: 300; }

.best-for {
  background: rgba(47,107,74,0.08); border: 1px solid rgba(47,107,74,0.16);
  border-radius: var(--radius-sm); padding: 18px 20px; margin-bottom: 28px;
}
.best-for h5 { font-size: 0.72rem; font-family: var(--font-condensed); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: #2f6b4a; margin-bottom: 6px; }
.best-for p  { font-size: 0.9rem; color: rgba(255,255,255,0.6); font-weight: 300; }

.features-advantages { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.feat-col h5 { font-size: 0.72rem; font-family: var(--font-condensed); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); margin-bottom: 14px; }
.feat-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.feat-col ul li { display: flex; gap: 8px; font-size: 0.88rem; color: rgba(255,255,255,0.6); line-height: 1.5; font-weight: 300; }
.check       { color: #2f6b4a; flex-shrink: 0; font-weight: 700; margin-top: 1px; }
.check.green { color: #6f8b55; }

.product-divider {
  display: flex; align-items: center; gap: 16px;
  margin: 4px 0 24px; color: var(--text-muted);
  font-size: 0.82rem; font-family: var(--font-condensed);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.divider-line { flex: 1; height: 1px; background: var(--border); }

/* ---- COMPARE TABLE ---- */
.compare-table {
  overflow-x: auto; border-radius: var(--radius-md);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}
.compare-table table { width: 100%; border-collapse: collapse; background: #0c1a11; min-width: 560px; }
.compare-table th {
  background: #06120c; color: rgba(255,255,255,0.8);
  padding: clamp(12px,2vw,18px) clamp(14px,3vw,24px);
  font-family: var(--font-condensed); font-weight: 600;
  font-size: clamp(0.72rem,1.3vw,0.85rem); letter-spacing: 0.08em;
  text-transform: uppercase; text-align: left;
  border-bottom: 1px solid var(--border);
}
.compare-table th:first-child { width: clamp(120px,20vw,240px); }
.compare-table td {
  padding: clamp(10px,1.8vw,15px) clamp(14px,3vw,24px);
  font-size: clamp(0.8rem,1.4vw,0.9rem);
  border-bottom: 1px solid var(--border);
  text-align: left; color: rgba(255,255,255,0.6); font-weight: 300;
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
.compare-table td:first-child { font-weight: 500; color: rgba(255,255,255,0.85); }

/* ---- HELP CTA ---- */
.help-cta { background: #07130d; border-top: 1px solid var(--border); }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
  .product-card { grid-template-columns: 1fr; }
  .product-img  { min-height: 220px; }
  .product-machine-image { height: 180px; }
  .features-advantages { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 600px) {
  .product-body { padding: 22px 18px; }
  .product-body .btn { width: 100%; justify-content: center; }
  .product-card:hover { transform: none; }
  .help-cta .btn { width: auto; }
}