/* Door index (archive-door.php) and door product pages (single-door.php).
   Built from door-styles-index.html and product-page-kendor-walnut-clear.html.
   Scoped to .kd-doors so none of it reaches Elementor pages. */

.kd-doors {
	--ink: #111111;
	--paper: #f5f5f5;
	--paper-warm: #fbf9f6;
	--door-bg: #ebe8e3;
	/* A soft shadow that follows the door's outline, so white and pale painted doors
	   still read against the background. */
	--door-shadow: drop-shadow(0 10px 18px rgba(17, 17, 17, 0.18)) drop-shadow(0 1px 2px rgba(17, 17, 17, 0.16));
	--gold: #111111;
	--accent: #111111;
	--gold-button: #e0bb4c;
	--body: #525252;
	--cta-dark: #d6d3ce;
	--rule: rgba(17, 17, 17, 0.14);
	--serif: 'Cinzel', 'Times New Roman', serif;
	--sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	--cat-head: #171717;
	--cat-body: #555555;
	--cat-body-2: #444444;
	--cat-rule: #e0d9cf;
	--cat-rule-2: #e4ddd3;
	display: block;
	font-family: var(--sans);
	color: var(--ink);
}
.kd-doors *, .kd-doors *::before, .kd-doors *::after { box-sizing: border-box; }
.kd-doors img { display: block; max-width: 100%; }
.kd-doors a { color: inherit; text-decoration: none; }
.kd-doors h1, .kd-doors h2, .kd-doors h3, .kd-doors h4, .kd-doors p { margin: 0; }

