@charset "UTF-8";.material-stock-page { --ms-navy: #123d84; --ms-deep: #071f42; --ms-blue: #4a97ff; --ms-light: #f4f7fc; --ms-line: #d8e1ef; --ms-text: #24364a; --ms-muted: #617287; --ms-shadow: 0 24px 50px rgba(9, 29, 67, 0.08); --ms-shadow-strong: 0 30px 56px rgba(9, 29, 67, 0.12); color: var(--ms-text); background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%); } .material-stock-page * { box-sizing: border-box; } .material-stock-container { width: min(1200px, calc(100% - 40px)); margin: 0 auto; }   .material-stock-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #05152f 0%, #0d4f9e 50%, #4a97ff 100%); } .material-stock-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 24%), radial-gradient(circle at 84% 16%, rgba(74, 151, 255, 0.34) 0%, rgba(255, 255, 255, 0) 28%), radial-gradient(circle at 78% 84%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 22%); pointer-events: none; } .material-stock-hero__content { position: relative; z-index: 1; padding: 78px 0 68px; color: #fff; } .material-stock-hero__eyebrow { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.08); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; } .material-stock-hero__title { margin: 20px 0 0; font-size: clamp(38px, 5vw, 58px); line-height: 1.18; font-weight: 800; letter-spacing: 0.02em; } .material-stock-hero__lead { max-width: 920px; margin: 22px 0 0; font-size: 18px; line-height: 2; color: rgba(255, 255, 255, 0.92); } .material-stock-hero__chips { display: flex; flex-wrap: wrap; gap: 14px; padding: 0; margin: 34px 0 0; list-style: none; } .material-stock-hero__chips li { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.10); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.5; backdrop-filter: blur(4px); }   .material-stock-section-head { text-align: center; } .material-stock-section-head--left { text-align: left; } .material-stock-section-head__eyebrow { display: inline-block; margin-bottom: 16px; color: var(--ms-blue); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; } .material-stock-section-head__title { margin: 0; font-size: clamp(28px, 4vw, 42px); line-height: 1.45; font-weight: 800; color: var(--ms-text); } .material-stock-section-head__lead { max-width: 820px; margin: 20px auto 0; font-size: 16px; line-height: 2; color: var(--ms-muted); } .material-stock-section-head--left .material-stock-section-head__lead { max-width: none; margin-left: 0; margin-right: 0; }   .material-stock-metrics { padding: 88px 0 52px; } .material-stock-metrics__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 38px; } .material-stock-metric-card { padding: 28px 28px 26px; border: 1px solid var(--ms-line); border-radius: 28px; background: #fff; box-shadow: var(--ms-shadow); text-align: center; } .material-stock-metric-card__label { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(18, 61, 132, 0.06); color: var(--ms-blue); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; } .material-stock-metric-card__value { margin: 18px 0 0; font-size: clamp(34px, 4vw, 52px); line-height: 1.1; font-weight: 900; color: var(--ms-navy); } .material-stock-metric-card__value span { margin-left: 6px; font-size: 0.38em; font-weight: 700; } .material-stock-metric-card__text { margin: 16px 0 0; font-size: 15px; line-height: 1.9; color: var(--ms-muted); }   .material-stock-guide { padding: 0 0 72px; } .material-stock-guide__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .material-stock-guide-card { padding: 28px 26px 26px; border-radius: 28px; border: 1px solid var(--ms-line); background: linear-gradient(180deg, #fbfdff 0%, #f3f7fd 100%); box-shadow: var(--ms-shadow); } .material-stock-guide-card__tag { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(18, 61, 132, 0.06); color: var(--ms-blue); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; } .material-stock-guide-card h3 { margin: 16px 0 0; font-size: 26px; line-height: 1.45; font-weight: 800; color: var(--ms-text); } .material-stock-guide-card p { margin: 16px 0 0; font-size: 15px; line-height: 2; color: var(--ms-muted); }   .material-stock-search { padding: 0 0 72px; } .material-stock-panel, .material-stock-support-panel { padding: 34px 36px; border: 1px solid var(--ms-line); border-radius: 30px; background: linear-gradient(180deg, #fbfdff 0%, #f3f7fd 100%); box-shadow: var(--ms-shadow); } .material-stock-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; } .material-stock-step { padding: 22px 20px; border-radius: 24px; border: 1px solid rgba(18, 61, 132, 0.10); background: linear-gradient(180deg, #fbfdff 0%, #f3f7fd 100%); } .material-stock-step__num, .material-stock-filter-group__step, .material-stock-result__eyebrow { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(18, 61, 132, 0.06); color: var(--ms-blue); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; } .material-stock-step h3 { margin: 14px 0 0; font-size: 20px; line-height: 1.45; font-weight: 800; color: var(--ms-text); } .material-stock-step p { margin: 10px 0 0; font-size: 14px; line-height: 1.9; color: var(--ms-muted); } .material-stock-search__layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 28px; } .material-stock-filter-group { padding: 24px; border-radius: 24px; border: 1px solid rgba(18, 61, 132, 0.10); background: #fff; } .material-stock-filter-group__head { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; } .material-stock-filter-group__head h3 { margin: 0; font-size: 24px; line-height: 1.45; font-weight: 800; color: var(--ms-text); } .material-stock-filter-group__lead { margin: 14px 0 0; font-size: 14px; line-height: 1.9; color: var(--ms-muted); } .material-stock-choice-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .material-stock-choice { position: relative; } .material-stock-choice__input { position: absolute; opacity: 0; pointer-events: none; } .material-stock-choice__label { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(18, 61, 132, 0.12); background: rgba(18, 61, 132, 0.05); color: var(--ms-text); font-size: 14px; font-weight: 700; line-height: 1.5; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .material-stock-choice__label:hover { transform: translateY(-1px); border-color: rgba(18, 61, 132, 0.18); } .material-stock-choice__input:checked + .material-stock-choice__label { border-color: transparent; background: linear-gradient(135deg, #0d4f9e 0%, #4a97ff 100%); color: #fff; box-shadow: 0 16px 28px rgba(18, 61, 132, 0.16); } .material-stock-choice__input:focus-visible + .material-stock-choice__label { outline: 3px solid rgba(74, 151, 255, 0.26); outline-offset: 2px; } .material-stock-filter-hint { width: 100%; padding: 16px 18px; border-radius: 18px; border: 1px dashed rgba(18, 61, 132, 0.18); background: rgba(18, 61, 132, 0.04); color: var(--ms-muted); font-size: 14px; line-height: 1.8; } .material-stock-legend-inline { display: grid; gap: 10px; margin-top: 18px; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(18, 61, 132, 0.10); background: linear-gradient(180deg, #fbfdff 0%, #f7faff 100%); } .material-stock-legend-inline__title { margin: 0; font-size: 13px; line-height: 1.6; font-weight: 800; color: var(--ms-navy); letter-spacing: 0.04em; } .material-stock-legend-inline__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; padding: 0; margin: 0; list-style: none; } .material-stock-legend-inline__item { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 34px; font-size: 13px; line-height: 1.6; color: var(--ms-text); font-weight: 700; } .material-stock-legend-inline__arrow { color: var(--ms-muted); font-weight: 700; } .material-stock-legend-inline__text { color: var(--ms-text); } .material-stock-legend-inline__note { margin: 0; font-size: 12px; line-height: 1.75; color: var(--ms-muted); } .material-stock-result { margin-top: 18px; padding: 20px; border-radius: 24px; border: 1px solid rgba(18, 61, 132, 0.10); background: #fff; } .material-stock-result__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; align-items: flex-start; margin-bottom: 12px; } .material-stock-result__head h3 { margin: 10px 0 0; font-size: 28px; line-height: 1.4; font-weight: 800; color: var(--ms-text); } .material-stock-result__selected { margin: 10px 0 0; font-size: 14px; line-height: 1.75; color: var(--ms-muted); font-weight: 700; } .material-stock-result__count { display: inline-flex; align-items: center; min-height: 38px; margin: 0; padding: 0 14px; border-radius: 999px; background: rgba(18, 61, 132, 0.06); color: var(--ms-navy); font-size: 13px; font-weight: 800; } .material-stock-result__body { overflow-x: auto; } .material-stock-state { padding: 22px 20px; border-radius: 20px; border: 1px dashed rgba(18, 61, 132, 0.18); background: linear-gradient(180deg, #fbfdff 0%, #f6f9ff 100%); } .material-stock-state h4 { margin: 0; font-size: 20px; line-height: 1.5; font-weight: 800; color: var(--ms-text); } .material-stock-state p { margin: 10px 0 0; font-size: 14px; line-height: 1.9; color: var(--ms-muted); } .material-stock-state--loading { border-style: solid; } .material-stock-state--error { border-color: rgba(179, 63, 63, 0.18); background: linear-gradient(180deg, #fffafa 0%, #fff5f5 100%); } .material-stock-page .material-stock-retry { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 14px; padding: 0 18px; border: 1px solid #0d4f9e; border-radius: 13px; background: #fff; color: #0d4f9e; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .2s ease; } .material-stock-page .material-stock-retry:hover { background: #0d4f9e; color: #fff; transform: translateY(-1px); } .material-stock-page .material-stock-retry:focus-visible, .material-stock-breadcrumb a:focus-visible, .material-stock-action:focus-visible { outline: 3px solid rgba(74, 151, 255, .42); outline-offset: 3px; } .material-stock-table-wrap { overflow-x: auto; } .material-stock-table { width: 100%; min-width: 400px; border-collapse: separate; border-spacing: 0 8px; table-layout: fixed; } .material-stock-table__caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .material-stock-table th, .material-stock-table td { padding: 11px 12px; font-size: 13px; line-height: 1.55; border-top: 1px solid var(--ms-line); border-bottom: 1px solid var(--ms-line); background: #fff; color: var(--ms-text); text-align: center; vertical-align: middle; word-break: break-word; } .material-stock-table th:first-child, .material-stock-table td:first-child { border-left: 1px solid var(--ms-line); border-radius: 12px 0 0 12px; } .material-stock-table th:last-child, .material-stock-table td:last-child { border-right: 1px solid var(--ms-line); border-radius: 0 12px 12px 0; } .material-stock-table thead th { background: var(--ms-navy); color: #fff; border-color: var(--ms-navy); font-weight: 800; } .material-stock-table thead th[data-col="thickness"], .material-stock-table tbody td[data-col="thickness"] { width: 124px; } .material-stock-table thead th[data-col="stock"], .material-stock-table tbody td[data-col="stock"] { width: 92px; } .material-stock-table tbody tr:hover td { background: #f8fbff; } .material-stock-status { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid transparent; background: #f3f7fd; color: var(--ms-text); font-size: 12px; font-weight: 800; line-height: 1.4; } .material-stock-status__mark { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; font-size: 15px; font-weight: 900; line-height: 1; flex: 0 0 auto; } .material-stock-status__label { display: inline-block; } .material-stock-status--compact { justify-content: center; min-width: 34px; min-height: 34px; padding: 0; border-radius: 12px; gap: 0; } .material-stock-status--compact .material-stock-status__mark { width: 100%; height: 100%; border-radius: 11px; font-size: 16px; } .material-stock-status--legend { flex: 0 0 auto; } .material-stock-status--1 { border-color: rgba(13, 79, 158, 0.16); background: rgba(13, 79, 158, 0.08); color: #0d4f9e; } .material-stock-status--1 .material-stock-status__mark { background: #0d4f9e; color: #fff; } .material-stock-status--2 { border-color: rgba(34, 122, 79, 0.16); background: rgba(34, 122, 79, 0.08); color: #227a4f; } .material-stock-status--2 .material-stock-status__mark { background: #227a4f; color: #fff; } .material-stock-status--3 { border-color: rgba(154, 106, 0, 0.18); background: rgba(154, 106, 0, 0.08); color: #9a6a00; } .material-stock-status--3 .material-stock-status__mark { background: #9a6a00; color: #fff; } .material-stock-status--4 { border-color: rgba(179, 63, 63, 0.18); background: rgba(179, 63, 63, 0.08); color: #b33f3f; } .material-stock-status--4 .material-stock-status__mark { background: #b33f3f; color: #fff; } .material-stock-status--unknown { border-color: rgba(97, 114, 135, 0.18); background: rgba(97, 114, 135, 0.08); color: var(--ms-muted); } .material-stock-status--unknown .material-stock-status__mark { background: var(--ms-muted); color: #fff; } .material-stock-note { margin: 18px 0 0; font-size: 13px; line-height: 1.8; color: var(--ms-muted); }   .material-stock-support { padding: 0 0 110px; } .material-stock-support__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 30px; } .material-stock-support-card { padding: 22px 20px; border-radius: 24px; border: 1px solid rgba(18, 61, 132, 0.10); background: #fff; } .material-stock-support-card h3 { margin: 0; font-size: 22px; line-height: 1.45; font-weight: 800; color: var(--ms-text); } .material-stock-support-card p { margin: 14px 0 0; font-size: 14px; line-height: 1.95; color: var(--ms-muted); }   @media (max-width: 1080px) { .material-stock-legend-inline__list { grid-template-columns: 1fr 1fr; } .material-stock-guide__grid, .material-stock-metrics__grid, .material-stock-support__grid, .material-stock-search__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); } .material-stock-steps { grid-template-columns: 1fr; } } @media (max-width: 900px) { .material-stock-guide__grid, .material-stock-metrics__grid, .material-stock-support__grid, .material-stock-search__layout, .material-stock-legend-inline__list { grid-template-columns: 1fr; } } @media (max-width: 767px) { .material-stock-container { width: calc(100% - 24px); } .material-stock-hero__content { padding: 94px 0 72px; } .material-stock-hero__lead { font-size: 16px; line-height: 1.9; } .material-stock-hero__chips { gap: 10px; } .material-stock-hero__chips li { min-height: 42px; padding: 0 14px; font-size: 13px; } .material-stock-section-head__lead { font-size: 15px; line-height: 1.9; } .material-stock-metrics { padding: 68px 0 40px; } .material-stock-guide, .material-stock-search { padding-bottom: 52px; } .material-stock-support { padding-bottom: 76px; } .material-stock-panel, .material-stock-support-panel, .material-stock-metric-card, .material-stock-guide-card, .material-stock-filter-group, .material-stock-legend-inline, .material-stock-result, .material-stock-step, .material-stock-support-card { border-radius: 24px; } .material-stock-panel, .material-stock-support-panel, .material-stock-metric-card, .material-stock-guide-card { padding-left: 20px; padding-right: 20px; } .material-stock-filter-group, .material-stock-legend-inline, .material-stock-result, .material-stock-step, .material-stock-support-card { padding: 20px; } .material-stock-guide-card h3 { font-size: 24px; } .material-stock-filter-group__head h3, .material-stock-result__head h3 { font-size: 24px; } .material-stock-choice__label { min-height: 40px; padding: 0 14px; font-size: 13px; } .material-stock-result__head { align-items: stretch; } .material-stock-result__count { align-self: flex-start; } .material-stock-legend-inline { gap: 12px; padding: 14px 16px; } .material-stock-legend-inline__list { grid-template-columns: 1fr; gap: 8px; } .material-stock-legend-inline__item { font-size: 12px; line-height: 1.55; } .material-stock-table { min-width: 320px; border-spacing: 0 6px; } .material-stock-table th, .material-stock-table td { padding: 9px 10px; font-size: 12px; line-height: 1.45; } .material-stock-table thead th[data-col="thickness"], .material-stock-table tbody td[data-col="thickness"] { width: 104px; } .material-stock-table thead th[data-col="stock"], .material-stock-table tbody td[data-col="stock"] { width: 76px; } .material-stock-status--compact { min-width: 30px; min-height: 30px; border-radius: 10px; } .material-stock-status--compact .material-stock-status__mark { border-radius: 9px; font-size: 15px; } }     .material-stock-legend__table-wrap { max-width: 460px; margin-top: 22px; } .material-stock-legend__table { width: 100%; border-collapse: separate; border-spacing: 0; } .material-stock-legend__table th, .material-stock-legend__table td { padding: 12px 14px; border-top: 1px solid rgba(18, 61, 132, 0.10); border-bottom: 1px solid rgba(18, 61, 132, 0.10); background: #fff; font-size: 14px; line-height: 1.7; } .material-stock-legend__table th { width: 74px; text-align: center; border-left: 1px solid rgba(18, 61, 132, 0.10); font-weight: 900; } .material-stock-legend__table td { border-right: 1px solid rgba(18, 61, 132, 0.10); color: var(--ms-text); font-weight: 700; } .material-stock-legend__table tr:first-child th { border-radius: 16px 0 0 0; } .material-stock-legend__table tr:first-child td { border-radius: 0 16px 0 0; } .material-stock-legend__table tr:last-child th { border-radius: 0 0 0 16px; } .material-stock-legend__table tr:last-child td { border-radius: 0 0 16px 0; } .material-stock-status-text { display: inline-block; font-size: 30px; line-height: 1; font-weight: 900; } .material-stock-status-text--1 { color: #177a3f; } .material-stock-status-text--2 { color: #1c5fb8; } .material-stock-status-text--3 { color: #a36c00; } .material-stock-status-text--4 { color: #b33f3f; }   .material-stock-result__body, .material-stock-table-wrap { overflow-x: visible; } .material-stock-table { width: 100%; min-width: 0; table-layout: fixed; border-spacing: 0 8px; } .material-stock-table th, .material-stock-table td { padding: 11px 10px; } .material-stock-table th:nth-child(1), .material-stock-table td:nth-child(1) { width: 88px; } .material-stock-table th:nth-child(3), .material-stock-table td:nth-child(3) { width: 72px; } .material-stock-table th:nth-child(2), .material-stock-table td:nth-child(2) { white-space: nowrap; } .material-stock-table td[data-stock-cell="true"] { min-width: 72px; padding-left: 6px; padding-right: 6px; }   .material-stock-status { display: inline-flex; align-items: center; justify-content: center; min-height: auto; padding: 0; border: 0; background: transparent; font-size: 30px; font-weight: 900; line-height: 1; gap: 0; } .material-stock-status__mark { width: auto; height: auto; border-radius: 0; background: transparent !important; color: inherit !important; font-size: inherit; font-weight: inherit; line-height: 1; } .material-stock-status__label { display: none; } .material-stock-status--1 { color: #177a3f; } .material-stock-status--2 { color: #1c5fb8; } .material-stock-status--3 { color: #a36c00; } .material-stock-status--4 { color: #b33f3f; } .material-stock-status--unknown { color: #6b7b8d; }   @media (max-width: 767px) { .material-stock-legend__table-wrap { max-width: none; } .material-stock-legend__table th, .material-stock-legend__table td { padding: 10px 12px; font-size: 13px; } .material-stock-legend__table th { width: 60px; } .material-stock-status-text { font-size: 26px; } .material-stock-table { min-width: 0; table-layout: fixed; border-spacing: 0 6px; } .material-stock-table th, .material-stock-table td { padding: 9px 8px; font-size: 12px; line-height: 1.45; } .material-stock-table th:nth-child(1), .material-stock-table td:nth-child(1) { width: 70px; } .material-stock-table th:nth-child(3), .material-stock-table td:nth-child(3) { width: 54px; } .material-stock-table td[data-stock-cell="true"] { min-width: 54px; } .material-stock-status { font-size: 26px; } } .material-stock-legend-inline { margin-top: 22px; } .material-stock-legend-inline__item .material-stock-status-text { display: inline-flex; align-items: center; justify-content: center; min-width: 1.2em; font-size: 24px; line-height: 1; font-weight: 900; } @media (max-width: 767px) { .material-stock-legend-inline__item .material-stock-status-text { font-size: 22px; } }   .material-stock-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; } .material-stock-breadcrumb li { color: rgba(255, 255, 255, .76); font-size: 13px; } .material-stock-breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 8px; color: rgba(255, 255, 255, .34); } .material-stock-breadcrumb a { color: inherit; text-decoration: none; } .material-stock-breadcrumb a:hover { color: #fff; } .material-stock-support__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .material-stock-action { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 14px; font-size: 14px; font-weight: 800; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; } .material-stock-action:hover { transform: translateY(-2px); } .material-stock-action--primary { color: #fff; background: linear-gradient(135deg, #0d4f9e 0%, #4a97ff 100%); box-shadow: 0 14px 26px rgba(18, 61, 132, .18); } .material-stock-action--primary:hover { color: #fff; } .material-stock-action--secondary { border: 1px solid var(--ms-line); color: var(--ms-navy); background: #fff; } .material-stock-action--secondary:hover { color: var(--ms-navy); } @media (min-width: 768px) and (max-width: 900px) { .material-stock-guide__grid, .material-stock-metrics__grid, .material-stock-support__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .material-stock-search__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); } .material-stock-metric-card, .material-stock-guide-card, .material-stock-support-card { padding: 20px 16px; } .material-stock-guide-card h3, .material-stock-support-card h3 { font-size: 18px; } .material-stock-guide-card p, .material-stock-support-card p, .material-stock-metric-card__text { font-size: 13px; line-height: 1.7; } .material-stock-steps { display: none; } } @media (max-width: 767px) { .material-stock-hero__content { padding: 66px 0 30px; } .material-stock-breadcrumb ol { margin-bottom: 18px; } .material-stock-hero__eyebrow { min-height: 30px; padding: 0 11px; font-size: 10px; } .material-stock-hero__title { margin-top: 12px; font-size: clamp(27px, 8vw, 33px); line-height: 1.28; } .material-stock-hero__lead { margin-top: 12px; font-size: 13px; line-height: 1.68; } .material-stock-hero__lead br { display: none; } .material-stock-hero__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 16px; } .material-stock-hero__chips li { justify-content: center; min-height: 32px; padding: 5px 7px; border-radius: 10px; font-size: 10.5px; text-align: center; } .material-stock-section-head__eyebrow { margin-bottom: 7px; font-size: 10px; } .material-stock-section-head__title { font-size: 22px; line-height: 1.4; } .material-stock-section-head__lead { margin-top: 8px; font-size: 12.5px; line-height: 1.65; } .material-stock-metrics { padding: 30px 0 14px; } .material-stock-metrics__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 14px; } .material-stock-metric-card { padding: 12px 5px; border-radius: 13px; } .material-stock-metric-card__label, .material-stock-metric-card__text { display: none; } .material-stock-metric-card__value { margin: 0; font-size: 25px; } .material-stock-metric-card__value span { display: block; margin: 4px 0 0; font-size: 9px; } .material-stock-guide { padding-bottom: 24px; } .material-stock-guide__grid { gap: 7px; } .material-stock-guide-card { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 3px 10px; padding: 12px; border-radius: 13px; } .material-stock-guide-card__tag { grid-row: 1 / span 2; align-self: start; justify-content: center; min-height: 28px; padding: 0 6px; font-size: 9px; } .material-stock-guide-card h3 { margin: 0; font-size: 14px; line-height: 1.4; } .material-stock-guide-card p { margin: 2px 0 0; font-size: 11.5px; line-height: 1.55; } .material-stock-search { padding-bottom: 24px; } .material-stock-panel, .material-stock-support-panel { padding: 18px 12px; border-radius: 16px; } .material-stock-steps { display: none; } .material-stock-search__layout { gap: 9px; margin-top: 15px; } .material-stock-filter-group, .material-stock-result { padding: 13px; border-radius: 13px; } .material-stock-filter-group__head { gap: 7px; } .material-stock-filter-group__step, .material-stock-result__eyebrow { min-height: 26px; padding: 0 8px; font-size: 9px; } .material-stock-filter-group__head h3, .material-stock-result__head h3 { font-size: 17px; } .material-stock-filter-group__lead, .material-stock-result__selected { margin-top: 6px; font-size: 11.5px; line-height: 1.55; } .material-stock-choice-list { gap: 6px; margin-top: 10px; } .material-stock-choice__label { min-height: 34px; padding: 0 11px; font-size: 11.5px; } .material-stock-filter-hint, .material-stock-state { padding: 12px; border-radius: 11px; font-size: 11.5px; line-height: 1.55; } .material-stock-result { margin-top: 10px; } .material-stock-result__head { margin-bottom: 8px; } .material-stock-result__count { min-height: 30px; padding: 0 10px; font-size: 11px; } .material-stock-state h4 { font-size: 15px; } .material-stock-state p { margin-top: 5px; font-size: 11.5px; line-height: 1.55; } .material-stock-legend-inline { gap: 8px; margin-top: 10px; padding: 11px 12px; border-radius: 12px; } .material-stock-legend-inline__title { font-size: 12px; } .material-stock-legend-inline__list { grid-template-columns: 1fr 1fr; gap: 5px 8px; } .material-stock-legend-inline__item { font-size: 10px; } .material-stock-legend-inline__item .material-stock-status-text { font-size: 18px; } .material-stock-legend-inline__note { font-size: 10px; line-height: 1.45; } .material-stock-support { padding-bottom: 44px; } .material-stock-support__grid { gap: 7px; margin-top: 14px; } .material-stock-support-card { padding: 12px; border-radius: 12px; } .material-stock-support-card h3 { font-size: 14px; } .material-stock-support-card p { margin-top: 4px; font-size: 11.5px; line-height: 1.55; } .material-stock-support__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 14px; } .material-stock-action { min-height: 44px; padding: 5px 8px; font-size: 11.5px; line-height: 1.35; text-align: center; } } @media (max-width: 359px) { .material-stock-hero__chips, .material-stock-legend-inline__list { grid-template-columns: 1fr; } }   .material-stock-search { position: relative; padding-top: 42px; background: linear-gradient(180deg, rgba(231, 241, 255, .55) 0%, rgba(245, 249, 255, .92) 100%); border-top: 1px solid rgba(74, 151, 255, .14); border-bottom: 1px solid rgba(18, 61, 132, .08); } .material-stock-panel--interactive { position: relative; overflow: hidden; border: 1px solid rgba(74, 151, 255, .30); background: #fff; box-shadow: 0 26px 58px rgba(18, 61, 132, .13); } .material-stock-panel--interactive::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg, #0d4f9e 0%, #2f7de1 48%, #64b7ff 100%); } .material-stock-panel--interactive > .material-stock-section-head { padding-top: 6px; } .material-stock-interactive-cue { display: flex; align-items: center; gap: 14px; max-width: 900px; margin: 26px auto 0; padding: 14px 16px; border-radius: 17px; background: linear-gradient(135deg, #0b3b79 0%, #1768bd 58%, #3a91e8 100%); color: #fff; box-shadow: 0 16px 30px rgba(18, 61, 132, .18); } .material-stock-interactive-cue__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); font-size: 18px; } .material-stock-interactive-cue__copy { flex: 1; min-width: 0; } .material-stock-interactive-cue__copy strong, .material-stock-interactive-cue__copy span { display: block; } .material-stock-interactive-cue__copy strong { font-size: 15px; font-weight: 800; line-height: 1.45; } .material-stock-interactive-cue__copy span { margin-top: 3px; color: rgba(255, 255, 255, .82); font-size: 12px; line-height: 1.55; } .material-stock-interactive-cue__badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 34px; padding: 0 12px; border-radius: 999px; background: #fff; color: #0d4f9e; font-size: 11px; font-weight: 900; white-space: nowrap; } .material-stock-panel--interactive .material-stock-steps { gap: 0; overflow: hidden; border: 1px solid rgba(18, 61, 132, .11); border-radius: 18px; background: #f4f8fd; } .material-stock-panel--interactive .material-stock-step { border: 0; border-radius: 0; background: transparent; box-shadow: none; } .material-stock-panel--interactive .material-stock-step + .material-stock-step { border-left: 1px solid rgba(18, 61, 132, .11); } .material-stock-panel--interactive .material-stock-filter-group { position: relative; border: 2px solid #c5dafa; background: linear-gradient(180deg, #fff 0%, #f7fbff 100%); box-shadow: 0 12px 26px rgba(18, 61, 132, .08); } .material-stock-panel--interactive .material-stock-filter-group::before { content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 3px; border-radius: 0 0 999px 999px; background: linear-gradient(90deg, #1768bd, #64b7ff); } .material-stock-panel--interactive .material-stock-filter-group__step { background: #0d4f9e; color: #fff; box-shadow: 0 8px 16px rgba(13, 79, 158, .18); } .material-stock-panel--interactive .material-stock-choice { display: flex; } .material-stock-panel--interactive .material-stock-choice__label { gap: 9px; min-height: 46px; padding: 0 17px 0 13px; border: 1.5px solid #9dbce8; background: #fff; color: #173a65; font-weight: 800; box-shadow: 0 5px 12px rgba(18, 61, 132, .09); } .material-stock-panel--interactive .material-stock-choice__label::before { content: ""; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 17px; height: 17px; border: 2px solid #6e9bd5; border-radius: 50%; background: #fff; color: #0d4f9e; font-size: 10px; font-weight: 900; line-height: 1; } .material-stock-panel--interactive .material-stock-choice__label:hover { transform: translateY(-2px); border-color: #2f7de1; background: #f0f7ff; box-shadow: 0 9px 18px rgba(18, 61, 132, .15); } .material-stock-panel--interactive .material-stock-choice__label:active { transform: translateY(0) scale(.98); } .material-stock-panel--interactive .material-stock-choice__input:checked + .material-stock-choice__label { border-color: #0d4f9e; background: linear-gradient(135deg, #0d4f9e 0%, #2e80dd 100%); color: #fff; box-shadow: 0 12px 24px rgba(13, 79, 158, .24); } .material-stock-panel--interactive .material-stock-choice__input:checked + .material-stock-choice__label::before { content: "✓"; border-color: #fff; background: #fff; color: #0d4f9e; } .material-stock-panel--interactive .material-stock-choice__input:focus-visible + .material-stock-choice__label { outline: 3px solid rgba(74, 151, 255, .38); outline-offset: 3px; } .material-stock-panel--interactive .material-stock-filter-hint { border-color: #a9c6ee; background: #f1f6fd; } .material-stock-panel--interactive .material-stock-result { border: 1px solid #b8cfee; background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%); box-shadow: inset 0 4px 0 rgba(47, 125, 225, .55); } .material-stock-panel--interactive .material-stock-result__eyebrow { background: #e0edff; color: #0d4f9e; } @media (max-width: 900px) { .material-stock-panel--interactive .material-stock-step + .material-stock-step { border-left: 0; border-top: 1px solid rgba(18, 61, 132, .11); } } @media (max-width: 767px) { .material-stock-search { padding-top: 20px; } .material-stock-panel--interactive::before { height: 4px; } .material-stock-interactive-cue { gap: 9px; margin-top: 13px; padding: 10px; border-radius: 12px; } .material-stock-interactive-cue__icon { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; } .material-stock-interactive-cue__copy strong { font-size: 12px; } .material-stock-interactive-cue__copy span { font-size: 10px; line-height: 1.45; } .material-stock-interactive-cue__badge { display: none; } .material-stock-panel--interactive .material-stock-filter-group { border-width: 1.5px; } .material-stock-panel--interactive .material-stock-filter-group::before { left: 12px; right: 12px; height: 2px; } .material-stock-panel--interactive .material-stock-choice__label { gap: 6px; min-height: 44px; padding: 0 11px 0 9px; border-width: 1px; font-size: 11.5px; box-shadow: 0 3px 8px rgba(18, 61, 132, .09); } .material-stock-panel--interactive .material-stock-choice__label::before { width: 14px; height: 14px; border-width: 1.5px; font-size: 8px; } } @media (prefers-reduced-motion: reduce) { .material-stock-page .material-stock-retry, .material-stock-action, .material-stock-panel--interactive .material-stock-choice__label { transition: none; } .material-stock-page .material-stock-retry:hover, .material-stock-action:hover, .material-stock-panel--interactive .material-stock-choice__label:hover, .material-stock-panel--interactive .material-stock-choice__label:active { transform: none; } }