/* ============================================================
   PANE HERO v2 — Santa-Lyna-style reskin of the in-app pane
   header chrome (Recipes / Weekly Plan / Grocery List).
   Namespace: gh- (Guava Hero) — distinct from landing's gl- prefix.

   This file is purely additive/overriding CSS. It does not touch
   any HTML structure that other code reads from (no ids, no data
   attributes, no onclick handlers renamed or removed) -- it only
   restyles the *existing* JS-rendered .pane-hdr-band markup
   (renderPaneHdrBands(), js/shopping-list.js) via new rules on its
   real classes (.ph-wrap/.ph-title-box/.ph-pill/.ph-desc/etc).

   Every rule below is scoped to one of the seven real data-hdr-title
   values this pass reskins (Cookfolio / Weekly Schedule / Shopping
   / Last Minute / Social Feed / Recommended Products / Curated Gifts)
   rather than data-hdr-color, since several panes
   share the same color code (e.g. Shopping/Last Minute/Recommended
   Products are all teal) but each still needs its own selector so
   its background pattern and breadcrumb rules stay independent.
   "Shopping" is Grocery List's data-hdr-title, and "Last Minute" is the pane
   that used to be labeled "Forkast" (the nav's Plan dropdown already
   called it "Last Minute" -- the hero eyebrow now matches) -- both
   renamed along with the eyebrow/copy that reads from the same
   attribute, so every selector below had to rename too, same
   dual-purpose-attribute gotcha as the earlier Weekly Plan ->
   Weekly Schedule rename.

   Loaded last in html-partials/head.html so it wins cascade ties
   against css/dish-cards.css (where .pane-hdr-band's base rules
   live) without needing !important anywhere.

   Potluck used to be an eighth pane reskinned here, but it since moved
   to its own standalone video hero (.plh-hero, css/potluck.css) and no
   longer renders a .pane-hdr-band at all -- its rules were removed from
   this file rather than left dead.
   ============================================================ */

/* ---- shared reset: turn the absolute-positioned title/pill/desc
   stack into a plain vertical flow so order in the DOM (title,
   pill, description) reads top-to-bottom like the mockups ---- */
