.hub-page { padding: 1rem 0 1.75rem; background: #fff; color: #111315; }
.hub-page .container { width: min(84.5rem, calc(100% - 5.5rem)); }
.hub-breadcrumbs { display: flex; gap: 0.4375rem; margin-bottom: 1.375rem; color: #92959a; font-size: 0.6875rem; }
.hub-breadcrumbs a:hover { color: #ff5c0a; }
.hub-heading { margin-bottom: 1.875rem; }
.hub-heading h1 { margin: 0; font-size: 2.5rem; line-height: 1.08; letter-spacing: -0.09375rem; }
.hub-heading p { margin: 0.5rem 0 0; color: #85888d; font-size: 0.875rem; }
.hub-notice { margin: -0.625rem 0 1.125rem; padding: 0.8125rem 1rem; border-radius: 0.5625rem; background: #e9f8ed; color: #177b38; font-size: 0.75rem; }
.hub-info { margin-top: 1.75rem; padding: 1.5rem; border-radius: 0.875rem; background: #f8f6f2; }
.hub-info h2 { margin: 0 0 0.625rem; font-size: 1.25rem; }
.hub-info p { max-width: 62.5rem; margin: 0; color: #7c7f84; font-size: 0.75rem; line-height: 1.5; }
.hub-cta { display: flex; min-height: 7.875rem; align-items: center; justify-content: space-between; gap: 1.875rem; margin-top: 1.75rem; padding: 1.625rem 1.875rem; border-radius: 0.875rem; background: #101112; color: #fff; }
.hub-cta h2 { margin: 0; font-size: 1.4375rem; }
.hub-cta p { margin: 0.4375rem 0 0; color: #aeb1b5; font-size: 0.75rem; }
.hub-cta .button { flex: 0 0 auto; min-width: 11.25rem; min-height: 2.875rem; border: 0; border-radius: 0.5rem; background: #ff5c0a; color: #fff; }

.reviews-summary { display: grid; grid-template-columns: 15.625rem 1fr auto; align-items: center; gap: 1.875rem; padding: 1.625rem 1.875rem; border: 0.0625rem solid #e4e2de; border-radius: 0.875rem; background: #fff; box-shadow: 0 0.3125rem 1.125rem rgba(0,0,0,.025); }
.reviews-summary > div { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.75rem; }
.reviews-summary > div strong { grid-row: span 2; font-size: 3.25rem; line-height: 1; }
.reviews-summary > div span { color: #ff5c0a; letter-spacing: 0.125rem; }
.reviews-summary > div small { color: #92959a; font-size: 0.625rem; }
.reviews-summary p { margin: 0; color: #777a80; font-size: 0.75rem; line-height: 1.5; }
.reviews-summary p b { color: #17191c; font-size: 1rem; }
.reviews-summary .button { min-width: 10.875rem; min-height: 2.75rem; border: 0; border-radius: 0.4375rem; }
.reviews-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; margin: 1.625rem 0 1.125rem; }
.reviews-toolbar > div, .article-filters { display: flex; flex-wrap: wrap; gap: 0.5625rem; }
.reviews-toolbar button, .article-filters button { min-height: 2.375rem; padding: 0 1.125rem; border: 0.0625rem solid #e2e0dc; border-radius: 1.375rem; background: #f8f7f4; color: #33363a; font-size: 0.6875rem; cursor: pointer; }
.reviews-toolbar button.is-active, .article-filters button.is-active { border-color: #ffd2bf; background: #fff0e9; color: #ff5c0a; font-weight: 800; }
.reviews-toolbar select, .articles-title select { width: 11.25rem; height: 2.5rem; padding: 0 0.75rem; border: 0.0625rem solid #dedcd8; border-radius: 0.5rem; background: #fff; color: #33363a; font-size: 0.6875rem; }
.reviews-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.review-card { display: flex; min-height: 13.75rem; flex-direction: column; padding: 1.25rem; border: 0.0625rem solid #e5e3df; border-radius: 0.75rem; background: #fff; }
.review-card[hidden] { display: none; }
.review-card header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.review-card header strong { font-size: 0.8125rem; }
.review-card header span { color: #ff5c0a; font-size: 0.6875rem; letter-spacing: 0.0625rem; }
.review-card__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.review-card__meta b { padding: 0.3125rem 0.5625rem; border-radius: 0.75rem; background: #fff0e9; color: #ff5c0a; font-size: 0.5625rem; }
.review-card__meta em { color: #2aa654; font-size: 0.5625rem; font-style: normal; }
.review-card p { margin: 1.125rem 0; color: #53575d; font-size: 0.6875rem; line-height: 1.55; }
.review-card time { margin-top: auto; color: #a0a2a6; font-size: 0.5625rem; }
.review-dialog { width: min(32.5rem, calc(100% - 2rem)); padding: 0; border: 0; border-radius: 0.875rem; box-shadow: 0 1.5rem 5rem rgba(0,0,0,.28); }
.review-dialog::backdrop { background: rgba(0,0,0,.55); }
.review-form { position: relative; display: grid; gap: 0.75rem; padding: 1.75rem; }
.review-form h2 { margin: 0; font-size: 1.75rem; }
.review-form > p { margin: -0.4375rem 0 0.3125rem; color: #7e8186; font-size: 0.75rem; }
.review-form label { display: grid; gap: 0.375rem; color: #55595f; font-size: 0.6875rem; }
.review-form input, .review-form select, .review-form textarea { width: 100%; padding: 0.75rem; border: 0.0625rem solid #dedcd8; border-radius: 0.4375rem; background: #fff; font: inherit; }
.review-form .button { min-height: 2.875rem; border: 0; }
.review-dialog__close { position: absolute; top: 0.75rem; right: 0.75rem; width: 2.125rem; height: 2.125rem; border: 0; border-radius: 50%; background: #f4f2ef; font-size: 1.375rem; cursor: pointer; }

.article-filters { margin: -0.3125rem 0 1.5rem; }
.article-feature { display: grid; min-height: 20.625rem; grid-template-columns: 1.02fr .98fr; overflow: hidden; border: 0.0625rem solid #e4e2de; border-radius: 0.875rem; background: #fbfaf8; }
.article-feature > div { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 2.625rem; }
.article-feature span, .article-card span { color: #ff5c0a; font-size: 0.625rem; font-weight: 800; }
.article-feature h2 { max-width: 34.375rem; margin: 0.8125rem 0; font-size: 1.875rem; line-height: 1.14; }
.article-feature p { max-width: 35rem; margin: 0 0 1.375rem; color: #777a80; font-size: 0.75rem; line-height: 1.55; }
.article-feature .button { min-height: 2.625rem; border: 0; border-radius: 0.4375rem; }
.article-feature img { width: 100%; height: 100%; object-fit: cover; }
.articles-title { display: flex; align-items: center; justify-content: space-between; margin: 1.875rem 0 1rem; }
.articles-title h2 { margin: 0; font-size: 1.5625rem; }
.articles-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.article-card { overflow: hidden; border: 0.0625rem solid #e5e3df; border-radius: 0.75rem; background: #fff; }
.article-card[hidden], .article-feature[hidden] { display: none; }
.article-card__image { display: grid; height: 13.125rem; place-items: center; overflow: hidden; background: #f8f7f4; }
.article-card__image img { width: 100%; height: 100%; object-fit: contain; }
.article-card > div { padding: 1.125rem; }
.article-card h3 { min-height: 2.875rem; margin: 0.5625rem 0; font-size: 1rem; line-height: 1.35; }
.article-card p { min-height: 3.25rem; margin: 0 0 0.9375rem; color: #7a7d82; font-size: 0.6875rem; line-height: 1.5; }
.article-card__more { color: #ff5c0a; font-size: 0.6875rem; font-weight: 800; }

.model-wizard { padding: 1.75rem; border: 0.0625rem solid #e4e2de; border-radius: 0.875rem; background: #fff; box-shadow: 0 0.3125rem 1.125rem rgba(0,0,0,.025); }
.model-wizard__steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.625rem; margin: 0 0 1.875rem; padding: 0; list-style: none; }
.model-wizard__steps li { display: flex; min-height: 3rem; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: #f7f5f2; color: #999ca1; font-size: 0.6875rem; }
.model-wizard__steps b { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: 50%; background: #e9e7e3; color: #74777d; }
.model-wizard__steps li.is-active { background: #fff0e9; color: #ff5c0a; font-weight: 800; }
.model-wizard__steps li.is-active b { background: #ff5c0a; color: #fff; }
.model-wizard__steps li.is-complete b { background: #1faa52; color: #fff; }
.model-wizard__panel > header { margin-bottom: 1.375rem; }
.model-wizard__panel > header > span { color: #ff5c0a; font-size: 0.625rem; font-weight: 800; }
.model-wizard__panel h2 { margin: 0.4375rem 0; font-size: 1.5625rem; }
.model-wizard__panel header p { margin: 0; color: #85888d; font-size: 0.6875rem; }
.model-choice-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.875rem; }
.model-choice-grid button { display: flex; min-height: 15rem; flex-direction: column; align-items: flex-start; padding: 0.875rem; overflow: hidden; border: 0.0625rem solid #e5e3df; border-radius: 0.6875rem; background: #fff; text-align: left; cursor: pointer; }
.model-choice-grid button:hover, .model-choice-grid button:focus-visible, .wizard-choice-grid button:hover, .modification-grid button:hover { border-color: #ff5c0a; }
.model-choice-grid img { width: 100%; height: 10rem; object-fit: contain; }
.model-choice-grid strong { margin-top: 0.5rem; font-size: 0.875rem; }
.model-choice-grid small { margin-top: 0.3125rem; color: #8c8f94; font-size: 0.5625rem; }
.wizard-choice-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.75rem; }
.wizard-choice-grid button { min-height: 4.5rem; border: 0.0625rem solid #e4e2de; border-radius: 0.5625rem; background: #fff; font-size: 0.875rem; font-weight: 800; cursor: pointer; }
.modification-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 0.75rem; }
.modification-grid button { display: flex; min-height: 5.875rem; flex-direction: column; justify-content: center; padding: 1.125rem; border: 0.0625rem solid #e4e2de; border-radius: 0.5625rem; background: #fff; text-align: left; cursor: pointer; }
.modification-grid b { font-size: 0.875rem; }
.modification-grid span { margin-top: 0.3125rem; color: #85888d; font-size: 0.625rem; }
.wizard-back { margin-top: 1.25rem; padding: 0; border: 0; background: transparent; color: #74777d; font-size: 0.6875rem; cursor: pointer; }
.wizard-results { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.75rem; }
.wizard-results a { position: relative; min-height: 6.25rem; padding: 1.125rem 2.625rem 1.125rem 1.125rem; border: 0.0625rem solid #e4e2de; border-radius: 0.625rem; }
.wizard-results b, .wizard-results span { display: block; }
.wizard-results b { font-size: 0.875rem; }
.wizard-results span { margin-top: 0.4375rem; color: #85888d; font-size: 0.625rem; }
.wizard-results em { position: absolute; top: 1.125rem; right: 1.125rem; color: #ff5c0a; font-size: 1.125rem; font-style: normal; }
.wizard-catalog-link { display: inline-flex; min-width: 11.25rem; min-height: 2.75rem; margin-top: 1.25rem; border: 0; border-radius: 0.4375rem; }
.wizard-result-actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 1.25rem; }
.wizard-result-actions .wizard-catalog-link,
.wizard-result-actions .wizard-back { margin-top: 0; }
.wizard-result-actions .wizard-back { font-size: 0.8125rem; }
.wizard-next { margin-top: 1.75rem; }
.wizard-next h2 { margin: 0 0 0.875rem; font-size: 1.375rem; }
.wizard-next > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.875rem; }
.wizard-next article { display: grid; grid-template-columns: 2.375rem 1fr; min-height: 6.25rem; padding: 1.125rem; border: 0.0625rem solid #e4e2de; border-radius: 0.6875rem; }
.wizard-next article b { display: grid; grid-row: span 2; width: 1.875rem; height: 1.875rem; place-items: center; border-radius: 0.5rem; background: #fff0e9; color: #ff5c0a; }
.wizard-next article strong { font-size: 0.75rem; }
.wizard-next article span { color: #85888d; font-size: 0.625rem; line-height: 1.4; }

@media (max-width: 1199px) {
  .hub-page .container { width: min(45rem, calc(100% - 3rem)); }
  .hub-heading h1 { font-size: 2rem; }
  .reviews-summary { grid-template-columns: 11.875rem 1fr; }
  .reviews-summary .button { grid-column: 1 / -1; width: 11.875rem; }
  .reviews-grid, .articles-grid { grid-template-columns: repeat(2,1fr); }
  .article-feature { min-height: 18.125rem; }
  .article-feature > div { padding: 1.75rem; }
  .article-feature h2 { font-size: 1.5rem; }
  .model-choice-grid { grid-template-columns: repeat(2,1fr); }
  .wizard-results { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 767px) {
  .hub-page { padding: 1.625rem 0 1.5rem; overflow: hidden; }
  .hub-page .container { width: calc(100% - 2rem); }
  .hub-breadcrumbs { display: none; }
  .hub-heading { margin-bottom: 1.375rem; }
  .hub-heading h1 { font-size: 1.8125rem; letter-spacing: -0.05rem; }
  .hub-heading p { font-size: 0.6875rem; line-height: 1.5; }
  .hub-info { margin-top: 1.125rem; padding: 1.125rem 1rem; }
  .hub-info h2 { font-size: 1.1875rem; }
  .hub-info p { font-size: 0.625rem; }
  .hub-cta { align-items: flex-start; flex-direction: column; gap: 1.125rem; margin-top: 1.125rem; padding: 1.375rem 1.125rem; }
  .hub-cta h2 { font-size: 1.25rem; }
  .hub-cta p { font-size: 0.625rem; }
  .hub-cta .button { width: 100%; }
  .reviews-summary { display: flex; align-items: flex-start; flex-direction: column; gap: 1.125rem; padding: 1.25rem 1rem; }
  .reviews-summary > div strong { font-size: 2.75rem; }
  .reviews-summary .button { width: 100%; }
  .reviews-toolbar { align-items: flex-start; flex-direction: column; margin: 1.125rem 0 0.875rem; }
  .reviews-toolbar > div { flex-wrap: nowrap; width: calc(100% + 1rem); padding-right: 1rem; overflow-x: auto; }
  .reviews-toolbar button { flex: 0 0 auto; }
  .reviews-toolbar select { width: 100%; }
  .reviews-grid { grid-template-columns: 1fr; gap: 0.625rem; }
  .review-card { min-height: 11.875rem; padding: 1rem; }
  .review-form { padding: 1.5rem 1.125rem; }
  .article-filters { flex-wrap: nowrap; width: calc(100% + 1rem); padding-right: 1rem; overflow-x: auto; }
  .article-filters button { flex: 0 0 auto; }
  .article-feature { grid-template-columns: 1fr; }
  .article-feature > div { padding: 1.375rem 1.125rem; }
  .article-feature h2 { font-size: 1.4375rem; }
  .article-feature p { font-size: 0.625rem; }
  .article-feature img { height: 13.75rem; grid-row: 1; }
  .articles-title { margin-top: 1.375rem; }
  .articles-title h2 { font-size: 1.3125rem; }
  .articles-title select { width: 9.0625rem; }
  .articles-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .article-card__image { height: 11.875rem; }
  .article-card h3, .article-card p { min-height: 0; }
  .model-wizard { padding: 1rem; }
  .model-wizard__steps { grid-template-columns: repeat(2,1fr); gap: 0.4375rem; margin-bottom: 1.375rem; }
  .model-wizard__steps li { min-height: 2.6875rem; padding: 0.375rem 0.5rem; }
  .model-wizard__steps b { width: 1.5625rem; height: 1.5625rem; }
  .model-wizard__panel h2 { font-size: 1.3125rem; }
  .model-choice-grid { grid-template-columns: repeat(2,1fr); gap: 0.5rem; }
  .model-choice-grid button { min-height: 11.25rem; padding: 0.5625rem; }
  .model-choice-grid img { height: 6.75rem; }
  .model-choice-grid strong { font-size: 0.6875rem; }
  .model-choice-grid small { font-size: 0.5rem; }
  .wizard-choice-grid { grid-template-columns: repeat(2,1fr); gap: 0.5rem; }
  .wizard-choice-grid button { min-height: 3.875rem; font-size: 0.75rem; }
  .modification-grid { grid-template-columns: 1fr; gap: 0.5rem; }
  .wizard-results { grid-template-columns: 1fr; gap: 0.5rem; }
  .wizard-results a { min-height: 5.125rem; }
  .wizard-catalog-link { width: 100%; }
  .wizard-result-actions { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .wizard-next > div { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* Review dialog — shared by the reviews hub and product pages. */
.review-dialog { width: min(41.25rem, calc(100% - 2rem)); max-height: calc(100dvh - 2.5rem); padding: 0; overflow: auto; border: 0; border-radius: 1rem; background: #fff; color: #17191c; box-shadow: 0 1.5rem 5rem rgba(0,0,0,.28); }
.review-dialog::backdrop { background: rgba(18,19,20,.56); }
.review-form { position: relative; display: grid; gap: 0.875rem; padding: 1.5625rem 1.5rem 1.6875rem; }
.review-form h2 { margin: 0; font-size: 1.75rem; line-height: 1.15; }
.review-form > p:first-of-type { margin: -0.5rem 2.25rem 0.8125rem 0; color: #7c8086; font-size: 0.75rem; line-height: 1.45; }
.review-dialog__close { position: absolute; z-index: 2; top: 1.0625rem; right: 1.25rem; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; background: transparent; color: #71767d; font-size: 1.375rem; cursor: pointer; }
.review-rating { margin: 0; padding: 0; border: 0; }
.review-rating legend { margin-bottom: 0.5rem; font-size: 0.6875rem; font-weight: 600; }
.review-rating div { display: flex; gap: 0.125rem; }
.review-rating input { position: absolute !important; width: 0.0625rem !important; height: 0.0625rem !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; }
.review-rating label { color: #ff570d; cursor: pointer; font-size: 1.875rem; line-height: 1; }
.review-rating label:not(.is-selected) { color: #ff570d; }
.review-form__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0.625rem 0.875rem; }
.review-form label { display: grid; gap: 0.375rem; color: #25272a; font-size: 0.6875rem; font-weight: 600; }
.review-form input:not([type=radio]), .review-form textarea { box-sizing: border-box; width: 100%; min-height: 2.875rem; padding: 0 0.75rem; border: 0.0625rem solid #ddd9d3; border-radius: 0.5rem; background: #fff; color: #17191c; font: inherit; font-weight: 400; }
.review-form textarea { min-height: 8.125rem; padding-top: 0.75rem; resize: vertical; }
.review-form__consent { margin: 0.125rem 0 0.8125rem !important; color: #8a8e94 !important; font-size: 0.625rem !important; }
.review-form__actions { display: flex; gap: 0.875rem; }
.review-form__actions .button { min-width: 11.25rem; min-height: 2.875rem; border-radius: 0.5rem; }
.review-form__actions .button--outline { min-width: 8.125rem; border-color: #ddd9d3; color: #17191c; }
.review-form > small { color: #8a8e94; font-size: 0.5625rem; }

@media (max-width: 767px) {
  .review-dialog { width: 100%; max-width: none; max-height: calc(100dvh - 8.75rem); margin: 8.75rem 0 0; border-radius: 1rem 1rem 0 0; }
  .review-form { gap: 0.625rem; padding: 1.5625rem 1.125rem 1.25rem; }
  .review-form h2 { font-size: 1.5625rem; }
  .review-form > p:first-of-type { margin-bottom: 0.4375rem; font-size: 0.75rem; }
  .review-form__grid { grid-template-columns: 1fr; gap: 0.5rem; }
  .review-form textarea { min-height: 5.75rem; }
  .review-form__actions .button { width: 100%; }
  .review-form__actions .button--outline, .review-form > small { display: none; }
}