.ayf{--gold:#7a4a0a;--gold2:#a8731f;--cream:#faf5ee;--ink:#3a2a1a;--mute:#8a7a68;max-width:1180px;margin:0 auto;padding:56px 20px;font-family:inherit;color:var(--ink)}
.ayf *{box-sizing:border-box}
.ayf-head{text-align:center;margin-bottom:36px}
.ayf-title{margin:0 0 8px;font-size:clamp(26px,4vw,38px);font-weight:600;color:var(--ink)}
.ayf-sub{margin:0;color:var(--mute);font-size:16px}
.ayf-avg{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:8px 18px;background:var(--cream);border-radius:999px;font-size:14px;color:var(--mute)}
.ayf-avg strong{font-size:20px;color:var(--gold)}
.ayf-stars{display:inline-flex;gap:2px;font-size:18px;line-height:1;direction:ltr}
.ayf-stars span{color:#e3d9cb}
.ayf-stars span.on{color:#d9a21b}

.ayf-slider{display:flex;align-items:center;gap:12px}
.ayf-track{flex:1;display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 2px 14px}
.ayf-track::-webkit-scrollbar{display:none}
.ayf-card{position:relative;flex:0 0 calc((100% - 40px)/3);scroll-snap-align:start;background:#fff;border:1px solid #efe5d6;border-radius:18px;padding:28px 24px 22px;box-shadow:0 8px 28px rgba(122,74,10,.07);display:flex;flex-direction:column;gap:14px;transition:transform .25s,box-shadow .25s}
.ayf-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(122,74,10,.13)}
.ayf-card::before{content:"\201D";position:absolute;top:6px;inset-inline-end:18px;font:700 64px/1 Georgia,serif;color:#f1e4cf}
.ayf-text{margin:0;font-size:15.5px;line-height:1.85;color:#4a3a2a;flex:1}
.ayf-by{display:flex;align-items:center;gap:10px;border-top:1px solid #f3ebdf;padding-top:14px}
.ayf-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#fff;display:grid;place-items:center;font-weight:600}
.ayf-name{font-weight:600;font-size:14.5px}
.ayf-card.is-sample{border-style:dashed;opacity:.9}
.ayf-ribbon{position:absolute;top:-11px;inset-inline-start:18px;background:#d9a21b;color:#fff;font-size:11px;padding:3px 10px;border-radius:999px}
.ayf-nav{flex:0 0 42px;height:42px;border-radius:50%;border:1px solid #e8dac4;background:#fff;color:var(--gold);font-size:24px;line-height:1;cursor:pointer;transition:.2s}
.ayf-nav:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.ayf-none{text-align:center;color:var(--mute)}

.ayf-formarea{max-width:560px;margin:40px auto 0;text-align:center}
.ayf-open,.ayf-send{background:var(--gold);color:#fff;border:0;padding:13px 30px;font-size:15px;letter-spacing:.3px;cursor:pointer;border-radius:4px;transition:.2s}
.ayf-open:hover,.ayf-send:hover{background:#5e3806}
.ayf-form{margin-top:22px;text-align:start;background:var(--cream);border-radius:18px;padding:26px;display:grid;gap:16px}
.ayf-form[hidden]{display:none}
.ayf-field{display:grid;gap:6px}
.ayf-field>span{font-size:14px;font-weight:600}
.ayf-field input[type=text],.ayf-field textarea{width:100%;padding:12px 14px;border:1px solid #e3d5bf;border-radius:10px;background:#fff;font:inherit}
.ayf-field input:focus,.ayf-field textarea:focus{outline:2px solid var(--gold2);outline-offset:1px}
.ayf-hp{position:absolute!important;left:-9999px!important;opacity:0;height:0;width:0}
.ayf-pick{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px;direction:ltr}
.ayf-pick input{position:absolute;opacity:0;pointer-events:none}
.ayf-pick label{font-size:32px;line-height:1;color:#e3d9cb;cursor:pointer;transition:color .15s,transform .15s}
.ayf-pick label:hover,.ayf-pick label:hover~label,.ayf-pick input:checked~label{color:#d9a21b}
.ayf-pick label:hover{transform:scale(1.12)}
.ayf-pick input:focus-visible+label{outline:2px solid var(--gold2);border-radius:4px}
.ayf-note{margin:0;font-size:14px;min-height:20px}
.ayf-note.ok{color:#2f7a3e}.ayf-note.bad{color:#b23a2e}

@media(max-width:900px){.ayf-card{flex-basis:calc((100% - 20px)/2)}}
@media(max-width:600px){.ayf{padding:40px 14px}.ayf-card{flex-basis:88%}.ayf-nav{display:none}}