/* PURISCO drawers (v0.9.1): one look for the catalog Filters drawer (catalog.css, ≤1024px) and the Saved panel
   (saved.css). Same width, corners, open/close motion, scrim, blue head with the living line pattern
   (drawer-band.js), close button and footer layout. The footer buttons keep their own CTA styles.
   Tokens are CSS variables so they can change without touching the rules. Spec: docs/drawers-audit.md. */
:root {
	--pdr-width: 440px;
	--pdr-width-phone: calc(100% - 32px);
	--pdr-radius: 12px;
	--pdr-band: #002F60;
	--pdr-line: #4F86BF;
	--pdr-line-width: 0.5;
	--pdr-line-opacity: 1;
	--pdr-title: #FFFFFF;
	--pdr-sub: #D3E4F4;
	--pdr-scrim: rgba(8, 41, 79, .45);
	--pdr-in: 320ms cubic-bezier(0.16, 1, 0.3, 1);
	--pdr-out: 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
	--pdr-shadow: -24px 0 60px -30px rgba(8, 41, 79, .55);
}

/* ---------- Frame: size, corners, motion ---------- */
html body .purisco-sp__dialog,
html body .purisco-cf-panel.is-drawer {
	width: min(var(--pdr-width), 100%); border-radius: var(--pdr-radius) 0 0 var(--pdr-radius); overflow: hidden;
	box-shadow: var(--pdr-shadow); padding-top: 0;
}
html body .purisco-sp__dialog { transition: transform var(--pdr-out); }
html body .purisco-sp.is-open .purisco-sp__dialog { transition: transform var(--pdr-in); }
html body .purisco-sp__scrim { background: var(--pdr-scrim); transition: opacity var(--pdr-out); }
html body .purisco-sp.is-open .purisco-sp__scrim { transition: opacity var(--pdr-in); }
html body .purisco-cf-panel.is-drawer { display: flex; flex-direction: column; transition: transform var(--pdr-out), visibility 0s linear 240ms; }
html body .purisco-cf-panel.is-drawer.is-open { transition: transform var(--pdr-in); }
html body .purisco-cf-scrim { background: var(--pdr-scrim); transition: opacity var(--pdr-out); }
html body .purisco-cf-scrim.is-open { transition: opacity var(--pdr-in); }
@media (max-width: 767px) {
	html body .purisco-sp__dialog,
	html body .purisco-cf-panel.is-drawer { width: var(--pdr-width-phone); }
}

/* ---------- Head: blue band with the line pattern ---------- */
html body .purisco-sp__head,
html body .purisco-cf-panel.is-drawer .purisco-cf-panel__head {
	position: relative; overflow: hidden; display: flex; flex: none; justify-content: space-between; align-items: flex-start; gap: 16px;
	height: auto; margin: 0; padding: calc(22px + env(safe-area-inset-top, 0px)) 16px 22px 24px; border: 0;
	background: var(--pdr-band); color: var(--pdr-title);
}
html body .pdr-band { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: none; stroke: var(--pdr-line); stroke-width: var(--pdr-line-width); stroke-opacity: var(--pdr-line-opacity); }
html body .pdr-band path { vector-effect: non-scaling-stroke; }
html body .purisco-sp__head > :not(.pdr-band),
html body .purisco-cf-panel.is-drawer .purisco-cf-panel__head > :not(.pdr-band) { position: relative; }
html body .pdr-titles { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 4px; }
html body .purisco-sp__title,
html body .purisco-cf-panel.is-drawer h2.purisco-cf-panel__title {
	margin: 0; font-family: 'Newsreader', 'Times New Roman', serif; font-weight: 500; font-size: 28px; line-height: 1.1; letter-spacing: -.01em;
	text-transform: none; color: var(--pdr-title);
}
html body .purisco-sp__intro,
html body .purisco-cf-panel.is-drawer .pdr-sub { margin: 0; font-size: 15px; line-height: 1.4; color: var(--pdr-sub); }
html body .purisco-sp__head .purisco-sp__intro { margin-top: 6px; }
html body .purisco-sp__close,
html body .purisco-cf button.purisco-cf-panel__close,
html body .purisco-cf-panel.is-drawer button.purisco-cf-panel__close {
	flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0;
	border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #FFFFFF; box-shadow: none; transform: none; cursor: pointer;
	transition: background-color 180ms var(--pss-ease, ease);
}
html body .purisco-sp__close:hover, html body .purisco-sp__close:focus,
html body .purisco-cf-panel.is-drawer button.purisco-cf-panel__close:hover,
html body .purisco-cf-panel.is-drawer button.purisco-cf-panel__close:focus { background: rgba(255, 255, 255, .22); color: #FFFFFF; outline: none; }
html body .purisco-sp__close:focus-visible,
html body .purisco-cf-panel.is-drawer button.purisco-cf-panel__close:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
html body .purisco-sp__close svg,
html body .purisco-cf-panel.is-drawer button.purisco-cf-panel__close svg { width: 22px; height: 22px; }

/* ---------- Body ---------- */
html body .purisco-sp__body { padding: 4px 20px 20px; }
html body .purisco-cf-panel.is-drawer .purisco-cf-panel__form { padding: 12px 12px 20px; }

/* ---------- Footer: primary CTA full width, text link under it ---------- */
html body .purisco-sp__foot,
html body .purisco-cf-panel.is-drawer .purisco-cf-panel__foot {
	display: flex; flex-direction: column; align-items: stretch; gap: 4px;
	padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #DCE8F5; background: #FFFFFF;
}
html body .purisco-sp__foot[hidden] { display: none; }
html body .purisco-cf-panel.is-drawer button.purisco-cf-panel__show { flex: none; width: 100%; }
html body .purisco-cf-panel.is-drawer a.purisco-cf-panel__clear,
html body .purisco-sp__foot .purisco-sp__secondary { align-self: center; justify-content: center; min-height: 44px; padding: 0 12px; font-size: 16px; font-weight: 500; }
html body .purisco-sp__note { margin-top: 2px; }

/* ---------- Tablet + desktop ---------- */
@media (min-width: 768px) {
	html body .purisco-sp__head,
	html body .purisco-cf-panel.is-drawer .purisco-cf-panel__head { padding: calc(28px + env(safe-area-inset-top, 0px)) 24px 26px 32px; }
	html body .pdr-titles { gap: 8px; }
	html body .purisco-sp__title,
	html body .purisco-cf-panel.is-drawer h2.purisco-cf-panel__title { font-size: 30px; }
	html body .purisco-sp__body { padding: 8px 32px 24px; }
	html body .purisco-cf-panel.is-drawer .purisco-cf-panel__form { padding: 12px 20px 24px; }
	html body .purisco-sp__foot,
	html body .purisco-cf-panel.is-drawer .purisco-cf-panel__foot { padding: 18px 32px calc(20px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
	html body .purisco-sp__dialog, html body .purisco-sp.is-open .purisco-sp__dialog, html body .purisco-sp__scrim, html body .purisco-sp.is-open .purisco-sp__scrim,
	html body .purisco-cf-panel.is-drawer, html body .purisco-cf-panel.is-drawer.is-open, html body .purisco-cf-scrim, html body .purisco-cf-scrim.is-open { transition: none; }
}