/* ═══════════════════════════════════════════════════════
   KAANSKY — Shared layout fixes + full responsive system
   Linked in ALL product pages after the inline <style>

   BREAKPOINT SYSTEM (Plan B — unified across all pages)
   ┌─────────────┬──────────────────────────────────────┐
   │  ≥ 1025 px  │  PC  — full desktop layout           │
   │  768–1024px │  Tablet — PC framework, scaled down  │
   │  < 768 px   │  Mobile — mobile framework            │
   │  < 430 px   │  Narrow phone — further compression  │
   └─────────────┴──────────────────────────────────────┘
   ═══════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────
   A. ALWAYS-ON FIXES  (desktop + mobile)
   ──────────────────────────────────────────────────────── */

html { overflow-x: hidden; }
body { overflow-x: hidden; }

/* Hero: vertically centre the title/slogan */
.hero-content {
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-top: 0 !important;
}

/* ── Feature sections: 40/60 split ── */
/* Text: 40% LEFT  |  Media: 60% RIGHT
   Explicit grid-column forces correct placement regardless of HTML child order.
   .reverse → media LEFT (60%) | text RIGHT (40%).
   align-items:start lets .feat-visual keep its true aspect-ratio height;
   .feat-text uses align-self:stretch so it fills that same height. */
.feat-section {
  grid-template-columns: 40% 60%;
  min-height: 0;
  align-items: start;         /* visual sets the row height via aspect-ratio */
}
/* Text: column 1 (40% left), stretches to match visual height */
.feat-section .feat-text {
  grid-column: 1;
  align-self: stretch;
}
/* Media: column 2 (60% right) */
.feat-section .feat-visual,
.feat-section .feat-video { grid-column: 2; }

/* Reverse: media LEFT (60%), text RIGHT (40%) */
.feat-section.reverse {
  grid-template-columns: 60% 40%;
  direction: ltr !important;
}
.feat-section.reverse .feat-visual,
.feat-section.reverse .feat-video { grid-column: 1; }
.feat-section.reverse .feat-text  { grid-column: 2; align-self: stretch; }

/* Media: strict 16:9, height driven by aspect-ratio (not by text column) */
.feat-visual,
.feat-video {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  overflow: hidden;
}
/* Image: fills the 16:9 box — contain shows full image, no cropping */
.feat-visual img {
  width: 100%;
  height: 100%;
  display: block;
  /* object-fit already set to contain in each page's inline <style> */
}
/* Text column: vw-based padding and gaps for proportional PC scaling */
.feat-text {
  padding: 5vw 4.5vw;
}
.feat-nums { gap: 2.2vw; margin-top: 2.2vw; }
.feat-num-val { font-size: clamp(1.2rem, 2.2vw, 2rem); }
.pg-body { max-width: min(480px, 100%); }

/* Showcase player: dark panel, flex column */
.showcase-player {
  display: flex;
  flex-direction: column;
  background: #0d0d0d;          /* dark background for the whole player panel */
  min-height: 380px;
}

/* ── Tab header bar ── */
.player-header {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  background: #111;
  border-bottom: 1px solid rgba(255,255,255,.07);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.player-header::-webkit-scrollbar { display: none; }

.player-tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 20px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  border-right: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.35);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  font-family: inherit;
  text-align: left;
  flex-shrink: 0;
}
.player-tab-btn:last-child { border-right: none; }
.player-tab-btn:hover:not(.active) {
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.6);
}
.player-tab-btn.active {
  background: rgba(255,255,255,.05);
  color: #fff;
  border-bottom-color: #0071e3;
}
.player-tab-title {
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.2;
}
.player-tab-desc {
  font-size: .65rem;
  color: rgba(255,255,255,.35);
  font-weight: 400;
  letter-spacing: .02em;
}
.player-tab-btn.active .player-tab-desc { color: rgba(255,255,255,.5); }

