/* Loaded after the canonical BHP token/component styles. Position rules are managed by mountain.js. */
.bhp-mountain { inline-size: 100%; min-inline-size: 0; color: var(--bhp-text); font-family: var(--bhp-font-rtl); }
.bhp-mountain[lang='en'] { font-family: Inter, var(--bhp-font-body); }
.mountain-stage { position: relative; inline-size: 100%; block-size: 700px; overflow: hidden; border-radius: 0; background: transparent; isolation: isolate; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.mountain-stage.is-dragging { cursor: grabbing; }
.mountain-canvas { display: block; inline-size: 100%; block-size: 100%; pointer-events: none; }
.mountain-gpu-canvas { position: absolute; inset: 0; z-index: 1; }
.mountain-sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mountain-fallback { max-inline-size: 420px; margin: 70px auto; padding: 24px; color: var(--bhp-text); font-size: 15px; line-height: var(--mineral-copy-leading); }
.mountain-fallback-link { display: block; inline-size: fit-content; margin-block-start: 16px; padding-block: 9px; color: var(--bhp-text-brand); font-weight: var(--bhp-font-semibold); text-underline-offset: 5px; }
.mountain-icon { inline-size: 19px; block-size: 19px; display: block; flex-shrink: 0; }
.mountain-pins { position: absolute; inset: 0; pointer-events: none; z-index: 2; direction: ltr; }
/* Projection returns physical pixels in both languages; only the label text changes direction. */
.mountain-pin { position: absolute; left: 0; top: 0; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 0; border-radius: var(--bhp-radius-full); background: transparent; color: var(--bhp-text); padding: 0; pointer-events: auto; cursor: pointer; font: inherit; }
.mountain-pin-dot { position: relative; inline-size: 21px; block-size: 21px; border: 3px solid var(--bhp-surface); border-radius: var(--bhp-radius-full); background: var(--bhp-color-primary-active); box-shadow: 0 0 0 1px var(--bhp-text), var(--bhp-shadow-md); transition: transform var(--bhp-duration-fast) ease, box-shadow var(--bhp-duration-fast) ease; }
.mountain-pin-dot::after { content: ''; position: absolute; inset: 5px; background: var(--bhp-text-inverse); border-radius: var(--bhp-radius-full); }
.mountain-pin--processed .mountain-pin-dot { border-radius: var(--bhp-radius-sm); background: var(--bhp-table-head-ink); }
.mountain-pin:hover .mountain-pin-dot, .mountain-pin:focus-visible .mountain-pin-dot, .mountain-pin.is-active .mountain-pin-dot { transform: scale(1.14); box-shadow: 0 0 0 2px var(--bhp-focus), var(--bhp-shadow-lg); }
.mountain-pin-leader { position: absolute; left: 22px; top: 22px; inline-size: var(--mountain-leader-length, 30px); block-size: 2px; transform-origin: left center; transform: rotate(var(--mountain-leader-angle, -1.5708rad)); background: var(--bhp-text); box-shadow: 0 0 0 1px var(--bhp-surface); pointer-events: none; }
.mountain-pin-label { position: absolute; left: 22px; top: 22px; transform: translate(var(--mountain-label-x, -50%), var(--mountain-label-y, -70px)); inline-size: max-content; max-inline-size: min(220px, calc(100vw - 72px)); min-block-size: 40px; display: grid; align-items: center; padding: 8px 13px; border-radius: var(--bhp-radius-sm); background: var(--bhp-bg-inverse); color: var(--bhp-text-inverse); box-shadow: var(--bhp-shadow-md); border: 2px solid var(--bhp-surface); font-size: 14px; font-weight: var(--bhp-font-semibold); line-height: 1.5; text-align: start; pointer-events: auto; }
.bhp-mountain[lang='fa'] .mountain-pin-label { direction: rtl; }
.bhp-mountain[lang='en'] .mountain-pin-label { direction: ltr; }
.mountain-pin:hover .mountain-pin-label, .mountain-pin:focus-visible .mountain-pin-label, .mountain-pin.is-active .mountain-pin-label { background: var(--bhp-color-primary-active); color: var(--bhp-text-inverse); box-shadow: 0 0 0 2px var(--bhp-focus), var(--bhp-shadow-lg); }
.mountain-pin:focus-visible .mountain-pin-label { outline: 3px solid var(--bhp-focus); outline-offset: 3px; }
.mountain-stage.is-dragging .mountain-pins { pointer-events: none; }
.mountain-stage.is-dragging .mountain-pin { pointer-events: none; }
.mountain-popup { position: relative; inline-size: 100%; max-inline-size: 100%; margin-block-start: 18px; background: var(--bhp-surface); color: var(--bhp-text); border: 1px solid var(--bhp-border-strong); border-radius: var(--bhp-radius); box-shadow: var(--bhp-shadow-lg); overflow: hidden; cursor: auto; text-align: start; font-family: var(--bhp-font-rtl); user-select: text; -webkit-user-select: text; }
.mountain-popup[lang='en'] { font-family: Inter, var(--bhp-font-body); }
.mountain-popup-media { position: relative; }
.mountain-image-label { position: absolute; inset-inline-start: 8px; inset-block-end: 8px; max-inline-size: calc(100% - 16px); padding: 4px 8px; border-radius: var(--bhp-radius-sm); background: var(--bhp-surface); color: var(--bhp-text); font-size: 10px; line-height: 1.6; pointer-events: none; }
.mountain-image-label[hidden] { display: none; }
.mountain-popup-image { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1.9; max-block-size: 208px; object-fit: cover; }
.mountain-popup-image--sheet { object-fit: contain; background: var(--bhp-bg-subtle); }
.mountain-popup-body { padding: 17px 20px 12px; }
.mountain-popup-type { color: var(--bhp-text-brand); font-size: 12px; line-height: var(--mineral-compact-leading); margin: 0 0 var(--bhp-space-1); }
.mountain-popup-title { color: var(--bhp-text); font-size: 20px; line-height: var(--mineral-heading-leading); margin: 0; font-weight: var(--bhp-font-semibold); }
.mountain-popup-summary { color: var(--bhp-text-muted); font-size: 14px; line-height: var(--mineral-copy-leading); margin: var(--bhp-space-2) 0 var(--bhp-space-3); }
.mountain-icon-button { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; border: 1px solid var(--bhp-border); border-radius: var(--bhp-radius-full); padding: 0; color: var(--bhp-text); background: var(--bhp-surface); cursor: pointer; flex-shrink: 0; }
.mountain-icon-button:hover { background: var(--bhp-bg-brand-subtle); border-color: var(--bhp-border-brand); color: var(--bhp-text-brand); }
.mountain-icon-button:disabled { opacity: .55; cursor: default; }
.mountain-popup-close { position: absolute; inset-inline-end: 7px; inset-block-start: 7px; box-shadow: var(--bhp-shadow-sm); }
.mountain-open { display: flex; justify-content: space-between; align-items: center; gap: 12px; inline-size: 100%; min-block-size: 46px; font: inherit; font-size: 14px; font-weight: var(--bhp-font-semibold); border: 0; border-block-start: 1px solid var(--bhp-border); padding: 9px 0 0; color: var(--bhp-text-brand); background: transparent; cursor: pointer; }
[dir='rtl'] .mountain-open .mountain-icon { transform: scaleX(-1); }
.mountain-controls { position: absolute; inset-inline: 20px; inset-block-end: 17px; display: flex; align-items: center; justify-content: end; gap: 7px; z-index: 3; }
.mountain-drag-hint { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--bhp-text-muted); margin-inline-end: auto; }
.mountain-drag-hint .mountain-icon { inline-size: 20px; block-size: 20px; }
.mountain-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 3px 13px; }
.mountain-caption p { margin: 0; }
.mountain-caption p:first-child { font-size: 12px; color: var(--bhp-text-brand); font-weight: var(--bhp-font-medium); }
.mountain-caption p:last-child { font-size: 12px; color: var(--bhp-text-muted); margin-block-start: var(--bhp-space-1); line-height: var(--mineral-compact-leading); }
.mountain-product-nav { display: flex; align-items: center; gap: 8px; direction: ltr; }
.mountain-nav-title { font-size: 11px; color: var(--bhp-text-muted); max-inline-size: 140px; text-align: center; line-height: 1.5; }
.bhp-mountain button:focus-visible, .mountain-popup button:focus-visible, .mountain-fallback-link:focus-visible, .mountain-stage:focus-visible { outline: 3px solid var(--bhp-focus); outline-offset: 3px; }
.bhp-mountain [hidden], .mountain-popup[hidden] { display: none !important; }
@media (max-width: 1100px) { .mountain-stage { block-size: 650px; } .mountain-footer { align-items: start; } .mountain-nav-title { max-inline-size: 90px; } .mountain-product-nav { gap: 5px; } }
@media (max-width: 680px) { .mountain-stage { block-size: 520px; } .mountain-popup-body { padding: 16px 17px 11px; } .mountain-controls { inset-inline: 12px; inset-block-end: 12px; } .mountain-drag-hint { font-size: 12px; } .mountain-footer { flex-direction: column; align-items: stretch; gap: 13px; padding-block: 16px 12px; } .mountain-caption p:first-child, .mountain-caption p:last-child { font-size: 12px; } .mountain-product-nav { justify-content: space-between; } .mountain-nav-title { max-inline-size: 65%; font-size: 13px; } .mountain-pin-label { font-size: 13px; max-inline-size: min(190px, calc(100vw - 72px)); padding: 8px 11px; } }
@media (max-width: 380px) { .mountain-stage { block-size: 490px; } }
@media (prefers-reduced-motion: reduce) { .bhp-mountain *, .bhp-mountain *::before, .bhp-mountain *::after { transition: none !important; animation: none !important; } }