/* 4M inner pages (S1.13): same tokens and shapes as the home page (v3.css). */

/* ---------- Page hero: shorter than home, same footage-behind-words look ---------- */
.x-hero--page .x-hero__inner { min-height: min(72svh, 640px); padding-block: 28px 76px; }
.x-hero--page .x-hero__title { font-size: clamp(2.3rem, 8.4vw, 4.2rem); max-width: 16ch; }
.x-hero--page .breadcrumbs { margin: 0 0 14px; }
.x-hero--page .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; font-size: .88rem; color: rgba(255, 255, 255, .78); }
.x-hero--page .breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: rgba(255, 255, 255, .45); }
.x-hero--page .breadcrumbs a { color: #fff; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .x-hero--page .breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* ---------- Guide layout: content + sticky price column ---------- */
.x-doc { padding-top: clamp(48px, 7vw, 88px); }
.x-doc__grid { display: grid; gap: 40px; }
.x-doc__main { min-width: 0; }
.x-toc { padding: 22px 22px 18px; border: 1px solid var(--x-line); border-radius: var(--x-radius); background: var(--x-soft); }
.x-toc__title { margin: 0 0 10px; font-weight: 700; }
.x-toc ol { counter-reset: t; display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.x-toc li { counter-increment: t; }
.x-toc a { display: flex; gap: 12px; padding: 7px 0; color: var(--x-ink); font-weight: 500; text-decoration: none; }
.x-toc a::before { content: counter(t, decimal-leading-zero); min-width: 22px; color: var(--x-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .x-toc a:hover { color: var(--x-accent); } }
.x-toc__meta { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--x-line); color: var(--x-muted); font-size: .86rem; }
.x-doc__sec { margin-top: 56px; scroll-margin-top: calc(var(--header-h) + 20px); }
.x-doc__h2 { margin: 0 0 14px; font: 700 clamp(1.45rem, 3.2vw, 1.95rem)/1.15 var(--f-text); letter-spacing: -.022em; text-wrap: balance; }
.x-doc__sec p { margin: 0 0 14px; max-width: 68ch; color: #2c3338; line-height: 1.65; }
.x-doc__sec a:not(.x-btn) { color: var(--x-accent); font-weight: 600; text-underline-offset: 3px; }
.x-answer { padding: 18px 20px; border-left: 3px solid var(--x-accent); border-radius: 0 12px 12px 0; background: var(--x-accent-soft); font-size: 1.12rem; color: var(--x-ink) !important; }
.x-ol { counter-reset: o; display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.x-ol li { counter-increment: o; position: relative; padding-left: 40px; line-height: 1.5; }
.x-ol li::before { content: counter(o); position: absolute; left: 0; top: -1px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--x-ink); color: #fff; font-size: .8rem; font-weight: 700; }

/* Comparison table */
.x-compare-wrap { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--x-line); border-radius: var(--x-radius); }
.x-compare { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .95rem; }
.x-compare th, .x-compare td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--x-line); line-height: 1.4; }
.x-compare thead th { background: var(--x-soft); font-weight: 700; }
.x-compare tbody th { font-weight: 600; color: var(--x-muted); width: 30%; }
.x-compare tbody tr:last-child th, .x-compare tbody tr:last-child td { border-bottom: 0; }

/* Styles we install */
.x-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; margin: 6px 0 0; padding: 0; list-style: none; }
.x-styles li, .x-styles a { display: grid; gap: 4px; color: inherit; text-decoration: none; }
.x-styles img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--x-radius); background: #dde3e8; margin-bottom: 6px; }
.x-styles strong { font-size: .98rem; }
.x-styles span { color: var(--x-muted); font-size: .88rem; line-height: 1.4; }
.x-styles a strong { color: var(--x-accent); }

/* Catalogs */
.x-catalogs { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.x-catalogs a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--x-line); border-radius: 12px; color: var(--x-ink); text-decoration: none; font-weight: 400; transition: border-color .2s var(--x-ease); }
.x-catalogs a span:last-child { display: grid; gap: 2px; color: var(--x-muted); font-size: .9rem; }
.x-catalogs a strong { color: var(--x-ink); font-size: 1rem; }
.x-catalogs__icon { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--x-accent-soft); color: var(--x-accent); font-size: .72rem; font-weight: 800; letter-spacing: .04em; }
@media (hover: hover) and (pointer: fine) { .x-catalogs a:hover { border-color: var(--x-accent); } }

