/* Product pages — rules that used to live in global.css */

/* Shared light-background section panel */
.light-panel {
  background: var(--surface);
  color: var(--clr-text);
  position: relative;
  overflow: hidden;
  border-top: none;
  padding: var(--space-section, 96px) var(--site-pad-x, 24px);
}
/* IFP size mega-panel */
.ifp-size-panel {
  min-width: 280px !important;
  padding: 10px !important;
}
/* SHARED DARK-GLASS CAROUSEL ARROW (moved here 2026-08-20) — was */
.hw-cs-btn, .ifp-hwc-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}
.hw-cs-btn [data-lucide], .ifp-hwc-btn [data-lucide] { width: 18px; height: 18px; stroke: #ffffff; stroke-width: 2; transition: stroke 0.3s ease; }
.hw-cs-btn:hover, .ifp-hwc-btn:hover {
  background: rgba(255, 255, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}
/* IFP Types Page — css/ifp.css */
/* Depends on global.css for tokens, dark-particles, cta-btn */
/* em reset comes from global.css `h2 em` (every <em> here is a heading word) */

/* The hero (markup, background, particles, wave, device-card offsets) is the */

/* 2026-08-07: removed a dead "CLIENT LOGOS / TRUST BANNER" block here */

/* Section shared h2 sizing */
.ifp-section-header h2,
.edla-content h2,
.ifp-guide h2,
.ifp-compare h2,
.ifp-cta-strip h2,
.ifp-overview-content h2,
.ifp-why-section h2,
.ifp-vs-header h2 {
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: var(--section-h2, clamp(34px, 3.4vw, 48px));
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
}

/* Light-section h2s — dark text, gradient only on <em> via global h2 em rule */
.ifp-section-header h2,
.edla-content h2,
.ifp-guide h2 {
  color: var(--fg-primary);
  -webkit-text-fill-color: #0A0F1E;
  background: none;
  animation: none;
}

/* Light-section h2s — dark text, gradient highlight via <em> */
.ifp-overview-content h2,
.ifp-why-section h2 {
  color: var(--fg-primary);
  -webkit-text-fill-color: #0A0F1E;
}
.ifp-why-section h2 { text-align: center; margin: 0 auto 56px; max-width: 920px; }

/* Key Spec Highlights — 6-card grid, right after the hero device video. */
.ifp-spec-highlights-inner { max-width: var(--site-max-w); margin: 0 auto; }
.ifp-spec-highlights-header { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.ifp-spec-highlights-header h2 { margin: 0 0 12px; }
/* Content (~920px) is wider than the 720px .ifp-spec-highlights-header */
#ifp-performance-heading {
  max-width: none;
  white-space: nowrap;
  width: max-content;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 767px) {
  #ifp-performance-heading { white-space: normal; width: auto; position: static; transform: none; }
}
.ifp-spec-highlights-header p {
  font-family: var(--p-font, 'Inter', sans-serif);
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--fg-muted);
  line-height: 1.7;
  max-width: 760px;
  margin: 0 auto;
}
.ifp-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ifp-spec-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 8px 28px rgba(0, 0, 0, 0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.ifp-spec-card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 12px 36px rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.14);
  z-index: 2;
}
.ifp-spec-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
}
.ifp-spec-icon [data-lucide] {
  width: 24px;
  height: 24px;
  color: #ffffff;
  stroke-width: 2;
}
.ifp-spec-text h3 {
  margin: 0 0 6px;
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--card-clr);
}
.ifp-spec-text p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--fg-body);
}
/* Per-card accent — same 6 gradients/positions as index.php's #hardware */
.ifp-spec-card:nth-child(6n+1) { --card-clr: var(--accent); --card-bg: linear-gradient(135deg, var(--accent), var(--accent-deep)); }
.ifp-spec-card:nth-child(6n+2) { --card-clr: #6366F1; --card-bg: linear-gradient(135deg, #6366F1, #8B5CF6); }
.ifp-spec-card:nth-child(6n+3) { --card-clr: #EC4899; --card-bg: linear-gradient(135deg, #EC4899, #A855F7); }
.ifp-spec-card:nth-child(6n+4) { --card-clr: var(--accent); --card-bg: linear-gradient(135deg, var(--grad-start), var(--grad-mid)); }
.ifp-spec-card:nth-child(6n+5) { --card-clr: var(--accent-deep); --card-bg: linear-gradient(135deg, var(--accent-deep), var(--accent)); }
.ifp-spec-card:nth-child(6n+0) { --card-clr: #10B981; --card-bg: linear-gradient(135deg, #10B981, #059669); }

@media (max-width: 900px) {
  .ifp-spec-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .ifp-spec-grid { grid-template-columns: 1fr; }
  .ifp-spec-card { padding: 18px; }
}

/* Hardware Highlights Carousel — dark band, background matches the hero */
.ifp-hwc-section {
  background: var(--grad-hero-bg);
  color: #ffffff;
  padding: var(--space-section) 0;
  position: relative;
  overflow: hidden;
}
.ifp-hwc-inner { max-width: var(--site-max-w); margin: 0 auto; padding: 0 var(--site-pad-x); position: relative; z-index: 2; }
.ifp-hwc-header { text-align: center; margin-bottom: 64px; }
.ifp-hwc-header h2 { color: #ffffff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); margin: 0 0 14px; }
.ifp-hwc-header p {
  font-family: var(--p-font, 'Inter', sans-serif);
  font-size: clamp(15px, 1.4vw, 17px);
  color: rgba(255, 255, 255, 0.68);
  max-width: 900px;
  margin: 0 auto;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .ifp-hwc-header p { white-space: normal; max-width: 560px; }
}

.ifp-hwc-outer { position: relative; }
/* Gutter is a narrower box (not padding) so overflowing cards physically */
.ifp-hwc-viewport {
  overflow: hidden;
  width: calc(100% - 128px);
  padding: 24px 0;
  margin: -24px auto;
  min-height: calc(210px + 72px); /* .ifp-hwc-card-img height + .ifp-hwc-card-body height, reserved pre-JS to avoid CLS */
}
.ifp-hwc-track {
  display: flex;
  align-items: flex-start;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.ifp-hwc-card {
  position: relative;
  isolation: isolate; /* contains ::before's mix-blend-mode + keeps ::before/::after z-index scoped to this card only */
  flex: 0 0 calc(33.333% - 32px);
  margin: 0 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0.09) 100%);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1.5px 0 rgba(255, 255, 255, 0.22), 0 8px 32px rgba(0, 0, 0, 0.30);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
}
/* Liquid-glass sheen — a soft light bloom entering top-left, as if the panel */
.ifp-hwc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 65% at 18% -8%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 55%);
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 1;
}
/* Gradient-lit rim — a 1px ring painted over the flat border via a masked */
.ifp-hwc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.14) 28%, rgba(255, 255, 255, 0) 50%, rgba(var(--accent-rgb), 0.16) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  transition: background 0.5s ease;
}
.ifp-hwc-card.ifp-hwc-card-active {
  transform: scale(1.09);
  will-change: transform;
  border-color: rgba(var(--accent-rgb), 0.6);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.07) 60%, rgba(255, 255, 255, 0.12) 100%);
  box-shadow: 0 0 0 0.5px rgba(var(--accent-rgb), 0.28), 0 0 24px rgba(var(--accent-rgb), 0.20), 0 8px 32px rgba(0, 0, 0, 0.35);
  z-index: 2;
}
.ifp-hwc-card.ifp-hwc-card-active::after {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.85) 0%, rgba(var(--accent-rgb), 0.35) 32%, rgba(var(--accent-rgb), 0.10) 58%, rgba(var(--accent-rgb), 0.42) 100%);
}
.ifp-hwc-card-img { width: 100%; height: 210px; overflow: hidden; padding: 10px 10px 0; }
.ifp-hwc-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.ifp-hwc-card-body {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.04);
  position: relative;
}
/* Hairline seam between image and body — reads as a "glass shelf" edge. */
.ifp-hwc-card-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}
.ifp-hwc-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -6px 10px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s, border-color 0.3s;
}
.ifp-hwc-card-active .ifp-hwc-card-icon {
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.28) 0%, rgba(var(--accent-rgb), 0.06) 100%);
  border-color: rgba(var(--accent-rgb), 0.4);
}
.ifp-hwc-card-icon [data-lucide] {
  width: 22px;
  height: 22px;
  stroke: rgba(255, 255, 255, 0.8);
  transition: stroke 0.3s;
}
.ifp-hwc-card-active .ifp-hwc-card-icon [data-lucide] { stroke: #ffffff; }
.ifp-hwc-card-text h3 {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.90);
  margin: 0 0 4px;
  line-height: 1.2;
}
.ifp-hwc-card-text p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Prev/next controls — pinned to the outer edges over the reserved gutter; */
.ifp-hwc-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 10px;
  right: 10px;
  transform: translateY(-50%);
  gap: 20px;
  pointer-events: none;
  z-index: 5;
}
/* .ifp-hwc-btn base/hover moved to global.css 2026-08-20 (was */