/* shared */
.kd-doors .kd-band { padding-left: 72px; padding-right: 72px; }
.kd-doors .wrap { width: 1040px; max-width: 100%; margin: 0 auto; }
.kd-doors .eyebrow { font-weight: 600; font-size: 13px; letter-spacing: 2.3px; color: var(--gold); text-transform: uppercase; line-height: 13px; }
.kd-doors .btn { display: inline-flex; align-items: center; justify-content: center; padding: 16.1px 29.9px; font-weight: 600; font-size: 12px; letter-spacing: 1.7px; line-height: 13.8px; text-transform: uppercase; white-space: nowrap; }
.kd-doors .btn-gold { background: var(--gold-button); color: var(--ink); }
.kd-doors .btn-outline-light { border: 1px solid rgba(255, 255, 255, 0.85); color: #fff; }
.kd-doors .btn-ink { background: var(--ink); color: #fff; }
.kd-doors .cbtn { display: inline-flex; align-items: center; justify-content: center; padding: 14.9px 21.8px; border: 1px solid #222; font-size: 13.6px; letter-spacing: 0.4px; line-height: 1; color: var(--cat-head); text-transform: uppercase; white-space: nowrap; }
.kd-doors .cbtn-gold { background: var(--gold-button); border-color: var(--gold-button); color: var(--ink); }

/* ---------- index: directory head ---------- */
.kd-archive .dir-head { background: #fff; padding-top: 55px; padding-bottom: 22px; display: flex; flex-direction: column; gap: 15.4px; align-items: flex-start; }
.kd-archive .dir-head h1 { font-family: var(--serif); font-weight: 400; font-size: 48.8px; line-height: 58.3px; color: var(--ink); }
.kd-archive .dir-head .sub { font-weight: 500; font-size: 19px; line-height: 29.1px; color: var(--ink); }
.kd-archive .dir-head p { max-width: 980px; font-size: 18px; line-height: 30px; color: var(--body); }

/* ---------- index: filter rail and grid ---------- */
.kd-archive .dir { background: #fff; padding-top: 18px; padding-bottom: 40px; display: flex; gap: 28px; align-items: flex-start; }
.kd-archive .rail { width: 240px; flex-shrink: 0; display: flex; flex-direction: column; gap: 30px; position: sticky; top: 24px; }
.kd-archive .rail .grp { display: flex; flex-direction: column; gap: 0; }
.kd-archive .rail summary { list-style: none; cursor: default; }
.kd-archive .rail summary::-webkit-details-marker { display: none; }
.kd-archive .rail h2 { font-weight: 600; font-size: 15.6px; line-height: 24px; color: var(--ink); margin: 0 0 6px; }
.kd-archive .rail .grp > a:not(.btn) { display: block; font-size: 15.6px; line-height: 34.8px; color: var(--body); }
.kd-archive .rail .grp > a:not(.btn):hover { color: var(--ink); }
.kd-archive .rail .grp > a.is-on { color: var(--ink); font-weight: 600; padding-left: 12px; border-left: 3px solid var(--accent); }
.kd-archive .rail .clear { font-size: 13px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; border-bottom: 1px solid currentColor; align-self: flex-start; }
.kd-archive .rail .note h2 { margin-bottom: 8px; }
.kd-archive .rail .note p { font-size: 15.6px; line-height: 26px; color: var(--body); margin: 0 0 16px; }
.kd-archive .rail .note .btn { align-self: flex-start; }
.kd-archive .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.kd-archive .bar { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.kd-archive .bar span { font-size: 15.6px; line-height: 24px; color: var(--body); }
.kd-archive .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21px; }
.kd-archive .card { display: flex; flex-direction: column; gap: 0; }
.kd-archive .card .pic { height: 380px; border: 1px solid var(--rule); overflow: hidden; background: var(--door-bg); padding: 22px; }
.kd-archive .card .pic img { width: 100%; height: 100%; object-fit: contain; filter: var(--door-shadow); }
.kd-archive .card h3 { font-family: var(--serif); font-weight: 400; font-size: 23.5px; line-height: 30.2px; color: var(--ink); margin: 18px 0 0; }
.kd-archive .card .shown { font-size: 15.6px; line-height: 24px; color: var(--body); margin-top: 8px; }
.kd-archive .card .shown b { font-weight: 500; color: var(--ink); }
.kd-archive .card .meta { margin-top: 6px; font-size: 14.3px; line-height: 22.1px; }
.kd-archive .card .meta .fin { font-weight: 600; color: var(--gold); }
.kd-archive .card .meta .sep, .kd-archive .card .meta .df { font-weight: 500; color: var(--body); }
.kd-archive .empty { padding: 40px 0; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.kd-archive .empty p { font-size: 18px; line-height: 30px; color: var(--body); }

/* ---------- index: closing note and CTA ---------- */
.kd-archive .dir-note { background: #fff; padding-top: 27px; padding-bottom: 50px; display: flex; flex-direction: column; gap: 9.3px; align-items: flex-start; border-bottom: 1px solid var(--rule); }
.kd-archive .dir-note h2 { font-weight: 600; font-size: 18px; line-height: 27.6px; color: var(--ink); }
.kd-archive .dir-note p { max-width: 980px; font-size: 16.8px; line-height: 28.8px; color: var(--body); }
.kd-archive .cta { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; padding-top: 96px; padding-bottom: 96px; text-align: center; background: var(--ink); overflow: hidden; }
.kd-archive .cta > * { position: relative; z-index: 2; }
.kd-archive .cta .cta-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: 0; }
.kd-archive .cta .cta-overlay { position: absolute; inset: 0; background: rgba(17, 17, 17, 0.72); z-index: 1; }
.kd-archive .cta h2 { font-family: var(--serif); font-weight: 400; font-size: 40.3px; line-height: 48.3px; letter-spacing: 0.8px; color: #fff; text-transform: uppercase; }
.kd-archive .cta p { max-width: 620px; font-size: 16.8px; line-height: 28.8px; color: var(--cta-dark); }
.kd-archive .cta .actions { display: flex; gap: 12px; align-items: center; justify-content: center; padding-top: 13px; }

/* ---------- product: hero (no room photo per door, so a dark band) ---------- */
.kd-single { background: #fff; }
.kd-single .hero { position: relative; height: 380px; background: var(--ink); display: flex; justify-content: center; padding: 118px 20px 0; }
.kd-single .hero .title { width: 720px; max-width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: center; }
.kd-single .hero h1 { font-family: var(--serif); font-weight: 400; font-size: 50.9px; line-height: 1.15; color: #fff; }
.kd-single .hero .sub { font-size: 16.8px; letter-spacing: 0.8px; color: #fff; text-transform: uppercase; }

/* ---------- product: selector card overlapping the hero ---------- */
.kd-single .selector { position: relative; z-index: 2; margin-top: -93px; display: flex; gap: 48px; align-items: flex-start; }
.kd-single .selector .card { width: 230px; flex-shrink: 0; background: #fff; border-top: 5px solid var(--accent); box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08); padding: 19px 14px 42.5px; display: flex; flex-direction: column; gap: 15px; }
.kd-single .selector .card .door { height: 288px; border: 1px solid rgba(17, 17, 17, 0.14); overflow: hidden; background: var(--door-bg); padding: 14px; }
.kd-single .selector .card .door img { width: 100%; height: 100%; object-fit: contain; filter: var(--door-shadow); }
.kd-single .selector .card .cbtn { width: 100%; }
.kd-single .selector .panel { flex: 1; min-width: 0; padding-top: 110px; }
.kd-single .thumbs { display: flex; gap: 8px; padding-bottom: 16px; flex-wrap: wrap; }
.kd-single .thumbs .thumb { width: 82px; height: 58px; padding: 4px; margin: 0; border: 1px solid #ddd; background: var(--door-bg); cursor: pointer; }
.kd-single .thumbs .thumb.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.kd-single .thumbs .thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kd-single .thumbs .thumb img { width: 100%; height: 100%; object-fit: contain; }
.kd-single .tabs { display: flex; background: #f1f1f1; border: 1px solid var(--cat-rule); }
.kd-single .tabs .tab { flex: 1; padding: 16px 16px 20px; font-size: 16.8px; color: var(--cat-head); text-align: left; }
.kd-single .tabs .tab.is-active { background: #fff; border-bottom: 4px solid var(--accent); font-weight: 600; color: var(--ink); }
.kd-single .specs { background: var(--paper-warm); border: 1px solid var(--cat-rule); border-top: 0; display: flex; gap: 38px; padding: 28px 27px 29px; }
.kd-single .specs .col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 15px; }
.kd-single .specs h3 { font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--cat-head); }
.kd-single .specs p { font-size: 18px; line-height: 30.6px; color: var(--cat-body-2); }

/* ---------- product: attribute strip ---------- */
.kd-single .attrs { margin-top: 52px; display: flex; border: 1px solid var(--cat-rule); }
.kd-single .attrs .cell { flex: 1; background: #fff; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--cat-rule); }
.kd-single .attrs .cell:last-child { border-right: 0; }
.kd-single .attrs .k { font-weight: 600; font-size: 14.3px; letter-spacing: 0.9px; color: #777; text-transform: uppercase; }
.kd-single .attrs .v { font-family: var(--serif); font-weight: 400; font-size: 20.2px; line-height: 1.2; color: var(--cat-head); }

/* ---------- product: body and sidebar ---------- */
.kd-single .body-grid { margin-top: 91px; margin-bottom: 91px; display: flex; gap: 50px; align-items: stretch; }
.kd-single .body-main { flex: 1; min-width: 0; padding: 28px 0 32px; display: flex; flex-direction: column; gap: 8.7px; align-items: flex-start; }
.kd-single .body-main h2 { font-family: var(--serif); font-weight: 400; font-size: 32.9px; line-height: 1.25; color: var(--cat-head); }
.kd-single .body-main p { font-size: 19.2px; line-height: 32.4px; color: var(--cat-body); }
.kd-single .body-main p + p { margin-top: 12px; }
.kd-single .body-main .spacer-btn { padding-top: 15.3px; padding-bottom: 36px; }
.kd-single .showband { width: 100%; background: var(--ink); padding-left: 25px; display: flex; align-items: center; }
.kd-single .showband .shot { width: 220px; height: 180px; flex-shrink: 0; overflow: hidden; }
.kd-single .showband .shot img { width: 100%; height: 100%; object-fit: cover; }
.kd-single .showband .copy { width: 535px; max-width: 100%; padding: 28px 34px; display: flex; flex-direction: column; gap: 6.9px; align-items: flex-start; }
.kd-single .showband h3 { font-family: var(--serif); font-weight: 400; font-size: 27.6px; line-height: 1.25; color: #fff; }
.kd-single .showband p { font-size: 18px; line-height: 30px; color: #dddddd; margin: 0 0 9.725px; }
.kd-single .pillars { width: 100%; padding-top: 31.3px; display: flex; flex-direction: column; gap: 18px; }
.kd-single .pillars .label { font-size: 20.2px; line-height: 1.3; color: var(--cat-head); display: flex; gap: 32px; flex-wrap: wrap; }
.kd-single .pillars .row { display: flex; gap: 18px; }
.kd-single .pillars .card { flex: 1; min-height: 180px; background: var(--paper-warm); border: 1px solid var(--accent); border-top: 4px solid var(--accent); padding: 22px 19px 19px; display: flex; flex-direction: column; gap: 9.235px; }
.kd-single .pillars .card h4 { font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.25; color: var(--cat-head); }
.kd-single .pillars .card p { font-size: 16.8px; line-height: 26.4px; color: var(--cat-body); }
.kd-single .aside { width: 235px; flex-shrink: 0; border-left: 1px solid var(--cat-rule-2); padding: 22px 0 0 26px; }
.kd-single .aside .group + .group { margin-top: 22px; }
.kd-single .aside h3 { font-family: var(--serif); font-weight: 400; font-size: 21.3px; line-height: 1.1; color: var(--cat-head); margin: 0 0 15px; padding-bottom: 11px; border-bottom: 3px solid var(--accent); }
.kd-single .aside a { display: block; font-size: 16.8px; line-height: 22.7px; color: var(--cat-body); padding: 8px 0 9px; border-bottom: 1px solid #eee; }
.kd-single .aside a:hover { color: var(--ink); }

/* ---------- product: closing CTA ---------- */
.kd-single .cta { background: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; padding-top: 92px; padding-bottom: 92px; text-align: center; }
.kd-single .cta h2 { font-family: var(--serif); font-weight: 400; font-size: 38.2px; line-height: 1.2; letter-spacing: 0.8px; color: #fff; max-width: 760px; text-transform: uppercase; }
.kd-single .cta p { max-width: 620px; font-size: 16.8px; line-height: 28.8px; color: var(--cta-dark); }
.kd-single .cta .actions { display: flex; gap: 12px; align-items: center; justify-content: center; padding-top: 13px; }

/* ---------- tablet and phone ---------- */
@media (max-width: 1100px) {
	.kd-single .wrap { padding-left: 20px; padding-right: 20px; }
	.kd-single .body-grid { gap: 32px; }
	.kd-archive .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.kd-doors .kd-band { padding-left: 20px; padding-right: 20px; }

	.kd-archive .dir-head { padding-top: 40px; }
	.kd-archive .dir-head h1 { font-size: 31.8px; line-height: 1.2; }
	.kd-archive .dir { flex-direction: column; gap: 32px; }
	.kd-archive .rail { width: 100%; position: static; gap: 0; }
	.kd-archive .rail .grp { border-bottom: 1px solid var(--rule); }
	.kd-archive .rail summary { cursor: pointer; padding: 14px 0; display: flex; justify-content: space-between; align-items: center; }
	.kd-archive .rail summary h2 { margin: 0; }
	.kd-archive .rail summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--body); }
	.kd-archive .rail details[open] summary::after { content: "\2212"; }
	.kd-archive .rail details[open] { padding-bottom: 12px; }
	.kd-archive .rail .clear { margin-bottom: 12px; }
	.kd-archive .rail .note { border-bottom: 0; padding-top: 24px; }
	.kd-archive .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.kd-archive .card .pic { height: 230px; padding: 14px; }
	.kd-archive .card h3 { font-size: 19px; line-height: 1.3; margin-top: 12px; }
	.kd-archive .bar { flex-direction: column; align-items: flex-start; gap: 6px; }
	.kd-archive .cta { padding-top: 64px; padding-bottom: 64px; }
	.kd-archive .cta h2 { font-size: 27.6px; line-height: 1.25; }
	.kd-archive .cta .actions { flex-wrap: wrap; }

	.kd-single .hero { height: auto; padding: 56px 20px 48px; }
	.kd-single .hero h1 { font-size: 31.8px; }
	.kd-single .selector { margin-top: 24px; flex-direction: column; gap: 24px; }
	.kd-single .selector .card { width: 100%; }
	.kd-single .selector .card .door { height: 340px; }
	.kd-single .selector .panel { padding-top: 0; width: 100%; }
	.kd-single .specs { flex-direction: column; gap: 24px; padding: 24px 20px; }
	.kd-single .attrs { margin-top: 32px; flex-wrap: wrap; }
	.kd-single .attrs .cell { flex: 0 0 50%; border-bottom: 1px solid var(--cat-rule); }
	.kd-single .attrs .cell:nth-child(2n) { border-right: 0; }
	.kd-single .body-grid { margin-top: 40px; margin-bottom: 48px; flex-direction: column; }
	.kd-single .body-main h2 { font-size: 26.9px; }
	.kd-single .showband { flex-direction: column; align-items: stretch; padding-left: 0; }
	.kd-single .showband .shot { width: 100%; height: 200px; }
	.kd-single .showband .copy { width: 100%; padding: 24px 20px; }
	.kd-single .pillars .row { flex-direction: column; }
	.kd-single .aside { width: 100%; border-left: 0; border-top: 1px solid var(--cat-rule-2); padding: 24px 0 0; }
	.kd-single .cta { padding-top: 64px; padding-bottom: 64px; }
	.kd-single .cta h2 { font-size: 27.6px; }
	.kd-single .cta .actions { flex-wrap: wrap; }
}

@media (max-width: 480px) {
	.kd-archive .card .pic { height: 190px; }
}

/* Wide screens: backgrounds run edge to edge, content stays in the 1440 frame. */
@media (min-width: 1440px) {
	.kd-doors .kd-band {
		padding-left: calc(72px + max(0px, (100% - 1440px) / 2));
		padding-right: calc(72px + max(0px, (100% - 1440px) / 2));
	}
}

/* Labels on the dark call-to-action bands stay readable. */
.kd-doors .cta .eyebrow { color: #ffffff; }

/* Door catalogue sidebar: download the DreamLine catalog PDF. */
.kd-doors .btn-line { border: 1px solid var(--ink); color: var(--ink); background: transparent; transition: background-color .2s ease, color .2s ease; }
.kd-doors .btn-line:hover, .kd-doors .btn-line:focus-visible { background: var(--ink); color: #fff; }
.kd-doors .kd-catalog { margin-top: 8px; }