/*
 * clone.css -- the clone's patch stylesheet. Three legal uses only:
 *   (1) WP/Woo intrusion   : keep WP-rendered surfaces (shell, shop, cart, checkout, auth)
 *                            inside the captured look without touching mirrored rules
 *   (2) supplement mirrored missing (with source) : a rule the captured runtime adds that
 *                            the mirrored emotion bundle does not contain for this page
 *   (3) browser-variable fallback (value = mirrored source) : none used
 * No !important against a mirrored effective rule. No document-level bare html/body rule.
 */

/* ---------------------------------------------------------------- (1) WP/Woo intrusion */
.bb-shell-content,
.bb-shell-page {
  max-width: 1425px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  font-family: "IBM Plex Sans Condensed", "IBM Plex Sans Condensed Fallback", "IBM Plex Sans Condensed", sans-serif;
  color: #522a10;
  font-size: 20px;
  line-height: 30px;
}
.bb-shell-entry__title { font-family: "Ida Narrow", "IdaNarrow", sans-serif; text-transform: uppercase; }

/* Woo surfaces inside the clone shell: alignment only, the Woo form itself is not 1:1 */
.bb-shell-content .woocommerce { font-family: "IBM Plex Sans Condensed", "IBM Plex Sans Condensed Fallback", sans-serif; color: #522a10; }
.bb-shell-content .woocommerce a.button,
.bb-shell-content .woocommerce button.button,
.bb-shell-content .woocommerce input.button,
.bb-shell-content .woocommerce #place_order {
  background-color: #522a10;
  color: #ffffff;
  border-radius: 80px;
  padding: 12px 28px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: "Ida Narrow", "IdaNarrow", sans-serif;
  font-size: 18px;
}
.bb-shell-content .woocommerce a.button:hover,
.bb-shell-content .woocommerce button.button:hover,
.bb-shell-content .woocommerce input.button:hover,
.bb-shell-content .woocommerce #place_order:hover { background-color: #6d3a18; color: #fff; }

/* the self-built auth surfaces (login_function R1-R9): required clone-side UI,
   layout fields modelled on captured/pages/log-in__external-ref.html */