/* Peek carousel responsive tuning — breakpoints/percentages match */
@media (max-width: 1100px) {
  .ifp-hwc-outer { overflow-x: clip; overflow-y: visible; }
  .ifp-hwc-viewport { overflow: visible; width: auto; padding: 20px 20%; }
  .ifp-hwc-card { flex: 0 0 calc(60vw - 32px); margin: 0 16px; }
}
@media (max-width: 767px) {
  .ifp-hwc-viewport { width: auto; padding: 18px 14%; }
  .ifp-hwc-card { flex: 0 0 calc(72vw - 32px); margin: 0 16px; }
}
@media (max-width: 599px) {
  .ifp-hwc-outer { overflow-x: clip; overflow-y: visible; }
  .ifp-hwc-viewport { overflow: visible; width: auto; padding: 16px 0; }
  .ifp-hwc-card { flex: 0 0 calc(100% - 32px); margin: 0 16px; }
  .ifp-hwc-card-img { height: 155px; }
  .ifp-hwc-card-body { padding: 13px 14px; gap: 10px; }
  .ifp-hwc-card-body::before { left: 14px; right: 14px; }
}

/* Interactive Size Selector */
.ifp-products {
  background: var(--bg);
  padding: var(--space-section) var(--site-pad-x);
}
.ifp-products-inner { max-width: var(--site-max-w); margin: 0 auto; }
.ifp-section-header { text-align: center; margin-bottom: 56px; }
.ifp-section-header p {
  font-family: var(--p-font, 'Inter', sans-serif);
  color: var(--fg-muted);
  font-size: clamp(15px, 1.4vw, 17px);
  max-width: 760px;
  margin: 0 auto;
}

/* Size tabs — sticky while scrolling through a panel's content, same */
/* Height matched to .site-header's own rendered height (47px: a 1px border + */
.ifp-size-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 920px;
  margin: 0 auto 56px;
  position: sticky; top: 84px; z-index: 900;
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  padding: 5px 8px;
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(15,23,42,0.10), 0 0 0 1px rgba(226,232,240,0.8);
}
/* Flat pill-tab style — owner-supplied reference (a "Founders / Management / */
.ifp-size-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 140px;
  padding: 9px 20px;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  font-family: var(--h-font, 'Inter', sans-serif);
}
.ifp-size-tab:hover { background: rgba(var(--accent-rgb), 0.08); }
.ifp-size-tab.active {
  background: var(--tab-active);
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.30);
}
.ifp-size-tab-inch { font-size: 16px; font-weight: 700; color: var(--fg-body); letter-spacing: -0.2px; white-space: nowrap; }
.ifp-size-tab.active .ifp-size-tab-inch { color: var(--on-tab); text-shadow: var(--on-tab-shadow); }

/* Size panels */
.ifp-size-panels { position: relative; z-index: 2; }
.ifp-size-panel { display: none; }
.ifp-size-panel.active {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
  animation: fadeUp 0.5s ease;
}

/* min-width:0 overrides the flex/grid item default of min-width:auto — without */
.ifp-size-info { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.ifp-size-best-badge {
  display: inline-flex; align-items: center;
  padding: 7px 16px;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-radius: 999px;
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 12px; font-weight: 700;
  color: var(--primary); letter-spacing: 0.3px;
}
.ifp-size-title {
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800; color: var(--fg-primary);
  letter-spacing: -0.5px; line-height: 1.2; margin: 0;
}
.ifp-size-desc {
  font-family: var(--p-font, 'Inter', sans-serif);
  font-size: 15px; line-height: 1.75;
  color: var(--fg-body); margin: 0;
}
.ifp-size-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.ifp-size-cta .cta-btn,
.ifp-size-cta .cta-btn-ghost { font-size: 14px; padding: 14px 28px; }
.ifp-size-cta .cta-btn .amazon-glyph { margin-right: 6px; font-size: 15px; }
.ifp-size-cta .cta-btn-ghost {
  color: var(--clr-text) !important;
  border-color: rgba(15,23,42,0.18);
}
.ifp-size-cta .cta-btn-ghost:hover { border-color: var(--primary); color: var(--primary) !important; }

/* 55" gallery — replaces .ifp-size-media for this one panel (the 55" size */
.ifp-55-gallery-mobile { display: block; position: relative; width: 100%; margin: 4px 0 8px; }
.ifp-55-gallery-desktop { display: none; }
@media (min-width: 600px) {
  .ifp-55-gallery-mobile { display: none; }
  .ifp-55-gallery-desktop { display: flex; gap: 14px; width: 100%; margin: 4px 0 8px; }
}
.ifp-55-gallery-track {
  display: flex; flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 16px;
  padding: 4px 2px 10px;
}
.ifp-55-gallery-track::-webkit-scrollbar { display: none; }
.ifp-55-gallery-item {
  flex: 0 0 auto;
  width: 340px;
  aspect-ratio: 1 / 1;
  scroll-snap-align: center;
  border-radius: 16px;
  overflow: hidden;
  background: var(--plate);
}
.ifp-55-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Desktop/tablet: thumbnail rail (left) + large zoomable main image (right) */
.ifp-55-thumbs {
  display: flex; flex-direction: column; gap: 10px;
  flex: 0 0 64px;
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: none;
  /* Owner ask: thumbnail rail at the extreme right of the page, main */
  order: 2;
}
.ifp-55-main { order: 1; }
.ifp-55-thumbs::-webkit-scrollbar { display: none; }
.ifp-55-thumb {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--plate);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.ifp-55-thumb:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.ifp-55-thumb.active { border-color: var(--primary, var(--primary)); }
.ifp-55-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ifp-55-main {
  position: relative;
  flex: 1 1 auto;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--plate);
  cursor: zoom-in;
}
.ifp-55-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Zoom lens — a full-size overlay showing the same image scaled up */
.ifp-55-zoom-lens {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Product title + store link — sits under the "55" Interactive Flat Panel" */
.ifp-55-product { display: flex; flex-direction: column; gap: 10px; }
.ifp-55-product-title {
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 14px; font-weight: 600; line-height: 1.5;
  color: var(--fg-secondary); margin: 0;
}
.ifp-55-store-link {
  display: inline-flex; align-items: center; gap: 7px;
  width: fit-content;
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 14px; font-weight: 700;
  color: var(--primary, var(--primary));
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.30);
  padding-bottom: 1px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ifp-55-store-link:hover { border-bottom-color: var(--primary, var(--primary)); }
.ifp-55-store-link .amazon-glyph { font-size: 15px; }

/* Amazon-style trust badges, below the description — Lucide glyphs (package-x/ */
.ifp-55-trust-badges {
  display: flex; flex-wrap: wrap; gap: 20px 28px;
  margin: -6px 0 4px;
}
.ifp-55-trust-item {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--p-font, 'Inter', sans-serif);
  font-size: 13px; font-weight: 600;
  color: var(--primary, var(--primary));
}
.ifp-55-trust-item [data-lucide] { width: 20px; height: 20px; stroke: var(--primary, var(--primary)); stroke-width: 1.8; flex-shrink: 0; }

/* "About this item" — Amazon-style detailed-spec bullets, collapsed by */
.ifp-55-about { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ifp-55-about-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 2px;
  background: transparent; border: none;
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 15px; font-weight: 700; color: var(--fg-primary);
  cursor: pointer;
}
.ifp-55-about-toggle [data-lucide] { width: 18px; height: 18px; stroke: #64748B; stroke-width: 2; transition: transform 0.25s ease; }
.ifp-55-about-toggle[aria-expanded="true"] [data-lucide] { transform: rotate(180deg); }
.ifp-55-about-body { padding: 0 2px 18px; }
.ifp-55-about-body ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.ifp-55-about-body li {
  position: relative; padding-left: 18px;
  font-family: var(--p-font, 'Inter', sans-serif);
  font-size: 13.5px; line-height: 1.7; color: var(--fg-body);
}
.ifp-55-about-body li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary, var(--primary));
}

