/* PIENĖ Discovery Selector — frontend styles
 * Brand palette: cream #faf6ef, beige #c9a87a, ink #1f1c18, line #e8ddc9.
 */
:root {
	--ppd-cream:  #faf6ef;
	--ppd-cream2: #f3ead9;
	--ppd-beige:  #c9a87a;
	--ppd-beige-2:#b18d5a;
	--ppd-ink:    #1f1c18;
	--ppd-muted:  #6f6557;
	--ppd-line:   #e8ddc9;
	--ppd-line-2: #d7c9ad;
}

/* Lithuanian-safe font stack — system fonts ship with full LT diacritic
 * coverage (Ė Š Ų Ž Ą Č Į Ę Ū). The active theme's decorative font is
 * missing or substitutes some of these glyphs, producing a mixed-font
 * look on lt_LT. We scope this stack to the selector and the quiz only
 * so the rest of the product page keeps the brand serif.
 *
 * `font-variant-ligatures: none` and `font-feature-settings: normal`
 * prevent OpenType substitution from re-introducing decorative-font
 * glyphs through ligature/alt features. */
.ppd-selector,
.ppd-selector *,
.ppd-quiz,
.ppd-quiz * {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	font-feature-settings: normal;
	font-variant-ligatures: none;
}

.ppd-selector,
.ppd-quiz {
	color: var(--ppd-ink);
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.ppd-selector *,
.ppd-selector *::before,
.ppd-selector *::after,
.ppd-quiz *,
.ppd-quiz *::before,
.ppd-quiz *::after { box-sizing: border-box; }

.ppd-icon { display: inline-flex; width: 18px; height: 18px; line-height: 0; }
.ppd-icon svg { width: 100%; height: 100%; display: block; color: var(--ppd-beige-2); }

/* ---------------- Selector ---------------- */
.ppd-selector { margin: 1.25rem 0 1.5rem; }

.ppd-divider { height: 1px; background: var(--ppd-line); margin-bottom: 1.1rem; }
.ppd-divider-bottom { margin: 1.4rem 0 0; }

.ppd-head {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 1rem; margin-bottom: 1rem;
}
/* Heading and dense UI text — force a clean sans stack so the theme's
 * decorative serif doesn't clip glyphs like "O" in "CHOOSE ANY 5 SCENTS". */
.ppd-selector .ppd-heading,
.ppd-selector .ppd-helper,
.ppd-selector .ppd-counter,
.ppd-selector .ppd-counter-value {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-feature-settings: normal;
	font-variant-ligatures: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.ppd-selector .ppd-heading {
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: #1f1a17;
}
.ppd-selector .ppd-helper {
	font-size: 14px;
	line-height: 1.45;
	color: var(--ppd-muted);
	margin-top: 0.4rem;
	letter-spacing: 0;
	text-transform: none;
}

/* "Help me choose" — visually harmonised CTA button (matches theme add-to-cart
 * accent #c9a482) but explicitly NOT a form submit, NOT carrying WC classes. */
.ppd-selector .ppd-quiz-open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #c9a482;
	border: 1px solid #c9a482;
	color: #fff;
	padding: 10px 16px;
	min-height: 40px;
	border-radius: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
	flex-shrink: 0;
}
.ppd-selector .ppd-quiz-open:hover,
.ppd-selector .ppd-quiz-open:focus {
	background: #b9906f;
	border-color: #b9906f;
	color: #fff;
	outline: none;
}
.ppd-selector .ppd-quiz-open .ppd-icon,
.ppd-selector .ppd-quiz-open .ppd-icon svg {
	color: #fff;
	width: 14px;
	height: 14px;
}

/* Presets */
.ppd-presets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0.75rem; margin-bottom: 1.2rem;
}
.ppd-preset {
	display: flex; align-items: center; gap: 0.75rem;
	background: #fff; border: 1px solid var(--ppd-line);
	border-radius: 8px; padding: 0.85rem 1rem;
	text-align: left; cursor: pointer; transition: all .15s ease;
}
.ppd-preset:hover { border-color: var(--ppd-line-2); }
.ppd-preset.is-active {
	background: var(--ppd-cream2);
	border-color: var(--ppd-beige);
}
.ppd-preset-icon { display: inline-flex; }
.ppd-preset-icon .ppd-icon { width: 22px; height: 22px; }
.ppd-preset-text { display: flex; flex-direction: column; }
.ppd-preset-title {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 0.98rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0;
}
.ppd-preset-sub {
	font-size: 12px;
	color: #8a7d73;
	font-weight: 400;
	line-height: 1.4;
	margin-top: 4px;
}

