.contact-product-field { display:flex; flex-direction:column; gap:10px; min-width:0; font-size:14px; }
.contact-product-trigger { display:flex; align-items:center; gap:14px; width:100%; min-height:56px; padding:12px 14px; border:1px solid var(--ink); border-radius:0; background:transparent; color:var(--ink); text-align:left; cursor:pointer; }
.contact-product-thumbnail { display:block; width:48px; height:60px; object-fit:cover; }
#contact-product-name { flex:1; line-height:1.5; }
.contact-product-action { flex:none; font-size:12px; }
.contact-product-remove { align-self:flex-start; min-height:44px; padding:4px 0; border:0; background:transparent; color:var(--ink); text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.contact-product-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.contact-product-dialog { width:min(620px,calc(100vw - 32px)); max-width:none; max-height:min(780px,85dvh); margin:auto; padding:24px; border:1px solid var(--ink); border-radius:0; background:var(--paper,#eeece6); color:var(--ink,#30312c); overflow-y:auto; overscroll-behavior:contain; font-family:var(--mono,monospace); }
.contact-product-dialog::backdrop { background:rgb(30 30 25 / 40%); }
.contact-picker-header { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:18px; }
.contact-product-dialog .contact-picker-header h2 { margin:0; font:inherit; font-size:20px; line-height:1.3; letter-spacing:-.025em; }
.contact-picker-close { min-height:44px; padding:8px 0 8px 12px; border:0; border-radius:0; background:transparent; color:inherit; font:inherit; font-size:13px; cursor:pointer; }
.contact-picker-search { display:flex; flex-direction:column; gap:8px; font-size:12px; }
.contact-picker-search input { display:block; width:100%; min-height:48px; padding:12px; border:1px solid var(--line,#bab9af); border-radius:0; background:transparent; color:inherit; font:inherit; font-size:16px; }
.contact-product-dialog .contact-picker-count { margin:14px 0; font-size:12px; line-height:1.5; color:var(--muted); }
.contact-picker-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 12px; }
.contact-picker-option { display:flex; flex-direction:column; gap:9px; min-width:0; padding:4px; border:1px solid transparent; border-radius:0; color:inherit; background:transparent; text-align:left; font:inherit; font-size:12px; line-height:1.45; cursor:pointer; }
.contact-picker-option img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }
.contact-picker-option[aria-pressed="true"] { border-color:var(--ink); }
.contact-picker-option:hover { border-color:var(--line,#bab9af); }
.contact-picker-option[aria-pressed="true"]:hover { border-color:var(--ink); }
.contact-picker-option span { padding:0 3px 4px; }
.contact-product-dialog .contact-picker-empty { margin:24px 0 8px; font-size:14px; }
.contact-product-field [hidden],.contact-product-dialog [hidden] { display:none!important; }
.contact-product-dialog :focus-visible,.contact-product-field :focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
@media(max-width:600px) {
  .contact-product-dialog { width:calc(100vw - 24px); padding:18px; max-height:85dvh; }
  .contact-picker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 10px; }
  .contact-product-dialog .contact-picker-header h2 { font-size:18px; }
}