/* Direct Cream site chrome: one-row phone header, info line, search overlay, free-delivery progress line (WS-B B3).
   Loaded only while header.compact is on for the shop. Phones and small tablets only (max-width 767px); wider screens keep today's header.
   The three shells use dc-, bd- and cs- class prefixes, so the selectors match the stable class endings (-hd, -logo, -burger ...)
   under the one body class this group adds. Colours are tokens, never typed here. */

body.cfg-header{
  --cfg-tint:var(--brand-accent-light,var(--dc-gold-lt,var(--bd-orange-lt,var(--cs-blue-lt,var(--c2-cy-lt)))));
  --cfg-info-text:var(--brand-info-text,#7A5C0E);
  --cfg-ink:var(--brand-ink,var(--dc-ink,var(--bd-ink,var(--cs-ink,var(--c2-ink)))));
  --cfg-line:var(--brand-line,var(--dc-line,var(--bd-line,var(--cs-line,var(--c2-line)))));
  --cfg-card:var(--brand-card,var(--dc-card,var(--bd-card,var(--cs-card,var(--c2-card)))));
  --cfg-btn:var(--brand-primary-btn,var(--dc-red-btn,var(--bd-pink-btn,var(--cs-navy-btn,var(--c2-cy)))));
  --cfg-ok:var(--brand-ok,var(--dc-go,var(--bd-go,var(--cs-go,var(--c2-go)))));
  --cfg-row:56px;
}
body.cfg-header header.cs-hd{--cfg-logo-320:129px;--cfg-logo-max:228px}
body.cfg-header header.c2-hd{--cfg-logo-320:127px;--cfg-logo-max:201px}

/* The basket count shows only from 1 item (inline-styled badges on CO2 need the !important). */
body.cfg-header #cart-total-head[data-cfg0]{display:none!important}

/* Hidden everywhere until a phone width turns the compact header on. */
body.cfg-header .cfg-line,
body.cfg-header .cfg-srch-btn,
body.cfg-header .cfg-prog{display:none}
body.cfg-header .cfg-srch[hidden]{display:none}

@media(max-width:767px){

  /* ---- info line: 34px, one line, never taller (no layout shift when the text changes) ---- */
  body.cfg-header .cfg-line{display:flex;align-items:center;justify-content:center;box-sizing:border-box;
    height:34px;padding:0 16px;background:var(--cfg-tint);color:var(--cfg-info-text);
    font-size:13px;font-weight:600;line-height:1.2;text-align:center;overflow:hidden}
  body.cfg-header .cfg-line__t{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    font-variant-numeric:tabular-nums}
  body.cfg-header .cfg-line b{font-weight:800}
  /* a campaign message may need a second line: never cut its qualifying words off */
  body.cfg-header .cfg-line--msg{height:auto;min-height:34px;padding:5px 16px;font-size:12.5px;line-height:1.25}
  body.cfg-header .cfg-line--msg .cfg-line__t{white-space:normal;overflow:visible;text-overflow:clip}

  /* In the one-row header the legacy promo, utility bar and slider band give way at phone widths: to the info line when it is on, to nothing when the
     top bar is switched Off (a hidden marker is written then). If the bar is On but no line could be built, the legacy bars stay. They are only
     hidden, never deleted. The legacy free-delivery bar gives way to the progress line only while the progress line is on. */
  body.cfg-header:has(.cfg-line,.cfg-nobars)>div[class$="-promo"],
  body.cfg-header:has(.cfg-line,.cfg-nobars)>div[class$="-slider"],
  body.cfg-header:has(.cfg-line,.cfg-nobars)>div[class$="-util"],
  body.cfg-header:has(.cfg-prog)>div[class$="-fd"]{display:none}
  body.cfg-header:has(.cfg-srch-btn)>nav[class$="-nav"]{display:none}
  body.cfg-header:has(.cfg-prog) header[class$="-hd"] [class$="fdbar"]{display:none}   /* CO2 keeps its free-delivery bar inside the header: the progress line replaces it (only when the progress line is on) */

  /* ---- the one row: menu, logo, search, basket. 56px, sticky, never wraps ---- */
  body.cfg-header:has(.cfg-srch-btn) header[class$="-hd"]{position:sticky;top:0}
  body.cfg-header:has(.cfg-srch-btn) header[class$="-hd"]>div[class$="__in"],
  body.cfg-header:has(.cfg-srch-btn) header[class$="-hd"]>div[class$="__i"]{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;box-sizing:border-box;
    height:var(--cfg-row);min-height:var(--cfg-row);padding:0 16px;margin:0 auto}
  body.cfg-header:has(.cfg-srch-btn) header[class$="-hd"] [class$="-hd__a"]{display:contents}
  body.cfg-header:has(.cfg-srch-btn) header[class$="-hd"] [class$="-slot-srch"],
  body.cfg-header:has(.cfg-srch-btn) header[class$="-hd"] .ah_search{display:none}

  body.cfg-header:has(.cfg-srch-btn) header[class$="-hd"] [class$="-burger"]{order:0;display:flex;flex:none;width:44px;height:44px}
  body.cfg-header:has(.cfg-srch-btn) header[class$="-hd"] a[class$="logo"]{order:1;flex:none;display:flex;align-items:center;min-height:44px;margin-right:auto}
  body.cfg-header:has(.cfg-srch-btn) header[class$="-hd"] .cfg-srch-btn{order:2;display:flex;align-items:center;justify-content:center;flex:none;
    width:44px;height:44px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--cfg-ink);cursor:pointer}
  body.cfg-header:has(.cfg-srch-btn) header[class$="-hd"] [class$="-slot-cart"],
  body.cfg-header:has(.cfg-srch-btn) header[class$="-hd"] [class$="-hd__cart"]{order:3;flex:none}

  /* logo: the signed-off widths for the slot left by three 44px controls (320: 130/129, 375: 182, 390 and up: capped);
     Bobalife shows its 57x40 mark at a fixed height. */
  body.cfg-header:has(.cfg-srch-btn) header[class$="-hd"] a[class$="logo"] img{height:auto;max-height:44px;width:var(--cfg-logo-320,130px)}
  @media(min-width:340px){
    body.cfg-header:has(.cfg-srch-btn) header[class$="-hd"] a[class$="logo"] img{width:min(var(--cfg-logo-max,195px),calc(100vw - 193px))}
  }
  body.cfg-header:has(.cfg-srch-btn) header.bd-hd a.bd-logo img{width:auto;height:40px;max-height:none}
  @media(min-width:380px){
    body.cfg-header:has(.cfg-srch-btn) header.c2-hd a[class$="logo"] img{width:min(var(--cfg-logo-max,201px),calc(100vw - 189px))}
  }

  /* basket: a 44px round button with a small count badge, so the row stays three controls wide */
  body.cfg-header:has(.cfg-srch-btn) #checkout-button{position:relative;box-sizing:border-box;width:44px;height:44px;padding:0;justify-content:center;gap:0}
  body.cfg-header:has(.cfg-srch-btn) #checkout-button [class$="-cart__l"]{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  body.cfg-header:has(.cfg-srch-btn) #checkout-button #cart-total-head{position:absolute;top:1px;right:-3px;min-width:18px;box-sizing:border-box;
    padding:0 5px;font-size:11px;line-height:18px}

  /* ---- free-delivery progress line: 3px along the bottom edge of the header, drawn over its border ---- */
  body.cfg-header .cfg-prog{display:block;position:absolute;left:0;right:0;bottom:0;height:3px;overflow:hidden;
    background:transparent;pointer-events:none}
  body.cfg-header .cfg-prog[data-show="1"]{background:var(--cfg-line)}
  body.cfg-header .cfg-prog>i{display:block;height:100%;width:0;background:var(--cfg-btn);transition:width .35s ease}
  body.cfg-header .cfg-prog[data-win="1"]>i{background:var(--cfg-ok)}
  body.cfg-header .cfg-prog:not([data-show="1"])>i{width:0!important}
  body.cfg-header .cfg-prog:not([data-show="1"]){visibility:hidden}   /* an empty basket: out of the page and out of the accessibility tree */
}

