/* Find your light (configurator) — theme-owned, not touched by the port. */
.fyl-hero{padding:40px 0 10px;text-align:center}
.fyl-hero .ey{margin-bottom:22px}
.fyl-hero h1{font-size:40px;font-weight:400;letter-spacing:-.035em;line-height:1.02;margin:0 auto;max-width:24ch}
.fyl-hero p{font-size:16px;font-weight:350;line-height:1.55;color:var(--ink-2);max-width:52ch;margin:18px auto 0}
.fyl-body{padding:34px 0 140px}
.fyl-app{max-width:920px;margin:0 auto;opacity:0;transform:translateY(8px)}
.fyl-app.is-in{animation:fyl-in .45s var(--ease) forwards}
@keyframes fyl-in{to{opacity:1;transform:none}}

/* progress */
.fyl-prog{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:46px}
.fyl-bar{display:flex;gap:6px;width:min(100%,360px)}
.fyl-bar span{flex:1;height:3px;border-radius:2px;background:var(--line);transition:background .4s var(--ease)}
.fyl-bar span.done,.fyl-bar span.on{background:var(--ink)}
.fyl-bar span.on{opacity:.55}
.fyl-count{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--muted)}

/* question + options */
.fyl-q{font-size:32px;font-weight:300;letter-spacing:-.025em;line-height:1.1;text-align:center;margin:0 0 34px}
.fyl-opts{display:grid;gap:12px}
.fyl-opts--grid{grid-template-columns:repeat(3,1fr)}
.fyl-opts--wide{grid-template-columns:repeat(2,1fr)}
.fyl-opt{position:relative;display:flex;align-items:center;gap:14px;text-align:left;padding:20px 52px 20px 20px;min-height:74px;background:#fff;border:1px solid var(--line);border-radius:16px;font-family:var(--font);color:var(--ink);cursor:pointer;transition:border-color .3s var(--ease),box-shadow .4s var(--ease),transform .3s var(--ease)}
.fyl-opt:hover{border-color:#cfd4d9;box-shadow:0 14px 34px rgba(10,14,19,.08)}
.fyl-opt:focus-visible{outline:none;box-shadow:0 0 0 2px var(--blue)}
.fyl-opt .t{display:flex;flex-direction:column;gap:3px;min-width:0}
.fyl-opt b{font-size:16px;font-weight:500;letter-spacing:-.01em;line-height:1.25}
.fyl-opt small{font-size:13px;font-weight:300;line-height:1.4;color:var(--body)}
.fyl-opt .chk{position:absolute;top:50%;right:18px;width:20px;height:20px;margin-top:-10px;border-radius:50%;border:1.5px solid var(--faint);transition:background .3s var(--ease),border-color .3s var(--ease)}
.fyl-opt .chk::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-62%) rotate(45deg) scale(0);transition:transform .25s var(--ease)}
.fyl-opt.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.fyl-opt.on .chk{background:var(--ink);border-color:var(--ink)}
.fyl-opt.on .chk::after{transform:translate(-50%,-62%) rotate(45deg) scale(1)}
.fyl-opt.sug{border-color:#cfd4d9}
.fyl-opt .tag{position:absolute;top:-9px;left:16px;padding:2px 8px;border-radius:20px;background:var(--ink);color:#fff;font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-style:normal;font-weight:500}
.fyl-opt .sw{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line)}
.sw-w{background:#f2f4f6}
.sw-b{background:#0a87d8;border-color:#0a87d8}
.sw-d{background:linear-gradient(90deg,#f2f4f6 50%,#0a87d8 50%)}
.sw-rgbw{background:conic-gradient(#ff3b30,#ffcc00,#34c759,#5ac8fa,#af52de,#ff3b30);border-color:transparent}
.sw-c{background:#2ec4c4;border-color:#2ec4c4}
.sw-a{background:#f0a531;border-color:#f0a531}

/* quantity */
.fyl-qty{margin:34px auto 0;text-align:center;transition:opacity .3s var(--ease)}
.fyl-qty.is-off{opacity:.35;pointer-events:none}
.fyl-qty label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--muted);margin-bottom:14px}
.fyl-qty .stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:40px;overflow:hidden}
.fyl-qty .stepper button{width:48px;height:48px;border:0;background:#fff;font-family:var(--font);font-size:20px;color:var(--ink);cursor:pointer}
.fyl-qty .stepper button:hover{background:var(--soft)}
.fyl-qty .stepper input{width:64px;height:48px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-family:var(--font);font-size:18px;font-weight:400;color:var(--ink);background:#fff;-moz-appearance:textfield}
.fyl-qty .stepper input::-webkit-outer-spin-button,.fyl-qty .stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fyl-qty small{display:block;margin-top:12px;font-size:13px;font-weight:300;color:var(--muted)}

/* navigation */
.fyl-nav{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:44px}
.fyl-nav .fyl-back,.fyl-nav .fyl-restart{border:0;background:none;font-family:var(--font);font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;padding:10px 6px}
.fyl-nav .fyl-back:disabled{opacity:.3;cursor:default}
.fyl-nav .fyl-next{display:inline-flex;align-items:center;justify-content:center;min-width:170px;height:50px;padding:0 30px;border-radius:40px;border:0;background:var(--ink);color:#fff;font-family:var(--font);font-size:14px;font-weight:500;letter-spacing:.01em;cursor:pointer;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.fyl-nav .fyl-next:hover{transform:translateY(-1px)}
.fyl-nav .fyl-next:disabled{opacity:.25;cursor:default;transform:none}

/* result */
.fyl-result>.ey{text-align:center;margin:-14px 0 22px}
.fyl-card{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:44px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px;overflow:hidden}
.fyl-card .img{aspect-ratio:1;border-radius:16px;background:#fafafa center/cover no-repeat}
.fyl-card h2{font-size:34px;font-weight:400;letter-spacing:-.025em;line-height:1.05;margin:4px 0 12px}
.fyl-card .blurb{font-size:15px;font-weight:350;line-height:1.55;color:var(--ink-2);margin:0 0 18px}
.fyl-card .pick{font-size:15px;font-weight:500;color:var(--ink);padding:12px 14px;border-radius:12px;background:var(--soft);margin-bottom:18px}
.fyl-card .finish{display:flex;align-items:center;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.fyl-card .finish .lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--muted);margin-right:4px}
.fyl-card .finish button{border:1px solid var(--line);background:#fff;border-radius:30px;padding:7px 14px;font-family:var(--font);font-size:13px;font-weight:500;color:var(--ink);cursor:pointer}
.fyl-card .finish button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.fyl-card .facts{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin:0 0 20px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fyl-card .facts dt{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.fyl-card .facts dd{margin:3px 0 0;font-size:15px;font-weight:400;color:var(--ink)}
.fyl-card .why{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:8px}
.fyl-card .why li{position:relative;padding-left:24px;font-size:14px;font-weight:350;line-height:1.45;color:var(--ink-2)}
.fyl-card .why li::before{content:"";position:absolute;left:0;top:4px;width:13px;height:13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1115' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.fyl-card .notes p{font-size:13px;font-weight:350;line-height:1.5;color:var(--muted);margin:0 0 6px}
.fyl-card .acts{display:flex;align-items:center;gap:22px;margin-top:22px;flex-wrap:wrap}
/* the site's .btn (yphos.css) in black, ghost on hover; the site's .lnk with the sliding arrow */
.fyl-card .acts .btn{background:var(--ink);border-color:var(--ink);color:#fff;font-size:14px;padding:12px 30px}
.fyl-card .acts .btn:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
@media(hover:none){.fyl-card .acts .btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}}
.fyl-card .acts .lnk{font-size:14px}
.fyl-alt .ar{transition:transform .4s var(--ease)}
.fyl-alt:hover .ar{transform:translateX(5px)}
.fyl-alt{display:flex;align-items:center;gap:18px;margin-top:14px;padding:16px 22px 16px 16px;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--ink);transition:border-color .3s var(--ease),box-shadow .4s var(--ease)}
.fyl-alt:hover{border-color:#cfd4d9;box-shadow:0 14px 34px rgba(10,14,19,.08)}
.fyl-alt .img{flex:none;width:72px;height:72px;border-radius:12px;background:#fafafa center/cover no-repeat}
.fyl-alt .t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.fyl-alt .ey{margin:0 0 2px}
.fyl-alt b{font-size:16px;font-weight:500}
.fyl-alt small{font-size:13px;font-weight:400;color:var(--body)}
.fyl-alt .ar{color:var(--muted)}
.fyl-nav--end{position:relative;justify-content:center;margin-top:36px}
.fyl-nav .fyl-restart{display:inline-flex;align-items:center;gap:8px;padding:10px 6px;font-size:14px;font-weight:500;color:var(--ink)}
.fyl-restart .ic{display:inline-grid;place-items:center;width:16px;height:16px;color:var(--ink);transition:transform .5s var(--ease)}
.fyl-restart .ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fyl-restart:hover .ic{transform:rotate(-40deg)}
.fyl-nav--end .fyl-back{position:absolute;left:0;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:400;font-size:13px}
.fyl-nav--end .fyl-back:hover{color:var(--ink)}
.fyl-more{margin-top:80px}

@media(max-width:900px){.fyl-card{grid-template-columns:1fr;gap:26px;padding:22px}.fyl-card .img{max-width:420px}}
@media(max-width:760px){.fyl-opts--grid,.fyl-opts--wide{grid-template-columns:1fr 1fr}.fyl-hero h1{font-size:32px;max-width:20ch}.fyl-hero p{font-size:15px;font-weight:350;line-height:1.4}.fyl-q{font-size:26px;margin-bottom:26px}.fyl-body{padding-bottom:100px}}
@media(max-width:520px){.fyl-opts--wide{grid-template-columns:1fr}.fyl-opt{padding:16px 46px 16px 16px;min-height:62px;border-radius:14px}.fyl-opt b{font-size:15px}.fyl-opts--grid .fyl-opt small{display:none}.fyl-nav{gap:14px}.fyl-nav .fyl-next{min-width:140px}.fyl-card h2{font-size:28px}.fyl-card .acts .btn{width:100%}}