/* Same "About this item" pattern as the 55" panel, applied to the 65" panel. */
.ifp-65-about { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-top: 8px; }
.ifp-65-about-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 2px;
  background: transparent; border: none;
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 15px; font-weight: 700; color: var(--fg-primary);
  cursor: pointer;
}
.ifp-65-about-toggle [data-lucide] { width: 18px; height: 18px; stroke: #64748B; stroke-width: 2; transition: transform 0.25s ease; }
.ifp-65-about-toggle[aria-expanded="true"] [data-lucide] { transform: rotate(180deg); }
.ifp-65-about-body { padding: 0 2px 18px; }
.ifp-65-about-body ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.ifp-65-about-body li {
  position: relative; padding-left: 18px;
  font-family: var(--p-font, 'Inter', sans-serif);
  font-size: 13.5px; line-height: 1.7; color: var(--fg-body);
}
.ifp-65-about-body li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary, var(--primary));
}

/* Same "About this item" pattern as the 65" panel, applied to the 75"/86"/ */
.ifp-75-about, .ifp-86-about, .ifp-98-about { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-top: 8px; }
.ifp-75-about-toggle, .ifp-86-about-toggle, .ifp-98-about-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 2px;
  background: transparent; border: none;
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 15px; font-weight: 700; color: var(--fg-primary);
  cursor: pointer;
}
.ifp-75-about-toggle [data-lucide], .ifp-86-about-toggle [data-lucide], .ifp-98-about-toggle [data-lucide] { width: 18px; height: 18px; stroke: #64748B; stroke-width: 2; transition: transform 0.25s ease; }
.ifp-75-about-toggle[aria-expanded="true"] [data-lucide], .ifp-86-about-toggle[aria-expanded="true"] [data-lucide], .ifp-98-about-toggle[aria-expanded="true"] [data-lucide] { transform: rotate(180deg); }
.ifp-75-about-body, .ifp-86-about-body, .ifp-98-about-body { padding: 0 2px 18px; }
.ifp-75-about-body ul, .ifp-86-about-body ul, .ifp-98-about-body ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.ifp-75-about-body li, .ifp-86-about-body li, .ifp-98-about-body li {
  position: relative; padding-left: 18px;
  font-family: var(--p-font, 'Inter', sans-serif);
  font-size: 13.5px; line-height: 1.7; color: var(--fg-body);
}
.ifp-75-about-body li::before, .ifp-86-about-body li::before, .ifp-98-about-body li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary, var(--primary));
}

/* .ifp-size-info aligns its children to flex-start, which shrank the "About this item" box to its text and left the
   chevron beside the label. Full width puts the chevron at the far right, as in the Product information rows. */
.ifp-55-about, .ifp-65-about, .ifp-75-about, .ifp-86-about, .ifp-98-about { align-self: stretch; width: 100%; }
/* Phones: the same row as a Product information item (Display Parameter) — filled bar, 16px side padding, chevron
   at the right edge, one line under it. */
@media (max-width: 767px) {
  .ifp-55-about, .ifp-65-about, .ifp-75-about, .ifp-86-about, .ifp-98-about { border-top: none; border-bottom: 1px solid var(--border); margin-top: 0; }
  .ifp-55-about-toggle, .ifp-65-about-toggle, .ifp-75-about-toggle, .ifp-86-about-toggle, .ifp-98-about-toggle {
    padding: 14px 16px; background: var(--surface-card); text-align: left;
  }
  .ifp-55-about-toggle [data-lucide], .ifp-65-about-toggle [data-lucide], .ifp-75-about-toggle [data-lucide],
  .ifp-86-about-toggle [data-lucide], .ifp-98-about-toggle [data-lucide] { stroke: #475569; flex-shrink: 0; }
  .ifp-55-about-body, .ifp-65-about-body, .ifp-75-about-body, .ifp-86-about-body, .ifp-98-about-body { padding: 4px 16px 18px; }
}

/* Same gallery + zoom-image pattern as the 55" panel, applied to the 65" panel; */
.ifp-65-gallery-mobile { display: block; position: relative; width: 100%; margin: 4px 0 8px; }
.ifp-65-gallery-desktop { display: none; }
@media (min-width: 600px) {
  .ifp-65-gallery-mobile { display: none; }
  .ifp-65-gallery-desktop { display: flex; gap: 14px; width: 100%; margin: 4px 0 8px; }
}
.ifp-65-gallery-track {
  display: flex; flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 16px;
  padding: 4px 2px 10px;
}
.ifp-65-gallery-track::-webkit-scrollbar { display: none; }
.ifp-65-gallery-item {
  flex: 0 0 auto;
  width: 340px;
  aspect-ratio: 1 / 1;
  scroll-snap-align: center;
  border-radius: 16px;
  overflow: hidden;
  background: var(--plate);
}
.ifp-65-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Desktop/tablet: thumbnail rail (left) + large zoomable main image (right) */
.ifp-65-thumbs {
  display: flex; flex-direction: column; gap: 10px;
  flex: 0 0 64px;
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: none;
  /* Owner ask: thumbnail rail at the extreme right of the page, main */
  order: 2;
}
.ifp-65-main { order: 1; }
.ifp-65-thumbs::-webkit-scrollbar { display: none; }
.ifp-65-thumb {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--plate);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.ifp-65-thumb:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.ifp-65-thumb.active { border-color: var(--primary, var(--primary)); }
.ifp-65-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ifp-65-main {
  position: relative;
  flex: 1 1 auto;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--plate);
  cursor: zoom-in;
}
.ifp-65-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Zoom lens — a full-size overlay showing the same image scaled up */
.ifp-65-zoom-lens {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Same Amazon-style product title + store link as the 55" panel, applied to the 65" panel. */
.ifp-65-product { display: flex; flex-direction: column; gap: 10px; }
.ifp-65-product-title {
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 14px; font-weight: 600; line-height: 1.5;
  color: var(--fg-secondary); margin: 0;
}
.ifp-65-store-link {
  display: inline-flex; align-items: center; gap: 7px;
  width: fit-content;
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 14px; font-weight: 700;
  color: var(--primary, var(--primary));
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.30);
  padding-bottom: 1px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ifp-65-store-link:hover { border-bottom-color: var(--primary, var(--primary)); }
.ifp-65-store-link .amazon-glyph { font-size: 15px; }

/* Same trust-badges row as the 55" panel, applied to the 65" panel. */
.ifp-65-trust-badges {
  display: flex; flex-wrap: wrap; gap: 20px 28px;
  margin: -6px 0 4px;
}
.ifp-65-trust-item {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--p-font, 'Inter', sans-serif);
  font-size: 13px; font-weight: 600;
  color: var(--primary, var(--primary));
}
.ifp-65-trust-item [data-lucide] { width: 20px; height: 20px; stroke: var(--primary, var(--primary)); stroke-width: 1.8; flex-shrink: 0; }

/* Same single-column override + sticky 2-row grid split as the 55" panel (see */
.ifp-size-panel[data-panel="65"].active { grid-template-columns: 1fr; }
.ifp-65-text-top, .ifp-65-text-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
@media (min-width: 1101px) {
  .ifp-size-panel[data-panel="65"] .ifp-size-info {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-rows: auto auto;
    column-gap: 64px;
    row-gap: 18px;
    align-items: start;
  }
  .ifp-size-panel[data-panel="65"] .ifp-65-text-top { grid-column: 1; grid-row: 1; }
  .ifp-size-panel[data-panel="65"] .ifp-65-text-bottom { grid-column: 1; grid-row: 2; }
  .ifp-size-panel[data-panel="65"] .ifp-65-gallery-desktop {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
    min-width: 0;
    position: sticky;
    top: 168px;
    margin: 0;
  }
}

