.sh-qty-input{width:48px;font-size:12px;font-weight:700;color:#9089a6;background:rgba(0,0,0,.05);border:1.5px solid transparent;border-radius:5px;padding:1px 5px;font-family:inherit;text-align:center;outline:none;transition:border-color .15s,background .15s;}
.sh-qty-input:focus{border-color:var(--pink);background:#fff;color:var(--dark);}
.sh-qty-input::placeholder{color:rgba(144,137,166,.5);}
.sh-sub{font-size:11px;color:var(--muted);margin-top:1px;font-weight:500;}
.sh-brand-row{font-size:11px;color:#9089a6;margin-top:1px;font-style:italic;}

/* ADD TO WEEK MODAL */
.aw-overlay{display:none;position:fixed;inset:0;background:rgba(28,28,46,.5);z-index:300;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.aw-overlay.on{display:flex;animation:fi .16s ease;}
.aw-box{background:#fff;border-radius:22px;padding:26px;width:380px;box-shadow:var(--sh-lg);}
.aw-box h3{font-size:16px;font-weight:800;color:var(--dark);margin-bottom:4px;}
.aw-meal-name{font-size:13px;color:var(--muted);margin-bottom:20px;font-weight:500;}
.aw-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px;}
.aw-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:7px;}
.aw-select{width:100%;padding:10px 13px;border:none;border-radius:11px;font-size:13px;font-family:inherit;outline:none;background:var(--bg);cursor:pointer;color:var(--text);font-weight:600;box-shadow:var(--sh-sm);}
.aw-actions{display:flex;gap:8px;justify-content:flex-end;}

/* MEAL PICKER SHEET */
.overlay{display:none;position:fixed;inset:0;background:rgba(28,28,46,.45);z-index:200;align-items:flex-end;justify-content:center;backdrop-filter:blur(4px);}
.overlay.on{display:flex;animation:oi .14s ease;}
@keyframes oi{from{opacity:0}to{opacity:1}}
.sheet{background:var(--surface);border-radius:24px 24px 0 0;width:100%;max-width:600px;max-height:84vh;display:flex;flex-direction:column;animation:shi .2s cubic-bezier(.16,1,.3,1);}
@keyframes shi{from{transform:translateY(50px);opacity:.6}to{transform:translateY(0);opacity:1}}
.sheet-handle{width:40px;height:4px;background:var(--bg2);border-radius:2px;margin:12px auto 0;flex-shrink:0;}
.sheet-hdr{padding:16px 22px 14px;border-bottom:1px solid rgba(0,0,0,.06);flex-shrink:0;}
.sheet-hdr h3{font-size:17px;font-weight:800;}
.sheet-hdr .sub{font-size:12px;color:var(--muted);margin-top:2px;font-weight:600;}
/* All/Best Match/Toddler used to be separate gapped pills -- fused into one
   continuous bar, divided by thin rules instead of gaps. */
.sfilters{display:flex;gap:0;padding:12px 22px;flex-shrink:0;}
.ftab{padding:10px 18px;border-radius:0;border-right:1.5px solid rgba(0,0,0,.08);font:300 12.5px 'Quicksand',sans-serif;cursor:pointer;background:var(--bg);color:var(--muted);transition:all .14s;user-select:none;}
.ftab:last-child{border-right:none;}
.ftab.on{background:var(--pink);color:var(--dark);box-shadow:none;}
.ssearch{padding:0 22px 12px;flex-shrink:0;}
.slist{overflow-y:auto;padding:0 22px 22px;flex:1;}
.slist::-webkit-scrollbar{width:4px;}
.slist::-webkit-scrollbar-thumb{background:var(--bg2);border-radius:2px;}
.sitem{border-radius:0;padding:13px 14px;margin-bottom:8px;cursor:pointer;transition:all .14s;background:var(--bg);border:2px solid transparent;}
.sitem:hover{background:#fff;border-color:var(--pink);box-shadow:var(--sh-sm);}
.sitem-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;}
.sitem-name{font-size:13px;font-weight:700;}
.sitem-note{font-size:11px;color:var(--muted);font-style:italic;margin-top:6px;}

/* ADD RECIPE MODAL */
.cr-overlay{display:none;position:fixed;inset:0;background:rgba(28,28,46,.55);z-index:400;align-items:center;justify-content:center;backdrop-filter:blur(6px);padding:20px;}
.cr-overlay.on{display:flex;animation:fi .18s ease;}
.cr-box{background:#fff;border-radius:24px;padding:28px;width:100%;max-width:var(--modal-md);box-shadow:var(--sh-lg);max-height:90vh;max-height:90dvh;overflow-y:auto;}
.cr-box h3{font-size:20px;font-weight:700;color:var(--dark);margin-bottom:4px;}
#share-photo-title{font-family:'Jost',sans-serif;}

.cookbook-flip-box{background:#fffbf7;border-radius:24px;padding:28px;width:100%;max-width:720px;box-shadow:var(--sh-lg);max-height:90vh;overflow-y:auto;position:relative;}
.cookbook-toc-item{display:flex;align-items:center;justify-content:space-between;background:var(--bg);border:none;border-radius:0;padding:14px 20px;font:700 18px 'Jost',sans-serif;text-transform:uppercase;letter-spacing:.6px;color:#1c1c2e;cursor:pointer;transition:transform .15s;width:100%;text-align:left;}
.cookbook-toc-item:hover{transform:translateX(4px);}
.cookbook-toc-count{font-size:12px;background:#fff6ae;color:#1c1c2e;padding:3px 10px;border-radius:100px;font-weight:800;flex-shrink:0;margin-left:10px;}
.cookbook-flip-stage{position:relative;perspective:2200px;display:flex;align-items:center;gap:14px;}
.cookbook-flip-pages{position:relative;flex:1;height:420px;}
.cookbook-flip-page{position:absolute;inset:0;background:#fff;border-radius:4px 14px 14px 4px;box-shadow:0 10px 30px rgba(28,28,46,.18);padding:26px 30px;overflow-y:auto;border-left:6px solid #1c1c2e;}
.cookbook-flip-page-top{transform-style:preserve-3d;transform-origin:left center;transition:transform .55s cubic-bezier(.45,.05,.55,.95);backface-visibility:hidden;z-index:2;}
.cookbook-flip-page-top.turning-next{transform:rotateY(-160deg);}
.cookbook-flip-page-top.turning-prev{transform:rotateY(160deg);}
.cookbook-flip-nav{flex-shrink:0;width:40px;height:40px;border-radius:0;border:none;background:var(--bg);color:#1c1c2e;font-family:'Jost',sans-serif;font-size:24px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.cookbook-flip-nav:hover:not(:disabled){background:var(--bg);}
.cookbook-flip-nav:disabled{opacity:.3;cursor:default;}
.cookbook-page-type{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:6px;}
.cookbook-page-name{font-family:'Julius Sans One',sans-serif;font-weight:400;font-size:24px;margin-bottom:6px;}
.cookbook-page-meta{font-size:12px;color:var(--muted);margin-bottom:16px;}
.cookbook-page-ings{margin:0 0 20px;padding-left:18px;font-size:13px;line-height:1.8;color:#1c1c2e;}
.cookbook-page-check{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;cursor:pointer;background:rgba(255,201,246,.25);padding:10px 14px;border-radius:12px;width:fit-content;}
.cookbook-page-check input{width:18px;height:18px;}
.cookbook-review-item{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:10px;padding:10px 14px;font-size:13px;font-weight:700;color:#1c1c2e;}
.cookbook-review-item button{background:none;border:none;color:#1c1c2e;font-family:'Jost',sans-serif;font-size:16px;font-weight:500;cursor:pointer;}
@media (max-width:640px){.cookbook-flip-stage{gap:6px;}.cookbook-flip-pages{height:320px;}.cookbook-flip-nav{width:32px;height:32px;font-size:16px;flex-shrink:0;}.cookbook-flip-page{padding:20px 16px;}}
/* VIEW RECIPE MODAL — cream grid-paper ground (matches Recipes' .p2p-main
   texture) with a floating doodle, and the sidebar/content panels raised
   as white cards on top of it instead of sitting flush against plain white. */
.view-recipe-box{position:relative;background:#fffbf7;background-image:linear-gradient(rgba(28,28,46,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(28,28,46,.045) 1px,transparent 1px);background-size:26px 26px;border-radius:24px;width:100%;max-width:900px;max-height:90vh;max-height:90dvh;display:flex;flex-direction:column;box-shadow:var(--sh-lg);overflow:hidden;}
/* Tucked into the corner (mostly clipped by .view-recipe-box's own
   overflow:hidden + rounded corner) instead of sitting behind the header
   text, so it reads as a small decorative accent instead of overlapping
   the recipe name. */
.vrb-doodle{position:absolute;top:-18px;left:-18px;width:52px;height:auto;opacity:.5;transform:rotate(8deg);filter:drop-shadow(0 6px 12px rgba(28,28,46,.14));pointer-events:none;z-index:0;}
.vrb-header{position:relative;z-index:1;padding:22px 28px 18px;border-bottom:1px solid rgba(0,0,0,.07);display:flex;align-items:center;gap:16px;flex-shrink:0;}
/* Weight+stroke match the recipe card's own title treatment
   (#pane-recipes .cf-card-name, tab-headers-and-recipes-browse.css) --
   font-weight alone doesn't read as bold on Julius Sans One (it only ships
   one weight), so the stroke does the real work. */
.vrb-name{font-family:'Julius Sans One',sans-serif;font-size:32px;font-weight:700;-webkit-text-stroke:.6px currentColor;text-transform:uppercase;letter-spacing:.3px;color:var(--dark);line-height:1.2;flex:1;}
.vrb-close{background:none;border:none;font-family:'Jost',sans-serif;font-size:26px;font-weight:500;color:#1c1c2e;cursor:pointer;line-height:1;padding:0 0 0 8px;flex-shrink:0;}
.vrb-close:hover{color:var(--dark);}
.vrb-body{position:relative;z-index:1;display:flex;flex:1;overflow:hidden;min-height:0;gap:16px;padding:16px;}
.vrb-left{width:220px;flex-shrink:0;padding:20px 18px;overflow-y:auto;background:#fff;border-radius:16px;box-shadow:0 8px 20px rgba(28,28,46,.06);}
.vrb-right{flex:1;padding:20px 22px;overflow-y:auto;background:#fff;border-radius:16px;box-shadow:0 8px 20px rgba(28,28,46,.06);}
.vrb-meta-row{font-size:13px;color:var(--dark);font-weight:500;margin-bottom:9px;display:flex;align-items:center;gap:7px;}
.vrb-sec-title{font-family:'Julius Sans One',sans-serif;font-size:18px;font-weight:400;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid rgba(0,0,0,.06);}
.vrb-ing-row{display:flex;align-items:baseline;gap:0;padding:5px 0;border-bottom:1px solid rgba(0,0,0,.04);font-size:13px;}
.vrb-ing-row:last-child{border-bottom:none;}
.vrb-ing-qty{min-width:90px;font-weight:700;color:var(--dark);flex-shrink:0;}
.vrb-ing-name{color:#3d3a52;}
.vrb-measure-row{display:flex;align-items:center;gap:0;margin-bottom:16px;}
/* Imperial/Metric and 1x/1.5x/2x/3x used to sit as separate gapped pills --
   fused into one continuous bar (adjacent buttons share a border edge
   instead of each having its own all-around pill outline). */
.vrb-measure-row .conv-tab{border-radius:0;}
.vrb-measure-row .conv-tab+.conv-tab{border-left:none;}
/* Imperial/Metric and 1x/1.5x/2x/3x read as outline-only pills everywhere
   else .conv-tab is used (the Measurements converter) -- filled solid here
   instead, white for the unselected option and yellow for the selected
   one, so state is visible at a glance without leaning on the border
   color. The unselected fill needs its own border (unlike a colored fill)
   since white-on-white would otherwise disappear against .vrb-left/.vrb-
   right's own white background. !important matches recipe-cards-and-
   search.css's own .conv-tab.on override, which would otherwise win the
   cascade regardless of this file's load order. */
#view-recipe-overlay .conv-tab{background:#fff!important;border-color:rgba(0,0,0,.15)!important;color:#1c1c2e!important;}
#view-recipe-overlay .conv-tab.on{background:var(--yellow)!important;border-color:var(--yellow)!important;color:#1c1c2e!important;}
.vrb-type-pill{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;padding:4px 14px;border-radius:50px;margin-bottom:14px;}
.vrb-chef-link{color:var(--pink-dark,#9d174d);text-decoration:none;cursor:pointer;}
.vrb-chef-link:hover{text-decoration:underline;}
/* object-position:top -- these logo images (Chef Logo column) tend to be a
   tall lockup with the actual mark up top and a wordmark below (see Bites
   with Applewhite's), same as FEATURED_TASTEMAKER's own logo crop
   (potluck.css .featured-tastemaker-logo) -- center-cropping lands right on
   the boundary between the two and shows neither clearly. */
.vrb-chef-logo{width:32px;height:32px;border-radius:50%;object-fit:cover;object-position:top center;flex-shrink:0;}
@media (max-width:700px){
  .cr-overlay{padding:10px;}
  .view-recipe-box{max-height:88vh;max-height:88dvh;border-radius:18px;}
  .vrb-header{padding:16px 18px 14px;gap:10px;}
  .vrb-name{font-size:21px;}
  .vrb-doodle{display:none;}
  .vrb-body{flex-direction:column;padding:12px;gap:12px;overflow-y:auto;}
  .vrb-left{width:100%;box-sizing:border-box;}
  .vrb-right{min-width:0;box-sizing:border-box;flex:none;}
  .vrb-measure-row{flex-wrap:wrap;row-gap:6px;}
  .vrb-ing-qty{min-width:70px;}
}
.cr-sub{font-size:13px;color:var(--muted);margin-bottom:22px;font-weight:500;}
.cr-blurb{font-size:14px;line-height:1.5;color:var(--text);background:rgba(255,246,174,.5);border-radius:14px;padding:14px 16px;margin-bottom:18px;}
.import-method-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px;}
.import-method-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 12px;border-radius:0;border:none;background:var(--bg);font-size:28px;cursor:pointer;transition:background .15s;}
.import-method-btn span{font-size:16px;font-weight:500;color:#1c1c2e;font-family:'Jost',sans-serif;}
.import-method-btn.on{background:#1c1c2e;}
.import-method-btn.on span{color:#fff;}
@media (max-width:560px){.import-method-picker{grid-template-columns:1fr;}}
.cr-row{margin-bottom:16px;}
.cr-row label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:7px;}
.cr-input{width:100%;padding:11px 15px;border:2px solid transparent;border-radius:12px;font-size:13px;font-family:inherit;outline:none;background:var(--bg);color:var(--text);font-weight:600;transition:all .18s;}
.cr-input:focus{border-color:var(--pink);background:#fff;box-shadow:0 0 0 3px rgba(200,80,200,.1);}
.cr-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.cr-select{width:100%;padding:11px 15px;border:2px solid transparent;border-radius:12px;font-size:13px;font-family:inherit;outline:none;background:var(--bg);color:var(--text);font-weight:600;cursor:pointer;}
.cr-select:focus{border-color:var(--pink);}
.cr-tod-row{display:flex;align-items:center;gap:10px;padding:13px 15px;background:var(--bg);border-radius:12px;height:100%;}
.cr-tod-row label{font-size:13px;font-weight:600;color:var(--text);margin-bottom:0;text-transform:none;letter-spacing:0;}
.cr-tod-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--pink);cursor:pointer;flex-shrink:0;}
.cr-tiw{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px;border:2px solid transparent;border-radius:12px;background:var(--bg);cursor:text;min-height:52px;align-items:center;transition:all .18s;}
.cr-tiw.foc{border-color:var(--pink);background:#fff;box-shadow:0 0 0 3px rgba(200,80,200,.1);}
.cr-tiw input{border:none;outline:none;background:none;font-size:13px;font-family:inherit;color:var(--text);min-width:120px;flex:1;padding:2px 4px;}
.cr-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:22px;padding-top:16px;border-top:1px solid var(--border);}

/* PANTRY HEADER */
.pantry-hdr{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.pantry-hdr .lbl{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#1c1c2e;}
.pantry-cnt{font-size:11px;font-weight:700;color:var(--muted);background:var(--bg2);padding:2px 10px;border-radius:var(--rp);}

/* MISC */
.mode{display:none;}
.mode.on{display:block;}
.empty{text-align:center;padding:52px 20px;color:var(--muted);}
.empty .ico{font-size:42px;margin-bottom:14px;opacity:.7;}
.empty h3{font-size:16px;font-weight:500;color:var(--text);margin-bottom:6px;}
.empty p{font-size:13px;line-height:1.6;max-width:320px;margin:0 auto;}
@media(min-width:640px){.overlay{align-items:center;}.sheet{border-radius:22px;max-height:76vh;}@keyframes shi{from{transform:translateY(18px) scale(.98);opacity:.5}to{transform:translateY(0) scale(1);opacity:1}}}
@media print{
  *{box-shadow:none!important;text-shadow:none!important;}
  .topbar,.teal-strip,.concept-sec,.tab-bar,.planner-hdr,.aw-overlay,.overlay,.cr-overlay,.tobuy-add,.sh-actions,.sh-share-wrap{display:none!important;}
  body{background:#fff!important;}
  body::before{display:none!important;}
  .main{padding:0!important;}
  .pane{display:none!important;background:#fff!important;}
  .pane::before{display:none!important;}
  #pane-shopping{display:block!important;}
  .float-panel{background:#fff!important;border:none!important;padding:8px 0!important;}
  h2{font-size:16px;margin-bottom:6px;}
  .sh-sec-title{font-size:13px;font-weight:700;margin-bottom:4px;}
  .sh-cnt{display:none;}
  .sh-sec,#shop-content details{background:none!important;padding:0!important;}
  .sh-sec{columns:3;column-gap:16px;font-size:11px;line-height:1.7;margin-bottom:8px;}
  .sh-item{break-inside:avoid;display:flex;align-items:baseline;gap:4px;}
  .sh-item input[type=checkbox]{display:none;}
  .sh-item::before{content:"•";font-size:10px;}
  .sh-sub{display:none;}
  .sh-manual{border:none!important;padding:0!important;background:none!important;}
}

/* SHOP ONLINE DROPDOWNS */
.shop-online-select{padding:10px 14px;border-radius:12px;border:2px solid transparent;background:var(--bg);font-size:13px;font-weight:600;font-family:inherit;color:var(--text);}

/* RECIPES TAB */
.rec-search{padding:10px 15px;border:2px solid var(--pink);border-radius:0;font-size:13px;font-family:inherit;font-weight:500;outline:none;background:var(--surface);box-shadow:var(--sh-sm);color:var(--text);width:240px;transition:all .18s;}
.rec-search:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(200,80,200,.12);}
.rec-search::placeholder{color:var(--muted);}
/* auto-fill/minmax instead of a flat repeat(4,1fr) -- fixed 4-across
   stretched each card to fill whatever space was left over on a wide
   screen, however wide that made them. Capping each card at 190px keeps
   them narrow regardless of viewport width; more columns appear on wider
   screens instead of the existing ones stretching. */
/* justify-content:center -- auto-fill sizes columns to fit as many
   150-190px cards as the row allows, but leaves any leftover width
   (when the row doesn't divide evenly) as empty space after the last
   column rather than distributing it, so the whole row read as
   left-aligned instead of centered on the page. */
/* auto-fit, not auto-fill -- auto-fill reserves a full track's worth of
   width for every column the row COULD fit, even ones with no card in
   them, so with (say) 4 real cards in a row wide enough for 5, that 5th
   empty track still ate space on the right. justify-content:center then
   centered the real cards *plus* that invisible empty track, which
   visibly pushed the actual cards left of center. auto-fit collapses
   empty tracks to 0 width, so centering only ever applies to the cards
   that actually exist. */
#recipes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(188px,238px));gap:14px;justify-content:center;}
/* No breakpoint overrides needed below -- auto-fill already adds/drops
   columns to fit the available width on its own, still capped at 190px
   per card, instead of these fixed repeat(N,1fr) counts stretching each
   card wider again at every step down. */
#recipes-grid.cf-list-mode{display:block;}
.cf-list-group-label{font-family:'Jost',sans-serif;font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:1px;color:#6b6478;margin:22px 0 8px;}
.cf-list-group-label:first-child{margin-top:0;}
.cf-list-row{display:flex;align-items:center;gap:14px;background:#fff;border-radius:0;padding:12px 16px;margin-bottom:8px;box-shadow:0 4px 14px rgba(28,28,46,.06);cursor:pointer;}
.cf-list-row-name{flex:1;min-width:0;font-family:'Quicksand',sans-serif;font-weight:600;font-size:15px;color:#1c1c2e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cf-list-row-badges{display:flex;gap:6px;flex-shrink:0;}
/* Affiliate disclosure. Amazon (OA §5) requires it be clear and prominent;
   the FTC (16 CFR §255.0(f)) additionally requires it be unavoidable and
   stand out from surrounding text. So: full contrast, not var(--muted), and
   never smaller than 12px. Do not tone this down to match the surrounding
   caption styling — the whole point is that it does not blend in. The pink
   fill itself is what delineates it from the page now that there's no
   border, so keep it solid rather than fading it toward a neutral. */
.aff-disclosure{
  font-size:12px;
  font-weight:600;
  line-height:1.5;
  color:#1c1c2e;
  background:var(--pink);
  border-radius:10px;
  padding:9px 13px;
  margin:0 0 16px;
}
.aff-disclosure-inline{margin:10px 0 0;font-size:11.5px;padding:7px 11px;}
.gift-more-link{margin:0 0 20px;font-size:13px;}
.gift-more-link a{color:var(--pink-dark,#a3117a);font-weight:700;text-decoration:none;}
.gift-more-link a:hover{text-decoration:underline;}
/* Amazon disclosure moved out of the pink banner up top (too loud for a
   legal disclaimer) to a quiet footer line under the gift board instead. */
.gift-footer-disclosure{background:none;color:var(--muted);font-weight:500;font-size:11px;text-align:center;border-top:1.5px solid rgba(0,0,0,.08);padding:16px 0 0;margin:28px 0 0;border-radius:0;}

/* Muse cross-promo, styled as the same floating circular FAB pattern as
   Recipes' "To Weekly Plan" arrow (.staging-nav-arrow-float,
   css/dish-cards.css) -- pink instead of that button's teal, so it still
   reads as this pane's own accent rather than a copy-paste of Recipes'. */
.ph-muse-fab{background:linear-gradient(180deg,var(--pink) 0%,var(--pink-dark,#a3117a) 100%);color:#fff;font-size:15px;}
.ph-muse-fab:hover{background:var(--pink-dark,#a3117a);color:#fff;}

/* Positioned relative to #pane-recipes (already position:relative), not
   .cf-browse -- .cf-browse is ALSO position:relative but collapses to
   near-zero width in its flex context (the full-bleed .pane-hdr-band
   trick doesn't count toward flex intrinsic sizing), so anything
   positioned relative to it inherits that collapse. Placed as a sibling
   after .cf-browse in the HTML (not nested inside it) so it resolves
   against #pane-recipes instead. left/top calibrated to the card's
   (.ph-wrap) actual top-left corner. */
/* Static tilt, no float animation -- unlike the other hero doodles
   (.ph-big-doodle), these two corner stickers stay still. */
.ph-corner-sunglasses{position:absolute;top:60px;left:460px;width:110px;z-index:2;pointer-events:none;transform:rotate(2deg);}
@media(max-width:1100px){.ph-corner-sunglasses{display:none;}}
/* Social Feed's cork sticker -- same corner-perch treatment as
   Recipes' sunglasses above, placed the same way (sibling of
   .p2p-main, resolving against #pane-feed's position:relative) to
   avoid the same .cf-browse-style flex-collapse trap. */
.ph-corner-cork{position:absolute;top:60px;left:460px;width:70px;z-index:2;pointer-events:none;transform:rotate(14deg);}
@media(max-width:1100px){.ph-corner-cork{display:none;}}
/* Shared gentle float for every hand-drawn hero doodle on the right
   side (.ph-big-doodle, css/pane-hero-v2.css) -- same slow vertical
   bob, no rotation. */
@keyframes ph-doodle-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}

/* auto-fit instead of auto-fill -- same fix as #recipes-grid above and
   for the same reason: auto-fill reserves a track's worth of width for
   every column a row COULD fit even when there's no item to put in it,
   which reads as content sitting left-of-center whenever the item count
   doesn't happen to fill every column exactly. */
#products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;max-width:1280px;margin-left:auto;margin-right:auto;}
.prod-card{background:#fff;border-radius:0;padding:16px 18px;border:2px solid #ffc9f6;border-left-width:8px;display:flex;flex-direction:column;gap:8px;box-shadow:0 0 20px rgba(255,255,255,.9);}
.prod-photo{width:100%;height:96px;border-radius:10px;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:14px;box-sizing:border-box;}
.prod-photo svg{width:100%;height:100%;}
.prod-photo.has-photo{padding:0;}
.prod-photo.has-photo img{width:100%;height:100%;object-fit:contain;border-radius:10px;}
.prod-cat{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);background:rgba(0,0,0,.06);border-radius:50px;padding:3px 10px;display:inline-block;width:fit-content;}
.prod-name{font-size:14px;font-weight:700;color:var(--dark);line-height:1.35;}
.prod-why{font-size:12.5px;color:var(--dark);opacity:.75;line-height:1.5;}
.prod-links{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:10px;border-top:1px solid rgba(0,0,0,.06);}
.recipes-scroll-box{position:relative;overflow:hidden;border-radius:14px;border:1.5px solid rgba(200,80,200,.12);background:#fffbf7;background-image:radial-gradient(rgba(28,28,46,.07) 1.5px,transparent 1.5px);background-size:30px 30px;padding:14px;}
/* Cookfolio's My Recipes/Guava's grid drops the box (border, dotted
   background, padding) so the cards sit straight on the page -- keeps
   .recipes-scroll-box itself (position:relative) since .recipes-scroll-doodle
   below is positioned absolute against it. */
.recipes-scroll-box.unboxed{border:none;background:none;padding:0;border-radius:0;}
.recipes-scroll-doodle{position:absolute;opacity:.5;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(28,28,46,.06));z-index:0;}
#recipes-grid,#products-grid{position:relative;z-index:1;}
.recipes-scroll-box::-webkit-scrollbar{width:4px;}
.recipes-scroll-box::-webkit-scrollbar-thumb{background:var(--bg2);border-radius:2px;}
/* TABLE CONTEXT MENU */
#rt-ctx-menu{display:none;position:fixed;background:#fff;border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.18);padding:6px 0;min-width:175px;z-index:9999;font-family:'Quicksand',sans-serif;}
.rt-ctx-title{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#9089a6;padding:8px 14px 4px;}
.rt-ctx-item{padding:9px 14px;font-size:13px;font-weight:600;color:#1c1c2e;cursor:pointer;display:flex;align-items:center;gap:9px;user-select:none;}
.rt-ctx-item:hover{background:#fff0fd;}
.rcard{background:#fff;border-radius:0;padding:0;transition:transform .18s;position:relative;overflow:hidden;border:none;height:420px;display:flex;flex-direction:column;}
.rcard::after{display:none;}
.rcard:hover{transform:translateY(-2px);box-shadow:0 0 24px rgba(255,255,255,.95);}
.chip-qty{font-size:10px;font-weight:700;color:var(--muted);background:rgba(0,0,0,.07);border-radius:4px;padding:1px 5px;margin-right:2px;}
.chip-edit{cursor:pointer;}
.chip-edit:hover .chip-qty{background:rgba(200,80,200,.15);color:var(--pink);}
#ing-qty-pop{position:fixed;z-index:9999;background:#fff;border:1.5px solid rgba(200,80,200,.25);border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.14);padding:12px 14px;display:none;min-width:200px;}
#ing-qty-pop label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);display:block;margin-bottom:6px;}
#ing-qty-inp{width:100%;border:1.5px solid rgba(200,80,200,.25);border-radius:8px;padding:6px 10px;font-size:14px;font-family:inherit;outline:none;box-sizing:border-box;}
#ing-qty-inp:focus{border-color:var(--pink);}
#ing-qty-pop .qty-btns{display:flex;gap:6px;margin-top:8px;}
#shop-item-pop{position:fixed;z-index:9999;background:#fff;border:1.5px solid rgba(200,80,200,.25);border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.14);padding:14px 16px;display:none;min-width:240px;}
#shop-item-pop .sip-lbl{font-size:12px;font-weight:800;color:var(--dark);margin-bottom:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#shop-item-pop .sip-field-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);display:block;margin-bottom:4px;}
.sip-inp{width:100%;border:1.5px solid rgba(200,80,200,.25);border-radius:8px;padding:6px 10px;font-size:13px;font-family:inherit;outline:none;box-sizing:border-box;}
.sip-inp:focus{border-color:var(--pink);}
.sh-edit-btn{background:none;border:none;cursor:pointer;font-size:13px;color:var(--muted);padding:0 3px;opacity:.55;transition:opacity .15s;vertical-align:middle;font-family:inherit;}
.sh-edit-btn:hover{opacity:1;color:var(--pink);}

.rec-empty{text-align:center;padding:52px 20px;color:var(--muted);}
.rec-empty .ico{font-size:42px;margin-bottom:14px;opacity:.7;}