/* Color lock — the theme's mobile stylesheet applies a blue link color to
 * <button> and nested <span>s inside the product summary on small viewports.
 * Pin pp-discovery card text to the brand palette for every state so theme
 * rules can't repaint titles blue on mobile. */
.ppd-selector .ppd-preset,
.ppd-selector .ppd-preset:link,
.ppd-selector .ppd-preset:visited,
.ppd-selector .ppd-preset:hover,
.ppd-selector .ppd-preset:focus,
.ppd-selector .ppd-preset:active,
.ppd-selector .ppd-scent,
.ppd-selector .ppd-scent:link,
.ppd-selector .ppd-scent:visited,
.ppd-selector .ppd-scent:hover,
.ppd-selector .ppd-scent:focus,
.ppd-selector .ppd-scent:active {
	color: #1f1a17 !important;
	text-decoration: none !important;
}

.ppd-selector .ppd-preset *,
.ppd-selector .ppd-preset:hover *,
.ppd-selector .ppd-preset:focus *,
.ppd-selector .ppd-preset:active *,
.ppd-selector .ppd-scent *,
.ppd-selector .ppd-scent:hover *,
.ppd-selector .ppd-scent:focus *,
.ppd-selector .ppd-scent:active * {
	text-decoration: none !important;
}

.ppd-selector .ppd-preset-title { color: #1f1a17 !important; }
.ppd-selector .ppd-preset-sub   { color: #8a7d73 !important; }
.ppd-selector .ppd-scent-name   { color: #1f1a17 !important; }
.ppd-selector .ppd-scent-desc   { color: #8a7d73 !important; }

.ppd-selector .ppd-preset-icon,
.ppd-selector .ppd-preset-icon svg {
	color: #b9906f !important;
	stroke: currentColor !important;
}

/* Counter + progress */
.ppd-progress-row {
	display: flex; align-items: center; gap: 1rem;
	margin: 1.1rem 0 0.8rem;
}
.ppd-counter { font-size: 0.92rem; color: var(--ppd-muted); white-space: nowrap; }
.ppd-counter-value { color: var(--ppd-ink); font-weight: 500; }
.ppd-progress {
	flex: 1; height: 4px; background: var(--ppd-line); border-radius: 2px; overflow: hidden;
}
.ppd-progress-bar {
	height: 100%; width: 0%;
	background: var(--ppd-beige); transition: width .25s ease;
}

/* Scent grid — 4 columns on desktop, 2 on tablet/mobile, 1 on very narrow. */
.ppd-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.6rem;
}
.ppd-scent {
	position: relative;
	display: block;
	background: #fff;
	border: 1px solid var(--ppd-line);
	border-radius: 10px;
	padding: 0.9rem 0.9rem 0.9rem 2.25rem;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
	min-height: 86px;
	text-align: left;
	/* Force a clean sans-serif on cards — the theme's body serif was clipping
	 * ascenders/descenders on words like "Oro di Neroli". This keeps the
	 * elegant brand serif for headings while cards stay readable. */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.4;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}
.ppd-scent:hover { border-color: var(--ppd-line-2); }
.ppd-scent-input { position: absolute; opacity: 0; pointer-events: none; }
.ppd-check {
	position: absolute; top: 0.85rem; left: 0.8rem;
	width: 18px; height: 18px; border-radius: 4px;
	border: 1px solid var(--ppd-line-2); background: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	color: #fff;
	flex-shrink: 0;
}
.ppd-check svg { width: 14px; height: 14px; opacity: 0; }
.ppd-scent.is-selected { background: var(--ppd-cream2); border-color: var(--ppd-beige); }
.ppd-scent.is-selected .ppd-check { background: var(--ppd-beige); border-color: var(--ppd-beige); }
.ppd-scent.is-selected .ppd-check svg { opacity: 1; }
.ppd-scent-body {
	display: block;
	min-width: 0;
}
.ppd-scent-name {
	display: block;
	font-weight: 500;
	font-size: 0.95rem;
	line-height: 1.3;
	letter-spacing: 0;
	margin: 0 0 0.2rem;
	overflow-wrap: break-word;
	hyphens: none;
}
.ppd-scent-desc {
	display: block;
	font-size: 12px;
	color: #8a7d73;
	font-weight: 400;
	line-height: 1.4;
	margin-top: 6px;
	overflow-wrap: break-word;
}

.ppd-message {
	min-height: 1.2rem; margin-top: 0.6rem;
	font-size: 0.88rem; color: var(--ppd-beige-2);
}
.ppd-message.is-error { color: #a44a3a; }

/* Admin-only warning */
.ppd-admin-warning {
	padding: 0.8rem 1rem; border: 1px dashed #c66;
	background: #fff8f6; color: #823028; border-radius: 6px;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {
	.ppd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
	.ppd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ppd-head { flex-direction: column; align-items: stretch; }
	.ppd-selector .ppd-quiz-open {
		width: 100%;
		justify-content: center;
	}
}
@media (max-width: 380px) {
	.ppd-grid { grid-template-columns: 1fr; }
}

/* ---------------- Quiz modal ---------------- */
.ppd-quiz[hidden] { display: none !important; }
html.ppd-no-scroll, html.ppd-no-scroll body { overflow: hidden; }
.ppd-quiz {
	position: fixed; inset: 0; z-index: 99999;
	display: flex; align-items: center; justify-content: center;
	padding: 1rem;
}
.ppd-quiz-backdrop {
	position: absolute; inset: 0;
	background: rgba(20, 16, 10, 0.55);
	backdrop-filter: blur(2px);
}
.ppd-quiz-modal {
	position: relative;
	background: var(--ppd-cream);
	border-radius: 14px;
	max-width: 640px; width: 100%;
	max-height: calc(100vh - 32px);
	box-shadow: 0 20px 60px rgba(0,0,0,0.25);
	display: flex; flex-direction: column;
	overflow: hidden;
}
@supports (height: 100dvh) {
	.ppd-quiz-modal { max-height: calc(100dvh - 32px); }
}
.ppd-quiz-x {
	position: absolute; top: 0.5rem; right: 0.7rem;
	background: none; border: 0; font-size: 1.6rem; line-height: 1;
	color: var(--ppd-muted); cursor: pointer;
	z-index: 2;
}
.ppd-quiz-x:hover { color: var(--ppd-ink); }
.ppd-quiz-header {
	text-align: center;
	padding: 1.4rem 1.5rem 0;
	flex-shrink: 0;
}
.ppd-quiz-mark { display: inline-flex; margin: 0.5rem auto 0.5rem; }
.ppd-quiz-mark .ppd-icon { width: 28px; height: 28px; color: var(--ppd-beige); }
.ppd-quiz-title { font-size: 1.45rem; font-weight: 500; margin: 0.25rem 0; }
.ppd-quiz-sub { color: var(--ppd-muted); margin: 0 0 0.9rem; font-size: 0.92rem; }
.ppd-quiz-progress-text { font-size: 0.78rem; color: var(--ppd-muted); margin-bottom: 0.4rem; letter-spacing: 0.06em; text-transform: uppercase; }
.ppd-quiz-progress {
	width: 100%; height: 3px; background: var(--ppd-line); border-radius: 2px; overflow: hidden;
}
.ppd-quiz-progress-bar {
	height: 100%; width: 25%; background: var(--ppd-beige); transition: width .25s ease;
}

.ppd-quiz-body {
	padding: 1.2rem 1.5rem 0.4rem;
	flex: 1 1 auto;
	overflow-y: auto;
	min-height: 0;
}
/* Wizard panel visibility — bulletproof against theme overrides.
 * Sections carry both .ppd-quiz-panel and .ppd-step. The display rules
 * target the panel class with !important so theme `section { display: block }`
 * declarations can't expose inactive steps. */
.ppd-quiz .ppd-quiz-panel        { display: none  !important; }
.ppd-quiz .ppd-quiz-panel.is-active { display: block !important; }
.ppd-quiz-q { font-size: 1.12rem; font-weight: 500; text-align: center; margin: 0 0 0.35rem; }
.ppd-quiz-help { text-align: center; color: var(--ppd-muted); font-size: 0.88rem; margin: 0 0 0.9rem; }

.ppd-quiz-options { display: grid; gap: 0.55rem; }
.ppd-options-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ppd-options-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ppd-options-stack  { grid-template-columns: 1fr; }
.ppd-opt {
	position: relative; cursor: pointer;
	background: #fff; border: 1px solid var(--ppd-line);
	border-radius: 8px; padding: 0.9rem 0.7rem;
	display: flex; flex-direction: column; align-items: center;
	gap: 0.4rem; font-size: 0.88rem; text-align: center;
	color: var(--ppd-ink); transition: all .15s ease;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.35;
}
.ppd-opt .ppd-opt-label { display: inline-block; }
.ppd-opt:hover { border-color: var(--ppd-line-2); }
.ppd-opt .ppd-icon { color: var(--ppd-beige-2); width: 24px; height: 24px; }
.ppd-opt.is-selected { background: var(--ppd-cream2); border-color: var(--ppd-beige); }
.ppd-opt-check {
	position: absolute; top: 0.4rem; right: 0.4rem;
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--ppd-beige); color: #fff;
	display: none; align-items: center; justify-content: center;
	font-size: 0.7rem;
}
.ppd-opt.is-selected .ppd-opt-check { display: inline-flex; }

.ppd-opt-row {
	flex-direction: row; align-items: center; gap: 0.85rem;
	text-align: left; padding: 0.95rem 1rem;
}
.ppd-opt-row .ppd-icon { width: 22px; height: 22px; }
.ppd-opt-text { display: flex; flex-direction: column; flex: 1; }
.ppd-opt-title { font-weight: 500; }
.ppd-opt-desc { font-size: 0.82rem; color: var(--ppd-muted); margin-top: 0.1rem; }

.ppd-quiz-almost {
	display: flex; gap: 0.5rem; align-items: flex-start;
	margin-top: 1rem; padding: 0.75rem 0.9rem;
	background: var(--ppd-cream2); border-radius: 8px;
	font-size: 0.88rem;
}
.ppd-quiz-almost .ppd-icon { color: var(--ppd-beige-2); flex: 0 0 18px; margin-top: 2px; }

.ppd-quiz-error {
	min-height: 0;
	color: #a44a3a;
	font-size: 0.88rem;
	text-align: center;
	padding: 0 1.5rem;
	opacity: 0;
	transition: opacity .15s ease;
}
.ppd-quiz-error.is-visible {
	min-height: 1.2rem;
	opacity: 1;
	padding-bottom: 0.4rem;
}
.ppd-quiz-footer {
	display: flex; gap: 0.6rem;
	padding: 0.9rem 1.5rem 1rem;
	padding-bottom: calc(1rem + env(safe-area-inset-bottom));
	flex-shrink: 0;
	border-top: 1px solid var(--ppd-line);
	background: var(--ppd-cream);
}
.ppd-quiz-btn {
	flex: 1; padding: 0.85rem 1rem;
	border-radius: 8px; border: 1px solid var(--ppd-line-2);
	background: #fff; color: var(--ppd-ink); cursor: pointer;
	font-size: 0.95rem; transition: all .15s ease;
}
.ppd-quiz-btn:hover { border-color: var(--ppd-beige); }
.ppd-quiz-primary {
	background: var(--ppd-beige); border-color: var(--ppd-beige); color: #fff;
}
.ppd-quiz-primary:hover { background: var(--ppd-beige-2); border-color: var(--ppd-beige-2); }
.ppd-quiz-back { flex: 0 0 auto; }
.ppd-quiz-close-btn { flex: 1; }

.ppd-quiz-foot-note {
	display: flex; gap: 0.4rem; justify-content: center; align-items: center;
	font-size: 0.82rem; color: var(--ppd-muted);
	padding: 0 1.5rem 1rem;
	flex-shrink: 0;
}
.ppd-quiz-foot-note .ppd-icon { width: 14px; height: 14px; }

/* Mobile: near-full-screen card, NOT full screen. Visible backdrop, rounded. */
@media (max-width: 600px) {
	.ppd-quiz { padding: 16px 12px; }
	.ppd-quiz-modal {
		width: calc(100vw - 24px);
		max-width: none;
		max-height: calc(100vh - 32px);
		border-radius: 18px;
	}
	@supports (height: 100dvh) {
		.ppd-quiz-modal { max-height: calc(100dvh - 32px); }
	}
	.ppd-quiz-header { padding: 1.1rem 1.1rem 0; }
	.ppd-quiz-body   { padding: 1rem 1.1rem 0.4rem; }
	.ppd-quiz-footer { padding: 0.8rem 1.1rem 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
	.ppd-quiz-foot-note { padding: 0 1.1rem 0.9rem; }
	.ppd-options-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 360px) {
	.ppd-options-cols-3,
	.ppd-options-cols-2 { grid-template-columns: 1fr; }
}