/* Same gallery + zoom-image pattern as the 55" panel, applied to the 75" panel; */
.ifp-75-gallery-mobile { display: block; position: relative; width: 100%; margin: 4px 0 8px; }
.ifp-75-gallery-desktop { display: none; }
@media (min-width: 600px) {
  .ifp-75-gallery-mobile { display: none; }
  .ifp-75-gallery-desktop { display: flex; gap: 14px; width: 100%; margin: 4px 0 8px; }
}
.ifp-75-gallery-track {
  display: flex; flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 16px;
  padding: 4px 2px 10px;
}
.ifp-75-gallery-track::-webkit-scrollbar { display: none; }
.ifp-75-gallery-item {
  flex: 0 0 auto;
  width: 340px;
  aspect-ratio: 1 / 1;
  scroll-snap-align: center;
  border-radius: 16px;
  overflow: hidden;
  background: var(--plate);
}
.ifp-75-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Desktop/tablet: thumbnail rail (left) + large zoomable main image (right) */
.ifp-75-thumbs {
  display: flex; flex-direction: column; gap: 10px;
  flex: 0 0 64px;
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: none;
  /* Owner ask: thumbnail rail at the extreme right of the page, main */
  order: 2;
}
.ifp-75-main { order: 1; }
.ifp-75-thumbs::-webkit-scrollbar { display: none; }
.ifp-75-thumb {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--plate);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.ifp-75-thumb:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.ifp-75-thumb.active { border-color: var(--primary, var(--primary)); }
.ifp-75-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ifp-75-main {
  position: relative;
  flex: 1 1 auto;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--plate);
  cursor: zoom-in;
}
.ifp-75-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Zoom lens — a full-size overlay showing the same image scaled up */
.ifp-75-zoom-lens {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Same Amazon-style product title + store link as the 55" panel, applied to the 75" panel. */
.ifp-75-product { display: flex; flex-direction: column; gap: 10px; }
.ifp-75-product-title {
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 14px; font-weight: 600; line-height: 1.5;
  color: var(--fg-secondary); margin: 0;
}
.ifp-75-store-link {
  display: inline-flex; align-items: center; gap: 7px;
  width: fit-content;
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 14px; font-weight: 700;
  color: var(--primary, var(--primary));
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.30);
  padding-bottom: 1px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ifp-75-store-link:hover { border-bottom-color: var(--primary, var(--primary)); }
.ifp-75-store-link .amazon-glyph { font-size: 15px; }

/* Same trust-badges row as the 55" panel, applied to the 75" panel. */
.ifp-75-trust-badges {
  display: flex; flex-wrap: wrap; gap: 20px 28px;
  margin: -6px 0 4px;
}
.ifp-75-trust-item {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--p-font, 'Inter', sans-serif);
  font-size: 13px; font-weight: 600;
  color: var(--primary, var(--primary));
}
.ifp-75-trust-item [data-lucide] { width: 20px; height: 20px; stroke: var(--primary, var(--primary)); stroke-width: 1.8; flex-shrink: 0; }

/* Same single-column override + sticky 2-row grid split as the 55" panel (see */
.ifp-size-panel[data-panel="75"].active { grid-template-columns: 1fr; }
.ifp-75-text-top, .ifp-75-text-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
@media (min-width: 1101px) {
  .ifp-size-panel[data-panel="75"] .ifp-size-info {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-rows: auto auto;
    column-gap: 64px;
    row-gap: 18px;
    align-items: start;
  }
  .ifp-size-panel[data-panel="75"] .ifp-75-text-top { grid-column: 1; grid-row: 1; }
  .ifp-size-panel[data-panel="75"] .ifp-75-text-bottom { grid-column: 1; grid-row: 2; }
  .ifp-size-panel[data-panel="75"] .ifp-75-gallery-desktop {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
    min-width: 0;
    position: sticky;
    top: 168px;
    margin: 0;
  }
}

/* Same gallery + zoom-image pattern as the 55" panel, applied to the 86" panel; */
.ifp-86-gallery-mobile { display: block; position: relative; width: 100%; margin: 4px 0 8px; }
.ifp-86-gallery-desktop { display: none; }
@media (min-width: 600px) {
  .ifp-86-gallery-mobile { display: none; }
  .ifp-86-gallery-desktop { display: flex; gap: 14px; width: 100%; margin: 4px 0 8px; }
}
.ifp-86-gallery-track {
  display: flex; flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 16px;
  padding: 4px 2px 10px;
}
.ifp-86-gallery-track::-webkit-scrollbar { display: none; }
.ifp-86-gallery-item {
  flex: 0 0 auto;
  width: 340px;
  aspect-ratio: 1 / 1;
  scroll-snap-align: center;
  border-radius: 16px;
  overflow: hidden;
  background: var(--plate);
}
.ifp-86-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Desktop/tablet: thumbnail rail (left) + large zoomable main image (right) */
.ifp-86-thumbs {
  display: flex; flex-direction: column; gap: 10px;
  flex: 0 0 64px;
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: none;
  /* Owner ask: thumbnail rail at the extreme right of the page, main */
  order: 2;
}
.ifp-86-main { order: 1; }
.ifp-86-thumbs::-webkit-scrollbar { display: none; }
.ifp-86-thumb {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--plate);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.ifp-86-thumb:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.ifp-86-thumb.active { border-color: var(--primary, var(--primary)); }
.ifp-86-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ifp-86-main {
  position: relative;
  flex: 1 1 auto;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--plate);
  cursor: zoom-in;
}
.ifp-86-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Zoom lens — a full-size overlay showing the same image scaled up */
.ifp-86-zoom-lens {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Same Amazon-style product title + store link as the 55" panel, applied to the 86" panel. */
.ifp-86-product { display: flex; flex-direction: column; gap: 10px; }
.ifp-86-product-title {
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 14px; font-weight: 600; line-height: 1.5;
  color: var(--fg-secondary); margin: 0;
}
.ifp-86-store-link {
  display: inline-flex; align-items: center; gap: 7px;
  width: fit-content;
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 14px; font-weight: 700;
  color: var(--primary, var(--primary));
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.30);
  padding-bottom: 1px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ifp-86-store-link:hover { border-bottom-color: var(--primary, var(--primary)); }
.ifp-86-store-link .amazon-glyph { font-size: 15px; }

/* Same trust-badges row as the 55" panel, applied to the 86" panel. */
.ifp-86-trust-badges {
  display: flex; flex-wrap: wrap; gap: 20px 28px;
  margin: -6px 0 4px;
}
.ifp-86-trust-item {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--p-font, 'Inter', sans-serif);
  font-size: 13px; font-weight: 600;
  color: var(--primary, var(--primary));
}
.ifp-86-trust-item [data-lucide] { width: 20px; height: 20px; stroke: var(--primary, var(--primary)); stroke-width: 1.8; flex-shrink: 0; }

/* Same single-column override + sticky 2-row grid split as the 55" panel (see */
.ifp-size-panel[data-panel="86"].active { grid-template-columns: 1fr; }
.ifp-86-text-top, .ifp-86-text-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
@media (min-width: 1101px) {
  .ifp-size-panel[data-panel="86"] .ifp-size-info {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-rows: auto auto;
    column-gap: 64px;
    row-gap: 18px;
    align-items: start;
  }
  .ifp-size-panel[data-panel="86"] .ifp-86-text-top { grid-column: 1; grid-row: 1; }
  .ifp-size-panel[data-panel="86"] .ifp-86-text-bottom { grid-column: 1; grid-row: 2; }
  .ifp-size-panel[data-panel="86"] .ifp-86-gallery-desktop {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
    min-width: 0;
    position: sticky;
    top: 168px;
    margin: 0;
  }
}

