/* ================= KEENON brand & model pages ================= */
html[lang="en"] [data-l="th"], html[lang="th"] [data-l="en"] { display: none; }
.pp main { overflow-x: clip; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--dim); margin-bottom: 34px; }
.crumbs a { color: var(--muted); } .crumbs a:hover { color: #fff; }
.crumbs i { font-size: 11px; }
.crumbs span:last-child { color: var(--text); }

/* ---- model hero ---- */
.pd-hero { padding: 40px 0 70px; background: radial-gradient(900px 420px at 80% 30%, rgba(61,139,255,.16), transparent 70%); }
.pd-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.pd-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 30px; background: var(--accent-soft); color: #cfe0ff; font-size: 13.5px; font-weight: 500; }
.pd-chip i { color: var(--accent); font-size: 16px; }
.pd-chip b { position: static; margin-left: 4px; }
.pd-copy h1 { margin: 20px 0 16px; font-size: clamp(2.3rem, 5vw, 3.9rem); line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
.pd-tag { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 540px; }
.pd-acts { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 30px; }
.pd-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; color: var(--muted); }
.pd-perks li { display: flex; align-items: center; gap: 7px; }
.pd-perks i { color: var(--accent); font-size: 17px; }
.pd-shot { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-height: 560px; border-radius: 28px; background: var(--studio); box-shadow: var(--shadow-lg); overflow: hidden; }
.pd-shot::after { content: ''; position: absolute; inset: auto 18% 9% 18%; height: 22px; border-radius: 50%; background: rgba(15,23,42,.18); filter: blur(12px); }
/* Never stretch the cutout beyond its real pixel size (that was what made small thumbnails look blurry). */
.pd-shot img { position: absolute; inset: 0; margin: auto; z-index: 1; width: auto; height: auto; max-width: 78%; max-height: min(78%, var(--nat-h, 9999px)); object-fit: contain; animation: floaty 6s ease-in-out infinite; }
.pd-shot img.opaque { mix-blend-mode: multiply; }
@keyframes floaty { 50% { transform: translate3d(0, -8px, 0); } }
.pd-banner { padding-bottom: 30px; }
.pd-banner img, .pd-banner video { width: 100%; border-radius: 24px; box-shadow: var(--shadow-lg); }
.pd-banner .container > * + * { margin-top: 20px; }

/* ---- generic sections ---- */
.pp-sec { padding: 60px 0; }
.pp-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.pp-head h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.35; }
.pp-head p { margin-top: 14px; color: var(--muted); font-size: 1.04rem; }
.pp-sec .kicker { margin-bottom: 12px; }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }

.pp-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.hl { padding: 26px 24px; border-radius: var(--radius); background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); }
.hl .n { display: inline-block; font: 600 13px/1 var(--display); color: var(--accent); background: var(--accent-soft); padding: 6px 9px; border-radius: 8px; margin-bottom: 16px; }
.hl h3 { font-size: 1.12rem; line-height: 1.45; margin-bottom: 8px; }
.hl p { color: var(--muted); font-size: .95rem; }

.pp-wide .media { border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); background: var(--surface); }
.pp-wide.has-text { display: grid; grid-template-columns: 1.4fr 1fr; gap: 44px; align-items: center; }
.pp-wide .cap h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.4; margin-bottom: 14px; }
.pp-wide .cap p { color: var(--muted); }

