/* ==========================================================================
   SMART SCAN & SHOPPING — photographic background (Aug 2026)

   Her produce-aisle photograph, same pattern as Hydration Tap: a fixed layer
   behind the page with the cards floating over it.

   ONE IMPORTANT DIFFERENCE FROM THE CITRUS PHOTO. That one was pale, soft and
   low-contrast, so a light scrim was enough. This one is busy and mid-dark —
   every crate is a hard-edged rectangle competing with the cards, and the
   greens sit right where body copy lands. So it gets:
     - a GAUSSIAN BLUR baked into the asset (3.2px), turning shelves into
       colour and texture rather than objects fighting for attention. It also
       took the file from 307KB to 83KB, which is a rare case of the tasteful
       choice being the cheap one too.
     - a HEAVIER SCRIM than Hydration Tap, because the darks here are much
       darker than anything in the citrus shot.
   ========================================================================== */
#page-ys-feature{
  background:#F7F8F4 !important;
  position:relative;
  isolation:isolate;
}
#page-ys-feature .yso-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url('assets/img/img-68858b9c20d8.webp');
  background-size:cover; background-position:center 38%; background-repeat:no-repeat;
}
#page-ys-feature .yso-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(255,255,255,.62) 0%,
    rgba(255,255,255,.78) 28%,
    rgba(255,255,255,.86) 58%,
    rgba(255,255,255,.90) 100%);
}
#page-ys-feature > *{ position:relative; z-index:1; }

/* the cards stay solid and lift; their section wrappers only take a veil */
#page-ys-feature .kb-sec{
  background:rgba(255,255,255,.55) !important;
  backdrop-filter:blur(3px);
}
#page-ys-feature .kb-sec.is-soft{
  background:rgba(255,255,255,.68) !important;
}
#page-ys-feature .ys-panel,
#page-ys-feature .ysx-panel,
#page-ys-feature .tr-group,
#page-ys-feature .kb-card,
#page-ys-feature .rh-card{
  background:#fff !important;
  box-shadow:0 12px 36px rgba(38,54,30,.14), 0 2px 8px rgba(38,54,30,.06);
  border-color:rgba(198,210,190,.85) !important;
}
/* `.ysx-scanwrap` is only a POSITIONING WRAPPER around the Smart scan card —
   painting it white put a second white slab behind the card, reading as an odd
   pale frame around it. The wrapper is transparent; `.ysx-scan` inside it keeps
   the solid white and the shadow, so the card sits straight on the produce. */
#page-ys-feature .ysx-scanwrap{
  background:transparent !important;
  box-shadow:none !important;
  border-color:transparent !important;
}
/* the hero band was an opaque panel; letting the produce through makes it
   the one place the photograph is really seen */
#page-ys-feature .ys-hero{
  background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.66)) !important;
  backdrop-filter:blur(2px);
}
/* THE HEADER AND DIVIDER TEXT SIT DIRECTLY ON THE PHOTOGRAPH, and measuring
   found "MY KITCHEN" at 2.74 against a patch of darker produce. Leaving them
   transparent looked best but was not readable, so each gets its own soft
   plate: the picture still shows around them, and the type has a guaranteed
   background instead of whatever crate it happens to land on.

   PADDING, NOT A NEGATIVE-INSET PSEUDO-ELEMENT. The first version drew the
   plate with `left:-18px; right:-18px`, which pushed 18px past the wrapper and
   gave the page horizontal overflow at every width below 1024. */
#page-ys-feature .yso-top, #page-ys-feature .yso-div{
  background:transparent !important;
}
#page-ys-feature .yso-head{
  background:rgba(255,255,255,.82) !important;
  border-radius:20px;
  padding:18px 20px;
  backdrop-filter:blur(6px);
}
#page-ys-feature .yso-div{
  background:rgba(255,255,255,.82) !important;
  border-radius:20px;
  padding:22px 20px !important;
  margin-top:40px;
  backdrop-filter:blur(6px);
  border-top:0 !important;
}

/* ---- the full-width slabs -------------------------------------------------
   Found by measuring: any block wider than 400px and taller than 120px with an
   opaque background is covering the photograph. `.tr-sec` was the worst —
   1440x1525 of solid white, blanking the picture for a whole screen. These
   wrappers take a veil; the things INSIDE them stay solid so they still read
   as cards sitting on the photo. */
#page-ys-feature .tr-sec{
  background:rgba(255,255,255,.55) !important;
  backdrop-filter:blur(3px);
}
#page-ys-feature .ysx-dash{
  background:rgba(255,255,255,.42) !important;
  backdrop-filter:blur(2px);
  box-shadow:none;
}
#page-ys-feature .ysx-dbody{
  background:rgba(255,255,255,.62) !important;
}
/* solid, so they lift off the produce */
#page-ys-feature .tr-group,
#page-ys-feature .ys-preview,
#page-ys-feature .ysx-scan{
  background:#fff !important;
  box-shadow:0 12px 34px rgba(38,54,30,.13), 0 2px 8px rgba(38,54,30,.05);
}
#page-ys-feature .tr-receipt{
  background:rgba(251,246,236,.96) !important;
}

/* ---- contrast on the veiled canvas ---------------------------------------
   These are the SHARED Kitchen Bench classes. Two different situations:

   `.kb-eyebrow` (3.1) and `.ys-est` (3.1) were already under AA on plain white
   — pre-existing, and previously flagged as a site-wide typography decision.

   `.kb-lede` is different: it passed on white and measures 4.1–4.4 on the
   veil, so the photograph is what pushed it under. That one is mine.

   All three are fixed HERE ONLY, scoped to this page, because the same classes
   are used across every Kitchen Bench page and the three walkthroughs — a
   global change is still a separate decision. */
#page-ys-feature .kb-eyebrow{
  color:#4E6640 !important; -webkit-text-fill-color:#4E6640 !important;
}
#page-ys-feature .kb-lede{
  color:#525C6A !important; -webkit-text-fill-color:#525C6A !important;
}
#page-ys-feature .ys-est{
  color:#69727D !important; -webkit-text-fill-color:#69727D !important;
}
#page-ys-feature .kb-body{
  color:#4A5462 !important; -webkit-text-fill-color:#4A5462 !important;
}
/* on pure white inside the works-with cards, so pre-existing rather than
   caused by the photo — fixed anyway while the page is open */
#page-ys-feature .kb-conn-d{
  color:#68717C !important; -webkit-text-fill-color:#68717C !important;
}