/* Same gallery + zoom-image pattern as the 55" panel, applied to the 98" panel; */
.ifp-98-gallery-mobile { display: block; position: relative; width: 100%; margin: 4px 0 8px; }
.ifp-98-gallery-desktop { display: none; }
@media (min-width: 600px) {
  .ifp-98-gallery-mobile { display: none; }
  .ifp-98-gallery-desktop { display: flex; gap: 14px; width: 100%; margin: 4px 0 8px; }
}
.ifp-98-gallery-track {
  display: flex; flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 16px;
  padding: 4px 2px 10px;
}
.ifp-98-gallery-track::-webkit-scrollbar { display: none; }
.ifp-98-gallery-item {
  flex: 0 0 auto;
  width: 340px;
  aspect-ratio: 1 / 1;
  scroll-snap-align: center;
  border-radius: 16px;
  overflow: hidden;
  background: var(--plate);
}
.ifp-98-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Desktop/tablet: thumbnail rail (left) + large zoomable main image (right) */
.ifp-98-thumbs {
  display: flex; flex-direction: column; gap: 10px;
  flex: 0 0 64px;
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: none;
  /* Owner ask: thumbnail rail at the extreme right of the page, main */
  order: 2;
}
.ifp-98-main { order: 1; }
.ifp-98-thumbs::-webkit-scrollbar { display: none; }
.ifp-98-thumb {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--plate);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.ifp-98-thumb:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.ifp-98-thumb.active { border-color: var(--primary, var(--primary)); }
.ifp-98-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ifp-98-main {
  position: relative;
  flex: 1 1 auto;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--plate);
  cursor: zoom-in;
}
.ifp-98-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Zoom lens — a full-size overlay showing the same image scaled up */
.ifp-98-zoom-lens {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Same Amazon-style product title + store link as the 55" panel, applied to the 98" panel. */
.ifp-98-product { display: flex; flex-direction: column; gap: 10px; }
.ifp-98-product-title {
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 14px; font-weight: 600; line-height: 1.5;
  color: var(--fg-secondary); margin: 0;
}
.ifp-98-store-link {
  display: inline-flex; align-items: center; gap: 7px;
  width: fit-content;
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 14px; font-weight: 700;
  color: var(--primary, var(--primary));
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.30);
  padding-bottom: 1px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ifp-98-store-link:hover { border-bottom-color: var(--primary, var(--primary)); }
.ifp-98-store-link .amazon-glyph { font-size: 15px; }

/* Same trust-badges row as the 55" panel, applied to the 98" panel. */
.ifp-98-trust-badges {
  display: flex; flex-wrap: wrap; gap: 20px 28px;
  margin: -6px 0 4px;
}
.ifp-98-trust-item {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--p-font, 'Inter', sans-serif);
  font-size: 13px; font-weight: 600;
  color: var(--primary, var(--primary));
}
.ifp-98-trust-item [data-lucide] { width: 20px; height: 20px; stroke: var(--primary, var(--primary)); stroke-width: 1.8; flex-shrink: 0; }

/* Same single-column override + sticky 2-row grid split as the 55" panel (see */
.ifp-size-panel[data-panel="98"].active { grid-template-columns: 1fr; }
.ifp-98-text-top, .ifp-98-text-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
@media (min-width: 1101px) {
  .ifp-size-panel[data-panel="98"] .ifp-size-info {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-rows: auto auto;
    column-gap: 64px;
    row-gap: 18px;
    align-items: start;
  }
  .ifp-size-panel[data-panel="98"] .ifp-98-text-top { grid-column: 1; grid-row: 1; }
  .ifp-size-panel[data-panel="98"] .ifp-98-text-bottom { grid-column: 1; grid-row: 2; }
  .ifp-size-panel[data-panel="98"] .ifp-98-gallery-desktop {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
    min-width: 0;
    position: sticky;
    top: 168px;
    margin: 0;
  }
}

/* "Product information" — Amazon-style 2-column spec accordion, owner */
/* margin-left/right must stay 0, not auto — this is a CSS Grid item (a */
.ifp-55-product-info { max-width: var(--site-max-w); margin: 40px 0 0; }
.ifp-55-pi-title {
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 20px; font-weight: 800; color: var(--fg-primary); margin: 0 0 16px;
}
.ifp-55-pi-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; }
.ifp-55-pi-col { display: flex; flex-direction: column; }
.ifp-55-pi-item { border-bottom: 1px solid var(--border); }
.ifp-55-pi-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: var(--surface-card); border: none;
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 15px; font-weight: 700; color: var(--fg-primary);
  text-align: left;
  cursor: pointer;
}
.ifp-55-pi-toggle [data-lucide] { width: 18px; height: 18px; stroke: #475569; stroke-width: 2; flex-shrink: 0; transition: transform 0.25s ease; }
.ifp-55-pi-toggle[aria-expanded="true"] [data-lucide] { transform: rotate(180deg); }
.ifp-55-pi-body { padding: 4px 16px 8px; }
.ifp-55-pi-row {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-family: var(--p-font, 'Inter', sans-serif);
  font-size: 13px; line-height: 1.6;
}
.ifp-55-pi-row:first-child { border-top: none; }
.ifp-55-pi-row span:first-child { color: var(--fg-secondary); font-weight: 600; flex-shrink: 0; }
.ifp-55-pi-row span:last-child { color: var(--fg-muted); text-align: right; }
@media (max-width: 767px) {
  .ifp-55-pi-columns { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ifp-55-pi-row { flex-direction: column; gap: 2px; }
  .ifp-55-pi-row span:last-child { text-align: left; }
}

/* Same "Product information" accordion as the 55" panel, applied to the */
.ifp-65-product-info, .ifp-75-product-info, .ifp-86-product-info, .ifp-98-product-info { max-width: var(--site-max-w); margin: 40px 0 0; }
.ifp-65-pi-title, .ifp-75-pi-title, .ifp-86-pi-title, .ifp-98-pi-title {
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 20px; font-weight: 800; color: var(--fg-primary); margin: 0 0 16px;
}
.ifp-65-pi-columns, .ifp-75-pi-columns, .ifp-86-pi-columns, .ifp-98-pi-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; }
.ifp-65-pi-col, .ifp-75-pi-col, .ifp-86-pi-col, .ifp-98-pi-col { display: flex; flex-direction: column; }
.ifp-65-pi-item, .ifp-75-pi-item, .ifp-86-pi-item, .ifp-98-pi-item { border-bottom: 1px solid var(--border); }
.ifp-65-pi-toggle, .ifp-75-pi-toggle, .ifp-86-pi-toggle, .ifp-98-pi-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: var(--surface-card); border: none;
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 15px; font-weight: 700; color: var(--fg-primary);
  text-align: left;
  cursor: pointer;
}
.ifp-65-pi-toggle [data-lucide], .ifp-75-pi-toggle [data-lucide], .ifp-86-pi-toggle [data-lucide], .ifp-98-pi-toggle [data-lucide] { width: 18px; height: 18px; stroke: #475569; stroke-width: 2; flex-shrink: 0; transition: transform 0.25s ease; }
.ifp-65-pi-toggle[aria-expanded="true"] [data-lucide], .ifp-75-pi-toggle[aria-expanded="true"] [data-lucide], .ifp-86-pi-toggle[aria-expanded="true"] [data-lucide], .ifp-98-pi-toggle[aria-expanded="true"] [data-lucide] { transform: rotate(180deg); }
.ifp-65-pi-body, .ifp-75-pi-body, .ifp-86-pi-body, .ifp-98-pi-body { padding: 4px 16px 8px; }
.ifp-65-pi-row, .ifp-75-pi-row, .ifp-86-pi-row, .ifp-98-pi-row {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-family: var(--p-font, 'Inter', sans-serif);
  font-size: 13px; line-height: 1.6;
}
.ifp-65-pi-row:first-child, .ifp-75-pi-row:first-child, .ifp-86-pi-row:first-child, .ifp-98-pi-row:first-child { border-top: none; }
.ifp-65-pi-row span:first-child, .ifp-75-pi-row span:first-child, .ifp-86-pi-row span:first-child, .ifp-98-pi-row span:first-child { color: var(--fg-secondary); font-weight: 600; flex-shrink: 0; }
.ifp-65-pi-row span:last-child, .ifp-75-pi-row span:last-child, .ifp-86-pi-row span:last-child, .ifp-98-pi-row span:last-child { color: var(--fg-muted); text-align: right; }
@media (max-width: 767px) {
  .ifp-65-pi-columns, .ifp-75-pi-columns, .ifp-86-pi-columns, .ifp-98-pi-columns { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ifp-65-pi-row, .ifp-75-pi-row, .ifp-86-pi-row, .ifp-98-pi-row { flex-direction: column; gap: 2px; }
  .ifp-65-pi-row span:last-child, .ifp-75-pi-row span:last-child, .ifp-86-pi-row span:last-child, .ifp-98-pi-row span:last-child { text-align: left; }
}

/* 55" panel: gallery replaces the media column, so let .ifp-size-info span */
.ifp-size-panel[data-panel="55"].active { grid-template-columns: 1fr; }

/* .ifp-55-text-top (badge+heading) and .ifp-55-text-bottom (description */
.ifp-55-text-top, .ifp-55-text-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }

/* Desktop split for the 55" panel only: .ifp-size-info becomes a 2-column, */
@media (min-width: 1101px) {
  .ifp-size-panel[data-panel="55"] .ifp-size-info {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-rows: auto auto;
    column-gap: 64px;
    row-gap: 18px;
    align-items: start;
  }
  .ifp-size-panel[data-panel="55"] .ifp-55-text-top { grid-column: 1; grid-row: 1; }
  .ifp-size-panel[data-panel="55"] .ifp-55-text-bottom { grid-column: 1; grid-row: 2; }
  .ifp-size-panel[data-panel="55"] .ifp-55-gallery-desktop {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
    min-width: 0;
    position: sticky;
    top: 168px;
    margin: 0;
  }
}

/* Right: media */
.ifp-size-media { position: relative; }

/* Google EDLA section */
.edla-inner {
  max-width: var(--site-max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center;
}
.edla-image { display: flex; align-items: center; justify-content: center; }
.edla-image img {
  width: 100%; max-width: 560px; height: auto;
  border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--clr-divider);
}

.edla-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 16px;
  background: rgba(66,133,244,0.08); border: 1px solid rgba(66,133,244,0.25); border-radius: 999px;
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 12px; font-weight: 700; color: #4285F4; margin-bottom: 18px;
}
.edla-desc {
  font-family: var(--p-font, 'Inter', sans-serif);
  font-size: clamp(14px, 1.3vw, 16px); color: var(--fg-muted); line-height: 1.75; margin-bottom: 32px;
}
.edla-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.edla-features li {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--clr-divider);
}
.edla-features li:first-child { padding-top: 0; }
.edla-features li:last-child { border-bottom: none; padding-bottom: 0; }
.edla-feat-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.edla-feat-icon svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2; }
.edla-icon-blue   { background: #4285F4; }
.edla-icon-green  { background: #34A853; }
.edla-icon-purple { background: #673AB7; }
.edla-features strong {
  display: block;
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 14px; font-weight: 700; color: var(--fg-primary); margin-bottom: 4px;
}
.edla-features p {
  font-family: var(--p-font, 'Inter', sans-serif);
  font-size: 13px; color: var(--fg-muted); line-height: 1.6; margin: 0;
}

/* Google app-icon orbit ring — Icons/Google_Apps/*.png arranged around the EDLA badge */
.edla-orbit {
  position: relative;
  width: 380px; height: 380px;
  margin: 0 auto;
}
.edla-orbit-ring {
  position: absolute; inset: 0;
  border: 2px dashed rgba(66,133,244,0.25);
  border-radius: 50%;
}
.edla-orbit-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 140px; height: 140px;
  border-radius: 50%;
  background: var(--surface-card);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12), 0 0 0 1px rgba(66,133,244,0.10);
  z-index: 2;
}
.edla-orbit-center img { width: 88px; height: 88px; object-fit: contain; }
.edla-orbit-icon {
  --edla-angle: calc(var(--i) * 60deg);
  position: absolute; top: 50%; left: 50%;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: var(--surface-card);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.10);
  transform: rotate(var(--edla-angle)) translate(150px) rotate(calc(var(--edla-angle) * -1));
  z-index: 3;
}
.edla-orbit-icon img { width: 34px; height: 34px; object-fit: contain; }

