/* === products.css — Products page (ICOM banner + tabs + drill-down grid) === */
/* Mirrors icomjapan.com/lineup: 460px banner, full-width red-underline tabs,
   flat subcategory tiles, and a product grid that opens the shared detail modal. */

/* The animated featured banner (.pbanner*) is shared — see components.css. */

/* ============================================================
   FULL-WIDTH CATEGORY TABS (text only, red underline for active)
   ============================================================ */
.ptabs{ border-bottom:1px solid var(--line); background:#fff; }
.ptabs__inner{ max-width:var(--container); margin:0 auto; display:flex; }
.ptab{ flex:1; padding:1.15rem .5rem; font-size:.98rem; font-weight:500; color:var(--ink); background:#F5F5F5; position:relative; transition:color var(--t), background var(--t); white-space:nowrap; border-right:1px solid var(--line); }
.ptab:last-child{ border-right:none; }
.ptab::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--red); transform:scaleX(0); transition:transform var(--t); }
.ptab:hover{ color:var(--red); background:#fff; }
.ptab.active{ color:var(--red); background:#fff; }
.ptab.active::after{ transform:scaleX(1); }
@media (max-width:620px){
  .ptabs__inner{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .ptab{ flex:0 0 auto; padding:1rem 1.1rem; font-size:.9rem; }
}

/* ============================================================
   VIEW WRAPPER + section heading
   ============================================================ */
.pview-head{ margin:0 0 1.8rem; }
.pview-head .eyebrow{ margin-bottom:.4rem; }
.pview-head h2{ font-size:clamp(1.4rem,3vw,1.9rem); font-weight:500; }
.pview-head p{ color:var(--ink-soft); margin-top:.5rem; font-size:.95rem; max-width:46rem; }

/* ============================================================
   SUBCATEGORY GRID (flat ICOM tiles — 4 / 2 / 1)
   ============================================================ */
.subgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
@media (max-width:980px){ .subgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .subgrid{ grid-template-columns:1fr; } }
.subcard{ display:flex; flex-direction:column; align-items:center; text-align:center; background:var(--gray); border:1px solid transparent; border-radius:var(--r); padding:1.1rem; cursor:pointer; transition:background var(--t), box-shadow var(--t), transform var(--t); }
.subcard:hover{ background:#fff; box-shadow:var(--sh-2); transform:translateY(-3px); border-color:var(--line); }
.subcard__media{ width:100%; aspect-ratio:1/1; background:#fff; border-radius:var(--r); display:flex; align-items:center; justify-content:center; padding:1rem; margin-bottom:.9rem; }
.subcard__media img{ max-width:100%; max-height:100%; object-fit:contain; transition:transform var(--t); }
.subcard:hover .subcard__media img{ transform:scale(1.05); }
.subcard__name{ display:inline-flex; align-items:center; gap:.35rem; font-size:1rem; font-weight:500; color:var(--ink); }
.subcard__arrow{ display:inline-flex; color:var(--red); transition:transform var(--t); }
.subcard:hover .subcard__arrow{ transform:translateX(3px); }
.subcard__count{ font-family:var(--mono); font-size:.7rem; color:var(--ink-faint); margin-top:.25rem; }
.subcard.is-empty .subcard__media img{ opacity:.55; filter:grayscale(.35); }
.subcard.is-empty .subcard__count{ color:var(--red); }

/* ============================================================
   PRODUCT LIST (breadcrumb + back + grid 4 cols)
   ============================================================ */
.plist-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin-bottom:1.6rem; }
.plist-crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.82rem; color:var(--ink-faint); }
.plist-crumb a{ color:var(--ink-soft); transition:color var(--t); }
.plist-crumb a:hover{ color:var(--red); }
.plist-crumb b{ color:var(--red); font-weight:700; }
.plist-crumb .sep{ color:var(--line); }
.plist-back{ display:inline-flex; align-items:center; gap:.45rem; font-size:.85rem; font-weight:600; color:var(--ink); border:1px solid var(--line); background:#fff; border-radius:var(--r); padding:.5rem 1rem; transition:all var(--t); }
.plist-back:hover{ border-color:var(--red); color:var(--red); }
.plist-back svg{ transition:transform var(--t); }
.plist-back:hover svg{ transform:translateX(-3px); }

.pgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
@media (max-width:1080px){ .pgrid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:860px){ .pgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pgrid{ grid-template-columns:1fr; } }
.empty-state{ text-align:center; padding:3rem 1rem; color:var(--ink-soft); grid-column:1/-1; }

/* Top-2 highlights on each product card */
.pcard__hl{ display:grid; gap:.28rem; margin-top:.6rem; }
.pcard__hl li{ display:flex; gap:.45rem; font-size:.76rem; color:var(--ink-soft); line-height:1.35; }
.pcard__hl li::before{ content:""; width:.3rem; height:.3rem; margin-top:.5rem; border-radius:50%; background:var(--red); flex-shrink:0; }