.pp-cards { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
.pp-cards.n3 { grid-template-columns: repeat(3, 1fr); }
.pp-cards.n4 { grid-template-columns: repeat(2, 1fr); }
.pp-cards .card { border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); transition: transform .3s var(--ease), border-color .3s; }
.pp-cards .card:hover { transform: translateY(-4px); border-color: var(--line-2); }
.pp-cards .media { aspect-ratio: 16 / 10; background: #0d1422; }
.pp-cards .body { padding: 20px 22px 24px; }
.pp-cards h3 { font-size: 1.1rem; line-height: 1.45; }
.pp-cards p { margin-top: 6px; color: var(--muted); font-size: .95rem; }

.pp-rows { display: grid; gap: 70px; }
.pp-rows .row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.pp-rows .row:nth-child(even) .media { order: 2; }
.pp-rows .media { border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; background: var(--surface); }
.pp-rows h3 { font-size: clamp(1.35rem, 2.3vw, 1.85rem); line-height: 1.4; margin-bottom: 14px; }
.pp-rows p { color: var(--muted); }

.pp-gallery { display: grid; grid-template-columns: 1.5fr 1fr; grid-auto-rows: 240px; gap: 16px; }
.pp-gallery figure { margin: 0; border-radius: 18px; overflow: hidden; background: var(--surface); }
.pp-gallery figure.big { grid-row: span 2; }
.pp-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pp-gallery figure:hover img { transform: scale(1.04); }
.pp-gallery figure:only-child { grid-column: 1 / -1; }

.pp-variants { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.pp-variants figure { margin: 0; text-align: center; }
.pp-variants .pic { aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--studio); display: grid; place-items: center; }
.pp-variants .pic img { width: 100%; height: 100%; object-fit: contain; }
.pp-variants figcaption { margin-top: 10px; font-size: 14.5px; color: var(--muted); }

.pp-specs { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; padding: 34px; border-radius: 26px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); }
.pp-specs .pic { border-radius: 20px; background: var(--studio); display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; }
.pp-specs .pic img { width: 100%; height: 100%; object-fit: contain; }
.pp-specs dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.pp-specs dl div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.pp-specs dt { font-size: 13.5px; color: var(--dim); margin-bottom: 4px; }
.pp-specs dd { margin: 0; font-weight: 500; font-size: 15.5px; line-height: 1.5; }
.pp-note { margin-top: 18px; font-size: 12.5px; color: var(--dim); line-height: 1.6; }
.pp-note.center { text-align: center; font-size: 15px; color: var(--muted); }

