/* ============================================================
   UNIGREEN — Package detail pages (Solar · MINI · EV HUB)
   Loaded AFTER colors_and_type.css and styles.css
   Reuses hero/stats/marquee/reveal language from styles.css
   ============================================================ */

/* ---------- page sub-nav: back link ---------- */
.nav .back{ display:inline-flex; align-items:center; gap:.5em; font-weight:var(--w-semibold); font-size:.95rem; color:rgba(255,255,255,.82); }
.nav .back svg{ width:1.05em; height:1.05em; }
.nav .back:hover{ color:#fff; }
.nav.scrolled .back{ color:var(--fg-2); }
.nav.scrolled .back:hover{ color:var(--navy); }

/* hero doc-label row (brochure / proposal meta) */
.hero-doc{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:1.6em; align-items:center; }
.hero-doc .dl{ display:flex; flex-direction:column; gap:2px; }
.hero-doc .dl .k{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:#8587ad; font-weight:var(--w-bold); }
.hero-doc .dl .v{ font-size:1rem; font-weight:var(--w-extra); color:#fff; }
.hero-doc .vline{ width:1px; align-self:stretch; background:var(--ink-line); }

/* hero key-facts (under sub) */
.hero-facts{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2em; }
.hero-fact{ display:flex; align-items:baseline; gap:.5em; padding:.7em 1.1em; border-radius:var(--r-pill);
  background:rgba(255,255,255,.05); border:1px solid var(--ink-line); }
.hero-fact b{ font-size:1.15rem; font-weight:var(--w-black); color:var(--mint); letter-spacing:-.01em; }
.hero-fact span{ font-size:.92rem; color:#c3c5e2; }

/* ============================================================
   PACKAGE / OPTION CARDS (numbered, editorial, light)
   ============================================================ */
.pkg{ background:var(--bg); }
.pkg-grid{ display:grid; gap:clamp(16px,1.8vw,22px); }
.pkg-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.pkg-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.pcard{ position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:clamp(22px,2vw,30px); overflow:hidden; box-shadow:var(--sh-1);
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur); }
.pcard::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--grad-leaf); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-slow) var(--ease-out); }
.pcard:hover{ transform:translateY(-8px); box-shadow:var(--sh-3); border-color:var(--border-strong); }
.pcard:hover::before{ transform:scaleX(1); }
.pcard.featured{ border-color:var(--mint-200); box-shadow:0 18px 50px rgba(98,237,170,.16); }
.pcard.featured::after{ content:"แนะนำ"; position:absolute; top:16px; right:16px; font-size:.7rem; font-weight:var(--w-bold);
  letter-spacing:.06em; color:var(--ink); background:var(--mint); padding:.34em .7em; border-radius:var(--r-pill); }
.pcard .opt{ display:block; line-height:1.4; min-height:2.8em; padding-right:8px; font-size:.74rem; font-weight:var(--w-bold); letter-spacing:.05em; text-transform:uppercase; color:var(--fg-3); }
.pcard.featured .opt{ padding-right:64px; }
.pcard .big-kw{ display:flex; align-items:baseline; gap:.3em; margin:.3em 0 .1em; }
.pcard .big-kw .n{ font-size:clamp(2.6rem,1.8rem + 2.2vw,3.6rem); font-weight:var(--w-black); line-height:.92; letter-spacing:-.03em; color:var(--navy); }
.pcard .big-kw .u{ font-size:1.05rem; font-weight:var(--w-extra); color:var(--mint-600); }
.pcard .meta{ font-size:.9rem; color:var(--fg-2); line-height:1.5; min-height:2.7em; }
.pcard .meta b{ color:var(--navy); font-weight:var(--w-bold); }
.pcard .price-row{ margin-top:18px; padding-top:18px; border-top:1px solid var(--border); }
.pcard .price-row .cap{ font-size:.76rem; color:var(--fg-3); }
.pcard .price-row .price{ font-size:1.6rem; font-weight:var(--w-black); color:var(--navy); letter-spacing:-.02em; margin-top:2px; }
.pcard .price-row .perkw{ font-size:.82rem; color:var(--fg-3); margin-top:3px; }
.pcard .save{ margin-top:14px; display:flex; align-items:center; gap:.5em; font-size:.86rem; }
.pcard .save .pill{ display:inline-flex; align-items:center; gap:.4em; font-weight:var(--w-bold); color:var(--mint-600);
  background:var(--mint-050); border:1px solid var(--mint-200); padding:.32em .7em; border-radius:var(--r-pill); }