.pane-hdr-band[data-hdr-title="Cookfolio"],
.pane-hdr-band[data-hdr-title="Weekly Schedule"],
.pane-hdr-band[data-hdr-title="Shopping"],
.pane-hdr-band[data-hdr-title="Last Minute"],
.pane-hdr-band[data-hdr-title="Social Feed"],
.pane-hdr-band[data-hdr-title="Recommended Products"],
.pane-hdr-band[data-hdr-title="Curated Gifts"]{
  padding:96px clamp(24px,6vw,80px) 56px;
}
.pane-hdr-band[data-hdr-title="Cookfolio"] .ph-wrap,
.pane-hdr-band[data-hdr-title="Weekly Schedule"] .ph-wrap,
.pane-hdr-band[data-hdr-title="Shopping"] .ph-wrap,
.pane-hdr-band[data-hdr-title="Last Minute"] .ph-wrap,
.pane-hdr-band[data-hdr-title="Social Feed"] .ph-wrap,
.pane-hdr-band[data-hdr-title="Recommended Products"] .ph-wrap,
.pane-hdr-band[data-hdr-title="Curated Gifts"] .ph-wrap{
  display:block;max-width:600px;
}
.pane-hdr-band[data-hdr-title="Cookfolio"] .ph-trapezoid,
.pane-hdr-band[data-hdr-title="Weekly Schedule"] .ph-trapezoid,
.pane-hdr-band[data-hdr-title="Shopping"] .ph-trapezoid,
.pane-hdr-band[data-hdr-title="Last Minute"] .ph-trapezoid,
.pane-hdr-band[data-hdr-title="Social Feed"] .ph-trapezoid,
.pane-hdr-band[data-hdr-title="Recommended Products"] .ph-trapezoid,
.pane-hdr-band[data-hdr-title="Curated Gifts"] .ph-trapezoid{
  /* !important: renderPaneHdrBands() (js/shopping-list.js) sets this
     element's background as an INLINE style (style="background:#fff6ae"
     etc, from its trapColor map) -- inline styles always win over a
     stylesheet rule regardless of selector specificity, with or without
     an attribute selector like this one. Plain `background:transparent`
     here was silently losing to that inline color the whole time; it
     just never showed because the trapezoid's color always happened to
     match its own band's background (pink-on-pink, teal-on-teal,
     yellow-on-yellow) -- until Cookfolio's band became a blue/white
     stripe and its still-yellow trapezoid (sized slightly larger than
     the white .ph-wrap card, covering it) suddenly stood out as a solid
     yellow box sitting on top of the card. */
  background:transparent!important;box-shadow:none;
}
/* eyebrow — was the boxed/stroked uppercase title */
.pane-hdr-band[data-hdr-title="Cookfolio"] .ph-title-box,
.pane-hdr-band[data-hdr-title="Weekly Schedule"] .ph-title-box,
.pane-hdr-band[data-hdr-title="Shopping"] .ph-title-box,
.pane-hdr-band[data-hdr-title="Last Minute"] .ph-title-box,
.pane-hdr-band[data-hdr-title="Social Feed"] .ph-title-box,
.pane-hdr-band[data-hdr-title="Recommended Products"] .ph-title-box,
.pane-hdr-band[data-hdr-title="Curated Gifts"] .ph-title-box{
  /* position:relative, not static -- the sibling .ph-trapezoid stays
     position:absolute (only its background/box-shadow are reset above),
     and a positioned element always paints above static in-flow content
     regardless of z-index. Demoting this to static let the (invisibly
     transparent, but still positioned) trapezoid paint over the text and
     hide most of it. relative keeps this in normal document flow for
     layout, while still being a positioned box that stacks correctly
     above the trapezoid. Same reasoning on .ph-pill and .ph-desc below --
     those two also need an explicit inset:auto (see their comments),
     which this one doesn't since its base (non-v2) rule never set an
     offset to begin with. */
  position:relative;inset:auto;display:block;background:transparent;color:var(--pink-dark);
  font-family:'Jost',sans-serif;font-weight:800;font-size:12px;
  letter-spacing:3px;text-transform:uppercase;-webkit-text-stroke:0;
  padding:0;margin:0 0 16px;text-align:left;max-width:none;line-height:1.2;
}
/* huge cursive hero word — was the smaller cursive pill dipping
   below the title box */
.pane-hdr-band[data-hdr-title="Cookfolio"] .ph-pill,
.pane-hdr-band[data-hdr-title="Weekly Schedule"] .ph-pill,
.pane-hdr-band[data-hdr-title="Shopping"] .ph-pill,
.pane-hdr-band[data-hdr-title="Last Minute"] .ph-pill,
.pane-hdr-band[data-hdr-title="Social Feed"] .ph-pill,
.pane-hdr-band[data-hdr-title="Recommended Products"] .ph-pill,
.pane-hdr-band[data-hdr-title="Curated Gifts"] .ph-pill{
  /* inset:auto cancels the base (non-v2) rule's `bottom:-64px` (dish-cards.css
     -- that rule positioned the pill dipping below the title box under the
     old absolute-positioning scheme). This file only overrides `position`,
     not `bottom`, so that -64px was still cascading in and, now that this
     is position:relative instead of static, was actively shifting the
     element down by 64px instead of being ignored like it was under
     static. Same for .ph-desc's inherited `top:100%` below. */
  position:relative;inset:auto;display:block;background:transparent;
  font:400 clamp(58px,9vw,110px) 'Fuggles',cursive;color:var(--dark);
  padding:0;margin:0 0 22px;white-space:normal;max-width:560px;line-height:.9;
}
/* one flowing description line — was the yellow-highlighter
   Quicksand sentence */
