/* ============================================================
   PRODUCTS.CSS — Products / portfolio page
   ============================================================ */

.products-hero {
  padding: calc(var(--nav-height) + var(--space-xl)) var(--space-lg) var(--space-md);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.products-hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 65% 55% at 50% 90%, rgba(201,169,110,0.065) 0%, transparent 65%);
  pointer-events: none;
}
.products-hero-content { position: relative; z-index: 2; max-width: 600px; margin: 0 auto; }
.products-hero p { max-width: 460px; margin: 0 auto; }

/* ── Filter bar ── */
.filter-bar {
  display: flex;
  gap: 0.55rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 2.5rem 0 0;
}
.filter-btn {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.48rem 1.2rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-dim);
  cursor: pointer;
  transition: all var(--transition-fast);
  backdrop-filter: blur(8px);
  font-family: var(--font-sans);
}
.filter-btn:hover { border-color: var(--gold); color: var(--gold); }
.filter-btn.active {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-dim);
}

/* ── Projects grid ── */
.projects-section { padding: var(--space-lg) var(--space-lg) var(--space-2xl); }
/* Remove the gap between hero tabs and first grid row */
.projects-section .tab-content { padding-top: 0; }
.projects-section .tab-pane { padding-top: 0; }
.projects-grid {
  max-width: var(--max-width); margin: var(--space-lg) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.project-card {
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
}
.project-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(201,169,110,0.22);
}
.project-card.filtered-out {
  opacity: 0.15;
  /* BUG-K FIX: removed transform — pointer-events:none prevents hover anyway,
     and scale() conflicted with hover translateY. Fade-only is cleaner. */
  pointer-events: none;
}

.project-img {
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
  background: var(--dark-3);
}
.project-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.project-card:hover .project-img img { transform: scale(1.06); }

