/* =====================================================================
   /size-guides/ (page 883) layout. Component styles (tables, chips,
   Finder, how-to) live in size-guide.css, shared with the PDP pop-up.
   ===================================================================== */

.kzsg-page {
	/* Flatsome's stuck header is 70px tall; the chart header row sticks right under it. */
	--kzsg-sticky-top: 70px;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 20px 56px;
}
.kzsg-page > section, .kzsg-page > .kzsg-panels { margin-top: 22px; }
.kzsg-sec-title { font-size: 24px; font-weight: 800; text-transform: uppercase; line-height: 1.1; margin-bottom: 14px !important; }

/* Compact hero: full-bleed dark band, about half the old 280px. */
.kzsg-hero {
	margin: 0 calc(50% - 50vw) !important;
	padding: 16px 20px 16px;
	background: linear-gradient(135deg, var(--kzsg-night) 0%, var(--kzsg-navy) 100%);
	color: var(--kzsg-white);
	text-align: center;
	border-bottom: 4px solid var(--kzsg-red);
}
.kzsg-badge { display: inline-block; padding: 4px 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; font: 700 12px/1.4 var(--kzsg-body); letter-spacing: 1.5px; text-transform: uppercase; }
.kzsg-hero h1 { margin: 6px 0 4px; font-size: 38px; font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--kzsg-white); }
.kzsg-hero p { max-width: 640px; margin: 0 auto; font-size: 16px; color: rgba(255, 255, 255, .9); }

/* Made-to-order banner: the first thing under the hero, never a footnote. */
.kzsg-banner { padding: 18px 22px; border-radius: var(--kzsg-radius); background: var(--kzsg-navy); color: var(--kzsg-white); }
.kzsg-banner h2 { font-size: 24px; font-weight: 800; line-height: 1.15; margin-bottom: 6px; color: var(--kzsg-white); }
.kzsg-banner p { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .92); max-width: 900px; }
.kzsg-banner strong { color: var(--kzsg-white); }
.kzsg-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; list-style: none; margin: 12px 0 0; padding: 0; }
.kzsg-rules li { display: flex; gap: 8px; align-items: center; margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .08); font-size: 14px; line-height: 1.35; }
.kzsg-rules .kzsg-icon { color: var(--kzsg-white); margin-top: 1px; }
.kzsg-rules strong { font-size: 14px; }

/* Product picker: group chips, then only the chosen group's products. */
.kzsg-groups, .kzsg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kzsg-groups { margin-bottom: 10px; }
.kzsg-chips { display: none; padding-top: 10px; border-top: 1px solid var(--kzsg-border); }
.kzsg-in-tops:checked ~ .kzsg-picker .kzsg-chips-tops, .kzsg-in-bottoms:checked ~ .kzsg-picker .kzsg-chips-bottoms,
.kzsg-in-sets:checked ~ .kzsg-picker .kzsg-chips-sets, .kzsg-in-kids:checked ~ .kzsg-picker .kzsg-chips-kids,
.kzsg-in-footwear:checked ~ .kzsg-picker .kzsg-chips-footwear { display: flex; }
.kzsg-group { font-weight: 700; }

.kzsg-page > .kzsg-panels { scroll-margin-top: 90px; }
.kzsg-panel { scroll-margin-top: 90px; }

/* How to measure / CTA / policy / FAQ / contact */
.kzsg-howto { padding-top: 26px; border-top: 1px solid var(--kzsg-border); }
.kzsg-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 20px; border: 2px solid var(--kzsg-red); border-radius: var(--kzsg-radius); background: var(--kzsg-tint); }
.kzsg-cta > div { flex: 1 1 420px; }
.kzsg-cta h2 { font-size: 26px; font-weight: 800; line-height: 1.15; margin-bottom: 6px; }
.kzsg-cta-phone { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px !important; font-size: 15px; }
.kzsg-btn-lg { min-height: 52px; padding: 0 26px; font-size: 16px; }

.kzsg-policy ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; list-style: none; margin: 0 0 10px; padding: 0; }
.kzsg-policy li { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border: 1px solid var(--kzsg-border); border-radius: var(--kzsg-radius); background: var(--kzsg-surface); font-size: 14px; line-height: 1.4; }
.kzsg-policy .kzsg-icon { color: var(--kzsg-red); }
.kzsg-policy strong { display: block; font-size: 15px; }

.kzsg-faq-item { border-bottom: 1px solid var(--kzsg-border); }
.kzsg-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 0; font-weight: 700; font-size: 16px; cursor: pointer; list-style: none; }
.kzsg-faq-item summary::-webkit-details-marker { display: none; }
.kzsg-faq-item summary::after { content: "+"; flex: none; font: 700 22px/1 var(--kzsg-body); color: var(--kzsg-red); }
.kzsg-faq-item[open] summary::after { content: "\2212"; }
.kzsg-faq-item p { padding: 0 0 16px; max-width: 860px; }

.kzsg-contact ul { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; margin: 0 0 10px; padding: 0; }
.kzsg-contact li { display: flex; align-items: center; gap: 8px; margin: 0; }
.kzsg-contact .kzsg-icon { color: var(--kzsg-red); }

@media (max-width: 849px) {
	.kzsg-rules, .kzsg-policy ul { grid-template-columns: 1fr; }
}
@media (max-width: 549px) {
	.kzsg-page { padding: 0 16px 40px; }
	.kzsg-page > section, .kzsg-page > .kzsg-panels { margin-top: 18px; }
	.kzsg-hero { padding: 12px 16px; }
	.kzsg-hero h1 { font-size: 30px; }
	.kzsg-hero .kzsg-badge { display: none; }
	.kzsg-banner p { font-size: 14.5px; }
	.kzsg-rules li { font-size: 13.5px; }
	.kzsg-policy strong { display: inline; }
	.kzsg-sec-title { font-size: 22px; margin-bottom: 10px !important; }
	.kzsg-hero p { font-size: 15px; }
	.kzsg-banner { padding: 16px; }
	.kzsg-banner h2, .kzsg-cta h2 { font-size: 22px; }
	/* One swipeable row per level instead of chips wrapping onto four lines. */
	.kzsg-groups, .kzsg-chips { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.kzsg-groups::-webkit-scrollbar, .kzsg-chips::-webkit-scrollbar { display: none; }
	.kzsg-in-tops:checked ~ .kzsg-picker .kzsg-chips-tops, .kzsg-in-bottoms:checked ~ .kzsg-picker .kzsg-chips-bottoms,
	.kzsg-in-sets:checked ~ .kzsg-picker .kzsg-chips-sets, .kzsg-in-kids:checked ~ .kzsg-picker .kzsg-chips-kids,
	.kzsg-in-footwear:checked ~ .kzsg-picker .kzsg-chips-footwear { display: flex; }
	.kzsg-chips { border-top: 0; padding-top: 0; }
	.kzsg-cta { padding: 16px; }
	.kzsg-btn-lg { width: 100%; }
}