#screen-shopping{background:#f7f7f7;color:#1c1c1c;font:400 16px/21px "Avenir Next",-apple-system,BlinkMacSystemFont,Arial,sans-serif;}
#screen-shopping [hidden]{display:none!important;}
:where(#screen-shopping) button,:where(#screen-shopping) input,:where(#screen-shopping) select,:where(#screen-shopping) textarea{font:inherit;}
#screen-shopping button{cursor:pointer;-webkit-tap-highlight-color:transparent;}
#screen-shopping button:focus-visible{outline:2px solid #16213f;outline-offset:-2px;}
.shop-header{height:205px;position:absolute;inset:0 0 auto;background:#fff;z-index:10;box-shadow:0 3px 6px #0000000d;}
.shop-heading{position:absolute;top:57px;left:0;right:0;height:36px;display:flex;align-items:center;justify-content:center;}
.shop-heading h1{margin:0;font-family:"Avenir Next",sans-serif;font-size:16px;font-weight:700;font-style:normal;color:#292929;line-height:normal;letter-spacing:2px;text-transform:uppercase;}
.shop-icon{border:0;background:none;padding:0;display:grid;place-items:center;width:44px;height:44px;}
.shop-back{position:absolute;left:10px;}
.shop-back span{width:24px;height:24px;background:url('assets/shopping/imgAisle1.png.webp') -15px -61px/375px 812px;}
.shop-more{position:absolute;right:8px;color:#1c1c1c;}
.shop-more svg{display:block;}
.shop-add{position:absolute;left:15px;right:15px;top:101px;height:40px;display:flex;align-items:center;border-radius:24px;background:white;box-shadow:0 0 9px #0002;}
#shop-add-input{width:100%;min-width:0;height:40px;border:0;background:none;outline:none;padding:0 12px 0 18px;font-size:16px;font-weight:500;line-height:normal;color:#292929;}
#shop-add-input::placeholder{color:#9c9c9c;opacity:1;}
.shop-add:focus-within{outline:2px solid #ffd7db;}
.shop-plus{flex:0 0 42px;border:0;background:none;height:40px;padding:0;}
.shop-plus span,.shop-popular-plus{display:inline-grid;place-items:center;width:24px;height:24px;background:#ffd8dc;border-radius:50%;color:#ff626a;font-size:23px;font-weight:400;line-height:1;}
.shop-tabs{position:absolute;left:15px;top:157px;width:196px;height:36px;display:flex;align-items:stretch;gap:2px;padding:3px;border-radius:20px;background:#e6e6e6;}
.shop-tabs button{flex:1;min-width:0;background:transparent;border:0;border-radius:16px;color:#676767;padding:0 12px;font-size:14px;font-weight:600;line-height:26px;transition:background-color 160ms ease,color 160ms ease;}
.shop-tabs button[aria-selected=true]{background:#ff626a;color:#fff;}
@media(prefers-reduced-motion:reduce){.shop-tabs button{transition:none;}}
.shop-list{position:absolute;top:205px;bottom:70px;left:0;right:0;overflow-y:auto;overflow-x:hidden;padding:10px 6px 90px;overscroll-behavior:contain;}
.shop-group{background:#fff;border-radius:7px;margin-bottom:10px;overflow:hidden;}
.shop-group-toggle{font-family:"Avenir Next Condensed","Arial Narrow",sans-serif;border:0;background:none;width:100%;padding:12px 14px;min-height:53px;display:flex;align-items:center;text-align:left;gap:10px;color:#1c1c1c;font-size:20px!important;font-weight:600!important;line-height:normal;}
.shop-chevron{margin-left:auto;flex:none;width:7px;height:14px;background:url("assets/shopping/arrow-forward.svg") center/100% 100% no-repeat;transform:rotate(90deg);margin-right:6px;}
.shop-group-toggle[aria-expanded=true] .shop-chevron{transform:rotate(-90deg);}
.shop-recipe-thumb{width:70px;height:70px;flex:none;border-radius:6px;background-image:url('assets/shopping/imgRecipe1Expanded.png.webp');background-size:375px 1196px;}
.shop-recipe-thumb.pancakes{background-position:-16px -210px;}
.shop-recipe-thumb.biscuits{background-position:-16px -310px;}
.shop-recipe-thumb.shrimp-grits{background-image:url('assets/shopping/lemon-garlic-shrimp-grits.png.webp');background-size:cover;background-position:center;}
.shop-recipe-name{font-size:18px;font-weight:600;line-height:21px;}
.shop-row{min-height:49px;display:flex;align-items:center;gap:10px;padding:10px 12px 10px 14px;position:relative;touch-action:pan-y;}
.shop-row+.shop-row>.shop-row-content:before{content:"";position:absolute;top:0;left:44px;right:16px;height:1px;background:#f1f1f1;pointer-events:none;}
.shop-check{appearance:none;flex:none;width:20px;height:20px;border:1px solid #ff626a;border-radius:50%;margin:0;cursor:pointer;display:grid;place-items:center;background:white;}
.shop-check:checked{background:#ff626a;}
.shop-check:checked:after{content:"";width:8px;height:4px;border-left:2px solid white;border-bottom:2px solid white;transform:rotate(-45deg);margin-top:-2px;}
.shop-item-name{flex:1;min-width:0;overflow-wrap:anywhere;font-size:16px;font-weight:400;line-height:21px;}
.shop-item-name strong{font-weight:600;}
.shop-row.checked .shop-item-name{text-decoration:line-through;color:#999;}
.shop-item-name[role=button]{cursor:text;}
.shop-row.editing{background:#ffeff0;}
.shop-row.editing .shop-check:not(:checked){background:#ffeff0;}
.shop-inline-editor{flex:1;min-width:0;outline:none;font-size:16px;line-height:21px;overflow-wrap:anywhere;cursor:text;}
.shop-inline-editor strong{font-weight:600;}
.shop-inline-editor[aria-invalid=true]{box-shadow:0 1px #ff626a;}
.shop-inline-cancel{flex:none;width:24px;height:28px;border:0;padding:0;background:none;color:#1c1c1c;font-size:22px!important;line-height:1;}
.shop-row+.shop-row.editing:before{content:"";position:absolute;top:0;left:44px;right:16px;height:1px;background:#f1f1f1;pointer-events:none;}
.shop-buy{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);width:240px;min-height:38px;padding:10px 22px;background:#ff626a;color:white;border:0;border-radius:24px;font-size:11px!important;font-weight:600!important;letter-spacing:1.1px;line-height:normal;z-index:12;box-shadow:2px 2px 5px #0002;}
.shop-buy:disabled{background:#ccc;cursor:default!important;}
.shop-empty{background:#fff;text-align:center;padding:22px 24px 0;min-height:100%;}
.shop-empty>p{font-size:18px;font-weight:400;line-height:25px;color:#000;margin:0 0 18px;}
.shop-popular-item{display:flex;align-items:center;gap:15px;width:100%;text-align:left;border:0;border-bottom:1px solid #eee;background:white;padding:12px 0;font-size:16px!important;font-weight:400;line-height:26px;color:#1c1c1c;}
.shop-popular-plus{flex:none;width:20px;height:20px;font-size:19px;}
.shop-empty-art{width:230px;height:110px;margin:40px auto 0;background:url('assets/shopping/imgEmptyStates2Copy3.png.webp') -65px -635px/375px 812px no-repeat;}
.shop-suggestions{position:absolute;top:151px;left:0;right:0;max-height:290px;overflow-y:auto;background:white;border-top:3px solid #ffe6e8;padding:12px 16px 20px;z-index:20;border-radius:0 0 12px 12px;box-shadow:0 8px 14px #0003;}
.shop-suggestions h2{margin:0 0 6px;font-size:14px;font-weight:700;letter-spacing:2.333333px;line-height:normal;}
.shop-suggestions .shop-popular-item{border:0;}
.shop-suggestions-close{float:right;border:0;background:none;color:#ff626a;font-size:14px!important;font-weight:500;line-height:26px;padding:0 5px;}
.shop-toast{position:absolute;left:18px;right:18px;bottom:138px;z-index:55;background:#a5e5f5;padding:12px;border-radius:10px;box-shadow:0 2px 4px #0002;font-size:16px;font-weight:400;line-height:20px;color:#000;display:flex;justify-content:space-between;align-items:center;gap:8px;}
.shop-toast button{border:0;background:none;font-size:12px!important;font-weight:700!important;}
.shop-overlay{position:absolute;inset:0;background:#0009;z-index:60;display:flex;align-items:center;justify-content:center;}
.shop-dialog{position:relative;background:white;width:313px;max-height:660px;overflow:auto;border-radius:10px;padding:28px 20px;text-align:center;}
.shop-dialog h2{font-family:"Avenir Next Condensed","Arial Narrow",sans-serif;font-size:24px;font-weight:600;line-height:28px;color:#000;margin:20px 0;}
.shop-dialog p{font-size:16px;font-weight:500;line-height:22px;color:#000;}
.shop-dialog-close{position:absolute;right:10px;top:8px;background:none;border:0;color:#777;font-size:25px!important;}
.shop-primary{display:block;width:100%;border:0;background:#ff626a;color:white;border-radius:24px;padding:12px 8px;font-size:11px!important;font-weight:600!important;letter-spacing:1.5px;line-height:normal;}
.shop-secondary{display:block;width:100%;border:0;background:none;color:#ff626a;padding:14px 4px;font-size:11px!important;font-weight:600!important;letter-spacing:1.5px;line-height:normal;}
.shop-secondary[data-clear-checked]{width:fit-content;margin:12px auto 16px;padding:9px 14px;border:1px solid #ff626a;border-radius:20px;text-transform:uppercase;}
.shop-menu-row{display:block;width:100%;background:white;border:0;border-bottom:1px solid #eee;text-align:left;padding:15px 2px;font-size:16px;font-weight:700;letter-spacing:1.8px;line-height:normal;}
.shop-menu-row.danger{color:#ff626a;}
.shop-clear-art{height:125px;width:180px;margin:10px auto;background:url('assets/shopping/imgClearList2.png.webp') -95px -277px/375px 812px;}
.shop-intro{background:#b5e5fa;}
.shop-intro .shop-empty-art{margin-top:12px;mix-blend-mode:multiply;}
.shop-intro h2{font-family:"Avenir Next",sans-serif;font-size:23px;font-weight:700;line-height:30px;}
.shop-share-text{width:100%;height:260px;resize:vertical;text-align:left;border:1px solid #ddd;border-radius:6px;padding:10px;font-size:13px!important;}
.shop-dialog input{width:100%;padding:10px;border:1px solid #ccc;border-radius:6px;font-size:16px;}
.shop-store{width:100%;padding:15px 0;border:0;border-bottom:1px solid #eee;background:none;text-align:left;font-size:19px!important;}
.shop-error{color:#b82035;font-size:13px;}
#profile-shopping-count{position:absolute;left:33px;top:201px;width:77px;height:22px;border-radius:14px;background:white;color:#ff626a;font:600 11px/22px "Avenir Next",sans-serif;text-align:center;pointer-events:none;}
.phone-shell:has(.shop-overlay:not([hidden])) #shared-nav{filter:brightness(.4);pointer-events:none;}
.phone-shell:has(.shop-overlay:not([hidden])) .system-status{opacity:.4;}

.shop-row.shop-added{background:#ffeff0;}
.shop-row.shop-added .shop-check:not(:checked){background:#ffeff0;}

/* Final iOS reference: Figma page 0:1380. The title retains the requested Settings color. */
.shop-intro-opening h2{font-size:32px;line-height:33px;}
.shop-intro-opening h2 small{display:block;font-size:22px;font-weight:700;letter-spacing:.55px;}
.shop-intro-opening p{font-size:18px;line-height:25px;}
.shop-intro p.shop-intro-progress{font-size:12px;line-height:18px;}

/* The content follows the pointer; the original Figma trash action sits behind it. */
.shop-swipe-row{display:block;padding:0;overflow:hidden;--swipe-x:0px;--delete-width:44px;}
.shop-row-content{position:relative;z-index:1;display:flex;align-items:center;gap:10px;min-height:49px;padding:10px 12px 10px 14px;background:#fff;transform:translateX(var(--swipe-x));transition:transform 180ms ease;touch-action:pan-y;user-select:none;}
.shop-swipe-row.shop-added .shop-row-content{background:#ffeff0;}

.shop-swipe-delete{visibility:hidden;position:absolute;inset:0 0 0 auto;width:var(--delete-width);border:0;padding:0;background:#a5a5a5;display:grid;place-items:center;transition:width 180ms ease;}
.shop-swipe-row.delete-revealed .shop-swipe-delete{visibility:visible;}
.shop-swipe-delete img{width:18px;height:23px;pointer-events:none;}
.shop-swipe-row.swiping .shop-row-content,.shop-swipe-row.swiping .shop-swipe-delete{transition:none;}
.shop-swipe-row.deleting{pointer-events:none;}
.shop-swipe-row.collapsing{min-height:0;transition:height 180ms ease;}
.shop-swipe-row:focus-visible{outline:2px solid #16213f;outline-offset:-2px;}
@media(prefers-reduced-motion:reduce){.shop-row-content,.shop-swipe-delete,.shop-swipe-row.collapsing{transition:none;}}

.recipe-list-action{top:0;width:125px;height:100%;}
.recipe-list-action:disabled{cursor:default;background:#ffffff88;}
.recipe-list-action:focus-visible{outline:2px solid #ff626a;outline-offset:-3px;}
.recipe-ingredient-panel{position:relative;}
.recipe-ingredient-check{position:absolute;left:10px;width:20px;height:20px;border-radius:50%;padding:0;border:0;background:#fff url('assets/shopping/recipe-check-unselected.svg') center/100% 100% no-repeat;cursor:pointer;}
.recipe-ingredient-check[aria-pressed=true]{background-image:url('assets/shopping/recipe-check-selected.svg');}
.recipe-ingredient-check[aria-pressed=mixed]{background:#ff626a;}
.recipe-ingredient-check[aria-pressed=mixed]:after{content:'';position:absolute;left:5px;top:9px;width:9px;height:1.5px;background:#fff;}
.recipe-select-all{width:24px;height:24px;}
.recipe-shopping-toast{position:absolute;z-index:50;bottom:24px;left:12px;right:12px;display:flex;align-items:center;gap:12px;padding:14px 12px;background:#a5e5f5;border-radius:10px;box-shadow:0 2px 4px #0002;color:#000;font:400 14px/20px 'Avenir Next',sans-serif;}
.recipe-shopping-toast[hidden]{display:none;}
.recipe-shopping-toast button{margin-left:auto;flex-shrink:0;padding:0;border:0;background:none;white-space:nowrap;font:700 12px 'Avenir Next',sans-serif;cursor:pointer;}

.recipe-added-mark{display:none;left:57px;top:17px;width:23px;height:23px;box-shadow:0 0 0 2px #fff;pointer-events:none;}
.recipe-list-action.is-added .recipe-added-mark{display:block;}

/* Shopping list overflow drawer. */
.shop-sheet-overlay{align-items:flex-end;}
.shop-bottom-sheet{width:100%;min-height:187px;max-height:60%;border-radius:10px 10px 0 0;padding:28px 20px 54px;text-align:left;animation:shop-sheet-in 220ms cubic-bezier(.2,.7,.2,1);}
.shop-sheet-handle{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:20px;height:3px;border-radius:2px;background:#ccc;}
.shop-bottom-sheet .shop-menu-row{height:52px;padding:0;border:0;color:#1c1c1c;font-size:16px!important;font-weight:700;letter-spacing:1.8px;}
.phone-shell:has(.shop-sheet-overlay:not([hidden])) #shared-nav{visibility:hidden;}
@keyframes shop-sheet-in{from{transform:translateY(100%);}to{transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){.shop-bottom-sheet{animation:none;}}

.shop-recipe-thumb.meal-thumb{object-fit:cover;background:none;}

.shop-group-toggle:has(>.shop-recipe-thumb){padding:12px;}