.pcard .save .pill svg{ width:.95em; height:.95em; }
.pcard .payback{ margin-top:auto; padding-top:16px; font-size:.84rem; color:var(--fg-2); }
.pcard .payback b{ color:var(--navy); font-weight:var(--w-black); }

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.cmp{ background:var(--bg-subtle); }
.cmp-wrap{ overflow-x:auto; border-radius:var(--r-xl); border:1px solid var(--border); background:var(--surface); box-shadow:var(--sh-1); }
table.cmp-table{ width:100%; border-collapse:collapse; min-width:680px; }
.cmp-table th, .cmp-table td{ padding:16px 20px; text-align:left; font-size:.95rem; }
.cmp-table thead th{ background:var(--navy); color:#fff; font-weight:var(--w-bold); position:sticky; top:0; }
.cmp-table thead th:first-child{ border-top-left-radius:0; }
.cmp-table thead th .sub{ display:block; font-size:.78rem; font-weight:var(--w-semibold); color:var(--mint); margin-top:2px; }
.cmp-table tbody tr:nth-child(even) td{ background:var(--surface-2); }
.cmp-table tbody td:first-child{ font-weight:var(--w-semibold); color:var(--fg-2); }
.cmp-table td{ color:var(--navy); border-top:1px solid var(--border); }
.cmp-table tr.group td{ background:var(--navy-050,rgba(28,27,69,.05)); color:var(--fg-2); font-size:.78rem;
  font-weight:var(--w-bold); letter-spacing:.12em; text-transform:uppercase; }
.cmp-table td b, .cmp-table td strong{ font-weight:var(--w-black); }
.cmp-table .hl{ color:var(--mint-600); font-weight:var(--w-black); }

/* ============================================================
   SPEC GRID (per-option spec cards) — dark
   ============================================================ */
.specs{ position:relative; overflow:hidden; }
.specs .eco-bg{ position:absolute; inset:0; z-index:0; opacity:.6;
  background:radial-gradient(55% 50% at 20% 10%, rgba(8,201,252,.14), transparent 60%),
             radial-gradient(50% 50% at 85% 90%, rgba(172,101,255,.12), transparent 60%); }
.specs .wrap{ position:relative; z-index:1; }
.spec-grid{ display:grid; gap:clamp(16px,2vw,24px); grid-template-columns:repeat(3,1fr); }
.spec-grid.g4{ grid-template-columns:repeat(4,1fr); }

/* charge-head allocation */
.alloc-rows{ display:grid; gap:9px; margin:4px 0 0; }
.alloc-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.alloc-row .pt{ font-size:.9rem; font-weight:var(--w-bold); color:var(--navy); white-space:nowrap; }
.alloc-row .badges{ display:flex; gap:5px; flex-wrap:nowrap; justify-content:flex-end; }
.cbadge{ font-size:.7rem; font-weight:var(--w-bold); color:#fff; background:#2f9e6b;
  border:1px solid rgba(98,237,170,.5); padding:.22em .48em; border-radius:var(--r-sm); white-space:nowrap; }
.cbadge.air{ color:#fff; background:#1b86c2; border-color:rgba(8,201,252,.5); }
.cbadge.liquid{ color:#fff; background:#6843bf; border-color:rgba(172,101,255,.55); }
.spec-card{ background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--ink-line); border-radius:var(--r-xl); padding:clamp(22px,2.4vw,30px);
  display:flex; flex-direction:column;
  transition:transform var(--dur) var(--ease-out), border-color var(--dur); }
.spec-card:hover{ transform:translateY(-6px); border-color:rgba(98,237,170,.4); }
.spec-card .h{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--ink-line); }
.spec-card .h .nm{ font-size:.78rem; font-weight:var(--w-bold); letter-spacing:.12em; text-transform:uppercase; color:#8587ad; }
.spec-card .h .kw{ font-size:1.7rem; font-weight:var(--w-black); color:#fff; letter-spacing:-.02em; }
.spec-card .h .kw .u{ font-size:.5em; color:var(--mint); margin-left:.28em; }
.spec-card dl{ margin:0 0 18px; }
.spec-card dt{ font-size:.72rem; font-weight:var(--w-bold); letter-spacing:.05em; text-transform:uppercase; color:#8587ad;
  margin-top:13px; padding-top:13px; border-top:1px solid var(--ink-line); }
.spec-card dt:first-of-type{ margin-top:0; padding-top:0; border-top:0; }
.spec-card dd{ margin:3px 0 0; font-size:1rem; font-weight:var(--w-bold); color:#fff; line-height:1.3; }
.spec-card .tag{ margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:.4em; font-size:.82rem; font-weight:var(--w-bold);
  color:var(--mint); background:rgba(98,237,170,.1); border:1px solid rgba(98,237,170,.25); padding:.4em .8em; border-radius:var(--r-pill); }

/* ============================================================
   SERVICES + WARRANTY — dark
   ============================================================ */
.sw-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,3vw,48px); align-items:start; }
.svc-list{ display:grid; gap:12px; }
.svc{ display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--r-lg);
  background:rgba(255,255,255,.04); border:1px solid var(--ink-line); transition:border-color var(--dur), background var(--dur); }
.svc:hover{ border-color:rgba(98,237,170,.35); background:rgba(255,255,255,.06); }
.svc .ck{ width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center;
  background:rgba(98,237,170,.14); color:var(--mint); border:1px solid rgba(98,237,170,.3); }
.svc .ck svg{ width:18px; height:18px; }
.svc.free .ck{ background:rgba(172,101,255,.16); color:var(--purple); border-color:rgba(172,101,255,.32); }
.svc p{ margin:0; font-size:.98rem; color:#dfe2f3; }
.svc p b{ color:#fff; font-weight:var(--w-bold); }
.warranty{ display:grid; gap:14px; }
.wcard{ display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:var(--r-lg);
  background:rgba(255,255,255,.04); border:1px solid var(--ink-line); }
.wcard .wn{ font-size:clamp(2rem,1.4rem + 1.4vw,2.6rem); font-weight:var(--w-black); line-height:1; color:#fff; letter-spacing:-.03em; min-width:2.4ch; }
.wcard .wn .u{ font-size:.4em; color:var(--mint); margin-left:.12em; }
.wcard .wl{ font-size:.96rem; color:#aeb0d2; line-height:1.4; }

/* ---------- notes ---------- */
.notes{ background:var(--bg); }
.notes ul{ margin:0; padding:0; list-style:none; display:grid; gap:12px; max-width:80ch; }
.notes li{ position:relative; padding-left:26px; font-size:.94rem; color:var(--fg-2); line-height:1.6; }
.notes li::before{ content:"—"; position:absolute; left:0; color:var(--mint-600); font-weight:var(--w-bold); }
.notes li b{ color:var(--navy); font-weight:var(--w-bold); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1040px){
  .pkg-grid.cols-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:920px){
  .pkg-grid.cols-3, .spec-grid, .spec-grid.g4{ grid-template-columns:1fr; }
  .sw-grid{ grid-template-columns:1fr; }
}
@media (max-width:1180px) and (min-width:921px){
  .spec-grid.g4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .pkg-grid.cols-4{ grid-template-columns:1fr; }
  .hero-doc .vline{ display:none; }
}