.pane-hdr-band[data-hdr-title="Cookfolio"] .ph-desc,
.pane-hdr-band[data-hdr-title="Weekly Schedule"] .ph-desc,
.pane-hdr-band[data-hdr-title="Shopping"] .ph-desc,
.pane-hdr-band[data-hdr-title="Last Minute"] .ph-desc,
.pane-hdr-band[data-hdr-title="Social Feed"] .ph-desc,
.pane-hdr-band[data-hdr-title="Recommended Products"] .ph-desc,
.pane-hdr-band[data-hdr-title="Curated Gifts"] .ph-desc{
  /* inset:auto cancels the base rule's `top:100%;left:0` -- see the
     .ph-pill comment above, same issue. */
  position:relative;inset:auto;display:block;background:transparent;box-shadow:none;
  font-family:'Julius Sans One',sans-serif;font-weight:400;
  font-size:clamp(15px,1.6vw,18px);letter-spacing:.2px;line-height:1.75;
  color:var(--dark);max-width:460px;margin:0;padding:0;
}
.pane-hdr-band[data-hdr-title="Cookfolio"] .ph-desc-chevron,
.pane-hdr-band[data-hdr-title="Weekly Schedule"] .ph-desc-chevron,
.pane-hdr-band[data-hdr-title="Shopping"] .ph-desc-chevron,
.pane-hdr-band[data-hdr-title="Last Minute"] .ph-desc-chevron,
.pane-hdr-band[data-hdr-title="Social Feed"] .ph-desc-chevron,
.pane-hdr-band[data-hdr-title="Recommended Products"] .ph-desc-chevron,
.pane-hdr-band[data-hdr-title="Curated Gifts"] .ph-desc-chevron{
  display:none;
}

/* plain-text breadcrumb step indicator, matching the mockups'
   "Browse — Plan — Shop" line (current step marked with →, since a
   single CSS content string can't underline just part of itself) --
   hidden again down in the v3 block below; kept authored here so
   the content strings survive if v3's display:none is ever lifted. */
.pane-hdr-band[data-hdr-title="Cookfolio"] .ph-wrap::after,
.pane-hdr-band[data-hdr-title="Weekly Schedule"] .ph-wrap::after,
.pane-hdr-band[data-hdr-title="Shopping"] .ph-wrap::after,
.pane-hdr-band[data-hdr-title="Last Minute"] .ph-wrap::after,
.pane-hdr-band[data-hdr-title="Social Feed"] .ph-wrap::after,
.pane-hdr-band[data-hdr-title="Recommended Products"] .ph-wrap::after,
.pane-hdr-band[data-hdr-title="Curated Gifts"] .ph-wrap::after{
  display:block;margin-top:26px;font-family:'Jost',sans-serif;
  font-weight:700;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--dark);opacity:.5;
}
.pane-hdr-band[data-hdr-title="Cookfolio"] .ph-wrap::after{content:"\2192 Browse   \2014   Plan   \2014   Shop";}
.pane-hdr-band[data-hdr-title="Weekly Schedule"] .ph-wrap::after{content:"Browse   \2014   \2192 Plan   \2014   Shop";}
.pane-hdr-band[data-hdr-title="Shopping"] .ph-wrap::after{content:"Browse   \2014   Plan   \2014   \2192 Shop";}
.pane-hdr-band[data-hdr-title="Last Minute"] .ph-wrap::after{content:"\2192 Pantry   \2014   Plan   \2014   Shop";}
.pane-hdr-band[data-hdr-title="Social Feed"] .ph-wrap::after{content:"\2192 Feed   \2014   Friends   \2014   Potluck";}

/* pastel background wash, per page color (real app tokens --
   css/layout-shell.css :root -- not redefined here). Dead weight
   once the v3 pattern block below sets its own background at equal
   specificity and later source order -- left in place as a fallback
   in case v3 is ever removed. */
.pane-hdr-band[data-hdr-title="Cookfolio"]{background:var(--yellow);}
.pane-hdr-band[data-hdr-title="Weekly Schedule"]{background:var(--pink);}
.pane-hdr-band[data-hdr-title="Shopping"]{background:var(--teal);}
.pane-hdr-band[data-hdr-title="Last Minute"]{background:var(--teal);}
.pane-hdr-band[data-hdr-title="Social Feed"]{background:var(--yellow);}
.pane-hdr-band[data-hdr-title="Recommended Products"]{background:var(--teal);}
.pane-hdr-band[data-hdr-title="Curated Gifts"]{background:var(--pink);}

