/* Use the storefront's shared light/dark roles, including inside native dialogs. */
.product-questions,.account-questions,.order-question-dialog{color:var(--ink)}
.product-questions header,.account-questions>header,.customer-question header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.product-questions h2{font-family:var(--font-heading,serif);font-size:clamp(1.8rem,3vw,2.8rem)}
.product-questions p,.customer-question p{white-space:pre-wrap;overflow-wrap:anywhere}
.web-product-question-form,.customer-question form{display:grid;gap:.75rem;margin-top:1.5rem}
.web-product-question-form textarea,.web-product-question-form select,.customer-question textarea,.customer-question select{width:100%;border:1px solid var(--line);border-radius:12px;padding:.85rem;background:var(--soft);color:var(--ink);font:inherit}
.web-product-question-form textarea,.customer-question textarea{resize:vertical}
.order-detail-modal>.order-detail-header{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1.5rem;row-gap:.55rem;align-items:start}
.order-detail-heading{grid-column:1;grid-row:1 / span 2;min-width:0;align-self:center}
.order-detail-heading p{overflow-wrap:anywhere}
.order-detail-header>[data-close-order-dialog]{grid-column:2;grid-row:1;justify-self:end}
.order-detail-modal>.order-detail-header>.order-detail-question{grid-column:2;grid-row:2;justify-self:end;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;width:auto;height:auto;min-height:36px;max-width:100%;padding:.45rem .8rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;font-size:.75rem;font-weight:750;line-height:1.4;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.order-detail-question svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.order-detail-modal>.order-detail-header>.order-detail-question:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.order-detail-question:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:700px){.order-detail-modal>.order-detail-header{grid-template-columns:minmax(0,1fr) 42px;gap:.8rem}.order-detail-heading{grid-row:1}.order-detail-modal>.order-detail-header>.order-detail-question{grid-column:1 / -1;justify-self:start;min-height:42px;white-space:normal;text-align:left}}
.web-product-question-form small{line-height:1.7;color:var(--muted)}
.web-product-question-form button,.customer-question form button{justify-self:start}
.question-trap{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.public-product-question{border-top:1px solid var(--line);padding:1.4rem 0}
.public-product-question>div{margin:.75rem 0 0 1rem;border-left:3px solid var(--accent);padding-left:1rem}
.public-product-question p{margin:.65rem 0}
.public-product-question small{color:var(--muted)}
.account-questions{padding-top:2.5rem;padding-bottom:3rem}
.account-questions>header p{color:var(--muted)}
.question-switch{display:flex;gap:1rem;flex-wrap:wrap;margin:1.5rem 0}
.question-switch a{padding:.75rem 1rem;border:1px solid var(--line);border-radius:12px;color:var(--ink)}
.question-switch a[aria-current=page]{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.customer-question{display:block;padding:1.4rem;border:1px solid var(--line);border-radius:18px;margin:1rem 0;background:var(--surface);color:var(--ink);text-decoration:none}
.customer-question-list .customer-question:hover{border-color:var(--accent)}
.customer-question small{display:block;color:var(--muted);margin-top:.5rem}
.customer-question-message{padding:1rem;border-radius:12px;background:var(--soft);color:var(--ink);margin:1rem 0}
.customer-question-message.staff{border-left:3px solid var(--accent)}
.account-questions .account-notice,.order-question-dialog .account-notice{margin:1rem 0;padding:.85rem 1rem;border:1px solid var(--line);border-radius:12px;background:var(--accent-soft);color:var(--ink)}
.account-questions .account-notice.error{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,var(--surface))}
.question-product-heading{display:flex;align-items:center;gap:1rem;min-width:0;overflow-wrap:anywhere}
.question-product-heading h2{margin-top:0}
.question-product-link{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.18em}
.question-product-link:hover{color:var(--accent);text-decoration-color:currentColor}
.question-product-image{width:72px;height:72px;object-fit:contain;flex:0 0 72px;border:1px solid var(--line);border-radius:12px;background:#fff}
.order-question-dialog{width:min(94vw,620px);max-height:90dvh;border:1px solid var(--line);border-radius:22px;padding:0;background:var(--surface)}
.order-question-dialog::backdrop{background:#081c1b80;backdrop-filter:blur(3px)}
.order-question-dialog>header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid var(--line)}
.order-question-dialog>header h2{margin:0;font-size:1.3rem}
.order-question-dialog>header button{border:0;background:transparent;color:var(--ink);font-size:1.8rem;cursor:pointer}
.order-question-dialog [data-order-question-body]{padding:1.5rem}
.order-question-dialog form{display:grid;gap:1rem}
.order-question-dialog textarea{width:100%;padding:.8rem;border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--ink);resize:vertical;font:inherit}
.order-question-dialog small{color:var(--muted);line-height:1.6}
.order-question-card-action{padding:.8rem 1.25rem;border-top:1px solid var(--line);display:flex;justify-content:flex-end}
.order-question-card-action button{border:0;background:transparent;font:inherit;font-weight:700;color:var(--accent);cursor:pointer}
@media(max-width:600px){
    .customer-question{padding:1rem}
    .question-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
    .question-switch a{display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:.65rem .3rem;text-align:center;font-size:clamp(.6875rem,3vw,.75rem);line-height:1.35;white-space:nowrap}
    .order-question-dialog [data-order-question-body]{padding:1rem}
}