.pp-cta { padding: 60px 0; }
.pp-cta-card { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 44px 48px; border-radius: 28px; background: radial-gradient(600px 300px at 0% 0%, rgba(61,139,255,.28), transparent 70%), linear-gradient(135deg, #14203a, #0f1628); border: 1px solid rgba(61,139,255,.28); }
.pp-cta-card h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 10px; }
.pp-cta-card p { color: var(--muted); max-width: 560px; }
.pp-cta-card .acts { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }
.pp-source { padding-bottom: 50px; font-size: 12.5px; color: var(--dim); }
.pp-source a { text-decoration: underline; }

/* ---- brand page ---- */
.kb-hero { padding: 40px 0 60px; background: radial-gradient(900px 460px at 85% 20%, rgba(61,139,255,.18), transparent 70%); }
.kb-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.kb-logo { background: #fff; padding: 12px 20px; border-radius: 14px; width: 220px; height: auto; }
.kb-hero h1 { margin: 26px 0 18px; font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.3; font-weight: 600; }
.kb-hero p { color: var(--muted); font-size: 1.08rem; max-width: 600px; }
.kb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.kb-stats a { display: grid; gap: 4px; padding: 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); transition: border-color .25s, transform .25s var(--ease); }
.kb-stats a:hover { border-color: var(--accent); transform: translateY(-3px); }
.kb-stats i { font-size: 24px; color: var(--accent); }
.kb-stats strong { font: 600 1.9rem/1.1 var(--display); }
.kb-stats span { font-size: 13.5px; color: var(--muted); }
.kb-tabs { position: sticky; top: var(--header-h); z-index: 40; background: rgba(11,15,25,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-block: 1px solid var(--line); }
.kb-tabs .container { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 10px; padding-bottom: 10px; }
.kb-tabs a { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 8px 16px; border-radius: 30px; font-size: 14px; color: var(--muted); border: 1px solid var(--line); }
.kb-tabs a:hover { color: #fff; border-color: var(--accent); }
.kb-tabs i { color: var(--accent); }
.kb-cat { padding: 56px 0 10px; scroll-margin-top: calc(var(--header-h) + 70px); }
.kb-cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.kb-cat-head h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.kb-cat-head h2 i { color: var(--accent); }
.kb-cat-head span, .kb-cat-head a { color: var(--muted); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.kb-cat-head a:hover { color: #fff; }
.km-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.km-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.km-card:hover { transform: translateY(-5px); border-color: rgba(61,139,255,.5); box-shadow: var(--shadow-lg); }
.km-img { position: relative; aspect-ratio: 1; background: var(--studio); display: grid; place-items: center; }
.km-img img { width: 78%; height: 78%; object-fit: contain; transition: transform .4s var(--ease); }
.km-card:hover .km-img img { transform: scale(1.06); }
.km-badge { top: 12px; right: 12px; }
.km-body { display: grid; gap: 4px; padding: 16px 18px 18px; }
.km-body strong { font: 600 1.2rem/1.3 var(--display); }
.km-body span { font-size: 14px; color: var(--muted); min-height: 2.8em; }
.km-body em { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.km-card:hover .km-body em i { transform: translateX(3px); }
.km-body em i { transition: transform .25s var(--ease); }

@media (max-width: 980px) {
  .pd-hero-grid, .kb-hero-grid, .pp-wide.has-text, .pp-rows .row, .pp-specs { grid-template-columns: 1fr; gap: 30px; }
  .pd-shot { max-width: 480px; width: 100%; margin: 0 auto; order: -1; }
  .pp-rows { gap: 46px; }
  .pp-rows .row:nth-child(even) .media { order: 0; }
  .pp-cards.n3 { grid-template-columns: repeat(2, 1fr); }
  .pp-specs .pic { max-width: 360px; width: 100%; margin: 0 auto; }
  .pp-cta-card { flex-direction: column; align-items: flex-start; padding: 32px 26px; }
}
@media (max-width: 640px) {
  .pd-hero, .kb-hero { padding: 24px 0 40px; }
  .crumbs { margin-bottom: 22px; font-size: 12.5px; }
  .pp-sec { padding: 40px 0; }
  .pp-head { margin-bottom: 26px; }
  .pp-cards, .pp-cards.n3, .pp-cards.n4 { grid-template-columns: 1fr; }
  .pp-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 10px; }
  .pp-gallery figure.big { grid-column: 1 / -1; grid-row: span 1; }
  .pp-specs { padding: 20px; }
  .pp-specs dl { grid-template-columns: 1fr; }
  .pp-variants { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .km-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .km-body { padding: 12px 12px 14px; }
  .km-body strong { font-size: 1.05rem; }
  .km-body span { font-size: 12.5px; }
  .pd-acts .btn { flex: 1; }
  .pp-cta-card .acts, .pp-cta-card .btn { width: 100%; }
  .pd-banner img, .pd-banner video { border-radius: 16px; }
}

/* floor-type chips (Sparkoz) + brand label on cross-brand cards */
.pp-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.pp-chips .chip { display: grid; gap: 4px; padding: 18px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.pp-chips strong { font: 500 1.02rem/1.35 var(--display); }
.pp-chips span { font-size: 13px; color: var(--muted); }
.km-body small { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--accent); }
.pp-wide video { width: 100%; display: block; }
@media (max-width: 640px) { .pp-chips { grid-template-columns: 1fr 1fr; gap: 8px; } .pp-chips .chip { padding: 14px; } }
/* infographics (white background) are shown whole instead of cropped */
.media img.contain { object-fit: contain; background: #fff; }

/* showreel: silent teaser + play button -> full video */
.pp-film { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #000; box-shadow: var(--shadow-lg); }
.pp-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-film video.full { object-fit: contain; background: #000; }
.film-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; border: 0; cursor: pointer; color: #fff; background: radial-gradient(circle at center, rgba(11,15,25,.15), rgba(11,15,25,.55)); font: 600 16px/1.3 var(--font); }
.film-play .ring { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--accent-strong); box-shadow: 0 0 0 10px rgba(61,139,255,.22), var(--glow); font-size: 34px; transition: transform .3s var(--ease), box-shadow .3s; }
.film-play .ring i { margin-left: 4px; }
.film-play:hover .ring { transform: scale(1.08); box-shadow: 0 0 0 16px rgba(61,139,255,.18), var(--glow); }
.film-play .lbl { padding: 8px 16px; border-radius: 30px; background: rgba(11,15,25,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.film-play:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
@media (max-width: 640px) { .pp-film { border-radius: 16px; } .film-play .ring { width: 64px; height: 64px; font-size: 26px; } .film-play .lbl { font-size: 14px; } }
/* key figures row (SEER) */
.pp-stats { display: grid; grid-template-columns: repeat(6, 1fr); border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: var(--line); gap: 1px; }
.pp-stats div { display: grid; gap: 6px; align-content: center; padding: 26px 18px; text-align: center; background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.pp-stats strong { font: 600 clamp(1.35rem, 2.2vw, 1.9rem)/1.1 var(--display); color: #fff; }
.pp-stats span { font-size: 13px; color: var(--muted); line-height: 1.4; }
@media (max-width: 980px) { .pp-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .pp-stats { grid-template-columns: repeat(2, 1fr); } .pp-stats div { padding: 18px 10px; } }
/* hero photo (no cutout available): fill the panel */
.pd-shot img.cover { inset: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; animation: none; }
.pd-shot:has(img.cover)::after { display: none; }

/* series comparison table */
.pp-compare { overflow-x: auto; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.pp-compare table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14.5px; }
.pp-compare th, .pp-compare td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.pp-compare thead th { font: 600 15px/1.3 var(--display); color: #fff; background: rgba(61,139,255,.12); }
.pp-compare tbody th { text-align: left; font-weight: 500; color: var(--muted); white-space: nowrap; }
.pp-compare tbody tr:last-child th, .pp-compare tbody tr:last-child td { border-bottom: 0; }
.pp-compare td { color: var(--text); }
.pp-stack { display: grid; gap: 20px; }
.pp-stack img { width: 100%; border-radius: 20px; background: #fff; }

/* robot-type photos (replace line icons) */
.kb-stats .cat-ph { width: 48px; height: 48px; border-radius: 10px; }
.kb-tabs .cat-ph { width: 24px; height: 24px; border-radius: 6px; padding: 1px; }
.kb-cat-head h2 .cat-ph { width: 44px; height: 44px; border-radius: 10px; }

/* prices */
.km-body .price-tag { margin: 8px 0 4px; }
.pd-price { position: relative; display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 4px; }
.pd-price > div { min-width: 160px; padding: 12px 16px; border-radius: 14px; background: var(--accent-soft); border: 1px solid rgba(61, 139, 255, .25); }
.pd-price small { display: block; font-size: 12.5px; color: var(--muted); }
.pd-price strong { font: 600 1.35rem/1.3 var(--display); color: var(--text); }
.pd-price s { display: block; font-size: 13px; color: var(--dim); }
.pd-price .sale-pill { top: -10px; left: 12px; right: auto; }

/* card: only the details link navigates */
.km-card:hover { transform: none; }
.km-card:hover .km-img img { transform: none; }
.km-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.km-more:hover .ic { transform: translateX(3px); }
.km-more .ic { transition: transform .25s var(--ease); }

/* image frames: the whole picture always fits (percent heights don't resolve in a grid cell) */
.pp-variants .pic, .pp-specs .pic { position: relative; display: block; }
.pp-variants .pic img, .pp-specs .pic img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; }

/* 3. brand-page cards: every card the same shape, whole robot always visible */
.km-grid { align-items: stretch; }
.km-card { height: 100%; }
.km-img { display: block; }
.km-img img { position: absolute; inset: 11%; width: 78%; height: 78%; max-width: none; object-fit: contain; }
.km-body { display: flex; flex-direction: column; flex: 1; }
.km-body > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.km-body .price-tag { margin-top: auto; }
/* 6. details button */
.km-more { align-self: flex-start; margin-top: 12px; padding: 8px 14px; border-radius: 10px; background: var(--accent-strong); color: #fff !important; box-shadow: 0 6px 16px -8px rgba(42, 108, 240, .8); }
.km-more .ic { color: #fff; }
.km-more:hover { background: var(--accent); }
/* 4. small labels */
.km-body small { font-size: 13px; }

.km-grid { grid-auto-rows: 1fr; }

/* section headings on brand pages: the "N models" style must not shrink the heading text */
.kb-cat-head h2, .kb-cat-head h2 span { font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--text); font-weight: 600; letter-spacing: 0; text-transform: none; }
.kb-cat-head > span { font-size: 15px; }
/* details button: text centred */
a.km-more { display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.2; font-size: 14px; font-weight: 600; }
a.km-more span { font-size: 14px !important; color: #fff !important; min-height: 0 !important; -webkit-line-clamp: unset !important; display: inline !important; }

/* brand/product pages: "see all <brand> models" as a button */
.kb-cat-head a { padding: 9px 16px; border-radius: 999px; background: var(--accent-soft); border: 1px solid rgba(61, 139, 255, .45); color: var(--accent); font-weight: 600; transition: background .2s, color .2s; }
.kb-cat-head a:hover { background: var(--accent-strong); color: #fff; }

.kb-logo-text { display: inline-block; width: auto; padding: 14px 22px; font: 700 1.6rem/1 var(--display); letter-spacing: .08em; color: #0B0F19; }