/* KeebPilot Product Detail V5.9.1 Frozen — frozen master stylesheet (5.9.1-frozen).
Template Contract: product-detail-frozen-v1.1 | Image Slot Contract: V1.2 | Data Schema: 1.3.
Do not change structural/visual rules without explicit approval; bug fixes bump patch version. */
body.kbpv58-active { background: #f6f4f1 !important; }
:root {--kp-bg: #f6f4f1;
--kp-surface: #ffffff;
--kp-surface-soft: #fbfaf8;
--kp-graphite: #0b1020;
--kp-ink: #171717;
--kp-muted: #68645f;
--kp-line: #e7e1d8;
--kp-line-strong: #d8cfc3;
--kp-copper: #c2410c;
--kp-copper-deep: #9a3412;
--kp-orange: #f97316;
--kp-orange-soft: #fff4e8;
--kp-success-soft: #eef7f1;
--kp-success: #2f6b49;
--kp-radius-sm: 10px;
--kp-radius: 14px;
--kp-radius-lg: 28px;
--kp-shadow: 0 18px 55px rgba(37, 26, 14, .07);
--kp-shadow-soft: 0 8px 26px rgba(37, 26, 14, .05);
--kp-section-gap: 96px;
--kp-heading-gap: 20px;
--kp-content-gap: 32px;
--kp-card-padding: 32px;
--kp-block-gap: 24px;
--kp-border: 1px solid var(--kp-line);
--kp-shadow-card: 0 4px 20px rgba(37, 26, 14, .04);
--kp-container: 1320px;
--kp-serif: Georgia, "Times New Roman", serif;
--kp-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* Sticky anchor-nav offsets (measured at runtime by JS into --kp-visible-header-height) */
--kp-visible-header-height: 0px;
--kp-admin-bar-height: 0px;}
* {box-sizing: border-box;}
html {scroll-behavior: smooth;}
#fit, #overview, #specs, #sound-test, #hero-sound-test, #compare, #faq, #bottom-cta, #kp-variant {scroll-margin-top: calc(var(--kp-visible-header-height) + var(--kp-admin-bar-height) + 88px);}
body {margin: 0;
color: var(--kp-ink);
background: var(--kp-bg);
font-family: var(--kp-sans);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;}
img, svg {display: block; max-width: 100%;}
button, input {font: inherit;}
a {color: inherit; text-decoration: none;}
.kp-wrap {width: min(calc(100% - 56px), var(--kp-container)); margin: 0 auto;}
/* §二 全宽突破主题容器：让 .kp-product-page 脱离主题 .content-area / .site-main 的 max-width 限制，
配合 .kp-wrap 的 1320 上限，使桌面内容接近 1320 而非被裁切到 ~1000-1100。
仅用负 margin（不依赖 100vw），避免滚动条引发的横向溢出。 */
.kp-product-page {margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);}
.kp-section {padding: 64px 0;}
.kp-section--tight {padding: 58px 0;}
.kp-section--white {background: var(--kp-surface);}
.kp-section--soft {background: #f1ede7;}
.kp-section--dark {background: var(--kp-graphite); color: #fff;}
.kp-eyebrow {display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 16px;
color: var(--kp-copper);
font-size: 12px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;}
.kp-eyebrow::before {content: "";
width: 26px;
height: 1px;
background: currentColor;}
.kp-section-title {margin: 0;
font-family: var(--kp-serif);
font-size: clamp(32px, 3vw, 48px);
line-height: 1.08;
letter-spacing: -.035em;
font-weight: 500;}
.kp-section-intro {max-width: 720px;
margin: 18px 0 0;
color: var(--kp-muted);
font-size: 17px;}
.kp-section-heading {display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 28px;
margin-bottom: 24px;}
.kp-text-link {display: inline-flex;
align-items: center;
gap: 8px;
color: var(--kp-copper);
font-weight: 750;
font-size: 14px;
white-space: nowrap;}
.kp-text-link:hover {color: var(--kp-copper-deep);}
/* Header */
.kp-btn {display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 46px;
padding: 0 20px;
border-radius: 11px;
border: 1px solid transparent;
font-weight: 800;
cursor: pointer;
transition: transform .18s ease, background .18s ease, color .18s ease, border .18s ease;}
.kp-btn:hover {transform: translateY(-1px);}
.kp-btn--primary {background: var(--kp-copper); color: #fff;}
.kp-btn--primary:hover {background: var(--kp-copper-deep);}
/* §五 B Draft Preview CTA：明确禁用态（amber/grey-orange），与可购买态铜色区分 */
.kp-btn--primary:disabled,
.kp-btn--primary[disabled] {background: #d8a878; color: #fff; cursor: not-allowed; transform: none; box-shadow: none; opacity: 1;}
.kp-btn--primary:disabled:hover,
.kp-btn--primary[disabled]:hover {background: #d8a878; transform: none;}
.kp-offer-card[data-state="available_direct_preview"] .kp-btn--primary {background: #d8a878; color: #fff; cursor: not-allowed;}
.kp-offer-card[data-state="available_direct_preview"] .kp-btn--primary:hover {background: #d8a878; transform: none;}
.kp-btn--secondary {background: #fff; border-color: var(--kp-line-strong); color: var(--kp-ink);}
.kp-btn--secondary:hover {background: var(--kp-orange-soft); border-color: #efc9b4;}
.kp-btn--dark {background: var(--kp-graphite); color: #fff;}
.kp-btn--ghost {border-color: rgba(255,255,255,.26); color: #fff; background: transparent;}
.kp-breadcrumb {display: flex;
align-items: center;
gap: 8px;
padding: 22px 0 18px;
font-size: 12px;
color: #7d7770;
flex-wrap: wrap;}
.kp-breadcrumb a:hover {color: var(--kp-copper);}
.kp-breadcrumb span[aria-hidden] {opacity: .55;}
/* Hero — two-column gallery + product information */
.kp-product-hero {padding: 0 0 64px;}
.kp-product-hero__grid {display: grid;
grid-template-columns: minmax(0, .92fr) minmax(400px, 1.08fr);
gap: 40px;
align-items: start;}
.kp-gallery, .kp-product-info, .kp-product-summary, .kp-offer-card {min-width: 0;}
.kp-gallery {display: flex;
flex-direction: column;
gap: 14px;
align-self: start;
position: sticky;
top: 104px;}
.kp-gallery__thumbs {display: flex;
flex-wrap: nowrap;
gap: 12px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 4px;}
.kp-gallery__thumbs::-webkit-scrollbar {display: none;}
.kp-thumb {aspect-ratio: 1.18 / 1;
flex: 0 0 auto;
width: 84px;
min-width: 0;
border: 1px solid var(--kp-line);
border-radius: 13px;
background: #efe9e2;
padding: 7px;
cursor: pointer;
overflow: hidden;
position: relative;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;}
.kp-thumb:hover {transform: translateY(-2px); border-color: #d6b7a5;}
.kp-thumb.is-active {border: 2px solid var(--kp-copper); padding: 6px; box-shadow: 0 7px 18px rgba(154,52,18,.10);}
.kp-thumb svg {width: 100%; height: 100%;}
/* Single-image gallery: hide nav arrows, dots and the thumbnail strip. */
.kp-gallery--single .kp-gallery__nav,
.kp-gallery--single .kp-gallery__dots,
.kp-gallery--single .kp-gallery__thumbs {display: none;}
/* Deep-dive module with no image collapses to a full-width single text column
(5.8.4: left-aligned with adjacent modules, ~1000px reading measure;
kp-story-block--textonly is the browser-robust class-based variant). */
.kp-story-visual--empty {display: none;}
.kp-story-block:has(.kp-story-visual--empty),
.kp-story-block--textonly {grid-template-columns: 1fr; max-width: none; margin-left: 0; margin-right: 0;}
.kp-story-block:has(.kp-story-visual--empty) .kp-story-copy,
.kp-story-block--textonly .kp-story-copy {max-width: 1000px;}
.kp-gallery__main {width: 100%;
aspect-ratio: 4 / 3;
min-height: 0;
border-radius: var(--kp-radius-lg);
background:
radial-gradient(circle at 40% 30%, rgba(255,255,255,.96), rgba(255,255,255,.14) 34%, transparent 55%),
linear-gradient(140deg, #e8e0d8, #d5c7bb);
position: relative;
overflow: hidden;
display: grid;
place-items: center;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), var(--kp-shadow-soft);}
.kp-product-info {display: grid;
grid-template-rows: auto auto auto;
gap: 18px;
align-content: start;
height: 100%;}
.kp-product-summary--intro {padding-bottom: 0;}
.kp-product-summary--intro .kp-summary-tags {margin-bottom: 4px;}
.kp-product-summary--detail {padding-top: 0;}
.kp-product-summary--detail .kp-product-summary__lead {margin-top: 0;}
.kp-gallery__main::after {content: "";
position: absolute;
width: 68%;
height: 16%;
bottom: 10%;
left: 16%;
border-radius: 50%;
background: rgba(62,40,29,.18);
filter: blur(26px);}
.kp-gallery__zoom {position: absolute;
right: 16px;
top: 16px;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.66);
background: rgba(255,255,255,.85);
display: grid;
place-items: center;
z-index: 3;}
.kp-gallery__nav {position: absolute;
top: 50%;
z-index: 5;
width: 42px;
height: 42px;
margin-top: -21px;
border: 1px solid rgba(255,255,255,.72);
border-radius: 50%;
background: rgba(255,255,255,.88);
box-shadow: 0 8px 22px rgba(32,22,14,.12);
cursor: pointer;
display: grid;
place-items: center;
transition: transform .18s ease, background .18s ease;}
.kp-gallery__nav:hover {transform: scale(1.05); background: #fff;}
.kp-gallery__nav--prev {left: 16px;}
.kp-gallery__nav--next {right: 16px;}
.kp-gallery__nav::before {content: "";
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;}
.kp-gallery__nav--prev::before {border-right: 9px solid var(--kp-graphite); margin-left: -2px;}
.kp-gallery__nav--next::before {border-left: 9px solid var(--kp-graphite); margin-right: -2px;}
.kp-gallery__dots {position: absolute;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 7px;
z-index: 4;}
.kp-gallery__dot {width: 7px; height: 7px; border-radius: 50%; background: rgba(36,25,18,.28);}
.kp-gallery__dot.is-active {background: var(--kp-copper);}
.kp-switch-art {width: min(78%, 520px); position: relative; z-index: 2; filter: drop-shadow(0 30px 36px rgba(45,24,45,.25)); transition: transform .34s ease, filter .34s ease, opacity .2s ease;}
.kp-switch-art--small {width: 92%; filter: drop-shadow(0 12px 14px rgba(45,24,45,.20));}
.kp-product-summary {padding: 16px 4px 12px;
display: flex;
flex-direction: column;}
.kp-product-summary h1 {margin: 0;
font-family: var(--kp-serif);
font-size: clamp(44px, 3.8vw, 62px);
font-weight: 500;
line-height: .98;
letter-spacing: -.05em;}
.kp-product-summary__lead {margin: 22px 0 24px;
color: var(--kp-muted);
font-size: 16px;
max-width: 520px;}
.kp-summary-tags {display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px;}
.kp-tag {display: inline-flex;
align-items: center;
gap: 7px;
min-height: 34px;
padding: 0 12px;
border-radius: 999px;
background: var(--kp-orange-soft);
border: 1px solid #f1d8c5;
color: #7e341b;
font-size: 12px;
font-weight: 750;}
.kp-decision-summary {display: grid;
gap: 0;
border-top: 1px solid var(--kp-line);
border-bottom: 1px solid var(--kp-line);
margin-top: 2px;}
.kp-decision-row {display: grid;
grid-template-columns: 30px 1fr;
gap: 12px;
align-items: start;
padding: 13px 0;}
.kp-decision-row + .kp-decision-row {border-top: 1px solid var(--kp-line);}
.kp-decision-row__icon {width: 28px;
height: 28px;
border-radius: 9px;
display: grid;
place-items: center;
color: var(--kp-copper);
background: var(--kp-orange-soft);}
.kp-decision-row strong {display: block;
font-size: 14px;
line-height: 1.35;
margin-bottom: 2px;}
.kp-decision-row span {display: block;
color: var(--kp-muted);
font-size: 12px;
line-height: 1.45;}
.kp-offer-card {border: 1px solid #efd7c7;
background: linear-gradient(160deg, #fffaf5 0%, #fff 72%);
border-radius: var(--kp-radius);
padding: 22px;
box-shadow: var(--kp-shadow-soft);
display: flex;
flex-direction: column;
justify-content: flex-start;
min-height: 0;}
.kp-offer-card__status {display: flex;
align-items: center;
gap: 9px;
color: var(--kp-copper);
font-size: 12px;
font-weight: 850;
letter-spacing: .1em;
text-transform: uppercase;}
.kp-offer-card h2 {font-family: var(--kp-serif);
font-size: 25px;
font-weight: 500;
line-height: 1.14;
margin: 15px 0 7px;}
.kp-offer-card p {color: var(--kp-muted); font-size: 13px; margin: 0 0 16px;}
.kp-offer-card__actions {display: grid; grid-template-columns: 1fr 1fr; gap: 9px;}
.kp-offer-card__actions > :first-child {grid-column: 1 / -1;}
.kp-offer-card__actions > :last-child:nth-child(2) {grid-column: 1 / -1;}
.kp-offer-card__note {margin-top: 13px;
padding: 11px 12px;
border-radius: 12px;
background: #fff8f2;
border: 1px solid #f0ded1;
font-size: 12px;
color: #6f6258;}
.kp-offer-card__price {margin: 3px 0 18px;
font-family: var(--kp-serif);
font-size: 40px;
line-height: 1;
letter-spacing: -.03em;}
.kp-offer-card__meta {display: grid;
gap: 10px;
margin: 0 0 20px;}
.kp-offer-card__meta div {display: flex;
justify-content: space-between;
gap: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--kp-line);
font-size: 13px;}
.kp-offer-card__meta span {color: var(--kp-muted);}
/* Compact technical snapshot — complements, rather than repeats, the hero */
.kp-tech-snapshot {margin-top: 26px;
padding: 0 2px;}
.kp-tech-snapshot__label {display: block;
margin-bottom: 10px;
color: var(--kp-muted);
font-size: 11px;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;}
.kp-tech-snapshot__rail {display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
border-top: 1px solid var(--kp-line-strong);
border-bottom: 1px solid var(--kp-line-strong);
background: rgba(255,255,255,.46);}
.kp-tech-item {min-width: 0;
padding: 13px 16px 14px;
position: relative;}
.kp-tech-item + .kp-tech-item::before {content: "";
position: absolute;
left: 0;
top: 24%;
width: 1px;
height: 52%;
background: var(--kp-line);}
.kp-tech-item span {display: block;
color: var(--kp-muted);
font-size: 10px;
line-height: 1.3;
letter-spacing: .07em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;}
.kp-tech-item strong {display: block;
margin-top: 4px;
font-size: 13px;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;}
/* Audience */
.kp-audience-grid {margin-top: 30px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;}
.kp-audience-card {padding: 28px;
border-radius: var(--kp-radius);
background: var(--kp-surface);
border: 1px solid var(--kp-line);
min-height: 220px;
display: grid;
grid-template-columns: 60px 1fr;
gap: 20px;
align-items: start;}
.kp-audience-card__icon {width: 60px;
height: 60px;
border-radius: 50%;
display: grid;
place-items: center;
border: 1px solid #e8d9cb;
background: var(--kp-orange-soft);
color: var(--kp-copper);}
.kp-audience-card h3 {margin: 2px 0 8px; font-family: var(--kp-serif); font-size: 22px; font-weight: 500;}
.kp-audience-card p {margin: 0; color: var(--kp-muted); font-size: 14px;}
/* Editorial overview */
.kp-overview {display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 64px;
align-items: center;}
.kp-editorial-visual {min-height: 560px;
border-radius: var(--kp-radius-lg);
overflow: hidden;
position: relative;
background: linear-gradient(145deg, #17151a, #6a5b72);
box-shadow: var(--kp-shadow);}
.kp-editorial-visual__board {position: absolute;
inset: 12% 8%;
border-radius: 34px;
transform: rotate(-6deg);
background:
linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px) 0 0/72px 72px,
linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px) 0 0/72px 72px,
linear-gradient(145deg, #534b59, #2e2a32);
border: 1px solid rgba(255,255,255,.16);
box-shadow: 0 40px 80px rgba(0,0,0,.32);}
.kp-editorial-visual__board::before, .kp-editorial-visual__board::after {content: "";
position: absolute;
border-radius: 16px;
background: linear-gradient(150deg, #ddd5e3, #9b91a7);
box-shadow: 0 10px 22px rgba(0,0,0,.23);}
.kp-editorial-visual__board::before {width: 82px; height: 70px; left: 24%; top: 34%;}
.kp-editorial-visual__board::after {width: 82px; height: 70px; left: 44%; top: 22%;}
.kp-editorial-visual .kp-switch-art {position: absolute;
width: 42%;
left: 29%;
top: 27%;
transform: rotate(7deg);
z-index: 3;
filter: drop-shadow(0 32px 35px rgba(0,0,0,.4));}
.kp-overview-copy {padding-right: 24px;}
.kp-overview-copy p {color: var(--kp-muted); font-size: 16px;}
.kp-overview-points {display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 32px;}
.kp-overview-point {padding-top: 18px;
border-top: 1px solid var(--kp-line-strong);}
.kp-overview-point strong {display: block; font-family: var(--kp-serif); font-size: 17px; font-weight: 500;}
.kp-overview-point span {color: var(--kp-muted); font-size: 12px;}
/* Product deep-dive editorial blocks */
.kp-story-stack {display: grid;
gap: 64px;}
.kp-story-block {display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: 52px;
align-items: center;}
.kp-story-block--reverse {grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);}
.kp-story-visual {min-height: 410px;
border-radius: var(--kp-radius-lg);
overflow: hidden;
position: relative;
box-shadow: var(--kp-shadow);
background: linear-gradient(145deg, #ddd4cb, #b9a89a);}
.kp-story-visual--dark {background: linear-gradient(145deg, #17151a, #6a5b72);}
.kp-story-visual--light {background: linear-gradient(145deg, #fbf8f4, #e8ddd3);
border: 1px solid var(--kp-line);
box-shadow: var(--kp-shadow-soft);}
.kp-story-visual--warm {background: linear-gradient(145deg, #e8ddd3, #cdb9a7);}
.kp-story-visual__board {position: absolute;
inset: 11% 8%;
border-radius: 34px;
background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.18));
border: 1px solid rgba(255,255,255,.48);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 30px 60px rgba(0,0,0,.12);}
.kp-story-visual--dark .kp-story-visual__board {transform: rotate(-6deg);
background:
linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px) 0 0/72px 72px,
linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px) 0 0/72px 72px,
linear-gradient(145deg, #534b59, #2e2a32);
border: 1px solid rgba(255,255,255,.16);
box-shadow: 0 40px 80px rgba(0,0,0,.32);}
.kp-story-visual--light .kp-story-visual__board {inset: 10% 9%;
background: linear-gradient(180deg, #fff, #f6efe8);
border-color: #eadfd4;}
.kp-story-visual--warm .kp-story-visual__board {transform: rotate(5deg);
background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,244,232,.25));}
.kp-story-visual .kp-switch-art {position: absolute;
width: 40%;
left: 30%;
top: 25%;
transform: rotate(7deg);
z-index: 3;
filter: drop-shadow(0 28px 32px rgba(0,0,0,.24));}
.kp-story-visual--light .kp-switch-art {width: 44%;
left: 28%;
top: 23%;
transform: rotate(-12deg);
filter: drop-shadow(0 24px 28px rgba(0,0,0,.16));}
.kp-story-visual--warm .kp-switch-art {width: 42%;
left: 29%;
top: 24%;
transform: rotate(13deg);}
.kp-story-copy {position: relative;
padding: 6px 0;}
.kp-story-copy h3 {margin: 0 0 15px;
max-width: 650px;
font-family: var(--kp-serif);
font-size: clamp(30px, 2.3vw, 38px);
line-height: 1.08;
font-weight: 500;
letter-spacing: -.03em;}
.kp-story-copy > p {max-width: 700px;
margin: 0 0 14px;
color: var(--kp-muted);
font-size: 15px;
line-height: 1.72;}
.kp-story-copy > p:last-of-type {margin-bottom: 0;}
.kp-story-list {display: grid;
gap: 8px;
margin: 18px 0 0;
padding: 0;
list-style: none;}
.kp-story-list li {display: grid;
grid-template-columns: 22px 1fr;
gap: 10px;
align-items: start;
padding-top: 11px;
border-top: 1px solid var(--kp-line);}
.kp-story-list li::before {content: "•";
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--kp-orange-soft);
color: var(--kp-copper);
font-weight: 800;
line-height: 1;
font-size: 13px;}
.kp-story-list strong {display: block;
margin-bottom: 2px;
font-size: 13px;
color: var(--kp-ink);}
.kp-story-list span {color: var(--kp-muted);
font-size: 12px;
line-height: 1.5;}
/* §十 Detailed specifications — 分组式（Desktop 分组行 + 2 列 value grid，参照参考原型 .detailed） */
.kp-specs-shell {overflow: hidden;
border: 1px solid var(--kp-line);
border-radius: var(--kp-radius);
background: var(--kp-surface);
box-shadow: var(--kp-shadow-soft);}
.kp-specs-grid {display: block;}
.kp-spec-group {display: grid;
grid-template-columns: 170px 1fr;
border-bottom: 1px solid var(--kp-line);
min-width: 0;}
.kp-spec-group:last-child {border-bottom: 0;}
.kp-spec-group h3 {margin: 0;
font-family: var(--kp-serif);
font-size: 18px;
font-weight: 850;
padding: 21px 18px;
background: var(--kp-surface-soft);
color: var(--kp-ink);}
.kp-spec-list {display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0;}
.kp-spec-row {display: grid;
grid-template-columns: minmax(0,1fr) auto;
gap: 16px;
align-items: baseline;
padding: 16px 18px;
border-left: 1px solid var(--kp-line);
border-bottom: 1px solid var(--kp-line);
font-size: 12px;}
.kp-spec-row:nth-last-child(-n+2) {border-bottom: 0;}
.kp-spec-row dt {color: var(--kp-muted);}
.kp-spec-row dd {margin: 0; font-weight: 700; text-align: right; color: var(--kp-ink);}
.kp-spec-note {padding: 12px 24px; border-top: 1px solid var(--kp-line); color: #8a8279; font-size: 11px;}
/* Feel + compatibility */
.kp-two-col {display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: stretch;}
.kp-panel {border: 1px solid var(--kp-line);
border-radius: var(--kp-radius);
background: var(--kp-surface);
overflow: hidden;}
.kp-panel__body {padding: 28px;}
.kp-panel h3 {margin: 0; font-family: var(--kp-serif); font-size: 28px; font-weight: 500;}
.kp-feel-layout {display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 0;
min-height: 420px;}
.kp-feel-visual {position: relative;
overflow: hidden;
background: linear-gradient(145deg,#d2c3d3,#7b6780);
display: grid;
place-items: center;}
.kp-feel-visual::before, .kp-feel-visual::after {content: "";
position: absolute;
width: 30%;
height: 30%;
border-radius: 24px;
background: rgba(255,255,255,.25);
transform: rotate(25deg);}
.kp-feel-visual::before {top: 8%; left: 7%;}
.kp-feel-visual::after {right: 7%; bottom: 10%;}
.kp-feel-visual .kp-switch-art {width: 56%;}
.kp-feel-list {display: grid; gap: 22px;}
.kp-feel-item {display: grid; grid-template-columns: 36px 1fr; gap: 14px;}
.kp-feel-item__icon {color: var(--kp-copper);}
.kp-feel-item strong {display: block; font-size: 14px;}
.kp-feel-item p {margin: 4px 0 0; color: var(--kp-muted); font-size: 12px;}
.kp-compat-grid {display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin-top: 24px;}
.kp-compat-item {padding: 18px;
border-radius: 14px;
background: var(--kp-surface-soft);
border: 1px solid var(--kp-line);
min-height: 150px;}
.kp-compat-item__icon {color: var(--kp-copper); margin-bottom: 14px;}
.kp-compat-item strong {display: block; font-family: var(--kp-serif); font-size: 18px; font-weight: 500;}
.kp-compat-item p {margin: 6px 0 0; color: var(--kp-muted); font-size: 12px;}
/* Link-driven video review — single full-width media block */
.kp-video-card {position: relative;
min-height: 460px;
border-radius: var(--kp-radius-lg);
overflow: hidden;
background:
linear-gradient(90deg, rgba(8,8,11,.88), rgba(8,8,11,.20)),
radial-gradient(circle at 72% 45%, rgba(168,132,177,.52), transparent 35%),
linear-gradient(145deg, #131015, #4c4652);
box-shadow: var(--kp-shadow);
display: flex;
align-items: flex-end;
padding: 42px;
color: #fff;
isolation: isolate;}
.kp-video-card .kp-switch-art {position: absolute;
width: 34%;
right: 13%;
top: 14%;
transform: rotate(-8deg);
filter: drop-shadow(0 30px 40px rgba(0,0,0,.55));
z-index: 1;}
.kp-video-card iframe {position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
background: #000;
z-index: 10;}
.kp-video-card__copy {position: relative;
z-index: 4;
max-width: 500px;}
.kp-video-card__copy h3 {margin: 0 0 12px;
font-family: var(--kp-serif);
font-size: clamp(34px, 3vw, 48px);
font-weight: 500;
line-height: 1.05;
letter-spacing: -.03em;}
.kp-video-card__copy p {margin: 0 0 24px;
max-width: 460px;
color: rgba(255,255,255,.72);
font-size: 16px;}
.kp-video-card__actions {display: flex;
flex-wrap: wrap;
gap: 10px;}
.kp-video-play {position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 88px;
height: 88px;
border: 1px solid rgba(17,17,17,.28);
border-radius: 50%;
background: rgba(255,255,255,.96);
color: var(--kp-copper);
display: grid;
place-items: center;
z-index: 5;
cursor: pointer;
box-shadow: 0 16px 40px rgba(0,0,0,.28);
transition: transform .18s ease, background .18s ease;}
.kp-video-play:hover {transform: translate(-50%, -50%) scale(1.05);
background: #fff;}
.kp-video-status {display: none;
position: absolute;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
z-index: 9;
max-width: calc(100% - 40px);
padding: 9px 12px;
border-radius: 10px;
background: rgba(255,255,255,.95);
color: var(--kp-graphite);
font-size: 12px;
text-align: center;
box-shadow: 0 10px 25px rgba(0,0,0,.18);}
.kp-video-status.is-visible {display: block;}
/* Cards */
.kp-card-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;}
.kp-product-card, .kp-guide-card {border-radius: var(--kp-radius);
background: var(--kp-surface);
border: 1px solid var(--kp-line);
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease;}
.kp-product-card:hover, .kp-guide-card:hover {transform: translateY(-3px); box-shadow: var(--kp-shadow-soft);}
.kp-product-card__image {min-height: 220px;
display: grid;
place-items: center;
background: linear-gradient(145deg, #f3eee8, #e4d9cf);
overflow: hidden;}
.kp-product-card__image .kp-switch-art {width: 46%;}
.kp-product-card__body {padding: 22px;}
.kp-product-card h3 {margin: 0; font-family: var(--kp-serif); font-size: 23px; font-weight: 500;}
.kp-product-card p {color: var(--kp-muted); font-size: 13px; min-height: 44px;}
.kp-product-card__actions {display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.kp-product-card .kp-btn {min-height: 40px; padding: 0 10px; font-size: 12px;}
.kp-guide-card {display: grid; grid-template-columns: 38% 62%; min-height: 210px;}
.kp-guide-card__visual {background: linear-gradient(145deg, #eae1d9, #cfc0b5); display: grid; place-items: center; overflow: hidden;}
.kp-guide-card__visual .kp-switch-art {width: 65%;}
.kp-guide-card__body {padding: 25px;}
.kp-guide-card h3 {margin: 0 0 8px; font-family: var(--kp-serif); font-size: 22px; font-weight: 500; line-height: 1.1;}
.kp-guide-card p {margin: 0 0 16px; color: var(--kp-muted); font-size: 12px;}
/* Brand + FAQ */
.kp-brand-faq {display: grid;
grid-template-columns: .78fr 1.22fr;
gap: 24px;
align-items: stretch;}
.kp-brand-card, .kp-faq-card {border: 1px solid var(--kp-line);
border-radius: var(--kp-radius);
background: var(--kp-surface);
padding: 30px;}
.kp-brand-logo {font-size: 44px; font-weight: 950; letter-spacing: -.05em; font-style: italic; margin: 20px 0;}
.kp-brand-card p {color: var(--kp-muted); font-size: 14px;}
.kp-faq-list {margin-top: 18px; border-top: 1px solid var(--kp-line);}
.kp-faq-item {border-bottom: 1px solid var(--kp-line);}
/* FAQ accordion — scoped to product page so it overrides Kadence global button styles
(which painted titles white-on-transparent and a blue hover). No !important used. */
.kp-product-page .kp-faq-question {width: 100%;
box-sizing: border-box;
padding: 20px 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
background: #ffffff;
border: 0;
border-left: 3px solid transparent;
border-bottom: 1px solid #E5E1DA;
border-radius: 0;
box-shadow: none;
text-align: left;
font-weight: 650;
font-size: 19px;
line-height: 1.35;
color: #111827;
cursor: pointer;
min-height: 66px;
transition: background-color .18s ease, color .18s ease, border-color .18s ease;}
.kp-product-page .kp-faq-question svg {flex: 0 0 auto;
width: 18px; height: 18px;
color: #6B7280;
transition: color .18s ease, transform .2s ease;}
.kp-product-page .kp-faq-question:hover {background: #FFF7ED;
color: #9A3412;
border-bottom-color: #F97316;}
.kp-product-page .kp-faq-question:hover svg {color: #F97316;}
.kp-product-page .kp-faq-question:focus {outline: none;}
.kp-product-page .kp-faq-question:focus-visible {outline: 2px solid rgba(194, 65, 12, 0.35);
outline-offset: 2px;}
.kp-faq-answer {display: none; padding: 0 42px 18px 0; color: var(--kp-muted); font-size: 13px;}
.kp-product-page .kp-faq-answer {display: none;
box-sizing: border-box;
padding: 20px 22px 24px;
border-left: 3px solid transparent;
color: #68645F;
font-size: 16px;
line-height: 1.7;
background: #ffffff;}
.kp-faq-item.is-open .kp-faq-answer {display: block;}
.kp-product-page .kp-faq-item.is-open .kp-faq-answer {border-left-color: #C2410C;}
.kp-product-page .kp-faq-item.is-open .kp-faq-question {background: #FFF4E8;
color: #9A3412;
border-left-color: #C2410C;
border-bottom-color: transparent;}
.kp-product-page .kp-faq-item.is-open .kp-faq-question svg {color: #C2410C; transform: rotate(180deg);}
/* Bottom CTA */
.kp-bottom-cta {border: 1px solid #edcbb5;
border-radius: var(--kp-radius-lg);
background: linear-gradient(100deg, #fff5eb, #fffdfa);
padding: 34px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
box-shadow: var(--kp-shadow-soft);}
.kp-bottom-cta__copy {display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: center;}
.kp-bottom-cta__icon {width: 64px; height: 64px; border-radius: 50%; background: var(--kp-copper); color: #fff; display: grid; place-items: center;}
.kp-bottom-cta h3 {margin: 0; font-family: var(--kp-serif); font-size: 26px; font-weight: 500;}
.kp-bottom-cta p {margin: 4px 0 0; color: var(--kp-muted); font-size: 13px;}
.kp-bottom-cta__actions {display: flex; gap: 10px; flex-wrap: wrap;}
/* Long-page navigation — sticky anchor nav (On this page) */
.kp-product-page .kp-section-nav {position: sticky;
top: calc(var(--kp-visible-header-height) + var(--kp-admin-bar-height));
z-index: 45;
overflow: hidden;
background: rgba(255,255,255,.97);
backdrop-filter: blur(12px);
border-top: 1px solid #EEE8DF;
border-bottom: 1px solid #E5E1DA;
box-shadow: 0 8px 24px rgba(17,24,39,.05);}
.kp-section-nav__inner {min-height: 72px;
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 14px;
overflow-x: auto;
scrollbar-width: none;}
.kp-section-nav__inner::-webkit-scrollbar {display: none;}
.kp-section-nav__label {padding-right: 16px;
color: #68645F;
font-size: 14px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
white-space: nowrap;}
.kp-section-nav a {min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
padding: 0 22px;
border-radius: 999px;
color: #3F3A36;
font-size: 18px;
line-height: 1;
font-weight: 700;
white-space: nowrap;
transition: background .18s ease, color .18s ease;}
.kp-section-nav a:hover {color: #9A3412;
background: #FFF7ED;}
.kp-section-nav a.is-current {background: #FFF0E1; color: #C2410C; font-weight: 760;}
/* Dynamic conversion CTA (after FAQ) — visually distinct filled pill, excluded from scroll-spy */
.kp-product-page .kp-section-nav a.kp-section-nav__cta {min-height: 46px;
display: inline-flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
margin-left: 8px;
padding: 0 22px;
border-radius: 999px;
background: #C2410C;
color: #fff;
font-size: 18px;
line-height: 1;
font-weight: 800;
white-space: nowrap;
box-shadow: 0 6px 16px rgba(194,65,12,.22);
transition: background .18s ease, transform .12s ease;}
.kp-product-page .kp-section-nav a.kp-section-nav__cta svg {width: 18px; height: 18px; flex: none;}
.kp-product-page .kp-section-nav a.kp-section-nav__cta:hover {background: #9A3412; color: #fff;}
.kp-product-page .kp-section-nav a.kp-section-nav__cta:active {transform: translateY(1px);}
/* WordPress admin-bar offset (logged-in). Header offset measured by JS. */
body.admin-bar {--kp-admin-bar-height: 32px;}
@media (max-width: 782px) {body.admin-bar {--kp-admin-bar-height: 46px;}}
/* Hero polish */
.kp-product-summary--intro h1 {max-width: 520px;}
.kp-product-summary--detail {border-top: 1px solid var(--kp-line); padding-top: 19px;}
.kp-product-summary--detail .kp-product-summary__lead {max-width: none;
font-size: 15px;
line-height: 1.7;}
.kp-offer-assurance {display: flex;
flex-wrap: wrap;
gap: 8px 14px;
margin-top: 13px;
color: #746a62;
font-size: 11px;
line-height: 1.45;}
.kp-offer-assurance span::before {content: "✓";
margin-right: 6px;
color: var(--kp-copper);
font-weight: 900;}
/* Story section polish */
.kp-story-index {position: absolute;
top: -6px;
right: 0;
font-family: var(--kp-serif);
font-size: 62px;
line-height: 1;
color: rgba(194,65,12,.08);
pointer-events: none;}
.kp-story-copy h3 {max-width: 640px;}
.kp-story-copy > p {max-width: 690px;}
.kp-story-verdict {margin-top: 22px;
padding: 16px 18px;
border-left: 3px solid var(--kp-copper);
background: linear-gradient(90deg, var(--kp-orange-soft), transparent);
color: #4c4038;
font-size: 13px;
line-height: 1.65;}
.kp-story-verdict strong {color: var(--kp-copper-deep);}
/* Unified aligned comparison matrix */
.kp-compare-shell {margin-top: 26px;
overflow-x: auto;
border: 1px solid var(--kp-line);
border-radius: var(--kp-radius);
background: #fff;
box-shadow: var(--kp-shadow-soft);
scrollbar-width: thin;}
.kp-compare-table {min-width: 1170px;
display: grid;
grid-template-columns: 190px repeat(4, minmax(245px, 1fr));
align-items: stretch;}
.kp-compare-cell {min-width: 0;
min-height: 58px;
padding: 15px 17px;
border-right: 1px solid var(--kp-line);
border-bottom: 1px solid var(--kp-line);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--kp-muted);
font-size: 12px;
line-height: 1.5;
background: #fff;}
.kp-compare-cell:nth-child(5n) {border-right: 0;}
.kp-compare-table > .kp-compare-cell:nth-last-child(-n+5) {border-bottom: 0;}
.kp-compare-cell--label {position: sticky;
left: 0;
z-index: 3;
justify-content: flex-start;
text-align: left;
color: var(--kp-ink);
font-weight: 760;
background: #f5efe6;
box-shadow: 1px 0 0 var(--kp-line);}
.kp-compare-cell--current {background: #fff7ea;}
.kp-compare-corner {z-index: 6;
min-height: 350px;
align-items: flex-end;
padding-bottom: 22px;
color: var(--kp-ink);
font-size: 12px;
letter-spacing: .04em;
text-transform: uppercase;}
.kp-compare-product-head {min-height: 350px;
padding: 18px 16px 20px;
display: grid;
grid-template-rows: 92px minmax(52px, auto) 44px 1fr;
align-content: stretch;
gap: 10px;
position: relative;
background: #fff;}
.kp-compare-product-head.kp-compare-cell--current {background: #fff7ea;
box-shadow: inset 0 3px 0 var(--kp-copper);}
.kp-compare-current-label {position: absolute;
top: 12px;
left: 14px;
padding: 4px 7px;
border-radius: 999px;
background: var(--kp-copper);
color: #fff;
font-size: 9px;
font-weight: 850;
letter-spacing: .06em;
text-transform: uppercase;}
.kp-compare-product-image {width: 92px;
height: 92px;
margin: 0 auto;
border: 1px solid var(--kp-line);
border-radius: 13px;
background: var(--kp-surface-soft);
display: grid;
place-items: center;
overflow: hidden;}
.kp-compare-product-image .kp-switch-art {width: 82%;
filter: drop-shadow(0 9px 12px rgba(45,24,45,.16));}
.kp-compare-product-head h3 {margin: 0;
align-self: start;
font-family: var(--kp-sans);
font-size: 15px;
line-height: 1.4;
font-weight: 800;
color: var(--kp-ink);
text-align: center;}
.kp-compare-product-meta {align-self: start;
display: grid;
gap: 1px;
color: var(--kp-muted);
font-size: 12px;
font-weight: 650;
line-height: 1.45;
text-align: center;}
.kp-compare-actions {align-self: end;
display: grid;
gap: 8px;
width: 100%;}
.kp-compare-actions .kp-btn {width: 100%;
min-height: 40px;
padding: 8px 10px;
justify-content: center;
font-size: 12px;}
.kp-compare-actions .kp-btn--selected {border-color: var(--kp-graphite);
background: var(--kp-graphite);
color: #fff;
cursor: default;}
.kp-compare-good {color: var(--kp-copper-deep);
font-weight: 760;}
.kp-compare-detail-link {color: var(--kp-copper-deep);
font-weight: 720;
text-decoration: underline;
text-underline-offset: 3px;}
.kp-compare-note {margin-top: 18px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;}
.kp-compare-note > div {padding: 17px 18px;
border: 1px solid var(--kp-line);
border-radius: 15px;
background: #fff;}
.kp-compare-note strong {display: block;
margin-bottom: 5px;
color: var(--kp-copper-deep);
font-size: 12px;}
.kp-compare-note span {color: var(--kp-muted); font-size: 12px; line-height: 1.5;}
/* Guide / brand / FAQ polish */
.kp-guide-meta {display: flex;
gap: 8px;
margin-bottom: 12px;
color: var(--kp-copper);
font-size: 10px;
font-weight: 850;
letter-spacing: .07em;
text-transform: uppercase;}
.kp-brand-facts {display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin: 22px 0;}
.kp-brand-fact {padding: 12px;
border-radius: 12px;
background: var(--kp-surface-soft);
border: 1px solid var(--kp-line);}
.kp-brand-fact strong {display: block; font-size: 12px;}
.kp-brand-fact span {display: block; margin-top: 3px; color: var(--kp-muted); font-size: 10px;}
.kp-brand-disclaimer {margin-top: 18px;
padding-top: 15px;
border-top: 1px solid var(--kp-line);
color: #81786f;
font-size: 10px;
line-height: 1.55;}
.kp-faq-answer {line-height: 1.65;}
@media (max-width: 960px) {
/* sticky top handled by base rule via --kp-visible-header-height + --kp-admin-bar-height */
.kp-section-nav__label {display: none;}
.kp-compare-note {grid-template-columns: 1fr;}
.kp-brand-facts {grid-template-columns: 1fr;}
}
@media (max-width: 620px) {
.kp-section-nav__inner {min-height: 60px;}
.kp-section-nav a {min-height: 40px; padding: 0 17px; font-size: 16px;}
.kp-product-page .kp-section-nav a.kp-section-nav__cta {min-height: 40px; padding: 0 17px; font-size: 16px; margin-left: 8px;}
.kp-story-index {font-size: 48px;}
.kp-compare-table {min-width: 1170px;}
.kp-product-page .kp-faq-question {font-size: 17px; padding: 16px; min-height: 54px;}
.kp-product-page .kp-faq-answer {font-size: 15px; padding: 16px 16px 20px;}
.kp-product-page .kp-faq-question svg {width: 16px; height: 16px;}
}
/* Footer */
.kp-newsletter {display: flex; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; overflow: hidden; margin-top: 14px;}
.kp-newsletter input {min-width: 0; flex: 1; border: 0; background: transparent; color: #fff; padding: 11px 12px; outline: none;}
.kp-newsletter button {width: 42px; border: 0; background: rgba(255,255,255,.08); color: #fff; cursor: pointer;}
/* Prototype toolbar */
.kp-preview-toolbar {position: fixed;
right: 18px;
bottom: 18px;
z-index: 60;
background: rgba(11,16,32,.96);
color: #fff;
border-radius: 14px;
padding: 10px;
box-shadow: 0 16px 42px rgba(0,0,0,.26);
display: flex;
align-items: center;
gap: 8px;}
.kp-preview-toolbar span {font-size: 11px; color: rgba(255,255,255,.65); margin: 0 4px;}
.kp-preview-toolbar button {border: 1px solid rgba(255,255,255,.18);
background: transparent;
color: #fff;
border-radius: 8px;
padding: 8px 10px;
font-size: 11px;
cursor: pointer;}
.kp-preview-toolbar button.is-active {background: var(--kp-copper); border-color: var(--kp-copper);}
/* Responsive */
@media (max-width: 1180px) {.kp-header__inner { grid-template-columns: 190px 1fr auto; }
.kp-product-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(390px, .88fr); gap: 32px; }
.kp-offer-card__note { margin-top: 18px; }
.kp-tech-snapshot__rail { grid-template-columns: repeat(3, 1fr); }
.kp-tech-item:nth-child(4)::before { display: none; }
.kp-tech-item:nth-child(-n+3) { border-bottom: 1px solid var(--kp-line); }}
@media (max-width: 900px) {
.kp-wrap {width: min(calc(100% - 36px), var(--kp-container));}
.kp-product-hero__grid {grid-template-columns: 1fr;}
.kp-gallery__thumbs {gap: 10px;}
.kp-gallery__main {aspect-ratio: 4 / 3;}
.kp-product-summary {padding: 12px 0;}
.kp-audience-grid, .kp-card-grid, .kp-overview, .kp-two-col, .kp-brand-faq {grid-template-columns: 1fr;}
.kp-overview {gap: 34px;}
.kp-overview-copy {padding-right: 0;}
}
@media (max-width: 640px) {
.kp-section {padding: 58px 0;}
.kp-section--tight {padding: 44px 0;}
.kp-gallery__main {aspect-ratio: 4 / 3;}
.kp-product-summary h1 {font-size: 48px;}
.kp-gallery__thumbs {gap: 7px;}
.kp-thumb {border-radius: 10px; padding: 4px;}
.kp-thumb.is-active {padding: 3px;}
.kp-gallery__nav {width: 38px; height: 38px; margin-top: -19px;}
.kp-tech-snapshot__rail {grid-template-columns: repeat(2, 1fr);}
.kp-tech-item {border-bottom: 1px solid var(--kp-line);}
.kp-tech-item:nth-child(odd)::before {display: none;}
.kp-tech-item:nth-last-child(-n+2) {border-bottom: 0;}
.kp-audience-card {grid-template-columns: 1fr;}
.kp-overview-points {grid-template-columns: 1fr;}
.kp-editorial-visual {min-height: 420px;}
.kp-spec-group {grid-template-columns: 1fr; border-bottom: 1px solid var(--kp-line);}
.kp-spec-group:last-child {border-bottom: 0;}
.kp-spec-group h3 {border-bottom: 1px solid var(--kp-line);}
.kp-spec-list {grid-template-columns: 1fr;}
.kp-spec-row {border-left: 0; padding: 14px 0;}
.kp-spec-row:nth-last-child(-n+2) {border-bottom: 1px solid var(--kp-line);}
.kp-spec-row:last-child {border-bottom: 0;}
.kp-feel-layout {grid-template-columns: 1fr;}
.kp-feel-visual {min-height: 300px;}
.kp-compat-grid {grid-template-columns: 1fr;}
.kp-video-card {min-height: 430px; padding: 28px;}
.kp-video-card .kp-switch-art {width: 48%; right: 2%; top: 12%;}
.kp-video-card__copy {max-width: 390px;}
.kp-video-play {width: 72px; height: 72px;}
.kp-guide-card {grid-template-columns: 1fr;}
.kp-guide-card__visual {min-height: 190px;}
.kp-bottom-cta {align-items: flex-start; flex-direction: column;}
.kp-bottom-cta__copy {grid-template-columns: 1fr;}
.kp-bottom-cta__actions {width: 100%;}
.kp-bottom-cta__actions .kp-btn {width: 100%;}
.kp-preview-toolbar {left: 12px; right: 12px; justify-content: center; overflow-x: auto;}
}
/* V5 — Amazon A+ inspired hierarchy without Amazon-style clutter */
.kp-product-hero {padding: 0 0 72px;}
.kp-product-hero__grid {grid-template-columns: minmax(0, 1.2fr) minmax(430px, .8fr);
gap: 52px;
align-items: start;}
.kp-gallery {gap: 14px;}
.kp-gallery__main {aspect-ratio: 4 / 3;}
.kp-gallery__thumbs {gap: 10px;}
.kp-thumb {aspect-ratio: 1.22 / 1; border-radius: 12px;}
.kp-product-info {gap: 20px; height: auto;}
.kp-product-summary {padding: 5px 0 0;}
.kp-product-summary h1 {font-size: clamp(46px, 4.1vw, 64px);
line-height: .98;
max-width: 560px;}
.kp-product-summary__lead {margin: 20px 0 20px;
max-width: 560px;
font-size: 15.5px;
line-height: 1.7;}
.kp-summary-tags {margin-bottom: 17px;}
.kp-benefit-list {display: grid;
border-top: 1px solid var(--kp-line);
border-bottom: 1px solid var(--kp-line);}
.kp-benefit-item {display: grid;
grid-template-columns: 28px 1fr;
gap: 12px;
align-items: start;
padding: 11px 0;}
.kp-benefit-item + .kp-benefit-item {border-top: 1px solid var(--kp-line);}
.kp-benefit-item__icon {width: 28px;
height: 28px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--kp-orange-soft);
color: var(--kp-copper);}
.kp-benefit-item strong {display: block; font-size: 13.5px; line-height: 1.35;}
.kp-benefit-item span {display: block; margin-top: 2px; color: var(--kp-muted); font-size: 11.5px; line-height: 1.45;}
.kp-hero-facts {display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 16px;
border: 1px solid var(--kp-line);
border-radius: 14px;
background: rgba(255,255,255,.58);
overflow: hidden;}
.kp-hero-fact {padding: 11px 12px; min-width: 0;}
.kp-hero-fact + .kp-hero-fact {border-left: 1px solid var(--kp-line);}
.kp-hero-fact span {display: block;
color: var(--kp-muted);
font-size: 9.5px;
letter-spacing: .07em;
text-transform: uppercase;
white-space: nowrap;}
.kp-hero-fact strong {display: block;
margin-top: 3px;
font-size: 12.5px;
white-space: nowrap;}
.kp-offer-card {padding: 20px;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(37,26,14,.045);}
.kp-offer-card h2 {margin: 11px 0 5px; font-size: 23px;}
.kp-offer-card p {margin-bottom: 14px; line-height: 1.55;}
.kp-offer-card__actions {grid-template-columns: 1fr 1fr;}
.kp-offer-card__actions .kp-btn {min-height: 44px; padding: 0 14px; font-size: 13px;}
.kp-offer-card__note {margin-top: 11px; padding: 9px 11px; font-size: 11px;}
.kp-waitlist-form {display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 0 0 10px;}
.kp-waitlist-form input {min-width: 0;
height: 44px;
padding: 0 13px;
border: 1px solid var(--kp-line-strong);
border-radius: 10px;
background: #fff;
outline: none;}
.kp-waitlist-form input:focus {border-color: var(--kp-copper); box-shadow: 0 0 0 3px rgba(194,65,12,.08);}
.kp-purchase-head {display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; margin: 10px 0 13px;}
.kp-purchase-price {font-family: var(--kp-serif); font-size: 38px; line-height: 1; letter-spacing: -.035em;}
.kp-purchase-price small {display: block; margin-top: 6px; font-family: var(--kp-sans); color: var(--kp-muted); font-size: 10px; letter-spacing: .02em;}
.kp-stock-pill {display: inline-flex; align-items: center; gap: 7px; color: var(--kp-success); font-size: 12px; font-weight: 800;}
.kp-stock-pill::before {content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--kp-success);}
/* 价格 / 单位价 / 包装（服务端渲染，绕过 get_price_html()） */
.kp-price-current {font-family: var(--kp-serif); font-size: 38px; line-height: 1; letter-spacing: -.035em;}
.kp-price-was {font-family: var(--kp-serif); font-size: 20px; line-height: 1; color: var(--kp-muted); text-decoration: line-through; margin-left: 10px; vertical-align: 4px;}
.kp-unit-price {margin: 2px 0 10px; font-size: 14px; font-weight: 800; color: var(--kp-copper-deep);}
.kp-unit-price-each {display: inline-block;}
.kp-unit-price-each::before {content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--kp-copper); margin-right: 7px; vertical-align: 1px;}
.kp-pack-size {display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 10px; font-size: 12px; font-weight: 700; color: var(--kp-ink); background: var(--kp-chip, #f4f0ea); padding: 5px 10px; border-radius: 999px;}
.kp-pack-size svg {color: var(--kp-copper);}
.kp-offer-quickspecs {margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--kp-line, #ece6dc);}
.kp-offer-quickspecs__title {display: block; margin-bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--kp-muted);}
.kp-offer-quickspecs ul {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px;}
.kp-offer-quickspecs li {display: flex; flex-direction: column; font-size: 12px;}
.kp-offer-quickspecs li strong {color: var(--kp-ink); font-weight: 800;}
.kp-offer-quickspecs li span {color: var(--kp-muted);}
.kp-option-label {display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; font-size: 11px; font-weight: 800;}
.kp-option-label span {color: var(--kp-muted); font-weight: 600;}
.kp-pack-options {display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 12px;}
.kp-pack-option {min-height: 36px;
border: 1px solid var(--kp-line-strong);
border-radius: 9px;
background: #fff;
font-size: 11px;
font-weight: 800;
cursor: pointer;}
.kp-pack-option.is-active {border-color: var(--kp-copper); background: var(--kp-orange-soft); color: var(--kp-copper-deep);}
.kp-buy-row {display: grid; grid-template-columns: 100px 1fr; gap: 9px; margin-bottom: 9px;}
.kp-qty-control {display: grid; grid-template-columns: 32px 1fr 32px; min-height: 44px; border: 1px solid var(--kp-line-strong); border-radius: 10px; overflow: hidden; background: #fff;}
/* §六 数量按钮：显式设定 color / font-size / 居中，覆盖主题默认 button 的浅色文字与伪元素，确保 [−]/[+] 可见。 */
.kp-qty-control button {border: 0; background: #fff; color: var(--kp-ink); font-size: 20px; font-weight: 800; line-height: 1; cursor: pointer; display: grid; place-items: center; opacity: 1; padding: 0; text-indent: 0;}
.kp-qty-control span {display: grid; place-items: center; border-left: 1px solid var(--kp-line); border-right: 1px solid var(--kp-line); font-weight: 800;}
.kp-buy-trust {display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; color: var(--kp-muted); font-size: 10.5px;}
.kp-buy-trust span {display: inline-flex; align-items: center; gap: 5px;}
/* Replace three large audience cards with a more credible fit / skip decision block */
.kp-fit-grid {display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
margin-top: 30px;}
.kp-fit-panel {border-top: 2px solid var(--kp-copper);
padding: 26px 28px 28px;
background: var(--kp-surface);
border-radius: 0 0 var(--kp-radius) var(--kp-radius);
box-shadow: 0 10px 28px rgba(37,26,14,.045);}
.kp-fit-panel--skip {border-top-color: var(--kp-line-strong);}
.kp-fit-panel h3 {margin: 0 0 17px; font-family: var(--kp-serif); font-size: 25px; font-weight: 500;}
.kp-fit-list {display: grid; gap: 14px;}
.kp-fit-item {display: grid; grid-template-columns: 26px 1fr; gap: 11px; align-items: start;}
.kp-fit-item__icon {width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--kp-orange-soft); color: var(--kp-copper); font-weight: 900; font-size: 12px;}
.kp-fit-panel--skip .kp-fit-item__icon {background: #f3f0ec; color: #746d65;}
.kp-fit-item strong {display: block; font-size: 13px;}
.kp-fit-item p {margin: 2px 0 0; color: var(--kp-muted); font-size: 12px; line-height: 1.55;}
.kp-preview-toolbar, .kp-tech-snapshot {display: none !important;}
@media (max-width: 1180px) {
.kp-product-hero__grid {grid-template-columns: minmax(0, 1fr) minmax(390px, .82fr); gap: 34px;}
.kp-hero-facts {grid-template-columns: repeat(2, 1fr);}
.kp-hero-fact:nth-child(3) {border-left: 0; border-top: 1px solid var(--kp-line);}
.kp-hero-fact:nth-child(4) {border-top: 1px solid var(--kp-line);}
}
@media (max-width: 960px) {
.kp-product-hero__grid {grid-template-columns: 1fr;}
.kp-product-info {max-width: none;}
.kp-gallery {position: static; top: auto;}
.kp-fit-grid {grid-template-columns: 1fr;}
.kp-story-block, .kp-story-block--reverse {grid-template-columns: 1fr; gap: 26px;}
.kp-story-block--reverse .kp-story-visual {order: -1;}
.kp-story-visual {min-height: 350px;}
}
@media (max-width: 620px) {
.kp-gallery__nav {width: 38px; height: 38px; margin-top: -19px;}
.kp-gallery__thumbs {gap: 8px; padding-bottom: 4px;}
.kp-hero-facts {grid-template-columns: repeat(2, 1fr);}
.kp-waitlist-form {grid-template-columns: 1fr;}
.kp-pack-options {grid-template-columns: repeat(2, 1fr);}
.kp-buy-row {grid-template-columns: 92px 1fr;}
.kp-fit-panel {padding: 22px;}
.kp-video-card {min-height: 500px; padding: 24px 20px; align-items: flex-end;}
.kp-video-card .kp-switch-art {width: 70%; right: -7%; top: 7%; opacity: .82;}
.kp-video-card__copy h3 {font-size: 32px;}
.kp-video-card__copy p {font-size: 14px;}
.kp-video-card__actions {flex-direction: column; align-items: stretch;}
.kp-video-card__actions .kp-btn {width: 100%;}
.kp-video-play {top: 40%;}
}
/* Production image sizing (design used SVG placeholders; real ![]()
needs constraints) */
.kp-gallery__main .kp-gallery__img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none; }
.kp-gallery__thumbs .kp-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.kp-story-visual .kp-module-img,
.kp-feel-visual .kp-module-img,
.kp-video-card .kp-module-img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.kp-guide-card__visual .kp-module-img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.kp-compare-product-image img { width: 100%; height: auto; border-radius: 12px; display: block; }
.kp-switch-placeholder img { width: 100%; height: 100%; object-fit: contain; }
/* ============================================================
* V5.8 双属性变体选择器 (dual-attribute variant selector)
* 风格：KeebPilot Graphite + Copper Orange。无淘宝式高密度促销 UI。
* ============================================================ */
.kp-variant { margin-bottom: 14px; }
.kp-attr-group { margin-bottom: 14px; }
.kp-attr-options { display: flex; flex-wrap: wrap; gap: 8px; }
/* 颜色 / 图片色板轴：移动端允许横向滚动，绝不溢出或遮挡 Gallery */
.kp-attr-group[data-display="color_swatch"] .kp-attr-options,
.kp-attr-group[data-display="image_swatch"] .kp-attr-options {
flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
-webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
/* 基础选项按钮：白底 / #E5E1DA 边框 / 深色文字 */
.kp-attr-option {
position: relative;
min-height: 38px; padding: 8px 14px;
border: 1px solid #E5E1DA; border-radius: var(--kp-radius-sm);
background: #fff; color: var(--kp-ink);
font-weight: 700; font-size: 13px; line-height: 1.1;
cursor: pointer; user-select: none;
transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
display: inline-flex; align-items: center; justify-content: center; text-align: center;
}
.kp-attr-option:hover:not(.is-disabled):not(.is-soldout) { border-color: var(--kp-copper); }
.kp-attr-option:focus-visible { outline: 2px solid var(--kp-copper); outline-offset: 2px; }
/* 选中：#C2410C 边框 / #FFF7ED 背景 / 右上角铜橙勾选 */
.kp-attr-option.is-selected {
border-color: #C2410C; background: #FFF7ED; color: var(--kp-copper-deep);
box-shadow: 0 0 0 1px #C2410C inset;
}
.kp-attr-check { display: none; }
.kp-attr-option.is-selected .kp-attr-check {
display: block; position: absolute; top: -7px; right: -7px;
width: 16px; height: 16px; border-radius: 50%;
background: #C2410C; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(37,26,14,.25);
}
.kp-attr-option.is-selected .kp-attr-check::after {
content: ''; position: absolute; left: 5px; top: 2px;
width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* 缺货：灰色背景 / 灰色文字 / 不可点击 / 显示 Sold Out */
.kp-attr-option.is-soldout { background: #f1efec; color: #b7b2ab; border-color: #e7e1d8; cursor: not-allowed; }
.kp-attr-option.is-soldout::after {
content: 'Sold Out'; position: absolute; inset: 0; display: grid; place-items: center;
font-size: 10px; font-weight: 800; color: #b7b2ab;
}
/* 不存在组合：禁用 */
.kp-attr-option.is-disabled { opacity: .45; cursor: not-allowed; border-style: dashed; }
/* color_swatch / image_swatch：圆形 / 圆角色板（仅在有值时生效，否则退化为按钮） */
.kp-attr-option--swatch[style*="--swatch"] {
width: 40px; height: 40px; border-radius: 50%; padding: 0; overflow: hidden; background: var(--swatch);
}
.kp-attr-option--img[data-swatch-img] {
width: 48px; height: 48px; border-radius: 12px; padding: 0; overflow: hidden;
}
.kp-attr-option--img[data-swatch-img] img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kp-attr-option--swatch[style*="--swatch"] span,
.kp-attr-option--img[data-swatch-img] span { display: none; }
.kp-attr-option.is-selected.kp-attr-option--swatch[style*="--swatch"] .kp-attr-check,
.kp-attr-option.is-selected.kp-attr-option--img[data-swatch-img] .kp-attr-check { top: -6px; right: -6px; }
/* 单价 / 选择摘要 / 变体笔记 */
.kp-unit-price { margin: 2px 0 12px; font-size: 13px; font-weight: 800; color: var(--kp-copper-deep); }
.kp-unit-price::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--kp-copper); margin-right: 7px; vertical-align: 1px; }
.kp-selection-summary { margin: 6px 0 2px; font-size: 12px; color: var(--kp-muted); min-height: 16px; }
.kp-variant-note { margin: 4px 0 10px; font-size: 12px; color: var(--kp-muted); font-style: italic; }
/* 移动端：Pack（button）轴两列网格；颜色轴保持横向滚动 */
@media (max-width: 768px) {
.kp-attr-group[data-display="button"] .kp-attr-options { display: grid; grid-template-columns: repeat(2, 1fr); }
.kp-attr-group[data-display="button"] .kp-attr-option { width: 100%; }
.kp-attr-options { gap: 7px; }
}
/* ===== 移动端 Sticky Purchase Bar ===== */
.kp-sticky-buybar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
display: flex; align-items: center; gap: 12px;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
background: #fff; border-top: 1px solid var(--kp-line-strong);
box-shadow: 0 -8px 26px rgba(37,26,14,.08);
}
.kp-sticky-buybar[hidden] { display: none; }
.kp-sticky-buybar__info { flex: 1; min-width: 0; }
.kp-sticky-price { display: block; font-family: var(--kp-serif); font-size: 16px; font-weight: 800; color: var(--kp-ink); line-height: 1.1; }
.kp-sticky-price small { font-family: var(--kp-sans); font-size: 10px; color: var(--kp-muted); font-weight: 600; }
.kp-sticky-summary { display: block; font-size: 11px; color: var(--kp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-sticky-buybar .kp-btn { flex: 0 0 auto; min-height: 44px; }
@media (min-width: 769px) { .kp-sticky-buybar { display: none !important; } }
/* ===== Draft Direct-Sale Preview (§四/§五 禁购预览面板) ===== */
.kp-draft-preview-banner {
display: flex; flex-direction: row; align-items: baseline; gap: 8px;
padding: 7px 11px; margin-bottom: 12px;
background: #fff7e6; border: 1px solid #ffd591; border-radius: 8px;
}
.kp-draft-preview-banner strong {
font-family: var(--kp-sans); font-size: 11px; font-weight: 800;
letter-spacing: .06em; color: #ad6800; text-transform: uppercase; white-space: nowrap;
}
.kp-draft-preview-banner span { font-size: 12px; color: #7a5200; line-height: 1.3; }
.kp-draft-preview-note {
margin: 8px 0 0; font-size: 11px; color: var(--kp-muted); line-height: 1.4;
}
.kp-section-nav__cta--preview {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 13px;
color: #ad6800; background: #fff7e6; border: 1px solid #ffd591;
cursor: not-allowed;
}
/* ============================================================
5.8.2-multipack — Model / Version · Pack cards · Order summary · Hero sound test · video modal
============================================================ */
/* §七 Model / Version 家族切换 */
.kp-model-nav { margin-bottom: 18px; }
.kp-section-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--kp-copper); }
.kp-section-label__sub { color: var(--kp-muted); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 11px; }
.kp-model-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.kp-model-card {
flex: 1 1 auto; min-width: 120px; max-width: 220px;
display: flex; flex-direction: column; gap: 2px;
padding: 10px 13px; border: 1px solid var(--kp-line); border-radius: var(--kp-radius-sm);
background: var(--kp-surface); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.kp-model-card:hover { border-color: var(--kp-copper); box-shadow: var(--kp-shadow-soft); transform: translateY(-1px); }
.kp-model-card strong { font-size: 13px; color: var(--kp-ink); line-height: 1.2; }
.kp-model-card span { font-size: 11px; color: var(--kp-muted); }
.kp-model-card--active { border-color: var(--kp-copper); background: #fff7ed; cursor: default; }
.kp-model-card--active strong { color: var(--kp-copper-deep); }
/* §五 Pack Quantity 卡片 */
/* §四 Pack 轴：三列等宽紧凑卡片（~68px），数字+单位居中，徽标悬浮右上角不占高度 */
.kp-attr-group--pack .kp-attr-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.kp-attr-option--pack {
flex-direction: column; align-items: center; justify-content: center;
min-height: 60px; padding: 8px 6px; gap: 2px; text-align: center; border-radius: 11px;
}
.kp-attr-option--pack .kp-pack-num { font-family: var(--kp-serif); font-size: 26px; font-weight: 800; color: var(--kp-copper-deep); line-height: 1; }
.kp-attr-option--pack .kp-pack-unit { font-size: 12px; color: var(--kp-muted); font-weight: 600; }
.kp-attr-option--pack .kp-pack-text { font-size: 14px; font-weight: 800; color: var(--kp-ink); }
.kp-attr-option--pack.kp-pack-card--recommended { border-color: #f0b486; background: #fffaf3; }
.kp-pack-badge {
position: absolute; top: 6px; right: 6px;
display: inline-block;
padding: 2px 7px; border-radius: 999px;
background: var(--kp-copper); color: #fff;
font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
pointer-events: none;
}
.kp-attr-option--pack.is-selected .kp-pack-num { color: var(--kp-copper-deep); }
/* §五 Pack 卡悬停/聚焦 Tooltip（data-tooltip，纯文本转义，不占布局，不遮其他卡） */
.kp-attr-option--pack[data-tooltip] { position: relative; }
.kp-attr-option--pack[data-tooltip]:hover::after,
.kp-attr-option--pack[data-tooltip]:focus::after,
.kp-attr-option--pack[data-tooltip]:focus-visible::after {
content: attr(data-tooltip);
position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
width: max-content; max-width: 260px;
background: #2b2118; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.35;
padding: 8px 10px; border-radius: 8px; white-space: normal; text-align: center;
box-shadow: 0 6px 18px rgba(37,26,14,.22); z-index: 50; pointer-events: none;
}
@media (max-width: 768px) {
.kp-attr-option--pack[data-tooltip]:hover::after,
.kp-attr-option--pack[data-tooltip]:focus::after,
.kp-attr-option--pack[data-tooltip]:focus-visible::after { display: none; }
}
/* §十一 Order Quantity / Pack Quantity 分区 + Subtotal 预览 */
.kp-order-summary {
margin-top: 14px; padding: 12px 14px;
background: var(--kp-surface-soft); border: 1px solid var(--kp-line); border-radius: var(--kp-radius-sm);
display: flex; flex-direction: column; gap: 6px;
}
.kp-order-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kp-order-summary__label { font-size: 12px; color: var(--kp-muted); font-weight: 600; }
.kp-order-summary__value { font-family: var(--kp-serif); font-size: 16px; font-weight: 800; color: var(--kp-ink); }
.kp-order-summary__row--subtotal { padding-top: 6px; border-top: 1px dashed var(--kp-line-strong); }
.kp-order-summary__row--subtotal .kp-order-summary__value { color: var(--kp-copper-deep); }
/* §十六 Hero Watch Sound Test 模块 */
.kp-hero-soundtest { padding: 40px 0 8px; }
.kp-hero-soundtest__inner { width: min(calc(100% - 56px), var(--kp-container)); margin: 0 auto; }
.kp-hero-soundtest__card {
display: flex; align-items: center; gap: 18px; width: 100%; text-align: left;
padding: 14px; border: 1px solid var(--kp-line); border-radius: var(--kp-radius);
background: var(--kp-surface); box-shadow: var(--kp-shadow-soft);
cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.kp-hero-soundtest__card:hover { border-color: var(--kp-copper); box-shadow: var(--kp-shadow); transform: translateY(-1px); }
.kp-hero-soundtest__thumb { position: relative; flex: 0 0 132px; width: 132px; height: 92px; border-radius: 12px; overflow: hidden; background: var(--kp-graphite); }
.kp-hero-soundtest__thumb img { width: 100%; height: 100%; object-fit: cover; }
.kp-hero-soundtest__thumb .kp-switch-placeholder { width: 100%; height: 100%; }
.kp-hero-soundtest__play {
position: absolute; inset: 0; margin: auto; width: 46px; height: 46px;
display: grid; place-items: center; border-radius: 50%;
background: rgba(255,255,255,.92); color: var(--kp-copper-deep);
box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.kp-hero-soundtest__play svg { margin-left: 2px; }
.kp-hero-soundtest__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kp-hero-soundtest__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--kp-copper); }
.kp-hero-soundtest__title { font-family: var(--kp-serif); font-size: 18px; color: var(--kp-ink); line-height: 1.2; }
.kp-hero-soundtest__src { font-size: 11px; color: var(--kp-muted); }
/* §十六 视频模态框（Hero 卡片点击打开；不影响下方 #sound-test 内联播放） */
.kp-video-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(8,10,18,.82); }
.kp-video-modal.is-open { display: flex; }
.kp-video-modal__frame { position: relative; width: min(960px, 100%); aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.kp-video-modal__frame iframe { width: 100%; height: 100%; border: 0; }
.kp-video-modal__close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: #171717; font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
@media (max-width: 560px) {
.kp-video-modal { padding: 12px; }
.kp-video-modal__close { top: 8px; right: 8px; }
.kp-hero-soundtest__card { flex-direction: column; align-items: stretch; gap: 12px; }
.kp-hero-soundtest__thumb { flex-basis: auto; width: 100%; height: 160px; }
}
/* §十一 响应式：移动端 Model 卡两列 */
@media (max-width: 768px) {
.kp-model-card { min-width: calc(50% - 8px); flex: 1 1 calc(50% - 8px); }
}
/* ===== V5.8.x 新增模块样式（hero_summary / Key Specs / How Many / Box / Product Data） ===== */
/* §二 hero_summary：Hero 右侧、左对齐、Quick Specs 下方、顶部 border + 16-20px 间距、不居中、只出现一次 */
.kp-hero-summary {
margin: 18px 0 0;
padding-top: 16px;
border-top: 1px solid var(--kp-line);
font-size: 14.5px;
line-height: 1.7;
color: #4b5563;
text-align: left;
}
/* §五/§六 Sound & feel / Compatibility 独立全宽模块 — 2 张同级 feature card（不并入同一行） */
.kp-card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.kp-card {
border: 1px solid var(--kp-line);
border-radius: var(--kp-radius);
background: var(--kp-surface);
padding: 28px;
}
.kp-card--feature { display: flex; flex-direction: column; }
.kp-card--feature h3 { margin: 0 0 10px; font-family: var(--kp-serif); font-size: 22px; font-weight: 500; line-height: 1.2; }
.kp-card--feature p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--kp-muted); }
.kp-card__icon {
display: inline-grid; place-items: center;
width: 46px; height: 46px; border-radius: 12px;
background: var(--kp-orange-soft); color: var(--kp-copper-deep);
margin-bottom: 14px;
}
/* §九 Sound & feel — V5.9.0 双栏图文卡片（text+media），桌面交错、移动图上文下 */
.kp-sf-stack { display: grid; grid-template-columns: 1fr; gap: 22px; }
.kp-sf-card {
display: flex; align-items: center; gap: 28px;
border: 1px solid var(--kp-line); border-radius: var(--kp-radius);
background: var(--kp-surface); padding: 26px; box-shadow: var(--kp-shadow-soft);
}
.kp-sf-card__text { flex: 1 1 55%; min-width: 0; }
.kp-sf-card__media { flex: 1 1 45%; min-width: 0; }
.kp-sf-card--no-media .kp-sf-card__text { flex-basis: 100%; }
.kp-sf-card__icon {
display: inline-grid; place-items: center; width: 46px; height: 46px;
border-radius: 12px; background: var(--kp-orange-soft); color: var(--kp-copper-deep); margin-bottom: 14px;
}
.kp-sf-card__text h3 { margin: 0 0 10px; font-family: var(--kp-serif); font-size: 23px; font-weight: 800; color: var(--kp-ink); line-height: 1.2; }
.kp-sf-card__text p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--kp-muted); }
.kp-sf-card__media {
position: relative; aspect-ratio: 4 / 3; border-radius: 14px;
overflow: hidden; background: var(--kp-surface-soft);
}
.kp-sf-card__img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* 顶部大价划线原价（§三） */
.kp-purchase-price--regular {
display: inline-block; margin-left: 10px;
font-family: var(--kp-sans); font-size: 16px; font-weight: 600;
color: var(--kp-muted); text-decoration: line-through;
vertical-align: middle;
}
/* §四 Key Specifications — 桌面 4 列 × 2 行统一带边框 Grid（参照参考原型 .spec-grid） */
.kp-key-specs {
display: grid;
grid-template-columns: repeat(4, 1fr);
border: 1px solid var(--kp-line-strong);
border-radius: 16px;
overflow: hidden;
background: var(--kp-surface);
margin-top: 4px;
}
.kp-key-spec {
display: flex; flex-direction: column; gap: 5px;
padding: 20px 22px;
border-right: 1px solid var(--kp-line);
border-bottom: 1px solid var(--kp-line);
}
.kp-key-spec:nth-child(4n) { border-right: 0; }
.kp-key-spec:nth-last-child(-n+4) { border-bottom: 0; }
.kp-key-spec__value { font-family: var(--kp-serif); font-size: 20px; font-weight: 800; color: var(--kp-copper-deep); line-height: 1; }
.kp-key-spec__label { font-size: 12px; color: var(--kp-muted); font-weight: 600; letter-spacing: .02em; }
.kp-key-specs__empty { color: var(--kp-muted); font-size: 14px; }
/* §八 How Many Switches — 5 个清晰 Layout Card（参照参考原型 .need-grid / .need） */
.kp-how-many { max-width: none; }
.kp-need-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin-top: 6px;
}
.kp-need {
position: relative;
display: flex; flex-direction: column; gap: 4px;
padding: 15px 14px;
border: 1.5px solid var(--kp-line-strong);
border-radius: 14px;
background: var(--kp-surface);
text-align: center;
min-height: 88px;
justify-content: center;
box-shadow: var(--kp-shadow-soft);
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.kp-need:hover { border-color: var(--kp-copper); transform: translateY(-2px); box-shadow: var(--kp-shadow); }
.kp-need--reco { border-color: var(--kp-copper); }
.kp-need__badge {
display: inline-block;
margin: 0 auto 2px;
background: var(--kp-orange-soft);
color: #b45309;
padding: 3px 8px;
border-radius: 999px;
font-size: 9px; font-weight: 850;
letter-spacing: .06em; text-transform: uppercase;
}
.kp-need__name { font-family: var(--kp-sans); font-size: 16px; font-weight: 850; color: var(--kp-ink); line-height: 1.1; }
.kp-need__range { font-family: var(--kp-serif); font-size: 21px; font-weight: 800; color: var(--kp-copper-deep); line-height: 1.05; }
.kp-how-many__packs { margin: 18px 0 6px; font-size: 15px; color: var(--kp-ink); }
.kp-how-many__packs strong { color: var(--kp-copper-deep); }
.kp-how-many__note { margin: 4px 0 0; font-size: 13px; color: var(--kp-muted); line-height: 1.5; }
/* §十一 What's in the Box — 左视觉 + 右 Selected pack / 数量 / Included（参照参考原型 .box-wrap） */
.kp-box-wrap {
display: grid;
grid-template-columns: 45fr 55fr;
gap: 18px;
align-items: start;
}
.kp-box-visual {
min-height: 240px;
border: 1px solid var(--kp-line);
border-radius: 18px;
overflow: hidden;
background: var(--kp-surface-soft);
}
.kp-box-visual__img {
width: 100%; height: 100%; min-height: 240px;
object-fit: cover; object-position: center; display: block;
}
.kp-box-wrap--no-visual { grid-template-columns: 1fr; }
.kp-box-copy {
border: 1px solid var(--kp-line);
border-radius: 18px;
padding: 27px;
background: var(--kp-surface);
}
.kp-box-copy__label { display: block; font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; color: var(--kp-copper); }
.kp-box-qty { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 4px; }
.kp-box-qty__num { font-family: var(--kp-serif); font-size: 34px; font-weight: 800; color: var(--kp-ink); line-height: 1; letter-spacing: -.02em; }
.kp-box-qty__unit { font-size: 14px; color: var(--kp-muted); font-weight: 700; }
.kp-box-includes { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 0; }
.kp-box-includes li { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--kp-line); padding: 11px 0; font-size: 13px; color: var(--kp-muted); }
.kp-box-includes li strong { font-size: 14px; color: var(--kp-ink); font-weight: 800; }
.kp-box-color { color: var(--kp-copper-deep) !important; }
.kp-box__empty { margin: 14px 0 0; color: var(--kp-muted); font-size: 13px; }
/* §十九 Product Data & Verification — 独立 bordered card（标题/intro + Primary source / Cross-check / Last checked + Verified badge + 淡灰 note） */
.kp-product-data {
max-width: none;
border: 1px solid var(--kp-line);
border-radius: var(--kp-radius);
background: var(--kp-surface);
padding: 26px 28px;
}
.kp-product-data__list { margin: 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--kp-line); border-radius: 12px; overflow: hidden; background: #fbfbfd; }
.kp-product-data__row { display: grid; grid-template-columns: 200px 1fr; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--kp-line); }
.kp-product-data__row:last-child { border-bottom: 0; }
.kp-product-data__row dt { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--kp-muted); }
.kp-product-data__row dd { margin: 0; font-size: 14px; color: var(--kp-ink); }
.kp-product-data__row dd a { color: var(--kp-copper-deep); }
.kp-product-data__note { margin: 16px 0 0; padding: 12px 14px; font-size: 13px; color: var(--kp-muted); line-height: 1.6; background: #f5f6f7; border-radius: 10px; }
/* §十三 Verification Card 徽标（合法时显示 "Verified product data"） */
#product-data .kp-section-heading { align-items: flex-start; }
.kp-product-data__badge {
display: inline-flex; align-items: center; white-space: nowrap;
padding: 7px 11px; border-radius: 999px;
background: var(--kp-success-soft); color: var(--kp-success);
border: 1px solid #cfe7d8;
font-size: 11px; font-weight: 850; letter-spacing: .02em;
}
/* §二十三 响应式：新增模块移动端堆叠 / Key Specs 两列 */
@media (max-width: 768px) {
.kp-key-specs { grid-template-columns: repeat(2, 1fr); }
.kp-key-spec { border-right: 1px solid var(--kp-line); border-bottom: 1px solid var(--kp-line); }
.kp-key-spec:nth-child(4n) { border-right: 1px solid var(--kp-line); }
.kp-key-spec:nth-child(2n) { border-right: 0; }
.kp-key-spec:nth-last-child(-n+4) { border-bottom: 1px solid var(--kp-line); }
.kp-key-spec:nth-last-child(-n+2) { border-bottom: 0; }
.kp-product-data__row { grid-template-columns: 1fr; gap: 2px; }
.kp-sf-card { flex-direction: column; align-items: stretch; gap: 18px; }
.kp-sf-card__text, .kp-sf-card__media { flex-basis: auto; width: 100%; }
.kp-sf-card__media { order: -1; }
}
/* ============================================================
V5.8.2 布局修正覆盖（§二/§三 Hero 比例 + 去大卡；新增模块响应式）
置于文件末尾，确保覆盖上文多处 .kp-product-hero__grid / .kp-offer-card 定义。
============================================================ */
/* §二/§三 Hero 视觉比例严格参照参考原型 HTML：左图约 52% / 右内容约 48% */
.kp-product-hero__grid {
grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
gap: 46px;
}
@media (max-width: 960px) {
.kp-product-hero__grid { grid-template-columns: 1fr; gap: 28px; }
.kp-gallery { position: static; top: auto; }
}
/* §二/§三 直接购买区不再是旧式大白 Card：透明背景、无边框、无阴影，保留内部购买流程布局。
非直接（waitlist / availability）卡片保持原卡片外观。 */
.kp-offer-card--direct {
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
}
/* 新增模块响应式：How Many 5 卡 → 平板 3 列、手机 2 列；Box 视觉+副本 → 平板以下上下堆叠 */
@media (max-width: 1099px) {
.kp-need-grid { grid-template-columns: repeat(3, 1fr); }
.kp-box-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 699px) {
.kp-need-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
UI Polish 1.0 — Frontend Presentation Layer Overrides
Data Schema 1.3 / Content Contract / Variation model unchanged.
Safe to revert by deleting this block.
============================================================ */
/* --- Section rhythm --- */
.kp-section { padding: var(--kp-section-gap) 0; }
.kp-section-heading { margin-bottom: var(--kp-content-gap); gap: 24px; }
.kp-eyebrow { margin-bottom: var(--kp-heading-gap); }
.kp-section-intro { color: var(--kp-muted); margin-top: 0; }
/* --- Key Specifications: primary + secondary --- */
.kp-key-specs { display: flex; flex-direction: column; gap: var(--kp-block-gap); background: transparent; border: 0; border-radius: 0; margin-top: 0; }
.kp-key-specs__primary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--kp-line); border: 1px solid var(--kp-line); border-radius: var(--kp-radius); overflow: hidden; }
.kp-key-specs__secondary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.kp-key-spec { display: flex; flex-direction: column; gap: 8px; background: var(--kp-surface); border: 0; }
.kp-key-spec--primary { padding: 30px 34px; }
.kp-key-spec--primary .kp-key-spec__value { font-family: var(--kp-serif); font-size: 44px; font-weight: 700; color: var(--kp-ink); line-height: 1; letter-spacing: -0.02em; }
.kp-key-spec--primary .kp-key-spec__label { font-size: 13px; color: var(--kp-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kp-key-spec--secondary { padding: 16px 22px 12px 0; border-bottom: 1px solid var(--kp-line); }
.kp-key-spec--secondary .kp-key-spec__value { font-size: 17px; font-weight: 700; color: var(--kp-ink); line-height: 1.25; }
.kp-key-spec--secondary .kp-key-spec__label { font-size: 12px; color: var(--kp-muted); font-weight: 600; }
.kp-key-specs__empty { color: var(--kp-muted); font-size: 14px; }
/* --- Detailed specs table lightweight --- */
.kp-specs-shell { box-shadow: none; border: 1px solid var(--kp-line); border-radius: var(--kp-radius); background: var(--kp-surface); }
.kp-specs-grid { display: flex; flex-direction: column; gap: 0; }
.kp-spec-group { display: flex; flex-direction: column; gap: 14px; padding: 28px 32px; border-bottom: 1px solid rgba(17,24,39,.06); min-width: 0; }
.kp-spec-group:last-child { border-bottom: 0; }
.kp-spec-group h3 { margin: 0; padding: 0; background: transparent; font-family: var(--kp-sans); font-size: 17px; font-weight: 700; color: var(--kp-ink); letter-spacing: 0; }
.kp-spec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.kp-spec-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: baseline; padding: 18px 20px; border-left: 0; border-bottom: 1px solid rgba(17,24,39,.06); font-size: 13px; transition: background .12s; }
.kp-spec-row:nth-last-child(-n+2) { border-bottom: 0; }
.kp-spec-row:hover { background: rgba(17,24,39,.02); }
.kp-spec-row dt { color: var(--kp-muted); font-weight: 500; }
.kp-spec-row dd { margin: 0; font-weight: 700; text-align: right; color: var(--kp-ink); }
.kp-spec-note { border-top: 1px solid rgba(17,24,39,.06); background: transparent; padding: 16px 32px; font-size: 12px; color: #8a8279; }
/* --- Reduce box-in-box / lighten cards --- */
.kp-card--feature { border: var(--kp-border); background: var(--kp-surface); box-shadow: none; border-radius: var(--kp-radius); padding: var(--kp-card-padding); }
.kp-fit-panel { border: var(--kp-border); box-shadow: none; border-radius: var(--kp-radius); }
.kp-story-block { border-radius: var(--kp-radius); overflow: hidden; border: var(--kp-border); box-shadow: none; }
.kp-sf-card { border: var(--kp-border); box-shadow: none; border-radius: var(--kp-radius); }
/* --- Variation tiles normalization --- */
.kp-attr-option { border-color: var(--kp-line); border-radius: var(--kp-radius-sm); }
.kp-attr-option:hover:not(.is-disabled):not(.is-soldout) { background: var(--kp-surface-soft); }
.kp-attr-option.is-selected { box-shadow: none; }
/* --- Pack Quantity compact --- */
.kp-attr-group--pack { margin-bottom: 18px; }
.kp-attr-group--pack .kp-option-label { font-size: 19px; font-weight: 600; margin-bottom: 14px; color: var(--kp-ink); text-transform: none; letter-spacing: 0; }
.kp-attr-group--pack .kp-attr-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.kp-attr-option--pack { min-height: 80px; padding: 10px 8px; border-radius: 12px; gap: 3px; border: 1px solid var(--kp-line); background: var(--kp-surface); }
.kp-attr-option--pack:hover { border-color: var(--kp-copper); background: var(--kp-surface-soft); }
.kp-attr-option--pack .kp-pack-num { font-size: 32px; font-weight: 700; }
.kp-attr-option--pack .kp-pack-unit { font-size: 14px; font-weight: 500; color: var(--kp-muted); }
.kp-attr-option--pack .kp-pack-text { font-size: 13px; font-weight: 700; }
.kp-attr-option--pack.kp-pack-card--recommended { border-color: #f0b486; background: #fffaf3; }
.kp-attr-option--pack.is-selected { border: 2px solid var(--kp-copper); background: #fff7ed; box-shadow: none; }
.kp-attr-option--pack.is-selected .kp-attr-check { width: 19px; height: 19px; top: -7px; right: -7px; }
.kp-attr-option--pack.is-selected .kp-attr-check::after { left: 6px; top: 3px; width: 4px; height: 7px; }
.kp-pack-badge { top: 7px; right: 7px; font-size: 8px; padding: 2px 6px; }
/* --- Key Takeaways --- */
.kp-takeaways { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--kp-content-gap); }
.kp-takeaway { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: var(--kp-border); border-radius: 999px; background: var(--kp-surface); font-size: 13px; font-weight: 600; color: var(--kp-ink); }
.kp-takeaway__ic { width: 14px; height: 14px; color: var(--kp-copper); flex: 0 0 14px; }
/* --- Responsive polish --- */
@media (max-width: 1024px) {
.kp-key-specs__primary { grid-template-columns: repeat(3, 1fr); }
.kp-key-specs__secondary { grid-template-columns: repeat(3, 1fr); }
.kp-attr-group--pack .kp-attr-options { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
:root { --kp-section-gap: 64px; --kp-heading-gap: 16px; --kp-content-gap: 26px; --kp-card-padding: 24px; --kp-block-gap: 20px; }
.kp-key-specs__primary { grid-template-columns: 1fr; }
.kp-key-specs__secondary { grid-template-columns: 1fr; }
.kp-key-spec--primary { padding: 22px; }
.kp-key-spec--primary .kp-key-spec__value { font-size: 38px; }
.kp-spec-list { grid-template-columns: 1fr; }
.kp-spec-group { padding: 22px; }
.kp-spec-note { padding: 14px 22px; }
.kp-attr-group--pack .kp-attr-options { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.kp-attr-option--pack { min-height: 68px; }
.kp-attr-option--pack .kp-pack-num { font-size: 28px; }
.kp-attr-group--pack .kp-option-label { font-size: 17px; margin-bottom: 12px; }
}
/* ============================================================
JD Retail Skin — visual reference: KeebPilot_JD_style_product_detail_mockup.html
Content + Function UNCHANGED (no PHP/Excel/Schema/JS/DOM changes).
Pure CSS skin: recolor tokens + re-skin modules to white cards / thin
borders / small radius / light shadows / JD-red accent.
Replaces the prior "UI Polish 2.0" block.
============================================================ */
/* 1) Token recolor -> JD retail palette + sans-serif system */
:root{
--kp-bg:#f5f5f5;
--kp-surface:#ffffff;
--kp-surface-soft:#fafafa;
--kp-graphite:#171b26;
--kp-ink:#333333;
--kp-muted:#666666;
--kp-line:#e7e7e7;
--kp-line-strong:#f0f0f0;
--kp-copper:#e1251b; /* JD red */
--kp-copper-deep:#c81623; /* JD red dark */
--kp-orange:#e1251b;
--kp-orange-soft:#fff1f0; /* red-soft */
--kp-success-soft:#eef7f1;
--kp-success:#2e8b57;
--kp-radius-sm:6px;
--kp-radius:6px;
--kp-radius-lg:8px;
--kp-shadow:0 2px 8px rgba(0,0,0,.04);
--kp-shadow-soft:0 1px 4px rgba(0,0,0,.03);
--kp-shadow-card:0 2px 8px rgba(0,0,0,.04);
--kp-section-gap:24px;
--kp-heading-gap:16px;
--kp-content-gap:20px;
--kp-card-padding:30px 32px;
--kp-block-gap:18px;
--kp-border:1px solid var(--kp-line);
--kp-container:1320px;
--kp-serif:"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
--kp-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}
body.kbpv58-active{background:#f5f5f5 !important;}
/* 2) Page base */
.kp-product-page{color:var(--kp-ink);font-size:15px;line-height:1.65;}
.kp-section{padding:28px 0;}
.kp-section--tight{padding:24px 0;}
.kp-section--soft{background:#fafafa;}
.kp-section--white{background:var(--kp-surface);}
/* 3) Section heading: red eyebrow + sans H2 + bottom divider */
.kp-eyebrow{color:var(--kp-copper);font-size:12px;font-weight:800;letter-spacing:.1em;margin-bottom:12px;}
.kp-section-title{font-family:var(--kp-serif);font-size:clamp(24px,2.4vw,28px);line-height:1.25;font-weight:700;letter-spacing:0;color:var(--kp-ink);margin:0;}
.kp-section-intro{color:var(--kp-muted);font-size:14px;line-height:1.6;max-width:680px;margin:8px 0 0;}
.kp-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;border-bottom:1px solid var(--kp-line);padding-bottom:16px;margin-bottom:22px;}
/* 4) Hero outer card (white / thin border / small radius / light shadow) */
.kp-product-hero{background:var(--kp-surface);border:1px solid var(--kp-line);border-radius:var(--kp-radius);box-shadow:var(--kp-shadow);padding:24px;}
.kp-product-hero .kp-offer-card{background:transparent;border:0;box-shadow:none;padding:0;}
/* Hero gallery sticky is a TWO-COLUMN-ONLY behaviour.
This JD-Retail-Skin block is appended AFTER the two `@media (max-width:960px)
{ .kp-gallery{position:static;top:auto;} }` resets above (§V5 and §V5.8.2).
A bare `position:sticky` here therefore wins by source order and re-arms
sticky inside the single-column Hero — where the grid container itself acts
as the sticky containing block, so the gallery floats the full height of the
product-info column and covers Product Name / Tags / Sold by / Price /
Stock / Pack Size / Variation.
Scope sticky to the two-column range (>=961px, matching
.kp-product-hero__grid) and re-assert the single-column reset here so no
later block can silently re-enable it. */
@media (min-width: 961px) {
.kp-gallery{position:sticky;top:104px;} /* keep sticky; no overflow:hidden on ancestor */
}
@media (max-width: 960px) {
.kp-gallery{position:static;top:auto;height:auto;max-height:none;transform:none;overflow:visible;z-index:auto;}
}
.kp-gallery__main{border:1px solid var(--kp-line);border-radius:var(--kp-radius);}
.kp-thumb{background:#fff;border:1px solid var(--kp-line);border-radius:var(--kp-radius);}
.kp-thumb.is-active{border:2px solid var(--kp-copper);}
.kp-gallery__dot.is-active{background:var(--kp-copper);}
/* 5) Hero title / description (sans, retail weight) */
.kp-product-summary--intro .kp-product-title{
font-family:var(--kp-serif);font-size:clamp(32px,3.4vw,36px);font-weight:700;line-height:1.18;
letter-spacing:-.01em;margin:0 0 10px;color:var(--kp-ink);max-width:none;
}
@media (max-width:768px){
.kp-product-summary--intro .kp-product-title{font-size:28px;line-height:1.2;}
}
.kp-product-summary__lead{color:var(--kp-muted);font-size:15px;line-height:1.6;margin:10px 0 14px;max-width:560px;}
.kp-hero-summary{color:var(--kp-muted);font-size:14px;line-height:1.6;margin:10px 0 0;}
.kp-tag{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 11px;border-radius:4px;background:#fff;border:1px solid var(--kp-line);color:var(--kp-muted);font-size:12px;font-weight:600;}
/* 6) Purchase card + price */
.kp-offer-card{border:1px solid var(--kp-line);background:var(--kp-surface);border-radius:var(--kp-radius);box-shadow:var(--kp-shadow);padding:22px;}
.kp-offer-card__status{color:var(--kp-copper);}
.kp-purchase-price,.kp-price-current{font-family:var(--kp-serif);color:var(--kp-copper);font-size:30px;line-height:1;font-weight:800;letter-spacing:0;}
.kp-unit-price{color:var(--kp-copper-deep);font-size:13px;font-weight:800;}
.kp-stock-pill{color:var(--kp-success);}
/* 7) Variant option labels */
.kp-attr-group .kp-option-label{display:flex;align-items:baseline;justify-content:flex-start;gap:0;margin-bottom:10px;font-size:15px;font-weight:600;color:var(--kp-ink);text-transform:none;letter-spacing:0;}
.kp-option-current{color:var(--kp-muted);font-weight:600;}
/* 8) Color swatches */
.kp-attr-option--swatch[style*="--swatch"]{width:28px;height:28px;border-radius:50%;box-shadow:0 0 0 1px #bbb;}
.kp-attr-option.is-selected.kp-attr-option--swatch[style*="--swatch"]{box-shadow:0 0 0 2px var(--kp-copper);}
.kp-attr-option.is-selected .kp-attr-check{background:var(--kp-copper);}
/* 9) Generic selected option (red accent) */
.kp-attr-option.is-selected{border-color:var(--kp-copper);background:var(--kp-orange-soft);color:var(--kp-copper-deep);box-shadow:0 0 0 1px var(--kp-copper) inset;}
/* 10) Pack Quantity: compact radio tiles (number only) */
.kp-attr-group--pack{margin-bottom:16px;}
.kp-attr-group--pack .kp-option-label{font-size:16px;margin-bottom:10px;}
.kp-attr-group--pack .kp-attr-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:8px;}
.kp-attr-option--pack{
min-height:46px;min-width:58px;padding:0 14px;border-radius:5px;border:1px solid #d0d0d0;background:#fff;
color:var(--kp-ink);font-size:17px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;
position:relative;cursor:pointer;transition:border-color .12s,background .12s;
}
.kp-attr-option--pack:hover:not(.is-disabled):not(.is-soldout){border-color:#999;}
.kp-attr-option--pack .kp-pack-num{font-size:17px;font-weight:600;line-height:1;}
.kp-attr-option--pack .kp-pack-unit,
.kp-attr-option--pack .kp-pack-badge,
.kp-attr-option--pack .kp-pack-text{display:none;}
.kp-attr-option--pack .kp-attr-check{display:none;}
.kp-attr-option--pack.is-selected{background:var(--kp-orange-soft);color:var(--kp-copper);border-color:var(--kp-copper);box-shadow:none;}
.kp-attr-option--pack.is-selected .kp-pack-num{color:var(--kp-copper);}
.kp-attr-option--pack.is-selected:hover{border-color:var(--kp-copper);}
.kp-attr-option--pack.kp-pack-card--recommended{background:#fff;border-color:#d0d0d0;}
/* 11) Order quantity */
.kp-buy-row{display:block;margin-bottom:10px;}
.kp-buy-row .kp-qty-control{width:128px;max-width:none;}
.kp-qty-control{display:grid;grid-template-columns:38px 1fr 38px;min-height:40px;border:1px solid #ccc;border-radius:5px;overflow:hidden;background:#fff;}
/* 12) Dual CTA */
.kp-cta-row{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;margin-top:14px;}
.kp-cta-row .kp-btn{width:100%;min-height:48px;padding:0 16px;font-size:16px;font-weight:700;border-radius:5px;justify-content:center;}
.kp-btn--primary{background:var(--kp-copper);color:#fff;border-color:var(--kp-copper);}
.kp-btn--primary:hover{background:var(--kp-copper-deep);}
.kp-btn--secondary{background:#fff;border:1px solid var(--kp-copper);color:var(--kp-copper);}
.kp-btn--secondary:hover{background:var(--kp-orange-soft);}
.kp-offer-card[data-state="available_direct_preview"] .kp-cta-row .kp-btn{opacity:.55;cursor:not-allowed;}
@media (max-width:380px){.kp-cta-row{grid-template-columns:1fr;}}
/* 13) Shipping microcopy */
.kp-shipping-microcopy{display:flex;align-items:center;gap:6px;margin:12px 0 0;font-size:12px;line-height:1.4;color:var(--kp-muted);}
.kp-shipping-microcopy .kp-shipping-ic{flex:0 0 14px;color:var(--kp-copper);}
/* 14) Key specifications */
.kp-key-specs__primary{border:1px solid var(--kp-line);border-radius:var(--kp-radius);overflow:hidden;background:var(--kp-line);box-shadow:var(--kp-shadow);}
.kp-key-spec--primary{background:var(--kp-surface);padding:26px 30px;}
.kp-key-spec--primary .kp-key-spec__value{font-family:var(--kp-serif);font-size:28px;font-weight:800;color:var(--kp-ink);line-height:1;letter-spacing:0;}
.kp-key-spec--primary .kp-key-spec__label{font-size:13px;color:var(--kp-muted);font-weight:600;}
.kp-key-spec--secondary{padding:16px 0 0;}
.kp-key-spec--secondary .kp-key-spec__value{font-size:16px;font-weight:700;color:var(--kp-ink);}
.kp-key-spec--secondary .kp-key-spec__label{font-size:12px;color:var(--kp-muted);font-weight:600;}
/* 15) Sound & Feel */
.kp-panel{border:1px solid var(--kp-line);border-radius:var(--kp-radius);background:var(--kp-surface);box-shadow:var(--kp-shadow);overflow:hidden;}
.kp-panel h3{font-family:var(--kp-serif);font-size:20px;font-weight:700;margin:0;}
.kp-feel-visual{background:#fafafa;}
.kp-feel-layout{min-height:auto;}
/* 16) Compatibility + takeaways */
.kp-takeaway{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid #f2c8c5;background:var(--kp-orange-soft);color:var(--kp-copper-deep);border-radius:4px;font-size:13px;font-weight:600;}
.kp-takeaway__ic{width:14px;height:14px;color:var(--kp-copper);flex:0 0 14px;}
.kp-compat-grid{gap:16px;margin-top:18px;}
.kp-compat-item{padding:22px;border-radius:var(--kp-radius);background:var(--kp-surface);border:1px solid var(--kp-line);min-height:auto;}
.kp-compat-item__icon{color:var(--kp-copper);}
.kp-compat-item strong{font-family:var(--kp-serif);font-size:17px;font-weight:700;color:var(--kp-ink);}
.kp-compat-item p{color:var(--kp-muted);font-size:13px;line-height:1.6;}
/* 17) Deep Dive (unified container, alternating rows, thin dividers) */
.kp-story-stack{display:block;background:var(--kp-surface);border:1px solid var(--kp-line);border-radius:var(--kp-radius);box-shadow:var(--kp-shadow);padding:0;}
.kp-story-block{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;align-items:center;padding:32px;border-bottom:1px solid var(--kp-line);}
.kp-story-block--reverse{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);}
/* 5.8.4: no-image deep-dive block = full-width single text column (cascade-safe:
placed after the section-17 base rules so equal-specificity later-wins holds,
independent of :has() browser support). */
.kp-story-stack .kp-story-block--textonly,
.kp-story-stack .kp-story-block--textonly.kp-story-block--reverse{grid-template-columns:1fr;max-width:none;margin-left:0;margin-right:0;}
.kp-story-stack .kp-story-block--textonly .kp-story-copy{max-width:1000px;}
.kp-story-block:last-child{border-bottom:0;}
.kp-story-visual{border-radius:var(--kp-radius);min-height:320px;background:#f0f0f0;box-shadow:none;overflow:hidden;}
.kp-story-visual--light{border:1px solid var(--kp-line);}
.kp-story-copy h3{font-family:var(--kp-serif);font-size:21px;font-weight:700;line-height:1.25;letter-spacing:0;color:var(--kp-ink);max-width:none;margin:0 0 12px;}
.kp-story-copy > p{color:var(--kp-muted);font-size:15px;line-height:1.7;max-width:none;margin:0 0 14px;}
.kp-story-verdict{border-left:3px solid var(--kp-copper);background:var(--kp-orange-soft);color:var(--kp-ink);font-size:13px;line-height:1.65;margin-top:18px;padding:14px 16px;}
.kp-story-verdict strong{color:var(--kp-copper-deep);}
.kp-story-index{font-family:var(--kp-serif);color:rgba(225,37,27,.08);}
.kp-story-list li{border-top:1px solid var(--kp-line);}
.kp-story-list strong{color:var(--kp-ink);}
.kp-story-list span{color:var(--kp-muted);}
/* 18) Detailed specifications table */
.kp-specs-shell{border:1px solid var(--kp-line);border-radius:var(--kp-radius);background:var(--kp-surface);box-shadow:var(--kp-shadow);overflow:hidden;}
.kp-spec-group h3{font-family:var(--kp-serif);font-size:13px;font-weight:800;padding:14px 18px;background:#f7f7f7;color:var(--kp-ink);text-transform:uppercase;letter-spacing:.04em;}
.kp-spec-row{padding:14px 18px;font-size:14px;}
.kp-spec-row dt{color:var(--kp-muted);}
.kp-spec-row dd{color:var(--kp-ink);font-weight:600;text-align:right;}
.kp-spec-note{color:var(--kp-muted);}
/* 19) What's in the Box */
.kp-box-wrap{display:grid;grid-template-columns:44% 56%;gap:0;border:1px solid var(--kp-line);border-radius:var(--kp-radius);overflow:hidden;background:var(--kp-surface);box-shadow:var(--kp-shadow);}
.kp-box-visual{background:#fafafa;}
.kp-box-visual__img{width:100%;height:100%;object-fit:cover;}
.kp-box-copy{padding:28px 30px;}
.kp-box-copy__label{color:var(--kp-copper);}
.kp-box-qty__num{font-family:var(--kp-serif);color:var(--kp-ink);font-size:28px;}
.kp-box-color{color:var(--kp-copper-deep) !important;}
.kp-box-includes li{border-top:1px solid var(--kp-line);}
.kp-box-includes li strong{color:var(--kp-ink);}
/* 20) FAQ */
.kp-faq-question{font-size:17px;font-weight:700;color:var(--kp-ink);}
.kp-product-page .kp-faq-question:hover{background:var(--kp-orange-soft);color:var(--kp-copper-deep);border-bottom-color:var(--kp-copper);}
.kp-product-page .kp-faq-item.is-open .kp-faq-question{background:var(--kp-orange-soft);color:var(--kp-copper-deep);border-left-color:var(--kp-copper);}
.kp-product-page .kp-faq-item.is-open .kp-faq-answer{border-left-color:var(--kp-copper);}
.kp-product-page .kp-faq-question:focus-visible{outline-color:rgba(225,37,27,.35);}
/* 21) Related guides */
.kp-guide-card{border:1px solid var(--kp-line);border-radius:var(--kp-radius);background:var(--kp-surface);box-shadow:var(--kp-shadow);overflow:hidden;}
.kp-guide-card__visual{background:#f0f0f0;min-height:100px;}
.kp-guide-card h3{font-family:var(--kp-serif);font-size:16px;font-weight:700;line-height:1.2;margin:0 0 6px;}
.kp-guide-card p{color:var(--kp-muted);font-size:12px;margin:0 0 12px;}
/* 22) Quick decision / fit */
.kp-fit-panel{border-top:2px solid var(--kp-copper);border-radius:0 0 var(--kp-radius) var(--kp-radius);background:var(--kp-surface);box-shadow:var(--kp-shadow);padding:24px 28px;}
.kp-fit-panel h3{font-family:var(--kp-serif);font-size:20px;font-weight:700;margin:0 0 14px;}
.kp-fit-item strong{font-size:14px;color:var(--kp-ink);}
.kp-fit-item p{color:var(--kp-muted);font-size:12px;}
.kp-fit-item__icon{background:var(--kp-orange-soft);color:var(--kp-copper);}
/* 23) How many */
.kp-how-many__packs strong{color:var(--kp-copper-deep);}
/* 24) Compare table */
.kp-compare-shell{border:1px solid var(--kp-line);border-radius:var(--kp-radius);background:#fff;box-shadow:var(--kp-shadow);}
.kp-compare-cell{border-color:var(--kp-line);}
.kp-compare-cell--label{background:#fafafa;}
.kp-compare-cell--current{background:var(--kp-orange-soft);}
.kp-compare-product-head.kp-compare-cell--current{box-shadow:inset 0 3px 0 var(--kp-copper);}
.kp-compare-current-label{background:var(--kp-copper);}
.kp-compare-good{color:var(--kp-copper-deep);}
.kp-compare-detail-link{color:var(--kp-copper-deep);}
/* 25) Bottom CTA + nav */
.kp-bottom-cta{border:1px solid var(--kp-line);border-radius:var(--kp-radius);background:var(--kp-surface);box-shadow:var(--kp-shadow);padding:24px;}
.kp-bottom-cta__icon{background:var(--kp-copper);}
.kp-bottom-cta h3{font-family:var(--kp-serif);font-size:22px;font-weight:700;}
.kp-product-page .kp-section-nav{background:rgba(255,255,255,.97);border-top:1px solid var(--kp-line);border-bottom:1px solid var(--kp-line);}
.kp-section-nav a:hover{color:var(--kp-copper-deep);background:var(--kp-orange-soft);}
.kp-section-nav a.is-current{background:var(--kp-orange-soft);color:var(--kp-copper);}
.kp-product-page .kp-section-nav a.kp-section-nav__cta{background:var(--kp-copper);}
.kp-product-page .kp-section-nav a.kp-section-nav__cta:hover{background:var(--kp-copper-deep);}
.kp-buy-trust{color:var(--kp-muted);font-size:11px;}
.kp-offer-assurance span::before{color:var(--kp-copper);}
.kp-video-play{color:var(--kp-copper-deep);}
/* 26) Mobile polish */
@media (max-width:640px){
.kp-section{padding:18px 0;}
.kp-section--tight{padding:16px 0;}
.kp-product-hero{padding:16px;}
.kp-section-title{font-size:22px;}
.kp-story-block,.kp-story-block--reverse{grid-template-columns:1fr;gap:22px;padding:22px;}
.kp-box-wrap{grid-template-columns:1fr;}
.kp-compare-note>div{border-radius:6px;}
}
/* ============================================================
JD Final Polish — visual収口 (CSS ONLY, no DOM/JS/function change)
Goals:
A) uniform 1320px container (hero + white sections no longer full-bleed)
B) re-established type scale (stop over-compressing body text)
C) stronger white-card hierarchy on #f5f5f5 (kill "white-paper merge")
D) hero 5-group vertical rhythm
============================================================ */
/* --- 0) force pure neutral page background #F5F5F5 ---
The frozen base template echoes an inline
AFTER the external CSS link, so equal-specificity !important in this file loses by document order.
Raise specificity to (0,1,2) with `html body.kbpv58-active` so it wins regardless of order. Visual-only. */
html body.kbpv58-active{ background:#f5f5f5 !important; }
/* --- tokens --- */
:root{
--kp-section-gap: 24px;
--kp-section-gap-m: 16px;
--kp-fs-h1: clamp(30px, 3vw, 34px);
--kp-fs-h2: clamp(24px, 2.2vw, 26px);
--kp-fs-h3: 19px;
--kp-fs-body: 15px;
--kp-fs-body-sm: 14.5px;
--kp-fs-meta: 13px;
--kp-fs-meta-sm: 12.5px;
--kp-lh-body: 1.7;
--kp-shadow: 0 2px 10px rgba(0,0,0,.05);
--kp-shadow-card: 0 2px 10px rgba(0,0,0,.05);
}
/* --- A) width uniformity: hero + white sections match the 1320 body --- */
.kp-product-page .kp-product-hero{
max-width: var(--kp-container);
margin-left: auto;
margin-right: auto;
padding: 28px;
}
.kp-product-page .kp-section--white{
max-width: var(--kp-container);
margin: var(--kp-section-gap) auto 0;
background: var(--kp-surface);
}
/* --- C) section rhythm: uniform gray gap between white cards --- */
.kp-product-page .kp-section{ padding: 0; margin-top: var(--kp-section-gap); }
.kp-product-page .kp-section--tight{ padding: 0; margin-top: var(--kp-section-gap); }
.kp-product-page .kp-product-hero{ margin-bottom: var(--kp-section-gap); }
/* --- B) typography scale --- */
.kp-product-page{ font-size: var(--kp-fs-body); line-height: var(--kp-lh-body); }
.kp-product-page .kp-product-summary--intro .kp-product-title{
font-size: var(--kp-fs-h1);
line-height: 1.18;
font-weight: 700;
letter-spacing: -.01em;
}
.kp-product-page .kp-section-title{
font-size: var(--kp-fs-h2);
line-height: 1.3;
}
.kp-product-page .kp-panel h3,
.kp-product-page .kp-story-copy h3,
.kp-product-page .kp-fit-panel h3,
.kp-product-page .kp-bottom-cta h3{
font-size: var(--kp-fs-h3);
line-height: 1.3;
}
/* un-compress the over-small body / meta text */
.kp-product-page .kp-hero-summary{ font-size: 15px; line-height: 1.7; }
.kp-product-page .kp-product-summary__lead{ font-size: 15px; line-height: 1.7; }
.kp-product-page .kp-fit-item strong{ font-size: 14.5px; }
.kp-product-page .kp-fit-item p{ font-size: 14.5px; line-height: 1.7; color: var(--kp-muted); }
.kp-product-page .kp-guide-card p{ font-size: 13px; line-height: 1.55; }
.kp-product-page .kp-buy-trust{ font-size: 12.5px; line-height: 1.5; }
.kp-product-page .kp-shipping-microcopy{ font-size: 12.5px; }
.kp-product-page .kp-section-intro{ font-size: 14.5px; line-height: 1.7; }
.kp-product-page .kp-faq-answer{ font-size: 15px; line-height: 1.7; }
.kp-product-page .kp-spec-row{ font-size: 15px; }
.kp-product-page .kp-spec-row dt{ font-size: 14px; }
.kp-product-page .kp-key-spec--secondary .kp-key-spec__value{ font-size: 16px; }
.kp-product-page .kp-key-spec--secondary .kp-key-spec__label{ font-size: 13px; }
.kp-product-page .kp-how-many__packs{ font-size: 19px; }
.kp-product-page .kp-how-many__packs strong{ font-size: 19px; color: var(--kp-copper-deep); }
.kp-product-page .kp-how-many__note{ font-size: 13px; line-height: 1.6; }
.kp-product-page .kp-product-data__row dd{ font-size: 15px; }
.kp-product-page .kp-product-data__row dt{ font-size: 12px; }
.kp-product-page .kp-tag{ font-size: 12.5px; }
.kp-product-page .kp-takeaway{ font-size: 13px; }
/* --- C) white-card hierarchy: lift cards off #f5f5f5 --- */
.kp-product-page .kp-key-specs__primary,
.kp-product-page .kp-panel,
.kp-product-page .kp-story-stack,
.kp-product-page .kp-specs-shell,
.kp-product-page .kp-box-wrap,
.kp-product-page .kp-guide-card,
.kp-product-page .kp-fit-panel,
.kp-product-page .kp-compare-shell,
.kp-product-page .kp-bottom-cta,
.kp-product-page .kp-offer-card,
.kp-product-page .kp-product-hero{ box-shadow: var(--kp-shadow); }
.kp-product-page .kp-card--feature{ box-shadow: var(--kp-shadow); }
/* --- D) hero 5-group vertical rhythm (no DOM change) --- */
.kp-product-page .kp-eyebrow{ margin-bottom: 6px; }
.kp-product-page .kp-summary-tags{ margin-top: 12px; }
.kp-product-page .kp-product-info .kp-offer-card{ margin-top: 20px; }
.kp-product-page .kp-offer-card__status{ margin-bottom: 10px; }
.kp-product-page .kp-purchase-head{ margin: 16px 0 8px; }
.kp-product-page .kp-unit-price{ margin: 0; }
.kp-product-page .kp-stock-pill{ margin-top: 4px; }
.kp-product-page .kp-variant{ margin-top: 18px; }
.kp-product-page .kp-variant .kp-attr-group{ margin-bottom: 16px; }
.kp-product-page .kp-draft-preview-banner{ margin-top: 14px; }
.kp-product-page .kp-buy-form{ margin-top: 16px; }
.kp-product-page .kp-cta-row{ margin-top: 14px; }
.kp-product-page .kp-shipping-microcopy{ margin-top: 14px; }
.kp-product-page .kp-draft-preview-note{ margin-top: 12px; }
.kp-product-page .kp-buy-trust{ margin-top: 10px; }
.kp-product-page .kp-offer-quickspecs{ margin-top: 16px; }
.kp-product-page .kp-hero-summary{ margin-top: 14px; }
/* --- mobile --- */
@media (max-width: 640px){
.kp-product-page .kp-section{ margin-top: var(--kp-section-gap-m); }
.kp-product-page .kp-section--tight{ margin-top: var(--kp-section-gap-m); }
.kp-product-page .kp-product-hero{ padding: 18px; margin-bottom: var(--kp-section-gap-m); }
.kp-product-page .kp-section--white{ margin: var(--kp-section-gap-m) auto 0; }
.kp-product-page .kp-product-summary--intro .kp-product-title{ font-size: 28px; line-height: 1.2; }
.kp-product-page .kp-section-title{ font-size: 22px; }
.kp-product-page .kp-spec-row{ font-size: 14px; }
}
/* ============================================================
JD Spec Table Cleanup — Detailed Specifications PRESENTATION ONLY
Scope: .kp-product-page .kp-specs-shell (no global pollution).
Goal: one param per row, fixed Label/Value grid, light group header,
light horizontal dividers, full long-value wrapping. No content/data change.
============================================================ */
.kp-product-page .kp-specs-shell{
border:1px solid var(--kp-line);
border-radius:var(--kp-radius);
background:var(--kp-surface);
box-shadow:var(--kp-shadow);
overflow:hidden;
}
/* single column of Label/Value pairs (kill the 2-col "Label|Value|Label|Value" scatter) */
.kp-product-page .kp-specs-shell .kp-spec-list{
display:grid;
grid-template-columns:1fr;
gap:0;
}
/* group: light JD-style header (red left accent + light gray), no heavy bar */
.kp-product-page .kp-specs-shell .kp-spec-group{
display:block;
border-bottom:1px solid var(--kp-line);
padding:0;
}
.kp-product-page .kp-specs-shell .kp-spec-group:last-child{ border-bottom:0; }
.kp-product-page .kp-specs-shell .kp-spec-group h3{
margin:0;
min-height:38px;
display:flex;
align-items:center;
padding:10px 16px;
background:#fafafa;
border-left:3px solid var(--kp-copper);
font-family:var(--kp-sans);
font-size:13px;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--kp-ink);
}
/* rows: fixed label/value grid, top-aligned, light horizontal dividers only */
.kp-product-page .kp-specs-shell .kp-spec-row{
display:grid;
grid-template-columns:minmax(180px,28%) 1fr;
align-items:start;
gap:16px;
min-height:46px;
padding:13px 16px;
border-left:0;
border-bottom:1px solid #f0f0f0;
font-size:15px;
transition:background .12s ease;
}
.kp-product-page .kp-specs-shell .kp-spec-row:last-child{ border-bottom:0; }
.kp-product-page .kp-specs-shell .kp-spec-row:hover{ background:#fafafa; }
.kp-product-page .kp-specs-shell .kp-spec-row dt{
margin:0;
color:#777777;
font-size:13.5px;
font-weight:500;
line-height:1.5;
}
.kp-product-page .kp-specs-shell .kp-spec-row dd{
margin:0;
font-weight:600;
color:var(--kp-ink);
font-size:14.5px;
line-height:1.6;
text-align:left;
}
.kp-product-page .kp-specs-shell .kp-spec-note{
border-top:1px solid #f0f0f0;
background:transparent;
padding:14px 16px;
font-size:12px;
color:#8a8279;
}
/* --- mobile: stack Label over Value, no horizontal scroll / truncation --- */
@media (max-width: 640px){
.kp-product-page .kp-specs-shell .kp-spec-row{
grid-template-columns:1fr;
gap:4px;
min-height:0;
padding:12px 14px;
}
.kp-product-page .kp-specs-shell .kp-spec-row dt{
font-size:12.5px;
margin-bottom:3px;
}
.kp-product-page .kp-specs-shell .kp-spec-row dd{
font-size:14.5px;
}
.kp-product-page .kp-specs-shell .kp-spec-group h3{
padding:9px 14px;
}
}
/* ============================================================
JD Final UI Cleanup — 4 areas only (PRESENTATION ONLY)
1) Color Selector: "small dot + name" pill (uses real data-value; no JS/PHP change)
2) Shipping microcopy: text set in PHP template (global-sales copy)
3) What's in the Box: tighter right column (no image/content change)
4) Product Data & Verification: lighter, more scannable rows
No content / data / field / order change. No other module touched.
============================================================ */
/* --- 1) Color swatch → "small color dot + name" pill --- */
.kp-product-page .kp-attr-group[data-display="color_swatch"] .kp-attr-options{
flex-wrap: wrap;
overflow: visible;
padding-bottom: 0;
}
.kp-attr-option--swatch[style*="--swatch"]{
width: auto;
height: 38px;
min-height: 38px;
padding: 0 12px;
border: 1px solid #DADADA;
border-radius: 5px;
background: #FFFFFF;
color: #333333;
font-size: 13px;
font-weight: 600;
line-height: 1.1;
display: inline-flex;
align-items: center;
gap: 8px;
overflow: visible;
box-shadow: none;
}
/* small color dot (never stretched: fixed size + flex:0 0 auto) */
.kp-attr-option--swatch[style*="--swatch"]::before{
content: '';
width: 11px; height: 11px;
flex: 0 0 auto;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: var(--swatch);
box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}
/* real color name from data-value (no markup/JS change) */
.kp-attr-option--swatch[style*="--swatch"]::after{
content: attr(data-value);
white-space: nowrap;
order: 1;
}
/* selected: JD-red border + light red bg + red text (no large check badge) */
.kp-attr-option.is-selected.kp-attr-option--swatch[style*="--swatch"]{
border-color: #E1251B;
background: #FFF1F0;
color: #E1251B;
font-weight: 600;
box-shadow: 0 0 0 1px #E1251B inset;
}
.kp-attr-option--swatch[style*="--swatch"]:hover:not(.is-disabled):not(.is-soldout){
border-color: #999999;
}
.kp-attr-option.is-selected.kp-attr-option--swatch[style*="--swatch"] .kp-attr-check,
.kp-attr-option--swatch[style*="--swatch"] .kp-attr-check{ display: none; }
/* --- 2) Shipping microcopy (copy edited in PHP; style here) --- */
.kp-product-page .kp-shipping-microcopy{
font-size: 12.5px;
line-height: 1.4;
color: #777777;
}
.kp-product-page .kp-shipping-microcopy .kp-shipping-ic{
flex: 0 0 15px;
width: 15px; height: 15px;
color: #E1251B;
}
/* --- 3) What's in the Box: tighter right column (image/content untouched) --- */
.kp-product-page .kp-box-copy{ padding: 24px 26px; }
.kp-product-page .kp-box-copy__label{ font-size: 12px; }
.kp-product-page .kp-box-includes{ margin-top: 14px; }
.kp-product-page .kp-box-includes li{
padding: 10px 0;
border-bottom: 1px solid #F0F0F0;
}
.kp-product-page .kp-box-includes li span{
font-size: 13px;
font-weight: 500;
color: #888888;
}
.kp-product-page .kp-box-includes li strong{
font-size: 15px;
font-weight: 600;
color: #333333;
}
/* --- 4) Product Data & Verification: lighter, scannable rows --- */
.kp-product-page .kp-product-data__list{
border: 0;
background: transparent;
border-radius: 0;
overflow: visible;
}
.kp-product-page .kp-product-data__row{
grid-template-columns: minmax(120px, 30%) 1fr;
min-height: 44px;
padding: 12px 16px;
border-bottom: 1px solid #F0F0F0;
}
.kp-product-page .kp-product-data__row dt{
font-size: 13px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
color: #888888;
}
.kp-product-page .kp-product-data__row dd{
font-size: 14px;
font-weight: 600;
color: #444444;
}
/* §十五：Verification 模块副标题轻量化：13px / #777 */
.kp-product-page #product-data .kp-section-intro {
font-size: 13px;
color: #777;
}
/* --- mobile --- */
@media (max-width: 640px){
.kp-product-page .kp-box-copy{ padding: 18px 20px; }
.kp-product-page .kp-product-data__row{ grid-template-columns: 1fr; gap: 2px; padding: 12px 14px; }
.kp-product-page .kp-attr-option--swatch[style*="--swatch"]{ height: 36px; min-height: 36px; padding: 0 10px; font-size: 13px; }
}
/*
* Sound Test Frozen UI regression fix #1.
*
* The frozen V5.9 component is a single full-width media card: the media is
* a background layer, while the copy remains a stable foreground block.
* Keep every rule scoped to #sound-test so shared section titles and
* .kp-module-img instances in Hero, Deep Dive, Specs, FAQ, and Related
* Products retain their frozen behavior.
*/
#sound-test.kp-section--dark .kp-section-title {
color: #fff;
}
#sound-test .kp-video-card__copy h3 {
color: #fff;
}
#sound-test .kp-video-card .kp-module-img {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
max-width: none;
border-radius: inherit;
object-fit: cover;
object-position: center;
}
#sound-test .kp-video-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(90deg, rgba(8, 8, 11, .88), rgba(8, 8, 11, .20)),
radial-gradient(circle at 72% 45%, rgba(168, 132, 177, .24), transparent 35%);
}
#sound-test .kp-video-card__copy {
width: min(100%, 500px);
min-width: 0;
max-width: 500px;
flex: 0 1 500px;
}
/* Reuse the frozen responsive breakpoints while keeping the play control in
* the reserved media area instead of allowing it to cover valid long copy. */
@media (max-width: 1180px) {
#sound-test .kp-video-play {
top: 88px;
}
}
@media (max-width: 640px) {
#sound-test .kp-video-card__copy {
width: 100%;
max-width: 390px;
flex-basis: 390px;
}
#sound-test .kp-video-play {
top: 60px;
}
}