@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400..600&display=swap');

.indizio-scent-match{--ism-ink:#1a1c1c;--ism-muted:#757575;--ism-line:#e5e5e5;--ism-paper:#fff;--ism-surface:#fff;--ism-soft:#f2f2f2;--ism-gold:#c5a059;--ism-gold-deep:#9c7a3d;--ism-gold-text:#8a6a2f;box-sizing:border-box;color:var(--ism-ink);font-family:'Inter',sans-serif!important;isolation:isolate;margin:0 auto;max-width:1200px;position:relative;scroll-margin-top:110px;width:100%;z-index:1}
.indizio-scent-match *{box-sizing:border-box}
.indizio-scent-match button,.indizio-scent-match a{font-family:inherit}
.indizio-scent-match button,.indizio-scent-match__path,.indizio-scent-match__tile,.indizio-scent-match__filters label,.indizio-scent-match__accord-pill{-webkit-user-select:none;-moz-user-select:none;user-select:none}
/*
 * Motyw ma globalną regułę "h1,h2,h3,h4,h5,h6{color:var(--theme_heading_color)}" — ta zmienna
 * motywu na desktopie wychodzi czarna (niewidoczny problem), ale na mobile jest biała (myślana
 * pod nakładkę na zdjęciu hero gdzie indziej w motywie), co robi biały tekst na naszych białych
 * tłach (np. "Pomóż mi wybrać" na karcie ścieżki). Reguła motywu celuje bezpośrednio w nagłówek,
 * więc wygrywa z dziedziczonym kolorem ustawionym na kontenerze-przodku, nawet z !important —
 * trzeba nadpisać nagłówki wprost.
 */
.indizio-scent-match h1,.indizio-scent-match h2,.indizio-scent-match h3{color:var(--ism-ink)!important}
.indizio-scent-match__start{background:var(--ism-paper)}
.indizio-scent-match__hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.94fr);min-height:560px}
.indizio-scent-match__hero-text{align-self:center;padding:56px 48px 56px 24px}
.indizio-scent-match__hero-text>span{color:var(--ism-muted);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.indizio-scent-match__results>header>span{color:var(--ism-muted);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.indizio-scent-match__hero-text h1{font-family:'Fraunces',serif;font-size:46px;font-weight:500;letter-spacing:-.01em;line-height:1.12;margin:18px 0 22px}
.indizio-scent-match__hero-text p{color:#4d4d4d;font-size:16px;line-height:1.65;margin:0 0 30px;max-width:460px}
.indizio-scent-match__trust{display:flex;flex-wrap:wrap;gap:22px;list-style:none;margin:0;padding:0}
.indizio-scent-match__trust li{align-items:center;color:var(--ism-muted);display:flex;font-size:13px;gap:8px}
.indizio-scent-match__trust svg{color:var(--ism-gold-deep);flex:0 0 auto;height:18px;width:18px}
.indizio-scent-match__hero-image{background-image:url('https://indizio.pl/wp-content/uploads/2026/08/Background-quiz.png');background-position:66% center;background-size:cover;position:relative}
.indizio-scent-match__hero-image:before{background:linear-gradient(90deg,var(--ism-paper) 0%,rgba(255,255,255,0) 100%);content:"";inset:0 auto 0 0;position:absolute;width:64px}
.indizio-scent-match__paths{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:-56px;padding:0 24px 64px;position:relative}
.indizio-scent-match__path{background:var(--ism-paper);border:1px solid var(--ism-line);border-radius:2px;color:var(--ism-ink)!important;display:flex;flex-direction:column;padding:32px 28px 28px;text-decoration:none!important;transition:border-color 180ms ease-out,box-shadow 180ms ease-out,transform 180ms ease-out}
.indizio-scent-match__path--primary{border-top:3px solid var(--ism-ink)}
.indizio-scent-match__path:hover{border-color:var(--ism-gold-deep);box-shadow:0 10px 28px rgba(26,28,28,.1);transform:translateY(-3px)}
.indizio-scent-match__path:focus-visible{outline:2px solid var(--ism-gold-deep);outline-offset:3px}
.indizio-scent-match__path-icon{color:var(--ism-ink);height:30px;width:30px}
.indizio-scent-match__path>span{color:var(--ism-muted);font-size:11px;font-weight:600;letter-spacing:.14em;margin-top:22px;text-transform:uppercase}
.indizio-scent-match__path h2{font-family:'Fraunces',serif;font-size:26px;font-weight:500;margin:8px 0 10px}
.indizio-scent-match__path p{color:var(--ism-muted);flex:1 1 auto;font-size:14px;line-height:1.55;margin:0 0 22px}
.indizio-scent-match__path strong{align-items:center;background:var(--ism-ink);color:#fff;display:inline-flex;font-size:11px;font-weight:600;gap:8px;justify-content:space-between;letter-spacing:.1em;padding:14px 18px;text-transform:uppercase;transition:background 160ms ease-out,transform 160ms ease-out}
.indizio-scent-match__path:hover strong{background:var(--ism-gold-deep)}
.indizio-scent-match__path:active strong{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){
	.indizio-scent-match__path{transition:none}
	.indizio-scent-match__path:hover{transform:none}
	.indizio-scent-match__path strong{transition:none}
	.indizio-scent-match__path:active strong{transform:none}
}
.indizio-scent-match__shell{background:var(--ism-surface);border:0;min-height:720px;padding:64px 24px}
.indizio-scent-match__header{margin:0 auto 32px;max-width:960px;text-align:center}
.indizio-scent-match__menu-link{color:var(--ism-muted);display:block;font-size:11px;font-weight:600;letter-spacing:.1em;margin-bottom:18px;text-decoration:none;text-transform:uppercase;text-align:left}
.indizio-scent-match__menu-link:hover{color:var(--ism-ink)}
.indizio-scent-match__header-top{align-items:center;display:flex;justify-content:space-between;text-align:left}
.indizio-scent-match__step-label{color:var(--ism-ink);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.indizio-scent-match__reset{align-items:center;background:none;border:0;color:var(--ism-muted);cursor:pointer;display:inline-flex;font-size:13px;font-weight:500;gap:7px}
/*
 * !important na background/box-shadow: motyw ma globalną regułę "button:hover" z czarnym tłem
 * (najpewniej z Themify Builder), która potrafi wygrać specyficznością/kolejnością z naszym
 * selektorem. Bez wymuszenia hover na tym przycisku daje czarny tekst na czarnym tle — niewidoczny.
 */
.indizio-scent-match__reset:hover{background:none!important;box-shadow:none!important;color:var(--ism-ink)}
.indizio-scent-match__reset svg{height:16px;width:16px}
.indizio-scent-match__progress{background:var(--ism-line);border-radius:99px;height:4px;margin:18px 0 0;overflow:hidden}
.indizio-scent-match__progress i{background:var(--ism-ink);display:block;height:100%;transition:width 250ms ease-out}
.indizio-scent-match__path-eyebrow{color:var(--ism-muted);display:block;font-size:11px;font-weight:600;letter-spacing:.18em;margin-top:28px;text-transform:uppercase}
.indizio-scent-match__summary{background:var(--ism-paper);border:1px solid var(--ism-line);color:var(--ism-muted);display:inline-block;font-size:12px;line-height:1.5;margin:14px 0 0;padding:10px 14px}
.indizio-scent-match__summary:empty{display:none}
.indizio-scent-match__form{margin:0 auto;max-width:1080px}
.indizio-scent-match__step{display:none;padding:24px 0 12px;text-align:center}
.indizio-scent-match__step.is-active{display:block}
.indizio-scent-match__step h2{font-family:'Fraunces',serif;font-size:44px;font-weight:500;letter-spacing:-.01em;line-height:1.15;margin:0 auto;max-width:850px}
.indizio-scent-match__step>p{color:var(--ism-muted);font-size:16px;line-height:1.6;margin:14px 0 36px}
.indizio-scent-match__field-label{display:block;font-size:14px;font-weight:600;margin-bottom:10px;text-align:left}
.indizio-scent-match__field-hint{color:var(--ism-muted);font-size:13px;line-height:1.6;margin:12px 0 0;text-align:left}
.indizio-scent-match__grid{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}
.indizio-scent-match__grid--compact{grid-template-columns:repeat(3,minmax(0,1fr))}
.indizio-scent-match__grid--seasons{grid-template-columns:repeat(4,minmax(0,1fr))}
.indizio-scent-match__tile{aspect-ratio:4/5;border-radius:3px;cursor:pointer;display:block;min-width:0;overflow:hidden;position:relative;text-align:left}
.indizio-scent-match__tile input{height:1px;opacity:0;position:absolute;width:1px}
.indizio-scent-match__tile i{background-color:#e2ddd2;background-image:var(--ism-image,linear-gradient(145deg,#f5f5f5,#d8d8d8));background-position:center;background-size:cover;border-radius:inherit;display:block;font-style:normal;height:100%;position:absolute;inset:0;transition:transform .35s ease}
.indizio-scent-match__tile:before{background-image:linear-gradient(180deg,rgba(10,8,4,0) 45%,rgba(10,8,4,.82) 100%);border-radius:inherit;content:"";inset:0;position:absolute;z-index:1}
.indizio-scent-match__tile span{bottom:14px;color:#fff;font-size:12px;font-weight:600;left:14px;letter-spacing:.05em;line-height:1.3;position:absolute;right:44px;text-shadow:0 1px 6px rgba(0,0,0,.35);z-index:2}
.indizio-scent-match__tile:after{align-items:center;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.85);border-radius:50%;color:#fff;content:"✓";display:flex;font-size:12px;font-weight:700;height:24px;justify-content:center;opacity:0;position:absolute;right:12px;top:12px;transition:.2s;width:24px;z-index:2}
.indizio-scent-match__tile:hover i{transform:scale(1.04)}
.indizio-scent-match__tile input:focus+i{outline:2px solid var(--ism-gold);outline-offset:2px}
.indizio-scent-match__tile.is-selected{box-shadow:0 0 0 2px var(--ism-gold)}
.indizio-scent-match__tile.is-selected:after{background:var(--ism-gold);border-color:var(--ism-gold);color:var(--ism-ink);opacity:1}
.indizio-scent-match__grid--compact .indizio-scent-match__tile,.indizio-scent-match__grid--seasons .indizio-scent-match__tile{aspect-ratio:4/3}
.indizio-scent-match__validation{color:#9e2424;font-size:13px}
.indizio-scent-match__filters{border:0;margin:0 auto 25px;max-width:900px;padding:0}
.indizio-scent-match__filters legend{font-size:20px;font-weight:600;margin-bottom:12px;text-align:center}
.indizio-scent-match__filters label{display:inline-block;margin:0 8px 8px 0}
.indizio-scent-match__filters input{height:1px;opacity:0;position:absolute;width:1px}
.indizio-scent-match__filters span{background:#fff;border:1px solid #9c9280;border-radius:3px;color:var(--ism-ink);cursor:pointer;display:block;font-size:13px;font-weight:500;padding:12px 18px;transition:border-color .15s,background .15s}
.indizio-scent-match__filters input:hover+span{border-color:var(--ism-ink)}
.indizio-scent-match__filters input:focus-visible+span{outline:2px solid var(--ism-gold-deep);outline-offset:2px}
.indizio-scent-match__filters input:checked+span{background:var(--ism-ink);border-color:var(--ism-ink);color:#fff}
.indizio-scent-match__actions{border-top:0;display:grid;gap:16px;grid-template-columns:1fr 1fr;margin:36px auto 0;max-width:700px;padding-top:0}
.indizio-scent-match__actions button,.indizio-scent-match__results header button,.indizio-scent-match__results>[data-retry],.indizio-scent-match__load-more{align-items:center;background:var(--ism-ink);border:1px solid var(--ism-ink);border-radius:2px;color:#fff;cursor:pointer;display:inline-flex;font-size:11px;font-weight:600;gap:10px;justify-content:center;letter-spacing:.12em;min-width:130px;padding:17px 22px;text-transform:uppercase;transition:background 160ms ease-out,transform 160ms ease-out}
.indizio-scent-match__actions button:active,.indizio-scent-match__load-more:active{transform:scale(.98)}
.indizio-scent-match__load-more{display:block;margin:32px auto 0}
.indizio-scent-match__actions .indizio-scent-match__back{background:#fff;color:var(--ism-ink)}
/* Ta sama poprawka co .indizio-scent-match__reset:hover wyżej — motyw nadpisuje tło buttonów na hover. */
.indizio-scent-match__actions button:hover:not(:disabled){background:var(--ism-gold-deep)!important;border-color:var(--ism-gold-deep)!important;color:#fff!important}
.indizio-scent-match__actions button svg{flex:0 0 auto;height:16px;width:16px}
.indizio-scent-match button:disabled{background:var(--ism-soft)!important;border-color:var(--ism-line)!important;color:var(--ism-muted)!important;cursor:not-allowed;opacity:1}
@media(prefers-reduced-motion:reduce){
	.indizio-scent-match__actions button,.indizio-scent-match__load-more{transition:none}
	.indizio-scent-match__actions button:active,.indizio-scent-match__load-more:active{transform:none}
}
.indizio-scent-match__loading{padding:100px 20px;text-align:center}
.indizio-scent-match__loading i{animation:ism-spin .8s linear infinite;border:2px solid #ddd;border-radius:50%;border-top-color:#111;display:inline-block;height:38px;width:38px}
@keyframes ism-spin{to{transform:rotate(360deg)}}
.indizio-scent-match__results{margin:0 auto;max-width:1120px}
.indizio-scent-match__results>header{border-bottom:0;margin-bottom:32px;padding-bottom:0}
.indizio-scent-match__results>header h2{font-size:48px;letter-spacing:-.02em;margin:8px 0 12px}
.indizio-scent-match__results>header>p{color:var(--ism-muted);font-size:14px}
.indizio-scent-match__results>header>.indizio-scent-match__toolbar{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.indizio-scent-match__results>header button{background:#fff;color:var(--ism-ink);min-width:0;padding:10px 13px}
.indizio-scent-match__criteria{background:#fff;border:1px solid var(--ism-line);border-radius:4px;display:inline-block;margin-top:14px;padding:16px}
.indizio-scent-match__criteria small{color:var(--ism-muted);display:block;font-size:10px;font-weight:600;letter-spacing:.12em;margin-bottom:8px;text-transform:uppercase}
.indizio-scent-match__criteria>div{display:flex;flex-wrap:wrap;gap:6px}
.indizio-scent-match__criteria span{background:var(--ism-soft);border-radius:3px;font-size:11px;padding:7px 10px}
.indizio-scent-match__result{align-items:center;background:#fff;border:1px solid var(--ism-line);border-radius:3px;display:grid;gap:16px;grid-template-columns:26px 56px 1fr 150px 96px 44px;margin-bottom:8px;padding:12px 16px;position:relative;transition:border-color .15s,box-shadow .15s}
.indizio-scent-match__result:first-of-type{border-color:var(--ism-gold);box-shadow:0 4px 18px rgba(197,160,89,.18)}
.indizio-scent-match__position{color:var(--ism-muted);font-size:16px;text-align:center}
.indizio-scent-match__result:first-of-type .indizio-scent-match__position{color:var(--ism-gold-text)}
.indizio-scent-match__result>img{aspect-ratio:1/1;border-radius:2px;object-fit:cover;width:100%}
.indizio-scent-match__result-body{min-width:0}
.indizio-scent-match__result-body small{color:var(--ism-muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.indizio-scent-match__result-body h3{font-size:16px;font-weight:600;margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.indizio-scent-match__result-body h3 a{color:inherit;text-decoration:none}
.indizio-scent-match__result-body h3 a:hover{text-decoration:underline}
.indizio-scent-match__sample-link{color:var(--ism-gold-text);display:inline-block;font-size:11px;font-weight:600;margin-top:4px;text-decoration:none}
.indizio-scent-match__sample-link:hover{text-decoration:underline}
.indizio-scent-match__match{display:flex;flex-direction:column;gap:6px}
.indizio-scent-match__match i{background:var(--ism-soft);border-radius:99px;display:block;height:4px;font-style:normal;overflow:hidden}
.indizio-scent-match__match b{background:linear-gradient(90deg,var(--ism-gold) 0%,var(--ism-gold-deep) 100%);display:block;height:100%}
.indizio-scent-match__match span{color:var(--ism-muted);font-size:11px}
.indizio-scent-match__capacities{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.indizio-scent-match__capacity{background:#fff;border:1px solid #9c9280;border-radius:2px;color:var(--ism-ink);cursor:pointer;font-size:10px;font-weight:600;letter-spacing:.04em;padding:5px 10px}
.indizio-scent-match__capacity:focus-visible{outline:2px solid var(--ism-gold-text);outline-offset:2px}
.indizio-scent-match__capacity.is-active{background:var(--ism-ink);border-color:var(--ism-ink);color:#fff}
.indizio-scent-match__price{font-size:14px;font-weight:600;text-align:right}
.indizio-scent-match__cart{align-items:center;background:var(--ism-ink);border-radius:50%;color:#fff;display:flex;height:44px;justify-content:center;text-decoration:none;transition:background .15s;width:44px}
.indizio-scent-match__cart:hover{background:var(--ism-gold-deep)}
.indizio-scent-match__cart:focus-visible,.indizio-scent-match__result-body h3 a:focus-visible,.indizio-scent-match__sample-link:focus-visible{outline:2px solid var(--ism-gold-text);outline-offset:2px}
.indizio-scent-match__cart[hidden]{visibility:hidden}
.indizio-scent-match__empty{background:var(--ism-soft);padding:32px;text-align:center}
.indizio-scent-match__soon{background:#fff;border:1px solid var(--ism-line);padding:90px 30px;text-align:center}
.indizio-scent-match__soon span{font-size:11px;letter-spacing:.15em}
.indizio-scent-match__soon h2{font-size:42px;margin:12px}
.indizio-scent-match__soon a{background:var(--ism-ink);color:#fff;display:inline-block;margin-top:15px;padding:13px 20px;text-decoration:none}

.indizio-scent-match__accord-group{border:0;margin:0 auto 20px;max-width:900px;padding:0;text-align:left}
.indizio-scent-match__accord-group legend{font-size:16px;font-weight:600;margin-bottom:10px;width:100%}
.indizio-scent-match__accord-pill{display:inline-block;margin:0 8px 8px 0}
.indizio-scent-match__accord-pill input{height:1px;opacity:0;position:absolute;width:1px}
.indizio-scent-match__accord-pill span{background:#fff;border:1px solid #9c9280;border-radius:20px;color:var(--ism-ink);cursor:pointer;display:block;font-size:13px;font-weight:500;padding:9px 16px;transition:border-color .15s,background .15s}
.indizio-scent-match__accord-pill input:hover+span{border-color:var(--ism-ink)}
.indizio-scent-match__accord-pill input:focus-visible+span{outline:2px solid var(--ism-gold-deep);outline-offset:2px}
.indizio-scent-match__accord-pill input:checked+span{background:var(--ism-ink);border-color:var(--ism-ink);color:#fff}
.indizio-scent-match__accord-strengths{margin:28px auto 0;max-width:640px;text-align:left}
.indizio-scent-match__accord-strengths h3{font-size:18px;font-weight:600;margin:0 0 14px;text-align:center}
.indizio-scent-match__accord-strength{align-items:center;display:grid;gap:14px;grid-template-columns:140px 1fr 46px;margin-bottom:12px}
.indizio-scent-match__accord-strength span{font-size:13px;font-weight:500;text-align:left}
.indizio-scent-match__accord-strength input[type="range"]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;height:20px;width:100%}
.indizio-scent-match__accord-strength input[type="range"]::-webkit-slider-runnable-track{background:var(--ism-soft);border-radius:99px;height:4px}
.indizio-scent-match__accord-strength input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--ism-ink);border-radius:50%;height:18px;margin-top:-7px;width:18px}
.indizio-scent-match__accord-strength input[type="range"]::-moz-range-track{background:var(--ism-soft);border-radius:99px;height:4px}
.indizio-scent-match__accord-strength input[type="range"]::-moz-range-thumb{background:var(--ism-ink);border:0;border-radius:50%;height:18px;width:18px}
.indizio-scent-match__accord-strength input[type="range"]:focus-visible{outline:2px solid var(--ism-gold-deep);outline-offset:4px}
.indizio-scent-match__accord-strength b{color:var(--ism-muted);font-size:12px;font-weight:600;text-align:right}

.indizio-scent-match__reference-search{margin:0 auto;max-width:520px;position:relative;text-align:left}
.indizio-scent-match__reference-input-wrap{position:relative}
.indizio-scent-match__reference-input-icon{color:var(--ism-muted);height:20px;left:16px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);width:20px}
/*
 * Podwojony selektor klasy (zamiast samego .indizio-scent-match__reference-input) celowo —
 * motyw WordPress ma globalny styl input[type=text] (specyficzność 0,1,1: atrybut+element),
 * który bije pojedynczą klasę (0,1,0) i nadpisywał obramowanie/padding/szerokość mimo
 * poprawnych deklaracji tutaj. Zweryfikowane na żywo przed zapisem.
 */
.indizio-scent-match .indizio-scent-match__reference-input{background:#fff;border:1.5px solid var(--ism-ink);border-radius:3px;font-size:15px;height:auto;padding:14px 18px 14px 48px;width:100%}
.indizio-scent-match__reference-input::placeholder{color:var(--ism-muted)}
.indizio-scent-match__reference-input:focus-visible{outline:2px solid var(--ism-gold-deep);outline-offset:2px}
.indizio-scent-match__reference-results{background:#fff;border:1px solid var(--ism-line);border-radius:3px;box-shadow:0 8px 24px rgba(0,0,0,.1);left:0;margin-top:4px;max-height:320px;overflow-y:auto;position:absolute;right:0;z-index:5}
.indizio-scent-match__reference-results .indizio-scent-match__empty{background:transparent;font-size:13px;padding:16px}
.indizio-scent-match__reference-option{align-items:center;background:#fff;border:0;border-bottom:1px solid var(--ism-line);color:var(--ism-ink);cursor:pointer;display:flex;gap:12px;padding:10px 14px;text-align:left;width:100%}
.indizio-scent-match__reference-option:last-child{border-bottom:0}
.indizio-scent-match__reference-option:hover,.indizio-scent-match__reference-option:focus-visible{background:var(--ism-soft)}
.indizio-scent-match__reference-option img{border-radius:2px;flex:0 0 40px;height:40px;object-fit:cover;width:40px}
.indizio-scent-match__reference-option span{color:var(--ism-ink);font-size:13px;line-height:1.4}
.indizio-scent-match__reference-option small{color:var(--ism-muted);display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
/*
 * [hidden] dopisany do WŁASNEJ reguły "display:none" — element ma atrybut hidden dopóki
 * klient nie wybierze zapachu, ale poniższe "display:flex" ma tę samą specyficzność (0,1,0)
 * co przeglądarkowe [hidden]{display:none} i wygrywało kolejnością w kaskadzie, więc pusty
 * box z GOLD obramowaniem renderował się cały czas, myląc klientów (zgłoszone przez usera).
 */
.indizio-scent-match__reference-selected[hidden]{display:none}
.indizio-scent-match__reference-selected{align-items:center;background:#fff;border:1px solid var(--ism-gold);border-radius:3px;display:flex;gap:14px;margin:16px auto 0;max-width:520px;padding:12px 16px}
.indizio-scent-match__reference-selected img{border-radius:2px;flex:0 0 48px;height:48px;object-fit:cover;width:48px}
.indizio-scent-match__reference-selected span{flex:1 1 auto;font-size:14px;line-height:1.4;text-align:left}
.indizio-scent-match__reference-selected small{color:var(--ism-muted);display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.indizio-scent-match__reference-selected button{background:transparent;border:0;color:var(--ism-muted);cursor:pointer;font-size:22px;line-height:1;padding:4px}
.indizio-scent-match__reference-selected button:hover{color:var(--ism-ink)}
.indizio-scent-match__reference-selected button:focus-visible{outline:2px solid var(--ism-gold-deep);outline-offset:2px}

@media(max-width:850px){
	.indizio-scent-match__hero{grid-template-columns:1fr;min-height:0}
	.indizio-scent-match__hero-text{padding:40px 24px 32px}
	.indizio-scent-match__hero-image{height:260px}
	.indizio-scent-match__hero-image:before{display:none}
	.indizio-scent-match__paths{grid-template-columns:1fr;margin-top:0;padding:0 24px 48px}
	.indizio-scent-match__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:650px){
	.indizio-scent-match{scroll-margin-top:100px}
	.indizio-scent-match__hero-text{padding:32px 18px 28px}
	.indizio-scent-match__hero-text h1{font-size:32px}
	.indizio-scent-match__hero-text p{font-size:14px}
	.indizio-scent-match__hero-image{height:180px}
	.indizio-scent-match__paths{padding:0 16px 44px}
	.indizio-scent-match__shell{min-height:650px;padding:28px 10px}
	.indizio-scent-match__header{padding:0 0 20px;text-align:left}
	.indizio-scent-match__reset span{display:none}
	.indizio-scent-match__path-eyebrow{margin-top:20px}
	.indizio-scent-match__summary{display:none}
	.indizio-scent-match__step{padding:18px 0 6px;text-align:left}
	.indizio-scent-match__step h2{font-size:32px;line-height:1.15}
	.indizio-scent-match__step>p{font-size:14px;margin:12px 0 22px}
	.indizio-scent-match__grid,.indizio-scent-match__grid--compact,.indizio-scent-match__grid--seasons{display:flex;flex-direction:column;gap:8px}
	.indizio-scent-match__tile{align-items:center;aspect-ratio:auto;background:#fff;border:1px solid var(--ism-line);border-radius:4px;box-shadow:0 3px 10px rgba(0,0,0,.04);display:grid;grid-template-columns:24px 1fr 48px;min-height:66px;overflow:visible;padding:8px 9px}
	/*
	 * Reset dla kroku 2/3 (okazja, sezon): poza media query jest reguła
	 * ".indizio-scent-match__grid--compact .indizio-scent-match__tile, ...--seasons ..."
	 * z aspect-ratio:4/3 i specyficznością 2 klas — bije powyższy reset na mobile (1 klasa),
	 * mimo że jest deklarowana wcześniej w pliku. Bez tego kroki 2/3 dostają wysokie,
	 * "pudełkowe" kafelki 4:3 zamiast płaskiego układu wierszowego jak krok 1.
	 */
	.indizio-scent-match__grid--compact .indizio-scent-match__tile,.indizio-scent-match__grid--seasons .indizio-scent-match__tile{aspect-ratio:auto}
	.indizio-scent-match__tile:before{background-image:none;border:1px solid #999;border-radius:50%;content:"";height:18px;inset:auto;position:static;width:18px;z-index:auto}
	.indizio-scent-match__tile:after{background:var(--ism-ink);border:0;height:18px;left:9px;right:auto;top:24px;width:18px}
	.indizio-scent-match__tile i,.indizio-scent-match__grid--compact .indizio-scent-match__tile i,.indizio-scent-match__grid--seasons .indizio-scent-match__tile i{background-image:var(--ism-image,linear-gradient(145deg,#eee,#bbb));border:0;border-radius:9px;grid-column:3;height:48px;position:static;width:48px}
	.indizio-scent-match__tile span{background:transparent;border:0;bottom:auto;color:var(--ism-ink);font-size:13px;grid-column:2;grid-row:1;left:auto;letter-spacing:0;padding:0 8px;position:static;right:auto;text-align:left;text-shadow:none;text-transform:none}
	.indizio-scent-match__tile:hover i{transform:none}
	.indizio-scent-match__tile input:checked+i{filter:none}
	.indizio-scent-match__filters{text-align:left}
	.indizio-scent-match__filters legend{text-align:left}
	.indizio-scent-match__actions{background:var(--ism-paper);bottom:0;margin:0;max-width:none;padding:14px 10px;position:sticky;z-index:3}
	.indizio-scent-match__results>header h2{font-size:36px}
	.indizio-scent-match__result{align-items:flex-start;display:flex;flex-wrap:wrap;gap:8px 12px;padding:14px}
	.indizio-scent-match__position{flex:0 0 auto;font-size:13px;order:0}
	.indizio-scent-match__result>img{flex:0 0 52px;height:52px;order:1;width:52px}
	.indizio-scent-match__result-body{flex:1 1 auto;min-width:0;order:2}
	.indizio-scent-match__result-body h3{font-size:15px;white-space:normal}
	.indizio-scent-match__match{flex:0 0 100%;order:3}
	.indizio-scent-match__price{flex:1 1 auto;order:4;text-align:left}
	.indizio-scent-match__cart{flex:0 0 auto;order:5}
	.indizio-scent-match__accord-strength{grid-template-columns:96px 1fr 38px;gap:8px}
	.indizio-scent-match__reference-selected{flex-wrap:wrap}
}

@media(max-width:390px){
	.indizio-scent-match__path h2{font-size:22px}
}