@media (max-width: 900px) {
  .edla-orbit { width: 300px; height: 300px; }
  .edla-orbit-center { width: 112px; height: 112px; }
  .edla-orbit-center img { width: 70px; height: 70px; }
  .edla-orbit-icon { width: 54px; height: 54px; margin: -27px 0 0 -27px; transform: rotate(var(--edla-angle)) translate(118px) rotate(calc(var(--edla-angle) * -1)); }
  .edla-orbit-icon img { width: 28px; height: 28px; }
}
@media (max-width: 599px) {
  .edla-orbit { width: 240px; height: 240px; }
  .edla-orbit-center { width: 92px; height: 92px; }
  .edla-orbit-center img { width: 56px; height: 56px; }
  .edla-orbit-icon { width: 44px; height: 44px; margin: -22px 0 0 -22px; transform: rotate(var(--edla-angle)) translate(92px) rotate(calc(var(--edla-angle) * -1)); }
  .edla-orbit-icon img { width: 22px; height: 22px; }
}

/* Google EDLA section: .edla-inner nested inside the centered .ifp-why-inner, */
.ifp-why-section.ifp-cert-section { background: var(--bg); }
.ifp-cert-section .edla-inner { text-align: left; }
.edla-content { text-align: left; }
.ifp-cert-section .edla-content h2 {
  text-align: left; margin: 0 0 16px; max-width: none;
}

/* Why Schools Choose Interactive Flat Panels */
.ifp-why-section {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  padding: var(--space-section) var(--site-pad-x);
  border-top: 1px solid var(--clr-divider);
}
.ifp-why-inner { max-width: var(--site-max-w); margin: 0 auto; text-align: center; }

.ifp-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: left;
}
.ifp-why-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 22px;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ifp-why-card:hover {
  box-shadow: 0 16px 40px rgba(10,15,30,0.10);
  border-color: rgba(var(--accent-rgb), 0.30);
  z-index: 2;
}
.ifp-why-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.ifp-why-icon {
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ifp-why-icon svg { width: 22px; height: 22px; stroke-width: 2; }
.ifp-why-card h3 {
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 16px; font-weight: 700; color: var(--fg-primary);
  line-height: 1.35; margin: 0 0 10px;
}
.ifp-why-card p {
  font-family: var(--p-font, 'Inter', sans-serif);
  font-size: 13px; color: var(--fg-muted); line-height: 1.7; margin: 0;
}
.ifp-why-card a {
  color: var(--primary); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.30); transition: border-color 0.2s;
}
.ifp-why-card a:hover { border-bottom-color: var(--primary); }

