.shopping-page{max-width:1120px;margin:0 auto;padding:2.5rem 1.25rem 4rem}.shopping-hero,.section-heading,.template-list li,.recipe-plan-list li,.shopping-item{display:flex;align-items:center;justify-content:space-between;gap:1rem}.shopping-hero{padding:1.5rem 0 2rem}.shopping-hero h1{margin:.15rem 0}.shopping-hero p:not(.eyebrow){max-width:38rem;margin:0;color:#587066}.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.09em;font-size:.76rem;font-weight:800;color:#168257}.shopping-card{background:#fff;border:1px solid #dce9e1;border-radius:18px;padding:1.35rem;box-shadow:0 8px 24px rgba(17,72,49,.06)}.shopping-card h2{margin-top:0;color:#124b35}.shopping-items{margin-bottom:1.25rem}.section-heading{border-bottom:1px solid #e5eee9;padding-bottom:1rem}.section-heading span{background:#e6f4ec;border-radius:999px;padding:.3rem .65rem;font-size:.85rem;font-weight:800;color:#17603f}.shopping-sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-top:1rem}.shopping-section{background:#f7faf8;border-radius:12px;padding:.8rem}.shopping-section h3{font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;margin:.1rem 0 .5rem;color:#287353}.shopping-section ul,.template-list,.recipe-plan-list{list-style:none;padding:0;margin:0}.shopping-item{min-height:2.65rem;border-top:1px solid #e3ece7}.shopping-section li:first-child{border-top:0}.item-name{flex:1;font-weight:700}.item-check{width:1.35rem;height:1.35rem;padding:0;border:2px solid #8bbda5;border-radius:50%;background:#fff;color:#fff;font-weight:900}.is-done{color:#84958c}.is-done .item-name{text-decoration:line-through}.is-done .item-check{background:#168257;border-color:#168257}.icon-button,.text-button{border:0;background:transparent;color:#177c55;font:inherit;font-weight:800;cursor:pointer}.icon-button{font-size:1.35rem;line-height:1}.shopping-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:1.25rem}.compact-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.compact-form button,.standard-list-form button:last-child{justify-self:start}.compact-form label,.standard-list-form label{display:grid;gap:.25rem;font-size:.85rem;font-weight:800;color:#315c49}.compact-form input,.compact-form select,.standard-list-form input,.standard-list-form select{min-width:0;padding:.55rem .65rem;border:1px solid #b9d3c5;border-radius:8px;background:#fff;font:inherit}.catalog-form{margin-bottom:1rem}.template-list li,.recipe-plan-list li{padding:.8rem 0;border-top:1px solid #e3ece7}.template-list li:first-child,.recipe-plan-list li:first-child{border-top:0}.template-list span,.recipe-plan-list span{display:grid;gap:.18rem}.template-list small,.recipe-plan-list small{color:#647a6e}.template-list li>div{display:flex;align-items:center;gap:.35rem}.standard-list-form{display:grid;gap:.75rem;border-top:1px solid #e3ece7;margin-top:1rem;padding-top:1rem}.standard-list-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:.45rem;margin-top:.45rem}.shopping-flash{padding:.75rem 1rem;border-radius:10px;font-weight:700}.shopping-flash.success{background:#e4f5ea;color:#145b3b}.shopping-flash.error{background:#fff0ed;color:#913b2d}.empty-state{color:#647a6e}@media(max-width:700px){.shopping-page{padding:1.5rem 1rem 3rem}.shopping-hero{align-items:flex-start;flex-direction:column}.shopping-grid{grid-template-columns:1fr}.compact-form{grid-template-columns:1fr}.standard-list-row{grid-template-columns:1fr}.shopping-card{padding:1rem}.shopping-item{gap:.55rem}.template-list li{align-items:flex-start}.template-list li>div{flex-shrink:0}}

.shopping-page{padding-bottom:7rem}.shopping-recipes{margin-bottom:1.25rem}.shopping-actions{position:fixed;z-index:30;right:0;bottom:max(1rem,env(safe-area-inset-bottom));left:0;display:flex;justify-content:space-between;pointer-events:none;padding:0 max(1rem,calc((100vw - 1120px)/2 + 1.25rem))}.shopping-actions form,.shopping-action{pointer-events:auto}.shopping-actions form{margin:0}.shopping-action{min-height:3rem;box-shadow:0 6px 18px rgba(17,72,49,.2)}.shopping-action.add{border-color:#075435;color:#fff;background:#075435}.shopping-action.add:hover{background:#0b6944}.shopping-action.add span{font-size:1.25rem;line-height:0}.shopping-action.delete{border-color:#efb7ae;color:#8f2f26;background:#ffddd7}.shopping-action.delete:hover{background:#ffd0c8}.shopping-action.delete:disabled{border-color:#e7d8d5;color:#a69491;background:#f4eeec;box-shadow:none;cursor:not-allowed}.shopping-add-dialog{width:min(35rem,calc(100vw - 2rem));max-height:calc(100vh - 2rem);padding:1.25rem;border:1px solid #c8d9cf;border-radius:8px;color:#183335;background:#fbf8f2;box-shadow:0 18px 60px rgba(17,72,49,.24)}.shopping-add-dialog::backdrop{background:rgba(16,42,34,.48)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.dialog-heading h2{margin:0;color:#124b35}.dialog-heading .dialog-close{position:static;display:grid;width:2.25rem;height:2.25rem;place-items:center}.add-item-form{position:relative}.add-item-form>.button{border-color:#075435;color:#fff;background:#075435}.item-search-field{position:relative;grid-column:1/-1}.item-section-field{grid-column:1/-1}.item-suggestions{position:absolute;z-index:2;top:100%;right:0;left:0;max-height:17.5rem;overflow-y:auto;border:1px solid #b9d3c5;border-radius:8px;background:#fff;box-shadow:0 8px 20px rgba(17,72,49,.14)}.item-suggestions button{display:grid;width:100%;gap:.15rem;padding:.65rem .75rem;border:0;border-top:1px solid #e3ece7;border-radius:0;color:#183335;background:#fff;text-align:left;cursor:pointer}.item-suggestions button:first-child{border-top:0}.item-suggestions button:hover,.item-suggestions button[aria-selected="true"]{background:#edf6f0}.item-suggestions small{overflow:hidden;color:#647a6e;font-weight:600;text-overflow:ellipsis;white-space:nowrap}@media(max-width:700px){.shopping-page{padding-bottom:6.5rem}.shopping-actions{padding-inline:1rem}.shopping-action{padding-inline:.85rem}.shopping-add-dialog{width:100%;max-width:none;margin:auto 0 0;padding:1rem;border-width:1px 0 0}.add-item-form{grid-template-columns:1fr 1fr}.item-search-field,.item-section-field,.add-item-form>.button{grid-column:1/-1}}
.standard-list-item-field{position:relative;display:block;min-width:0}.standard-list-item-field>input{width:100%;box-sizing:border-box}
.standard-list-unit-warning{grid-column:1/-1;margin:.05rem 0 0;padding:.45rem .6rem;border-left:3px solid #d9822b;border-radius:5px;color:#7a4719;background:#fff6e8;font-size:.78rem;line-height:1.4}
.catalog-items{margin-top:1rem;border:1px solid #e5eee9;border-radius:10px;background:#f7faf8}
.catalog-items summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;cursor:pointer;list-style:none;font-weight:800;color:#124b35}
.catalog-items summary::-webkit-details-marker{display:none}
.catalog-items summary:focus-visible{outline:2px solid #168257;outline-offset:2px}
.catalog-items summary:after{content:'＋';flex:none;font-size:1.3rem;font-weight:800;line-height:1;color:#177c55}
.catalog-items[open] summary:after{content:'−'}
.catalog-items[open] summary{border-bottom:1px solid #e5eee9}
.catalog-items .template-list{padding:.25rem 1rem .85rem}
.shopping-confirm-message{margin:0 0 1.25rem;color:#587066;line-height:1.5}
.shopping-confirm-actions{display:flex;justify-content:flex-end;gap:.6rem}
.shopping-confirm-actions .button{padding:10px 14px}
.shopping-confirm-delete{border-color:#efb7ae;color:#8f2f26;background:#ffddd7}
.shopping-confirm-delete:hover{background:#ffd0c8}
.shopping-confirm-delete:focus-visible{outline:2px solid #168257;outline-offset:2px}
.standard-list-hint{margin:.55rem 0 0;color:#587066;font-size:.78rem;line-height:1.4}
.template-list li.template-item-auto{padding-inline:.55rem;border-radius:8px;background:#fdecec;box-shadow:inset 3px 0 0 #b4493a}
.template-list li.template-item-auto small{color:#8f2f26}
.catalog-add-trigger{margin-bottom:1rem}
/* The action row of a saved template/standard list holds text buttons and a
   44x44px .icon-button. In narrow two-column bands (e.g. 701px shopping-grid)
   those did not shrink and pushed the row past the card edge (horizontal page
   overflow). Wrapping the actions keeps the row inside its card; flex-end keeps
   the wrapped line right-aligned like the <=700px single-column layout. */
.template-list li>div{flex-wrap:wrap;justify-content:flex-end}
.catalog-dialog .catalog-form{margin-bottom:0}
.shopping-item{flex-wrap:wrap}
.item-amount-form{display:flex;align-items:center;gap:.3rem}
.item-amount-input{width:5.5rem;padding:.3rem .45rem;border:1px solid #b9d3c5;border-radius:8px;background:#fff;font:inherit;font-weight:700;text-align:right}
.item-amount-input[aria-busy='true']{opacity:.6}
.item-amount-unit{font-weight:700;color:#647a6e}
.item-provenance{flex-basis:100%;color:#647a6e;font-size:.78rem;line-height:1.4}
.is-done .item-amount-input{text-decoration:line-through}
/* Row action order: inside one .item-actions container the amount form comes
   first and the delete form second, so the X is the last action of the item row
   and always shares a flex line with the amount field - at every viewport the
   pair either both stay on the name's line or both wrap to the next line
   together. The container is flex:0 0 auto with margin-left:auto so it never
   shrinks and stays flush right when it wraps (the row is space-between). It
   sits before the provenance span, which keeps its own full line
   (flex-basis:100%). */
.item-actions{display:flex;align-items:center;gap:.65rem;margin-left:auto;flex:0 0 auto}
.item-delete-form{display:flex;align-items:center}
/* Reusable destructive modifier for the actual delete X actions on this page
   (manual item, planned recipe, personal template, standard list). One class
   keeps the established #982d22 destructive treatment in sync across all four
   instead of styling .icon-button broadly; dialog-close Xs are not destructive
   and must not carry it. The 44x44px touch target comes from .icon-button. */
.shopping-delete-icon{color:#982d22;border-radius:50%}
.shopping-delete-icon:hover{color:#fff;background:#982d22}
/* Touch target of every icon button is at least 44x44px; the visible glyph
   stays as small as before (font-size is inherited from the base rule). */
.icon-button{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0}
.icon-button:focus-visible{outline:2px solid #168257;outline-offset:2px}
.shopping-delete-icon:focus-visible{outline-color:#982d22}
@media(max-width:700px){.item-amount-input{width:4.5rem}}