.x-doc__sec .x-pricecard { margin: 6px 0 0; max-width: 560px; }
.x-doc__sec .x-said { max-width: 560px; }
.x-doc__video { max-width: 300px; margin: 6px 0 0; }

/* Sticky price column (desktop only; on phones the bottom bar does this job) */
.x-aside { display: none; }
.x-aside__card { padding: 22px; border: 1px solid var(--x-line); border-radius: var(--x-radius); background: #fff; box-shadow: var(--x-shadow); }
.x-aside__title { margin: 0 0 10px; font-weight: 700; font-size: 1.1rem; }
.x-aside__prices { display: grid; gap: 0; margin: 0 0 12px; padding: 0; list-style: none; }
.x-aside__prices li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--x-line); font-size: .9rem; }
.x-aside__prices span { color: var(--x-muted); }
.x-aside__prices strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.x-aside__note { margin: 0 0 14px; color: var(--x-muted); font-size: .84rem; }
.x-aside .x-btn { width: 100%; }
.x-aside__call { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; color: var(--x-ink); font-weight: 700; text-decoration: none; }
.x-aside__call .icon { width: 18px; height: 18px; stroke-width: 3.5; }
.x-aside__hours { margin: 6px 0 0; text-align: center; color: var(--x-muted); font-size: .84rem; }

/* Related products and shared block variants */
.x-related { display: grid; gap: 12px; margin-top: 30px; }
.x-related .x-cat__item { min-height: 300px; }
.x-warranty__list--2 { max-width: 820px; }

