/* Shopping section navigation, scoped to this page. */
.shopping-page .shopping-tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-self:start;margin:0;padding:4px;border:1px solid #e5e2d8;border-radius:12px;background:#f0efe8}
.shopping-page .shopping-tabs button{min-height:44px;margin:0;padding:10px 18px;border-radius:8px;text-align:center;font-weight:600;color:#737164;white-space:normal}
.shopping-page .shopping-tabs button:hover{background:#e7e4d9;color:#5c584b}
.shopping-page .shopping-tabs .active,.shopping-page .shopping-tabs .active:hover{background:#795a42;color:#fff}
.staples{display:grid;gap:20px;min-width:0;color:#34372e}
.staples h1{color:#795a42}
.staples .page-heading{align-items:center;gap:16px;margin:0}
.staples .page-heading h1{margin:0}
.staples button,#editor:has([data-staples-dialog]) button{min-height:44px;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
.staples .primary,#editor:has([data-staples-dialog]) .primary{background:#795a42;border-color:#795a42}
.staples-actions{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0}
.staples-actions strong{font-size:14px;font-variant-numeric:tabular-nums}
.staples-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
/* Keep precisely 25/75 product media/details tracks on every viewport. */
.staple{display:grid;grid-template-columns:1fr 3fr;gap:0;min-width:0;align-items:start;overflow-wrap:anywhere}
.staples .staple.card{padding:16px;background:#fffdf8;border-color:#e9dfd2}
.staple-media{position:relative;display:grid;place-items:center;aspect-ratio:1;min-width:0;max-width:100%;background:#f4f2ed;border-radius:8px;overflow:hidden}
.staple-media img{display:block;position:absolute;width:100%;height:100%;object-fit:contain}
.staple-media img[hidden],.staple-image-fallback[hidden]{display:none}
.staple-image-fallback{font-size:12px;line-height:1.4;text-align:center;color:#6c6a61;padding:8px;overflow-wrap:anywhere}
.staple-details{min-width:0;padding-left:16px}
.staple-details h2,.staple-details h3{font-size:18px;line-height:1.4;margin:0;font-weight:650}
.staple-details p{margin:8px 0;line-height:1.5}
.staple-details .staples-actions{margin-top:12px}
.staple-upc{font-size:13px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.staple-name{display:block;font-size:13px;color:#67695f;margin-top:4px}
.staple-choice{display:flex;gap:10px;align-items:flex-start;min-height:44px;cursor:pointer;margin:0}
.staple-choice input,.staple-confirm input{width:22px;height:22px;min-width:22px;flex:0 0 22px;margin:3px 0 0;accent-color:#795a42}
.staple-choice>span{min-width:0}
.staples-message{margin:0;line-height:1.5}
.staples-grid>.empty{grid-column:1/-1}
#editor:has([data-staples-dialog]){width:min(760px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:24px;box-sizing:border-box;overflow-y:auto;color:#34372e}
#editor:has([data-staples-dialog]) .section-head{gap:12px;align-items:flex-start;margin-bottom:20px}
#editor:has([data-staples-dialog]) .icon-button{min-width:44px}
#editor:has([data-staples-dialog]) .modal-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.staple-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.staple-form label,.staple-map>label{display:flex;flex-direction:column;gap:8px;margin:0;min-width:0;line-height:1.5}
.staple-form input,.staple-form textarea,.staple-map input{width:100%;min-width:0;margin:0;box-sizing:border-box;font:inherit}
.staple-form input,.staple-map input{min-height:48px}
.staple-form input[type=number]{font-variant-numeric:tabular-nums}
[data-staples-results]{display:grid;gap:20px;margin-top:20px}
.staple-review{display:grid;gap:16px}
.staple-review>p{margin:0;line-height:1.6}
.staple-confirm{display:flex;gap:12px;align-items:flex-start;min-height:44px;margin:0;line-height:1.5;cursor:pointer}
@media(max-width:900px){.staples-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){
 .shopping-page .shopping-tabs{justify-self:stretch;flex-wrap:nowrap;align-items:stretch}
 .shopping-page .shopping-tabs button{flex:1 1 0;min-width:0;padding-inline:8px}
 .staples .page-heading{flex-wrap:wrap}
 .staple-details{padding-left:12px}
 .staples .staple.card{padding:12px}
 .staple-details h2,.staple-details h3{font-size:16px}
 .staples-actions>button{flex:1 1 auto}
 .staples>.staples-actions strong{flex:1 1 100%}
 .staple-form{grid-template-columns:minmax(0,1fr)}
 #editor:has([data-staples-dialog]){padding:16px}
 #editor:has([data-staples-dialog]) .modal-actions button{flex:1 1 auto}
}