/* soften/reposition the existing decorative doodles for the
   lighter, more editorial band (less heavy, no sticker-box look) */
.pane-hdr-band[data-hdr-title="Cookfolio"] .ph-doodle-wrap,
.pane-hdr-band[data-hdr-title="Weekly Schedule"] .ph-doodle-wrap,
.pane-hdr-band[data-hdr-title="Shopping"] .ph-doodle-wrap,
.pane-hdr-band[data-hdr-title="Last Minute"] .ph-doodle-wrap,
.pane-hdr-band[data-hdr-title="Social Feed"] .ph-doodle-wrap,
.pane-hdr-band[data-hdr-title="Recommended Products"] .ph-doodle-wrap,
.pane-hdr-band[data-hdr-title="Curated Gifts"] .ph-doodle-wrap{
  top:20px;left:auto;right:6%;transform:none;
}
/* Weekly Schedule's bowl-and-whisk doodle, Shopping's cart doodle,
   Cookfolio's cookbook doodle, and Forkast's frying pan all reach up
   into the fixed top nav at the shared top:20px above. Every pane with
   a single big doodle image needs this, so this group could really just
   replace the shared top:20px rule above -- kept separate for now since
   Social Feed's small fallback doodles are positioned by their own
   dedicated rules further down instead, not this one. */
.pane-hdr-band[data-hdr-title="Weekly Schedule"] .ph-doodle-wrap,
.pane-hdr-band[data-hdr-title="Shopping"] .ph-doodle-wrap,
.pane-hdr-band[data-hdr-title="Last Minute"] .ph-doodle-wrap,
.pane-hdr-band[data-hdr-title="Recommended Products"] .ph-doodle-wrap,
.pane-hdr-band[data-hdr-title="Curated Gifts"] .ph-doodle-wrap{
  top:70px;
}
/* Social Feed's polaroid doodle is a taller image than the other
   single-doodle panes above, so it needs more clearance still. */
.pane-hdr-band[data-hdr-title="Social Feed"] .ph-doodle-wrap{
  top:110px;
}
/* Cookfolio's cookbook doodle gets a bit more clearance than the other
   three -- it's a taller image than the pan/cart/whisk, so 70px still
   read close to the nav. */
.pane-hdr-band[data-hdr-title="Cookfolio"] .ph-doodle-wrap{
  top:110px;
}
/* Curated Gifts' present doodle sits lower still, clear of the Muse
   badge which now sits in normal flow above it. */
.pane-hdr-band[data-hdr-title="Curated Gifts"] .ph-doodle-wrap{
  top:130px;
}
.pane-hdr-band[data-hdr-title="Cookfolio"] .ph-big-doodle,
.pane-hdr-band[data-hdr-title="Weekly Schedule"] .ph-big-doodle,
.pane-hdr-band[data-hdr-title="Shopping"] .ph-big-doodle,
.pane-hdr-band[data-hdr-title="Last Minute"] .ph-big-doodle,
.pane-hdr-band[data-hdr-title="Social Feed"] .ph-big-doodle,
.pane-hdr-band[data-hdr-title="Recommended Products"] .ph-big-doodle,
.pane-hdr-band[data-hdr-title="Curated Gifts"] .ph-big-doodle{
  opacity:.92;filter:drop-shadow(0 14px 24px rgba(28,28,46,.16));
  animation:ph-doodle-float 3.6s ease-in-out infinite;
}
/* Recommended Products' mixer doodle faces the wrong way for its
   corner -- flipped horizontally so the bowl/beater lean into the
   page instead of off it. Its own float keyframe (not the shared
   ph-doodle-float) since animation fully owns transform while
   playing -- a plain transform:scaleX(-1) alongside the shared
   animation would just get silently dropped every frame. */