@media (min-width: 600px) {
	.x-related { grid-template-columns: 1fr 1fr; }
	.x-styles { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 760px) {
	.x-warranty__list.x-warranty__list--2 { grid-template-columns: 1fr 1fr; }
	.x-reviews__list--3 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
	.x-hero--page .x-hero__inner { min-height: clamp(460px, calc(100svh - var(--header-h) - 300px), 600px); padding-block: 40px 120px; }
	.x-hero--page .x-hero__title { max-width: 18ch; }
	.x-doc__grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 64px; align-items: start; }
	.x-aside { display: block; position: sticky; top: calc(var(--header-h) + 24px); }
	/* One row, equal cards, whatever their number (3 or 4); the home catalogue span rule must not reach them. */
	.x-related { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
	.x-related .x-cat__item { grid-column: auto; min-height: 360px; }
	.x-reviews__list--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1180px) {
	.x-styles { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Header dropdowns (desktop: hover, click, keyboard; phones: accordion) ---------- */
.nav__top { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.nav__chev { width: 12px; height: 12px; stroke-width: 6; transform: rotate(90deg); transition: transform .2s var(--x-ease); }
.nav__group.is-open .nav__chev { transform: rotate(-90deg); }
.nav__sub { display: none; margin: 0; padding: 0; list-style: none; }
.nav__sub a { display: block; border-bottom: 0 !important; text-decoration: none; }
@media (min-width: 1061px) {
	.nav__group { position: relative; }
	.nav__sub { position: absolute; top: calc(100% + 14px); left: -16px; z-index: 50; display: grid; min-width: 250px; padding: 8px; border: 1px solid var(--x-line); border-radius: var(--x-radius); background: #fff; box-shadow: var(--x-shadow); opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.98); transform-origin: top left; transition: opacity .16s var(--x-ease), transform .16s var(--x-ease), visibility 0s linear .16s; }
	.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
	.nav__group.is-open .nav__sub, .nav__group:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
	.nav__sub a { padding: 9px 12px !important; border-radius: 10px; color: var(--x-ink); font-size: .95rem; }
	.nav__sub a[aria-current="page"] { color: var(--x-accent); font-weight: 600; }
	.nav__sub li:last-child a { margin-top: 4px; border-top: 1px solid var(--x-line) !important; border-radius: 0 0 10px 10px; color: var(--x-accent); font-weight: 600; }
	@media (hover: hover) and (pointer: fine) {
		.nav__group:hover .nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
		.nav__group:hover .nav__chev { transform: rotate(-90deg); }
		.nav__sub a:hover { background: var(--x-soft); }
	}
}
@media (max-width: 1060px) {
	.nav { max-height: calc(100svh - var(--header-h)); overflow-y: auto; background: #fff; }
	.nav__top { display: flex; justify-content: space-between; width: 100%; padding: 12px 0; font-size: 1.05rem; }
	.nav__group.is-open .nav__sub { display: grid; padding: 0 0 8px 14px; border-left: 2px solid var(--x-accent-soft); }
	.nav__sub a { padding: 9px 0 !important; color: var(--x-muted); }
}
@media (prefers-reduced-motion: reduce) { .nav__sub, .nav__chev { transition: none !important; } }

/* ---------- Footer ---------- */
.x-footer { padding-block: 56px 28px; background: #0b1013; color: rgba(255, 255, 255, .78); }
.x-footer a { color: #fff; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .x-footer a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.x-footer__grid { display: grid; gap: 32px; }
.x-footer__brand p { margin: 0 0 8px; }
.x-footer__brand .brand { margin-bottom: 16px; color: #fff; }
.x-footer__phone a { font-size: 1.3rem; font-weight: 700; }
.x-footer__muted { color: rgba(255, 255, 255, .6); font-size: .92rem; }
.x-footer__title { margin: 0 0 12px; color: #fff; font-weight: 700; }
.x-footer__col ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: .94rem; }
.x-footer__col a { color: rgba(255, 255, 255, .78); }
.x-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .85rem; color: rgba(255, 255, 255, .55); }
.x-footer__legal p { margin: 0; display: flex; gap: 18px; }
.x-footer__legal a { color: rgba(255, 255, 255, .7); }
@media (min-width: 600px) { .x-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .x-footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 40px; } }
@media (max-width: 979px) { .x-footer { padding-bottom: 96px; } }
@media (min-width: 1061px) {
	.nav__list { align-items: center; }
	.nav__list > li > a, .nav__top { line-height: 1.4; }
}

/* Type cards inside a guide (hub pages) */
.x-typecards { display: grid; gap: 12px; }
.x-typecard { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px; border: 1px solid var(--x-line); border-radius: var(--x-radius); color: var(--x-ink); text-decoration: none !important; font-weight: 400 !important; transition: border-color .2s var(--x-ease), box-shadow .2s var(--x-ease); }
.x-typecard img { width: 112px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; }
.x-typecard__body { display: grid; gap: 4px; padding-right: 6px; }
.x-typecard strong { font-size: 1.08rem; color: var(--x-ink); }
.x-typecard__price { color: var(--x-ink); font-weight: 700; font-size: .95rem; }
.x-typecard__note { color: var(--x-muted); font-size: .9rem; line-height: 1.4; }
.x-typecard__go { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; color: var(--x-accent); font-weight: 600; font-size: .92rem; }
.x-typecard__go .x-btn__ico { width: 28px; height: 28px; margin: 0; background: var(--x-accent); color: #fff; }
.x-typecard__go .icon { width: 14px; height: 14px; stroke-width: 4; }
.x-typecard:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) {
	.x-typecard:hover { border-color: var(--x-accent); box-shadow: var(--x-shadow); }
	.x-typecard:hover .x-btn__ico { transform: translateX(3px); }
}
@media (min-width: 760px) { .x-typecards { grid-template-columns: 1fr 1fr; } }

/* Contact list and the map inside a guide */
.x-contact { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--x-line); }
.x-contact li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--x-line); }
.x-contact span { color: var(--x-muted); font-size: .92rem; }
.x-contact a, .x-contact strong { color: var(--x-ink) !important; font-weight: 600; line-height: 1.5; }
.x-contact a[href^="tel"] { font-size: 1.2rem; }
.x-doc__map { margin: 6px 0 18px; }
.x-quote--full .quote-form textarea { min-height: 110px; border-radius: 12px; border-color: #c4ccd4; }
.x-quote--full .quote-form input, .x-quote--full .quote-form select { min-height: 52px; border-radius: 12px; border-color: #c4ccd4; }
@media (min-width: 760px) {
	.x-quote--full .quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
	.x-quote--full .quote-form > * { grid-column: 1 / -1; }
	.x-quote--full .quote-form .quote-form__field { grid-column: auto; }
	.x-quote--full .quote-form .quote-form__field:has(textarea) { grid-column: 1 / -1; }
}
@media (min-width: 980px) { .x-doc__grid--single { grid-template-columns: minmax(0, 820px); } }
.x-doc__photo { margin: 6px 0 18px; }
.x-doc__photo img { width: 100%; max-width: 520px; border-radius: var(--x-radius); }
.x-doc__sec .x-reels { margin-top: 6px; }