/* CO2 desktop: while the compact header is on, the category pills stay on one scrolling row instead of wrapping to two or three (the nav was 109px tall). */
@media(min-width:768px){
  body.cfg-header:has(.cfg-srch-btn) nav.c2-nav .ah_pills{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-top:6px;padding-bottom:6px}
  body.cfg-header:has(.cfg-srch-btn) nav.c2-nav .ah_pills::-webkit-scrollbar{display:none}
  body.cfg-header:has(.cfg-srch-btn) nav.c2-nav .ah_pills a{flex:none}
}

/* ---- search overlay (the button that opens it only exists at phone widths) ---- */
/* above the cookie bar (z-index 2147483000): an open search must never leave its field underneath it */
body.cfg-header .cfg-srch{position:fixed;inset:0;z-index:2147483001;background:var(--cfg-card);display:flex;flex-direction:column;
  padding:8px 12px;box-sizing:border-box}
body.cfg-header .cfg-srch__f{display:flex;align-items:center;gap:8px;height:56px}
body.cfg-header .cfg-srch__x,
body.cfg-header .cfg-srch__go{flex:none;height:44px;border:0;cursor:pointer;font:inherit}
body.cfg-header .cfg-srch__x{display:flex;align-items:center;justify-content:center;width:44px;border-radius:10px;
  background:transparent;color:var(--cfg-ink)}
body.cfg-header .cfg-srch__go{padding:0 18px;border-radius:999px;background:var(--cfg-btn);color:var(--cfg-card);font-weight:700;font-size:15px}
body.cfg-header .cfg-srch__i{flex:1;min-width:0;box-sizing:border-box;height:46px;padding:0 16px;border:1px solid var(--cfg-line);
  border-radius:999px;background:var(--cfg-card);color:var(--cfg-ink);font:inherit;font-size:16px}
body.cfg-header .cfg-srch__i::placeholder{color:var(--cfg-info-text);opacity:1}
body.cfg-header .cfg-srch__i:focus{outline:3px solid var(--cfg-btn);outline-offset:1px}
body.cfg-header .cfg-srch__x:focus-visible,
body.cfg-header .cfg-srch__go:focus-visible,
body.cfg-header .cfg-srch-btn:focus-visible{outline:3px solid var(--cfg-btn);outline-offset:2px}
body.cfg-header .cfg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
body.cfg-search-open{overflow:hidden}
@media(min-width:768px){
  body.cfg-header .cfg-srch{display:none}
}
@media(prefers-reduced-motion:reduce){
  body.cfg-header .cfg-prog>i{transition:none}
}