/* LWVlife app - Shopping area, Phase 1: My Shopping List (GitHub #19) */
.shop-h{margin:6px 0 4px;font-size:1.35rem;color:var(--navy,#1B3A6B)}
.shop-priv{margin:0 0 8px;color:#1d5d34;background:#e8f5ec;border-radius:12px;padding:8px 12px;font-size:.9rem;line-height:1.35}
.shop-warn,.shop-err{margin:6px 0;color:#8a1c14;background:#fdecea;border-radius:12px;padding:8px 12px;font-weight:700;font-size:.92rem}
.shop-err:empty,.shop-msg:empty{display:none}
.shop-msg{margin:8px 0;color:#14532d;background:#e6f4ea;border-radius:12px;padding:8px 12px;font-weight:700;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.shop-undo{min-height:44px;padding:4px 14px;border-radius:12px;background:#fff;border:2px solid #14532d;color:#14532d;font-weight:800}
.shop-form{margin:6px 0}
.shop-lbl{display:block;font-weight:800;color:var(--ink,#14254a);margin:8px 0 4px;font-size:.95rem}
.shop-row{display:flex;gap:8px}
.shop-row .input{flex:1;min-width:0}
.shop-mic{flex:none;width:56px;min-height:52px;padding:0;font-size:1.4rem}
.shop-mic.live{background:#d8382f}
.shop-grid{display:grid;grid-template-columns:1fr 2fr;gap:8px}
.shop-grid>div{min-width:0}
.shop-small{font-size:.86rem;color:var(--muted,#55637a);line-height:1.4;margin:6px 0}
.shop-sec{margin:16px 2px 6px;font-size:1.1rem;color:var(--navy,#1B3A6B);display:flex;align-items:center;gap:8px}
.shop-n{background:#e3edfb;color:var(--navy,#1B3A6B);border-radius:999px;padding:1px 10px;font-size:.9rem}
.shop-list{list-style:none;margin:0;padding:0}
.shop-item{display:flex;align-items:center;gap:8px;background:#fff;border-radius:14px;padding:8px 8px 8px 10px;margin:8px 0;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.shop-empty{color:var(--muted,#55637a);padding:10px 4px}
.shop-check{flex:none;width:48px;height:48px;border-radius:12px;border:3px solid var(--navy,#1B3A6B);background:#fff;color:#fff;font-size:1.5rem;font-weight:900;display:flex;align-items:center;justify-content:center}
.shop-item.bought .shop-check{background:#06995c;border-color:#06995c}
.shop-txt{flex:1;min-width:0;overflow-wrap:anywhere}
.shop-txt b{font-size:1.08rem;color:var(--ink,#14254a)}
.shop-txt small{display:block;color:var(--muted,#55637a);font-size:.88rem}
.shop-qty{font-weight:800;color:var(--navy,#1B3A6B);white-space:nowrap}
.shop-item.bought .shop-txt b{text-decoration:line-through;color:#5c6b80}
.shop-ib{flex:none;width:48px;height:48px;border-radius:12px;background:#e3edfb;color:var(--navy,#1B3A6B);font-size:1.15rem}
.shop-ib.red{background:#fdecea;color:#8a1c14}
.shop-item.editing{display:block}
.shop-acts2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.shop-more{margin:14px 0}
.shop-more summary{min-height:48px;display:flex;align-items:center;font-weight:800;color:var(--navy,#1B3A6B);cursor:pointer}
.shop-file{cursor:pointer}
.shop-later{margin:14px 0;background:#fffbea;border:2px dashed #e0c25a}
.shop-later h3{margin:4px 0 6px;font-size:1rem;color:#6b4f00}
.shop-later ul{margin:0 0 4px;padding-left:22px;color:#4a3a00}
.shop-later li{margin:3px 0}
#s-shop .btn:focus-visible,.shop-check:focus-visible,.shop-ib:focus-visible,.shop-undo:focus-visible{outline:3px solid var(--orange,#f28c1b);outline-offset:2px}
@media (max-width:380px){.shop-grid{grid-template-columns:1fr}}
/* Home: three-button row tile for Shopping, and the small Settings gear in the footer */
.a5-tile.shop{border-color:#b7e2c7;background:#f2fbf5}
.a5-gear{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:0 12px;margin:4px 0;border-radius:22px;border:2px solid var(--line,#d9e1ec);background:#fff;color:var(--navy,#1B3A6B);font:inherit;font-weight:700;font-size:.95rem;cursor:pointer}
.a5-gear:focus-visible{outline:4px solid #ffb300;outline-offset:2px}
/* Popular groceries quick-pick (GitHub #26) */
.qp{margin:6px 0 10px}
.qp h3{margin:2px 0 2px;font-size:1.12rem;color:var(--navy,#1B3A6B)}
.qp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0}
.qp-chip{min-height:56px;padding:6px 2px;border-radius:14px;border:2px solid var(--line,#d9e1ec);background:#fff;color:var(--ink,#14254a);font:inherit;font-weight:800;font-size:.9rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;overflow-wrap:break-word;line-height:1.15;cursor:pointer}
.qp-chip .qp-t{max-width:100%;hyphens:auto;-webkit-hyphens:auto}
.qp-chip .qp-mark{font-size:.9rem;color:var(--blue,#0a78cf);font-weight:900}
.qp-chip.sel{background:var(--navy,#1B3A6B);border-color:var(--navy,#1B3A6B);color:#fff}
.qp-chip.sel .qp-mark{color:#fff}
.qp-chip.onlist{background:#eef6f0;border-color:#9fd3b1;color:#1d5d34}
.qp-chip.onlist .qp-mark{color:#1d5d34}
.qp-chip small{font-size:.75rem;font-weight:700}
.qp-chip:focus-visible,.qp-more summary:focus-visible,.qp-cat summary:focus-visible{outline:3px solid var(--orange,#f28c1b);outline-offset:2px}
.qp-more>summary,.qp-cat>summary{min-height:48px;display:flex;align-items:center;font-weight:800;color:var(--navy,#1B3A6B);cursor:pointer}
.qp-cat{border-top:1px solid var(--line,#d9e1ec);padding-left:6px}
.qp-ready{margin-top:10px;border:2px solid var(--navy,#1B3A6B);border-radius:14px;padding:8px 10px;background:#f6f9ff}
.qp-ready h4{margin:2px 0 6px;font-size:1.02rem;color:var(--navy,#1B3A6B);display:flex;align-items:center;gap:8px}
.qp-ready ul{list-style:none;margin:0;padding:0}
.qp-ready li{border-bottom:1px solid var(--line,#d9e1ec);padding:6px 0}
.qp-rhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.qp-rhead b{font-size:1.05rem}
.qp-acts{display:grid;grid-template-columns:2fr 1fr;gap:8px;margin-top:10px}
@media (max-width:360px){.qp-acts{grid-template-columns:1fr}}
@media (max-width:300px){.qp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:240px){.qp-grid{grid-template-columns:1fr}}
html.bigfs .qp-grid{grid-template-columns:repeat(2,minmax(0,1fr))} /* very large text (A+): 2 per row so words are not split */
/* GitHub #33: tabs, compact item picker (drop-downs + Other), size, regular baskets */
.shop-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:4px 0 10px;background:#e3edfb;border-radius:16px;padding:4px}
.shop-tabs button{min-height:52px;border:0;border-radius:12px;background:transparent;color:var(--navy,#1B3A6B);font:inherit;font-weight:800;font-size:1rem;cursor:pointer;padding:4px 6px;line-height:1.2}
.shop-tabs button[aria-selected="true"]{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.shop-tabs button:focus-visible{outline:3px solid var(--orange,#f28c1b);outline-offset:2px}
.shop-h2{margin:6px 0 4px;font-size:1.15rem;color:var(--navy,#1B3A6B)}
#shop-mic.wide{width:100%;min-height:52px;font-size:1.05rem;font-weight:800}
.pk-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pk-two>div,.pk-three>div{min-width:0}
.pk-sel{width:100%;min-height:52px;font-size:1.02rem}
.pk-three{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:8px}
.pk-three .pk-note{grid-column:1/-1}
.pk-step{display:flex;gap:4px;align-items:stretch}
.pk-step .input{flex:1;min-width:0;text-align:center}
.pk-pm{flex:none;width:48px;min-height:48px;border-radius:12px;border:2px solid var(--navy,#1B3A6B);background:#fff;color:var(--navy,#1B3A6B);font-size:1.4rem;font-weight:900;cursor:pointer}
.pk-pm:focus-visible{outline:3px solid var(--orange,#f28c1b);outline-offset:2px}
.shop-size{color:var(--muted,#55637a);font-weight:700}
@media (max-width:420px){.pk-two{grid-template-columns:1fr}}
@media (max-width:330px){.pk-three{grid-template-columns:1fr}.bk-acts{grid-template-columns:1fr}}
html.bigfs .pk-two,html.bigfs .pk-three{grid-template-columns:1fr}
.bk{margin:12px 0}
.bk h3{margin:2px 0 4px;font-size:1.12rem;color:var(--navy,#1B3A6B);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bk-card{border:2px solid #cfe0f5;border-radius:14px;padding:10px;margin:10px 0;background:#f8fbff}
.bk-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.bk-top b{font-size:1.1rem;color:var(--ink,#14254a);overflow-wrap:anywhere}
.bk-cnt{color:var(--muted,#55637a);font-weight:700;font-size:.92rem}
.bk-sum{margin:4px 0 8px;color:var(--ink,#14254a);font-size:.95rem;overflow-wrap:anywhere}
.bk-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bk-acts .bk-copy{grid-column:1/-1}
.bk-acts .btn,.bk-new .btn{min-height:48px}
.bk-new{display:grid;gap:8px;margin-top:8px}
.bk-red{color:#8a1c14!important;border-color:#f1b7b0!important}
.bk-edit{margin-top:6px}
.bk-h4{margin:14px 0 6px;font-size:1.02rem;color:var(--navy,#1B3A6B);display:flex;align-items:center;gap:8px}
.bk-items{list-style:none;margin:0;padding:0}
.bk-row{border:1px solid var(--line,#d9e1ec);border-radius:12px;padding:6px 10px;margin:8px 0;background:#fff}
.bk-rhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bk-add{border-top:2px dashed var(--line,#d9e1ec);margin-top:10px;padding-top:4px}
.bk-delthis{margin-top:10px}
.bk-full{font-weight:700}
/* GitHub #32: Coupons & deals (preview) */
.dl-beta{background:#fff3cd;color:#6b4f00;border:1px solid #e0c25a;border-radius:999px;padding:1px 10px;font-size:.8rem}
.dl-status{background:#fff8e1;border-left:6px solid #e6a700;border-radius:10px;padding:8px 12px;color:#4a3a00;font-size:.95rem;line-height:1.45}
.dl-secs{display:grid;grid-template-columns:1fr;gap:6px;margin:10px 0}
.dl-sec{min-height:52px;border-radius:14px;border:2px solid var(--line,#d9e1ec);background:#fff;color:var(--ink,#14254a);font:inherit;font-weight:800;font-size:1rem;text-align:left;padding:6px 12px;cursor:pointer}
.dl-sec[aria-pressed="true"]{background:var(--navy,#1B3A6B);border-color:var(--navy,#1B3A6B);color:#fff}
.dl-sec.dl-rest{border-style:dashed;margin-top:6px}
.dl-sec.dl-rest[aria-pressed="true"]{background:#7a2e0e;border-color:#7a2e0e}
.dl-sec:focus-visible{outline:3px solid var(--orange,#f28c1b);outline-offset:2px}
.dl-body{border-top:3px solid var(--navy,#1B3A6B);padding-top:4px}
.dl-body.dl-restbody{border-top-color:#7a2e0e}
.dl-sh{margin:8px 0 2px;font-size:1.08rem;color:var(--navy,#1B3A6B)}
.dl-restbody .dl-sh{color:#7a2e0e}
.dl-rules{background:#fdf3f2;border-radius:12px;padding:4px 12px;margin:8px 0}
.dl-rules summary{min-height:48px;display:flex;align-items:center;font-weight:800;color:#8a1c14;cursor:pointer}
.dl-rules ul{margin:0 0 6px;padding-left:20px}
.dl-rules li{margin:4px 0;line-height:1.45}
.dl-sample{position:relative;border:2px dashed #98a2ad;border-radius:14px;padding:26px 12px 10px;margin:10px 0;background:#fafafa}
.dl-sample b{display:block;font-size:1.05rem}
.dl-sample small{display:block;color:var(--muted,#55637a)}
.dl-sample-tag{position:absolute;top:6px;left:10px;background:#55637a;color:#fff;border-radius:6px;padding:0 8px;font-size:.78rem;font-weight:800}
.dl-form h4{margin:2px 0 4px;font-size:1.05rem;color:var(--navy,#1B3A6B)}
.dl-radio{border:0;padding:0;margin:4px 0;display:flex;flex-wrap:wrap;gap:8px}
.dl-radio label{display:flex;align-items:center;gap:8px;min-height:48px;padding:4px 12px;border:2px solid var(--line,#d9e1ec);border-radius:12px;font-weight:700}
.dl-radio input{width:24px;height:24px}
.dl-req{color:#8a1c14;font-weight:700;font-size:.85rem}
.dl-check{font-size:.95rem}
.dl-msg.dl-ok{border:2px solid #14532d}
.dl-sent ul{margin:6px 0;padding-left:20px}
.dl-sent summary{min-height:48px;display:flex;align-items:center;font-weight:800;color:var(--navy,#1B3A6B);cursor:pointer}
html:lang(zh) .dl,html:lang(zh) .bk{overflow-wrap:anywhere}
