/* Shared styles for every marketplace-shopping page (the main browse
   page, Search by Image, and any future one like it) — the toolbar,
   the All Filters / Search by Ingredient side drawers, and the bundle
   pricing strip. Kept in one file so all these pages look and behave
   identically; a change here updates every page that links it. */

.pricing{margin:14px clamp(22px,5vw,72px) 0;padding:8px clamp(14px,3vw,24px);border:1px solid var(--line);border-radius:999px;background:var(--paper);box-shadow:var(--shadow);display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;font-size:.82rem;}
.pricing-label{font:600 .82rem Georgia,serif;color:var(--plum);white-space:nowrap;}
.tier-row{display:flex;flex-wrap:wrap;gap:4px 14px;flex:1 1 auto;}
.tier{white-space:nowrap;color:var(--ink);}
.tier strong{font-weight:800;color:var(--sage-dark);}
.tier span{color:var(--muted);}
.pricing-info{position:relative;display:inline-flex;margin-left:auto;}
.pricing-info summary{list-style:none;cursor:pointer;color:var(--muted);font-size:.78rem;text-decoration:underline;white-space:nowrap;}
.pricing-info summary::-webkit-details-marker{display:none;}
.pricing-info[open] summary{color:var(--ink);}
.pricing-footnote{position:absolute;top:100%;right:0;margin-top:6px;width:min(320px,80vw);padding:12px 14px;border-radius:12px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--muted);font-size:.8rem;z-index:5;}
.pricing-footnote strong{color:var(--sage-dark);}
@media(max-width:680px){.pricing{border-radius:16px;} .pricing-info{margin-left:0;}}

/* Toolbar: All Filters (Etsy-style pill) + search + the other search
   mode(s), left to right in one row. */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:18px 0 14px;}
.all-filters-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-weight:700;font-size:.88rem;cursor:pointer;box-shadow:var(--shadow);}
.all-filters-btn:hover{border-color:var(--plum);color:var(--plum);}
.filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--plum);color:#fff;font-size:.7rem;font-weight:800;}
.toolbar input[type="search"]{flex:1 1 220px;min-width:180px;padding:10px 14px;border-radius:999px;border:1px solid var(--line);font-size:.9rem;}
.toolbar-link{background:none;border:none;padding:8px 4px;color:var(--plum);font-weight:700;font-size:.85rem;text-decoration:underline;cursor:pointer;white-space:nowrap;font-family:inherit;}
.active-filter-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;padding:10px 16px;border-radius:12px;background:var(--soft);border:1px solid var(--line);font-size:.85rem;color:var(--ink);}
.active-filter-banner button{border:none;background:none;color:var(--plum);font-weight:700;text-decoration:underline;cursor:pointer;font-size:.85rem;font-family:inherit;}

/* Side drawer, shared by the Filters panel and the Search-by-Ingredient
   panel — same slide-in-from-the-right pattern used in the blogger
   portal, so every panel on the site behaves consistently. */
.panel-backdrop{display:none;position:fixed;inset:0;background:rgba(30,24,18,.35);z-index:40;}
.panel-backdrop.show{display:block;}
.side-drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);background:var(--paper);box-shadow:-12px 0 40px rgba(30,24,18,.18);z-index:50;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;}
.side-drawer.show{transform:translateX(0);}
.side-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px clamp(18px,4vw,28px) 14px;border-bottom:1px solid var(--line);}
.side-drawer-head h3{font:400 1.3rem Georgia,serif;color:var(--plum);}
.side-panel-close{background:none;border:none;font-size:1.6rem;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px;}
.side-drawer-body{flex:1;overflow-y:auto;padding:16px clamp(18px,4vw,28px) 20px;}
.side-drawer-foot{display:flex;gap:10px;padding:14px clamp(18px,4vw,28px);border-top:1px solid var(--line);}
.side-drawer-foot .button{flex:1;text-align:center;}
.filter-group{margin-bottom:22px;}
.filter-group h4{margin:0 0 8px;font-size:.82rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.checkbox-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto;}
.checkbox-list label{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--ink);cursor:pointer;}
.checkbox-list input[type="checkbox"]{width:16px;height:16px;accent-color:var(--plum);}
.portal-field-like{display:block;width:100%;padding:10px;border-radius:8px;border:1px solid #cec4b7;font-size:.95rem;}
.side-drawer-body label{font-weight:700;font-size:.85rem;color:var(--muted);display:block;margin-bottom:4px;}

@media(max-width:520px){ .side-drawer{width:100vw;} }