.pane-hdr-band[data-hdr-title="Recommended Products"] .ph-big-doodle{
  animation-name:ph-doodle-float-flipped;
}
@keyframes ph-doodle-float-flipped{
  0%,100%{transform:scaleX(-1) translateY(0);}
  50%{transform:scaleX(-1) translateY(-10px);}
}
.pane-hdr-band[data-hdr-title="Curated Gifts"] .ph-big-doodle{
  height:clamp(70px,12vw,120px);
}
.pane-hdr-band[data-hdr-title="Cookfolio"] .ph-doodles,
.pane-hdr-band[data-hdr-title="Weekly Schedule"] .ph-doodles,
.pane-hdr-band[data-hdr-title="Shopping"] .ph-doodles,
.pane-hdr-band[data-hdr-title="Last Minute"] .ph-doodles,
.pane-hdr-band[data-hdr-title="Social Feed"] .ph-doodles,
.pane-hdr-band[data-hdr-title="Recommended Products"] .ph-doodles,
.pane-hdr-band[data-hdr-title="Curated Gifts"] .ph-doodles{
  opacity:.55;
}
/* Social Feed has no data-hdr-doodle image of its own, so it would
   otherwise fall back to the small palm/frond doodle set
   (paneHdrDoodleHtml(), js/shopping-list.js) like Taste Makers does --
   hidden here instead of removing the fallback in JS, since Taste
   Makers still wants it. */
.pane-hdr-band[data-hdr-title="Social Feed"] .ph-doodles{
  display:none;
}

/* ---- "hero v3" refinements (mockup: "Cookfolio v3") -- patterned
   band background, the title block sitting in a white card instead
   of directly on the pattern, and the arrow-prefixed breadcrumb
   dropped entirely. Originally a single shared diagonal candy-stripe
   for every pane; Jess asked each of the six panes to get its own
   distinct pattern instead (same white-paired-with-the-pane's-own-
   wash-color technique, just a different CSS background recipe per
   pane) so panes read as visually distinct while staying
   structurally identical. These rules come after the shared block
   above and win ties at equal specificity by source order. ---- */
.pane-hdr-band[data-hdr-title="Cookfolio"],
.pane-hdr-band[data-hdr-title="Weekly Schedule"],
.pane-hdr-band[data-hdr-title="Shopping"],
.pane-hdr-band[data-hdr-title="Last Minute"],
.pane-hdr-band[data-hdr-title="Social Feed"],
.pane-hdr-band[data-hdr-title="Recommended Products"],
.pane-hdr-band[data-hdr-title="Curated Gifts"]{
  /* Band padding cut roughly in half (was 96px/56px top/bottom from the
     shared rule above) as the main lever for halving the hero's total
     rendered height to ~50% of what it was -- the rest comes from the
     smaller card padding, title sizes, and breadcrumb gap below.
     padding-top:90px (not less) -- the card's top edge otherwise sat
     right under the pennant/"Guava" wordmark (position:absolute,
     independent of this band, roughly y:58-98px), overlapping it. */
  padding-top:90px;padding-bottom:24px;
}
/* Pattern per pane, each pairing that pane's own wash color with white.
   Cookfolio and Weekly Schedule share the same diagonal-stripe shape at
   the original thicker 32/64px size Jess asked for back on Cookfolio's
   very first pass -- only the color differs (yellow vs pink) -- while
   Shopping/Forkast/Social Feed each get their own distinct shape:
   Shopping = graph-paper grid, Forkast = gingham checker, Social Feed =
   a tiled camera icon (an SVG data-URI, not a CSS-gradient recipe like
   the others -- a recognizable camera silhouette isn't buildable out of
   gradients the way dots/stripes/grids are). */
