/* EJS Kayakpedia: palette and layouts from native PEDIA_UI / KV_BRAND. */
:root {
  color-scheme: dark;
  --bg-primary: #080C10; --bg-secondary: #0D141B; --bg-tertiary: #1D2A35;
  --bg-card: #151E27; --bg-elevated: #151E27;
  --text-primary: #F1F4F5; --text-secondary: #B8C1C8; --text-muted: #B8C1C8;
  --border-secondary: #293B4A; --border-primary: #293B4A; --border-color: #293B4A;
  --accent-primary: #E0A800; --accent-secondary: #FFD23F; --primary: #E0A800;
  --shallow-water: #E0A800; --deep-water: #12344A; --foam-white: #F1F4F5;
  --theme-bg-primary: #080C10; --theme-bg-secondary: #151E27; --theme-bg-tertiary: #1D2A35;
  --theme-text-primary: #F1F4F5; --theme-text-secondary: #B8C1C8; --theme-text-muted: #B8C1C8;
  --theme-border-secondary: #293B4A; --theme-accent-primary: #E0A800;
  --enc-bg-primary: #080C10; --enc-bg-secondary: #151E27; --enc-bg-tertiary: #1D2A35;
  --enc-text-primary: #F1F4F5; --enc-text-secondary: #B8C1C8; --enc-text-muted: #B8C1C8;
  --enc-border: #293B4A; --enc-accent: #E0A800;
}
.encyclopedia-page { background: #080C10; }
.encyclopedia-container { max-width: 1360px; }
.encyclopedia-page h1, .encyclopedia-page h2, .encyclopedia-page h3 { font-family: var(--font-body); letter-spacing: -.025em; }
.encyclopedia-header { padding: 50px 32px 36px; background: linear-gradient(#12344Af2,#12344Af2),url('/images/coastal-topo.svg') center/cover; border: 1px solid #293B4A; border-radius: 24px; margin-top: 28px; }
.pedia-eyebrow { color: #E0A800; font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.encyclopedia-header h1 { font-size: clamp(28px,4vw,46px); margin: 12px 0; line-height: 1.1; }
.encyclopedia-header p { color: #B8C1C8; font-size: 15px; }
.tabs { gap: 8px; border-bottom: 0; margin: 24px 0; flex-wrap: wrap; }
.tab { border: 1px solid #293B4A; border-radius: 999px; background: #151E27; color: #B8C1C8; font-size: 13px; padding: 10px 22px; }
.tab.active, .filter-pill.active { color: #080C10; background: #E0A800; border-color: #E0A800; }
.filter-pill { border-radius: 999px; background: #1D2A35; color: #B8C1C8; border: 1px solid #293B4A; padding: 8px 16px; font-size: 12px; }
.filter-pill:hover { border-color: #E0A800; }
.search-input, .filter-select { background: #151E27; color: #F1F4F5; border: 1px solid #293B4A; border-radius: 14px; }
.filters-section { border: 1px solid #293B4A; border-radius: 20px; background: #0D141B; padding: 22px; }
.brands-grid, .models-grid, .models-results-grid { gap: 20px; }
.brand-card, .model-card, .model-result-card { background: #151E27; border: 1px solid #293B4A; border-radius: 20px; box-shadow: none; overflow: hidden; }
.brand-card:hover, .model-card:hover, .model-result-card:hover { border-color: #E0A800; transform: translateY(-3px); box-shadow: 0 12px 30px #0003; }
.brand-card-header, .model-card-image, .model-result-image { background: #F1F4F5; }
.model-card-image, .model-result-image { aspect-ratio: 4 / 3; height: auto; padding: 18px; }
.model-card-image img, .model-result-image img { width: 100%; height: 100%; object-fit: contain; }
.brand-logo { object-fit: contain; }
.model-card-body, .model-result-info, .brand-card-body { padding: 20px; }
.model-result-brand, .model-brand-link { color: #E0A800; font-weight: 600; }
.model-result-name, .model-card h3, .brand-name { font-size: 20px; line-height: 1.25; color: #F1F4F5; }
.model-result-spec, .category-tag { border-radius: 999px; background: #12344A; color: #B8C1C8; }
.model-detail-layout { gap: 36px; align-items: start; }
.model-gallery { border-radius: 24px; border-color: #293B4A; }
.model-gallery-main { background: #F1F4F5; padding: 20px; cursor: zoom-in; }
.model-gallery-main img { object-fit: contain; }
.model-gallery-thumbs { overflow-x: auto; background: #0D141B; padding: 16px; gap: 10px; }
.model-gallery-thumb { flex: 0 0 72px; width: 72px; height: 64px; border-radius: 10px; opacity: .8; background: #F1F4F5; }
.model-gallery-thumb img { object-fit: contain; }
.model-gallery-thumb.active { border-color: #E0A800; opacity: 1; }
.zoom-hint { opacity: 1; background: #12344A; color: #F1F4F5; border-radius: 999px; }
.model-title { font-size: clamp(28px,3.5vw,44px); line-height: 1.1; }
.model-key-facts { background: #151E27; padding: 20px; border-radius: 20px; border: 1px solid #293B4A; gap: 20px; }
.key-fact-label { font-size: 10px; letter-spacing: .08em; }
.key-fact-value { font-size: 15px; }
.model-link, .action-btn { border-radius: 14px; }
.vault-btn, .compare-bar-btn.primary, .reply-form button { background: #E0A800; color: #080C10; }
.model-link:hover { background: #12344A; }
.model-msrp-value { color: #E0A800; }
.specs-table-container, .description-body { border-radius: 20px; }
.specs-table-container { overflow-x: auto; }
.specs-table td { font-size: 14px; }
.source-link { color: #E0A800; }
.review-card, .comment-card { background: #151E27; border-radius: 18px; }
.encyclopedia-page :where(a,button,input,select,[role=button]):focus-visible { outline: 2px solid #E0A800; outline-offset: 4px; }
.kayak-gallery-dialog { position: fixed; inset: 0; width: min(1100px,96vw); height: min(850px,94dvh); max-width: 96vw; max-height: 94dvh; margin: auto; padding: 0; border: 1px solid #293B4A; border-radius: 16px; color: #F1F4F5; background: #0D141B; overflow: hidden; }
.kayak-gallery-dialog[open] { display: flex; flex-direction: column; }
.kayak-gallery-dialog::backdrop { background: #080C10e8; }
.gallery-toolbar, .gallery-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; flex-shrink: 0; font-size: 13px; }
.gallery-toolbar>div { display: flex; gap: 8px; }
.kayak-gallery-dialog button { border: 1px solid #293B4A; background: #12344A; color: #F1F4F5; padding: 10px 14px; border-radius: 8px; font-size: 13px; }
.kayak-gallery-dialog button:disabled { opacity: .4; cursor: default; }
.kayak-gallery-dialog button:focus-visible { outline: 2px solid #E0A800; outline-offset: 3px; }
.gallery-stage { flex: 1; min-height: 0; overflow: auto; background: #F1F4F5; }
.gallery-stage img { display: block; width: 100%; height: 100%; object-fit: contain; max-width: none; cursor: zoom-in; }
.gallery-stage.zoomed img { width: 200%; height: 200%; object-fit: contain; cursor: zoom-out; }
#galleryStatus { font-size: 12px; color: #B8C1C8; text-align: center; }
@media(max-width:700px) {
  .encyclopedia-container { padding-left: 16px; padding-right: 16px; }
  .encyclopedia-header { padding: 30px 22px; border-radius: 20px; }
  .encyclopedia-header p { font-size: 13px; }
  .brands-grid, .models-grid, .models-results-grid { gap: 12px; }
  .model-detail-layout { grid-template-columns: minmax(0,1fr); gap: 25px; }
  .model-gallery-thumb { flex-basis: 60px; height: 55px; }
  .gallery-toolbar, .gallery-navigation { padding: 10px; gap: 8px; }
  .kayak-gallery-dialog button { padding: 10px; font-size: 11px; }
}
@media(prefers-reduced-motion:reduce) { .brand-card:hover,.model-card:hover,.model-result-card:hover { transform: none; } }

/* Native browse sheet, adapted to normal web scrolling and desktop widths. */
.pedia-web { background:#0D141B; color:#fff; --bg-primary:#0D141B; --theme-bg-primary:#0D141B; --font-body:'Source Sans 3',Arial,sans-serif; }
.pedia-web .ambient-bg { display:none; }
.pedia-web .main-nav { background:#0D141B; border-bottom:1px solid #ffffff14; box-shadow:none; }
.pedia-web .main-content { background:#0D141B; }
.pedia-web .encyclopedia-page { background:#0D141B; --enc-bg-primary:#0D141B; --enc-bg-secondary:#080C10; --enc-bg-tertiary:#1D2A35; --enc-accent:#E0A800; --enc-border:#ffffff14; --enc-text-primary:#fff; --enc-text-secondary:#B8C1C8; --enc-text-muted:#B8C1C8; }
.pedia-web .encyclopedia-container { max-width:1280px; padding:24px 28px 64px; }
.pedia-web .encyclopedia-header { padding:12px 0 24px; margin:0; border:0; border-radius:0; background:none; }
.pedia-web .pedia-eyebrow { font-size:.875rem; color:#E0A800; letter-spacing:.14em; }
.pedia-web .encyclopedia-header h1 { font-size:clamp(2rem,4vw,3rem); font-weight:900; letter-spacing:.025em; text-transform:uppercase; margin:8px 0; }
.pedia-web .encyclopedia-header p { color:#B8C1C8; font-size:1rem; }
.pedia-web .tabs { display:flex; gap:6px; width:fit-content; max-width:100%; padding:5px; margin:0 0 24px; border-radius:999px; background:#1D2A35; }
.pedia-web .tab { min-height:44px; font-size:1rem; font-weight:800; border:0; background:transparent; padding:10px 22px; color:#fff; }
.pedia-web .tab.active { background:#E0A800; color:#080C10; }
.pedia-web .tab-content, .pedia-web .filters-section { padding:24px; background:#080C10; border:1px solid #ffffff14; border-radius:28px; }
.pedia-web .search-input, .pedia-web .sort-select { min-height:48px; font-size:1rem; font-weight:600; color:#fff; background:#1D2A35; border:1px solid #ffffff14; border-radius:20px; }
.pedia-web .filter-pill { min-height:44px; display:inline-flex; align-items:center; background:#1D2A35; color:#fff; border:1px solid transparent; padding:9px 16px; font-size:.875rem; font-weight:700; }
.pedia-web .filter-pill.active { background:#E0A800; color:#080C10; }
.pedia-web .filter-label, .pedia-web .search-results-title { color:#B8C1C8; font-size:.875rem; letter-spacing:.06em; font-weight:800; }
.pedia-web .brands-grid { grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.pedia-web .brand-card { border-radius:20px; background:#1D2A35; border:1px solid #ffffff14; padding:12px; }
.pedia-web .brand-card-header { background:#080C10; border-radius:14px; height:80px; padding:12px; }
.pedia-web .brand-logo { max-height:58px; max-width:80%; }
.pedia-web .brand-card-body { padding:14px 0; }
.pedia-web .brand-name { font-size:1.125rem; font-weight:800; }
.pedia-web .brand-description { font-size:.875rem; line-height:1.45; color:#B8C1C8; }
.pedia-web .brand-card-footer { border-color:#ffffff14; padding:12px 0 0; font-size:.875rem; }
.pedia-web .category-tag { background:#080C10; color:#B8C1C8; font-size:.75rem; }
.pedia-web .models-grid, .pedia-web .models-results-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.pedia-web .model-card, .pedia-web .model-result-card { display:flex; flex-direction:row; align-items:center; gap:16px; padding:16px; border-radius:20px; background:#1D2A35; border:1px solid #ffffff14; min-width:0; }
.pedia-web .model-card-image, .pedia-web .model-result-image { position:relative; flex:0 0 128px; width:128px; height:112px; aspect-ratio:auto; padding:8px; border-radius:14px; background:#0D141B; }
.pedia-web .model-card-image img, .pedia-web .model-result-image img { object-fit:contain; }
.pedia-web .model-card-body, .pedia-web .model-result-info { flex:1; min-width:0; padding:0; }
.pedia-web .model-result-name, .pedia-web .model-name { font-size:1.125rem; font-weight:800; line-height:1.25; overflow-wrap:anywhere; }
.pedia-web .model-result-brand { color:#B8C1C8; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; }
.pedia-web .model-tags, .pedia-web .model-result-specs { display:flex; flex-wrap:wrap; gap:6px; }
.pedia-web .model-tag, .pedia-web .model-result-spec { background:transparent; color:#E0A800; padding:0; font-size:.875rem; }
.pedia-web .model-tag:not(:last-child)::after, .pedia-web .model-result-spec:not(:last-child)::after { content:' ·'; color:#B8C1C8; }
.pedia-web .model-mini-specs { flex-wrap:wrap; gap:12px; font-size:.875rem; }
.pedia-web .model-price { color:#fff; font-size:1rem; margin-top:10px; }
.pedia-web .model-result-card { padding-right:48px; }
.pedia-web .wishlist-toggle { width:36px; height:36px; right:8px; top:8px; background:#080C10; color:#E0A800; }
.pedia-web .brand-hero { background:#080C10; border:1px solid #ffffff14; border-radius:28px; padding:28px; gap:24px; }
.pedia-web .brand-hero-logo { border-radius:20px; background:#1D2A35; border:1px solid #ffffff14; }
.pedia-web .brand-hero-name { font-size:clamp(1.75rem,4vw,2.75rem); font-weight:900; }
.pedia-web .brand-hero-description { font-size:1rem; color:#B8C1C8; }
/* A full photo stage above the rounded information panel, as in the app. */
.pedia-web .model-detail-layout { display:flex; flex-direction:column; gap:0; }
.pedia-web .model-gallery { width:100%; border:0; border-radius:28px 28px 0 0; background:#0D141B; }
.pedia-web .model-gallery-main { height:clamp(260px,36vw,460px); padding:24px; background:#0D141B; }
.pedia-web .model-gallery-main img { width:100%; height:100%; object-fit:contain; }
.pedia-web .model-gallery-thumbs { justify-content:center; background:#0D141B; padding:16px 16px 28px; }
.pedia-web .model-gallery-thumb { background:#1D2A35; border-radius:14px; }
.pedia-web .model-info { width:100%; padding:32px; border-radius:28px; background:#080C10; border:1px solid #ffffff14; }
.pedia-web .model-key-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); background:#1D2A35; border:0; border-radius:20px; }
.pedia-web .key-fact-label { font-size:.75rem; }
.pedia-web .key-fact-value { font-size:1rem; }
.pedia-web .model-title { font-size:clamp(1.75rem,4vw,2.75rem); font-weight:900; }
.pedia-web .model-link, .pedia-web .action-btn { border-radius:999px; min-height:44px; font-weight:700; }
.pedia-web .model-msrp-value { color:#fff; }
.pedia-web .specs-section, .pedia-web .description-section { padding:28px; background:#080C10; border-radius:28px; }
.pedia-web .specs-table-container { border-color:#ffffff14; }
.pedia-web .specs-table th { background:#1D2A35; color:#B8C1C8; }
.pedia-web .specs-table td { color:#fff; }
.pedia-web .gallery-stage { background:#0D141B; }
.pedia-web .breadcrumb { flex-wrap:wrap; }
.pedia-web a:focus-visible, .pedia-web button:focus-visible, .pedia-web input:focus-visible, .pedia-web select:focus-visible { outline:3px solid #E0A800; outline-offset:4px; }
@media(max-width:900px) {
 .pedia-web .models-grid, .pedia-web .models-results-grid { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:600px) {
 .pedia-web .encyclopedia-container { padding:20px 12px 40px; }
 .pedia-web .tab-content, .pedia-web .filters-section { padding:16px; }
 .pedia-web .tabs { width:100%; }
 .pedia-web .tab { flex:1; padding:10px 12px; }
 .pedia-web .brands-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .pedia-web .model-card, .pedia-web .model-result-card { gap:12px; padding:12px; }
 .pedia-web .model-result-card { padding-right:44px; }
 .pedia-web .model-card-image, .pedia-web .model-result-image { flex-basis:80px; width:80px; height:90px; }
 .pedia-web .model-card-image .status-badge { position:static; display:block; font-size:.75rem; padding:2px; text-align:center; }
 .pedia-web .model-card-image:has(.status-badge) { height:116px; }
 .pedia-web .model-card-image:has(.status-badge) img { height:75px; }
 .pedia-web .brand-hero { padding:20px; }
 .pedia-web .model-info, .pedia-web .specs-section, .pedia-web .description-section { padding:20px; }
 .pedia-web .model-key-facts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
 .pedia-web .model-gallery-thumbs { justify-content:flex-start; }
}

/* The same woodgrain backdrop used by the native Kayakpedia screens. */
.pedia-web .main-content, .pedia-web .encyclopedia-page { background:transparent; }
html body.pedia-web { background-color:#0D141B; background-image:linear-gradient(#080c1226,#080c1226),url('/images/pedia-woodgrain-v2.png'); background-position:center; background-size:cover; background-attachment:fixed; }
.pedia-web .encyclopedia-container { min-height:80vh; }
.pedia-web .pedia-catalog { background:#080C10; padding:24px; border-radius:28px; border:1px solid #ffffff14; }
.pedia-web .pedia-catalog .tab-content { border:0; padding:0; }
.pedia-web .pedia-sheet-toggle { display:block; margin:0 auto 18px; border:0; border-top:5px solid #ffffff48; border-radius:4px; padding:10px 20px; color:#B8C1C8; background:transparent; font:700 .875rem var(--font-body); min-height:44px; touch-action:pan-x; cursor:pointer; }
.pedia-web [hidden] { display:none !important; }
.pedia-stage { display:flex; flex-direction:column; align-items:center; gap:20px; padding:30px 0 36px; }
.pedia-deck { position:relative; width:min(400px,90%); padding-top:36px; touch-action:pan-y; }
.pedia-deck::before,.pedia-deck::after { content:''; position:absolute; height:85%; left:16px; right:16px; top:18px; background:#F4BE18; border-radius:28px; box-shadow:0 10px 30px #0006; }
.pedia-deck::before { top:0; left:30px; right:30px; background:#C58E00; }
.pedia-deck-card { position:relative; z-index:1; display:block; aspect-ratio:1/1.12; border-radius:28px; overflow:hidden; background:#E0A800; box-shadow:0 18px 40px #0008; }
.pedia-deck-card img { width:100%; height:100%; object-fit:contain; }
.pedia-deck-copy { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; padding:26px; background:linear-gradient(transparent 30%,#080c10ed); color:#fff; pointer-events:none; }
#pedia-deck-brand { padding:5px 12px; border-radius:999px; background:#080c10b3; font-size:.875rem; font-weight:800; text-transform:uppercase; }
.pedia-deck-copy h2 { margin:10px 0; font-size:2rem; line-height:1.05; font-weight:900; text-transform:uppercase; }
#pedia-deck-category { background:#E0A800; color:#080C10; border-radius:999px; padding:5px 12px; font-weight:800; font-size:.875rem; }
.pedia-deck-controls { display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:12px; }
.pedia-deck-controls button { border:1px solid #ffffff20; border-radius:999px; background:#080C10; color:#fff; min-width:44px; min-height:44px; padding:10px 16px; cursor:pointer; font-weight:700; }
#pedia-deck-count { color:#fff; background:#080c10c9; border-radius:999px; padding:8px 14px; font-size:.875rem; }
.pedia-web .model-gallery, .pedia-web .model-gallery-main, .pedia-web .model-gallery-thumbs { background:transparent; }
@media(max-width:800px) {
 .pedia-web .pedia-catalog { padding:18px 16px; margin-inline:-12px; border-radius:28px 28px 0 0; }
 .pedia-web .pedia-catalog.is-collapsed .encyclopedia-header { padding-bottom:0; }
 .pedia-stage { padding-top:14px; }
 .pedia-deck { width:min(350px,85%); }
}