.project-tag {
  position: absolute; top: 1rem; left: 1rem;
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.28rem 0.72rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.project-tag.data  { background: var(--gold); color: var(--dark); }
.project-tag.infra { background: rgba(42, 95, 122, 0.9); color: #b8dff0; }
.project-tag.web   { background: rgba(42, 80, 42, 0.9); color: #9ddfb0; }
.project-tag.privacy { background: rgba(90, 42, 90, 0.9); color: #dfb8df; }

.project-body { padding: 1.4rem 1.6rem 1.6rem; }
.project-name {
  font-family: var(--font-serif);
  font-size: 1.18rem; font-weight: 400;
  margin-bottom: 0.4rem; color: var(--text);
}
.project-desc {
  font-size: 0.8rem; color: var(--text-dim);
  line-height: 1.65; margin: 0 0 1rem;
}
.project-tech { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.1rem; }
.project-pill {
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  padding: 0.18rem 0.6rem;
  border-radius: 99px;
}

.project-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--glass-border);
}
.project-status {
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--success);
  display: flex; align-items: center; gap: 0.4rem;
}
.project-status.completed { color: var(--gold); }
.project-status i { font-size: 0.45rem; }

.project-link {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  display: flex; align-items: center; gap: 0.4rem;
  transition: gap var(--transition-fast);
}
.project-link:hover { gap: 0.65rem; color: var(--gold); }

/* Featured wide card */
.project-card.featured { grid-column: 1 / -1; }
.project-card.featured .project-img { aspect-ratio: 21/8; }

/* ── Tools showcase ── */
.tools-section {
  padding: var(--space-2xl) var(--space-lg);
  background: var(--dark-2);
  border-top: 1px solid var(--glass-border);
}
.tools-inner { max-width: var(--max-width); margin: 0 auto; }
.tools-header { text-align: center; margin-bottom: var(--space-lg); }
.tools-header .divider-gold { margin: 1.4rem auto; }

.tools-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}
.tool-item {
  padding: 1.5rem 1rem;
  text-align: center;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.tool-item:hover {
  transform: translateY(-3px);
  border-color: rgba(201,169,110,0.3);
}
.tool-icon {
  font-size: 1.8rem;
  color: var(--gold);
  margin-bottom: 0.6rem;
  display: block;
}
.tool-name {
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .projects-grid { grid-template-columns: 1fr; }
  .project-card.featured { grid-column: 1; }
  .project-card.featured .project-img { aspect-ratio: 16/10; }
  .tools-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── MDB Tabs on products page ── */
.products-tabs {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
  /* CSS-5 FIX: allow horizontal scroll on narrow viewports instead of overflow */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* hide scrollbar — visual swipe hint is sufficient */
  padding-bottom: 2px; /* prevent border clipping */
}
.products-tabs::-webkit-scrollbar { display: none; }
/* Force the nav-tabs into a single horizontal row, centred */
.products-tabs .nav-tabs {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-end;
  border-bottom: 1px solid var(--glass-border) !important;
  gap: 0.3rem;
  width: auto !important;
}
.products-tabs .nav-tabs .nav-item {
  flex: 0 0 auto !important;
  width: auto !important;
  display: inline-block;
}
.products-tabs .nav-link {
  font-family: var(--font-sans) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--text-dim) !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  border: 1px solid var(--glass-border) !important;
  border-bottom: none !important;
  background: rgba(255,255,255,0.025) !important;
  padding: 0.65rem 1.4rem !important;
  transition: color var(--transition-fast), background var(--transition-fast) !important;
  white-space: nowrap;
  min-width: max-content; /* M-10 FIX: prevents tab label collapse */
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  width: auto !important;
}
.products-tabs .nav-link i { font-size: 0.8em; }
.products-tabs .nav-link:hover { color: var(--gold) !important; background: var(--gold-glow) !important; }
.products-tabs .nav-link.active {
  color: var(--gold) !important;
  background: rgba(201,169,110,0.09) !important;
  border-top-color: var(--gold) !important;
  border-left-color: var(--glass-border) !important;
  border-right-color: var(--glass-border) !important;
  border-bottom-color: transparent !important;
}
.tab-content { padding-top: 0; }

/* BUG 15 FIX: tool-item needs cursor pointer for tooltips */
.tool-item {
  cursor: default;
  pointer-events: auto !important; /* override the pointer-events:none that was causing Ripple issue */
}

/* project tag colours */
.project-tag.privacy { background: rgba(90,42,90,0.9); color: #dfb8df; }


/* ── products-hero responsive ── */
@media (max-width: 960px) {
  .products-hero { padding: calc(var(--nav-height) + var(--space-lg)) var(--space-md) var(--space-md); }
  .products-hero-content { max-width: 100%; }
}

/* ============================================================
   Product catalogue
   ============================================================ */

.products-hero--catalog .products-hero-content { max-width: 680px; }

.product-catalog-section,
.product-doc-section { padding: var(--space-lg) var(--space-lg) var(--space-2xl); }

.product-catalog-inner,
.product-doc-inner { max-width: var(--max-width); margin: 0 auto; }

.product-catalog-heading,
.product-doc-heading { max-width: 780px; margin-bottom: var(--space-lg); }
.product-catalog-heading .section-title,
.product-doc-heading .section-title { text-align: left; }
.product-catalog-heading p,
.product-doc-heading p { max-width: 680px; color: var(--text-dim); }

.product-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
.product-card { overflow: hidden; }
.product-card-hit {
  width: 100%;
  min-height: 420px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1fr);
  border: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.product-card-hit:focus-visible,
.product-modal-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.product-visual {
  position: relative;
  min-height: 100%;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--glass-border);
  background:
    radial-gradient(circle at 20% 20%, rgba(201,169,110,0.16), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
}
.product-window {
  width: min(100%, 520px);
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(201,169,110,0.24);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(10,10,15,0.88);
  box-shadow: var(--shadow-lg);
}
.product-window-bar {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.9rem;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.045);
}
.product-window-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.7;
}
.product-dashboard { height: calc(100% - 36px); display: grid; grid-template-columns: 27% 1fr; }
.product-sidebar-lines {
  padding: 1rem 0.75rem;
  border-right: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.03);
}
.product-sidebar-lines span,
.product-table-lines span,
.product-preview-list span {
  display: block;
  height: 9px;
  border-radius: 99px;
  background: rgba(232,226,216,0.14);
  margin-bottom: 0.75rem;
}
.product-sidebar-lines span:first-child,
.product-table-lines span:first-child { background: rgba(201,169,110,0.42); }
.product-panel { padding: 1rem; }
.product-metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; margin-bottom: 1rem; }
.product-metric-row span {
  height: 54px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.045);
}
.product-chart {
  height: 104px;
  display: flex;
  align-items: end;
  gap: 0.5rem;
  padding: 0.8rem;
  margin-bottom: 1rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.025);
}
.product-chart i { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--gold), rgba(201,169,110,0.22)); }
.product-chart i:nth-child(1) { height: 42%; }
.product-chart i:nth-child(2) { height: 72%; }
.product-chart i:nth-child(3) { height: 56%; }
.product-chart i:nth-child(4) { height: 86%; }

