/* SmartParcel identity: sampled logo blue #008bfe and yellow #fde52e.
   Restrained UI tones keep the product photography and data readable. */
:root {
  --ink: #142b3b;
  --bg: #f7fafc;
  --line: #d7e4eb;
  --blue: #087fc8;
  --blue-dark: #075e97;
  --blue-soft: #e9f5fc;
  --brand-blue: #008bfe;
  --brand-yellow: #fde52e;
  --brand-ink: #102a3d;
  --brand-muted: #597083;
  --brand-line: #d5e5ef;
  --brand-ice: #eff7fc;
  --brand-cream: #fff9e4;
}

body { background: #f7fafc; color: var(--brand-ink); }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline-color: #087fc8; }
.site-header, .section-navigator { background: #f9fcfeeF; border-color: var(--brand-line); }
.brand-name, .mode-tab, .site-header .ghost-button { color: var(--brand-ink); }
.brand-name small, .demo-caption { color: var(--brand-muted); }
.mode-tab.active { color: #075e97; border-color: #008bfe; }
.section-navigator:after { background: #008bfe; }
.section-navigator button.active { color: #075e97; }
.section-navigator button.active i { color: #008bfe; }
.demo-badge { background: #eaf5fc; color: #075e97; }
.demo-badge span { background: #008bfe; }

/* The editorial hero stays dark; the product image remains the focus. */
.trend-hero { background: #0a1d2c; }
.trend-hero:after, body[data-mode="consumer"] .trend-hero:after {
  background: linear-gradient(90deg, rgba(7,22,35,.94) 0%,rgba(7,22,35,.72) 36%,rgba(7,22,35,.18) 70%,rgba(7,22,35,.1) 100%);
}
.trend-hero-copy>.overline, .hero-lead, .hero-explore:hover { color: #ffe968; }
.hero-lead>span, .hero-foot, body[data-mode="consumer"] .hero-foot { color: #d3e3ed; }
.real-profile-switch button { background: #0e293ad9; border-color: #8bcfff80; color: #e5f4fc; }
.real-profile-switch button:hover { border-color: #fde52e; }
.real-profile-switch button.active { background: #fde52e; border-color: #fde52e; color: #122b3e; }
.real-shopping-rank { background: #092437dc; border-color: #83caff80; color: #f6fbff; }
.real-shopping-rank .rank-eyebrow, .rank-change, .rank-crown, .rank-celebrate { color: #ffe968; }
.real-shopping-rank>strong small, .rank-cohort, .rank-facts span, .real-shopping-rank>small { color: #c6dbe8; }
.rank-facts b, .rank-points { color: #fff1a2; }
.rank-info-trigger { border-color: #8fcfff; background: #008bfe20; color: #e6f6ff; }
.rank-popover { background: #fff; color: var(--brand-ink); border-color: var(--brand-line); }
.rank-popover b { color: #075e97; }

/* Ranking: a triangular apex, then widening tiers. */
.real-leaderboard { background: #f3f8fb; color: var(--brand-ink); border-color: var(--brand-line); }
.leaderboard-heading small, .leaderboard-heading p, .leaderboard-foot, .leaderboard-near-title small { color: var(--brand-muted); }
.league-crown, .league-crown.is-shining { color: #e5b600; text-shadow: 0 0 18px #fde52e80; }
.leaderboard-tier { background: #e7f3fb; border-color: #c6e3f3; }
.leaderboard-tier>small { color: #526f83; }
.tier-pyramid {
  display: grid;
  grid-template-rows: 38fr 20fr 21fr 21fr;
  gap: 0;
  width: min(100%, 260px);
  height: 236px;
  margin: 0 auto;
  overflow: hidden;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: #e4f1f8;
}
.tier-pyramid .tier-band {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  clip-path: none;
  border-top: 2px solid #f3f8fb;
  color: #34536b;
  text-align: center;
}
.tier-pyramid .tier-band span,
.tier-pyramid .tier-band b { white-space: nowrap; }
.tier-pyramid .tier-band.is-active { background: #075e97; color: #fff; box-shadow: none; }
.tier-pyramid .tier-band.tier-0 {
  padding: 0 5px 8px;
  justify-content: flex-end;
  border-top: 0;
  background: #007ac4;
  color: #fff;
}
.tier-pyramid .tier-band.tier-0.is-active { background: #006cab; }
.tier-pyramid .tier-band.tier-0 b { color: #fff4a9; }
.tier-pyramid .tier-band.tier-1 { background: #bedff2; }
.tier-pyramid .tier-band.tier-2 { background: #cce5f3; }
.tier-pyramid .tier-band.tier-3 { background: #dfedf5; }
.tier-pyramid .tier-band.is-active:not(.tier-0) { background: #075e97; }
.podium-card, .leaderboard-row { background: #fff; border-color: var(--brand-line); }
.podium-card.is-me, .leaderboard-row.is-me { background: #fff5c9; border-color: #e4c94d; }
.podium-card>strong, .leaderboard-row>b, .leaderboard-row>strong, .leaderboard-row em { color: #075e97; }
.leaderboard-row:focus-visible, .podium-card:focus-visible { outline-color: #008bfe; }
.leaderboard-preview { background: #102c40; color: #f6fbff; border-color: #6cbbed; }
.leaderboard-preview>b { color: #ffe968; }
.leaderboard-preview small { color: #bdd4e3; }
.leaderboard-row .leaderboard-preview { bottom: calc(100% - 1px); }
.podium-card .leaderboard-preview { top: calc(100% - 1px); }
.leaderboard-row:hover, .leaderboard-row:focus-within, .leaderboard-row.is-open,
.podium-card:hover, .podium-card:focus-within, .podium-card.is-open { z-index: 30; }
.leaderboard-row:hover .leaderboard-preview, .leaderboard-row:focus .leaderboard-preview,
.leaderboard-row:focus-within .leaderboard-preview, .leaderboard-row.is-open .leaderboard-preview,
.podium-card:hover .leaderboard-preview, .podium-card:focus .leaderboard-preview,
.podium-card:focus-within .leaderboard-preview, .podium-card.is-open .leaderboard-preview { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.leaderboard-preview a { color: #edf8ff; text-decoration: underline; text-decoration-color: #82c9f2; text-underline-offset: 3px; }
.leaderboard-preview a:hover, .leaderboard-preview a:focus-visible { color: #ffe968; text-decoration-color: #ffe968; }
.leaderboard-preview li { padding: 2px 0; }

/* Purchase journey and next-product evidence. */
.interest-space { background: #f0f6fa; color: var(--brand-ink); }
.movement-story-intro .overline, .movement-story-label strong, .real-next-heading>span { color: #075e97; }
.movement-story-label, .spatial-core span, .spatial-core small, .spatial-caption small,
.real-next-heading>small, .real-next-candidates details, .scroll-cue { color: var(--brand-muted); }
.spatial-core strong, .movement-next strong, .real-next-heading>b { color: var(--brand-ink); }
.spatial-orbit { border-color: #69b6e455; box-shadow: 0 20px 40px #008bfe0d; }
.spatial-object.selected img { outline-color: #008bfe; }
.spatial-caption em { background: #d7eefd; color: #075e97; }
.journey-arrow { stroke: #0787d2; }
.real-journey-arrows marker path { stroke: #0787d2; }
.spatial-object img { background: #f5f9fc; }
.movement-next { border-color: #c9dce7; }
body[data-mode="consumer"] .movement-next p,
body[data-mode="consumer"] .real-purchase-story { color: #476579; }
.real-next-products a { background: #fff; color: var(--brand-ink); border-color: var(--brand-line); }
.real-next-products a:hover { border-color: #008bfe; }
.real-next-products img, .hero-hotspot-product img { background: #edf5fa; }
.real-next-products .peer-example-proof { background: #e6f4fc; color: #075e97; }
.real-next-products a>small { color: #4b6c82; }
.real-next-candidates { border-color: var(--brand-line); }
.real-peer-pane { background: #f7fbfd; border-color: var(--brand-line); }
.real-next-heading>div:first-child span { color: #075e97; }
.real-next-controls button { background: #e5f4fc; border-color: #a8d7ef; color: #075e97; }
.real-next-controls button:hover:not(:disabled) { background: #cae9fa; }
.real-next-controls span { color: var(--brand-muted); }
body[data-mode="consumer"] #consumerMovementAction, .movement-story-stage>button {
  background: #075e97; color: #fff;
}
body[data-mode="consumer"] #consumerMovementAction[hidden] { display:none !important; }
body[data-mode="consumer"] .real-peer-pane #consumerMovementAction { background: #075e97; color: #fff; }
body[data-mode="consumer"] #consumerMovementAction:hover, .movement-story-stage>button:hover { background: #008bfe; }
body[data-mode="consumer"] .real-peer-pane #consumerMovementAction:hover { background: #008bfe; }
.real-purchase-insight { background: #f5fbff; border-left-color: #008bfe; }
.real-purchase-insight span { color: #075e97; }
.real-purchase-insight strong { color: var(--brand-ink); }
.real-purchase-insight p, .real-purchase-insight small { color: #4d6b7d; }
.hero-hotspot-ring { border-color: #ffe968; background: #fde52e30; box-shadow: 0 0 0 6px #fde52e20,0 0 22px #fde52e80; }
.hero-hotspot-ring:after { background: #fff09a; box-shadow: 0 0 12px #fde52e; }
.hero-hotspot-label { background: #092437cc; border-color: #9edaff70; }
.hero-hotspot-panel { background: #fff; color: var(--brand-ink); border-color: var(--brand-line); }
.hero-hotspot-kicker, .hero-hotspot-related a { color: #075e97; }
.hero-hotspot-timing { background: #eaf6fd; }
.hero-hotspot-related { border-color: var(--brand-line); }
.real-repeat-feature { background: #fff9ec; border-color: #eacfa4; border-left-color: #e2ab26; }
.real-repeat-feature .repeat-feature-copy>span, .real-repeat-feature .repeat-feature-date b { color: #986811; }

/* Community and question surfaces retain their familiar structure. */
body[data-mode="consumer"] .shopping-community { background: #fbfdfe; }
.community-notifications>button:nth-child(2) { background: #e9f5fc; }
.notification-avatar { background: #0b5f94; color: #fff; }
.community-notifications b { color: var(--brand-ink); }
.community-notifications button>span:nth-child(2), .community-demo-intro, .community-demo-row-meta { color: var(--brand-muted); }
.community-tabs { border-color: var(--brand-line); }
.community-tabs button.active { color: #075e97; border-color: #008bfe; }
.community-demo-list, .community-demo-row { border-color: var(--brand-line); }
.community-demo-row:hover { background: #edf7fd; }
.community-demo-open { color: var(--brand-ink); }
.community-demo-open img { background: #edf5fa; }
.community-demo-row-copy small, .community-demo-like { color: #55758a; }
.community-demo-more { background: linear-gradient(180deg,#fbfdfe00,#fbfdfe 35%); }
.community-demo-more button { background: #075e97; color: #fff; }
.community-demo-more button:hover { background: #008bfe; }
.real-peer-metric, .real-evaluation-punch { background: #eaf5fc; color: var(--brand-ink); }
.real-evaluation-punch { border-left-color: #008bfe; }
.real-evaluation-punch strong, .real-evaluation-next strong { color: var(--brand-ink); }
.real-answer .va-candidates a { color: #075e97; }
.user-bubble { background: #e9f5fc; border-color: #c8e6f5; color: var(--brand-ink); }

/* Seller mode shares the brand palette, without changing its layout or content. */
.sidebar { background: #edf5fa; }
.seller-lens-panel { background: #e9f5fc; }
.seller-proposition-grid article, .channel-card p { border-color: #cbdfe9; }
.seller-proposition-grid span, .seller-proof-line, .section-hint { color: #536d7e; }
.seller-movement-answer .routine-signals span { background: #eaf5fc; border-left-color: #008bfe; color: var(--brand-ink); }
.product-action { background: #e9f5fc; border-left-color: #008bfe; }
.channel-card p { color: var(--brand-ink) !important; }
.customer-scene { background: #102a3d; }
.scene-shade { background: linear-gradient(180deg,#081d3070,transparent 45%,#081d30a1); }
.scene-context small, .scene-context>span, .scene-note { color: #d9e7ee; }
.next-hotspot { background: #0b263bd9; border-color: #a7d7ee88; color: #f7fcff; }
.next-hotspot:hover { background: #103a58ee; }
.hotspot-label i, .signal-reveal b { color: #ffe968; }
.signal-reveal small { color: #c6dce8; }
.movement-route-chips button { border-color: #b8d7e8; color: #28516a; }
.movement-route-chips button:hover, .movement-route-chips button.active { background: #e5f4fc; border-color: #008bfe; }

.shopping-identity, .personal-commerce, .consumer-command { color: var(--brand-ink); }
.shopping-identity { background: #eaf5fc; }
.personal-commerce { background: #f3f8fb; }
.consumer-command { background: #fbfdfe; }
.identity-heading .overline, .consumer-command-head .overline, .seller-hero .overline { color: #075e97; }
.consumer-command-head .live-dot { color: #008bfe; }
.identity-numbers strong, .trend-product strong, .peer-product strong { color: var(--brand-ink); }
.personal-commerce .peer-product span { color: #536e82; }
.personal-commerce .peer-product em { background: #075e97; }
.behavior-profile-tab.active, .consumer-map-node.active { border-color: #008bfe; }
.consumer-map-node.future { border-color: #8dd0f2; background: #f4fbff; }
.consumer-map-insight>button, .community-pulse>button { background: #075e97; }
.consumer-map-insight>button:hover, .community-pulse>button:hover { background: #008bfe; }

@media (max-width: 800px) {
  #sellerView .sidebar { background: #edf5fa; }
}
@media (max-width: 700px) {
  body[data-mode="consumer"] .movement-product-sequence .spatial-object {
    background: #fff;
    border-color: var(--brand-line);
  }
  body[data-mode="consumer"] .movement-product-sequence .spatial-object.selected {
    background: #e9f5fc;
    border-color: #008bfe;
  }
}

/* The league uses four distinct, cut sections of one pyramid. */
.tier-pyramid .tier-band.tier-0,
.tier-pyramid .tier-band.tier-0.is-active { background: #006eae; color: #fff; }
.tier-pyramid .tier-band.tier-1,
.tier-pyramid .tier-band.tier-1.is-active { background: #ffd44f; color: #16384d; }
.tier-pyramid .tier-band.tier-2,
.tier-pyramid .tier-band.tier-2.is-active { background: #ff9779; color: #3d2731; }
.tier-pyramid .tier-band.tier-3,
.tier-pyramid .tier-band.tier-3.is-active { background: #b8a5e2; color: #302c4c; }
.tier-pyramid .tier-band.is-active { filter: saturate(1.15); }
.tier-pyramid .tier-band.tier-0 b { color: #fff4a9; }

.leaderboard-near-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 7px 2px 2px;
  scrollbar-color: #8ebfda #e6f2f9;
  scrollbar-width: thin;
}
.leaderboard-row {
  display: grid;
  grid-template-columns: 39px 38px minmax(0,1fr) 82px 77px;
  gap: 9px;
  align-items: center;
  min-height: 49px;
  box-sizing: border-box;
  flex: 0 0 auto;
  padding: 6px 10px;
}
.leaderboard-row>b { font-size: 12px; }
.league-person { display: grid; min-width: 0; gap: 1px; }
.league-person strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.league-person small { font-size: 10px; color: #6c8292; }
.leaderboard-row .league-points { justify-self: end; font-size: 13px; white-space: nowrap; }
.league-movement { justify-self: end; font-size: 12px; font-weight: 850; white-space: nowrap; }
.league-movement.is-up { color: #c84557; }
.league-movement.is-down { color: #2778b8; }
.league-movement.is-flat { color: #8796a2; }
.league-movement { display:grid; justify-items:end; gap:1px; line-height:1.15; }
.league-movement small { color:#6c8292; font-size:9px; font-weight:650; }
.league-movement b { font-size:13px; font-weight:850; }
.podium-card>.league-movement { justify-items:center; margin-top:2px; font-size:12px; }
.podium-card>.league-movement b { font-size:15px; }
.real-shopping-rank .rank-change.is-up { color:#ff8992; }
.real-shopping-rank .rank-change.is-down { color:#8bd1ff; }
.league-avatar { display: inline-grid; place-items: center; position: relative; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; background: var(--avatar-bg); box-shadow: inset 0 0 0 2px #ffffffb8, 0 2px 7px #0c365722; }
.league-avatar svg { display: block; width: 100%; height: 100%; transition: transform .25s ease; }
.avatar-crown { position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-8deg); color: #d7a900; font-size: 15px; line-height: 1; text-shadow: 0 1px #fff, 0 2px 5px #ffe484; }
.leaderboard-row:hover .league-avatar svg,.podium-card:hover .league-avatar svg,.leaderboard-row:focus-within .league-avatar svg,.podium-card:focus-within .league-avatar svg { transform: rotate(-10deg) translateY(-3px) scale(1.1); }
.podium-card { position: relative; grid-template-rows: auto 1fr auto; justify-items: center; min-height: 145px; text-align: center; }
.podium-card>span:first-child { position: absolute; top: 11px; left: 12px; }
.podium-card>.league-avatar { width: 45px; height: 45px; margin-top: 10px; }
.podium-card>b { align-self: end; }
.podium-card>strong { align-self: end; }
.leaderboard-preview-head { display: flex; gap: 12px; align-items: center; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #ffffff2e; }
.leaderboard-preview-head>.league-avatar { width: 56px; height: 56px; }
.leaderboard-preview-head>span:last-child { display: grid; gap: 3px; }
.leaderboard-preview-head strong { color: #fff; font-size: 17px; }
.leaderboard-preview-head small { margin: 0; color: #a9d7f0; }
.leaderboard-row .leaderboard-preview {
  grid-column: 1 / -1;
  position: static;
  display: none;
  width: 100%;
  padding: 13px 15px;
  box-sizing: border-box;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.leaderboard-row:hover .leaderboard-preview,.leaderboard-row:focus-within .leaderboard-preview,.leaderboard-row.is-open .leaderboard-preview { display: block; }
.leaderboard-row .leaderboard-preview ol { max-height: 170px; overflow-y: auto; }
.leaderboard-demo-note { display: block; margin-top: 8px; color: #617d90; font-size: 10px; line-height: 1.4; }
.cross-category-scroll-note { display: block; color: #658397; font-size: 10px; margin: 0 0 6px; }
.cross-category-products { max-height: 174px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-color: #8ebfda #e6f2f9; scrollbar-width: thin; }

@media(max-width:700px) {
  .leaderboard-near-grid { max-height: 305px; }
  .leaderboard-row { grid-template-columns: 27px 31px minmax(0,1fr) 45px 55px; gap: 4px; padding: 5px; }
  .leaderboard-row .league-avatar { width: 30px; height: 30px; }
  .leaderboard-row>b,.leaderboard-row .league-points,.league-movement { font-size: 10px; }
  .league-person strong { font-size: 11px; }
  .league-person small { font-size: 9px; }
  .podium-card>.league-avatar { width: 38px; height: 38px; }
  .leaderboard-near-title { align-items: flex-start; }
  .leaderboard-near-title small { max-width: 105px; text-align: right; }
}
@media(prefers-reduced-motion:reduce) {
  .league-avatar svg { transition: none; }
  .leaderboard-row:hover .league-avatar svg,.podium-card:hover .league-avatar svg { transform: none; }
}

/* A single cut pyramid: narrow gold summit, then progressively lighter blue. */
.leaderboard-tier { display:flex; flex-direction:column; }
.leaderboard-tier>strong span { font-size:14px; font-weight:750; letter-spacing:0; white-space:nowrap; }
@media(min-width:701px) {
  .leaderboard-layout { grid-template-columns:minmax(320px,350px) minmax(0,1fr); gap:22px; }
}
.tier-pyramid { width:min(100%,300px); height:245px; grid-template-rows:28fr 23fr 24fr 25fr; }
.tier-pyramid .tier-band { cursor:help; line-height:1.2; }
.tier-pyramid .tier-band.tier-0,
.tier-pyramid .tier-band.tier-0.is-active { background:linear-gradient(135deg,#fff1a2 0%,#f8d054 52%,#e9ad2e 100%); color:#172b3c; padding-bottom:7px; }
.tier-pyramid .tier-band.tier-0 b { color:#172b3c; }
.tier-pyramid .tier-band.tier-1,
.tier-pyramid .tier-band.tier-1.is-active { background:#057dc0; color:white; }
.tier-pyramid .tier-band.tier-2,
.tier-pyramid .tier-band.tier-2.is-active { background:#6eb7df; color:#12344f; }
.tier-pyramid .tier-band.tier-3,
.tier-pyramid .tier-band.tier-3.is-active { background:#b9dbef; color:#14364c; }
.tier-pyramid .tier-band:hover,.tier-pyramid .tier-band:focus-visible { filter:brightness(1.09); outline:none; }
.tier-pyramid .tier-band span { font-size:12px; }
.tier-pyramid .tier-band b { font-size:10px; font-weight:800; }
.tier-stat { flex:1; min-height:140px; margin:17px 2px 0; padding:15px 17px; background:#fff; border-left:4px solid #f4c94c; color:#19425c; line-height:1.4; display:flex; flex-direction:column; justify-content:center; gap:2px; box-shadow:0 6px 18px #134b7010; }
.tier-stat-label { display:block; font-size:12px; font-weight:800; color:#42677f; }
.tier-stat-value { display:block; color:#075e97; font-size:clamp(32px,3.2vw,44px); line-height:1.15; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.tier-stat[data-tier="0"] .tier-stat-value { color:#a46f00; }
.tier-stat small { display:block; color:#607f93; font-size:11px; }
.rank-info-trigger { border:0; background:transparent; box-shadow:none; color:#fff; }
.leaderboard-row .leaderboard-preview { display:none; }
.leaderboard-row:hover .leaderboard-preview,.leaderboard-row:focus-within .leaderboard-preview { display:none; }
.leaderboard-row:has(>.league-avatar:hover) .leaderboard-preview,
.leaderboard-row:has(.league-person strong:hover) .leaderboard-preview,
.leaderboard-row:has(.league-person strong:focus-visible) .leaderboard-preview,
.leaderboard-row.is-open .leaderboard-preview { display:block; }
.league-person em { font-size:10px; font-style:normal; font-weight:800; color:#0878bc; }
.league-person strong { cursor:pointer; }
.league-person strong:focus-visible { outline:2px solid #008bfe; outline-offset:2px; }
.leaderboard-preview-head>.league-avatar { width:70px; height:82px; border-radius:12px; }
.real-shopping-rank { width:min(315px,29%); z-index:7; }
.rank-identity { display:flex; align-items:center; gap:10px; margin:4px 0 9px; }
.rank-identity .league-avatar { width:43px; height:49px; border-radius:10px; }
.rank-identity b { font-size:15px; color:#fff; }
.rank-shop-trigger { display:inline-flex; align-items:center; border:1px solid #f8d866; border-radius:999px; background:#f9d662; color:#15354d; font:inherit; font-size:12px; font-weight:850; padding:8px 13px; margin-top:9px; cursor:pointer; }
.rank-shop-trigger:hover,.rank-shop-trigger:focus-visible { background:#fff1a0; }
.rank-card-actions { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.rank-card-actions>span { display:flex; flex-direction:column; align-items:flex-start; }
.rank-card-actions .rank-remaining { margin:4px 0 0 7px; }
.rank-profile-chooser { display:flex; align-items:center; gap:5px; margin-top:9px; color:#e7f6ff; font-size:11px; font-weight:800; white-space:nowrap; }
.rank-profile-chooser button { width:28px; height:28px; border:1px solid #b4e4fa8c; border-radius:50%; background:#ffffff12; color:#fff; font:inherit; font-size:21px; line-height:1; cursor:pointer; }
.rank-profile-chooser button:hover,.rank-profile-chooser button:focus-visible { background:#ffe271; border-color:#ffe271; color:#0e2b3e; }
@media(max-width:700px) { .real-shopping-rank { width:min(270px,67%); } .tier-pyramid { width:min(100%,300px); } }
.leaderboard-row { grid-template-columns:39px 44px minmax(0,1fr) 82px 77px; }
.league-avatar { width:43px; height:56px; border-radius:12px; overflow:visible; background:linear-gradient(160deg,#e6f4fd,#f9f1d6); }
.league-avatar svg { width:100%; height:100%; object-fit:contain; }
.podium-card>.league-avatar { width:56px; height:72px; }
.rank-identity .league-avatar { width:43px; height:56px; }
.rank-remaining { display:inline-block; margin-left:10px; color:#fce888; font-size:11px; }
.rank-price { display:block; margin-top:1px; color:#cde6f5; font-size:11px; }
.league-shop-dialog { width:min(1120px,calc(100vw - 28px)); max-width:none; max-height:min(92vh,950px); padding:0; border:0; border-radius:22px; background:#f8fbfd; overflow-y:auto; box-shadow:0 30px 100px #03182d88; }
.league-shop-dialog::backdrop { background:#061829b8; backdrop-filter:blur(5px); }
.league-shop-dialog .ls-shop { margin:0; border:0; box-shadow:none; }
.league-shop-close { position:sticky; float:right; top:16px; right:16px; z-index:30; margin:16px 16px -58px 0; border:0; border-radius:50%; width:38px; height:38px; background:#17364c; color:#fff; font-size:18px; cursor:pointer; }
@media(max-width:700px) { .leaderboard-row { grid-template-columns:27px 35px minmax(0,1fr) 45px 55px; } .leaderboard-row .league-avatar { width:33px; height:44px; } .podium-card>.league-avatar { width:38px; height:52px; } .league-shop-dialog { max-height:96vh; width:calc(100vw - 12px); } }

/* Product profile is portaled to the viewport so the scrolling rank list cannot clip it. */
.leaderboard-row .leaderboard-preview,.podium-card .leaderboard-preview { display:none !important; }
.leaderboard-preview-float { position:fixed; z-index:99999; top:12px; left:12px; right:auto; bottom:auto; display:block; width:min(410px,calc(100vw - 24px)); height:auto; max-height:calc(100dvh - 24px); overflow-y:auto; overflow-x:hidden; box-sizing:border-box; padding:17px; border:1px solid #6f9aba; border-radius:14px; background:#102f48; color:#fff; box-shadow:0 22px 60px #071e39aa; opacity:1; visibility:visible; transform:none; pointer-events:auto; overscroll-behavior:contain; text-align:left; white-space:normal; }
.leaderboard-preview-float[hidden] { display:none !important; }
.leaderboard-preview-float>.leaderboard-preview-head { margin-bottom:13px; }
.leaderboard-preview-float>b { display:block; color:#ffe17b; font-size:12px; margin:0 0 10px; }
.leaderboard-product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.leaderboard-product-grid a { min-width:0; padding:5px; border-radius:8px; background:#f6f9fb; color:#102f48; text-decoration:none; display:grid; grid-template-rows:94px auto; gap:5px; }
.leaderboard-product-grid a:hover,.leaderboard-product-grid a:focus-visible { outline:2px solid #ffdb6b; outline-offset:1px; }
.leaderboard-product-grid img { display:block; width:100%; height:94px; object-fit:contain; border-radius:5px; background:#eaf1f5; }
.leaderboard-product-grid span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:11px; font-weight:750; line-height:1.35; overflow-wrap:anywhere; }
.leaderboard-preview-float>small { display:block; color:#aac9dd; font-size:10px; margin-top:12px; }
.board-rank-activity { display:grid; gap:8px; margin:0 0 15px; }
.board-profile-section { display:grid; gap:7px; border-top:1px solid #ffffff2d; padding:11px 0 3px; }
.board-profile-section>b { color:#ffe17b; font-size:12px; }
.board-profile-section>small { color:#bdd4e3; font-size:11px; }
.board-profile-section>p { margin:0; color:#d8ebf6; font-size:11px; line-height:1.5; }
.board-profile-post { display:grid; gap:3px; width:100%; padding:8px 10px; border:1px solid #6692af; border-radius:8px; background:#244960; color:#fff; text-align:left; cursor:pointer; font:inherit; }
.board-profile-post strong { font-size:11px; line-height:1.4; }
.board-profile-post small { color:#b6d6e9; font-size:10px; }
.board-profile-post:hover,.board-profile-post:focus-visible { border-color:#ffe17b; }
.board-profile-float { position:fixed; z-index:99999; width:min(410px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; box-sizing:border-box; padding:18px; border:1px solid #6f9aba; border-radius:14px; background:#102f48; color:#fff; box-shadow:0 22px 60px #071e39aa; }
.board-profile-float[hidden] { display:none; }
.board-profile-close { position:absolute; top:8px; right:12px; border:0; background:transparent; color:#fff; font-size:24px; cursor:pointer; }
.board-profile-identity { display:flex; align-items:center; gap:12px; padding-right:20px; }
.board-profile-identity strong { display:block; font-size:17px; }
.board-profile-identity small { color:#bed8e8; font-size:11px; }
.board-profile-purchase { display:grid; gap:4px; }
.board-profile-purchase>small { color:#a9cfe6; font-size:10px; }
.board-profile-float .board-product { margin:0; padding:8px; background:#f7fbfd; }
.board-profile-float .board-product strong { font-size:11px; }
.board-profile-product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.board-profile-product-grid>a,.board-profile-product-grid>div { display:grid; grid-template-rows:72px auto auto; gap:4px; min-width:0; padding:5px; border-radius:8px; background:#f6f9fb; color:#102f48; text-decoration:none; }
.board-profile-product-grid img,.board-profile-product-placeholder { display:grid; place-items:center; width:100%; height:72px; object-fit:contain; border-radius:5px; background:#eaf1f5; }
.board-profile-product-grid strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:10px; line-height:1.35; }
.board-profile-product-grid small { color:#52748b; font-size:9px; line-height:1.25; }
.board-profile-product-grid>a:hover,.board-profile-product-grid>a:focus-visible { outline:2px solid #ffdb6b; }
.board-profile-trigger { display:grid; place-items:center; padding:0; border:0; background:transparent; color:inherit; cursor:pointer; font:inherit; }
.board-profile-name { display:block; color:#1d3f52; font-size:13px; font-weight:750; text-align:left; }

/* The consumer community reads the live board; the original demo cards are not rendered. */
body[data-mode="consumer"] .board-community { background:#f4f8fb; padding-top:72px; padding-bottom:86px; }
.board-community .community-heading h2 { font-weight:720; color:#102f48; }
.board-community .community-heading>.demo-caption { color:#567991; font-size:12px; }
.board-community .community-pulse[hidden] { display:none !important; }
.board-community .community-layout { display:block; max-width:1040px; margin:20px auto 0; }
.board-community .community-feed { display:block !important; width:100%; }
.board-community .community-tabs { display:flex; flex-wrap:wrap; gap:7px; max-width:1040px; margin:36px auto 0; border:0; }
.board-community .community-tabs button { border:1px solid #c9deeb; border-radius:999px; padding:10px 15px; background:#fff; color:#3d637b; font-size:13px; font-weight:760; cursor:pointer; }
.board-community .community-tabs button.active,.board-community .community-tabs button[aria-selected="true"] { border-color:#087dc0; background:#087dc0; color:#fff; }
.board-community .community-tabs button:focus-visible,.board-community button:focus-visible,.board-community a:focus-visible { outline:3px solid #e5b93f; outline-offset:2px; }
.board-community.is-detail .community-tabs { display:none; }
.board-list-caption { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 0 12px; margin-bottom:4px; color:#647f90; font-size:12px; border-bottom:1px solid #c7dce9; }
.board-list-caption small { flex:none; font-size:11px; }
.board-post-card { border-bottom:1px solid #d7e5ee; background:#fff; }
.board-post-card:first-of-type { border-top:1px solid #d7e5ee; }
.board-post-open { width:100%; display:grid; grid-template-columns:76px minmax(0,1fr) 24px; gap:16px; align-items:center; padding:13px; background:transparent; border:0; text-align:left; cursor:pointer; color:#14334a; }
.board-post-open:hover { background:#eaf6fd; }
.board-post-open>img,.board-card-placeholder { width:76px; height:76px; border-radius:9px; background:#e8f0f5; object-fit:contain; }
.board-card-placeholder { display:grid; place-items:center; font-size:25px; }
.board-post-copy { display:grid; gap:6px; min-width:0; }
.board-post-kicker { display:flex; gap:6px; align-items:center; color:#39789c; font-size:11px; font-weight:800; }
.board-category-chips { display:flex; flex-wrap:wrap; align-items:center; gap:5px; min-width:0; }
.board-category-chips>span { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:5px; padding:3px 7px; font-size:10px; line-height:1.35; font-weight:800; }
.board-category-l1 { background:#e3f2fc; color:#086fa9; }
.board-category-l1.is-ad { background:#fff0d8; color:#9a5609; }
.board-category-l2 { background:#edf1f4; color:#566e7d; }
.board-detail>.board-category-chips { margin-bottom:10px; }
.board-post-copy>strong { display:block; font-size:16px; line-height:1.35; overflow-wrap:anywhere; }
.board-post-copy>small { color:#6c8494; font-size:11px; line-height:1.4; }
.board-card-arrow { justify-self:end; color:#087dc0; font-size:19px; }
.board-verdict,.board-live { border-radius:999px; padding:3px 7px; font-size:10px; font-weight:800; font-style:normal; }
.board-verdict.GOOD_DEAL { background:#e4f4df; color:#286944; }
.board-verdict.BAD_DEAL { background:#ffe9e6; color:#b0473e; }
.board-verdict.AVERAGE,.board-verdict.TASTE { background:#eef1fb; color:#5b608a; }
.board-live { background:#fff2cc; color:#875d00; }
.board-state { padding:45px 20px; text-align:center; background:#fff; color:#546f80; font-size:14px; }
.board-state button,.board-more { display:block; margin:16px auto 0; border:1px solid #087dc0; border-radius:8px; background:#fff; color:#0871ae; padding:11px 18px; font:inherit; font-size:13px; font-weight:800; cursor:pointer; }
.board-more:hover,.board-state button:hover { background:#e9f5fc; }
.board-detail-top { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#567b90; font-size:12px; margin:0 0 15px; }
.board-detail-top button { border:0; background:none; color:#0871ae; font:inherit; font-weight:850; cursor:pointer; padding:7px 0; }
.board-detail { background:#fff; border:1px solid #d5e5ef; border-radius:17px; padding:30px; box-shadow:0 12px 34px #124b6910; }
.board-detail-kicker { color:#0876b4; font-size:12px; font-weight:850; margin-bottom:8px; }
.board-detail h3 { color:#102f48; font-size:clamp(22px,3vw,30px); line-height:1.25; margin:0 0 18px; letter-spacing:-.035em; }
.board-author { display:flex; align-items:center; gap:11px; margin-bottom:20px; }
.board-avatar { width:45px; height:54px; flex:none; display:grid; place-items:center; border-radius:9px; background:linear-gradient(145deg,#e5f2fb,#fff2d8); overflow:hidden; }
.board-avatar.is-large { width:60px; height:70px; }
.board-ad-author-mark { display:grid; place-items:center; width:60px; height:70px; flex:none; border-radius:9px; background:#fff0d8; color:#9a5609; font-size:24px; font-weight:850; }
.board-avatar svg { display:block; width:100%; height:100%; }
.board-author-name { display:grid; gap:3px; border:0; background:transparent; text-align:left; cursor:pointer; color:#18394d; font:inherit; }
.board-author-name strong { font-size:15px; }
.board-author-name small { color:#7591a1; font-size:11px; }
.board-follow { margin-left:auto; flex:none; border:1px solid #8fc6e8; border-radius:999px; background:#eaf6fd; color:#076da8; padding:8px 12px; font:inherit; font-size:12px; font-weight:800; cursor:pointer; }
.board-follow:hover { background:#d8effc; }
.board-verdict-panel { display:grid; gap:4px; border-radius:10px; padding:15px 17px; margin-bottom:16px; font-size:13px; line-height:1.5; }
.board-verdict-panel.GOOD_DEAL { background:#eaf6e5; color:#256b40; }
.board-verdict-panel.BAD_DEAL { background:#ffefed; color:#a64039; }
.board-verdict-panel.AVERAGE,.board-verdict-panel.TASTE { background:#eef2fb; color:#595f8b; }
.board-product { display:grid; grid-template-columns:86px minmax(0,1fr) auto; align-items:center; gap:14px; min-width:0; border:1px solid #d5e5ef; border-radius:12px; padding:10px; color:#16364d; text-decoration:none; background:#fbfdfe; }
a.board-product:hover { background:#eef8fd; border-color:#9bcced; }
.board-product>img,.board-product-placeholder { width:86px; height:82px; object-fit:contain; border-radius:7px; background:#edf3f7; }
.board-product-placeholder { display:grid; place-items:center; font-size:26px; }
.board-product>span:nth-child(2) { display:grid; gap:5px; min-width:0; }
.board-product strong { font-size:14px; line-height:1.4; }
.board-product small { color:#6a8596; font-size:11px; line-height:1.35; }
.board-product>b { color:#087bc0; font-size:12px; white-space:nowrap; }
.board-detail-body { white-space:pre-wrap; overflow-wrap:anywhere; color:#263e4e; font-size:15px; line-height:1.8; margin:20px 0; }
.board-detail-reactions { border-top:1px solid #e1ebf1; padding-top:13px; color:#51768c; font-size:12px; }
.board-comments-heading { display:flex; align-items:baseline; gap:12px; margin:28px 0 12px; color:#173b52; }
.board-comments-heading strong { font-size:17px; }
.board-comments-heading small { color:#68889a; font-size:11px; }
.board-comments { display:grid; gap:8px; }
.board-comment { background:#fff; border:1px solid #dae7ee; border-radius:12px; padding:13px 16px; }
.board-comment.is-reply { margin-left:30px; border-left:3px solid #8fcbe8; }
.board-comment-header { display:flex; align-items:center; gap:9px; }
.board-comment-header .board-avatar { width:34px; height:39px; }
.board-comment-header>span:nth-child(2) { display:grid; gap:2px; }
.board-comment-header strong { color:#1d3f52; font-size:12px; }
.board-comment-header small { color:#8ba0ae; font-size:10px; }
.board-comment-header em { margin-left:auto; border-radius:999px; padding:4px 8px; background:#e8f5fc; color:#0878b7; font-size:10px; font-style:normal; font-weight:800; }
.board-comment p { margin:7px 0 0 43px; color:#314b5d; font-size:13px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.board-comment-proof { width:fit-content; max-width:calc(100% - 43px); margin:8px 0 0 43px; background:#f4f8fb; border:1px solid #e2edf3; border-radius:7px; padding:7px 9px; color:#628093; font-size:11px; overflow-wrap:anywhere; }
.board-comment-proof a { color:#0871ae; font-weight:700; }
.board-comment-list-item { display:grid; gap:5px; width:100%; padding:17px; text-align:left; border:0; border-bottom:1px solid #d5e5ef; background:#fff; color:#17394f; font:inherit; cursor:pointer; }
.board-comment-list-item:hover { background:#eaf6fd; }
.board-comment-list-item strong { font-size:14px; }
.board-comment-list-item span { color:#456579; font-size:12px; }
.board-comment-list-item small { color:#7090a3; font-size:11px; }
.board-activity-item { display:grid; gap:5px; padding:17px; border-bottom:1px solid #d5e5ef; background:#fff; color:#17394f; font-size:13px; }
.board-activity-item span { color:#466a7d; }
.board-activity-item button { justify-self:start; border:0; background:transparent; color:#0871ae; padding:3px 0; cursor:pointer; font-weight:800; }
.board-activity-item small { color:#7893a3; }
.board-profile-card { position:relative; margin-top:15px; padding:19px; border:1px solid #9bcde7; border-radius:12px; background:#fff; display:grid; gap:8px; }
.board-profile-card>button:first-child { position:absolute; top:10px; right:13px; border:0; background:none; font-size:22px; cursor:pointer; }
.board-profile-card>strong { padding-right:32px; color:#15374c; }
.board-profile-card>button:not(:first-child) { border:0; border-top:1px solid #e2ebf1; background:none; padding:10px 0; text-align:left; cursor:pointer; color:#245b7c; font:inherit; font-size:12px; }
.board-profile-card small { color:#7895a5; }
@media(max-width:700px) {
  body[data-mode="consumer"] .board-community { padding:46px 16px 64px; }
  .board-community .community-tabs { gap:6px; margin-top:25px; }
  .board-community .community-tabs button { padding:8px 10px; font-size:11px; }
  .board-post-open { grid-template-columns:58px minmax(0,1fr) 16px; gap:10px; padding:10px 3px; }
  .board-post-open>img,.board-card-placeholder { width:58px; height:58px; }
  .board-post-copy>strong { font-size:13px; }
  .board-post-copy>small { font-size:10px; }
  .board-detail { padding:17px; }
  .board-product { grid-template-columns:65px minmax(0,1fr); gap:9px; }
  .board-product>img,.board-product-placeholder { width:65px; height:65px; }
  .board-product>b { grid-column:2; }
  .board-comment.is-reply { margin-left:14px; }
}

/* Compact social feed controls and shortcuts beside the hero avatar. */
.rank-identity-actions { display:inline-flex; align-items:center; gap:6px; margin-left:auto; }
.rank-identity-actions button { cursor:pointer; font:inherit; font-weight:800; }
.board-hero-heart { display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid #a9cfe4; border-radius:50%; background:#ffffff12; color:#fff; font-size:27px !important; line-height:1; }
.board-hero-heart:hover,.board-hero-heart:focus-visible { color:#ff7995; border-color:#ff7995; background:#ffffff1c; }
.board-hero-activity { border:1px solid #a9cfe4; border-radius:999px; background:#ffffff12; color:#fff; padding:8px 9px; font-size:10px !important; white-space:nowrap; }
.board-hero-activity:hover,.board-hero-activity:focus-visible { background:#e2f4ff; color:#0f3653; }
.rank-identity-actions button:focus-visible { outline:2px solid #ffdd74; outline-offset:2px; }
body[data-mode="consumer"] .board-community { padding-top:48px; }
.board-community .community-heading h2 { font-size:clamp(35px,3.7vw,50px); margin-top:10px; }
.board-community .community-tabs { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; gap:8px; margin-top:23px; padding-bottom:6px; scrollbar-width:thin; }
.board-community .community-tabs button { flex:1 1 0; min-width:0; text-align:center; border-color:#dce5ec; background:#fff; color:#3e5364; border-radius:999px; padding:8px 15px; font-size:12px; line-height:1.25; box-shadow:0 1px 3px #173f5b0b; white-space:nowrap; }
.board-community .community-tabs button.active,.board-community .community-tabs button[aria-selected="true"] { border-color:#1e303f; background:#1e303f; color:#fff; box-shadow:0 3px 9px #102f4828; }
.board-community .community-layout { margin-top:11px; }
.board-post-open { grid-template-columns:62px minmax(0,1fr) 20px; gap:13px; padding:9px 13px; }
.board-post-open>img,.board-card-placeholder { width:62px; height:62px; }
.board-list-caption { padding-bottom:10px; }
.board-more { margin:18px auto 0; border-radius:999px; background:#fff; box-shadow:0 5px 15px #0c45670f; }
.board-personal-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:8px 0 17px; }
.board-personal-heading button { border:0; background:none; padding:0; color:#0871ae; font-size:12px; font-weight:800; cursor:pointer; }
.board-personal-heading h3 { margin:8px 0 4px; font-size:28px; color:#12354f; }
.board-personal-heading p { margin:0; color:#678598; font-size:12px; }
.board-personal-switch { display:flex; gap:7px; margin:0 0 18px; }
.board-personal-switch button { border:1px solid #c9ddea; border-radius:999px; background:#fff; color:#3e637c; padding:8px 15px; font:inherit; font-size:12px; font-weight:800; cursor:pointer; }
.board-personal-switch button.active { background:#1e303f; border-color:#1e303f; color:#fff; }
.board-comment-proof small { display:block; margin:4px 0 0 19px; color:#628093; font-size:10px; }
/* Conversation cards follow real replyToCommentId links from the board API. */
.board-detail { border-radius:20px; padding:clamp(20px,3vw,34px); }
.board-detail h3 { font-size:clamp(25px,2.7vw,33px); }
.board-verdict-panel { border-radius:16px; padding:16px 20px; }
.board-product { border-radius:15px; background:#fff; }
.board-detail-body { font-size:15px; line-height:1.75; }
.board-comments-heading { margin-top:31px; }
.board-comments { gap:11px; }
.board-thread { min-width:0; }
.board-thread.is-thread-reply { margin:9px 0 0 26px; padding-left:16px; border-left:2px solid #c9e3f3; }
.board-comment { border-radius:16px; padding:16px 18px; box-shadow:0 2px 8px #1138510b; }
.board-comment.is-reply { margin-left:0; border-left:1px solid #dae7ee; }
.board-comment-header { gap:11px; }
.board-comment-header .board-avatar { width:43px; height:49px; border-radius:11px; }
.board-comment-header strong { font-size:13px; }
.board-comment-header small { font-size:11px; }
.board-comment-header em { font-size:10px; padding:5px 9px; }
.board-comment p { margin:8px 0 0 54px; font-size:13px; line-height:1.7; }
.board-reply-context { display:block; margin:4px 0 0 54px; color:#0871ae; font-size:11px; font-weight:750; }
.board-comment-proof { display:flex; align-items:center; gap:9px; width:fit-content; max-width:calc(100% - 54px); margin:10px 0 0 54px; padding:6px 10px 6px 6px; border-radius:10px; }
.board-comment-proof>img,.board-proof-placeholder { width:42px; height:42px; flex:none; object-fit:contain; border-radius:6px; background:#fff; }
.board-proof-placeholder { display:grid; place-items:center; font-size:18px; }
.board-proof-copy { display:grid; gap:2px; min-width:0; }
.board-proof-copy>a,.board-proof-copy>strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.board-comment-proof .board-proof-copy small { margin:0; font-size:10px; }
@media(max-width:700px) {
  .board-community .community-tabs { gap:4px; margin-top:19px; padding-right:0; }
  .board-community .community-tabs button { font-size:10px; padding:8px 4px; }
  .board-post-open { grid-template-columns:54px minmax(0,1fr) 14px; gap:9px; padding:9px 3px; }
  .board-post-open>img,.board-card-placeholder { width:54px; height:54px; }
  .rank-identity-actions { gap:4px; }
  .board-hero-heart { width:31px; height:31px; font-size:24px !important; }
  .board-hero-activity { padding:7px; font-size:9px !important; }
  .board-thread.is-thread-reply { margin-left:12px; padding-left:9px; }
  .board-comment { padding:12px; }
  .board-comment p,.board-reply-context { margin-left:0; }
  .board-comment-proof { max-width:100%; margin-left:0; }
}

/* Social feed: small left-aligned filters, distinct cards, and compact notifications. */
.board-hero-heart { position:relative; width:34px; height:34px; border:0; border-radius:0; background:transparent; font-size:31px !important; line-height:1; transition:transform .18s ease,color .18s ease; }
.board-hero-heart svg { position:absolute; top:-2px; left:1px; width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.board-hero-heart:hover,.board-hero-heart:focus-visible { border:0; background:transparent; color:#ff7995; transform:scale(1.13); }
.board-hero-heart.has-unread::after { content:''; position:absolute; top:1px; right:0; width:9px; height:9px; border:2px solid #0e293d; border-radius:50%; background:#fa3f51; box-shadow:0 0 0 1px #fa3f5166; }
.board-hero-activity { min-height:34px; display:inline-flex; align-items:center; }
.rank-identity-actions { align-self:center; align-items:center; }
.board-notice-preview { position:fixed; z-index:9999; box-sizing:border-box; max-height:min(330px,calc(100vh - 24px)); overflow:auto; padding:14px; border:1px solid #d9e8f1; border-radius:15px; background:#fff; box-shadow:0 15px 40px #041a2d45; color:#14344b; font-size:11px; line-height:1.35; }
.board-notice-preview[hidden] { display:none; }
.board-notice-preview>strong { display:flex; justify-content:space-between; gap:8px; margin-bottom:8px; font-size:13px; }
.board-notice-preview>strong span { display:grid; place-items:center; min-width:20px; height:20px; padding:0 4px; border-radius:99px; background:#fce9ec; color:#df3750; font-size:11px; }
.board-notice-preview>p { margin:13px 0; color:#657f90; }
.board-notice-preview-item { display:grid; grid-template-columns:31px minmax(0,1fr); gap:8px; align-items:center; padding:8px 0; border-top:1px solid #edf2f6; }
.board-notice-preview-item b { color:#0b344f; }
.board-notice-preview-item small { display:block; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#738b9b; font-size:10px; }
.board-notice-avatar,.board-notice-avatar .board-avatar { display:block; width:31px; height:36px; overflow:hidden; }
.board-notice-avatar svg { width:31px; height:36px; }
.board-notice-preview>button { width:100%; margin-top:7px; padding:8px; border:0; border-radius:9px; background:#eaf6fd; color:#0871ae; font:inherit; font-weight:800; cursor:pointer; }
.board-notice-preview>button:hover { background:#d8effd; }
/* Five-stop consumer journey, with a full-body parcel mascot above the progress line. */
.consumer-section-nav { height:56px; align-items:flex-start; }
.consumer-section-nav>button[data-section-target] { position:relative; z-index:2; flex:1 1 0; min-width:0; text-align:center; padding:11px 8px 0; min-height:33px; margin-top:11px; }
.consumer-section-nav .parcel-rabbit { position:absolute; z-index:2; left:clamp(0px,calc(var(--rabbit-position,20%) - 40px),calc(100% - 80px)); bottom:1px; width:80px; height:48px; pointer-events:none; transition:left .8s cubic-bezier(.2,.7,.2,1); }
.consumer-section-nav .parcel-rabbit-art { display:block; width:100%; height:100%; transform:scaleX(1); transition:transform .18s ease; transform-origin:center; }
.consumer-section-nav .parcel-rabbit[data-direction="left"] .parcel-rabbit-art { transform:scaleX(-1); }
.consumer-section-nav .parcel-rabbit img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 2px #1460923d); }
.consumer-section-nav .parcel-rabbit.is-hopping img { animation:parcel-rabbit-hop .27s ease-in-out 3; }
@keyframes parcel-rabbit-hop { 0%,100%{transform:translateY(0) rotate(0)} 45%{transform:translateY(-8px) rotate(-5deg)} }
#consumerView .redesign-section,#consumer-ranking,#interest-space { scroll-margin-top:152px; }
#consumer-ranking { padding-top:18px; scroll-margin-top:138px; }
@media(min-width:951px) {
  #consumer-ranking { min-height:calc(100svh - 138px); box-sizing:border-box; padding-bottom:12px; }
  #consumerView #interest-space { min-height:calc(100svh - 152px); box-sizing:border-box; }
  #consumer-ranking .leaderboard-layout { margin-top:18px; }
  #consumer-ranking .podium-card { padding:10px 12px; gap:3px; min-height:0; }
  #consumer-ranking .podium-card>.league-avatar { width:45px; height:58px; margin-top:4px; }
  #consumer-ranking .leaderboard-near { margin-top:14px; }
  #consumer-ranking .leaderboard-near-grid { max-height:265px; }
  #consumer-ranking .leaderboard-row { padding:3px 8px; }
  #consumer-ranking .leaderboard-row .league-avatar { height:46px; }
}
#consumerView #interest-space { padding-top:14px; padding-bottom:18px; scroll-margin-top:152px; }
#consumerView #interest-space .movement-story-intro { margin-bottom:12px; }
#consumerView #interest-space .movement-story-label { margin-bottom:12px; }
#consumerView #interest-space .real-journey-layout .real-peer-pane { height:555px; overflow-y:auto; justify-content:flex-start; overscroll-behavior:contain; scrollbar-width:thin; }
#consumerView .real-purchase-insight { position:fixed; z-index:80; width:min(450px,calc(100vw - 24px)); max-width:none; grid-template-columns:76px minmax(0,1fr); gap:13px; padding:12px 14px; margin:0; border:1px solid #9ed3ef; border-left:4px solid #008bfe; border-radius:12px; box-shadow:0 16px 42px #153d5860; pointer-events:auto; }
#consumerView .real-purchase-insight[hidden] { display:none; }
#consumerView .real-purchase-insight img { width:76px; height:76px; }
#consumerView .real-purchase-insight strong { font-size:16px; margin:3px 0; }
#consumerView .real-purchase-insight p { font-size:11px; }
#consumerView .real-purchase-insight small { font-size:10px; }
#consumerView .real-purchase-source { display:inline-block; margin-top:7px; color:#075e97; font-size:11px; font-weight:800; text-decoration:underline; text-underline-offset:2px; }
.hero-hotspot-product { color:inherit; text-decoration:none; }
.hero-hotspot-product:hover strong,.hero-hotspot-product:focus-visible strong { color:#008bfe; text-decoration:underline; }
body[data-mode="consumer"] .board-community { padding-top:14px; }
.board-community .community-heading h2 { margin:5px 0 0; }
body[data-mode="consumer"] .board-community .community-tabs { margin-top:12px; }
body[data-mode="consumer"] #consumer-ai { padding-top:14px; }
body[data-mode="consumer"] #consumerAgentSlot .ask-section { margin-top:0; }
.board-community .board-feed-scroll { overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#a7cfe4 #eef6fa; padding-right:5px; }
.board-community .board-feed-scroll { height:clamp(500px,68dvh,760px); max-height:none; }
.board-community .board-feed-scroll:focus-visible { outline:2px solid #0b8dd5; outline-offset:3px; }
@media(prefers-reduced-motion:reduce) {
  .consumer-section-nav .parcel-rabbit,.consumer-section-nav .parcel-rabbit-art { transition:none; }
  .consumer-section-nav .parcel-rabbit.is-hopping img { animation:none; }
}
@media(max-width:800px) {
  .consumer-section-nav { height:58px; }
  .consumer-section-nav>button[data-section-target] { flex:0 0 auto; padding:10px 11px 0; margin-top:12px; }
  .consumer-section-nav .parcel-rabbit { width:68px; height:40px; left:clamp(0px,calc(var(--rabbit-position,20%) - 34px),calc(100% - 68px)); }
  #consumerView .redesign-section,#consumer-ranking,#interest-space { scroll-margin-top:180px; }
  #consumer-ranking { scroll-margin-top:168px; }
  #consumerView #interest-space { scroll-margin-top:180px; }
}
@media(max-width:950px) {
  #consumerView #interest-space .real-journey-layout .real-peer-pane { height:auto; max-height:510px; }
}
.board-community .community-tabs { justify-content:flex-start; gap:7px; }
.board-community .community-tabs button { flex:0 0 auto; min-width:0; width:auto; padding:8px 13px; font-size:11px; }
.board-community .community-layout { margin-top:10px; }
.board-list-caption { margin:0 0 11px; }
.board-post-card,.board-post-card:first-of-type { margin:0 0 9px; border:1px solid #dce7ee; border-radius:15px; overflow:hidden; box-shadow:0 2px 9px #123f5810; }
.board-post-open { grid-template-columns:70px minmax(0,1fr); gap:12px; min-height:92px; padding:10px 14px; }
.board-post-open>img,.board-card-placeholder { width:70px; height:70px; border-radius:10px; }
.board-card-placeholder { background:#f1f5f7; color:#8daab8; }
.board-post-kicker { width:fit-content; border-radius:999px; padding:3px 8px; background:#eef7fc; font-size:10px; }
.board-post-copy { gap:4px; }
.board-post-copy>strong { font-size:14px; }
.board-post-copy>small { font-size:10px; }
.board-card-arrow { display:none; }
.board-personal-heading.is-news { margin:4px 0 18px; padding:20px 23px; border-radius:16px; background:#1e303f; }
.board-personal-heading.is-news h3 { color:#fff; font-size:27px; }
.board-personal-heading.is-news p { color:#bbccd8; }
.board-personal-heading.is-news button { color:#8fd2ff; }
.board-activity-list { display:grid; gap:9px; }
.board-activity-item { display:grid; grid-template-columns:34px minmax(0,1fr) 14px; align-items:start; gap:11px; width:100%; margin:0; padding:13px 15px; border:1px solid #dce7ee; border-radius:14px; background:#fff; text-align:left; box-shadow:0 2px 9px #123f580c; font:inherit; cursor:default; }
button.board-activity-item { cursor:pointer; }
button.board-activity-item:hover { border-color:#a8d4ed; background:#f7fbff; }
.board-activity-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#edf6fd; font-size:17px; }
.board-activity-copy { display:grid; gap:4px; min-width:0; color:#223f50; font-size:12px; line-height:1.5; }
.board-activity-copy strong { color:#102f48; font-size:12px; }
.board-activity-copy em { color:#0871ae; font-size:11px; font-style:normal; font-weight:800; }
.board-activity-copy small { color:#8297a5; font-size:10px; }
.board-activity-copy .board-activity-source { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#69879a; }
.board-activity-arrow { color:#0871ae; font-size:17px; }
.league-name-line { display:flex; align-items:center; gap:7px; min-width:0; }
.league-name-line strong { min-width:0; }
.league-follow-button { flex:none; border:1px solid #b8d8eb; border-radius:999px; background:#fff; color:#0871ae; padding:4px 8px; font:inherit; font-size:10px; font-weight:800; white-space:nowrap; cursor:pointer; }
.league-follow-button:hover,.league-follow-button:focus-visible { background:#e9f6ff; border-color:#69afe0; }
.league-follow-button[aria-pressed="true"] { color:#375368; background:#eaf0f4; border-color:#d8e3e9; }
.league-follow-button:disabled { opacity:.65; cursor:wait; }
.podium-card>.league-follow-button { margin:4px auto 0; }
.board-news-tabs { display:flex; flex-wrap:wrap; gap:7px; margin:-4px 0 16px; }
.board-news-tabs button { border:1px solid #cbdfea; border-radius:999px; background:#fff; color:#34566d; padding:8px 13px; font:inherit; font-size:11px; font-weight:800; cursor:pointer; }
.board-news-tabs button.active,.board-news-tabs button[aria-selected="true"] { border-color:#1e303f; background:#1e303f; color:#fff; }
.board-activity-item { grid-template-columns:46px minmax(0,1fr) 14px; }
.board-activity-avatar { position:relative; width:42px; height:48px; }
.board-activity-avatar>.board-avatar { width:42px; height:48px; }
.board-activity-avatar>small { position:absolute; right:-4px; bottom:-4px; display:grid; place-items:center; width:18px; height:18px; border:1px solid #fff; border-radius:50%; background:#edf6fd; font-size:10px; }
@media(max-width:700px) {
  .board-hero-heart { width:30px; height:31px; font-size:28px !important; }
  .board-hero-activity { min-height:31px; }
  .board-community .community-tabs { gap:5px; }
  .board-community .community-tabs button { padding:7px 10px; font-size:10px; }
  .board-post-open { grid-template-columns:59px minmax(0,1fr); gap:10px; padding:9px; min-height:78px; }
  .board-post-open>img,.board-card-placeholder { width:59px; height:59px; }
  .board-personal-heading.is-news { padding:16px; }
  .board-activity-item { padding:11px; gap:8px; }
  .board-news-tabs { flex-wrap:nowrap; overflow-x:auto; padding-bottom:3px; }
  .board-news-tabs button { flex:none; padding:7px 10px; font-size:10px; white-space:nowrap; }
  .league-follow-button { padding:4px 6px; font-size:9px; }
}

/* Community title and shortcuts share a compact, readable header. */
body[data-mode="consumer"] .board-community { padding-top:8px; }
.board-community .community-heading { align-items:baseline; gap:18px; }
.board-community .community-heading .overline[hidden] { display:none; }
.board-community .community-heading h2 { margin:0; line-height:1.08; }
.board-community .community-heading>.demo-caption { align-self:baseline; margin:0 0 5px; }
.community-toolbar { display:flex; align-items:center; gap:12px; max-width:1040px; margin:12px auto 0; }
body[data-mode="consumer"] .board-community .community-toolbar .community-tabs { flex:1 1 auto; min-width:0; max-width:none; margin:0; padding:0; }
.community-toolbar-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex:none; margin-left:auto; }
.community-toolbar-actions .board-hero-heart { color:#15384f; cursor:pointer; }
.community-toolbar-actions .board-hero-heart:hover,.community-toolbar-actions .board-hero-heart:focus-visible { color:#e84e6a; }
.community-toolbar-actions .board-hero-heart.has-unread::after { border-color:#f4f8fb; }
.community-toolbar-actions .board-hero-activity { min-height:34px; border-color:#b9d5e6; background:#fff; color:#164968; padding:7px 11px; font-size:11px !important; cursor:pointer; }
.community-toolbar-actions .board-hero-activity:hover,.community-toolbar-actions .board-hero-activity:focus-visible { background:#e2f4ff; }
.board-community.is-detail .community-toolbar { display:none; }
@media(max-width:700px) {
  .board-community .community-heading { display:flex; flex-wrap:wrap; align-items:baseline; row-gap:2px; }
  .board-community .community-heading>.demo-caption { margin:0; }
  .community-toolbar { gap:6px; }
  .community-toolbar-actions { gap:3px; }
  .community-toolbar-actions .board-hero-activity { padding:6px 8px; font-size:9px !important; }
}

/* Give the peer category products the same visual weight as the purchase journey. */
@media(min-width:951px) {
  #consumerView #interest-space .real-journey-layout { grid-template-columns:minmax(0,1fr) minmax(420px,440px); gap:18px; }
  #consumerView #interest-space .real-peer-pane { padding:14px 16px; }
  #consumerView #interest-space .real-next-heading b { font-size:23px !important; }
  #consumerView #interest-space .real-next-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:8px; }
  #consumerView #interest-space .real-next-controls { margin:0 0 2px; gap:4px; }
  #consumerView #interest-space .real-next-controls button { width:34px; height:34px; }
  #consumerView #interest-space .cross-category-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:13px; }
  #consumerView #interest-space .cross-category-option { display:flex; flex-direction:column; align-items:stretch; gap:5px; min-width:0; padding:7px; }
  #consumerView #interest-space .cross-category-option img { width:100%; height:62px; }
  #consumerView #interest-space .cross-category-option span:nth-child(2) { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:5px; align-items:baseline; }
  #consumerView #interest-space .cross-category-option small { font-size:12px; color:#075e97; }
  #consumerView #interest-space .cross-category-option strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; overflow:hidden; font-size:13px; }
  #consumerView #interest-space .cross-category-option em { grid-column:1/-1; font-size:10px; }
  #consumerView #interest-space .cross-category-option>span:last-child { display:none; }
  #consumerView #interest-space .cross-category-detail { margin-top:9px; padding-top:8px; }
  #consumerView #interest-space .cross-category-products { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; max-height:260px; padding-right:5px; }
  #consumerView #interest-space .cross-category-products a { display:flex; flex-direction:column; align-items:stretch; gap:5px; padding:8px; min-height:0; }
  #consumerView #interest-space .cross-category-products img { width:100%; height:88px; object-fit:contain; }
  #consumerView #interest-space .cross-category-products a span { display:grid; gap:5px; }
  #consumerView #interest-space .cross-category-products a strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; overflow:hidden; font-size:12px; line-height:1.3; }
  #consumerView #interest-space .cross-category-products a small { font-size:10px; }
}
@media(max-width:950px) {
  #consumerView #interest-space .cross-category-products { max-height:255px; gap:7px; }
  #consumerView #interest-space .cross-category-products a { grid-template-columns:72px minmax(0,1fr); gap:10px; padding:7px; }
  #consumerView #interest-space .cross-category-products img { width:72px; height:72px; }
  #consumerView #interest-space .cross-category-products a strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; overflow:hidden; font-size:12px; }
}
.floating-demo-controls { position:fixed; right:24px; bottom:24px; z-index:90; display:flex; align-items:center; gap:10px; max-width:calc(100vw - 28px); }
.floating-profile-switch { display:flex; align-items:center; gap:3px; padding:4px; border:1px solid #7eb7d3; border-radius:999px; background:#0c3148; box-shadow:0 8px 24px #0d345044; }
body:not([data-mode="consumer"]) .floating-profile-switch { display:none; }
.floating-profile-switch button { min-height:38px; padding:0 13px; border:0; border-radius:999px; background:transparent; color:#e9f5fa; font:inherit; font-size:13px; font-weight:800; white-space:nowrap; cursor:pointer; transition:background .18s,color .18s; }
.floating-profile-switch button:hover { background:#225a78; }
.floating-profile-switch button.active { background:#ffdc57; color:#102d40; }
.floating-profile-switch button:focus-visible { outline:3px solid #ffdc69; outline-offset:2px; }
.back-to-top { display:flex; align-items:center; gap:7px; padding:11px 15px; border:1px solid #90c9e6; border-radius:999px; background:#0b668f; color:#fff; box-shadow:0 8px 24px #0d345044; font-family:inherit; font-size:13px; font-weight:700; line-height:1.2; white-space:nowrap; cursor:pointer; transition:transform .18s,background .18s,box-shadow .18s; }
.back-to-top[hidden] { display:none !important; }
.back-to-top span { font-size:19px; line-height:1; }
.back-to-top:hover { transform:translateY(-3px); background:#084e72; box-shadow:0 11px 28px #0d345055; }
.back-to-top:focus-visible { outline:3px solid #ffdc69; outline-offset:3px; }
@media(max-width:700px) { .floating-demo-controls { right:14px; bottom:14px; gap:6px; } .floating-profile-switch button { min-height:35px; padding:0 9px; font-size:11px; } .back-to-top { padding:9px 10px; font-size:11px; } }
@media(max-width:360px) { .floating-profile-switch button { padding:0 7px; } .back-to-top { gap:4px; } }
@media(prefers-reduced-motion:reduce) { .back-to-top,.floating-profile-switch button { transition:none; } }

/* Personalized board discovery, kept within the existing 04 layout. */
.board-personal-legend { display:inline-flex; align-items:center; gap:7px; margin-right:7px; color:#34617b; font-size:11px; font-weight:800; white-space:nowrap; }
.board-personal-legend i { display:block; width:25px; height:17px; border:2px dotted #0788d0; border-radius:5px; background:#f4fbff; box-shadow:0 0 0 2px #ffe88a,0 0 10px #ffd94c; }
.board-category-bar { position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; max-width:1040px; margin:11px auto 0; padding:11px 13px; border:1px solid #d5e8f2; border-radius:14px; background:#f4f9fc; }
.board-category-bar[hidden],.board-community.is-detail .board-category-bar { display:none; }
.board-category-intro { flex:none; margin-right:4px; color:#315b73; font-size:11px; font-weight:800; white-space:nowrap; }
.board-category-main { display:flex; flex:1 1 auto; align-items:center; flex-wrap:wrap; gap:6px; min-width:0; }
.board-category-button,.board-category-all-button,.board-category-menu-toggle { min-height:32px; border:1px solid #c6dce9; background:#fff; color:#31546b; font:inherit; font-size:11px; font-weight:800; cursor:pointer; transition:background .16s,border-color .16s,transform .16s; }
.board-category-button:hover,.board-category-all-button:hover,.board-category-menu-toggle:hover { transform:translateY(-1px); border-color:#3a9bd1; background:#edf8ff; }
.board-category-button:focus-visible,.board-category-all-button:focus-visible,.board-category-menu-toggle:focus-visible,.board-category-menu button:focus-visible { outline:2px solid #f1bf21; outline-offset:2px; }
.board-category-button { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; white-space:nowrap; }
.board-category-button small { color:#7a9cad; font-size:10px; font-weight:800; }
.board-category-button.is-active,.board-category-all-button.is-active { border-color:#097cbd; background:#0a80c2; color:#fff; box-shadow:0 2px 8px #0a80c230; }
.board-category-button.is-active small { color:#dff4ff; }
.board-category-all { position:relative; display:flex; align-items:center; flex:none; }
.board-category-all-button { padding:5px 11px 5px 13px; border-radius:999px 0 0 999px; }
.board-category-menu-toggle { min-width:29px; padding:5px 7px; border-left:0; border-radius:0 999px 999px 0; }
.board-category-menu-toggle.is-active { border-color:#f2c341; background:#fff4c9; color:#755500; }
.board-category-menu { position:absolute; z-index:25; top:calc(100% + 8px); right:0; display:grid; gap:3px; width:214px; max-height:305px; overflow:auto; padding:7px; border:1px solid #bdd8e8; border-radius:11px; background:#fff; box-shadow:0 14px 34px #14394c2b; }
.board-category-menu[hidden] { display:none; }
.board-category-menu button { border:0; border-radius:7px; background:transparent; color:#264b63; padding:8px 10px; text-align:left; font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.board-category-menu button:hover,.board-category-menu button.is-active { background:#e7f5fe; color:#006fae; }
.board-post-card.is-personal,.board-post-card.is-personal:first-of-type { position:relative; border:2px dotted #0a86cc; background:#f8fcff; box-shadow:0 0 0 2px #ffe987,0 0 16px #53b9ec75,0 3px 14px #123f5816; }
.board-post-card.is-personal .board-post-open:hover { background:#eaf7ff; }
.board-post-card.is-personal::before { content:""; position:absolute; inset:5px auto 5px 5px; width:3px; border-radius:9px; background:#ffd64e; pointer-events:none; }
@media(max-width:900px) { .board-personal-legend { font-size:10px; margin-right:0; } .board-category-intro { flex-basis:100%; } }
@media(max-width:700px) { .board-personal-legend { max-width:25px; overflow:hidden; font-size:0; } .board-personal-legend i { flex:none; } .board-category-bar { padding:9px; } .board-category-main { flex-basis:100%; order:2; overflow-x:auto; flex-wrap:nowrap; padding:2px 0 4px; } .board-category-all { margin-left:auto; } .board-category-button { flex:none; } }
.board-comment-proof { font:inherit; text-align:left; cursor:pointer; transition:border-color .18s,background .18s,transform .18s; }
.board-comment-proof:hover { border-color:#6ab6de; background:#eaf7ff; transform:translateY(-1px); }
.board-comment-proof:focus-visible { outline:3px solid #ffdb59; outline-offset:3px; }
.board-proof-copy>strong { color:#0871ae; }
.board-product-drawer { position:fixed; inset:auto 24px auto auto; top:50%; transform:translateY(-50%); width:min(380px,calc(100vw - 48px)); max-width:none; max-height:min(75dvh,640px); height:auto; margin:0; padding:0; border:1px solid #cfe3ed; border-radius:18px; background:#f7fafc; color:#14354b; box-shadow:0 22px 65px #071e3947; overflow:auto; z-index:1000; }
.board-product-drawer[data-hover-preview="true"] { pointer-events:none; }
.board-product-drawer::backdrop { background:transparent; backdrop-filter:none; }
.board-detail-body + .board-product { margin:0 0 22px; }
.board-product-drawer-inner { box-sizing:border-box; }
.board-product-drawer-head { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:12px 18px; border-bottom:1px solid #dce9f0; background:#f7fafcef; backdrop-filter:blur(10px); color:#0878b7; font-size:11px; font-weight:900; letter-spacing:.04em; }
.board-product-drawer-head button { width:38px; height:38px; border:1px solid #cde0ea; border-radius:50%; background:#fff; color:#17394f; font:inherit; font-size:26px; line-height:1; cursor:pointer; }
.board-product-drawer-head button:hover { background:#e7f5fd; }
.board-product-drawer-image { display:grid; place-items:center; min-height:168px; margin:16px 18px 0; border:1px solid #dce9f0; border-radius:12px; background:#fff; }
.board-product-drawer-image img { display:block; width:100%; height:168px; object-fit:contain; padding:10px; box-sizing:border-box; }
.board-product-drawer-image>span { font-size:55px; }
.board-product-drawer-content { padding:17px 20px 22px; }
.board-product-drawer-kicker { display:inline-block; padding:7px 11px; border-radius:999px; background:#e8f5fc; color:#0878b7; font-size:12px; font-weight:900; }
.board-product-drawer-content h2 { margin:11px 0 15px; font-size:20px; line-height:1.35; letter-spacing:-.04em; overflow-wrap:anywhere; }
.board-product-drawer-price { display:flex; align-items:baseline; justify-content:space-between; gap:15px; padding:17px 0; border-top:1px solid #dce9f0; border-bottom:1px solid #dce9f0; }
.board-product-drawer-price small { color:#58798b; font-size:13px; font-weight:700; }
.board-product-drawer-price strong { color:#0a658f; font-size:21px; font-weight:900; white-space:nowrap; }
.board-product-drawer-content dl { display:grid; gap:8px; margin:14px 0; }
.board-product-drawer-content dl div { display:flex; justify-content:space-between; gap:14px; font-size:13px; }
.board-product-drawer-content dt { color:#668599; }
.board-product-drawer-content dd { margin:0; font-weight:800; text-align:right; overflow-wrap:anywhere; }
.board-product-drawer-content p { color:#718b9a; font-size:12px; line-height:1.6; }
.board-product-drawer-link { display:block; margin-top:16px; padding:12px 16px; border-radius:11px; background:#0a79b6; color:#fff; text-align:center; text-decoration:none; font-size:14px; font-weight:900; }
.board-product-drawer-link:hover { background:#09618f; }
@media(max-width:700px) { .board-product-drawer { inset:auto 12px 12px; top:auto; transform:none; width:auto; max-height:65dvh; } .board-product-drawer-image { min-height:140px; } .board-product-drawer-image img { height:140px; } }
.board-post-meta { display:flex; align-items:center; gap:8px; min-width:0; color:#6c8494; }
.board-post-meta .board-avatar { width:29px; height:34px; border-radius:7px; }
.board-post-meta small { min-width:0; font-size:11px; line-height:1.35; }
.board-post-meta b { color:#24485c; font-weight:700; }
@media(max-width:700px) { .board-post-meta { gap:6px; } .board-post-meta .board-avatar { width:25px; height:29px; } .board-post-meta small { font-size:10px; } }