/* ─────────────────────────────────────────────
   Product Showcase — styles aligned with the
   sse theme (homepage) design system.
   Falls back gracefully when theme vars are absent.
   ───────────────────────────────────────────── */

body.tax-product_cat .wp-block-post-title,
body.tax-product_cat .entry-header,
body.single-product .wp-block-post-title,
body.single-product .entry-header,
body.single-product .wp-block-post-author,
body.single-product .wp-block-post-date,
body.single-product .wp-block-post-author-name,
body.single-product .wp-block-post-author-biography,
body.single-product .post-author,
body.single-product .byline,
body.single-product .posted-on,
body.single-product .wp-block-group:has(.wp-block-post-author),
body.single-product .wp-block-group:has(.wp-block-post-date),
body.single-product .wp-block-group.has-small-font-size {
    display: none !important;
}

/* ── Container ── */
.ps-container {
    width: 100%;
    max-width: var(--container, 1440px);
    margin: 0 auto;
    padding: clamp(28px, 5vw, 56px) var(--gutter, 32px);
    box-sizing: border-box;
}
.ps-container > :first-child {
    margin-top: 0;
}
.ps-container > :last-child {
    margin-bottom: 0;
}

/* ── Breadcrumb (homepage meta style) ── */
.ps-breadcrumb {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--muted, #777);
    padding: 0;
    margin: 0 0 clamp(24px, 4vw, 48px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.ps-breadcrumb a {
    color: var(--muted, #777);
    text-decoration: none;
    transition: color 0.15s;
}
.ps-breadcrumb a:hover {
    color: var(--accent, #7a6ce0);
}
.ps-sep {
    color: var(--border, #e8e6ee);
    font-size: 12px;
}
.ps-current {
    color: var(--fg, #222);
    font-weight: 500;
}

/* ── Titles (Lora serif, like homepage headings) ── */
.ps-single-title,
.ps-archive-title {
    font-family: var(--font-display, Georgia, 'Times New Roman', serif);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--fg, #222);
    margin: 0;
}
.ps-single-title {
    font-size: clamp(28px, 3vw, 38px);
    margin-bottom: var(--gap-md, 20px);
}
.ps-archive-title {
    font-size: clamp(30px, 3.6vw, 44px);
    margin-bottom: var(--gap-lg, 32px);
}

/* ── Product detail layout ── */
.ps-detail {
    display: flex;
    gap: clamp(28px, 5vw, 64px);
    margin: 0;
    align-items: flex-start;
}
.ps-detail-images {
    flex: 0 0 420px;
    max-width: 100%;
}
.ps-main-img-wrap {
    position: relative;
}
.ps-main-img-wrap img {
    width: 100%;
    border-radius: var(--radius-lg, 16px);
    display: block;
    border: 1px solid var(--border, #e8e6ee);
    box-shadow: 0 12px 48px color-mix(in oklch, var(--fg, #222) 10%, transparent);
    background: var(--surface, #fff);
}
.ps-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: color-mix(in oklch, var(--fg, #222) 55%, transparent);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    line-height: 36px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.25s, background 0.2s;
    z-index: 2;
    padding: 0;
}
.ps-main-img-wrap:hover .ps-nav {
    opacity: 1;
}
.ps-nav:hover {
    background: color-mix(in oklch, var(--fg, #222) 80%, transparent);
}
.ps-nav-left { left: 10px; }
.ps-nav-right { right: 10px; }

.ps-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.ps-lb-image {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 6px;
}
.ps-lb-close {
    position: absolute;
    top: 16px;
    right: 24px;
    color: #fff;
    font-size: 36px;
    cursor: pointer;
    line-height: 1;
    opacity: 0.7;
}
.ps-lb-close:hover { opacity: 1; }
.ps-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 40px;
    width: 50px;
    height: 60px;
    cursor: pointer;
    border-radius: 8px;
    line-height: 60px;
    text-align: center;
    transition: background 0.2s, border-color 0.2s;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.ps-lb-nav:hover { background: rgba(0, 0, 0, 0.6); border-color: rgba(255,255,255,0.4); }
.ps-lb-prev { left: 16px; }
.ps-lb-next { right: 16px; }

.ps-thumb-strip {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.ps-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius, 10px);
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.75;
    transition: all 0.2s;
}
.ps-thumb.active,
.ps-thumb:hover {
    border-color: var(--accent, #7a6ce0);
    opacity: 1;
}

/* ── Info column (title sits here, next to gallery) ── */
.ps-detail-info {
    flex: 1;
    min-width: 0;
    padding-top: 4px;
}
.ps-detail-desc {
    font-size: var(--fs-body, 16px);
    line-height: 1.7;
    color: var(--fg, #222);
    max-width: 60ch;
}
.ps-detail-desc p {
    margin: 0 0 1em;
}
.ps-detail-desc p:last-child {
    margin-bottom: 0;
}

/* ── Share buttons ── */
.ps-share {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--gap-lg, 32px);
    padding-top: var(--gap-md, 20px);
    border-top: 1px solid var(--border, #e8e6ee);
}
.ps-share-label {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 11px;
    color: var(--muted, #777);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-right: 6px;
}
.ps-share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--muted, #777);
    background: var(--fg-soft, #f0eef4);
    text-decoration: none;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
}
.ps-share-link:hover {
    color: #fff;
}
.ps-share-facebook:hover { background: #1877f2; }
.ps-share-twitter:hover { background: #000; }
.ps-share-linkedin:hover { background: #0a66c2; }
.ps-share-whatsapp:hover { background: #25d366; }
.ps-share-instagram:hover { background: #e1306c; }

/* ── Category nav (archive) ── */
.ps-cat-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 var(--gap-lg, 32px);
    padding: 0;
    border-top: 1px solid var(--border, #e8e6ee);
    border-bottom: 1px solid var(--border, #e8e6ee);
    padding-block: 4px;
}
.ps-cat-nav a {
    display: block;
    padding: 7px 18px;
    border: 1px solid var(--border, #e8e6ee);
    border-radius: 999px;
    color: var(--muted, #777);
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s;
}
.ps-cat-nav a:hover {
    border-color: var(--accent, #7a6ce0);
    color: var(--accent, #7a6ce0);
}
.ps-cat-nav a.active {
    background: var(--accent, #7a6ce0);
    color: var(--surface, #fff);
    border-color: var(--accent, #7a6ce0);
}

.ps-cat-desc {
    margin: 0 0 var(--gap-lg, 32px);
    padding: var(--gap-md, 20px) var(--gap-lg, 32px);
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e8e6ee);
    border-left: 3px solid var(--accent, #7a6ce0);
    border-radius: var(--radius, 10px);
    line-height: 1.7;
    color: var(--fg, #222);
    max-width: 72ch;
}
.ps-cat-desc p:last-child {
    margin-bottom: 0;
}

.ps-search {
    display: flex;
    gap: 8px;
    margin: 0 0 var(--gap-lg, 32px);
    max-width: 400px;
}
.ps-search input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border, #e8e6ee);
    border-radius: var(--radius, 10px);
    font-size: 14px;
    font-family: inherit;
    color: var(--fg, #222);
    background: var(--surface, #fff);
    outline: none;
    transition: border-color 0.2s;
}
.ps-search input:focus {
    border-color: var(--accent, #7a6ce0);
}
.ps-search button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--accent, #7a6ce0);
    background: var(--accent, #7a6ce0);
    color: var(--surface, #fff);
    border-radius: var(--radius, 10px);
    cursor: pointer;
    transition: background 0.2s;
}
.ps-search button:hover {
    background: color-mix(in oklch, var(--accent, #7a6ce0) 88%, var(--fg, #222));
}

/* ── Archive grid / cards ── */
.ps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--gap-lg, 32px);
    margin: 0;
}
.ps-card {
    border: 1px solid var(--border, #e8e6ee);
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    background: var(--surface, #fff);
    transition: box-shadow 0.2s, transform 0.2s;
}
.ps-card:hover {
    box-shadow: 0 12px 48px color-mix(in oklch, var(--fg, #222) 12%, transparent);
    transform: translateY(-2px);
}
.ps-card-img-link {
    display: block;
}
.ps-card-img img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.ps-card h3 {
    margin: var(--gap-md, 20px) var(--gap-md, 20px) 6px;
    font-family: var(--font-display, Georgia, serif);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.ps-card h3 a {
    text-decoration: none;
    color: var(--fg, #222);
}
.ps-card h3 a:hover {
    color: var(--accent, #7a6ce0);
}
.ps-excerpt {
    margin: 8px var(--gap-md, 20px) var(--gap-md, 20px);
    font-size: 14px;
    color: var(--muted, #777);
    line-height: 1.6;
}
.ps-excerpt p {
    margin: 0;
}

/* ── Pagination ── */
.ps-pagination {
    margin: var(--gap-xl, 56px) 0 var(--gap-md, 20px);
    text-align: center;
}
.ps-pagination ul {
    display: inline-flex;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ps-pagination li {
    margin: 0;
}
.ps-pagination a,
.ps-pagination span {
    display: block;
    padding: 7px 13px;
    border: 1px solid var(--border, #e8e6ee);
    border-radius: var(--radius, 10px);
    font-size: 13px;
    text-decoration: none;
    color: var(--muted, #777);
    min-width: 30px;
    box-sizing: border-box;
    transition: all 0.15s;
}
.ps-pagination a:hover {
    background: var(--accent-soft, #efeafb);
    border-color: var(--accent, #7a6ce0);
    color: var(--accent, #7a6ce0);
}
.ps-pagination .current {
    background: var(--accent, #7a6ce0);
    color: var(--surface, #fff);
    border-color: var(--accent, #7a6ce0);
}
.ps-pagination .dots {
    border: none;
    color: var(--muted, #777);
}

/* ── Section titles (below the fold, homepage h2 rhythm) ── */
.ps-section-title {
    font-family: var(--font-display, Georgia, serif);
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--fg, #222);
    margin: clamp(40px, 6vw, 72px) 0 var(--gap-md, 20px);
}

/* ── Carousel (compact card style) ── */
.ps-carousel-section {
    margin: var(--gap-lg, 32px) 0;
}
.ps-carousel {
    position: relative;
    overflow: hidden;
}
.ps-carousel-track {
    display: flex;
    gap: var(--gap-lg, 32px);
    transition: transform 0.35s ease;
}
.ps-carousel-card {
    flex: 0 0 calc((100% - 64px) / 3);
    border: 1px solid var(--border, #e8e6ee);
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    background: var(--surface, #fff);
    transition: box-shadow 0.2s;
}
.ps-carousel-card:hover {
    box-shadow: 0 12px 48px color-mix(in oklch, var(--fg, #222) 10%, transparent);
}
.ps-carousel-img img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.ps-carousel-text {
    padding: var(--gap-md, 20px);
}
.ps-carousel-text h4 {
    margin: 0 0 6px;
    font-family: var(--font-display, Georgia, serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--fg, #222);
}
.ps-carousel-text p {
    margin: 0;
    font-size: 13px;
    color: var(--muted, #777);
    line-height: 1.6;
}
.ps-carousel-prev,
.ps-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e8e6ee);
    color: var(--fg, #222);
    font-size: 24px;
    width: 36px;
    height: 48px;
    cursor: pointer;
    border-radius: var(--radius, 10px);
    line-height: 48px;
    text-align: center;
    transition: background 0.2s, box-shadow 0.2s;
    padding: 0;
    box-shadow: 0 4px 16px color-mix(in oklch, var(--fg, #222) 10%, transparent);
    opacity: 0.9;
}
.ps-carousel-prev:hover,
.ps-carousel-next:hover {
    background: var(--fg-soft, #f0eef4);
    opacity: 1;
}
.ps-carousel-prev { left: 8px; }
.ps-carousel-next { right: 8px; }

/* ── Videos (full width) ── */
.ps-video-section {
    margin-bottom: var(--gap-lg, 32px);
}
.ps-video-embed {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    border-radius: var(--radius-lg, 16px);
    margin-bottom: var(--gap-md, 20px);
}
.ps-video-embed:last-child {
    margin-bottom: 0;
}
.ps-video-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--radius-lg, 16px);
}
.ps-video-embed video {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg, 16px);
    display: block;
}

/* ── Alternating Sections ── */
.ps-alt-sections {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl, 56px);
    margin: 0;
}
.ps-alt-row {
    display: flex;
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}
.ps-alt-row.ps-alt-reverse {
    flex-direction: row-reverse;
}
.ps-alt-image {
    flex: 0 0 45%;
}
.ps-alt-image img {
    width: 100%;
    border-radius: var(--radius-lg, 16px);
    display: block;
    border: 1px solid var(--border, #e8e6ee);
}
.ps-alt-text {
    flex: 1;
}
.ps-alt-text h3 {
    font-family: var(--font-display, Georgia, serif);
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fg, #222);
    margin: 0 0 var(--gap-sm, 12px);
}
.ps-alt-desc {
    font-size: var(--fs-body, 16px);
    line-height: 1.7;
    color: var(--muted, #777);
}

/* ── Specifications Table ── */
.ps-specs-section {
    margin: var(--gap-lg, 32px) 0;
}
.ps-specs-wrap {
    overflow-x: auto;
    border: 1px solid var(--border, #e8e6ee);
    border-radius: var(--radius, 10px);
    background: var(--surface, #fff);
}
.ps-specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: var(--fg, #222);
}
.ps-specs-table th {
    background: var(--fg-soft, #f0eef4);
    border: 1px solid var(--border, #e8e6ee);
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted, #777);
}
.ps-specs-table td {
    border: 1px solid var(--border, #e8e6ee);
    padding: 10px 16px;
    line-height: 1.6;
}
.ps-specs-table tbody tr:nth-child(odd) {
    background: color-mix(in oklch, var(--fg, #222) 2%, transparent);
}
.ps-specs-table tbody tr:hover {
    background: var(--accent-soft, #efeafb);
}

/* ── Related products ── */
.ps-related {
    margin: clamp(40px, 6vw, 72px) 0 0;
}
.ps-related .ps-section-title {
    margin-top: 0;
}
.ps-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--gap-lg, 32px);
}
.ps-related-card {
    border: 1px solid var(--border, #e8e6ee);
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    background: var(--surface, #fff);
    transition: box-shadow 0.2s, transform 0.2s;
}
.ps-related-card:hover {
    box-shadow: 0 12px 48px color-mix(in oklch, var(--fg, #222) 12%, transparent);
    transform: translateY(-2px);
}
.ps-related-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.ps-related-card h3 {
    margin: var(--gap-md, 20px) var(--gap-md, 20px) 4px;
    font-family: var(--font-display, Georgia, serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.ps-related-card h3 a {
    text-decoration: none;
    color: var(--fg, #222);
}
.ps-related-card h3 a:hover {
    color: var(--accent, #7a6ce0);
}
.ps-related-card /* ── Responsive ── */
@media (max-width: 980px) {
    .ps-detail {
        flex-direction: column;
        align-items: stretch;
    }
    .ps-detail-images {
        flex: none;
        max-width: 560px;
    }
}
@media (max-width: 768px) {
    .ps-container {
        padding-inline: 20px;
    }
    .ps-detail-images {
        max-width: 100%;
    }
    .ps-carousel-card {
        flex: 0 0 calc((100% - 32px) / 2);
    }
    .ps-alt-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .ps-alt-row.ps-alt-reverse {
        flex-direction: column;
    }
    .ps-alt-image {
        flex: none;
        width: 100%;
    }
    .ps-lb-prev { left: 8px; }
    .ps-lb-next { right: 8px; }
    .ps-lb-nav {
        font-size: 28px;
        width: 40px;
        height: 52px;
        line-height: 52px;
        background: rgba(0, 0, 0, 0.5);
    }
    .ps-lightbox {
        padding: 10px;
    }
}

/* ===== Product master (meso.html) ===== */
    /* ═══════════════════════════════════════════════════════
       Beatrice Meso product page — page-specific styles
       Base tokens/header/footer/form come from beatrice-base.css
       ═══════════════════════════════════════════════════════ */

    /* ── Breadcrumb ─────────────────────────────── */
    .p-crumb {
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.04em; color: var(--muted);
      margin: 0 0 18px;
    }
    .p-crumb a { color: var(--accent-deep); }
    .p-crumb a:hover { text-decoration: underline; }
    .p-crumb .sep { opacity: 0.5; }

    /* ── Product hero: gallery + info ────────────── */
    .p-hero {
      display: grid;
      grid-template-columns: 5fr 6fr;
      gap: clamp(32px, 5vw, 72px);
      align-items: start;
      padding-block: clamp(32px, 5vw, 64px) clamp(48px, 7vw, 88px);
    }

    /* Gallery */
    .p-gallery { position: sticky; top: 96px; align-self: start; }
    .p-gallery-main {
      position: relative;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface);
      overflow: hidden;
      cursor: zoom-in;
      line-height: 0;
    }
    .p-gallery-main img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: contain;
      display: block;
      transition: opacity 0.25s ease;
    }
    .p-gallery-main .zoom-hint {
      position: absolute; right: 14px; bottom: 14px;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px;
      background: color-mix(in oklch, var(--surface) 82%, transparent);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      color: var(--muted); letter-spacing: 0.04em;
      backdrop-filter: blur(6px);
      pointer-events: none;
    }
    .p-gallery-main .zoom-hint svg { width: 14px; height: 14px; stroke: var(--muted); }
    .p-thumbs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 14px;
    }
    .p-thumbs button {
      padding: 0;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      overflow: hidden;
      cursor: pointer;
      line-height: 0;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .p-thumbs button img {
      width: 100%; aspect-ratio: 1 / 1;
      object-fit: contain; display: block;
    }
    .p-thumbs button:hover { border-color: var(--accent); }
    .p-thumbs button.active {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }

    /* Info */
    .p-info .p-cat {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--accent-deep);
      border: 1px solid color-mix(in oklch, var(--accent-deep) 30%, transparent);
      border-radius: 999px; padding: 5px 14px;
      margin-bottom: 16px;
    }
    .p-info h1 {
      font-family: var(--font-display);
      font-size: clamp(34px, 4.2vw, 54px);
      line-height: 1.05; letter-spacing: -0.02em;
      margin: 0 0 6px;
    }
    .p-info .p-subtitle {
      font-family: var(--font-display);
      font-size: clamp(19px, 2.2vw, 26px);
      font-weight: 400; font-style: italic;
      color: var(--accent-deep); letter-spacing: -0.01em;
      margin: 0 0 18px;
    }
    .p-info .p-desc {
      color: var(--muted); line-height: 1.7;
      margin: 0 0 22px; max-width: 52ch;
    }

    .p-keypoints { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 10px; }
    .p-keypoints li {
      display: flex; align-items: flex-start; gap: 10px;
      line-height: 1.55;
    }
    .p-keypoints li svg {
      flex-shrink: 0; width: 18px; height: 18px;
      stroke: var(--accent-deep); stroke-width: 1.6; fill: none;
      stroke-linecap: round; stroke-linejoin: round;
      margin-top: 2px;
    }
    .p-keypoints li strong { font-weight: 600; }

    /* Spec chips */
    .p-specs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin: 0 0 24px;
    }
    .p-spec {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px 14px;
      background: var(--surface);
    }
    .p-spec .ps-label {
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--muted); display: block; margin-bottom: 4px;
    }
    .p-spec .ps-val {
      font-weight: 600; line-height: 1.3;
    }
    .p-spec .ps-val small { font-weight: 400; color: var(--muted); font-size: var(--fs-sm); }

    .p-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
    .p-actions .btn { border-radius: 999px; padding-inline: 24px; padding-block: 12px; }
    .p-ghost {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 12px 24px; border: 1px solid color-mix(in oklch, var(--fg) 28%, transparent);
      border-radius: 999px; color: var(--fg);
      font-size: 15px; font-weight: 600; letter-spacing: 0.03em;
      background: transparent; transition: background 0.2s, border-color 0.2s;
    }
    .p-ghost:hover { background: color-mix(in oklch, var(--accent) 8%, transparent); border-color: var(--accent); }

    .p-meta-line {
      display: flex; flex-wrap: wrap; gap: 8px 18px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.04em; color: var(--muted);
    }
    .p-meta-line span { display: inline-flex; align-items: center; gap: 6px; }
    .p-meta-line svg { width: 14px; height: 14px; stroke: var(--accent); fill: none; stroke-width: 1.6; }
    .p-meta-line .cert {
      color: var(--accent-deep);
      border: 1px solid color-mix(in oklch, var(--accent-deep) 30%, transparent);
      border-radius: 999px; padding: 3px 10px;
    }

    /* ── Lightbox ───────────────────────────────── */
    .p-lightbox {
      display: none; position: fixed; inset: 0; z-index: 999;
      align-items: center; justify-content: center;
      background: rgba(10, 12, 16, 0.92);
      padding: 32px;
    }
    .p-lightbox.open { display: flex; }
    .p-lightbox img {
      max-width: 92vw; max-height: 88vh;
      object-fit: contain;
      border-radius: var(--radius);
    }
    .p-lightbox-close {
      position: absolute; top: 18px; right: 22px;
      width: 44px; height: 44px;
      display: grid; place-items: center;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 50%; cursor: pointer; color: #fff;
      font-size: 22px; line-height: 1;
      transition: background 0.15s;
    }
    .p-lightbox-close:hover { background: rgba(255,255,255,0.25); }

    /* ── Mechanism (2nd screen) ──────────────────── */
    .p-mech-split {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: var(--gap-2xl);
      align-items: center;
    }
    .p-mech-visual {
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface);
      padding: 28px;
      display: grid; place-items: center;
    }
    .p-mech-visual img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: contain;
      display: block;
    }
    .p-mech-list { display: flex; flex-direction: column; gap: 14px; }
    .p-mech-item {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 22px;
      background: var(--surface);
      transition: box-shadow 0.2s, border-color 0.2s;
    }
    .p-mech-item:hover { border-color: var(--accent-soft); box-shadow: 0 2px 14px color-mix(in oklch, var(--fg) 5%, transparent); }
    .p-mech-item h3 { font-size: 17px; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
    .p-mech-item h3 .mi {
      flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
      background: var(--accent-soft); display: grid; place-items: center;
    }
    .p-mech-item h3 .mi svg { width: 15px; height: 15px; stroke: var(--accent-deep); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .p-mech-item p { color: var(--muted); margin: 0; line-height: 1.6; }

    /* Sell points */
    .p-points {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: clamp(40px, 6vw, 64px);
    }
    .p-point {
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface);
      padding: 28px;
      transition: box-shadow 0.2s, border-color 0.2s;
    }
    .p-point:hover { box-shadow: 0 4px 20px color-mix(in oklch, var(--fg) 6%, transparent); border-color: var(--accent-soft); }
    .p-point .pp-icon {
      width: 40px; height: 40px; border-radius: 10px;
      background: color-mix(in oklch, var(--accent) 12%, transparent);
      display: grid; place-items: center; margin-bottom: 14px;
    }
    .p-point .pp-icon svg { width: 20px; height: 20px; stroke: var(--accent-deep); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .p-point h3 { font-size: 17px; margin-bottom: 8px; }
    .p-point p { color: var(--muted); margin: 0; line-height: 1.6; }

    /* ── Clinical data (3rd screen) ──────────────── */
    .p-clinical { background: linear-gradient(135deg, oklch(28% 0.03 195), oklch(20% 0.02 200)); color: var(--surface); }
    .p-clinical .sl-rule { color: var(--accent); }
    .p-clinical .lead { color: oklch(72% 0.03 195); }
    .p-clinical .lead em { font-style: normal; color: var(--accent); }
    .p-data-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--gap-lg);
      margin-top: clamp(36px, 5vw, 56px);
    }
    .p-data {
      border: 1px solid oklch(42% 0.03 195 / 0.6);
      border-radius: var(--radius-lg);
      padding: 26px 22px;
      text-align: center;
      background: oklch(100% 0 0 / 0.03);
    }
    .p-data .pd-num {
      font-family: var(--font-display);
      font-size: clamp(38px, 4vw, 56px);
      font-weight: 600; line-height: 1; letter-spacing: -0.03em;
      color: var(--accent-gold);
    }
    .p-data .pd-label {
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.08em; text-transform: uppercase;
      color: oklch(72% 0.03 195);
      margin-top: 12px; line-height: 1.4;
    }

    /* Spec table */
    .p-spec-wrap { margin-top: clamp(40px, 6vw, 64px); }
    .p-spec-table {
      width: 100%;
      border-collapse: collapse;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }
    .p-spec-table tr + tr { border-top: 1px solid var(--border); }
    .p-spec-table th {
      text-align: left;
      width: 30%;
      padding: 14px 22px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--accent-deep);
      background: color-mix(in oklch, var(--accent) 6%, transparent);
      vertical-align: top;
    }
    .p-spec-table td { padding: 14px 22px; color: var(--fg); line-height: 1.6; }

    /* ── Applications / duration (4th screen) ────── */
    .p-app-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: clamp(36px, 5vw, 56px);
    }
    .p-app-card {
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface);
      padding: 26px 28px;
    }
    .p-app-card .pa-icon {
      width: 40px; height: 40px; border-radius: 10px;
      background: color-mix(in oklch, var(--accent) 12%, transparent);
      display: grid; place-items: center; margin-bottom: 14px;
    }
    .p-app-card .pa-icon svg { width: 20px; height: 20px; stroke: var(--accent-deep); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .p-app-card h3 { font-size: 18px; margin-bottom: 8px; }
    .p-app-card p { color: var(--muted); margin: 0 0 12px; line-height: 1.65; }
    .p-app-card .pa-tags { display: flex; flex-wrap: wrap; gap: 8px; }
    .p-app-card .pa-tags span {
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.04em; text-transform: uppercase;
      padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px;
      color: var(--muted);
    }

    /* ── Responsive ─────────────────────────────── */
    @media (max-width: 1024px) {
      .p-hero { grid-template-columns: 1fr; }
      .p-gallery { position: relative; top: auto; max-width: 520px; margin-inline: auto; }
      .p-mech-split { grid-template-columns: 1fr; }
      .p-data-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 920px) {
      .p-points { grid-template-columns: 1fr; }
      .p-app-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 560px) {
      .p-specs { grid-template-columns: 1fr 1fr; }
      .p-data-grid { grid-template-columns: 1fr; }
    }

/* ── Gallery enhancements: main-image arrows, scrollable thumbs, lightbox nav ── */
.p-gallery-main .p-gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--surface) 86%, transparent);
  backdrop-filter: blur(4px);
  color: var(--fg);
  display: grid; place-items: center; cursor: pointer;
  transition: background 0.15s, opacity 0.15s, border-color 0.15s;
  opacity: 0.9;
}
.p-gallery-main .p-gallery-nav:hover { background: var(--surface); opacity: 1; border-color: var(--accent); }
.p-gallery-main .p-gallery-prev { left: 12px; }
.p-gallery-main .p-gallery-next { right: 12px; }
.p-gallery-main .p-gallery-nav svg { stroke: var(--fg); }

.p-thumbs {
  display: flex; gap: 12px; margin-top: 14px;
  overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.p-thumbs button { flex: 0 0 88px; }
.p-thumbs::-webkit-scrollbar { height: 6px; }
.p-thumbs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.p-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff; display: grid; place-items: center; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.p-lightbox-nav:hover { background: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.4); }
.p-lightbox-prev { left: 20px; }
.p-lightbox-next { right: 20px; }
@media (max-width: 560px) {
  .p-lightbox-prev { left: 8px; }
  .p-lightbox-next { right: 8px; }
  .p-lightbox-nav {
    width: 40px; height: 40px;
    background: rgba(0,0,0,0.5);
  }
}

/* Master product breadcrumb: original plugin logic, styled like the design */
.ps-master .ps-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin: clamp(20px, 3vw, 36px) 0 16px;
  font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--muted); letter-spacing: 0.04em;
}
.ps-master .ps-breadcrumb a { color: var(--accent-deep); transition: color 0.15s; }
.ps-master .ps-breadcrumb a:hover { color: var(--fg); }
.ps-master .ps-breadcrumb .ps-sep { color: var(--muted); }
.ps-master .ps-breadcrumb .ps-current { color: var(--muted); }

/* Linked category badge */
.p-info .p-cat { text-decoration: none; transition: background 0.15s, border-color 0.15s; }
.p-info .p-cat:hover { background: color-mix(in oklch, var(--accent-deep) 12%, transparent); border-color: var(--accent-deep); }

/* Product-page info block: rise in on open (consistent with other pages) */
.p-info {
  animation: ba-hero-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* ===== Products template v2 (products/*.html) ===== */
    /* ═══════════════════════════════════════════════════════
       Beatrice Meso product page — page-specific styles
       Base tokens/header/footer/form come from beatrice-base.css
       ═══════════════════════════════════════════════════════ */

    .section.p-hero-section { padding-block: 0; }

    /* ── Breadcrumb ─────────────────────────────── */
    .p-crumb {
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.04em; color: var(--muted);
      margin: clamp(20px, 3vw, 36px) 0 16px;
    }
    .p-crumb a { color: var(--accent-deep); }
    .p-crumb a:hover { text-decoration: underline; }
    .p-crumb .sep { opacity: 0.5; }

    /* ── Product hero: gallery + info ────────────── */
    .p-hero {
      display: grid;
      grid-template-columns: 5fr 6fr;
      gap: clamp(28px, 4vw, 56px);
      align-items: start;
      padding-block: clamp(16px, 2.4vw, 28px) clamp(32px, 4.5vw, 56px);
    }

    /* Gallery */
    .p-gallery { position: sticky; top: 96px; align-self: start; }
    .p-gallery-main {
      position: relative;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface);
      overflow: hidden;
      cursor: zoom-in;
      line-height: 0;
    }
    .p-gallery-main img {
      width: 100%;
      max-height: calc(100vh - 290px);
      aspect-ratio: 1 / 1;
      object-fit: contain;
      display: block;
      transition: opacity 0.25s ease;
    }
    .p-gallery-main .zoom-hint {
      position: absolute; right: 14px; bottom: 14px;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px;
      background: color-mix(in oklch, var(--surface) 82%, transparent);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      color: var(--muted); letter-spacing: 0.04em;
      backdrop-filter: blur(6px);
      pointer-events: none;
    }
    .p-gallery-main .zoom-hint svg { width: 14px; height: 14px; stroke: var(--muted); }
    .p-thumbs {
      display: grid;
      grid-template-columns: repeat(3, 96px);
      gap: 12px;
      margin-top: 14px;
    }
    .p-thumbs button {
      padding: 0;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      overflow: hidden;
      cursor: pointer;
      line-height: 0;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .p-thumbs button img {
      width: 100%; aspect-ratio: 1 / 1;
      object-fit: contain; display: block;
    }
    .p-thumbs button:hover { border-color: var(--accent); }
    .p-thumbs button.active {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }

    /* Info */
    .p-info .p-cat {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--accent-deep);
      border: 1px solid color-mix(in oklch, var(--accent-deep) 30%, transparent);
      border-radius: 999px; padding: 5px 14px;
      margin-bottom: 16px;
    }
    .p-info h1 {
      font-family: var(--font-display);
      font-size: clamp(34px, 4.2vw, 54px);
      line-height: 1.05; letter-spacing: -0.02em;
      margin: 0 0 6px;
    }
    .p-info .p-subtitle {
      font-family: var(--font-display);
      font-size: clamp(19px, 2.2vw, 26px);
      font-weight: 400; font-style: italic;
      color: var(--accent-deep); letter-spacing: -0.01em;
      margin: 0 0 18px;
    }
    .p-info .p-desc {
      color: var(--muted); line-height: 1.65;
      margin: 0 0 18px;
    }

    .p-keypoints { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
    .p-keypoints li {
      display: flex; align-items: flex-start; gap: 10px;
      line-height: 1.55;
    }
    .p-keypoints li svg {
      flex-shrink: 0; width: 18px; height: 18px;
      stroke: var(--accent-deep); stroke-width: 1.6; fill: none;
      stroke-linecap: round; stroke-linejoin: round;
      margin-top: 2px;
    }
    .p-keypoints li strong { font-weight: 600; }

    /* Spec chips */
    .p-specs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin: 0 0 18px;
    }
    .p-spec {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px 14px;
      background: var(--surface);
    }
    .p-spec .ps-label {
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--muted); display: block; margin-bottom: 4px;
    }
    .p-spec .ps-val {
      font-weight: 600; line-height: 1.3;
    }
    .p-spec .ps-val small { font-weight: 400; color: var(--muted); font-size: var(--fs-sm); }

    .p-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
    .p-actions .btn { border-radius: 999px; padding-inline: 24px; padding-block: 12px; }
    .p-ghost {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 12px 24px; border: 1px solid color-mix(in oklch, var(--fg) 28%, transparent);
      border-radius: 999px; color: var(--fg);
      font-size: 15px; font-weight: 600; letter-spacing: 0.03em;
      background: transparent; transition: background 0.2s, border-color 0.2s;
    }
    .p-ghost:hover { background: color-mix(in oklch, var(--accent) 8%, transparent); border-color: var(--accent); }

    .p-meta-line {
      display: flex; flex-wrap: wrap; gap: 8px 18px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.04em; color: var(--muted);
    }
    .p-meta-line span { display: inline-flex; align-items: center; gap: 6px; }
    .p-meta-line svg { width: 14px; height: 14px; stroke: var(--accent); fill: none; stroke-width: 1.6; }
    .p-meta-line .cert {
      color: var(--accent-deep);
      border: 1px solid color-mix(in oklch, var(--accent-deep) 30%, transparent);
      border-radius: 999px; padding: 3px 10px;
    }

    /* ── Lightbox ───────────────────────────────── */
    .p-lightbox {
      display: none; position: fixed; inset: 0; z-index: 999;
      align-items: center; justify-content: center;
      background: rgba(10, 12, 16, 0.92);
      padding: 32px;
    }
    .p-lightbox.open { display: flex; }
    .p-lightbox img {
      max-width: 92vw; max-height: 88vh;
      object-fit: contain;
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: 0 0 0 1px var(--border);
    }
    .p-lightbox-close {
      position: absolute; top: 18px; right: 22px;
      width: 44px; height: 44px;
      display: grid; place-items: center;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 50%; cursor: pointer; color: #fff;
      font-size: 22px; line-height: 1;
      transition: background 0.15s;
    }
    .p-lightbox-close:hover { background: rgba(255,255,255,0.25); }

    /* ── Mechanism (2nd screen) ──────────────────── */
    .p-mech-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .p-mech-item {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 22px;
      background: var(--surface);
      transition: box-shadow 0.2s, border-color 0.2s;
    }
    .p-mech-item:hover { border-color: var(--accent-soft); box-shadow: 0 2px 14px color-mix(in oklch, var(--fg) 5%, transparent); }
    .p-mech-item h3 { font-size: 17px; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
    .p-mech-item h3 .mi {
      flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
      background: var(--accent-soft); display: grid; place-items: center;
    }
    .p-mech-item h3 .mi svg { width: 15px; height: 15px; stroke: var(--accent-deep); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .p-mech-item p { color: var(--muted); margin: 0; line-height: 1.6; }

    /* ── Clinical data (3rd screen) ──────────────── */
    .p-clinical { background: linear-gradient(135deg, oklch(28% 0.03 195), oklch(20% 0.02 200)); color: var(--surface); }
    .p-clinical .sl-rule { color: var(--accent); }
    .p-clinical .lead { color: oklch(72% 0.03 195); }
    .p-clinical .lead em { font-style: normal; color: var(--accent); }
    .p-data-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--gap-lg);
      margin-top: clamp(36px, 5vw, 56px);
    }
    .p-data {
      border: 1px solid oklch(42% 0.03 195 / 0.6);
      border-radius: var(--radius-lg);
      padding: 26px 22px;
      text-align: center;
      background: oklch(100% 0 0 / 0.03);
    }
    .p-data .pd-num {
      font-family: var(--font-display);
      font-size: clamp(38px, 4vw, 56px);
      font-weight: 600; line-height: 1; letter-spacing: -0.03em;
      color: var(--accent-gold);
    }
    .p-data .pd-label {
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.08em; text-transform: uppercase;
      color: oklch(72% 0.03 195);
      margin-top: 12px; line-height: 1.4;
    }

    /* Spec table */
    .p-spec-wrap { margin-top: clamp(40px, 6vw, 64px); }
    .p-spec-table {
      width: 100%;
      border-collapse: collapse;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }
    .p-spec-table tr + tr { border-top: 1px solid var(--border); }
    .p-spec-table th {
      text-align: left;
      width: 30%;
      padding: 14px 22px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--accent-deep);
      background: color-mix(in oklch, var(--accent) 6%, transparent);
      vertical-align: top;
    }
    .p-spec-table td { padding: 14px 22px; color: var(--fg); line-height: 1.6; }


    /* ── CTA form (consistent with homepage) ────────── */
    .pilot-section {
      background: linear-gradient(135deg, oklch(28% 0.03 195), oklch(20% 0.02 200));
      color: var(--surface);
    }
    .pilot-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--gap-2xl);
      align-items: center;
    }
    .pilot-impact {
      display: flex; flex-direction: column;
      gap: 16px;
    }
    .pilot-impact .pilot-motto {
      font-family: var(--font-display);
      font-size: clamp(32px, 4vw, 50px);
      line-height: 1.04;
      letter-spacing: -0.03em;
      margin: 0;
    }
    .pilot-impact .pilot-desc {
      font-size: var(--fs-body);
      line-height: 1.7;
      color: oklch(72% 0.03 195);
      margin: 0;
      max-width: 44ch;
    }
    .pilot-impact .pilot-desc em {
      font-style: normal;
      color: var(--accent);
    }
    .pilot-impact .pilot-punch {
      font-family: var(--font-display);
      font-size: clamp(18px, 2vw, 24px);
      font-style: italic;
      color: var(--accent);
      margin: 0;
      letter-spacing: -0.01em;
    }
    .pilot-impact .pilot-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--accent);
      text-decoration: none;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.03em;
      transition: opacity 0.15s;
    }
    .pilot-impact .pilot-cta:hover { opacity: 0.75; }
    .pilot-form {
      background: var(--surface);
      border-radius: var(--radius-lg);
      padding: 36px 32px 32px;
      border: 1px solid var(--accent);
      display: flex; flex-direction: column; gap: var(--gap-md);
    }
    .pilot-form h3 {
      font-family: var(--font-display);
      font-size: 20px;
      color: var(--fg);
      margin: 0 0 4px;
    }
    .pilot-form .field { display: flex; flex-direction: column; gap: 6px; }
    .pilot-form .field label {
      font-size: var(--fs-sm);
      color: var(--muted);
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }
    .pilot-form .field .input, .pilot-form .field .textarea {
      width: 100%;
      padding: 11px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg);
      color: var(--fg);
      font: inherit;
      font-size: 14px;
      transition: border-color 0.15s;
    }
    .pilot-form .field .input:focus, .pilot-form .field .textarea:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .pilot-form .field .textarea { min-height: 80px; resize: vertical; }
    .pilot-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); }
    @media (max-width: 920px) {
      .pilot-grid { grid-template-columns: 1fr; }
      .pilot-form .form-row { grid-template-columns: 1fr; }
    }

    /* ── Responsive ─────────────────────────────── */
    @media (max-width: 1024px) {
      .p-hero { grid-template-columns: 1fr; }
      .p-gallery { position: relative; top: auto; max-width: 520px; margin-inline: auto; }
      .p-mech-list { grid-template-columns: 1fr; }
      .p-data-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 920px) {
    }
    @media (max-width: 560px) {
      .p-specs { grid-template-columns: 1fr 1fr; }
      .p-data-grid { grid-template-columns: 1fr; }
    }
    /* ═══════════════════════════════════════════════════════
       Beatrice Finelines product page — page-specific styles
       Base tokens/header/footer/form come from beatrice-base.css
       ═══════════════════════════════════════════════════════ */

    .section.p-hero-section { padding-block: 0; }

    /* ── Breadcrumb ─────────────────────────────── */
    .p-crumb {
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.04em; color: var(--muted);
      margin: clamp(20px, 3vw, 36px) 0 16px;
    }
    .p-crumb a { color: var(--accent-deep); }
    .p-crumb a:hover { text-decoration: underline; }
    .p-crumb .sep { opacity: 0.5; }

    /* ── Product hero: gallery + info ────────────── */
    .p-hero {
      display: grid;
      grid-template-columns: 5fr 6fr;
      gap: clamp(28px, 4vw, 56px);
      align-items: start;
      padding-block: clamp(16px, 2.4vw, 28px) clamp(32px, 4.5vw, 56px);
    }

    /* Gallery */
    .p-gallery { position: sticky; top: 96px; align-self: start; }
    .p-gallery-main {
      position: relative;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface);
      overflow: hidden;
      cursor: zoom-in;
      line-height: 0;
    }
    .p-gallery-main img {
      width: 100%;
      max-height: calc(100vh - 290px);
      aspect-ratio: 1 / 1;
      object-fit: contain;
      display: block;
      transition: opacity 0.25s ease;
    }
    .p-gallery-main .zoom-hint {
      position: absolute; right: 14px; bottom: 14px;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px;
      background: color-mix(in oklch, var(--surface) 82%, transparent);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      color: var(--muted); letter-spacing: 0.04em;
      backdrop-filter: blur(6px);
      pointer-events: none;
    }
    .p-gallery-main .zoom-hint svg { width: 14px; height: 14px; stroke: var(--muted); }
    .p-thumbs {
      display: grid;
      grid-template-columns: repeat(3, 96px);
      gap: 12px;
      margin-top: 14px;
    }
    .p-thumbs button {
      padding: 0;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      overflow: hidden;
      cursor: pointer;
      line-height: 0;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .p-thumbs button img {
      width: 100%; aspect-ratio: 1 / 1;
      object-fit: contain; display: block;
    }
    .p-thumbs button:hover { border-color: var(--accent); }
    .p-thumbs button.active {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }

    /* Info */
    .p-info .p-cat {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--accent-deep);
      border: 1px solid color-mix(in oklch, var(--accent-deep) 30%, transparent);
      border-radius: 999px; padding: 5px 14px;
      margin-bottom: 16px;
    }
    .p-info h1 {
      font-family: var(--font-display);
      font-size: clamp(34px, 4.2vw, 54px);
      line-height: 1.05; letter-spacing: -0.02em;
      margin: 0 0 6px;
    }
    .p-info .p-subtitle {
      font-family: var(--font-display);
      font-size: clamp(19px, 2.2vw, 26px);
      font-weight: 400; font-style: italic;
      color: var(--accent-deep); letter-spacing: -0.01em;
      margin: 0 0 18px;
    }
    .p-info .p-desc {
      color: var(--muted); line-height: 1.65;
      margin: 0 0 18px;
    }

    .p-keypoints { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
    .p-keypoints li {
      display: flex; align-items: flex-start; gap: 10px;
      line-height: 1.55;
    }
    .p-keypoints li svg {
      flex-shrink: 0; width: 18px; height: 18px;
      stroke: var(--accent-deep); stroke-width: 1.6; fill: none;
      stroke-linecap: round; stroke-linejoin: round;
      margin-top: 2px;
    }
    .p-keypoints li strong { font-weight: 600; }

    /* Spec chips */
    .p-specs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin: 0 0 18px;
    }
    .p-spec {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px 14px;
      background: var(--surface);
    }
    .p-spec .ps-label {
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--muted); display: block; margin-bottom: 4px;
    }
    .p-spec .ps-val {
      font-weight: 600; line-height: 1.3;
    }
    .p-spec .ps-val small { font-weight: 400; color: var(--muted); font-size: var(--fs-sm); }

    .p-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
    .p-actions .btn { border-radius: 999px; padding-inline: 24px; padding-block: 12px; }
    .p-ghost {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 12px 24px; border: 1px solid color-mix(in oklch, var(--fg) 28%, transparent);
      border-radius: 999px; color: var(--fg);
      font-size: 15px; font-weight: 600; letter-spacing: 0.03em;
      background: transparent; transition: background 0.2s, border-color 0.2s;
    }
    .p-ghost:hover { background: color-mix(in oklch, var(--accent) 8%, transparent); border-color: var(--accent); }

    .p-meta-line {
      display: flex; flex-wrap: wrap; gap: 8px 18px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.04em; color: var(--muted);
    }
    .p-meta-line span { display: inline-flex; align-items: center; gap: 6px; }
    .p-meta-line svg { width: 14px; height: 14px; stroke: var(--accent); fill: none; stroke-width: 1.6; }
    .p-meta-line .cert {
      color: var(--accent-deep);
      border: 1px solid color-mix(in oklch, var(--accent-deep) 30%, transparent);
      border-radius: 999px; padding: 3px 10px;
    }

    /* ── Lightbox ───────────────────────────────── */
    .p-lightbox {
      display: none; position: fixed; inset: 0; z-index: 999;
      align-items: center; justify-content: center;
      background: rgba(10, 12, 16, 0.92);
      padding: 32px;
    }
    .p-lightbox.open { display: flex; }
    .p-lightbox img {
      max-width: 92vw; max-height: 88vh;
      object-fit: contain;
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: 0 0 0 1px var(--border);
    }
    .p-lightbox-close {
      position: absolute; top: 18px; right: 22px;
      width: 44px; height: 44px;
      display: grid; place-items: center;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 50%; cursor: pointer; color: #fff;
      font-size: 22px; line-height: 1;
      transition: background 0.15s;
    }
    .p-lightbox-close:hover { background: rgba(255,255,255,0.25); }

    /* ── Mechanism (2nd screen) ──────────────────── */
    .p-mech-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .p-mech-item {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 22px;
      background: var(--surface);
      transition: box-shadow 0.2s, border-color 0.2s;
    }
    .p-mech-item:hover { border-color: var(--accent-soft); box-shadow: 0 2px 14px color-mix(in oklch, var(--fg) 5%, transparent); }
    .p-mech-item h3 { font-size: 17px; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
    .p-mech-item h3 .mi {
      flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
      background: var(--accent-soft); display: grid; place-items: center;
    }
    .p-mech-item h3 .mi svg { width: 15px; height: 15px; stroke: var(--accent-deep); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .p-mech-item p { color: var(--muted); margin: 0; line-height: 1.6; }

    /* ── Clinical data (3rd screen) ──────────────── */
    .p-clinical { background: linear-gradient(135deg, oklch(28% 0.03 195), oklch(20% 0.02 200)); color: var(--surface); }
    .p-clinical .sl-rule { color: var(--accent); }
    .p-clinical .lead { color: oklch(72% 0.03 195); }
    .p-clinical .lead em { font-style: normal; color: var(--accent); }
    .p-data-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--gap-lg);
      margin-top: clamp(36px, 5vw, 56px);
    }
    .p-data {
      border: 1px solid oklch(42% 0.03 195 / 0.6);
      border-radius: var(--radius-lg);
      padding: 26px 22px;
      text-align: center;
      background: oklch(100% 0 0 / 0.03);
    }
    .p-data .pd-num {
      font-family: var(--font-display);
      font-size: clamp(38px, 4vw, 56px);
      font-weight: 600; line-height: 1; letter-spacing: -0.03em;
      color: var(--accent-gold);
    }
    .p-data .pd-label {
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.08em; text-transform: uppercase;
      color: oklch(72% 0.03 195);
      margin-top: 12px; line-height: 1.4;
    }

    /* Spec table */
    .p-spec-wrap { margin-top: clamp(40px, 6vw, 64px); }
    .p-spec-table {
      width: 100%;
      border-collapse: collapse;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }
    .p-spec-table tr + tr { border-top: 1px solid var(--border); }
    .p-spec-table th {
      text-align: left;
      width: 30%;
      padding: 14px 22px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--accent-deep);
      background: color-mix(in oklch, var(--accent) 6%, transparent);
      vertical-align: top;
    }
    .p-spec-table td { padding: 14px 22px; color: var(--fg); line-height: 1.6; }


    /* ── CTA form (consistent with homepage) ────────── */
    .pilot-section {
      background: linear-gradient(135deg, oklch(28% 0.03 195), oklch(20% 0.02 200));
      color: var(--surface);
    }
    .pilot-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--gap-2xl);
      align-items: center;
    }
    .pilot-impact {
      display: flex; flex-direction: column;
      gap: 16px;
    }
    .pilot-impact .pilot-motto {
      font-family: var(--font-display);
      font-size: clamp(32px, 4vw, 50px);
      line-height: 1.04;
      letter-spacing: -0.03em;
      margin: 0;
    }
    .pilot-impact .pilot-desc {
      font-size: var(--fs-body);
      line-height: 1.7;
      color: oklch(72% 0.03 195);
      margin: 0;
      max-width: 44ch;
    }
    .pilot-impact .pilot-desc em {
      font-style: normal;
      color: var(--accent);
    }
    .pilot-impact .pilot-punch {
      font-family: var(--font-display);
      font-size: clamp(18px, 2vw, 24px);
      font-style: italic;
      color: var(--accent);
      margin: 0;
      letter-spacing: -0.01em;
    }
    .pilot-impact .pilot-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--accent);
      text-decoration: none;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.03em;
      transition: opacity 0.15s;
    }
    .pilot-impact .pilot-cta:hover { opacity: 0.75; }
    .pilot-form {
      background: var(--surface);
      border-radius: var(--radius-lg);
      padding: 36px 32px 32px;
      border: 1px solid var(--accent);
      display: flex; flex-direction: column; gap: var(--gap-md);
    }
    .pilot-form h3 {
      font-family: var(--font-display);
      font-size: 20px;
      color: var(--fg);
      margin: 0 0 4px;
    }
    .pilot-form .field { display: flex; flex-direction: column; gap: 6px; }
    .pilot-form .field label {
      font-size: var(--fs-sm);
      color: var(--muted);
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }
    .pilot-form .field .input, .pilot-form .field .textarea {
      width: 100%;
      padding: 11px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg);
      color: var(--fg);
      font: inherit;
      font-size: 14px;
      transition: border-color 0.15s;
    }
    .pilot-form .field .input:focus, .pilot-form .field .textarea:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .pilot-form .field .textarea { min-height: 80px; resize: vertical; }
    .pilot-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); }
    @media (max-width: 920px) {
      .pilot-grid { grid-template-columns: 1fr; }
      .pilot-form .form-row { grid-template-columns: 1fr; }
    }


    /* ── Single clinical stat ──────────────────────── */
    .p-data-grid.single {
      grid-template-columns: 1fr;
      max-width: 560px;
      margin-inline: auto;
    }
    .p-data-grid.single .p-data { padding: 34px 22px; }


    /* ── Clinical cases: before / after (tabbed) ─────── */
    .p-case-tabs {
      display: inline-flex; flex-wrap: wrap; gap: 8px;
      margin-bottom: clamp(20px, 2.6vw, 32px);
    }
    .p-case-tab {
      font-family: var(--font-mono);
      font-size: 13px; letter-spacing: 0.08em; line-height: 1;
      padding: 10px 18px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--muted);
      cursor: pointer;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .p-case-tab:hover {
      border-color: color-mix(in oklch, var(--accent) 65%, transparent);
      color: var(--fg);
    }
    .p-case-tab.is-active {
      background: var(--accent-deep);
      border-color: var(--accent-deep);
      color: var(--surface);
      font-weight: 600;
      box-shadow: 0 3px 10px -3px color-mix(in oklch, var(--accent-deep) 55%, transparent);
    }
    .p-case-pane[hidden] { display: none; }
    .p-case-pane.is-active { animation: pCaseFade 0.22s ease; }
    @keyframes pCaseFade {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: none; }
    }
    .p-case-row {
      display: grid;
      grid-template-columns: 46fr 54fr;
      gap: clamp(24px, 3vw, 44px);
      align-items: center;
    }
    .p-case-media {
      position: relative;
      --pos: 50%;
      border-radius: var(--radius-lg);
      box-shadow: 0 14px 40px -18px color-mix(in oklch, var(--fg) 30%, transparent);
    }
    .p-case-media .cmp-frame {
      position: relative;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      border-radius: var(--radius-lg);
      background: #000;  /* 原图带透明出血边，黑底承接 */
    }
    .p-case-media .cmp-slide { position: relative; width: 100%; height: 100%; }
    .p-case-media .cmp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
    .p-case-media .cmp-after { z-index: 0; }
    .p-case-media .cmp-before { z-index: 1; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
    .p-case-media .cmp-divider {
      position: absolute; top: 0; bottom: 0; left: var(--pos);
      width: 2px; background: #fff;
      transform: translateX(-50%);
      z-index: 2; pointer-events: none;
    }
    .p-case-media .cd-ar {
      position: absolute; top: 50%;
      width: 11px; height: 11px;
      border: solid #fff;
      filter: drop-shadow(0 1px 2px rgba(20, 25, 30, 0.45));
      z-index: 3;
    }
    .p-case-media .cd-ar-l { left: -18px; border-width: 2.5px 0 0 2.5px; transform: translateY(-50%) rotate(-45deg); }
    .p-case-media .cd-ar-r { left: 9px; border-width: 2.5px 2.5px 0 0; transform: translateY(-50%) rotate(45deg); }
    .p-case-media .cmp-range {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      margin: 0; padding: 0; opacity: 0;
      z-index: 3; cursor: ew-resize;
      touch-action: none;
      -webkit-appearance: none; appearance: none;
    }
    .p-case-media .cmp-tag {
      position: absolute; bottom: 12px;
      z-index: 4; pointer-events: none;
      font-family: var(--font-mono);
      font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--accent-deep);
      background: color-mix(in oklch, var(--surface) 88%, transparent);
      backdrop-filter: blur(6px);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 5px 12px;
      line-height: 1.2;
    }
    .p-case-media .cmp-tag-b { left: 12px; }
    .p-case-media .cmp-tag-a { right: 12px; }
    .p-case-copy { padding: 8px 0; }
    .p-case-eyebrow {
      font-family: var(--font-mono);
      font-size: 13px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
      margin: 0 0 12px;
    }
    .p-case-copy h3 {
      font-family: var(--font-display);
      font-size: clamp(22px, 2.4vw, 28px);
      font-weight: 600;
      letter-spacing: -0.01em;
      margin: 0 0 14px;
    }
    .p-case-desc {
      color: var(--muted);
      line-height: 1.62;
      margin: 0 0 22px;
      font-size: 16px;
      max-width: 52ch;
    }
    .p-case-spec {
      list-style: none;
      padding: 0; margin: 0;
      border-top: 1px solid var(--border);
    }
    .p-case-spec li {
      display: flex; gap: 16px;
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
      font-size: 15px;
      line-height: 1.5;
    }
    .p-case-spec li span {
      flex-shrink: 0;
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      min-width: 108px;
      padding-top: 2px;
    }
    .p-case-note {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: clamp(20px, 3vw, 28px);
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.06em;
      color: var(--muted);
      text-align: center;
    }
    .p-case-note::before { content: '†'; margin-top: -2px; }

    @media (max-width: 920px) {
      .p-case-pane > .p-case-row { grid-template-columns: 1fr; gap: var(--gap-lg); }
      .p-case-media { width: 100%; max-width: 560px; justify-self: center; }
    }


    /* ── Mechanism sub-blocks ──────────────────────── */
    .p-mech-block + .p-mech-block { margin-top: 40px; }
    .p-mech-sub {
      font-family: var(--font-mono);
      font-size: var(--fs-sm);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent-deep);
      margin: 0 0 16px;
      display: flex; align-items: center; gap: 12px;
    }
    .p-mech-sub::after { content: ''; flex: 1; height: 1px; background: var(--border); }

    /* ── Responsive ─────────────────────────────── */
    @media (max-width: 1024px) {
      .p-hero { grid-template-columns: 1fr; }
      .p-gallery { position: relative; top: auto; max-width: 520px; margin-inline: auto; }
      .p-mech-list { grid-template-columns: 1fr; }
      .p-data-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 920px) {
    }
    @media (max-width: 560px) {
      .p-specs { grid-template-columns: 1fr 1fr; }
      .p-data-grid { grid-template-columns: 1fr; }
    }


/* Product description: no width cap (new draft) — clear the leftover max-width */
.p-info .p-desc { max-width: none; }

/* ===== Mesonova template CSS (placeholder styles etc.) ===== */
    /* ═══════════════════════════════════════════════════════
       Beatrice Mesonova product page — page-specific styles
       Base tokens/header/footer/form come from beatrice-base.css
       ═══════════════════════════════════════════════════════ */

    .p-hero-section { padding-block: 0; }

    /* ── Breadcrumb ─────────────────────────────── */
    .p-crumb {
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.04em; color: var(--muted);
      margin: clamp(20px, 3vw, 36px) 0 16px;
    }
    .p-crumb a { color: var(--accent-deep); }
    .p-crumb a:hover { text-decoration: underline; }
    .p-crumb .sep { opacity: 0.5; }

    /* ── Product hero: gallery + info ────────────── */
    .p-hero {
      display: grid;
      grid-template-columns: 5fr 6fr;
      gap: clamp(28px, 4vw, 56px);
      align-items: start;
      padding-block: clamp(16px, 2.4vw, 28px) clamp(32px, 4.5vw, 56px);
    }

    /* Gallery */
    .p-gallery { position: sticky; top: 96px; align-self: start; }
    .p-gallery-main {
      position: relative;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface);
      overflow: hidden;
      cursor: zoom-in;
      line-height: 0;
    }
    .p-gallery-main img {
      width: 100%;
      max-height: calc(100vh - 290px);
      aspect-ratio: 1 / 1;
      object-fit: contain;
      display: block;
      transition: opacity 0.25s ease;
    }
    .p-gallery-main .zoom-hint {
      position: absolute; right: 14px; bottom: 14px;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px;
      background: color-mix(in oklch, var(--surface) 82%, transparent);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      color: var(--muted); letter-spacing: 0.04em;
      backdrop-filter: blur(6px);
      pointer-events: none;
    }
    .p-gallery-main .zoom-hint svg { width: 14px; height: 14px; stroke: var(--muted); }
    .p-thumbs {
      display: grid;
      grid-template-columns: repeat(3, 96px);
      gap: 12px;
      margin-top: 14px;
    }
    .p-thumbs button {
      padding: 0;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      overflow: hidden;
      cursor: pointer;
      line-height: 0;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .p-thumbs button img {
      width: 100%; aspect-ratio: 1 / 1;
      object-fit: contain; display: block;
    }
    .p-thumbs button:hover { border-color: var(--accent); }
    .p-thumbs button.active {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }

    /* Info */
    .p-info .p-cat {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--accent-deep);
      border: 1px solid color-mix(in oklch, var(--accent-deep) 30%, transparent);
      border-radius: 999px; padding: 5px 14px;
      margin-bottom: 16px;
    }
    .p-info h1 {
      font-family: var(--font-display);
      font-size: clamp(34px, 4.2vw, 54px);
      line-height: 1.05; letter-spacing: -0.02em;
      margin: 0 0 6px;
    }
    .p-info .p-subtitle {
      font-family: var(--font-display);
      font-size: clamp(19px, 2.2vw, 26px);
      font-weight: 400; font-style: italic;
      color: var(--accent-deep); letter-spacing: -0.01em;
      margin: 0 0 18px;
    }
    .p-info .p-desc {
      color: var(--muted); line-height: 1.65;
      margin: 0 0 18px;
    }

    .p-keypoints { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
    .p-keypoints li {
      display: flex; align-items: flex-start; gap: 10px;
      line-height: 1.55;
    }
    .p-keypoints li svg {
      flex-shrink: 0; width: 18px; height: 18px;
      stroke: var(--accent-deep); stroke-width: 1.6; fill: none;
      stroke-linecap: round; stroke-linejoin: round;
      margin-top: 2px;
    }
    .p-keypoints li strong { font-weight: 600; }

    /* Spec chips */
    .p-specs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin: 0 0 18px;
    }
    .p-spec {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px 14px;
      background: var(--surface);
    }
    .p-spec .ps-label {
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--muted); display: block; margin-bottom: 4px;
    }
    .p-spec .ps-val {
      font-weight: 600; line-height: 1.3;
    }
    .p-spec .ps-val small { font-weight: 400; color: var(--muted); font-size: var(--fs-sm); }

    .p-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
    .p-actions .btn { border-radius: 999px; padding-inline: 24px; padding-block: 12px; }
    .p-ghost {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 12px 24px; border: 1px solid color-mix(in oklch, var(--fg) 28%, transparent);
      border-radius: 999px; color: var(--fg);
      font-size: 15px; font-weight: 600; letter-spacing: 0.03em;
      background: transparent; transition: background 0.2s, border-color 0.2s;
    }
    .p-ghost:hover { background: color-mix(in oklch, var(--accent) 8%, transparent); border-color: var(--accent); }

    .p-meta-line {
      display: flex; flex-wrap: wrap; gap: 8px 18px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.04em; color: var(--muted);
    }
    .p-meta-line span { display: inline-flex; align-items: center; gap: 6px; }
    .p-meta-line svg { width: 14px; height: 14px; stroke: var(--accent); fill: none; stroke-width: 1.6; }
    .p-meta-line .cert {
      color: var(--accent-deep);
      border: 1px solid color-mix(in oklch, var(--accent-deep) 30%, transparent);
      border-radius: 999px; padding: 3px 10px;
    }

    /* ── Lightbox ───────────────────────────────── */
    .p-lightbox {
      display: none; position: fixed; inset: 0; z-index: 999;
      align-items: center; justify-content: center;
      background: rgba(10, 12, 16, 0.92);
      padding: 32px;
    }
    .p-lightbox.open { display: flex; }
    .p-lightbox img {
      max-width: 92vw; max-height: 88vh;
      object-fit: contain;
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: 0 0 0 1px var(--border);
    }
    .p-lightbox-close {
      position: absolute; top: 18px; right: 22px;
      width: 44px; height: 44px;
      display: grid; place-items: center;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 50%; cursor: pointer; color: #fff;
      font-size: 22px; line-height: 1;
      transition: background 0.15s;
    }
    .p-lightbox-close:hover { background: rgba(255,255,255,0.25); }

    /* ── Mechanism (2nd screen) ──────────────────── */
    .p-mech-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .p-mech-item {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 22px;
      background: var(--surface);
      transition: box-shadow 0.2s, border-color 0.2s;
    }
    .p-mech-item:hover { border-color: var(--accent-soft); box-shadow: 0 2px 14px color-mix(in oklch, var(--fg) 5%, transparent); }
    .p-mech-item h3 { font-size: 17px; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
    .p-mech-item h3 .mi {
      flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
      background: var(--accent-soft); display: grid; place-items: center;
    }
    .p-mech-item h3 .mi svg { width: 15px; height: 15px; stroke: var(--accent-deep); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .p-mech-item p { color: var(--muted); margin: 0; line-height: 1.6; }

    /* ── Clinical data (3rd screen) ──────────────── */
    .p-clinical { background: linear-gradient(135deg, oklch(28% 0.03 195), oklch(20% 0.02 200)); color: var(--surface); }
    .p-clinical .sl-rule { color: var(--accent); }
    .p-clinical .lead { color: oklch(72% 0.03 195); }
    .p-clinical .lead em { font-style: normal; color: var(--accent); }
    .p-data-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--gap-lg);
      margin-top: clamp(36px, 5vw, 56px);
    }
    .p-data {
      border: 1px solid oklch(42% 0.03 195 / 0.6);
      border-radius: var(--radius-lg);
      padding: 26px 22px;
      text-align: center;
      background: oklch(100% 0 0 / 0.03);
    }
    .p-data .pd-num {
      font-family: var(--font-display);
      font-size: clamp(38px, 4vw, 56px);
      font-weight: 600; line-height: 1; letter-spacing: -0.03em;
      color: var(--accent-gold);
    }
    .p-data .pd-label {
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.08em; text-transform: uppercase;
      color: oklch(72% 0.03 195);
      margin-top: 12px; line-height: 1.4;
    }

    /* Spec table */
    .p-spec-wrap { margin-top: clamp(40px, 6vw, 64px); }
    .p-spec-table {
      width: 100%;
      border-collapse: collapse;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }
    .p-spec-table tr + tr { border-top: 1px solid var(--border); }
    .p-spec-table th {
      text-align: left;
      width: 30%;
      padding: 14px 22px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--accent-deep);
      background: color-mix(in oklch, var(--accent) 6%, transparent);
      vertical-align: top;
    }
    .p-spec-table td { padding: 14px 22px; color: var(--fg); line-height: 1.6; }


    /* ── CTA form (consistent with homepage) ────────── */
    .pilot-section {
      background: linear-gradient(135deg, oklch(28% 0.03 195), oklch(20% 0.02 200));
      color: var(--surface);
    }
    .pilot-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--gap-2xl);
      align-items: center;
    }
    .pilot-impact {
      display: flex; flex-direction: column;
      gap: 16px;
    }
    .pilot-impact .pilot-motto {
      font-family: var(--font-display);
      font-size: clamp(32px, 4vw, 50px);
      line-height: 1.04;
      letter-spacing: -0.03em;
      margin: 0;
    }
    .pilot-impact .pilot-desc {
      font-size: var(--fs-body);
      line-height: 1.7;
      color: oklch(72% 0.03 195);
      margin: 0;
      max-width: 44ch;
    }
    .pilot-impact .pilot-desc em {
      font-style: normal;
      color: var(--accent);
    }
    .pilot-impact .pilot-punch {
      font-family: var(--font-display);
      font-size: clamp(18px, 2vw, 24px);
      font-style: italic;
      color: var(--accent);
      margin: 0;
      letter-spacing: -0.01em;
    }
    .pilot-impact .pilot-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--accent);
      text-decoration: none;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.03em;
      transition: opacity 0.15s;
    }
    .pilot-impact .pilot-cta:hover { opacity: 0.75; }
    .pilot-form {
      background: var(--surface);
      border-radius: var(--radius-lg);
      padding: 36px 32px 32px;
      border: 1px solid var(--accent);
      display: flex; flex-direction: column; gap: var(--gap-md);
    }
    .pilot-form h3 {
      font-family: var(--font-display);
      font-size: 20px;
      color: var(--fg);
      margin: 0 0 4px;
    }
    .pilot-form .field { display: flex; flex-direction: column; gap: 6px; }
    .pilot-form .field label {
      font-size: var(--fs-sm);
      color: var(--muted);
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }
    .pilot-form .field .input, .pilot-form .field .textarea {
      width: 100%;
      padding: 11px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg);
      color: var(--fg);
      font: inherit;
      font-size: 14px;
      transition: border-color 0.15s;
    }
    .pilot-form .field .input:focus, .pilot-form .field .textarea:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .pilot-form .field .textarea { min-height: 80px; resize: vertical; }
    .pilot-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); }
    @media (max-width: 920px) {
      .pilot-grid { grid-template-columns: 1fr; }
      .pilot-form .form-row { grid-template-columns: 1fr; }
    }


    /* ── Placeholder (no product image yet) ───────── */
    .p-img-ph {
      width: 100%;
      aspect-ratio: 1 / 1;
      display: grid; place-items: center;
      background: linear-gradient(135deg, var(--accent-soft), var(--deep-soft)), var(--surface);
      color: var(--muted);
      font-family: var(--font-display);
      font-size: clamp(20px, 2vw, 30px);
      letter-spacing: -0.01em;
    }
    .p-thumb-ph {
      display: block;
      width: 100%;
      aspect-ratio: 1 / 1;
      background: linear-gradient(135deg, var(--accent-soft), var(--deep-soft)), var(--surface);
    }
    /* ── Mechanism sub-blocks ──────────────────────── */
    .p-mech-block + .p-mech-block { margin-top: 40px; }
    .p-mech-sub {
      font-family: var(--font-mono);
      font-size: var(--fs-sm);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent-deep);
      margin: 0 0 16px;
      display: flex; align-items: center; gap: 12px;
    }
    .p-mech-sub::after { content: ''; flex: 1; height: 1px; background: var(--border); }
    /* ── Single clinical stat ──────────────────────── */
    .p-data-grid.single {
      grid-template-columns: 1fr;
      max-width: 560px;
      margin-inline: auto;
    }
    .p-data-grid.single .p-data { padding: 34px 22px; }

    /* ── Responsive ─────────────────────────────── */
    @media (max-width: 1024px) {
      .p-hero { grid-template-columns: 1fr; }
      .p-gallery { position: relative; top: auto; max-width: 520px; margin-inline: auto; }
      .p-mech-list { grid-template-columns: 1fr; }
      .p-data-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 920px) {
    }
    @media (max-width: 560px) {
      .p-specs { grid-template-columns: 1fr 1fr; }
      .p-data-grid { grid-template-columns: 1fr; }
    }


/* ── Spec table on small screens: stacked rows (1 per line) ─ */
@media (max-width: 560px) {
  .p-spec-table { border: 0; background: none; }
  .p-spec-table tbody {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .p-spec-table tr {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: baseline;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
  }
  .p-spec-table th, .p-spec-table td {
    display: block;
    width: auto;
  }
  .p-spec-table th {
    padding: 12px 12px 2px;
    background: color-mix(in oklch, var(--accent) 6%, transparent);
  }
  .p-spec-table td { padding: 2px 12px 12px; }
}

/* ═══ 0826 PRODUCT PAGE REDESIGN (from 修改版本0826/product-finelines.html) ═══ */
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Beatrice Finelines · Early Superficial Fine Lines (Face &amp; Neck) — HA Filler</title>
  <meta name="description" content="Beatrice Finelines — a lightly cross-linked sodium hyaluronate filler with lidocaine, designed for early superficial fine lines on the face and neck, with high extensibility and low water uptake." />
  <link rel="stylesheet" href="beatrice-base.css" />
  <style>
    /* ═══════════════════════════════════════════════════════
       Beatrice Finelines product page — page-specific styles
       Base tokens/header/footer/form come from beatrice-base.css
       ═══════════════════════════════════════════════════════ */

    .p-hero-section { padding-block: 0; }

    /* ── Breadcrumb ─────────────────────────────── */
    .p-crumb {
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.04em; color: var(--muted);
      margin: clamp(20px, 3vw, 36px) 0 16px;
    }
    .p-crumb a { color: var(--accent-deep); }
    .p-crumb a:hover { text-decoration: underline; }
    .p-crumb .sep { opacity: 0.5; }

    /* ── Product hero: gallery + info ────────────── */
    .p-hero {
      display: grid;
      grid-template-columns: 5fr 6fr;
      gap: clamp(28px, 4vw, 56px);
      align-items: start;
      padding-block: clamp(16px, 2.4vw, 28px) clamp(32px, 4.5vw, 56px);
    }

    /* Gallery */
    .p-gallery { position: sticky; top: 96px; align-self: start; }
    .p-gallery-main {
      position: relative;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface);
      overflow: hidden;
      cursor: zoom-in;
      line-height: 0;
    }
    .p-gallery-main img {
      width: 100%;
      max-height: calc(100vh - 290px);
      aspect-ratio: 1 / 1;
      object-fit: contain;
      display: block;
      transition: opacity 0.25s ease;
    }
    .p-gallery-main .zoom-hint {
      position: absolute; right: 14px; bottom: 14px;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px;
      background: color-mix(in oklch, var(--surface) 82%, transparent);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      color: var(--muted); letter-spacing: 0.04em;
      backdrop-filter: blur(6px);
      pointer-events: none;
    }
    .p-gallery-main .zoom-hint svg { width: 14px; height: 14px; stroke: var(--muted); }
    .p-thumbs {
      display: grid;
      grid-template-columns: repeat(3, 96px);
      gap: 12px;
      margin-top: 14px;
    }
    .p-thumbs button {
      padding: 0;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      overflow: hidden;
      cursor: pointer;
      line-height: 0;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .p-thumbs button img {
      width: 100%; aspect-ratio: 1 / 1;
      object-fit: contain; display: block;
    }
    .p-thumbs button:hover { border-color: var(--accent); }
    .p-thumbs button.active {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }

    /* Info */
    .p-info .p-cat {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--accent-deep);
      border: 1px solid color-mix(in oklch, var(--accent-deep) 30%, transparent);
      border-radius: 999px; padding: 5px 14px;
      margin-bottom: 16px;
    }
    .p-info h1 {
      font-family: var(--font-display);
      font-size: clamp(34px, 4.2vw, 54px);
      line-height: 1.05; letter-spacing: -0.02em;
      margin: 0 0 6px;
    }
    .p-info .p-subtitle {
      font-family: var(--font-display);
      font-size: clamp(19px, 2.2vw, 26px);
      font-weight: 400; font-style: italic;
      color: var(--accent-deep); letter-spacing: -0.01em;
      margin: 0 0 18px;
    }
    .p-info .p-desc {
      color: var(--muted); line-height: 1.65;
      margin: 0 0 18px;
    }

    .p-keypoints { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
    .p-keypoints li {
      display: flex; align-items: flex-start; gap: 10px;
      line-height: 1.55;
    }
    .p-keypoints li svg {
      flex-shrink: 0; width: 18px; height: 18px;
      stroke: var(--accent-deep); stroke-width: 1.6; fill: none;
      stroke-linecap: round; stroke-linejoin: round;
      margin-top: 2px;
    }
    .p-keypoints li strong { font-weight: 600; }

    /* Spec chips */
    .p-specs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin: 0 0 18px;
    }
    .p-spec {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px 14px;
      background: var(--surface);
    }
    .p-spec .ps-label {
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--muted); display: block; margin-bottom: 4px;
    }
    .p-spec .ps-val {
      font-weight: 600; line-height: 1.3;
    }
    .p-spec .ps-val small { font-weight: 400; color: var(--muted); font-size: var(--fs-sm); }

    .p-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
    .p-actions .btn { border-radius: 999px; padding-inline: 24px; padding-block: 12px; }
    .p-ghost {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 12px 24px; border: 1px solid color-mix(in oklch, var(--fg) 28%, transparent);
      border-radius: 999px; color: var(--fg);
      font-size: 15px; font-weight: 600; letter-spacing: 0.03em;
      background: transparent; transition: background 0.2s, border-color 0.2s;
    }
    .p-ghost:hover { background: color-mix(in oklch, var(--accent) 8%, transparent); border-color: var(--accent); }

    .p-meta-line {
      display: flex; flex-wrap: wrap; gap: 8px 18px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.04em; color: var(--muted);
    }
    .p-meta-line span { display: inline-flex; align-items: center; gap: 6px; }
    .p-meta-line svg { width: 14px; height: 14px; stroke: var(--accent); fill: none; stroke-width: 1.6; }
    /* ── Lightbox ───────────────────────────────── */
    .p-lightbox {
      display: none; position: fixed; inset: 0; z-index: 999;
      align-items: center; justify-content: center;
      background: rgba(10, 12, 16, 0.92);
      padding: 32px;
    }
    .p-lightbox.open { display: flex; }
    .p-lightbox img {
      max-width: 92vw; max-height: 88vh;
      object-fit: contain;
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: 0 0 0 1px var(--border);
    }
    .p-lightbox-close {
      position: absolute; top: 18px; right: 22px;
      width: 44px; height: 44px;
      display: grid; place-items: center;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 50%; cursor: pointer; color: #fff;
      font-size: 22px; line-height: 1;
      transition: background 0.15s;
    }
    .p-lightbox-close:hover { background: rgba(255,255,255,0.25); }

    /* ── Mechanism (2nd screen) ──────────────────── */
    .p-mech-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .p-mech-item {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 22px;
      background: var(--surface);
      transition: box-shadow 0.2s, border-color 0.2s;
    }
    .p-mech-item:hover { border-color: var(--accent-soft); box-shadow: 0 2px 14px color-mix(in oklch, var(--fg) 5%, transparent); }
    .p-mech-item h3 { font-size: 17px; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
    .p-mech-item h3 .mi {
      flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
      background: var(--accent-soft); display: grid; place-items: center;
    }
    .p-mech-item h3 .mi svg { width: 15px; height: 15px; stroke: var(--accent-deep); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .p-mech-item p { color: var(--muted); margin: 0; line-height: 1.6; }

    /* ── Clinical data (3rd screen) ──────────────── */
    .p-clinical { background: linear-gradient(135deg, oklch(28% 0.03 195), oklch(20% 0.02 200)); color: var(--surface); }
    .p-clinical .sl-rule { color: var(--accent); }
    .p-clinical .lead { color: oklch(72% 0.03 195); }
    .p-clinical .lead em { font-style: normal; color: var(--accent); }
    .p-data-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--gap-lg);
      margin-top: clamp(36px, 5vw, 56px);
    }
    .p-data {
      border: 1px solid oklch(42% 0.03 195 / 0.6);
      border-radius: var(--radius-lg);
      padding: 26px 22px;
      text-align: center;
      background: oklch(100% 0 0 / 0.03);
    }
    .p-data .pd-num {
      font-family: var(--font-display);
      font-size: clamp(38px, 4vw, 56px);
      font-weight: 600; line-height: 1; letter-spacing: -0.03em;
      color: var(--accent-gold);
    }
    .p-data .pd-label {
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.08em; text-transform: uppercase;
      color: oklch(72% 0.03 195);
      margin-top: 12px; line-height: 1.4;
    }

    /* Spec table */
    [data-od-id="specs"] .container { max-width: var(--container-narrow); }
    .p-spec-wrap { margin-top: clamp(40px, 6vw, 64px); }
    .p-spec-table {
      width: 100%;
      border-collapse: collapse;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }
    .p-spec-table tr + tr { border-top: 1px solid var(--border); }
    .p-spec-table th {
      text-align: left;
      width: 30%;
      padding: 14px 22px;
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--accent-deep);
      background: color-mix(in oklch, var(--accent) 6%, transparent);
      vertical-align: top;
    }
    .p-spec-table td { padding: 14px 22px; color: var(--fg); line-height: 1.6; }


    /* ── CTA form (consistent with homepage) ────────── */
    .pilot-section {
      background: linear-gradient(135deg, oklch(28% 0.03 195), oklch(20% 0.02 200));
      color: var(--surface);
    }
    .pilot-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--gap-2xl);
      align-items: center;
    }
    .pilot-impact {
      display: flex; flex-direction: column;
      gap: 16px;
    }
    .pilot-impact .pilot-motto {
      font-family: var(--font-display);
      font-size: clamp(32px, 4vw, 50px);
      line-height: 1.04;
      letter-spacing: -0.03em;
      margin: 0;
    }
    .pilot-impact .pilot-desc {
      font-size: var(--fs-body);
      line-height: 1.7;
      color: oklch(72% 0.03 195);
      margin: 0;
      max-width: 44ch;
    }
    .pilot-impact .pilot-desc em {
      font-style: normal;
      color: var(--accent);
    }
    .pilot-impact .pilot-punch {
      font-family: var(--font-display);
      font-size: clamp(18px, 2vw, 24px);
      font-style: italic;
      color: var(--accent);
      margin: 0;
      letter-spacing: -0.01em;
    }
    .pilot-impact .pilot-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--accent);
      text-decoration: none;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.03em;
      transition: opacity 0.15s;
    }
    .pilot-impact .pilot-cta:hover { opacity: 0.75; }
    .pilot-form {
      background: var(--surface);
      border-radius: var(--radius-lg);
      padding: 36px 32px 32px;
      border: 1px solid var(--accent);
      display: flex; flex-direction: column; gap: var(--gap-md);
    }
    .pilot-form h3 {
      font-family: var(--font-display);
      font-size: 20px;
      color: var(--fg);
      margin: 0 0 4px;
    }
    .pilot-form .field { display: flex; flex-direction: column; gap: 6px; }
    .pilot-form .field label {
      font-size: var(--fs-sm);
      color: var(--muted);
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }
    .pilot-form .field .input, .pilot-form .field .textarea {
      width: 100%;
      padding: 11px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg);
      color: var(--fg);
      font: inherit;
      font-size: 14px;
      transition: border-color 0.15s;
    }
    .pilot-form .field .input:focus, .pilot-form .field .textarea:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .pilot-form .field .textarea { min-height: 80px; resize: vertical; }
    .pilot-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); }
    @media (max-width: 920px) {
      .pilot-grid { grid-template-columns: 1fr; }
      .pilot-form .form-row { grid-template-columns: 1fr; }
    }


    /* ── Single clinical stat ──────────────────────── */
    .p-data-grid.single {
      grid-template-columns: 1fr;
      max-width: 560px;
      margin-inline: auto;
    }
    .p-data-grid.single .p-data { padding: 34px 22px; }

    /* ── Clinical cases: before / after (tabbed) ─────── */
    .p-case {
      background: oklch(93.5% 0.022 195);
    }
    .p-case .container { max-width: var(--container-narrow); }
    .p-case-tabs {
      position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
      z-index: 6;
      display: inline-flex; gap: 4px;
      padding: 4px;
      border-radius: 999px;
      background: color-mix(in oklch, var(--fg) 24%, transparent);
      backdrop-filter: blur(12px);
      box-shadow: 0 4px 16px -6px color-mix(in oklch, var(--fg) 35%, transparent);
    }
    .p-case-tab {
      font-family: var(--font-mono);
      font-size: 12px; letter-spacing: 0.08em; line-height: 1;
      padding: 8px 16px;
      border-radius: 999px;
      border: none;
      background: transparent;
      color: color-mix(in oklch, var(--surface) 78%, transparent);
      cursor: pointer;
      transition: background 0.2s, color 0.2s, transform 0.15s;
    }
    .p-case-tab:hover {
      color: var(--surface);
      transform: translateY(-1px);
    }
    .p-case-tab.is-active {
      background: var(--surface);
      color: var(--fg);
      font-weight: 600;
      box-shadow: 0 2px 8px -2px color-mix(in oklch, var(--fg) 30%, transparent);
    }
    .p-case-pane[hidden], .p-case-media .cmp-slide[hidden] { display: none; }
    .p-case-media { position: relative; }
    .p-case-pane.is-active { animation: pCaseFade 0.22s ease; }
    @keyframes pCaseFade {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: none; }
    }
    .p-case-row {
      display: grid;
      grid-template-columns: minmax(0, 450px) minmax(0, 1fr);
      gap: clamp(24px, 3vw, 44px);
      align-items: center;
    }
    .p-case-media {
      position: relative;
      --pos: 50%;
      border-radius: var(--radius-lg);
      box-shadow: 0 14px 40px -18px color-mix(in oklch, var(--fg) 30%, transparent);
    }
    .p-case-media .cmp-frame {
      position: relative;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      border-radius: var(--radius-lg);
      background: #000;
    }
    .p-case-media .cmp-slide { position: relative; width: 100%; height: 100%; }
    .p-case-media .cmp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
    .p-case-media .cmp-after { z-index: 0; }
    .p-case-media .cmp-before { z-index: 1; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
    .p-case-media .cmp-divider {
      position: absolute; top: 0; bottom: 0; left: var(--pos);
      width: 2px; background: #fff;
      transform: translateX(-50%);
      z-index: 2; pointer-events: none;
    }
    .p-case-media .cd-ar {
      position: absolute; top: 50%;
      width: 11px; height: 11px;
      border: solid #fff;
      filter: drop-shadow(0 1px 2px rgba(20, 25, 30, 0.45));
      z-index: 3;
    }
    .p-case-media .cd-ar-l { left: -18px; border-width: 2.5px 0 0 2.5px; transform: translateY(-50%) rotate(-45deg); }
    .p-case-media .cd-ar-r { left: 9px; border-width: 2.5px 2.5px 0 0; transform: translateY(-50%) rotate(45deg); }
    .p-case-media .cmp-range {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      margin: 0; padding: 0; opacity: 0;
      z-index: 3; cursor: ew-resize;
      touch-action: none;
      -webkit-appearance: none; appearance: none;
    }
    .p-case-media .cmp-tag {
      position: absolute; bottom: 12px;
      z-index: 4; pointer-events: none;
      font-family: var(--font-mono);
      font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--accent-deep);
      background: color-mix(in oklch, var(--surface) 88%, transparent);
      backdrop-filter: blur(6px);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 5px 12px;
      line-height: 1.2;
    }
    .p-case-media .cmp-tag-b { left: 12px; }
    .p-case-media .cmp-tag-a { right: 12px; }
    .p-case-copy { padding: 8px 0; }
    .p-case-eyebrow {
      font-family: var(--font-mono);
      font-size: 13px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
      margin: 0 0 12px;
    }
    .p-case-copy h3 {
      font-family: var(--font-display);
      font-size: clamp(22px, 2.4vw, 28px);
      font-weight: 600;
      letter-spacing: -0.01em;
      margin: 0 0 14px;
    }
    .p-case-desc {
      color: var(--muted);
      line-height: 1.62;
      margin: 0 0 22px;
      font-size: 16px;
      max-width: 52ch;
    }
    .p-case-spec {
      list-style: none;
      padding: 0; margin: 0;
      border-top: 1px solid var(--border);
    }
    .p-case-spec li {
      display: flex; gap: 16px;
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
      font-size: 15px;
      line-height: 1.5;
    }
    .p-case-spec li span {
      flex-shrink: 0;
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      min-width: 108px;
      padding-top: 2px;
    }
    .p-case-note {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: clamp(20px, 3vw, 28px);
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.06em;
      color: var(--muted);
      text-align: center;
    }
    .p-case-note::before { content: '†'; margin-top: -2px; }


    /* ── Mechanism of Action & Technical Advantage ── */
    .p-moa .moa-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(28px, 4vw, 56px);
      align-items: center;
    }
    .p-moa .moa-row + .moa-row { margin-top: var(--gap-lg); }
    .p-moa .moa-media img { width: 100%; height: auto; display: block; }
    .p-moa .moa-copy h2 {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: clamp(24px, 2.8vw, 34px);
      margin: 0 0 var(--gap-md);
      line-height: 1.2;
    }
    .p-moa .moa-title {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: clamp(24px, 2.8vw, 34px);
      line-height: 1.2;
      text-align: center;
      margin: 0 0 var(--gap-xl);
    }
    .p-moa .moa-row + .moa-title { margin-top: clamp(48px, 7vw, 88px); }
    .p-moa .moa-copy h3 {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: clamp(18px, 1.8vw, 22px);
      margin: 0 0 10px;
      line-height: 1.25;
    }
    .p-moa .moa-copy p { color: var(--muted); line-height: 1.65; font-size: var(--fs-body); margin: 0 0 var(--gap-md); }
    .p-moa .moa-row.moa-flip .moa-media { order: 2; }
    .p-moa .moa-row.moa-flip .moa-copy { order: 1; }
    .p-moa .moa-points { display: flex; flex-direction: column; gap: var(--gap-lg); }
    .p-moa .moa-point { border-left: 3px solid var(--accent); padding: 6px 0 0 var(--gap-md); }
    .p-moa .moa-point .moa-tag {
      font-family: var(--font-mono);
      font-size: var(--fs-sm);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--accent-deep);
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
    }
    .p-moa .moa-point p { color: var(--muted); font-size: var(--fs-body); line-height: 1.65; margin: 0; }

    /* ── Responsive ─────────────────────────────── */
    @media (max-width: 1024px) {
      .p-hero { grid-template-columns: 1fr; }
      .p-gallery { position: relative; top: auto; max-width: 520px; margin-inline: auto; }
      .p-mech-list { grid-template-columns: 1fr; }
      .p-data-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 920px) {
      .p-moa .moa-row { grid-template-columns: 1fr; }
      .p-moa .moa-row.moa-flip .moa-media,
      .p-moa .moa-row.moa-flip .moa-copy { order: 0; }
      .p-case-row { grid-template-columns: 1fr; gap: var(--gap-lg); }
      .p-case-media { width: 100%; max-width: 560px; margin-inline: auto; }
    }
    @media (max-width: 560px) {
      .p-specs { grid-template-columns: 1fr 1fr; }
      .p-data-grid { grid-template-columns: 1fr; }
    }

/* ═══ moa-vs ("vs Conventional") comparison block ═══ */
.p-moa .moa-vs {
  margin-top: var(--gap-lg);
  padding: var(--gap-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.p-moa .moa-vs-title {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-deep);
  margin-bottom: 8px;
  font-weight: 600;
}
.p-moa .moa-vs p { color: var(--muted); font-size: var(--fs-body); margin: 0; }

/* ═══ moa additions: stat list + media video ═══ */
.p-moa .moa-media video { width: 100%; height: auto; display: block; }
.p-moa .moa-intro {
  max-width: 620px;
  margin: calc(var(--gap-xl) * -0.55) auto var(--gap-xl);
  color: var(--muted);
  line-height: 1.65;
  text-align: center;
}
.p-moa .moa-stat-list { list-style: none; padding: 0; margin: 0 0 var(--gap-md); display: flex; flex-direction: column; gap: 10px; }
.p-moa .moa-stat-list li {
  display: flex; align-items: flex-start; gap: 10px;
  color: var(--muted); line-height: 1.55; font-size: 15px;
}
.p-moa .moa-stat-list li svg {
  flex-shrink: 0; width: 18px; height: 18px;
  stroke: var(--accent-deep); stroke-width: 1.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  margin-top: 2px;
}
.p-moa .moa-stat-list li strong { color: var(--fg); font-weight: 600; }

/* ═══ moa-row spacing: inline layout = separate sections (big gap), split = compact sub-rows ═══ */
.p-moa.layout-inline .moa-row + .moa-row { margin-top: clamp(48px, 7vw, 88px); }