.pane-hdr-band[data-hdr-title="Cookfolio"]{background:repeating-linear-gradient(135deg,#fff6ae 0,#fff6ae 32px,#fff 32px,#fff 64px);}
.pane-hdr-band[data-hdr-title="Weekly Schedule"]{background-color:#ffc9f6;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23fff'%3E%3Cpath d='M50 16 C51 32 34 34 34 34 C34 34 51 36 50 52 C49 36 66 34 66 34 C66 34 49 32 50 16 Z'/%3E%3Ccircle cx='78' cy='68' r='4'/%3E%3Ccircle cx='20' cy='70' r='3'/%3E%3C/g%3E%3C/svg%3E");background-size:80px 80px;}
.pane-hdr-band[data-hdr-title="Shopping"]{background-color:#b1f2f5;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:26px 26px;}
.pane-hdr-band[data-hdr-title="Last Minute"]{background-color:#b1f2f5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23fff' stroke-width='5' stroke-linecap='round'%3E%3Cline x1='26' y1='14' x2='26' y2='60'/%3E%3Cline x1='18' y1='14' x2='18' y2='30'/%3E%3Cline x1='26' y1='14' x2='26' y2='30'/%3E%3Cline x1='34' y1='14' x2='34' y2='30'/%3E%3Cpath d='M70 14 C60 14 58 26 62 34 C64 38 68 40 70 40 L70 60'/%3E%3C/g%3E%3C/svg%3E");background-size:100px 100px;}
.pane-hdr-band[data-hdr-title="Social Feed"]{background-color:#fff6ae;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M-10 30 Q 15 10, 40 30 T 90 30 T 140 30' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");background-size:90px 54px;}
.pane-hdr-band[data-hdr-title="Recommended Products"]{background-color:#fff;background-image:radial-gradient(#b1f2f5 3px,transparent 4px);background-size:22px 22px;}
.pane-hdr-band[data-hdr-title="Curated Gifts"]{background-color:#fff;background-image:linear-gradient(45deg,#ffc9f6 25%,transparent 25%,transparent 75%,#ffc9f6 75%),linear-gradient(-45deg,#ffc9f6 25%,transparent 25%,transparent 75%,#ffc9f6 75%);background-size:60px 60px;}
.pane-hdr-band[data-hdr-title="Cookfolio"] .ph-wrap,
.pane-hdr-band[data-hdr-title="Weekly Schedule"] .ph-wrap,
.pane-hdr-band[data-hdr-title="Shopping"] .ph-wrap,
.pane-hdr-band[data-hdr-title="Last Minute"] .ph-wrap,
.pane-hdr-band[data-hdr-title="Social Feed"] .ph-wrap,
.pane-hdr-band[data-hdr-title="Recommended Products"] .ph-wrap,
.pane-hdr-band[data-hdr-title="Curated Gifts"] .ph-wrap{
  background:#fff;border-radius:16px;padding:32px 36px;
  max-width:460px;
  box-shadow:0 24px 48px rgba(28,28,46,.28);
}
.pane-hdr-band[data-hdr-title="Curated Gifts"] .ph-wrap{
  max-width:540px;
}
/* Weekly Plan's .ph-wrap picks up id="planner-heading" (renderPaneHdrBands(),
   js/shopping-list.js, sets it from data-hdr-id) -- a leftover rule from
   before this card redesign, #pane-planner #planner-heading{padding-left:
   0!important} (dish-cards.css), targets that id directly and, being an
   ID selector with !important, beats the class-based padding rule above
   regardless of source order. That old rule predates the white-card
   layout it now conflicts with; left it in place (might matter for some
   older state) and just re-asserting the padding here instead, at equal
   specificity + !important, so this file's later position in the
   cascade (loaded last, see this file's header) wins the tie. */
#pane-planner #planner-heading{padding-left:36px!important;}
.pane-hdr-band[data-hdr-title="Cookfolio"] .ph-title-box,
.pane-hdr-band[data-hdr-title="Weekly Schedule"] .ph-title-box,
.pane-hdr-band[data-hdr-title="Shopping"] .ph-title-box,
.pane-hdr-band[data-hdr-title="Last Minute"] .ph-title-box,
.pane-hdr-band[data-hdr-title="Social Feed"] .ph-title-box,
.pane-hdr-band[data-hdr-title="Recommended Products"] .ph-title-box,
.pane-hdr-band[data-hdr-title="Curated Gifts"] .ph-title-box{
  margin-bottom:8px;
}
.pane-hdr-band[data-hdr-title="Cookfolio"] .ph-pill,
.pane-hdr-band[data-hdr-title="Weekly Schedule"] .ph-pill,
.pane-hdr-band[data-hdr-title="Shopping"] .ph-pill,
.pane-hdr-band[data-hdr-title="Last Minute"] .ph-pill,
.pane-hdr-band[data-hdr-title="Social Feed"] .ph-pill,
.pane-hdr-band[data-hdr-title="Recommended Products"] .ph-pill,
.pane-hdr-band[data-hdr-title="Curated Gifts"] .ph-pill{
  font-size:clamp(48px,7vw,86px);margin-bottom:12px;
}
.pane-hdr-band[data-hdr-title="Curated Gifts"] .ph-pill{
  white-space:nowrap;font-size:clamp(40px,5.2vw,72px);max-width:none;
}
.pane-hdr-band[data-hdr-title="Cookfolio"] .ph-desc,
.pane-hdr-band[data-hdr-title="Weekly Schedule"] .ph-desc,
.pane-hdr-band[data-hdr-title="Shopping"] .ph-desc,
.pane-hdr-band[data-hdr-title="Last Minute"] .ph-desc,
.pane-hdr-band[data-hdr-title="Social Feed"] .ph-desc,
.pane-hdr-band[data-hdr-title="Recommended Products"] .ph-desc,
.pane-hdr-band[data-hdr-title="Curated Gifts"] .ph-desc{
  font-size:15px;line-height:1.55;
}
.pane-hdr-band[data-hdr-title="Cookfolio"] .ph-wrap::after,
.pane-hdr-band[data-hdr-title="Weekly Schedule"] .ph-wrap::after,
.pane-hdr-band[data-hdr-title="Shopping"] .ph-wrap::after,
.pane-hdr-band[data-hdr-title="Last Minute"] .ph-wrap::after,
.pane-hdr-band[data-hdr-title="Social Feed"] .ph-wrap::after,
.pane-hdr-band[data-hdr-title="Recommended Products"] .ph-wrap::after,
.pane-hdr-band[data-hdr-title="Curated Gifts"] .ph-wrap::after{
  display:none;
}
/* Social Feed is the one pane here with no data-hdr-doodle (so it falls
   back to the small palm/frond doodle set, paneHdrDoodleHtml(),
   js/shopping-list.js -- hidden outright above via .ph-doodles{display:
   none}, but its positioning rules are kept here too in case that's ever
   reverted), positioned by top:10%/42% of
   the band's OWN height (dish-cards.css .ph-doodle-1/-2) -- exactly the
   setup that put Cookfolio's small doodles under the fixed topbar once
   this same padding cut shrank the band, back before Cookfolio had its
   own single doodle image. Same fix: fixed pixel top instead of a
   percentage, so it doesn't scale down with the shorter band. Every
   other pane's big single doodle (.ph-doodle-wrap) is already
   fixed-pixel positioned in the shared block above, unaffected by band
   height either way. */
.pane-hdr-band[data-hdr-title="Social Feed"] .ph-doodle-1{top:20px;}
.pane-hdr-band[data-hdr-title="Social Feed"] .ph-doodle-2{top:86px;}
/* Same "no doodles for now" call as Recipes/Weekly Plan/Grocery List
   below, but for the SEPARATE small-doodle system that renders inside
   .tab-action-bar itself (not the hero band) -- renderTabActionBarDoodles(),
   js/shopping-list.js, injects a palm/wave/leaf/citrus/fruit pair into
   every .tab-action-bar on the page, recolored flat navy/white/blue via
   mask-image. Low-opacity/low-contrast against the bar's own background,
   easy to miss -- which is exactly what happened here. */
#pane-recipes .tab-bar-doodles{display:none;}
/* Same fix, Weekly Plan/Grocery List/Forkast/Social Feed/Recommended
   Products/Curated Gifts' own tab-action-bars -- scoped to
   #pane-planner/#pane-shopping/#pane-input/#pane-feed/#pane-products/
   #pane-gifts specifically. */
#pane-planner .tab-bar-doodles{display:none;}
#pane-shopping .tab-bar-doodles{display:none;}
#pane-input .tab-bar-doodles{display:none;}
#pane-feed .tab-bar-doodles{display:none;}
#pane-products .tab-bar-doodles{display:none;}
#pane-gifts .tab-bar-doodles{display:none;}