/* ── N1-framework video player ── */
.player-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
  width: 100%;
}
.player-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.player-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .25s;
  background: linear-gradient(to top, rgba(0,0,0,.4) 0%, transparent 50%);
}
.player-overlay.playing { opacity: 0; }
.player-overlay.playing:hover { opacity: 1; }
.player-big-play {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,.14); backdrop-filter: blur(12px);
  border: 2px solid rgba(255,255,255,.44); color: #fff;
  font-size: 1.35rem; display: flex; align-items: center; justify-content: center;
  pointer-events: none; transition: background .2s;
}
.player-overlay:hover .player-big-play { background: rgba(255,255,255,.26); }
.player-controls {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 8px 14px; background: #111;
}
.player-btn {
  background: none; border: none; color: rgba(255,255,255,.6);
  font-size: .88rem; cursor: pointer; padding: 5px 4px;
  transition: color .2s; flex-shrink: 0;
}
.player-btn:hover { color: #fff; }
.player-progress { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.player-seek { width: 100%; height: 3px; cursor: pointer; accent-color: #0071e3; border-radius: 2px; }
.player-time { font-size: .6rem; color: rgba(255,255,255,.32); letter-spacing: .04em; }
.player-vol-wrap { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.player-vol-slider { width: 64px; height: 3px; cursor: pointer; accent-color: rgba(255,255,255,.7); border-radius: 2px; }

/* ── Legacy image-viewer (player-img-wrap) — kept for compatibility ── */
.player-img-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0d0d;
  overflow: hidden;
  width: 100%;
}
.player-img-wrap > img,
.player-img-wrap > video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}


/* ────────────────────────────────────────────────────────
   B. TABLET  768–1024 px  (PC framework, scaled down)
   ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* ──────────────────────────────────────────────────────
     NAV: proportionally scale all 3 rows so everything
     is visible simultaneously without any scrolling.
     Row heights: nav-main 48→40px · nav-sub 56→38px
                  quick-nav 48→36px = 114px total
     ────────────────────────────────────────────────────── */

  /* Row 1 — main bar */
  .nav-main { height: 40px !important; padding: 0 16px !important; }
  .nav-logo  { font-size: .6rem !important; }
  /* nav-links: reset absolute positioning → become a regular flex item centered between logo and nav-right */
  .nav-links {
    position: static !important;
    transform: none !important;
    left: auto !important;
    flex: 1;
    display: flex !important;
    justify-content: center;
    gap: 8px !important;
  }
  .nav-links a { font-size: .55rem !important; white-space: nowrap; }
  .nav-links li { list-style: none; }
  .nav-store { padding: 4px 10px !important; font-size: .58rem !important; }
  .nav-right { gap: 10px !important; }
  .nav-icon  { font-size: .78rem !important; }

  /* Row 2 — product sub-nav */
  /* Keep images, hide text labels — each item ~24px wide; 8 products ≈ 200px total */
  .nav-sub {
    height: 38px !important;
    padding: 0 8px !important;
    justify-content: center !important;
  }
  .nav-sub-link {
    padding: 0 4px !important;
    gap: 2px !important;
    height: 100% !important;
    font-size: .52rem !important;
  }
  .nav-sub-link span { display: none !important; }      /* hide text labels */
  .nav-sub-link img  { height: 20px !important; }
  .nav-sub-divider   { height: 14px !important; margin: 0 2px !important; }

  /* Row 3 — quick-nav anchors */
  .quick-nav {
    height: 36px !important;
    padding: 0 8px !important;
    gap: 0 !important;
  }
  .qn-link    { padding: 0 6px !important; font-size: .5rem !important; }
  .qn-model   { padding: 0 6px !important; font-size: .56rem !important; }
  .qn-buy     { padding: 4px 10px !important; font-size: .56rem !important; margin-left: 4px !important; }
  .qn-divider { margin: 0 2px !important; }

  /* Body padding = total nav height (40 + 38 + 36 = 114px) */
  body { padding-top: 114px !important; }

  /* ──────────────────────────────────────────────────────
     HERO: shorten to 60vh so content below is reachable
     ────────────────────────────────────────────────────── */
  .hero-pg {
    height: 60vh !important;
    min-height: 280px;
  }
  /* Specs pill strip: scroll horizontally if needed */
  .hero-specs-bar-bottom { flex-wrap: nowrap; overflow-x: auto; }
  .hero-specs-pills {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .hero-spec { flex-shrink: 0; min-width: 76px; padding: 12px 14px; }
  .hero-spec-val   { font-size: .82rem; }
  .hero-spec-label { font-size: .52rem; }
  .hero-btns-bar   { display: none !important; }

  /* ──────────────────────────────────────────────────────
     SHOWCASE: stack gallery (top) + player (bottom)
     All heights use aspect-ratio so they scale with screen width.
     ────────────────────────────────────────────────────── */
  .showcase-section { padding: 24px 0 !important; }

  .showcase-card {
    grid-template-columns: 1fr !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Gallery panel */
  .showcase-gallery {
    border-right: none !important;
    border-bottom: 1px solid var(--light-gray, #e8e8ed);
    max-height: none !important;
    overflow: visible !important;
    padding: 14px !important;
  }
  /* Main preview: vw-based height (4:3 of gallery content width ≈ 72vw) */
  .showcase-main {
    width: 100% !important;
    height: 72vw !important;       /* 4:3 ratio minus gallery padding  */
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  /* Main preview image: contain so product shots never crop */
  .showcase-main img { object-fit: contain !important; }

  /* Thumbnails row — horizontal scroll */
  .showcase-thumbs-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
    padding-bottom: 4px;
  }
  .showcase-thumbs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .showcase-thumbs::-webkit-scrollbar { display: none; }
  .showcase-thumb { flex-shrink: 0; }
  .showcase-catalog-btn { flex-shrink: 0; }

  /* Player panel: no fixed min-height, full width */
  .showcase-player {
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .player-header {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    display: flex;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .player-header::-webkit-scrollbar { display: none; }
  .player-tab-btn { flex-shrink: 0; }
  /* Player media area: vw-based height (16:9 of full viewport width) */
  .player-wrap,
  .player-img-wrap {
    width: 100% !important;
    height: 56.25vw !important;    /* exactly 16:9 of 100vw */
    max-width: 100% !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
  }
  .player-wrap video,
  .player-img-wrap > img,
  .player-img-wrap > video {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }
  /* Video overlay must not break height */
  .player-overlay { position: absolute !important; }

  /* ──────────────────────────────────────────────────────
     DEEP-DETAIL FEATURE SECTIONS: TEXT FIRST, image below
     ────────────────────────────────────────────────────── */
  .feat-section {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    direction: ltr !important;
  }
  .feat-section.reverse {
    grid-template-columns: 1fr !important;
    direction: ltr !important;
  }
  .feat-section.reverse > * { direction: ltr !important; }

  /* Reset explicit grid-column assignments — single column, use order instead */
  .feat-section .feat-visual,
  .feat-section .feat-video,
  .feat-section.reverse .feat-visual,
  .feat-section.reverse .feat-video { grid-column: auto !important; }
  .feat-section .feat-text,
  .feat-section.reverse .feat-text   { grid-column: auto !important; }

  /* CSS order: text first (top), visual second (bottom) */
  .feat-section .feat-text   { order: -1; }
  .feat-section .feat-visual,
  .feat-section .feat-video  { order:  1; }

  /* Stacked layout: let aspect-ratio control height (16:9 of full width) */
  .feat-visual,
  .feat-video {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    width: 100%;
  }

  .feat-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .feat-text { padding: 44px 28px !important; }
  .pg-section-inner { padding: 60px 20px !important; }

  /* Specs table */
  .specs-grid { grid-template-columns: 1fr !important; gap: 0 !important; }

  /* Bottom CTA */
  .cta-inner { padding: 60px 20px !important; }
}


/* ────────────────────────────────────────────────────────
   C. MOBILE  < 768 px  (mobile framework)
   ──────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  .nav-store { padding: 4px 8px !important; font-size: .56rem !important; }

  /* Hero */
  .hero-pg    { height: 55vh !important; min-height: 260px; }
  .hero-title  { font-size: clamp(2rem, 10vw, 3.2rem) !important; }
  .hero-slogan { font-size: clamp(.78rem, 3vw, 1rem) !important; }

  /* Hero specs: more compact */
  .hero-spec       { min-width: 60px; padding: 10px 10px; }
  .hero-spec-val   { font-size: .72rem; }
  .hero-spec-label { font-size: .46rem; }

  /* Feature sections: aspect-ratio keeps 16:9 at mobile width */
  .feat-visual,
  .feat-video { height: auto !important; min-height: 0 !important; }
  .feat-text  { padding: 36px 20px !important; }
  .pg-title   { font-size: clamp(1.7rem, 8vw, 2.4rem) !important; }
  .pg-body    { font-size: .9rem !important; max-width: 100% !important; }
  .feat-nums  { gap: 20px; flex-wrap: wrap; }

  .pg-section-inner { padding: 48px 16px !important; }

  /* Showcase: aspect-ratio already handles scaling — no fixed px overrides needed */

  /* Spec table */
  .comp-table-wrap { overflow-x: auto; }

  /* Bottom CTA */
  .cta-inner  { padding: 44px 16px !important; }
  .cta-title  { font-size: clamp(1.6rem, 7vw, 2rem) !important; }
  .cta-btn    { padding: 12px 32px; font-size: .85rem; }

  /* FAQ */
  .faq-list-pg { margin-top: 28px; }
}


/* ────────────────────────────────────────────────────────
   CATALOG BUTTON: PC shows in thumbs-row, mobile shows below player
   ──────────────────────────────────────────────────────── */
.catalog-mobile-only { display: none; }
@media (max-width: 767px) {
  .catalog-pc-only    { display: none !important; }
  .catalog-mobile-only { display: block; }
}


/* ────────────────────────────────────────────────────────
   D. VERY NARROW PHONES  ≤ 430 px
   (product page nav: wrap links to a 4th row, shrink further)
   ──────────────────────────────────────────────────────── */
@media (max-width: 430px) {

  /* Row 1 — shrink logo + store button more */
  .nav-main { padding: 0 10px !important; }
  .nav-logo  { font-size: .52rem !important; }
  .nav-store { padding: 3px 8px !important; font-size: .52rem !important; }
  .nav-right { gap: 6px !important; }
  .nav-icon  { font-size: .72rem !important; }

  /* Row 2 — nav links: allow them to wrap to next line */
  .nav-links {
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
    justify-content: center !important;
    padding: 4px 6px !important;
  }
  .nav-links a { font-size: .48rem !important; }

  /* Recalculate body padding:
     nav-main ≈ 40px, nav-links (wrapped) ≈ 28px, nav-sub ≈ 36px, quick-nav ≈ 36px = 140px */
  body { padding-top: 140px !important; }
}


/* ────────────────────────────────────────────────────────
   E. SIMPLE PAGES  (support / distributor / download / about)
      Single-row 48px nav — no sub-nav / quick-nav rows.
      Target classes that only appear on these pages.
   ──────────────────────────────────────────────────────── */
/* Classes below only exist on simple pages (support/distributor/download/about),
   not on product pages, so these rules are safely scoped. */
@media (max-width: 767px) {

  /* Page hero banner */
  .page-hero       { padding: 70px 20px 52px !important; }
  .page-hero-title { font-size: clamp(2rem, 9vw, 3rem) !important; }
  .page-hero-body  { font-size: .88rem !important; padding: 0 4px; }

  /* Content sections */
  .inner         { padding: 52px 20px !important; }
  .section-title { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; }

  /* Two-col layout: stack */
  .two-col   { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Card grid: single column */
  .card-grid { grid-template-columns: 1fr !important; }

  /* Nav: tighten side padding (nav-links already display:none via inline CSS) */
  .nav-main  { padding: 0 20px !important; }

  /* Footer */
  .footer-inner  { padding: 44px 20px 24px !important; }
  .footer-grid   { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

@media (max-width: 430px) {
  .page-hero   { padding: 56px 16px 40px !important; }
  .inner       { padding: 40px 16px !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
}