.ifp-why-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ifp-why-list li {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--p-font, 'Inter', sans-serif);
  font-size: 13px; color: var(--fg-secondary); font-weight: 500;
}
.ifp-why-list li svg { width: 16px; height: 16px; stroke: #16A34A; stroke-width: 2.5; flex-shrink: 0; }

/* Card accent colours */
.ifp-accent-1 .ifp-why-icon { background: rgba(var(--accent-rgb), 0.10); border: 1px solid rgba(var(--accent-rgb), 0.22); }
.ifp-accent-1 .ifp-why-icon svg { stroke: var(--primary); }

.ifp-accent-2 .ifp-why-icon { background: rgba(20,184,166,0.10); border: 1px solid rgba(20,184,166,0.22); }
.ifp-accent-2 .ifp-why-icon svg { stroke: #14B8A6; }

.ifp-accent-3 .ifp-why-icon { background: rgba(var(--accent-rgb), 0.10); border: 1px solid rgba(var(--accent-rgb), 0.22); }
.ifp-accent-3 .ifp-why-icon svg { stroke: var(--accent); }

.ifp-accent-4 .ifp-why-icon { background: rgba(168,85,247,0.10); border: 1px solid rgba(168,85,247,0.22); }
.ifp-accent-4 .ifp-why-icon svg { stroke: #A855F7; }

/* Accessories — in-the-box product grid, right after the EDLA section */
.ifp-accessories-section {
  background: var(--bg);
  padding: var(--space-section) var(--site-pad-x);
  border-top: 1px solid var(--clr-divider);
}
.ifp-accessories-inner { max-width: var(--site-max-w); margin: 0 auto; }
.ifp-accessories-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.ifp-accessory-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px 20px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ifp-accessory-card:hover {
  box-shadow: 0 16px 40px rgba(10,15,30,0.10);
  border-color: rgba(var(--accent-rgb), 0.30);
  z-index: 2;
}
.ifp-accessory-img {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  overflow: hidden;
}
.ifp-accessory-img img { width: 70%; height: 70%; object-fit: contain; }
.ifp-accessory-card h3 {
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 15px; font-weight: 700; color: var(--fg-primary); margin: 0;
}
@media (max-width: 900px) {
  .ifp-accessories-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Phones: swipeable carousel instead of a wrapping grid — native */
@media (max-width: 599px) {
  .ifp-accessories-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    padding: 4px 2px 10px;
  }
  .ifp-accessories-grid::-webkit-scrollbar { display: none; }
  .ifp-accessory-card {
    flex: 0 0 42%;
    min-width: 148px;
    scroll-snap-align: start;
    padding: 22px 12px;
  }
  .ifp-accessory-img { width: 88px; height: 88px; margin-bottom: 14px; }
  .ifp-accessory-card h3 { font-size: 13.5px; }
}

/* Certifications strip (CMMI L5 / Make in India / GeM) — right after */
.ifp-certs-section { background: var(--bg); padding: var(--space-section) var(--site-pad-x); border-top: 1px solid var(--clr-divider); }
.ifp-certs-inner { max-width: var(--site-max-w); margin: 0 auto; }
.ifp-certs-row { display: flex; justify-content: center; align-items: center; gap: 64px; flex-wrap: wrap; }
.ifp-cert-item { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
/* Bumped 54px→84px / 96px→150px (owner request, 2026-08-27) — matching */
.ifp-cert-item img { height: 84px; width: auto; max-width: none; object-fit: contain; box-shadow: none; filter: none; }
.ifp-cert-item video { height: 84px; width: 150px; object-fit: cover; border-radius: 4px; box-shadow: none; filter: none; }
.ifp-cert-item span {
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 14px; font-weight: 700; color: var(--fg-primary);
}
@media (max-width: 599px) {
  .ifp-certs-row { gap: 32px 24px; }
  .ifp-cert-item img { height: 64px; max-width: none; }
  .ifp-cert-item video { height: 64px; width: 114px; }
  .ifp-cert-item span { font-size: 12px; }
}

/* FAQ Section */

/* Responsive */
@media (max-width: 1100px) {
  .ifp-why-grid { grid-template-columns: repeat(3,1fr); }
  .ifp-size-panel.active { grid-template-columns: 1fr; gap: 32px; }
  .ifp-size-media { order: -1; }
}
@media (max-width: 900px) {
  .edla-inner { grid-template-columns: 1fr; gap: 40px; }
  .edla-image { order: 2; }
  .edla-content { order: 1; }
  .ifp-why-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 599px) {
  .ifp-products { padding: 48px 16px; }
  .ifp-size-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    max-width: 100%;
  }
  .ifp-size-tabs::-webkit-scrollbar { display: none; }
  .ifp-size-tab { flex: 0 0 auto; padding: 10px 18px; }
  .ifp-size-tab-inch { font-size: 14px; }
  .ifp-55-gallery-mobile { margin: -4px 0 2px; }
  .ifp-55-gallery-track { gap: 12px; padding: 4px 7vw 8px; }
  .ifp-55-gallery-item { width: min(84vw, 340px); }
  .ifp-size-cta { flex-direction: column; align-items: stretch; }
  .ifp-size-cta .cta-btn, .ifp-size-cta .cta-btn-ghost { justify-content: center; text-align: center; }
  .ifp-why-section h2 { margin-bottom: 32px; font-size: clamp(21px, 6vw, 26px); max-width: 100%; }
  .ifp-why-grid { grid-template-columns: 1fr; gap: 16px; }
}
/* Same mobile gallery sizing as the 55" panel, applied to the 65"/75"/86"/98" panels. */
@media (max-width: 599px) {
  .ifp-65-gallery-mobile, .ifp-75-gallery-mobile, .ifp-86-gallery-mobile, .ifp-98-gallery-mobile { margin: -4px 0 2px; }
  .ifp-65-gallery-track, .ifp-75-gallery-track, .ifp-86-gallery-track, .ifp-98-gallery-track { gap: 12px; padding: 4px 7vw 8px; }
  .ifp-65-gallery-item, .ifp-75-gallery-item, .ifp-86-gallery-item, .ifp-98-gallery-item { width: min(84vw, 340px); }
}

/* Price Drop toast — animated dropping graph icon */

/* Shared with STUDYNLEARN AI section header below */

/* support — same card design as the homepage Installation & Support section */

/* IFP vs Projector comparison table (T22) */
.ifp-compare-section { background: var(--bg); padding: var(--space-section) var(--site-pad-x); border-top: 1px solid var(--clr-divider, var(--border)); }
.ifp-compare-inner { max-width: var(--site-max-w); margin: 0 auto; }
.ifp-compare-inner > h2 { text-align: center; margin: 0 auto 12px; max-width: 820px; color: var(--fg-primary); -webkit-text-fill-color: #0A0F1E; }
.ifp-compare-inner > p {
  font-family: var(--p-font, 'Inter', sans-serif);
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--fg-muted);
  line-height: 1.7;
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}
.ifp-compare-table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--border); }
.ifp-compare-table { width: 100%; border-collapse: collapse; min-width: 620px; font-family: var(--p-font, 'Inter', sans-serif); font-size: 14px; table-layout: fixed; }
.ifp-compare-table thead th:first-child,
.ifp-compare-table tbody th { width: 160px; }
.ifp-compare-table thead th:not(:first-child),
.ifp-compare-table tbody td { width: calc((100% - 160px) / 2); }
.ifp-compare-table thead th {
  background: #0A0F1E; color: #fff;
  font-family: var(--h-font, 'Inter', sans-serif); font-weight: 700; font-size: 14px;
  text-align: left; padding: 16px 20px;
}
.ifp-compare-table thead th:first-child { background: #0A0F1E; }
.ifp-compare-table tbody th {
  text-align: left; font-weight: 700; color: var(--fg-primary);
  background: var(--surface); padding: 14px 20px; white-space: normal;
}
.ifp-compare-table tbody td { padding: 14px 20px; color: var(--fg-secondary); line-height: 1.6; border-top: 1px solid var(--border); }
.ifp-compare-table tbody th { border-top: 1px solid var(--border); }
@media (max-width: 599px) {
  /* Fit the phone instead of scrolling sideways: the last column (Projector / panel) was off screen with no cue. */
  .ifp-compare-table { min-width: 0; font-size: 13px; }
  .ifp-compare-table thead th:first-child,
  .ifp-compare-table tbody th { width: 104px; }
  .ifp-compare-table thead th:not(:first-child),
  .ifp-compare-table tbody td { width: calc((100% - 104px) / 2); }
  .ifp-compare-table thead th, .ifp-compare-table tbody th, .ifp-compare-table tbody td { padding: 10px 8px; font-size: 13px; overflow-wrap: break-word; }
}

/* Product-page overrides — this block was ai.css, loaded right after this file by the four product pages. */

/* global.css sets `html, body { overflow-x: hidden }`, which makes body a */
html, body { overflow-x: clip; }

/* The bottom CTA band that used to live here (.snlai-cta*) was removed when */

/* "Why Teachers Choose" grid — center it (AI + IFP pages only) */
.ifp-why-grid { grid-template-columns: repeat(4, 1fr); }
.ifp-why-card { text-align: center; }
.ifp-why-top { justify-content: center; gap: 14px; }
@media (max-width: 1100px) {
  /* smartclass.css drops to 3 cols here, which splits 4 cards into an */
  .ifp-why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .ifp-why-grid { grid-template-columns: 1fr; gap: 16px; }
}
/* Tap targets — 44 px controls on touch screens */
@media (max-width: 767px), (pointer: coarse) {
  .ifp-size-tab { min-height: 44px; }
  .ifp-55-store-link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ══════════════════════════════════════════════════════════
   HARDWARE / SOFTWARE — feature list + video (3-column)
   Ported from Study'n'Learn's smartclass.css; used by the "SNL AI -
   Intelligence Unleashed" reference section on interactive_flat_panel.php.
   The source's own #support-scoped variant and .hw-icon's plain-Lucide
   styling weren't ported — nothing on this site uses them yet.
══════════════════════════════════════════════════════════ */
.sw-video-section { background: var(--bg); position: relative; overflow: hidden; }

.hw-header { text-align: center; margin-bottom: 56px; }
.hw-header h2 { color: var(--fg-primary); letter-spacing: -0.3px; }
.hw-header p { color: var(--fg-secondary); margin-top: 12px; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.7; }

/* 3-column grid — video keeps its native 16:9 ratio, centered against the card columns */
.hw-layout { display: grid; grid-template-columns: 1fr 1.4fr 1fr; column-gap: 24px; align-items: center; }

.hw-video-wrap { display: flex; justify-content: center; align-items: center; position: relative; }
.hw-video-wrap::before {
  content: ""; position: absolute; inset: -20px;
  background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), 0.07) 0%, transparent 65%);
  pointer-events: none; z-index: 0; filter: blur(16px);
}
.hw-video-wrap video,
.hw-video-wrap .ops-photo {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; object-position: center;
  border-radius: 24px; display: block; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.20);
  background: #000000;
  border: 1px solid rgba(135, 206, 235, 0.35);
}
/* The SNL OPS module photo (IFP page, OPS section): a still, on white, in the same frame as the video —
   but with a light shadow; the video's heavy dark one (above) overpowers a white product card. */

/* Sub-heading + spec tiles under the three-column layout (IFP page, OPS section) */

