/* BHP minerals consumer styles. Canonical tokens and components load first. */
@font-face { font-family: Vazirmatn; src: url('./assets/fonts/Vazirmatn-Regular.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('./assets/fonts/Vazirmatn-Medium.woff2') format('woff2'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('./assets/fonts/Vazirmatn-SemiBold.woff2') format('woff2'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('./assets/fonts/Vazirmatn-Bold.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-block-start: 110px; color-scheme: dark; }
/* One fixed forest palette for this consumer, derived from the canonical BHP primitives. */
body.minerals-site {
  /* Reading roles use BHP tokens; Persian keeps more leading and natural shaping. */
  --mineral-copy-leading: var(--bhp-leading-loose);
  --mineral-compact-leading: var(--bhp-leading-normal);
  --mineral-heading-leading: 1.45;
  --mineral-hero-leading: 1.45;
  --mineral-reading-measure: 68ch;
  --mineral-forest-base: color-mix(in srgb, var(--bhp-green-900) 65%, var(--bhp-asphalt-800));
  --bhp-bg: color-mix(in srgb, var(--mineral-forest-base) 94%, var(--bhp-white));
  --bhp-bg-subtle: color-mix(in srgb, var(--mineral-forest-base) 89%, var(--bhp-white));
  --bhp-bg-muted: var(--bhp-asphalt-800);
  --bhp-bg-brand-subtle: color-mix(in srgb, var(--bhp-green-950) 84%, var(--bhp-asphalt-300));
  --bhp-bg-inverse: var(--bhp-green-50);
  --bhp-surface: color-mix(in srgb, var(--mineral-forest-base) 91%, var(--bhp-white));
  --bhp-surface-raised: color-mix(in srgb, var(--mineral-forest-base) 87%, var(--bhp-white));
  --bhp-surface-strong: color-mix(in srgb, var(--mineral-forest-base) 84%, var(--bhp-white));
  --bhp-border: color-mix(in srgb, var(--mineral-forest-base) 68%, var(--bhp-asphalt-300));
  --bhp-border-strong: color-mix(in srgb, var(--bhp-green-100) 48%, var(--bhp-asphalt-700));
  --bhp-border-brand: var(--bhp-green-400);
  --bhp-text: var(--bhp-green-50);
  --bhp-text-secondary: var(--bhp-asphalt-300);
  --bhp-text-muted: color-mix(in srgb, var(--bhp-asphalt-300) 85%, var(--bhp-green-200));
  --bhp-text-brand: var(--bhp-green-300);
  --bhp-text-link: var(--bhp-green-300);
  --bhp-text-link-hover: var(--bhp-green-200);
  --bhp-text-inverse: var(--bhp-asphalt-950);
  --bhp-table-head-ink: var(--bhp-green-200);
  --bhp-color-primary: var(--bhp-green-500);
  --bhp-color-primary-hover: var(--bhp-green-400);
  --bhp-color-primary-active: var(--bhp-green-300);
  --bhp-focus: var(--bhp-green-200);
  margin: 0;
  isolation: isolate;
  background: var(--bhp-bg);
  font-size: var(--bhp-text-base);
  line-height: var(--bhp-leading-normal);
}
/* The isolated body keeps decorative photos above its fallback, below all content. */
.site-slideshow { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bhp-bg); }
.site-slideshow__image { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 1600ms ease-in-out; }
.site-slideshow__image.is-active { opacity: 1; }
.site-slideshow::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--mineral-forest-base) 65%, transparent); }
.site-slideshow.is-paused .site-slideshow__image, .site-slideshow.is-reduced-motion .site-slideshow__image, .site-slideshow.is-instant .site-slideshow__image { transition: none; }
:lang(en) body.minerals-site {
  --mineral-copy-leading: var(--bhp-leading-normal);
  --mineral-compact-leading: 1.5;
  --mineral-heading-leading: var(--bhp-leading-snug);
  --mineral-hero-leading: 1.2;
  font-family: Inter, var(--bhp-font-body);
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
img { display: block; max-inline-size: 100%; }
button, a, input, textarea { touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--bhp-focus); outline-offset: 5px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-weight: var(--bhp-font-semibold); }
:lang(en) h1, :lang(en) h2, :lang(en) h3 { font-family: Archivo, var(--bhp-font-display); }
button svg, a svg { flex: 0 0 auto; }
.icon { inline-size: 22px; block-size: 22px; vertical-align: middle; }
.direction-icon { transform: scaleX(1); }
[dir='rtl'] .direction-icon { transform: scaleX(-1); }
.page-width { inline-size: min(calc(100% - 112px), 1328px); margin-inline: auto; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; inset-block-start: 0; inset-inline-start: 20px; padding: 16px; z-index: 1000; transform: translateY(-120%); background: var(--bhp-surface); color: var(--bhp-text); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; inset-block-start: 0; z-index: var(--bhp-z-header); background: var(--bhp-surface); border-block-end: 1px solid var(--bhp-border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--bhp-space-6); min-block-size: 98px; }
.brand { display: flex; align-items: center; gap: 22px; text-decoration: none; }
.brand img { inline-size: 87px; block-size: auto; background: var(--bhp-white); }
.brand-division { border-inline-start: 1px solid var(--bhp-border-strong); padding-inline-start: 22px; font-weight: var(--bhp-font-medium); font-size: 16px; }
.main-nav { gap: 16px; }
.main-nav .bhp-nav__link { font-size: 14px; padding-inline: 4px; }
.header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.utility-button { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; padding: 0; background: transparent; color: var(--bhp-text); border: 0; border-radius: var(--bhp-radius-md); }
.utility-button:hover { background: var(--bhp-bg-subtle); }
.language-toggle { font-size: 13px; font-weight: var(--bhp-font-semibold); }
.header-inquiry { font-size: 13px; min-block-size: 44px; margin-inline-start: 10px; }
.selection-count { display: inline-grid; place-items: center; border: 1px solid currentColor; border-radius: var(--bhp-radius-full); min-inline-size: 21px; min-block-size: 21px; font-size: 11px; }
.menu-toggle { display: none; }
.hero { background: var(--bhp-bg-brand-subtle); color: var(--bhp-text); padding-block: 70px 22px; }
.hero-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 7.3%; }
.hero-copy { padding-block: 14px; }
.hero-context { display: flex; align-items: center; gap: 12px; margin-block-end: 25px; font-size: 14px; }
.context-rule { inline-size: 30px; block-size: 3px; background: var(--bhp-color-accent); }
.hero h1 { font-size: clamp(38px, 4.1vw, 61px); line-height: 1.4; letter-spacing: normal; max-inline-size: 620px; }
:lang(en) .hero h1 { font-size: clamp(42px, 4.55vw, 68px); line-height: 1.12; letter-spacing: var(--bhp-tracking-tight); }
.hero-description { margin-block-start: 22px; max-inline-size: 460px; font-size: 16px; line-height: var(--mineral-copy-leading); color: var(--bhp-white); opacity: .87; }
.hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-block-start: 32px; }
.hero-primary { padding: 16px 22px; min-block-size: 52px; background: var(--bhp-white); color: var(--bhp-green-800); font-size: 14px; border-radius: var(--bhp-radius-sm); }
.hero-primary:hover { background: var(--bhp-green-50); }
.hero-note { display: flex; align-items: center; gap: 12px; margin-block-start: 50px; font-size: 12px; opacity: .85; }
.small-line { inline-size: 22px; block-size: 1px; background: currentColor; }
.specimen-feature { color: var(--bhp-text); border-radius: 110px var(--bhp-radius-lg) var(--bhp-radius-lg) var(--bhp-radius-lg); overflow: hidden; background: var(--bhp-surface); box-shadow: var(--bhp-shadow-xl); }
[dir='rtl'] .specimen-feature { border-radius: var(--bhp-radius-lg) 110px var(--bhp-radius-lg) var(--bhp-radius-lg); }
.specimen-image-wrap { position: relative; overflow: hidden; }
.specimen-image { inline-size: 100%; block-size: 362px; object-fit: cover; }
.specimen-source { position: absolute; inset-inline-start: 24px; inset-block-end: 18px; padding: 6px 11px; font-size: 11px; color: var(--bhp-white); background: var(--bhp-overlay); border-radius: var(--bhp-radius-full); }
.specimen-caption { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 23px 26px; min-block-size: 106px; }
.specimen-label { font-size: 11px; color: var(--bhp-text-muted); margin-block-end: 2px; }
.specimen-title { text-align: start; padding: 0; border: 0; background: transparent; color: var(--bhp-text); font-size: 24px; font-weight: var(--bhp-font-semibold); }
.specimen-title:hover { color: var(--bhp-text-brand); }
.specimen-controls { display: flex; align-items: center; gap: 9px; direction: ltr; }
.specimen-position { font-size: 11px; color: var(--bhp-text-muted); margin-inline-end: 7px; white-space: nowrap; }
.round-button { display: inline-grid; place-items: center; inline-size: 42px; block-size: 42px; border: 1px solid var(--bhp-border); border-radius: var(--bhp-radius-full); background: var(--bhp-surface); color: var(--bhp-text); }
.round-button:hover { background: var(--bhp-bg-brand-subtle); border-color: var(--bhp-border-brand); }
.hero-bottom { display: flex; justify-content: space-between; align-items: center; gap: 25px; border-block-start: 1px solid color-mix(in srgb, var(--bhp-white) 25%, transparent); margin-block-start: 58px; padding-block-start: 22px; font-size: 12px; }
.hero-bottom p { opacity: .85; }
.hero-bottom a { display: flex; gap: 15px; align-items: center; text-decoration: none; min-block-size: 30px; }
.hero-bottom .icon { inline-size: 18px; block-size: 18px; }
.section-space { padding-block: 64px; }
/* Lighter semantic link ink retains contrast over the global photo scrim. */
.materials-section, .inquiry-section { --bhp-text-brand: var(--bhp-text-link-hover); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-block-end: 24px; }
.section-label { color: var(--bhp-text-brand); font-size: 13px; font-weight: var(--bhp-font-semibold); margin-block-end: var(--bhp-space-2); }
h2 { font-size: clamp(29px, 2.75vw, 42px); line-height: var(--mineral-heading-leading); letter-spacing: normal; }
:lang(en) h2 { line-height: var(--mineral-heading-leading); letter-spacing: var(--bhp-tracking-tight); }
.section-heading > p { color: var(--bhp-text-muted); max-inline-size: 400px; font-size: 14px; line-height: var(--mineral-copy-leading); text-align: start; padding-block-end: 3px; }
.library-controls { display: flex; align-items: center; gap: 20px; border-block: 1px solid var(--bhp-border); padding-block: 12px; }
.search-field { display: flex; align-items: center; gap: 12px; flex: 1; }
.search-field > .icon { color: var(--bhp-text-muted); }
.search-field .bhp-input { border: 0; background: transparent; box-shadow: none; border-radius: 0; padding-inline: 0; font-size: 14px; }
.search-field .bhp-input:focus-visible { outline: 2px solid var(--bhp-focus); outline-offset: 4px; }
.search-field .bhp-input::-webkit-search-cancel-button { display: none; }
.saved-filter { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; min-block-size: 44px; color: var(--bhp-text); background: var(--bhp-bg-subtle); border: 1px solid transparent; border-radius: var(--bhp-radius-sm); font-size: 13px; }
.saved-filter[aria-pressed='true'] { color: var(--bhp-text-brand); background: var(--bhp-bg-brand-subtle); border-color: var(--bhp-border-brand); }
.saved-filter > span:last-child { font-size: 12px; font-weight: 700; margin-inline-start: 8px; }
.saved-filter .icon { inline-size: 16px; block-size: 16px; }
.filter-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px 16px; }
.category-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.category-filter { padding: 10px 17px; background: transparent; color: var(--bhp-text-muted); border: 1px solid transparent; border-radius: var(--bhp-radius-full); font-size: 12px; min-block-size: 44px; }
.category-filter:hover { color: var(--bhp-text); background: var(--bhp-bg-subtle); }
.category-filter[aria-pressed='true'] { color: var(--bhp-text-brand); background: var(--bhp-bg-brand-subtle); font-weight: 600; border-color: var(--bhp-border); }
.result-count { color: var(--bhp-text-muted); font-size: 12px; white-space: nowrap; }
.material-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
.material-card { min-inline-size: 0; }
.material-media { position: relative; overflow: hidden; background: var(--bhp-bg-subtle); border-radius: var(--bhp-radius); }
.material-image-button { display: block; inline-size: 100%; padding: 0; border: 0; background: transparent; }
.material-image-button img { inline-size: 100%; block-size: auto; aspect-ratio: 1.5; object-fit: cover; transition: transform var(--bhp-duration-slow) cubic-bezier(var(--bhp-ease-out)); }
.material-image-button:hover img { transform: scale(1.035); }
.material-media--sheet .material-image-button img { object-fit: contain; padding: 8px; }
.material-media--sheet .material-image-button:hover img { transform: none; }
.sheet-label { display: block; padding: 7px 12px; font-size: 12px; line-height: 1.6; background: var(--bhp-bg-brand-subtle); color: var(--bhp-text-brand); }
.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; }
.product-sheet-preview { overflow: hidden; border: 1px solid var(--bhp-border); border-radius: var(--bhp-radius); }
.product-image--sheet { padding: 8px; object-fit: contain; }
.save-material { position: absolute; inset-inline-end: 10px; inset-block-start: 10px; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border: 1px solid var(--bhp-border); border-radius: var(--bhp-radius-full); background: var(--bhp-surface); color: var(--bhp-text); box-shadow: var(--bhp-shadow-sm); }
.save-material .icon { inline-size: 18px; block-size: 18px; }
.save-material[aria-pressed='true'] { background: var(--bhp-color-primary); color: var(--bhp-text-inverse); border-color: var(--bhp-color-primary); }
.material-category { color: var(--bhp-text-muted); font-size: 11px; margin-block: var(--bhp-space-3) var(--bhp-space-1); }
.material-title { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.material-title h3 { font-size: 19px; font-weight: 600; line-height: var(--mineral-heading-leading); }
.material-title button { border: 0; padding: 0; background: transparent; color: var(--bhp-text); text-align: start; }
.material-title button:hover { color: var(--bhp-text-brand); }
.material-title > .icon { inline-size: 17px; block-size: 17px; margin-block-start: 7px; color: var(--bhp-text-brand); }
.material-summary { font-size: 14px; color: var(--bhp-text-muted); line-height: var(--mineral-copy-leading); margin-block-start: var(--bhp-space-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-block-size: 2lh; }
.material-tags { display: flex; gap: var(--bhp-space-1); flex-wrap: wrap; margin-block-start: 8px; }
.material-tags span { padding: 3px 7px; border: 1px solid var(--bhp-border); font-size: 10px; border-radius: var(--bhp-radius-sm); color: var(--bhp-text-secondary); }
.library-footer { margin-block-start: 24px; border-block-start: 1px solid var(--bhp-border); padding-block-start: 16px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.library-footer p { color: var(--bhp-text-muted); font-size: 12px; max-inline-size: 660px; }
.library-footer button { font-size: 12px; min-block-size: 44px; white-space: nowrap; }
.empty-state { text-align: center; padding: 40px 24px; }
.empty-state h3 { font-size: 22px; }
.empty-state p { margin-block: 12px 24px; color: var(--bhp-text-muted); }
.text-link { color: var(--bhp-text-brand); display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; font-size: 12px; padding-block: 8px; }
.text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.text-link .icon { inline-size: 18px; block-size: 18px; }
.inquiry-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 6%; }
.materials-section + .inquiry-section { padding-block-start: 0; }
.inquiry-intro h2 { margin-block-end: var(--bhp-space-3); }
.inquiry-intro > p:not(.section-label) { color: var(--bhp-text-muted); max-inline-size: 370px; font-size: 14px; line-height: var(--mineral-copy-leading); }
.contact-block { display: flex; flex-direction: column; align-items: start; gap: 8px; margin-block-start: 24px; }
.contact-block a { font-size: 18px; font-weight: 500; text-decoration: none; }
.contact-block a:hover { color: var(--bhp-text-brand); }
.contact-block span { color: var(--bhp-text-muted); font-size: 11px; margin-block-start: 7px; }
.inquiry-form { padding: 24px; background: var(--bhp-surface-raised); border-radius: var(--bhp-radius-lg); border: 1px solid var(--bhp-border); }
.selection-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.selection-heading h3 { font-size: 14px; font-weight: 600; }
.selection-heading .text-link { font-size: 11px; }
.inquiry-selection { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 12px 16px; min-block-size: 44px; }
.inquiry-selection > p { color: var(--bhp-text-muted); font-size: 12px; }
.selection-chip { display: inline-flex; gap: 9px; align-items: center; padding-inline: 12px 4px; min-block-size: 38px; font-size: 12px; border: 1px solid var(--bhp-border); background: var(--bhp-surface); border-radius: var(--bhp-radius-full); }
.selection-chip button { display: grid; place-items: center; border: 0; background: transparent; color: var(--bhp-text-muted); inline-size: 30px; block-size: 30px; border-radius: var(--bhp-radius-full); font-size: 18px; }
.selection-chip button:hover { color: var(--bhp-color-danger); background: var(--bhp-bg-subtle); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-block-end: 18px; }
.inquiry-form .bhp-label { font-size: 12px; }
.inquiry-form .bhp-input, .inquiry-form .bhp-textarea { font-size: 12px; border-color: var(--bhp-border); min-block-size: 46px; }
.inquiry-form .bhp-textarea { resize: vertical; line-height: var(--mineral-copy-leading); }
.inquiry-submit { display: flex; align-items: center; gap: 16px; margin-block-start: 18px; flex-wrap: wrap; }
.inquiry-submit .bhp-button { font-size: 12px; padding: 15px 18px; }
.copy-button { background: transparent; border: 0; padding: 8px 0; min-block-size: 44px; text-underline-offset: 4px; text-decoration: underline; color: var(--bhp-text-muted); font-size: 11px; }
.form-note { margin-block-start: var(--bhp-space-3); font-size: 10px; color: var(--bhp-text-muted); line-height: var(--mineral-copy-leading); }
.form-status { font-size: 12px; margin-block-start: 8px; color: var(--bhp-text-brand); }
.site-footer { border-block-start: 1px solid var(--bhp-border); padding-block: 20px; background: var(--bhp-surface); }
.footer-inner { display: flex; gap: 24px; align-items: center; }
.footer-brand img { inline-size: 65px; block-size: auto; background: var(--bhp-white); }
.footer-inner p { font-size: 12px; color: var(--bhp-text-muted); }
.footer-inner .slideshow-disclosure { max-inline-size: 34ch; font-size: 11px; line-height: 1.6; }
.footer-home { font-size: 12px; margin-inline-start: auto; text-decoration: none; }
.back-top { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 1px solid var(--bhp-border); border-radius: var(--bhp-radius-full); }
.product-overview { display: grid; grid-template-columns: .9fr 1.1fr; gap: 30px; padding: 30px; align-items: start; }
.product-image { inline-size: 100%; block-size: auto; border-radius: var(--bhp-radius); aspect-ratio: 1.6; object-fit: contain; }
.product-category { color: var(--bhp-text-brand); font-size: 12px; margin-block-end: 7px; }
.product-overview h2 { font-size: 30px; }
.product-summary { color: var(--bhp-text-muted); font-size: 13px; line-height: var(--mineral-copy-leading); margin-block-start: 14px; }
.product-applications { display: flex; gap: 6px; flex-wrap: wrap; margin-block-start: 12px; }
.product-applications span { padding: 5px 9px; background: var(--bhp-bg-brand-subtle); color: var(--bhp-text-brand); border-radius: var(--bhp-radius-sm); font-size: 11px; }
.product-specs { padding: 0 30px 30px; }
.product-specs .bhp-table { font-size: 12px; }
.product-specs .bhp-table th { inline-size: 47%; font-weight: 500; }
.product-specs .bhp-table td { direction: inherit; text-align: start; }
.product-source { font-size: 11px; line-height: var(--mineral-copy-leading); color: var(--bhp-text-muted); margin-block-start: var(--bhp-space-3); }
.product-source a { color: var(--bhp-text-brand); text-underline-offset: 3px; }
.product-actions { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 22px 30px; background: var(--bhp-bg-subtle); border-block-start: 1px solid var(--bhp-border); }
.product-actions .bhp-button { font-size: 13px; min-block-size: 46px; }
.selection-toast { position: fixed; z-index: var(--bhp-z-toast); inset-block-end: 25px; inset-inline-start: 50%; transform: translateX(-50%); background: var(--bhp-bg-inverse); color: var(--bhp-text-inverse); box-shadow: var(--bhp-shadow-lg); border-radius: var(--bhp-radius); padding: 14px 24px; font-size: 13px; text-align: center; max-inline-size: calc(100vw - 32px); }
[dir='rtl'] .selection-toast { transform: translateX(50%); }
@media (min-width: 1500px) { .hero { padding-block-start: 88px; } .specimen-image { block-size: 405px; } }
@media (max-width: 1180px) { .page-width { inline-size: calc(100% - 72px); } .main-nav { gap: 10px; } .brand-division { display: none; } .header-inner { gap: 22px; } .hero-inner { gap: 5%; } .hero h1 { font-size: 44px; } :lang(en) .hero h1 { font-size: 51px; } .hero-actions { gap: 17px; } .specimen-image { block-size: 340px; } .specimen-caption { padding: 20px; } .specimen-title { font-size: 21px; } .specimen-position { display: none; } .hero-note { margin-block-start: 36px; } .material-grid { gap: 24px 20px; } .material-title h3 { font-size: 17px; } .category-filter { padding-inline: 13px; } .inquiry-section { gap: 5%; } .inquiry-form { padding: 22px; } }
@media (max-width: 900px) { .page-width { inline-size: calc(100% - 48px); } .header-inner { min-block-size: 82px; } .brand img { inline-size: 75px; } .main-nav .bhp-nav__link { font-size: 12px; } .header-inquiry { padding-inline: 14px; font-size: 12px; margin-inline-start: 0; } .header-actions { gap: 2px; } .hero { padding-block-start: 45px; } .hero h1 { font-size: 34px; } :lang(en) .hero h1 { font-size: 40px; } .hero-description { font-size: 13px; } .hero-context { font-size: 12px; margin-block-end: 17px; } .hero-actions { gap: 14px; margin-block-start: 25px; } .hero-primary { font-size: 12px; padding: 14px; } .hero-note { display: none; } .specimen-image { block-size: 290px; } .specimen-feature, [dir='rtl'] .specimen-feature { border-radius: var(--bhp-radius-lg); } .specimen-caption { padding: 15px; min-block-size: 91px; } .specimen-label { font-size: 10px; } .round-button { inline-size: 36px; block-size: 36px; } .specimen-controls { gap: 5px; } .specimen-title { font-size: 18px; } .specimen-source { inset-inline-start: 15px; font-size: 9px; } .hero-bottom { margin-block-start: 42px; } .section-space { padding-block: 52px; } .section-heading { gap: 24px; } .section-heading > p { max-inline-size: 300px; font-size: 12px; } .material-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .filter-row { align-items: start; } .category-filters { gap: 1px; } .category-filter { padding-inline: 12px; font-size: 11px; } .result-count { padding-block-start: 14px; } .inquiry-section { gap: 28px; grid-template-columns: .85fr 1.15fr; } .inquiry-form { padding: 22px; } .form-grid { grid-template-columns: 1fr; } .selection-heading { flex-direction: column; align-items: start; gap: 0; } }
@media (max-width: 680px) { html { scroll-padding-block-start: 85px; } .page-width { inline-size: calc(100% - 40px); } .header-inner { min-block-size: 76px; gap: 12px; } .brand img { inline-size: 67px; } .header-inquiry { display: none; } .header-actions { gap: 2px; } .menu-toggle { display: inline-flex; } .main-nav { display: none; position: absolute; inset-inline: 0; inset-block-start: 100%; background: var(--bhp-surface); box-shadow: var(--bhp-shadow-lg); padding: 15px 20px; border-block-end: 1px solid var(--bhp-border); } .main-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 2px; } .main-nav .bhp-nav__link { font-size: 15px; padding: 14px; } .brand-division { display: none; padding-inline-start: 15px; font-size: 12px; } .brand { gap: 15px; } .hero { padding-block: 31px 19px; } .hero-inner { grid-template-columns: 1fr; gap: 35px; } .hero-copy { padding-block: 0; } .hero-context { margin-block-end: 18px; font-size: 11px; } .hero h1 { font-size: clamp(32px, 8vw, 46px); line-height: 1.4; max-inline-size: 450px; letter-spacing: normal; } :lang(en) .hero h1 { font-size: clamp(38px, 10vw, 57px); line-height: 1.12; } .hero-description { font-size: 13px; margin-block-start: 16px; max-inline-size: 420px; line-height: var(--mineral-copy-leading); } .hero-actions { margin-block-start: 23px; gap: 25px; } .hero-primary { padding: 14px 17px; font-size: 12px; min-block-size: 48px; } .specimen-image { block-size: auto; aspect-ratio: 1.66; } .specimen-feature, [dir='rtl'] .specimen-feature { border-radius: var(--bhp-radius); } .specimen-caption { min-block-size: 87px; padding: 16px 20px; } .specimen-title { font-size: 20px; } .round-button { inline-size: 40px; block-size: 40px; } .specimen-position { display: inline; } .specimen-source { inset-block-end: 12px; } .hero-bottom { margin-block-start: 30px; font-size: 10px; padding-block-start: 15px; } .hero-bottom p { max-inline-size: 210px; } .hero-bottom a { gap: 8px; flex-shrink: 0; } .section-space { padding-block: 40px; } .section-heading { flex-direction: column; align-items: start; gap: 12px; margin-block-end: 20px; } h2 { font-size: 29px; } :lang(en) h2 { font-size: 32px; } .section-label { font-size: 11px; margin-block-end: var(--bhp-space-2); } .section-heading > p { max-inline-size: 400px; font-size: 12px; } .library-controls { gap: 12px; padding-block: 12px; flex-wrap: wrap; } .search-field { min-inline-size: 100%; } .search-field .bhp-input { font-size: 12px; min-block-size: 44px; } .library-tools { inline-size: 100%; } .saved-filter { background: transparent; padding-inline: 0; min-block-size: 34px; font-size: 11px; } .saved-filter[aria-pressed='true'] { padding-inline: 10px; } .filter-row { padding-block: 10px 16px; flex-direction: column; gap: 7px; } .category-filters { gap: 3px; } .category-filter { min-block-size: 39px; padding: 7px 12px; font-size: 10px; } .result-count { padding-block-start: 0; font-size: 10px; } .material-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 15px; } .material-image-button img { aspect-ratio: 1.08; } .save-material { inset-inline-end: 7px; inset-block-start: 7px; inline-size: 36px; block-size: 36px; } .material-category { font-size: 9px; margin-block-start: 12px; } .material-title h3 { font-size: 15px; } .material-title { gap: 8px; } .material-title > .icon { inline-size: 14px; block-size: 14px; margin-block-start: 5px; } .material-summary { font-size: 14px; line-height: var(--mineral-copy-leading); min-block-size: 2lh; } .material-tags { display: none; } .library-footer { margin-block-start: 24px; flex-direction: column; align-items: start; gap: 12px; padding-block-start: 16px; } .library-footer p { font-size: 10px; } .library-footer button { inline-size: 100%; font-size: 12px; } .inquiry-section { grid-template-columns: 1fr; gap: 24px; } .inquiry-intro h2 br { display: none; } .inquiry-intro h2 { margin-block-end: var(--bhp-space-3); } .inquiry-intro > p:not(.section-label) { max-inline-size: 100%; font-size: 12px; } .contact-block { margin-block-start: 22px; } .contact-block a { font-size: 16px; } .inquiry-form { padding: 18px; } .selection-heading { flex-direction: row; align-items: center; } .selection-heading h3 { font-size: 12px; } .selection-heading .text-link { font-size: 10px; } .form-grid { grid-template-columns: 1fr; gap: 15px; } .inquiry-submit { gap: 15px; } .inquiry-submit .bhp-button { font-size: 11px; } .form-note { font-size: 10px; } .footer-inner { flex-wrap: wrap; gap: 16px; } .footer-brand img { inline-size: 57px; } .footer-inner p { font-size: 10px; } .footer-home { font-size: 10px; margin-inline-start: 0; } .back-top { margin-inline-start: auto; inline-size: 37px; block-size: 37px; } .site-footer { padding-block: 18px; } .product-overview { grid-template-columns: 1fr; padding: 20px; gap: 20px; } .product-image { max-block-size: 225px; aspect-ratio: 1.6; } .product-overview h2 { font-size: 27px; } .product-summary { font-size: 12px; } .product-specs { padding: 0 20px 20px; } .product-specs .bhp-table { font-size: 11px; } .product-specs .bhp-table td, .product-specs .bhp-table th { padding-inline: 7px; } .product-actions { padding: 18px 20px; flex-wrap: wrap; gap: 10px; } .product-actions .bhp-button { font-size: 12px; } .selection-toast { inline-size: max-content; font-size: 11px; inset-block-end: 16px; } }
/* Touch and reading sizes stay generous as the layout becomes compact. */
@media (max-width: 680px) {
  .material-image-button img { aspect-ratio: 1.5; }
  .brand { gap: 11px; }
  .brand-division { padding-inline-start: 11px; }
  .hero-description { font-size: 15px; }
  .hero-context, .hero-bottom, .section-label, .specimen-label, .specimen-source, .specimen-position { font-size: 12px; }
  .hero-primary { font-size: 14px; }
  .hero-actions { gap: 18px; }
  .round-button { inline-size: 44px; block-size: 44px; }
  .section-heading > p, .inquiry-intro > p:not(.section-label) { font-size: 15px; }
  .search-field .bhp-input, .inquiry-form .bhp-input, .inquiry-form .bhp-textarea { font-size: 16px; }
  .saved-filter { min-block-size: 44px; font-size: 13px; }
  .category-filter { min-block-size: 44px; font-size: 12px; }
  .result-count, .material-category { font-size: 12px; }
  .material-title h3 { font-size: 17px; }
  .material-summary { font-size: 14px; min-block-size: 2lh; }
  .save-material { inline-size: 44px; block-size: 44px; }
  .library-footer p, .library-footer button { font-size: 13px; } .text-link { font-size: 13px; }
  .selection-heading h3 { font-size: 14px; }
  .selection-heading .text-link { font-size: 12px; }
  .inquiry-selection > p, .inquiry-form .bhp-label, .inquiry-submit .bhp-button, .copy-button { font-size: 14px; }
  .selection-chip { font-size: 14px; min-block-size: 44px; }
  .selection-chip button { inline-size: 44px; block-size: 44px; }
  .form-note, .footer-inner p, .footer-home, .contact-block span { font-size: 12px; }
  .product-category, .product-source, .product-applications span { font-size: 12px; }
  .product-summary, .product-actions .bhp-button { font-size: 14px; }
  .product-specs .bhp-table { font-size: 13px; }
  .selection-toast { font-size: 13px; }
}
@media (max-width: 380px) { .brand-division { display: none; } .hero-actions { gap: 13px; } .hero-primary { font-size: 12px; } .selection-heading { flex-direction: column; align-items: start; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

/* The landscape fills the landing view; product details retain a physical left/right split. */
.hero--mountain {
  --hero-gutter: clamp(16px, 2vw, 40px);
  --mineral-landscape-bg: color-mix(in srgb, var(--bhp-bg-brand-subtle) 58%, var(--bhp-surface-strong));
  --mineral-landscape-glow: var(--bhp-surface-raised);
  background: transparent;
  color: var(--bhp-text);
  padding-block: 0 36px;
  scroll-margin-block-start: 108px;
}
.hero-frame.page-width { position: relative; inline-size: 100%; max-inline-size: 2000px; margin-inline: auto; padding-inline: var(--hero-gutter); }
/* Physical right placement is intentional in both writing directions. */
.hero-intro { position: absolute; right: var(--hero-gutter); inset-block-start: 32px; z-index: 4; inline-size: clamp(320px, 29vw, 390px); text-align: start; margin: 0; }
.hero-intro, .hero-guide, .mountain-footer { background: color-mix(in srgb, var(--bhp-bg) 90%, transparent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--bhp-bg) 90%, transparent); border-radius: var(--bhp-radius-sm); }
.hero--mountain .hero-context { display: block; color: var(--bhp-text-brand); font-size: 12px; font-weight: var(--bhp-font-semibold); line-height: var(--mineral-copy-leading); margin-block-end: 12px; }
.hero--mountain h1 { max-inline-size: none; font-size: clamp(28px, 2.2vw, 34px); line-height: var(--mineral-hero-leading); letter-spacing: normal; }
:lang(en) .hero--mountain h1 { font-size: clamp(28px, 2.2vw, 34px); line-height: var(--mineral-hero-leading); letter-spacing: var(--bhp-tracking-tight); }
.hero-quick-guide { font-size: 13px; color: var(--bhp-text-secondary); line-height: var(--mineral-copy-leading); margin-block-start: var(--bhp-space-3); max-inline-size: 33ch; }
.hero-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0fr); align-items: start; column-gap: 0; direction: ltr; transition: grid-template-columns 360ms ease, column-gap 360ms ease; }
.hero-stage > * { min-inline-size: 0; direction: ltr; }
[dir='rtl'] .hero-stage > * { direction: rtl; }
.mountain-explorer { grid-column: 1; inline-size: 100%; max-inline-size: none; margin-inline: auto; transition: max-inline-size 360ms ease; }
.hero--mountain .mountain-stage { block-size: clamp(760px, calc(100svh - 64px), 1120px); transition: block-size 360ms ease; }
.hero-guide { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 1.8fr) auto; align-items: start; gap: var(--bhp-space-5); margin: var(--bhp-space-4) auto 0; padding-block-start: var(--bhp-space-5); border-block-start: 1px solid var(--bhp-border-strong); text-align: start; }
.hero-guide-title { font-size: 17px; font-weight: var(--bhp-font-semibold); line-height: var(--mineral-heading-leading); color: var(--bhp-text); margin-block-end: 0; }
.hero-guide-instruction { font-size: 13px; line-height: var(--mineral-copy-leading); color: var(--bhp-text-secondary); max-inline-size: var(--mineral-reading-measure); }
.hero-guide .text-link { justify-content: start; font-size: 13px; margin-block-start: 0; padding-block-start: 2px; }
.hero-guide .icon { inline-size: 17px; block-size: 17px; }
.hero--mountain.is-detail-open { padding-block-start: 12px; }
.is-detail-open .hero-frame { max-inline-size: 1520px; }
.is-detail-open .hero-stage { grid-template-columns: minmax(0, .46fr) minmax(0, .54fr); column-gap: clamp(24px, 3vw, 48px); }
.is-detail-open .mountain-explorer { position: sticky; inset-block-start: 166px; max-inline-size: 620px; }
.hero--mountain.is-detail-open .mountain-stage { block-size: clamp(420px, calc(100dvh - 260px), 650px); }
.detail-close { display: inline-flex; align-items: center; gap: 14px; max-inline-size: calc(100% - 48px); margin-block: var(--bhp-space-3) 0; margin-inline: 24px; border: 0; padding: 0; min-block-size: 44px; color: var(--bhp-text-brand); background: transparent; font-size: 13px; text-align: start; }
.detail-close-mark { display: inline-grid; flex-shrink: 0; place-items: center; inline-size: 44px; block-size: 44px; border: 1px solid var(--bhp-border); border-radius: var(--bhp-radius-full); font-size: 28px; line-height: 1; }
.detail-close:hover .detail-close-mark { background: var(--bhp-surface); border-color: var(--bhp-border-brand); }
.product-detail { grid-column: 2; min-inline-size: 0; container: mineral-detail / inline-size; background: var(--bhp-surface); border: 1px solid var(--bhp-border); border-radius: var(--bhp-radius-lg); overflow: clip; animation: product-enter 260ms ease both; }
@keyframes product-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.product-detail .product-overview { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; padding: 12px 24px 18px; gap: 18px; }
.product-overview > div { inline-size: 100%; min-inline-size: 0; overflow-wrap: break-word; }
.product-overview h2 { font-size: clamp(26px, 2.2vw, 32px); line-height: var(--mineral-heading-leading); scroll-margin-block-start: 178px; }
.product-overview h2:focus-visible, #hero-title:focus-visible { outline: 3px solid var(--bhp-focus); outline-offset: 7px; }
.product-summary { font-size: 15px; line-height: var(--mineral-copy-leading); margin-block-start: var(--bhp-space-2); }
.product-applications span { font-size: 12px; line-height: var(--mineral-compact-leading); }
.product-lead-description { margin-block-start: var(--bhp-space-4); }
.product-lead-description h3 { font-size: 16px; line-height: var(--mineral-heading-leading); margin-block-end: var(--bhp-space-2); }
.product-lead-description .research-description { line-height: var(--mineral-copy-leading); margin-block-end: var(--bhp-space-3); }
.product-lead-description .research-description:last-child { margin-block-end: 0; }
.product-figure { inline-size: 100%; max-inline-size: 300px; min-inline-size: 0; margin: 0; padding: 0; }
.product-detail .product-image { aspect-ratio: 1.75; max-block-size: 380px; object-fit: contain; background: var(--bhp-bg-subtle); }
.product-detail .product-image--sheet { aspect-ratio: auto; max-block-size: 560px; padding: 12px; }
.product-detail .product-image.product-image--generated { aspect-ratio: 4 / 3; max-block-size: none; object-fit: cover; }
.product-figure figcaption { font-size: 11px; color: var(--bhp-text-muted); padding-block-start: 8px; line-height: var(--mineral-compact-leading); }
.product-sheet-preview { border: 0; border-radius: 0; }
.product-infographic-link { display: block; border-radius: var(--bhp-radius-sm); overflow: hidden; cursor: zoom-in; }
.product-infographic-link:focus-visible { outline: 3px solid var(--bhp-focus); outline-offset: 5px; }
.product-detail .product-figure--infographic .product-image.product-image--infographic { display: block; inline-size: 100%; block-size: auto; aspect-ratio: auto; max-block-size: none; object-fit: contain; padding: 0; }
.product-media-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-block-start: 8px; }
.product-media-actions .text-link { min-block-size: 44px; font-size: 12px; }
.product-research { padding: 0 24px 22px; }
.product-research h3 { font-size: 18px; line-height: var(--mineral-heading-leading); margin-block-end: var(--bhp-space-2); }
.research-description { text-align: start; font-size: 14px; line-height: var(--mineral-copy-leading); margin-block-end: var(--bhp-space-3); max-inline-size: var(--mineral-reading-measure); }
.product-reading-section { margin-block-start: var(--bhp-space-4); padding-block-start: var(--bhp-space-4); border-block-start: 1px solid var(--bhp-border); }
.product-research > .product-reading-section:first-child { margin-block-start: 0; }
.product-uses { margin: 0; }
.product-uses > div + div { margin-block-start: var(--bhp-space-4); }
.product-uses dt { font-size: 14px; font-weight: var(--bhp-font-semibold); margin-block-end: var(--bhp-space-1); }
.product-uses dd { margin: 0; color: var(--bhp-text-muted); }
.product-uses p:last-child { margin-block-end: 0; }
.research-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bhp-space-4) var(--bhp-space-5); margin-block: var(--bhp-space-4); }
.research-facts > div { padding-block-start: 12px; border-block-start: 1px solid var(--bhp-border); }
.research-facts > div:first-child { grid-column: 1 / -1; }
.research-facts dt { font-size: 13px; font-weight: 600; color: var(--bhp-text-brand); margin-block-end: var(--bhp-space-1); }
.research-facts dd { margin: 0; font-size: 13px; line-height: var(--mineral-copy-leading); color: var(--bhp-text-muted); }
.research-note { font-size: 12px; line-height: var(--mineral-copy-leading); color: var(--bhp-text-muted); }
.research-sources { margin-block-start: var(--bhp-space-3); font-size: 13px; }
.research-sources summary { cursor: pointer; padding-block: 10px; font-weight: 500; color: var(--bhp-text-brand); }
.research-sources summary:focus-visible { outline: 3px solid var(--bhp-focus); outline-offset: 3px; }
.research-sources ul { margin-block: var(--bhp-space-2) 0; padding-inline-start: var(--bhp-space-5); line-height: var(--mineral-copy-leading); }
.research-sources li { margin-block-end: 8px; overflow-wrap: anywhere; }
.research-sources a { text-underline-offset: 3px; }
.product-detail .product-specs { padding: 0 24px 22px; }
.product-specs .bhp-table { inline-size: 100%; table-layout: fixed; font-size: 13px; }
.product-specs .bhp-table th { text-align: start; }
.product-specs .bhp-table th, .product-specs .bhp-table td { overflow-wrap: break-word; vertical-align: top; }
.product-source { font-size: 12px; }
.product-actions { flex-wrap: wrap; padding: 16px 24px; }
/* The detail panel narrows independently of the viewport beside the mountain. */
@container mineral-detail (min-width: 680px) {
  .product-detail .product-overview { grid-template-columns: minmax(0, 1fr) minmax(220px, min(35%, 300px)); }
}
@container mineral-detail (max-width: 540px) {
  .research-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .is-detail-open .hero-stage { grid-template-columns: minmax(0, .43fr) minmax(0, .57fr); column-gap: 24px; }
  .product-detail .product-overview, .product-research, .product-detail .product-specs { padding-inline: 22px; }
  .detail-close { max-inline-size: calc(100% - 44px); margin-inline: 22px; }
  .product-actions { padding-inline: 22px; }
  .research-facts { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .hero--mountain { padding-block-start: 28px; }
  .hero-intro { position: relative; right: auto; inset-block-start: auto; inline-size: min(100%, 390px); margin: 0 0 6px auto; }
  .hero--mountain .mountain-stage { block-size: clamp(680px, 86svh, 900px); }
  .hero-guide { grid-template-columns: minmax(180px, .7fr) minmax(0, 1.8fr); gap: var(--bhp-space-3) var(--bhp-space-5); }
  .hero-guide .text-link { grid-column: 2; }
}
@media (max-width: 900px) {
  .hero--mountain { --hero-gutter: 24px; scroll-margin-block-start: 92px; }
  .hero-stage, .is-detail-open .hero-stage { display: flex; flex-direction: column; gap: 22px; }
  .hero-stage > * { inline-size: 100%; }
  .is-detail-open .mountain-explorer { position: static; max-inline-size: 100%; }
  .hero--mountain.is-detail-open .mountain-stage { block-size: 380px; }
  .product-overview h2 { scroll-margin-block-start: 160px; }
  .product-detail .product-image { aspect-ratio: 1.2; }
  .product-detail .product-image--sheet { max-block-size: 350px; }
}
@media (max-width: 680px) {
  .hero--mountain { --hero-gutter: 16px; padding-block: 26px 28px; scroll-margin-block-start: 85px; }
  .hero-intro { padding-inline: 4px; margin-block-end: 8px; }
  .hero--mountain h1, :lang(en) .hero--mountain h1 { font-size: 28px; }
  .hero--mountain .hero-context { font-size: 11px; }
  .hero-quick-guide { font-size: 13px; margin-block-start: var(--bhp-space-3); max-inline-size: none; }
  .hero--mountain .mountain-stage { block-size: clamp(540px, 82svh, 720px); }
  .hero--mountain.is-detail-open .mountain-stage { block-size: 350px; }
  .detail-close { gap: 8px; max-inline-size: calc(100% - 36px); margin-inline: 18px; font-size: 12px; }
  .hero-guide { display: block; margin-block-start: var(--bhp-space-4); padding: var(--bhp-space-4) var(--bhp-space-1) 0; }
  .hero-guide-title { font-size: 16px; margin-block-end: var(--bhp-space-2); }
  .hero-guide-instruction { font-size: 14px; }
  .hero-guide .text-link { margin-block-start: 14px; padding-block: 8px; }
  .product-detail .product-overview { grid-template-columns: minmax(0, 1fr); padding: 12px 18px 16px; gap: 16px; }
  .product-overview h2 { font-size: 27px; }
  .product-figure { max-inline-size: 260px; }
  .product-detail .product-image { max-block-size: 300px; aspect-ratio: 1.6; }
  .product-detail .product-image--sheet { max-block-size: 480px; aspect-ratio: auto; }
  .product-research, .product-detail .product-specs { padding: 0 18px 18px; }
  .research-facts { grid-template-columns: 1fr; gap: 16px; }
  .research-description, .research-facts dd { font-size: 14px; }
  .product-actions { padding: 16px 18px; gap: 12px; }
  .product-actions .bhp-button { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stage, .mountain-explorer, .hero--mountain .mountain-stage, .product-detail { transition: none; animation: none; }
}

/* Short desktop viewports let the entire model and its lower controls scroll. */
@media (min-width: 901px) and (max-height: 739px) {
  .is-detail-open .mountain-explorer { position: static; }
}