.bb-auth { max-width: 560px; margin: 0 auto; padding: 48px 16px 96px; }
.bb-auth__card {
  border: 1px solid #522a10;
  border-radius: 24px;
  padding: 32px;
  background: #ffffff;
}
.bb-auth__title {
  font-family: "Ida Narrow", "IdaNarrow", sans-serif;
  font-size: 28px;
  line-height: 1.25;
  color: #522a10;
  margin: 0 0 24px;
}
.bb-auth__label { display: block; font-size: 16px; margin: 12px 0 4px; }
.bb-auth__input {
  width: 100%;
  height: 52px;
  box-sizing: border-box;
  border: 1px solid #522a10;
  border-radius: 8px;
  background: #ffffff;
  color: #522a10;
  padding: 0 16px;
  font-size: 18px;
  font-family: inherit;
}
.bb-auth__submit {
  margin-top: 24px;
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 80px;
  background: #522a10;
  color: #ffffff;
  font-family: "Ida Narrow", "IdaNarrow", sans-serif;
  font-size: 18px;
  text-transform: uppercase;
  cursor: pointer;
}
.bb-auth__links { margin-top: 16px; font-size: 18px; }
.bb-auth__links a { color: #522a10; text-decoration: underline; }
.bb-auth__error { color: #a43260; font-size: 18px; }
.bb-auth__note { font-size: 18px; }

/* ---------------------------------------------------------------- (2) supplement, with source */
/* Source: captured home.html -- the mobile navigation Collapse is captured only in its
   collapsed branch (mui-zq4vqm has height:0 / visibility:hidden). The expanded branch is
   the same MUI Collapse element with the runtime's own height expression, so the clone
   supplies exactly that MUI runtime behaviour and nothing else. */
.bb-nav-open { visibility: visible; }
.bb-scroll-lock { overflow: hidden; }

/* ---------------------------------------------------------------- (2b) T5 rework supplements */
/* Every rule below is emitted by the TARGET's own runtime emotion layer and is absent from the
   whole captured corpus (measured: 0 occurrences of each selector in
   runtime/docs/captured/pages/*.html). The value source is this round's live read-only CSSOM
   measurement of the target at the same viewport (1440x900, dpr 1) — the truth order puts a live
   same-viewport read above a fresh capture. Nothing here is inferred or approximated. */

/* DIF-01: review-card badge box. Target 18x18, clone 240x248 before this rule (it cascaded to
   +273 px on the review card and on three L1 pages). */
.mui-rdknuf { width: 18px; height: 18px; flex-shrink: 0; display: flex; }

/* DIF-02: autocomplete popper. The captured state file carries only the <ul>; the paper wrapper
   and the listbox/option rules are runtime output. */
.mui-1gyn2q8 {
  background-color: rgb(255, 255, 255);
  color: rgb(82, 42, 16);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0px;
  box-shadow: var(--Paper-shadow);
  background-image: var(--Paper-overlay);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  overflow: auto;
}
.mui-1wcojrx { list-style: none; margin: 0px; padding: 8px 0px; max-height: 40vh; overflow: auto; position: relative; }
.mui-1wcojrx .MuiAutocomplete-option {
  min-height: 48px;
  display: flex;
  overflow: hidden;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  padding: 6px 16px;
  box-sizing: border-box;
  outline: 0px;
  -webkit-tap-highlight-color: transparent;
}
.mui-1wcojrx .MuiAutocomplete-option { min-height: auto; }

/* DIF-02: MUI Select menu (popover paper: 12px radius + 0 4px 20px shadow, list, item). */
.mui-107gq4v {
  background-color: rgb(255, 255, 255);
  color: rgb(82, 42, 16);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
  background-image: var(--Paper-overlay);
  position: absolute;
  overflow: hidden auto;
  min-width: 16px;
  min-height: 16px;
  max-width: calc(100% - 32px);
  outline: 0px;
  max-height: calc(100% - 96px);
  padding: 0px 8px;
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 20px;
}
.mui-17cgx2p { list-style: none; margin: 0px; padding: 8px 0px; position: relative; outline: 0px; }
.mui-17cgx2p.MuiMenu-list .MuiMenuItem-root { margin-bottom: 4px; }
.mui-17cgx2p.MuiMenu-list .MuiMenuItem-root:last-child { margin-bottom: 0px; }
.mui-1cehcu {
  -webkit-tap-highlight-color: transparent;
  background-color: transparent;
  outline: 0px;
  border: 0px;
  margin: 0px;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  appearance: none;
  color: inherit;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  text-decoration: none;
  min-height: 48px;
  box-sizing: border-box;
  white-space: nowrap;
  padding: 12px 16px;
  border-radius: 12px;
}
.mui-1cehcu { min-height: auto; }

/* DIF-05: why-fresh-dog-food module i4 is a pinned horizontal-scroll section. Its whole runtime
   block (below) was never captured; without it the track collapsed and the page was 1886 px
   short. The panel height and the track height are viewport-derived on the target, so they are
   expressed as CSS (the track value is filled in by clone.js from the same formula the live
   measurement satisfies); 3138px is the measured 1440x900 value and is the no-JS fallback.
   Scoped to the MUI md boundary because at 375 the target renders a different branch (mui-14g4vgb)
   for the same section — applying the desktop track there would add ~1858 px. */
@media (min-width: 900px) {
  .mui-1okcms8 { height: var(--bb-hs-track, 3138px); }
  .mui-1s3wmjo {
    position: sticky;
    top: var(--header-offset, 128px);
    height: calc(100vh - var(--header-offset, 128px));
    overflow: hidden;
    contain: paint;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
  }
  .mui-hlnuj2 { display: flex; gap: 8px; padding-left: 248px; padding-right: 248px; will-change: transform; }
  .mui-wo9gid { flex: 0 0 auto; display: flex; align-items: center; min-height: 0px; }
}

/* ---------------------------------------------------------------- (2c) T5 round-2 supplements */

/* R1-ND-01: /how-it-works/ "read more" toggle inside [data-testid=expandable-testimonial].
   Runtime emotion output, absent from the WHOLE captured corpus (grep for "12b2pro{" over
   runtime/docs/captured = 0 hits; the class name itself appears only in the 3 element usages).
   Values verbatim from this round's live read-only CSSOM measurement of the target at
   1440x900 dpr1, and re-confirmed live at 375 (same rule, same class, same values).
   Without it the span lays out inline/static on its own line: +30 px on the story card
   (.mui-bapdp2 753.1 vs 723.1), +30 px on module mui-5fsene (1148.7 vs 1118.7) and +30 px on
   the page. The parent .mui-ry0whu already carries position:relative on both sides. */
.mui-12b2pro {
  position: absolute;
  bottom: 0px;
  right: 0px;
  padding-left: 12px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
  color: rgb(99, 63, 40);
  background-color: rgb(255, 255, 255);
}

/* R1-ND-02: two values the target switches at the MUI md boundary (900 px). The clone ships the
   >=900 captured markup at every width, so the <900 branch of these mirrored rules was missing.
   Source = captured/pages/home__mobile-375.html (the 375 capture of the same page):
     - it carries the rule  .mui-ugq37h { width:40px; height:40px; flex-shrink:0; display:flex }
       and its markup puts mui-ugq37h on the 17 SVG icon boxes (benefit-item mui-19kljn5,
       accordion header mui-71daxa, starter-box benefit mui-k89k6v) that the >=900 capture
       (captured/pages/home.html) marks mui-1nnygz1 with 48x48;
     - its markup gives the usp illustrations width="86" height="86" where the >=900 capture has
       width="90" height="90" (the 4 other [data-testid=illustration] images of the same page are
       136x136 in BOTH captures, hence the [data-testid=usp-item] scope).
   Live cross-check this round: target / at 375 -> those boxes 40x40 (class mui-ugq37h) and the usp
   illustration 86x86; at 1440 -> 48x48 (class mui-1nnygz1) and 90x90. The selector keeps the
   clone's own class because the <900 markup branch is not shipped; the declarations are the mobile
   capture's, scoped to the boundary at which that capture was taken. This is the responsive branch
   of a component that appears on several pages, so it is expressed once, not per page.
   The icon-box rule is written as .MuiBox-root.mui-1nnygz1 (0-2-0) on purpose: clone.css is a
   <link> in <head> (offset 6872) while the mirrored emotion <style> blocks are inlined AFTER it
   (first at 11338), so at equal specificity the mirrored 48 px rule would win the cascade. No
   !important is used (banned against a mirrored effective rule); the extra class is one the
   element already carries in the captured markup. */
@media (max-width: 899.95px) {
  .MuiBox-root.mui-1nnygz1 { width: 40px; height: 40px; flex-shrink: 0; display: flex; }
  [data-testid="usp-item"] img[data-testid="illustration"] { width: 86px; height: 86px; }
}

/* FIX-HOME-20260920 item 3: mobile navigation panel -- two icon boxes the clone ships without a rule.
   Both values are the TARGET's own computed values, re-measured live this round at the same 375
   (fresh context, iPhone 8 semantic), read off the target's own elements while its panel was open
   (real touch tap on [data-testid=navigation-v2-hamburger-button]). Nothing is authored here.
     - menu row  : target div.MuiBox-root.mui-1nnygz1 -> width 48px / height 48px / flex 0 0 auto /
                   display flex. The clone's captured markup carries this box as
                   div.MuiBox-root.mui-p73xw6, a class with NO rule anywhere in the corpus (0 hits in
                   every captured styles file), so the box had no size: the square <svg
                   width="100%" height="100%" viewBox="0 0 48 48"> blew the flex child up to 233x237,
                   which made each row 253-314 px tall instead of 64. Measured on the clone before this
                   rule: rows [253,237,255,239,314], ul 1298, panel 373, first anchor item at y=465.
                   Target: rows 64 px each, ul 320, panel 389, first anchor item at y=190.
     - panel bottom link : target div.MuiBox-root.mui-mpicoq -> width 32px / height 32px / flex 0 0 auto /
                   display flex. The clone's captured markup puts its own class mui-ugq37h on these two
                   boxes; that class's mirrored 40px rule is CORRECT for the 17 other icon boxes of the
                   page (R1-ND-02), so it is not touched globally -- the 32px is scoped to the nav panel.
                   Measured: clone link row 56 px (8+40+8) vs target 48 px (8+32+8); the 8 px x 2 is
                   exactly the 16 px panel-height delta (373 vs 389).
   Selectors: the row box class occurs only in the 12 chrome-top nav partials (5 per page) and the
   panel testid exists only on the navigation panel, so both rules are inert elsewhere. Each selector
   is (0-2-0), i.e. it outranks the mirrored single-class emotion rules without !important. */
@media (max-width: 899.95px) {
  [data-testid="mobile-navigation-v2-stack"] .mui-p73xw6 { width: 48px; height: 48px; flex: 0 0 auto; display: flex; }
  [data-testid="mobile-navigation-v2"] .mui-ugq37h { width: 32px; height: 32px; flex: 0 0 auto; display: flex; }
}

/* ---------------------------------------------------------------- (2d) T5 round-4 supplement: first-visit dialog overlay chain + its content */
/* The first-visit cookie dialog is mounted by the TARGET's own runtime emotion layer, so the
   captured popup file carries the dialog's DOM but NONE of its layout rules:
     - the wrapper class `.mui-1bd8wwp` appears 0 times anywhere under runtime/docs/captured;
     - the class USAGES that do appear in captured/pages/home__popup-cookie-banner.html
       (mui-1maoctp backdrop / mui-fh1hs4 container / mui-5c90ui paper) have no rule in any captured
       file and none in the mirrored bundle (`fh1hs4{` / `1maoctp{` / `5c90ui{` = 0 hits).
   Values verbatim from this round's live read-only CSSOM measurement of the target's FIRST-VISIT
   state at 1440x900 dpr1 (fresh browser context; "clear localStorage + reload" is not a valid
   construction for this site). Measured on the clone before these rules: paper position:static /
   display:block / overflow:visible / 1425x278 @ absTop 12652, page 12930 = target 12652 + 278.
   `mui-1maoctp` is the shared MUI modal backdrop class (the captured P2 preferences dialog's
   backdrop carries the same class), so this is the target's own backdrop rule, not a P1 special.
   The inner content rules below were found by a name-agnostic matcher (every CSSOM rule that
   `el.matches()` an element of the target's dialog subtree, minus the same set on the clone): 21
   applied rules on the target vs 6 on the clone, i.e. 15 target-only rules, of which the 8 base
   ones sized nothing at all and left the paper at 480x377.15 instead of 480x248.58. The matcher is
   what surfaced `.MuiDialogTitle-root + .mui-z0980b { padding-top: 0px }`, a rule keyed on a
   semantic MUI class rather than on a hash, which a hash-only scan would have missed. */
.mui-1bd8wwp { position: fixed; z-index: 1300; inset: 0px; }
.mui-1bd8wwp .MuiDialog-paper {
  width: 100%;
  max-width: 480px;
  margin-left: 16px;
  margin-right: 16px;
  border-radius: 8px;
}
.mui-fh1hs4 {
  height: 100%;
  outline: 0px;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
.mui-5c90ui {
  background-color: rgb(255, 255, 255);
  color: rgb(82, 42, 16);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--Paper-shadow);
  background-image: var(--Paper-overlay);
  position: relative;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  max-width: 600px;
  border-radius: 8px;
  margin: 0px;
  width: calc(100% - 24px);
  max-height: calc(100% - 24px);
}
@media print { .mui-5c90ui { overflow-y: visible; box-shadow: none; } }
@media (min-width: 600px) { .mui-5c90ui { max-width: 624px; } }
@media (min-width: 1200px) { .mui-5c90ui { max-width: 688px; } }
.mui-1maoctp {
  position: fixed;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  inset: 0px;
  -webkit-tap-highlight-color: transparent;
  z-index: -1;
  background-color: rgba(82, 42, 16, 0.93);
}
/* wrapper > MuiDialogTitle (close button is OUT of flow: absolute right 12px / top 12px) */
.mui-iqofnz {
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: 0px;
  border: 0px;
  margin: 0px;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  appearance: none;
  text-decoration: none;
  text-align: center;
  flex: 0 0 auto;
  border-radius: 50%;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --IconButton-hoverBg: rgba(164, 50, 96, 0.04);
  font-size: 1.44643rem;
  width: 36px;
  height: 36px;
  padding: 8px;
  background-color: rgb(246, 220, 220);
  color: rgb(164, 50, 96);
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 1;
}
@media print { .mui-iqofnz { print-color-adjust: exact; } }
.mui-1iupkp9 {
  margin: 0px;
  line-height: 1.6;
  font-weight: 700;
  font-style: normal;
  font-family: var(--font-ida-narrow),"Ida Narrow",sans-serif;
  font-size: 1.125rem;
  flex: 0 0 auto;
  padding: 20px 20px 8px;
}
@media (min-width: 900px) { .mui-1iupkp9 { font-size: 1.25rem; } }
.mui-z42hxj {
  margin: 0px;
  line-height: 1.235;
  font-weight: 700;
  font-style: normal;
  font-family: var(--font-ida-narrow),"Ida Narrow",sans-serif;
  font-size: 1.5rem;
}
@media (min-width: 900px) { .mui-z42hxj { font-size: 1.75rem; } }
.mui-z0980b { flex: 1 1 auto; overflow-y: auto; padding: 20px; }
.MuiDialogTitle-root + .mui-z0980b { padding-top: 0px; }
.mui-2q77wl {
  margin: 0px 0px 24px;
  line-height: 1.5;
  font-weight: 500;
  font-family: var(--font-ibm-plex-sans-condensed),IBM Plex Sans Condensed,sans-serif;
  font-style: normal;
  font-size: 1rem;
  color: rgb(82, 42, 16);
}
@media (min-width: 900px) { .mui-2q77wl { font-size: 1.125rem; } }
.mui-1difu8q {
  display: flex;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  gap: 12px;
}
.mui-1ositpc {
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  --Link-underlineColor: rgba(255, 225, 128, 0.4);
  position: relative;
  -webkit-tap-highlight-color: transparent;
  background-color: transparent;
  outline: 0px;
  border: 0px;
  margin: 0px;
  border-radius: 0px;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  appearance: none;
  color: rgb(82, 42, 16);
  font-size: 16px;
  text-decoration: underline;
  padding: 0px;
}

/* ---------------------------------------------------------------- (2e) T5 round-5 supplement: cookie-preferences dialog (P2) */
/* Item 1 (R5-D3). The P2 dialog is mounted by the TARGET's own runtime emotion layer, so the
   captured popup file carries its DOM but NONE of its layout rules. Measured this round on the
   served clone (grep of `.mui-<hash>` over assets/css/main.css, assets/css/clone.css and the
   pages/partials corpus): every selector below occurs 0 times as a rule, i.e. the mirrored bundle
   does not carry any of them and the captured runtime <style> blocks neither (the whole table is in
   runtime/cache/t5r5/p2-target.json -> p2SubtreeRules / chainRules).
   Values verbatim from this round's live read-only CSSOM measurement of the target's P2 at
   1440x900 dpr1 (fresh browser context per sample; the P1 banner's own "Manage" control is the
   trigger). Rule set = a NAME-AGNOSTIC matcher over the P2 subtree (every CSSStyleRule whose
   `el.matches(selectorText)` holds for an element of that subtree), so semantic MUI class selectors
   like `.mui-1x2a534 .MuiSwitch-track` and `.mui-1x2a534 .MuiSwitch-switchBase.Mui-checked +
   .MuiSwitch-track` are caught too -- a hash-only scan would have missed every one of them.
   Not mounted on purpose: the target's `@media print` variants of these rules. Print is outside
   every measurement caliber, and the target's own print rule for the modal root
   (`.mui-1egf66k { position: absolute !important }`) carries an `!important`, which this stylesheet
   must not contain (no `!important` against a mirrored effective rule). Registered as a known
   deviation instead. `.mui-fh1hs4` (the container) is already mounted in section (2d) and is shared
   with P1 byte-for-byte on the target. */
/* modal root: the target's P2 wrapper class is mui-1egf66k (P1's is mui-1bd8wwp) */
.mui-1egf66k { position: fixed; z-index: 1300; inset: 0px; }
/* the paper: 688px wide at >=1200 (margin:0 -- no P1-style 16px side margin) */
.mui-1nl8ovk {
  background-color: rgb(255, 255, 255);
  color: rgb(82, 42, 16);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--Paper-shadow);
  background-image: var(--Paper-overlay);
  position: relative;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  max-width: 900px;
  border-radius: 8px;
  margin: 0px;
  width: calc(100% - 24px);
  max-height: calc(100% - 24px);
}
@media (min-width: 600px) { .mui-1nl8ovk { max-width: 624px; } }
@media (min-width: 1200px) { .mui-1nl8ovk { max-width: 688px; } }
/* title */
.mui-1w77xh2 {
  margin: 0px;
  line-height: 1.235;
  font-weight: 700;
  font-style: normal;
  font-family: var(--font-ida-narrow),"Ida Narrow",sans-serif;
  font-size: 1.5rem;
  flex: 0 0 auto;
  padding: 20px 20px 8px;
}
@media (min-width: 900px) { .mui-1w77xh2 { font-size: 1.75rem; } }
/* intro copy + its inline link */
.mui-1s4gle2 {
  margin: 0px 0px 24px;
  line-height: 1.43;
  font-weight: 500;
  font-family: var(--font-ibm-plex-sans-condensed),IBM Plex Sans Condensed,sans-serif;
  font-style: normal;
  font-size: 0.875rem;
  color: rgb(82, 42, 16);
}
@media (min-width: 900px) { .mui-1s4gle2 { font-size: 1rem; } }
.mui-1s4gle2 a { color: rgb(82, 42, 16); text-decoration: underline; }
/* the two column grid (switches | "Functionality allowed") */
.mui-1mfuesn {
  --Grid-columns: 12;
  --Grid-columnSpacing: 32px;
  --Grid-rowSpacing: 32px;
  flex-flow: wrap;
  min-width: 0px;
  box-sizing: border-box;
  display: flex;
  gap: var(--Grid-rowSpacing) var(--Grid-columnSpacing);
  margin-bottom: 16px;
}
.mui-1mfuesn > * { --Grid-parent-columns: 12; }
.mui-1mfuesn > * { --Grid-parent-columnSpacing: 32px; }
.mui-1mfuesn > * { --Grid-parent-rowSpacing: 32px; }
.mui-1s9ey1b {
  -webkit-box-flex: 0;
  flex-grow: 0;
  flex-basis: auto;
  width: calc(100% * 12 / var(--Grid-parent-columns) - (var(--Grid-parent-columns) - 12) * (var(--Grid-parent-columnSpacing) / var(--Grid-parent-columns)));
  min-width: 0px;
  box-sizing: border-box;
}
@media (min-width: 900px) {
  .mui-1s9ey1b {
    -webkit-box-flex: 0;
    flex-grow: 0;
    flex-basis: auto;
    width: calc(100% * 6 / var(--Grid-parent-columns) - (var(--Grid-parent-columns) - 6) * (var(--Grid-parent-columnSpacing) / var(--Grid-parent-columns)));
  }
}
.mui-1qm1lh { margin-bottom: 16px; }
/* switch row + label */
.mui-593g2r {
  display: inline-flex;
  -webkit-box-align: center;
  cursor: pointer;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
  margin-right: 16px;
  align-items: flex-start;
  margin-left: 0px;
  width: 100%;
}
.mui-593g2r.Mui-disabled { cursor: default; }
.mui-593g2r .MuiFormControlLabel-label.Mui-disabled { color: rgb(99, 63, 40); }
/* the MUI Switch (all states present in the captured P2 markup) */
.mui-1x2a534 {
  display: inline-flex;
  width: 58px;
  height: 38px;
  overflow: hidden;
  padding: 12px;
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0;
  z-index: 0;
  vertical-align: middle;
}
.mui-1x2a534 .MuiSwitch-switchBase.Mui-checked { color: rgb(128, 37, 74); }
.mui-1x2a534 .MuiSwitch-switchBase.Mui-checked.Mui-disabled { color: rgb(241, 174, 175); }
.mui-1x2a534 .MuiSwitch-thumb { box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 3px 0px; }
.mui-1x2a534 .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track { background-color: rgb(246, 220, 220); opacity: 1; }
.mui-1x2a534 .MuiSwitch-switchBase.Mui-checked.Mui-disabled + .MuiSwitch-track { background-color: rgb(246, 220, 220); }
.mui-1x2a534 .MuiSwitch-track { background-color: rgb(238, 234, 231); opacity: 1; }
.mui-q67gsl {
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  background-color: transparent;
  outline: 0px;
  border: 0px;
  margin: 0px;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  appearance: none;
  text-decoration: none;
  padding: 9px;
  border-radius: 50%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  color: rgb(255, 255, 255);
  transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mui-q67gsl.Mui-disabled { pointer-events: none; cursor: default; }
.mui-q67gsl.Mui-checked { transform: translateX(20px); }
.mui-q67gsl.Mui-disabled { color: rgb(245, 245, 245); }
.mui-q67gsl.Mui-checked { color: rgb(255, 225, 128); }
.mui-q67gsl.Mui-checked.Mui-disabled { color: rgb(255, 243, 206); }
.mui-q67gsl .MuiSwitch-input { left: -100%; width: 300%; }
.mui-q67gsl.Mui-checked + .MuiSwitch-track { opacity: 0.5; }
.mui-q67gsl.Mui-disabled + .MuiSwitch-track { opacity: 0.12; }
.mui-q67gsl.Mui-checked + .MuiSwitch-track { background-color: rgb(255, 225, 128); }
.mui-j8yymo {
  cursor: inherit;
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  margin: 0px;
  padding: 0px;
  z-index: 1;
}
.mui-sc1wek {
  box-shadow: rgba(9, 32, 46, 0.1) 0px 0px 2px;
  background-color: currentcolor;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.mui-1khxa25 {
  height: 100%;
  width: 100%;
  border-radius: 7px;
  z-index: -1;
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  background-color: rgb(0, 0, 0);
  opacity: 0.38;
}
.mui-3lxghj {
  margin: 0px;
  line-height: 1.5;
  font-weight: 500;
  font-family: var(--font-ibm-plex-sans-condensed),IBM Plex Sans Condensed,sans-serif;
  font-style: normal;
  font-size: 1rem;
}
@media (min-width: 900px) { .mui-3lxghj { font-size: 1.125rem; } }
.mui-qs37dc {
  margin: 0px;
  line-height: 1.5;
  font-family: var(--font-ibm-plex-sans-condensed),IBM Plex Sans Condensed,sans-serif;
  font-style: normal;
  font-size: 1rem;
  font-weight: 600;
  color: rgb(82, 42, 16);
}
@media (min-width: 900px) { .mui-qs37dc { font-size: 1.125rem; } }
.mui-lrxn8k {
  margin: 0px;
  line-height: 1.43;
  font-weight: 500;
  font-family: var(--font-ibm-plex-sans-condensed),IBM Plex Sans Condensed,sans-serif;
  font-style: normal;
  font-size: 0.875rem;
  color: rgb(82, 42, 16);
}
@media (min-width: 900px) { .mui-lrxn8k { font-size: 1rem; } }
.mui-1jag52l { margin: 24px 0px; flex-shrink: 0; border-width: 0px 0px thin; border-style: solid; border-color: rgba(0, 0, 0, 0.12); }
/* right-hand column */
.mui-1c7ni9q {
  -webkit-box-flex: 0;
  flex-grow: 0;
  flex-basis: auto;
  width: calc(100% * 12 / var(--Grid-parent-columns) - (var(--Grid-parent-columns) - 12) * (var(--Grid-parent-columnSpacing) / var(--Grid-parent-columns)));
  min-width: 0px;
  box-sizing: border-box;
  gap: 8px;
}
@media (min-width: 900px) {
  .mui-1c7ni9q {
    -webkit-box-flex: 0;
    flex-grow: 0;
    flex-basis: auto;
    width: calc(100% * 6 / var(--Grid-parent-columns) - (var(--Grid-parent-columns) - 6) * (var(--Grid-parent-columnSpacing) / var(--Grid-parent-columns)));
  }
}
.mui-wgfc5n {
  margin: 0px;
  line-height: 1.334;
  font-weight: 700;
  font-style: normal;
  font-family: var(--font-ida-narrow),"Ida Narrow",sans-serif;
  font-size: 1.25rem;
}
@media (min-width: 600px) { .mui-wgfc5n { font-size: 1.375rem; } }
@media (min-width: 900px) { .mui-wgfc5n { font-size: 1.5rem; } }
/* action row: Cancel / Save changes / Accept All */
.mui-1besb83 { display: flex; gap: 12px; -webkit-box-pack: end; justify-content: flex-end; }
@media (min-width: 0px) { .mui-1besb83 { flex-direction: column; } }
@media (min-width: 600px) { .mui-1besb83 { flex-direction: row; } }
.mui-1niir7c {
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: 0px;
  margin: 0px;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  appearance: none;
  text-decoration: none;
  font-style: normal;
  line-height: 1.75;
  min-width: 64px;
  padding: 5px 20px;
  background-color: var(--variant-outlinedBg);
  --variant-textColor: #ffe180;
  --variant-outlinedColor: #ffe180;
  --variant-outlinedBorder: rgba(255, 225, 128, 0.5);
  --variant-containedColor: rgba(0, 0, 0, 0.87);
  --variant-containedBg: #ffe180;
  box-shadow: none;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: none;
  font-family: var(--font-ida-narrow),"Ida Narrow",sans-serif;
  font-weight: 700;
  border-radius: 80px;
  height: 44px;
  font-size: 16px;
  letter-spacing: 0.16px;
  border: 2px solid rgb(164, 50, 96);
  color: rgb(164, 50, 96);
}
.mui-twequj {
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: 0px;
  margin: 0px;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  appearance: none;
  text-decoration: none;
  font-style: normal;
  line-height: 1.75;
  min-width: 64px;
  padding: 6px 20px;
  border: 0px;
  --variant-textColor: #ffe180;
  --variant-outlinedColor: #ffe180;
  --variant-outlinedBorder: rgba(255, 225, 128, 0.5);
  --variant-containedColor: rgba(0, 0, 0, 0.87);
  --variant-containedBg: #ffe180;
  box-shadow: none;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: none;
  font-family: var(--font-ida-narrow),"Ida Narrow",sans-serif;
  font-weight: 700;
  border-radius: 80px;
  height: 44px;
  font-size: 16px;
  letter-spacing: 0.16px;
  background-color: rgb(164, 50, 96);
  color: rgb(255, 255, 255);
}

/* ---------------------------------------------------------------- (2e) T5 round-6 supplements */
/* R6-D4a (/why-fresh-dog-food/ i4, <900). The section's runtime emotion block was never captured;
   round 1 mounted only the >=900 half of it (the target renders a DIFFERENT branch below the MUI md
   boundary: target classes mui-14g4vgb / mui-medwda / mui-1fbz08d, clone ships the >=900 markup
   mui-1okcms8 / mui-1s3wmjo / mui-hlnuj2). So below 900 the clone rendered the section as a plain
   vertical stack: track 1310.9 instead of 1223.75 (+87), section .mui-1th3fel 1458.9 instead of
   1371.8, page 9469 instead of 9382. Selectors are the CLONE's own classes (the <900 markup branch is
   not shipped); declarations are the target's, read live at 375x667 dpr2 (read-only DOM/CSSOM read):
     .mui-14g4vgb { height: 1223.75px }                       (runtime: panel height + horizontal pan)
     .mui-medwda  { position: sticky; top: var(--header-offset,128px); height: 573px; overflow:
                    hidden; contain: paint; display: flex; flex-direction: column;
                    justify-content: center; gap: 20px }
     .mui-1fbz08d { display: flex; gap: 8px; padding-left: 16px; padding-right: 26.25px;
                    will-change: transform }
   The three viewport-derived values were re-measured on the target at 4 viewports to fix their form
   (all read-only; samples in runtime/cache/t5r6/): panelH = 100vh - 94 (667->573, 700->606);
   pan = rowW - 100vw with rowW = 16 + 3*86vw + 2*8 + 7vw, i.e. trackH = 100vh - 62 + 165vw
   (320->1132.984, 375->1223.75, 430->1314.49, all matching the target's own emitted height to 2dp);
   padding-right = (100vw - 86vw)/2 (320->22.4, 375->26.25, 430->30.1). 94px is the target's own LIVE
   mobile --header-offset (measured 94px at 375, 116px at 1440); the clone's <html> still carries the
   captured desktop value 116px, which is a separate mirrored-value item registered in
   T5r6_known_deviation.json and NOT touched here (changing it would move every var(--header-offset)
   consumer on every page). The track height is also written by clone.js from the same formula; the
   CSS value is the exact no-JS fallback. */
@media (max-width: 899.95px) {
  .mui-1okcms8 { height: var(--bb-hs-track, calc(100vh - 62px + 165vw)); }
  .mui-1s3wmjo {
    position: sticky;
    top: 94px;
    height: calc(100vh - 94px);
    overflow: hidden;
    contain: paint;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
  }
  .mui-hlnuj2 {
    display: flex;
    gap: 8px;
    padding-left: 16px;
    padding-right: calc((100vw - 86vw) / 2);
    will-change: transform;
  }
}

/* R6-D4b (/how-it-works/ plan carousel, <900). The target renders a carousel controls row inside the
   plans carousel's .mui-79elbk ONLY below 900 (measured: at 1440 the element does not exist -- 0
   hits for [aria-label="Next plan"]; at 375 it is the viewport's 2nd child, 36px tall with
   margin-top 24px, holding [Previous plan] + 3 dots + [Next plan]). The clone ships only the >=900
   capture, which has no such row, so the story card .mui-bapdp2 read 640.2 instead of 700.2 and
   module mui-5fsene 1053 instead of 1113, page 10926 instead of 10986. The element is inserted into
   how-it-works.content.html by t5r6_supplement.js (markup = the target's own outerHTML at 375) and
   the declarations below are the target's own live CSSOM values for the row and its dots. The dot
   rules are scoped to .mui-79elbk on purpose: the same two hash classes are also carried by the
   OTHER carousel on this and two other pages, whose <900 rendering is outside this round's two
   items and is left untouched. At >=900 the row is display:none, which is the box-free equivalent of
   the target not rendering it at all. */
.mui-79elbk .mui-inv2e3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}
.mui-79elbk .mui-8v90jo { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.mui-79elbk .mui-1bejk9o {
  padding: 0px;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  cursor: pointer;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: rgb(164, 50, 96);
  opacity: 1;
}
.mui-79elbk .mui-1gz71jz {
  padding: 0px;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  cursor: pointer;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: rgb(164, 50, 96);
  opacity: 0.4;
}
@media (min-width: 900px) { .mui-79elbk .mui-inv2e3 { display: none; } }

/* ---------------------------------------------------------------- (2f) T5-R round-2 supplement: home hero breed dropdown */
/* Delegation item A. The dropdown the target mounts under the hero field ("Which breed do we get to
   feed?") is runtime emotion output: the target's own <style data-emotion="mui"> tag serialises EMPTY
   (measured on the captured document: the tag at offset 281334 has a 0-byte body while the rules are
   live in the CSSOM), so the captured page HTML carries the dropdown's DOM and NONE of its rules.
   THE SOURCE IS THE CAPTURE'S OWN CSSOM WALK, not a reconstruction:
     runtime/docs/captured/ordering_flow_r2/bredropdown_css.json  -> matched / byHash / computed / rects
   Every declaration below is copied out of that record (its `byHash[].cssText`), including the
   @media print and the state selectors of the item button. The record's own `computed`/`rects` block
   is the cross-check: ul padding 0px / max-height 300px / overflow auto / 588.5x187.5 at 1440x900,
   item button 588.5x46.875 with padding 12px 16px, p font-size 16px / line-height 22.88px, and the
   selected item's background rgba(255,225,128,0.08).
   ROUND 3 supersedes that gap. The round-2 walk queried the <ul>, the item button, the <p> and the
   container box only, so three classes of this subtree had NO captured rule. The round-3 capture
   runtime/docs/captured/ordering_flow_r2/r3_hero_panel_rules_raw.json walked 1840 rules exhaustively
   (document.styleSheets incl. media/supports/layer/container, cross-origin sheets fetched and parsed
   off-DOM) and matched 90; the three missing ones ARE in it, and all three are now mounted VERBATIM
   from that record (`matched_rules_raw[].cssText`), nothing derived and nothing authored:
     - .mui-65nsjg (the <li>) -- captured (target "li", ctx top, source style#12 data-emotion="mui":
       `.mui-65nsjg { display: flex; -webkit-box-pack: start; justify-content: flex-start;
       -webkit-box-align: center; align-items: center; position: relative; text-decoration: none;
       width: 100%; box-sizing: border-box; text-align: left; padding: 0px; }`). Its captured box
       (588.5x46.875 = the button's own height, i.e. zero vertical padding) is what that rule gives.
     - .mui-127ztmv (the Typography variant the POPULAR rows carry) -- captured VERBATIM at last. It
       is NOT a duplicate of .mui-1bazw36: the capture's own text differs in exactly one declaration
       (`font-weight: 700` vs `font-weight: normal`), which the round-2 sheet had wrongly folded into
       the sibling's block. Both hashes now carry their own captured rule.
     - .mui-y0ot23 (the Paper wrapper) -- captured VERBATIM. It is the rule that carries the 12px:
       `position: absolute; top: 100%; left: 0px; right: 0px; z-index: 10; border-radius: 12px;
       max-height: 300px; overflow: hidden; margin-top: 12px`. The round-2 sheet had mounted a
       DERIVED stand-in (the funnel Autocomplete paper's declarations) which carried none of the
       positioning and had border-radius 0px / overflow auto; that derivation is removed.
   The positioning container `.mui-79elbk { position: relative; }` was already mounted for the hero
   (pages/home.styles.html, the hero's own bundle), so it is not duplicated here. */
.mui-1h355h9 { list-style: none; margin: 0px; position: relative; padding: 0px; max-height: 300px; overflow: auto; }
.mui-l2olrk {
  -webkit-tap-highlight-color: transparent;
  background-color: transparent;
  outline: 0px;
  border: 0px;
  margin: 0px;
  border-radius: 0px;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  appearance: none;
  color: inherit;
  display: flex;
  -webkit-box-flex: 1;
  flex-grow: 1;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
  position: relative;
  text-decoration: none;
  min-width: 0px;
  box-sizing: border-box;
  text-align: left;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  padding: 12px 16px;
}
@media print { .mui-l2olrk { print-color-adjust: exact; } }
.mui-l2olrk:hover { text-decoration: none; background-color: rgba(0, 0, 0, 0.04); }
@media (hover: none) { .mui-l2olrk:hover { background-color: transparent; } }
.mui-l2olrk.Mui-selected { background-color: rgba(255, 225, 128, 0.08); }
.mui-l2olrk.Mui-selected.Mui-focusVisible { background-color: rgba(255, 225, 128, 0.2); }
.mui-l2olrk.Mui-selected:hover { background-color: rgba(255, 225, 128, 0.12); }
@media (hover: none) { .mui-l2olrk.Mui-selected:hover { background-color: rgba(255, 225, 128, 0.08); } }
.mui-l2olrk.Mui-focusVisible { background-color: rgba(0, 0, 0, 0.12); }
.mui-l2olrk.Mui-disabled { pointer-events: none; cursor: default; opacity: 0.38; }
/* ROUND 3 -- verbatim from r3_hero_panel_rules_raw.json `matched_rules_raw[].cssText`, in the
   record's own target order: li -> plain row text -> popular row text -> Paper. Nothing is authored. */
.mui-65nsjg { display: flex; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center; position: relative; text-decoration: none; width: 100%; box-sizing: border-box; text-align: left; padding: 0px; }
.mui-1bazw36 { margin: 0px; line-height: 1.43; font-family: var(--font-ibm-plex-sans-condensed),IBM Plex Sans Condensed,sans-serif; font-style: normal; font-size: 0.875rem; color: rgb(82, 42, 16); font-weight: normal; }
@media (min-width: 900px) { .mui-1bazw36 { font-size: 1rem; } }
.mui-127ztmv { margin: 0px; line-height: 1.43; font-family: var(--font-ibm-plex-sans-condensed),IBM Plex Sans Condensed,sans-serif; font-style: normal; font-size: 0.875rem; color: rgb(82, 42, 16); font-weight: 700; }
@media (min-width: 900px) { .mui-127ztmv { font-size: 1rem; } }
.mui-y0ot23 { background-color: rgb(255, 255, 255); color: rgb(82, 42, 16); transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--Paper-shadow); background-image: var(--Paper-overlay); position: absolute; top: 100%; left: 0px; right: 0px; z-index: 10; border-radius: 12px; max-height: 300px; overflow: hidden; margin-top: 12px; }

/* ---------------------------------------------------------------- (3) T5-R round-10 supplements */
/* (3a) item 6 -- the "The fresh effect" carousel's own dot row.
   Source: area6_realstories__target.json pager.dots (8x8, border-radius 100%, background
   rgb(164,50,96); active class mui-1bejk9o opacity 1, inactive mui-1gz71jz opacity 0.4).
   The (2e) block above scopes these same two hash classes to `.mui-79elbk`, which on the home page
   is the FOOTER capture form's wrapper, not this carousel: measured this round on the served
   home at 375, the real-stories dots rendered 16x6 / border-radius 0px / rgb(240,240,240) / opacity
   1 for every dot because no rule matched them (home.styles.html carries no 1bejk9o/1gz71jz rule at
   all). The declarations below are byte-identical to the (2e) block; only the scope is the dot row
   this carousel actually uses (.mui-nc6u02, inside [data-testid="real-stories-section"]), which is
   the same component that section renders on how-it-works and why-fresh-dog-food. */
.mui-nc6u02 .mui-1bejk9o {
  padding: 0px;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  cursor: pointer;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: rgb(164, 50, 96);
  opacity: 1;
}
.mui-nc6u02 .mui-1gz71jz {
  padding: 0px;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  cursor: pointer;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: rgb(164, 50, 96);
  opacity: 0.4;
}

/* (3b) item 8 -- the footer lead-capture success message.
   Source: area8_footer__target.json paths.valid.message (colour rgb(138, 191, 128), font-size 14px,
   font-weight 500, no role, no aria-live, and geometry.gap_input_bottom_to_message_top_px = 12).
   The class is the target's own mui-11k2qw, which the mirrored stylesheet does not carry; the three
   captured declarations plus the measured 12px gap are written here for the element that
   clone.js/initNewsletter creates on a successful submit. No other element uses this class. */
.mui-11k2qw {
  color: rgb(138, 191, 128);
  font-size: 14px;
  font-weight: 500;
  margin-top: 12px;
}