/**
 * "Ask a Question" (#87): the product-page Questions section, the Ask
 * lightbox, and My Account › My Questions. Ported from the reference
 * questions.js (.ts-q-*). Markup: inc/questions.php.
 */
.ts-q,.ts-q *,.ts-q-ov,.ts-q-ov *{box-sizing:border-box}
.ts-q,.ts-q-ov{font-family:"Inter",system-ui,sans-serif;color:#1C1A18;font-size:14px;line-height:1.5}
.ts-q-btn{border:1px solid #1C1A18;background:#1C1A18;color:#fff;border-radius:4px;padding:11px 20px;font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;text-decoration:none;display:inline-block}
.ts-q-btn:hover{background:#B48970;border-color:#B48970}
.ts-q-btn.ghost{background:#fff;color:#1C1A18}
.ts-q-btn.ghost:hover{background:#1C1A18;color:#fff;border-color:#1C1A18}
/* "Sending" + three travelling dots, so the button visibly does something
   while the question is in flight. Opacity, not `content`, because animated
   ::after content is not reliable across browsers. */
.ts-q-btn[aria-busy="true"]{display:inline-flex;align-items:center;gap:2px;cursor:progress;opacity:1}
.ts-q-dots{display:inline-flex;align-items:flex-end;gap:2px;margin-left:1px}
.ts-q-dots i{width:3px;height:3px;border-radius:50%;background:currentColor;animation:ts-q-dot 1.4s infinite both}
.ts-q-dots i:nth-child(2){animation-delay:.2s}
.ts-q-dots i:nth-child(3){animation-delay:.4s}
@keyframes ts-q-dot{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media (prefers-reduced-motion: reduce){.ts-q-dots i{animation:none;opacity:.6}}
.ts-q-btn.small{padding:7px 12px;font-size:11px}
.ts-q-pill{display:inline-block;font-size:11px;font-weight:700;border-radius:4px;padding:2px 8px;border:1px solid #D8D4CE;background:#FAF7F2;white-space:nowrap}
.ts-q-pill.open{background:#FBEBE8;border-color:#E9B9B0;color:#9B3B2C}
.ts-q-pill.answered{background:#E4F0EA;border-color:#B9D5C7;color:#3F5C4C}
.ts-q-pill.buyer{background:#E4F0EA;border-color:#B9D5C7;color:#3F5C4C}
.ts-q-section{max-width:1100px;margin:0 auto;padding:56px 32px}
.ts-q-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.ts-q-eye{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8C8278;margin-bottom:6px}
.ts-q-title{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0}
.ts-q-sub{color:#55514D;margin:6px 0 0;max-width:60ch}
.ts-q-list{border-top:1px solid #D8D4CE}
.ts-q-item{padding:20px 4px;border-bottom:1px solid #D8D4CE}
.ts-q-q{font-size:16px;font-weight:700;margin:0 0 4px}
.ts-q-meta{font-size:12.5px;color:#8C8278}
.ts-q-a{margin-top:10px;padding:12px 14px;background:#FAF7F2;border-left:3px solid #B48970;border-radius:0 6px 6px 0;color:#2A2724}
.ts-q-a b{display:block;font-size:12.5px;margin-bottom:2px}
.ts-q-wait{margin-top:10px;font-size:13px;color:#8C8278;font-style:italic}
.ts-q-more{margin-top:16px}
.ts-q-ov{position:fixed;inset:0;z-index:2000;background:rgba(28,26,24,.55);display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow:auto}
.ts-q-box{position:relative;width:100%;max-width:520px;background:#fff;border-radius:14px;padding:30px 32px 26px;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.ts-q-x{position:absolute;top:12px;right:16px;border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:#8C8278}
.ts-q-x:hover{color:#1C1A18}
.ts-q-h{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:0 0 8px}
.ts-q-p{color:#55514D;margin:0 0 16px}
.ts-q-f{display:block;margin-bottom:14px}
.ts-q-f>span{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.ts-q-fixed{padding:11px 12px;border:1px solid #D8D4CE;border-radius:6px;background:#FAF7F2;font-weight:600}
.ts-q-in{width:100%;border:1px solid #D8D4CE;border-radius:6px;padding:11px 12px;font:inherit;font-size:15px;background:#fff}
.ts-q-in:focus{outline:none;border-color:#1C1A18}
.ts-q-in.err{border-color:#cb7263}
textarea.ts-q-in{min-height:110px;resize:vertical}
.ts-q-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.ts-q-note{font-size:12.5px;color:#8C8278;margin:12px 0 0}
.ts-q-ok{text-align:center}
.ts-q-ok .ico{width:54px;height:54px;border-radius:50%;background:#E4F0EA;color:#3F5C4C;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}
.ts-q-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 14px}
.ts-q-tab{border:1px solid #D8D4CE;background:#fff;border-radius:999px;padding:6px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.ts-q-tab.on{background:#1C1A18;color:#fff;border-color:#1C1A18}
.ts-q-card{border:1px solid #D8D4CE;border-radius:10px;background:#fff;overflow:hidden}
.ts-q-row2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:16px 18px;border-top:1px solid #D8D4CE;cursor:pointer}
.ts-q-row2:first-child{border-top:0}
.ts-q-row2:hover{background:#FAF7F2}
.ts-q-snip{font-size:15px;font-weight:700}
.ts-q-empty{padding:34px 18px;text-align:center;color:#8C8278}
.ts-q-back{border:0;background:none;padding:0;font:inherit;font-size:13px;font-weight:600;text-decoration:underline;cursor:pointer;margin-bottom:12px}
.ts-q-detail{padding:20px}
.ts-q-detail .ts-q-a{margin-top:14px}
.ts-q-chk{display:flex;gap:8px;align-items:center;font-size:13px;margin-top:12px}
@media(max-width:640px){.ts-q-section{padding:40px 16px}
.ts-q-box{padding:26px 20px 22px}
.ts-q-row2{grid-template-columns:1fr}
.ts-q-title{font-size:26px}
}


/* build additions */
.ts-q-ov[hidden], .ts-q-ov [hidden] { display: none !important; }
.ts-q-h, .ts-q-title { font-family: "Inter", system-ui, sans-serif; color: #1C1A18; }
.ts-q-row2 { color: inherit; text-decoration: none; }
.ts-q-tab { text-decoration: none; color: #1C1A18; }
.ts-q-back { display: inline-block; color: #1C1A18; }
.ts-q-f > span:first-child { text-transform: none; letter-spacing: normal; }
.ts-acct-v2 .acct-content .ts-q-btn { background: #1C1A18; border-color: #1C1A18; color: #fff; }
.ts-acct-v2 .acct-content .ts-q-btn.ghost { background: #fff; color: #1C1A18; }
