.xs{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.9rem 1.2rem;margin:1.1rem 0 0;padding:1rem 1.2rem;border:2px dashed var(--line);border-radius:22px;background:var(--surface);min-width:0}.xs:has(input[value]:not([value="0"]):checked){border-style:solid;border-color:var(--red);box-shadow:0 0 0 4px #a3121b1a}.xs-img{display:block;width:84px;height:84px;border-radius:12px;overflow:hidden;background:var(--ground)}.xs-img img{width:100%;height:100%;object-fit:cover;display:block}.xs-txt{display:grid;gap:.25rem;min-width:0}.xs-txt b{font-family:Suez One,serif;font-weight:400;font-size:var(--step-1);line-height:1.2}.xs-txt span{font-family:Heebo,sans-serif;font-size:var(--step--1);color:var(--ink-soft);line-height:1.45}.xs-q{display:flex;gap:.4rem}.xs-q label{position:relative;cursor:pointer}.xs-q input{position:absolute;opacity:0;pointer-events:none}.xs-q span{display:grid;place-items:center;min-width:3rem;height:3rem;padding:0 .7rem;border:2px solid var(--line);border-radius:999px;font-family:Heebo,sans-serif;font-weight:800;font-size:var(--step-0);background:var(--cream);transition:background .2s,border-color .2s,color .2s}.xs-q input:checked+span{background:var(--red);border-color:var(--red);color:var(--cream)}.xs-q input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}@media(max-width:720px){.xs{grid-template-columns:auto 1fr;padding:.9rem}.xs-img{width:64px;height:64px}.xs-q{grid-column:1/-1}.xs-q label{flex:1}.xs-q span{min-width:0;width:100%}}.xs-card{display:grid;grid-template-columns:56px 1fr;gap:.4rem .8rem;align-items:center;margin:.8rem 0;padding:.8rem;border:2px dashed var(--line);border-radius:16px;background:var(--surface)}.xs-card img{width:56px;height:56px;border-radius:10px;object-fit:cover;grid-row:span 2}.xs-card b{font-family:Heebo,sans-serif;font-weight:800;font-size:var(--step-0);line-height:1.3}.xs-card small{font-family:Heebo,sans-serif;color:var(--ink-soft);font-size:var(--step--1);line-height:1.4}.xs-card button{grid-column:1/-1;margin-top:.3rem;font:inherit;font-family:Heebo,sans-serif;font-weight:800;font-size:var(--step--1);color:var(--red);background:transparent;border:2px solid var(--red);border-radius:999px;padding:.55rem 1rem;cursor:pointer}.xs-card button:hover{background:var(--red);color:var(--cream)}.xs-card button[aria-busy=true]{opacity:.6;pointer-events:none}.cd-panel [data-yn-xs] .xs-card{margin:.9rem 1.3rem}
/*# sourceMappingURL=/cdn/shop/t/10/assets/yansh-xsell.css.map */