/* Help and sizing pages follow the supplied Lovable page references. */
body[data-page="support"],
body[data-page="size-guide"] { background: oklch(.985 .003 80); }

.hh-support,
.hh-size-guide {
  --reference-primary: oklch(.58 .16 47);
  --reference-cream: oklch(.98 .015 70);
  --reference-line: oklch(.925 .004 265);
  --reference-muted: oklch(.47 .01 250);
  --reference-carbon: oklch(.19 .005 250);
  color: var(--reference-carbon);
  font-family: var(--body);
}

.hh-reference-container { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: 24px; }
.hh-reference-hero { border-bottom: 1px solid var(--reference-line); color: oklch(.97 .005 80); background: var(--reference-carbon); }
.hh-reference-hero .hh-reference-container { padding-block: 56px; }
.hh-reference-hero__kicker { margin: 0; color: var(--reference-primary); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .2em; text-transform: uppercase; }
.hh-reference-hero h1 { margin: 0; font: 700 48px/1 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.hh-reference-hero__copy { max-width: 672px; margin: 8px 0 0; color: oklch(.97 .005 80 / .75); font-size: 16px; line-height: 24px; }

.hh-support__content { padding-block: 40px; }
.hh-support__search { position: relative; width: min(576px, 100%); margin: 0 auto; }
.hh-support__search > i { position: absolute; top: 50%; left: 13px; transform: translateY(-50%); color: var(--reference-muted); font-size: 14px; pointer-events: none; }
.hh-support__search input { width: 100%; height: 48px; padding: 0 36px; border: 1px solid oklch(.88 .005 265); border-radius: 8px; color: var(--reference-carbon); background: transparent; box-shadow: 0 1px 2px rgba(21,23,25,.12); font: 400 14px/20px var(--body); }
.hh-support__search input::placeholder { color: var(--reference-muted); opacity: 1; }
.hh-support__search input:focus { border-color: var(--reference-primary); outline: 2px solid oklch(.58 .16 47 / .2); outline-offset: 1px; }
.hh-support__categories { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.hh-support__categories button { min-height: 40px; padding: 0 16px; border: 1px solid var(--reference-line); border-radius: 8px; color: var(--reference-carbon); background: #fff; font: 600 14px/20px var(--body); }
.hh-support__categories button:hover { border-color: var(--reference-primary); }
.hh-support__categories button[aria-pressed="true"] { border-color: var(--reference-primary); color: #fff; background: var(--reference-primary); }
.hh-support__faq { width: min(768px, 100%); margin: 24px auto 0; padding-inline: 20px; overflow: hidden; border: 1px solid var(--reference-line); border-radius: 12px; background: #fff; }
.hh-support__faq details { border-bottom: 1px solid var(--reference-line); scroll-margin-top: 20px; }
.hh-support__faq details:last-of-type { border-bottom: 0; }
.hh-support__faq details[hidden] { display: none; }
.hh-support__faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding-block: 16px; list-style: none; cursor: pointer; color: var(--reference-carbon); font-size: 14px; font-weight: 500; line-height: 20px; }
.hh-support__faq summary::-webkit-details-marker { display: none; }
.hh-support__faq summary > i { flex-shrink: 0; margin-right: 2px; color: var(--reference-muted); font-size: 11px; transition: transform .2s ease; }
.hh-support__faq details[open] summary > i { transform: rotate(180deg); }
.hh-support__faq details > p { margin: 0; padding: 0 24px 16px 0; color: var(--reference-muted); font-size: 14px; line-height: 1.6; }
.hh-support__faq a { color: var(--reference-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hh-support__faq-empty { margin: 0; padding-block: 32px; text-align: center; color: var(--reference-muted); font-size: 14px; line-height: 1.6; }
.hh-support__quick-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(768px, 100%); margin: 24px auto 0; }
.hh-support__quick-links a { display: flex; justify-content: center; align-items: center; min-height: 56px; padding: 10px; border: 1px solid var(--reference-line); border-radius: 8px; background: #fff; color: var(--reference-carbon); text-align: center; font-size: 14px; font-weight: 600; line-height: 20px; }
.hh-support__quick-links a:hover { border-color: var(--reference-primary); color: var(--reference-primary); }

.hh-size-guide__content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding-block: 40px; }
.hh-size-guide__measure { min-width: 0; }
.hh-size-guide__illustration { display: flex; align-items: center; justify-content: center; min-height: 242px; padding: 24px; border: 1px solid var(--reference-line); border-radius: 12px; background: var(--reference-cream); }
.hh-size-guide__illustration img { height: 192px; width: auto; }
.hh-size-guide__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.hh-size-guide__step { min-width: 0; min-height: 130px; padding: 12px; border: 1px solid var(--reference-line); border-radius: 10px; background: var(--reference-cream); }
.hh-size-guide__step-number { display: block; color: var(--reference-primary); font: 700 30px/36px var(--display); letter-spacing: .01em; }
.hh-size-guide__step strong { display: block; color: var(--reference-carbon); font-size: 14px; font-weight: 600; line-height: 20px; }
.hh-size-guide__step p { margin: 0; color: var(--reference-muted); font-size: 12px; line-height: 16px; }
.hh-size-guide__fit-title { margin: 20px 0 0; font: 700 24px/32px var(--display); letter-spacing: .01em; text-transform: uppercase; }
.hh-size-guide__fit-list { margin: 20px 0 0; padding-left: 20px; color: var(--reference-muted); font-size: 14px; line-height: 20px; }
.hh-size-guide__fit-list li + li { margin-top: 4px; }
.hh-size-guide__chart { min-width: 0; }
.hh-size-guide__units { display: inline-flex; align-items: stretch; gap: 0; min-height: 46px; margin-bottom: 12px; padding: 4px; border: 1px solid var(--reference-line); border-radius: 8px; }
.hh-size-guide__units button { min-width: 56px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 4px; color: var(--reference-muted); background: transparent; font-size: 14px; font-weight: 600; line-height: 20px; }
.hh-size-guide__units button[aria-pressed="true"] { color: #fff; background: var(--reference-carbon); }
.hh-size-guide__units button:hover:not([aria-pressed="true"]) { background: #eee; }
.hh-size-guide__table-wrap { width: 100%; overflow: hidden; border: 1px solid var(--reference-line); border-radius: 10px; }
.hh-size-guide__table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; line-height: 20px; }
.hh-size-guide__table th, .hh-size-guide__table td { height: 37px; padding: 8px 12px; border: 0; }
.hh-size-guide__table thead { background: oklch(.965 .003 265); }
.hh-size-guide__table thead th { color: var(--reference-carbon); font-weight: 700; text-transform: none; letter-spacing: 0; }
.hh-size-guide__table th:first-child { width: 21%; }
.hh-size-guide__table tbody tr { border-top: 1px solid var(--reference-line); }
.hh-size-guide__table tbody th { color: var(--reference-carbon); font-weight: 600; }
.hh-size-guide__table td { color: var(--reference-carbon); }
.hh-size-guide__note { margin: 8px 0 0; color: var(--reference-muted); font-size: 12px; line-height: 16px; }
.hh-size-guide__brand-note { margin: 16px 0 0; padding: 8px 12px; border: 1px dashed var(--reference-line); border-radius: 8px; color: var(--reference-muted); background: var(--reference-cream); font-size: 12px; line-height: 16px; }
.hh-size-guide__shop { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 16px; padding: 0 20px; border: 1px solid transparent; border-radius: 8px; color: #fff; background: var(--reference-primary); font-size: 14px; font-weight: 600; line-height: 20px; }
.hh-size-guide__shop:hover { color: #fff; background: oklch(.5 .15 42); }

@media (max-width: 1023px) {
  .hh-size-guide__content { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .hh-reference-container { padding-inline: 16px; }
  .hh-reference-hero .hh-reference-container { padding-block: 40px; }
  .hh-reference-hero h1 { font-size: 36px; line-height: 40px; }
  .hh-reference-hero__copy { font-size: 14px; line-height: 20px; }
}

@media (max-width: 639px) {
  .hh-support__categories button { padding-inline: 12px; }
  .hh-support__quick-links { grid-template-columns: minmax(0, 1fr); }
  .hh-size-guide__steps { grid-template-columns: minmax(0, 1fr); }
  .hh-size-guide__step { min-height: 0; }
}
body[data-page="size-guide"] .hh-size-guide__table th,
body[data-page="size-guide"] .hh-size-guide__table td { font-size: 14px; }

/* Optional handbook moved from the homepage; the primary measuring guide stays unchanged. */
.hh-size-guide__handbook { margin: 0 0 40px; border: 1px solid var(--reference-line); border-radius: 12px; background: #fff; overflow: hidden; }
.hh-size-guide__handbook > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 88px; padding: 20px 24px; list-style: none; cursor: pointer; }
.hh-size-guide__handbook > summary::-webkit-details-marker { display: none; }
.hh-size-guide__handbook > summary:focus-visible { outline: 3px solid var(--reference-primary); outline-offset: -3px; }
.hh-size-guide__handbook summary small { display: block; margin-bottom: 5px; color: var(--reference-muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.hh-size-guide__handbook summary strong { display: block; color: var(--reference-carbon); font: 700 28px/1.15 var(--display); text-transform: uppercase; }
.hh-size-guide__handbook-toggle { color: var(--reference-primary); font-size: 26px; line-height: 1; transition: transform .15s ease; }
.hh-size-guide__handbook[open] .hh-size-guide__handbook-toggle { transform: rotate(45deg); }
.hh-size-guide__handbook-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; padding: 0 24px 24px; }
.hh-size-guide__handbook-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; grid-column: 1 / -1; }
.hh-size-guide__handbook-intro p { margin: 0; color: var(--reference-muted); font-size: 14px; line-height: 1.6; }
.hh-size-guide__handbook a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--reference-primary); font-size: 13px; font-weight: 600; text-underline-offset: 4px; }
.hh-size-guide__handbook a:hover { text-decoration: underline; }
.hh-size-guide__handbook figure { min-width: 0; align-self: start; margin: 0; overflow: hidden; border: 1px solid var(--reference-line); border-radius: 8px; }
.hh-size-guide__handbook figure img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.hh-size-guide__handbook figcaption { padding: 12px 16px; background: var(--reference-cream); font: 700 22px/1.2 var(--display); text-transform: uppercase; }
.hh-size-guide__handbook dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; min-width: 0; margin: 0; }
.hh-size-guide__handbook dl > div { min-width: 0; border-top: 1px solid var(--reference-line); padding-top: 16px; }
.hh-size-guide__handbook dt { margin-bottom: 8px; font: 700 22px/1.2 var(--display); text-transform: uppercase; }
.hh-size-guide__handbook dd { display: flex; flex-direction: column; align-items: flex-start; margin: 0; color: var(--reference-muted); font-size: 14px; line-height: 1.6; }
.hh-size-guide__handbook dd a { margin-top: 8px; }
@media (max-width: 767px) {
  .hh-size-guide__handbook { margin-bottom: 32px; }
  .hh-size-guide__handbook > summary { min-height: 80px; padding: 16px; }
  .hh-size-guide__handbook-body { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 0 16px 16px; }
  .hh-size-guide__handbook-intro { align-items: flex-start; flex-direction: column; gap: 0; }
  .hh-size-guide__handbook dl { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .hh-size-guide__handbook-toggle { transition: none; } }