.product-card-body {
  padding: clamp(1.6rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.product-card-kicker {
  margin-bottom: 0.7rem;
  color: var(--gold);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.product-card-body h3 {
  margin: 0 0 0.8rem;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: clamp(2.3rem, 6vw, 4.8rem);
  font-weight: 400;
  line-height: 0.95;
}
.product-card-body p { max-width: 560px; color: var(--text-dim); line-height: 1.75; margin-bottom: 1.25rem; }
.product-card-meta { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-bottom: 1.6rem; }
.product-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.75rem;
  border: 1px solid var(--glass-border);
  border-radius: 99px;
  color: var(--text-dim);
  font-size: 0.72rem;
}
.product-card-meta i,
.product-open-link i { color: var(--gold); }
.product-open-link { color: var(--gold); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.product-card-hit:hover .product-open-link i { transform: translateX(4px); }
.product-open-link i { transition: transform var(--transition-fast); }

.product-modal[hidden] { display: none; }
.product-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.product-modal.is-open { opacity: 1; pointer-events: auto; }
.modal-open { overflow: hidden; }
.product-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3,3,6,0.82);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity var(--transition-base), backdrop-filter var(--transition-base);
}
.product-modal.is-open .product-modal-backdrop { opacity: 1; }
.product-modal-panel {
  position: relative;
  z-index: 1;
  width: min(1040px, 100%);
  max-height: min(760px, calc(100vh - 2rem));
  overflow: auto;
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transform-origin: 50% 52%;
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base);
  will-change: opacity, transform;
}
.product-modal.is-open .product-modal-panel { opacity: 1; transform: translateY(0) scale(1); }
.product-modal.is-closing .product-modal-panel { opacity: 0; transform: translateY(10px) scale(0.99); }
.product-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  cursor: pointer;
}
.product-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 1.5rem;
  padding: clamp(1.4rem, 4vw, 3rem);
}
.product-modal-copy h2 {
  max-width: 640px;
  margin: 0.6rem 0 1rem;
  color: var(--text);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1;
}
.product-modal-copy p { color: var(--text-dim); line-height: 1.75; }
.product-modal-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin: 1.4rem 0; }
.product-modal-points span { display: flex; align-items: center; gap: 0.55rem; color: var(--text); font-size: 0.86rem; }
.product-modal-points i { color: var(--gold); }
.product-modal-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
.product-modal-preview { display: flex; align-items: center; }
.product-preview-card {
  width: 100%;
  min-height: 360px;
  padding: 1.2rem;
  border: 1px solid rgba(201,169,110,0.25);
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, rgba(201,169,110,0.14), rgba(255,255,255,0.035)), rgba(255,255,255,0.02);
}
.product-preview-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; color: var(--text); }
.product-preview-header strong { color: var(--success); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.product-preview-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; margin-bottom: 1rem; }
.product-preview-metrics div { padding: 1rem; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: rgba(10,10,15,0.48); }
.product-preview-metrics span { display: block; color: var(--text-muted); font-size: 0.68rem; margin-bottom: 0.4rem; }
.product-preview-metrics strong { color: var(--gold); font-family: var(--font-serif); font-size: 1.7rem; font-weight: 400; }
.product-preview-list { padding: 1rem; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: rgba(10,10,15,0.42); }