.ifp-spec-grid + .sw-cta-wrap { margin-top: 48px; }

.hw-specs { display: flex; flex-direction: column; justify-content: center; gap: 18px; align-items: stretch; }
.hw-specs.left  .hw-item { flex-direction: row; text-align: right;  justify-content: flex-end; }
.hw-specs.right .hw-item { flex-direction: row; text-align: left;   justify-content: flex-start; }

.hw-item {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; width: 100%;
  overflow: visible; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-card);
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}
.hw-item:hover { border-color: rgba(var(--accent-rgb), 0.25); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(var(--accent-rgb), 0.10); z-index: 2; }

.hw-icon {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px;
  background: linear-gradient(135deg, #EEF6FF, #EDE8F8); border: 1px solid #DDE3F0;
  display: flex; align-items: center; justify-content: center; transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.hw-item:hover .hw-icon { background: linear-gradient(135deg, #E0F4FF, #EAE0FF); border-color: rgba(var(--accent-rgb), 0.25); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08); }
.hw-icon [data-lucide] { width: 24px; height: 24px; stroke: var(--primary-deep); transition: stroke 0.3s; }
.hw-item:hover .hw-icon [data-lucide] { stroke: var(--primary); }

.hw-icon-svg {
  width: 44px !important; height: 44px !important;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.06), rgba(var(--accent-deep-rgb), 0.04)) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.15) !important;
}

.hw-text { flex: 1; min-width: 0; overflow: visible; word-break: break-word; }
.hw-text h3 { font-size: 15px; font-weight: 600; color: var(--fg-primary); margin: 0 0 4px; line-height: 1.35; }
.hw-text p { font-size: 12.5px; font-weight: 400; color: var(--fg-muted); margin: 0; line-height: 1.6; }

/* SOFTWARE CARDS CAROUSEL — restored 2026-09-29 from archive/css-unused-2026-09-25/index.css for
   #ifp-ai-showcase (that file isn't loaded on this page, so the rules live here instead). */
.software-cards-section {
  padding: var(--space-section) 0;
  background: var(--grad-dark-section);
  color: #fff;
  position: relative;
  overflow: hidden;
}
#ifp-ai-showcase .hw-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0.09) 100%);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1.5px 0 rgba(255, 255, 255, 0.22), 0 8px 32px rgba(0, 0, 0, 0.30);
}
#ifp-ai-showcase .hw-card.hw-card-active {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.07) 60%, rgba(255, 255, 255, 0.12) 100%);
  box-shadow: 0 0 0 0.5px rgba(var(--accent-rgb), 0.28), 0 0 24px rgba(var(--accent-rgb), 0.20), 0 8px 32px rgba(0, 0, 0, 0.35);
}
#ifp-ai-showcase .hw-card-body { background: rgba(255, 255, 255, 0.04); }
#ifp-ai-showcase .hw-card-icon { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); }
#ifp-ai-showcase .hw-card-img { padding: 10px 10px 0; }
#ifp-ai-showcase .hw-card-img img { border-radius: 10px; }

.hw-carousel-outer { position: relative; }
.hw-carousel-viewport {
  overflow: hidden;
  width: calc(100% - 128px);
  padding: 24px 0;
  margin: -24px auto;
  min-height: calc(210px + 72px); /* .hw-card-img height + .hw-card-body height, reserved to avoid CLS before JS runs */
}
.hw-carousel-track { display: flex; align-items: flex-start; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
.hw-card {
  flex: 0 0 calc(33.333% - 32px);
  margin: 0 16px;
  background: #0b0b0f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s ease, box-shadow 0.5s ease;
}
.hw-card.hw-card-active {
  transform: scale(1.09);
  will-change: transform;
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 0 0 1.5px rgba(var(--accent-rgb), 0.4), 0 0 20px rgba(var(--accent-rgb), 0.2), 0 8px 28px rgba(0, 0, 0, 0.14);
  z-index: 2;
}
.hw-card-img { width: 100%; height: 210px; overflow: hidden; }
.hw-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); }
.hw-card-body { padding: 18px 20px; display: flex; align-items: center; gap: 14px; background: rgba(11, 11, 15, 0.85); text-align: left; }
.hw-card-icon {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background 0.3s, border-color 0.3s;
}
.hw-card-icon [data-lucide] { width: 22px; height: 22px; stroke: rgba(255, 255, 255, 0.8); transition: stroke 0.3s; }
.hw-card-text h3 { font-size: 1rem; font-weight: 700; color: rgba(255, 255, 255, 0.90); margin: 0 0 4px; line-height: 1.2; }
.hw-card-text p {
  font-size: 0.8rem; color: rgba(255, 255, 255, 0.68); line-height: 1.4; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sw-cta-wrap { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: calc(var(--space-section) - 36px); }
/* Carousel arrows: ~14px the active card's scale(1.09) bleeds below its layout box + a 30px visible gap.
   Fixed, not --space-section, which shrinks the gap to nothing on tablet. */
#ifp-ai-showcase .sw-cta-wrap { margin-top: 44px; }

@media (max-width: 599px) {
  .hw-layout { grid-template-columns: 1fr; gap: 20px; }
  .hw-video-wrap { width: 100%; }
  .hw-carousel-viewport { width: auto; padding: 18px 14%; margin: -18px auto; }
  .hw-card { flex: 0 0 calc(72vw - 32px); margin: 0 16px; }
}
@media (max-width: 1100px) {
  .hw-layout { gap: 24px; }
  .hw-video-wrap { max-width: 480px; margin: 0 auto; }
  .hw-carousel-outer { overflow-x: clip; overflow-y: visible; }
  .hw-carousel-viewport { overflow: visible; width: auto; padding: 20px 20%; margin: -20px auto; }
  .hw-card { flex: 0 0 calc(60vw - 32px); margin: 0 16px; }
}
/* Phones: the AI showcase takes the "Designed to Perform" layout (.ifp-hwc-*) — one full-width card at a time, the
   arrows overlaid at the card's left and right edges, vertically centred on it — instead of the 3-up desktop
   peek. Built for a fast, smooth slide: a short transform-only transition, no backdrop blur (a blur layer is
   re-rasterised every frame of the slide), no scale pop on the active card. The swipe is in the page script. */
@media (max-width: 599px) {
  #ifp-ai-showcase .eco-centered-wrap { position: relative; }
  #ifp-ai-showcase .hw-carousel-outer { overflow-x: clip; overflow-y: visible; }
  #ifp-ai-showcase .hw-carousel-viewport { overflow: visible; width: auto; padding: 16px 0; margin: -16px auto; min-height: 0; }
  #ifp-ai-showcase .hw-carousel-track { transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.3, 1); touch-action: pan-y; }
  #ifp-ai-showcase .hw-card {
    flex: 0 0 calc(100% - 32px); margin: 0 16px;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: linear-gradient(135deg, rgba(40, 52, 82, 0.92) 0%, rgba(26, 34, 58, 0.92) 100%);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  #ifp-ai-showcase .hw-card.hw-card-active { transform: none; will-change: auto; border-color: rgba(var(--accent-rgb), 0.6); }
  #ifp-ai-showcase .hw-card-img { height: auto; aspect-ratio: 16 / 9; }
  #ifp-ai-showcase .hw-card-img img { transition: none; }
  #ifp-ai-showcase .hw-card-body { position: relative; padding: 13px 14px; gap: 10px; }
  #ifp-ai-showcase .hw-card-body::before {
    content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  }
  #ifp-ai-showcase .sw-cta-wrap {
    position: absolute; top: 50%; left: 24px; right: 24px; margin: 0; /* 24px = where the Designed to Perform arrows sit (10px control inset + the section's side padding) */
    transform: translateY(-50%);
    justify-content: space-between; pointer-events: none; z-index: 5;
  }
}
@media (max-width: 900px) {
  .hw-header { margin-bottom: 48px; }
  .hw-video-wrap video, .hw-video-wrap .ops-photo { border-radius: 16px; }
  .hw-specs { gap: 10px; }
  .hw-item { padding: 12px 8px; gap: 8px; }
}
@media (max-width: 480px) {
  .hw-icon { width: 44px; height: 44px; }
  .hw-icon [data-lucide] { width: 20px; height: 20px; }
  .hw-text h3 { font-size: 13px; }
  .hw-specs { flex-wrap: wrap; gap: 10px; }
  .hw-item { flex: 1 1 calc(33.333% - 10px); min-width: 90px; padding: 12px 8px; }
}