/* Dar Payroll documentation */
.product-doc-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.4rem; }
.product-doc-layout { display: grid; grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.product-doc-nav { position: sticky; top: calc(var(--nav-height) + 1rem); padding: 1rem; }
.product-doc-nav a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.7rem;
  color: var(--text-dim);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
}
.product-doc-nav a:hover { color: var(--gold); background: rgba(201,169,110,0.08); }
.product-doc-content { display: grid; gap: 1rem; }
.doc-panel { padding: clamp(1.2rem, 3vw, 2rem); }
.doc-panel h2 {
  margin: 0 0 0.8rem;
  color: var(--text);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 2.7rem);
}
.doc-panel p,
.doc-panel li { color: var(--text-dim); line-height: 1.75; }
.doc-panel ul,
.doc-panel ol { margin: 0; padding-left: 1.2rem; }
.doc-panel li + li { margin-top: 0.45rem; }
.doc-note { margin-top: 1rem; padding: 1rem; border-left: 3px solid var(--gold); background: rgba(201,169,110,0.08); color: var(--text-dim); }
.doc-panel--feature { border-color: rgba(201,169,110,0.28); box-shadow: var(--shadow-md); }
.doc-panel h3 {
  margin: 1.4rem 0 0.55rem;
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
}
.doc-panel h3:first-child { margin-top: 0; }
.doc-panel a { color: var(--gold); border-bottom: 1px solid var(--gold-dim); }
.doc-panel a:hover { color: var(--gold-light); border-color: var(--gold); }
.docs-library-inner,
.product-doc-inner { max-width: var(--max-width); margin: 0 auto; }
.docs-library-section { padding: var(--space-lg) var(--space-lg) var(--space-2xl); }
.docs-library-heading { max-width: 760px; margin-bottom: 2rem; }
.docs-library-heading p,
.product-doc-heading p { color: var(--text-dim); line-height: 1.75; }
.docs-library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.doc-library-card {
  padding: 1.3rem;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.doc-library-card:hover { transform: translateY(-4px); border-color: rgba(201,169,110,0.35); }
.doc-library-card i { color: var(--gold); font-size: 1.1rem; }
.doc-library-card h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 400;
}
.doc-library-card p { margin: 0; color: var(--text-dim); line-height: 1.65; font-size: 0.86rem; }
.doc-library-card span {
  margin-top: auto;
  color: var(--gold);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.doc-library-card--muted { opacity: 0.78; }
.doc-outline-section {
  padding: 0 var(--space-lg) var(--space-2xl);
}
.doc-outline {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(1.2rem, 3vw, 2rem);
}
.doc-outline-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
}
.doc-outline-item { border-top: 1px solid var(--glass-border); padding-top: 1rem; }
.doc-outline-item strong { display: block; color: var(--text); margin-bottom: 0.45rem; }
.doc-outline-item p { margin: 0; color: var(--text-dim); line-height: 1.65; font-size: 0.84rem; }
.doc-feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1.2rem;
  margin-top: 1rem;
}
.doc-feature-item {
  border-top: 1px solid var(--glass-border);
  padding-top: 0.85rem;
}
.doc-feature-item strong {
  display: block;
  color: var(--text);
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}
.doc-feature-item span {
  display: block;
  color: var(--text-dim);
  line-height: 1.65;
  font-size: 0.84rem;
}
.doc-step-list {
  counter-reset: doc-steps;
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 0.85rem;
}
.doc-step-list li {
  counter-increment: doc-steps;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  color: var(--text-dim);
}
.doc-step-list li::before {
  content: counter(doc-steps);
  width: 1.8rem;
  height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
  color: var(--gold);
  font-size: 0.72rem;
}
.doc-scenario-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.doc-scenario {
  border-left: 3px solid rgba(201,169,110,0.55);
  padding-left: 1rem;
}
.doc-scenario strong { display: block; color: var(--text); margin-bottom: 0.35rem; }
.doc-scenario p { margin: 0; }
.doc-tag-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1rem; }
.doc-tag {
  border: 1px solid var(--glass-border);
  border-radius: 99px;
  color: var(--text-dim);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  padding: 0.28rem 0.65rem;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .product-card-hit,
  .product-modal-grid,
  .product-doc-layout,
  .docs-library-grid,
  .doc-outline-grid { grid-template-columns: 1fr; }
  .product-visual { min-height: 300px; border-right: 0; border-bottom: 1px solid var(--glass-border); }
  .product-modal-preview { display: none; }
  .product-doc-nav { position: relative; top: auto; }
  .doc-feature-list,
  .doc-scenario-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .product-catalog-section,
  .product-doc-section,
  .docs-library-section,
  .doc-outline-section { padding-left: 1rem; padding-right: 1rem; }
  .product-card-hit { min-height: auto; }
  .product-visual { min-height: 240px; padding: 1rem; }
  .product-modal-points,
  .product-preview-metrics { grid-template-columns: 1fr; }
  .product-modal { padding: 0.75rem; }
  .product-modal-actions,
  .product-doc-actions { flex-direction: column; }
  .product-modal-actions .btn,
  .product-doc-actions .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .product-modal,
  .product-modal-backdrop,
  .product-modal-panel {
    transition: none;
  }
}