/* C101 Promo Banner 1.0.0 - all rules scoped to .c101pb; neutralise inherited theme styles */
.c101pb{display:block;position:relative;z-index:1;margin:0;border:0;line-height:1.3;font-size:16px;font-weight:400;letter-spacing:normal;
  text-transform:none;text-align:left;color:#231f20;cursor:default;-webkit-tap-highlight-color:transparent}
.c101pb[hidden]{display:none!important}
.c101pb ul,.c101pb li{list-style:none!important;margin:0;padding:0;line-height:inherit;background:none}
.c101pb li::marker{content:none}
.c101pb svg{overflow:visible}
.c101pb picture{display:contents}
.c101pb img.c101pb__img{max-width:none;height:100%;border:0;box-shadow:none;margin:0;padding:0}
.c101pb b{font-weight:700}
/* Fluid layout: boxes fill the bar edge-to-edge (gutter = header content edge), sizes scale with each box via container query units. */
.c101pb{--c101pb-dark:#231f20;--c101pb-lime:#d7df23;--c101pb-blue:#30bce7;--c101pb-red:#e02b20;--c101pb-olive:#676d30;
  --c101pb-gutter:30px;--c101pb-gap:clamp(8px,1.1vw,16px);
  font-family:Poppins,system-ui,sans-serif;background:#fff;box-sizing:border-box;
  padding:clamp(10px,1.2vw,18px) var(--c101pb-gutter)}
.c101pb *{box-sizing:border-box}
.c101pb__row{width:100%;max-width:none;margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--c101pb-gap);align-items:stretch}
/* desktop order: Shipping | Support | Coupon (DOM keeps Support first for mobile) */
.c101pb__row>li:nth-child(1){order:2}.c101pb__row>li:nth-child(2){order:1}
.c101pb__row>li{display:flex;margin:0;padding:0;container-type:inline-size}
.c101pb__row>li::before{display:none}
/* identical box style for all cards; height comes from content (no fixed heights) */
.c101pb__card{flex:1;display:flex;align-items:center;margin:0;
  gap:clamp(10px,4cqi,18px);padding:clamp(12px,4cqi,20px) clamp(12px,4.5cqi,22px);
  background:#fff;border:1px solid #e7e7e2;border-radius:12px;box-shadow:0 2px 10px rgba(35,31,32,.07);
  color:var(--c101pb-dark);text-decoration:none;cursor:default}
.c101pb__icon{--c101pb-ic:clamp(48px,15cqi,72px);flex:0 0 var(--c101pb-ic);width:var(--c101pb-ic);height:var(--c101pb-ic);border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.c101pb__icon svg{width:62%;height:62%;display:block}
.c101pb__card--ship .c101pb__icon svg{width:72%;height:72%}
.c101pb__card--support .c101pb__icon svg{width:80%;height:80%}
/* chameleon art box: 95% of the card-fill square, centred; pupil overlay positioned in % of the 512px artwork */
.c101pb__art{position:absolute;inset:2.5%;display:block}
.c101pb__img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain}
.c101pb__img--live,.c101pb__pupil{display:none}
.c101pb__art.is-live .c101pb__img--static{display:none}
.c101pb__art.is-live .c101pb__img--live,.c101pb__art.is-live .c101pb__pupil{display:block}
.c101pb__pupil{position:absolute;left:79.3%;top:26.86%;width:3.71%;height:3.71%;margin:-1.855% 0 0 -1.855%;border-radius:50%;
  background:#16213a;will-change:transform;pointer-events:none}
.c101pb__pupil::after{content:"";position:absolute;left:55%;top:17%;width:27%;height:27%;border-radius:50%;background:#f5f1f0}
.c101pb__m{display:none}
.c101pb__card--support .c101pb__icon{position:relative}
.c101pb__text{display:flex;flex-direction:column;gap:.25em;min-width:0}
.c101pb__title{font-size:clamp(15px,4.1cqi,19px);line-height:1.25;font-weight:700;margin:0;padding:0}
.c101pb__sub{font-size:clamp(12.5px,3.3cqi,15.5px);line-height:1.4;font-weight:400;color:#55524f;margin:0;padding:0}
.c101pb__nowrap{white-space:nowrap}
.c101pb__sub--short,.c101pb__title--short,.c101pb__sub--pill{display:none}
/* coupon: dashed red border wraps the whole text block (FRIENDS + subline), full height, fills remaining width */
.c101pb__coupon{flex:1 1 auto;min-width:0;align-self:stretch;justify-content:center;gap:clamp(6px,2cqi,8px);
  padding:clamp(8px,2.4cqi,12px) clamp(12px,4cqi,18px);border:1.5px dashed var(--c101pb-red);border-radius:8px}
.c101pb__code{color:var(--c101pb-red);font-size:clamp(17px,5cqi,22px);letter-spacing:.12em;line-height:1.1}
.c101pb__sub--pillonly{display:none}
/* per-card accents (icon circle + ship headline colour only) */
/* support: chameleon fills the card height (5px breathing gap top/bottom); text keeps the normal padding so card height is unchanged */
.c101pb__card--support{padding-block:5px;padding-inline:clamp(6px,2cqi,10px) clamp(10px,3.5cqi,20px);gap:clamp(8px,2.5cqi,14px)}
.c101pb__card--support .c101pb__text{padding-block:calc(clamp(12px,4cqi,20px) - 5px)}
.c101pb__card--support .c101pb__icon{flex:0 0 auto;align-self:stretch;width:auto;height:auto;aspect-ratio:1;min-height:56px;background:none;box-shadow:none;border-radius:0}
.c101pb__callout{white-space:normal}
.c101pb__help{display:inline-block;white-space:nowrap;font-size:clamp(11.5px,3.1cqi,14.5px);font-weight:500;color:#55524f;letter-spacing:0}
.c101pb__card--ship .c101pb__sub,.c101pb__card--coupon .c101pb__sub{font-weight:500}
.c101pb__phone{color:var(--c101pb-red)}
.c101pb__card--support{justify-content:center}
.c101pb__card--support .c101pb__text{gap:.15em}
.c101pb__card--ship .c101pb__icon{background:#3f4420}
.c101pb__card--ship .c101pb__title{color:var(--c101pb-red)}
.c101pb__card--coupon .c101pb__icon{background:#3f4420}

/* ---------- Mobile (<=767px): compact text-only banner; the 3 graphic cards are hidden ---------- */
@media (max-width:767px){
  .c101pb{--c101pb-gutter:16px;padding:8px var(--c101pb-gutter)}
  .c101pb__row{display:none}
  .c101pb__m{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 12px;
    background:#f7f8ef;border:1px solid #e7e7e2;border-radius:12px;box-shadow:0 2px 10px rgba(35,31,32,.07);
    font-size:clamp(12.5px,3.6vw,14px);line-height:1.5;font-weight:500;color:var(--c101pb-dark);text-align:center}
  .c101pb__m-line{display:block;color:inherit;text-decoration:none;max-width:100%;cursor:default}
  .c101pb__m-line b{font-weight:700}
  .c101pb__m-red{color:var(--c101pb-red)}
  .c101pb__m-code{display:inline-block;margin:0 2px;padding:0 5px;border:1px dashed var(--c101pb-red);border-radius:4px;
    color:var(--c101pb-red);font-weight:700;letter-spacing:.1em;line-height:1.35}
}

/* v1.0.2: hide old homepage text offer block (Theme Builder body section 0) now replaced by this banner. Deactivate plugin to restore. */
body.home.page-id-4706 .et_pb_section_0_tb_body{display:none !important}

/* v1.0.5: back to white; 2px gray frame matching the product tiles (2px solid #e5e5e5, 12px radius) */
.c101pb__card{border:2px solid #e5e5e5;border-radius:12px}
@media (max-width:767px){
  .c101pb__m{background:#fff;border:2px solid #e5e5e5;border-radius:12px}
}

/* v1.1.0: third box "Where's my order?" back in the old FRIENDS slot. Desktop order: Shipping | Support (chameleon, centre) | Where's my order.
   Same card frame/radius/shadow as the other two (inherits .c101pb__card); only this box is a link. Ship + Support rules untouched. */
.c101pb__row{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr)}
.c101pb__row>li:nth-child(3){order:3}
.c101pb a.c101pb__card--order,.c101pb a.c101pb__card--order:hover,.c101pb a.c101pb__card--order:visited{cursor:pointer;color:var(--c101pb-dark);text-decoration:none}
.c101pb a.c101pb__card--order:focus-visible{outline:2px solid var(--c101pb-blue);outline-offset:2px}
.c101pb__card--order .c101pb__icon{background:#3f4420}
.c101pb__card--order .c101pb__icon svg{width:70%;height:70%}
.c101pb__card--order .c101pb__sub{font-weight:500}
/* v1.1.0 copy fix: bot help line lives in the Support box; Shipping box = shipping policy only */
/* v3: Support box = title + ONE inline paragraph (callout number flows inside the sentence) */
.c101pb__card--support .c101pb__para{display:block;font-weight:500;margin-top:.15em;text-wrap:pretty}
.c101pb__para .c101pb__callnum{font-weight:700;color:var(--c101pb-dark)}
.c101pb__sub--policy .c101pb__pl{display:block;white-space:nowrap}
/* keep the chameleon at its 3-column size so the extra support line doesn't enlarge it */
.c101pb__card--support .c101pb__icon{align-self:center;height:clamp(64px,24cqi,88px)}
@media (max-width:767px){
  .c101pb a.c101pb__m-order{cursor:pointer;color:inherit;text-decoration:none}
  .c101pb a.c101pb__m-order b{text-decoration:underline;text-decoration-color:var(--c101pb-lime);text-decoration-thickness:2px;text-underline-offset:3px}
}

/* ==========================================================================
   v1.0.6 pill filter - Apple-style segmented filter for the homepage
   Essential Grid "woo1" (#esg-grid-2-1). Scoped to #esg-grid-2-1-wrap only.
   Measured from Eric's Apple reference (2x capture): track #e8e8ed, 56px tall,
   6px inset, fully rounded; selected pill #1d1d1f 44px tall, white 17px/400 text;
   unselected = plain #1d1d1f text, no bg. Counts keep, parentheses removed
   (ESG adds them as .eg-el-amount ::before/::after). Deactivate plugin to restore.
   ========================================================================== */
#esg-grid-2-1-wrap .esg-filters{
  --c101f-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Poppins,sans-serif;
  --c101f-track:#e8e8ed;--c101f-ink:#1d1d1f;--c101f-hover:#dcdce1;
  display:flex!important;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 14px;
  height:auto!important;margin:8px 0 22px!important;text-align:center}
/* the shared capsule track */
#esg-grid-2-1-wrap .esg-filters .esg-filter-wrapper{
  display:inline-flex!important;flex-wrap:nowrap;align-items:center;gap:0;
  margin:0!important;padding:6px!important;max-width:100%;box-sizing:border-box;
  background:var(--c101f-track)!important;border:0!important;border-radius:999px!important;box-shadow:none!important}
#esg-grid-2-1-wrap .esg-filters .esg-filter-wrapper .eg-clearfix{display:none!important}
/* options */
#esg-grid-2-1-wrap .esg-filters .esg-filterbutton{
  display:inline-flex!important;align-items:baseline;flex:0 0 auto;white-space:nowrap;
  height:44px!important;line-height:44px!important;margin:0!important;padding:0 22px!important;box-sizing:border-box;
  font-family:var(--c101f-font)!important;font-size:17px!important;font-weight:400!important;letter-spacing:-.022em;
  color:var(--c101f-ink)!important;background:transparent!important;border:0!important;border-radius:999px!important;box-shadow:none!important;
  text-transform:none!important;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color .2s ease,color .2s ease}
#esg-grid-2-1-wrap .esg-filters .esg-filterbutton span{
  font:inherit!important;line-height:inherit!important;color:inherit!important;letter-spacing:inherit}
#esg-grid-2-1-wrap .esg-filters .esg-filterbutton:not(.selected){color:rgba(29,29,31,.8)!important}
#esg-grid-2-1-wrap .esg-filters .esg-filterbutton:not(.selected):hover{color:#000!important;background:var(--c101f-hover)!important}
#esg-grid-2-1-wrap .esg-filters .esg-filterbutton.selected,
#esg-grid-2-1-wrap .esg-filters .esg-filterbutton.selected:hover{background:var(--c101f-ink)!important;color:#fff!important}
#esg-grid-2-1-wrap .esg-filters .esg-filterbutton:focus-visible{outline:2px solid #0071e3;outline-offset:1px}
/* no checkboxes */
#esg-grid-2-1-wrap .esg-filters .esg-filter-checked{display:none!important}
/* counts: no parentheses, slightly smaller + lighter */
#esg-grid-2-1-wrap .esg-filters .eg-el-amount::before,
#esg-grid-2-1-wrap .esg-filters .eg-el-amount::after{content:none!important;display:none!important}
#esg-grid-2-1-wrap .esg-filters .esg-filterbutton .eg-el-amount{
  margin-left:6px!important;font-size:.82em!important;font-variant-numeric:tabular-nums;color:rgba(29,29,31,.5)!important}
#esg-grid-2-1-wrap .esg-filters .esg-filterbutton.selected .eg-el-amount{color:rgba(255,255,255,.7)!important}
/* Sort By: same capsule, chevron inside it */
#esg-grid-2-1-wrap .esg-filters .esg-sortbutton-wrapper{
  display:inline-flex!important;align-items:center;margin:0!important;padding:6px!important;box-sizing:border-box;
  background:var(--c101f-track)!important;border:0!important;border-radius:999px!important;box-shadow:none!important}
#esg-grid-2-1-wrap .esg-filters .esg-sortbutton{
  display:inline-block!important;height:44px!important;line-height:44px!important;margin:0!important;padding:0 6px 0 18px!important;
  font-family:var(--c101f-font)!important;font-size:17px!important;font-weight:400!important;letter-spacing:-.022em;
  color:rgba(29,29,31,.8)!important;background:transparent!important;border:0!important;border-radius:999px 0 0 999px!important;box-shadow:none!important;text-transform:none!important}
#esg-grid-2-1-wrap .esg-filters .esg-sortbutton span{font:inherit!important;line-height:inherit!important;color:inherit!important}
#esg-grid-2-1-wrap .esg-filters .esg-sortbutton .sortby_data{color:var(--c101f-ink)!important;font-weight:500!important}
#esg-grid-2-1-wrap .esg-filters .esg-sortbutton select{width:100%!important;height:100%!important;top:0;left:0;border:0!important;cursor:pointer}
#esg-grid-2-1-wrap .esg-filters .esg-sortbutton-order{
  display:inline-flex!important;align-items:center;justify-content:center;width:44px!important;height:44px!important;line-height:44px!important;
  margin:0!important;padding:0!important;font-size:15px!important;color:var(--c101f-ink)!important;
  background:transparent!important;border:0!important;border-radius:999px!important;box-shadow:none!important;cursor:pointer;transition:background-color .2s ease}
#esg-grid-2-1-wrap .esg-filters .esg-sortbutton-order:hover{background:var(--c101f-hover)!important;color:#000!important}
/* ESG's own mobile "Filter Categories" toggle (only if ESG ever shows it): same capsule look */
#esg-grid-2-1-wrap .esg-filters .esg-mobile-filter-button{
  height:44px;line-height:44px;padding:0 20px!important;margin:0!important;font-family:var(--c101f-font)!important;font-size:15px!important;
  font-weight:400!important;color:var(--c101f-ink)!important;background:transparent!important;border:0!important;border-radius:999px!important;box-shadow:none!important}
/* mobile: same design scaled down; one horizontally scrollable row instead of wrapping */
@media (max-width:767px){
  #esg-grid-2-1-wrap .esg-filters{gap:10px;margin:4px 0 16px!important}
  #esg-grid-2-1-wrap .esg-filters .esg-filter-wrapper{
    display:flex!important;width:max-content;max-width:100%;padding:4px!important;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scroll-padding:0 4px;scrollbar-width:none;-ms-overflow-style:none}
  #esg-grid-2-1-wrap .esg-filters .esg-filter-wrapper::-webkit-scrollbar{display:none}
  #esg-grid-2-1-wrap .esg-filters .esg-filterbutton{
    height:38px!important;line-height:38px!important;padding:0 15px!important;font-size:14px!important;letter-spacing:-.01em;scroll-snap-align:start}
  #esg-grid-2-1-wrap .esg-filters .esg-filterbutton .eg-el-amount{margin-left:5px!important}
  #esg-grid-2-1-wrap .esg-filters .esg-sortbutton-wrapper{padding:4px!important}
  #esg-grid-2-1-wrap .esg-filters .esg-sortbutton{height:38px!important;line-height:38px!important;padding:0 4px 0 15px!important;font-size:14px!important}
  #esg-grid-2-1-wrap .esg-filters .esg-sortbutton-order{width:38px!important;height:38px!important;line-height:38px!important;font-size:13px!important}
  #esg-grid-2-1-wrap .esg-filters .esg-mobile-filter-button{height:38px;line-height:38px;font-size:14px!important}
}

/* v1.0.7 pill filter: Chameleons 101 brand colors + Poppins (overrides the 1.0.6 Apple gray/black).
   Track = white with the same 2px #e5e5e5 frame as the product tiles and banner; selected pill = brand red #ef4136;
   text = brand ink #231f20; hover = soft brand lime; focus ring = brand blue. Shape, counts, no checkboxes, mobile scroll unchanged. */
#esg-grid-2-1-wrap .esg-filters{
  --c101f-font:Poppins,system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --c101f-track:#fff;--c101f-ink:#231f20;--c101f-red:#ef4136;--c101f-hover:rgba(215,223,35,.28)}
#esg-grid-2-1-wrap .esg-filters .esg-filter-wrapper,
#esg-grid-2-1-wrap .esg-filters .esg-sortbutton-wrapper{
  padding:4px!important;border:2px solid #e5e5e5!important;box-shadow:0 2px 10px rgba(35,31,32,.07)!important}
#esg-grid-2-1-wrap .esg-filters .esg-filterbutton,
#esg-grid-2-1-wrap .esg-filters .esg-sortbutton,
#esg-grid-2-1-wrap .esg-filters .esg-mobile-filter-button{font-weight:500!important;letter-spacing:0!important;font-size:16px!important}
#esg-grid-2-1-wrap .esg-filters .esg-filterbutton:not(.selected){color:var(--c101f-ink)!important}
#esg-grid-2-1-wrap .esg-filters .esg-filterbutton:not(.selected):hover{color:var(--c101f-ink)!important;background:var(--c101f-hover)!important}
#esg-grid-2-1-wrap .esg-filters .esg-filterbutton.selected,
#esg-grid-2-1-wrap .esg-filters .esg-filterbutton.selected:hover{background:var(--c101f-red)!important;color:#fff!important;box-shadow:0 2px 6px rgba(239,65,54,.28)!important}
#esg-grid-2-1-wrap .esg-filters .esg-filterbutton:focus-visible{outline:2px solid #30bce7}
#esg-grid-2-1-wrap .esg-filters .esg-filterbutton .eg-el-amount{color:rgba(35,31,32,.5)!important;font-weight:400!important}
#esg-grid-2-1-wrap .esg-filters .esg-filterbutton.selected .eg-el-amount{color:rgba(255,255,255,.8)!important}
#esg-grid-2-1-wrap .esg-filters .esg-sortbutton{color:rgba(35,31,32,.75)!important}
#esg-grid-2-1-wrap .esg-filters .esg-sortbutton .sortby_data{color:var(--c101f-red)!important;font-weight:600!important}
#esg-grid-2-1-wrap .esg-filters .esg-sortbutton-order{color:var(--c101f-ink)!important}
#esg-grid-2-1-wrap .esg-filters .esg-sortbutton-order:hover{background:var(--c101f-hover)!important;color:var(--c101f-ink)!important}
@media (max-width:767px){
  #esg-grid-2-1-wrap .esg-filters .esg-filter-wrapper,
  #esg-grid-2-1-wrap .esg-filters .esg-sortbutton-wrapper{padding:2px!important}
  #esg-grid-2-1-wrap .esg-filters .esg-filterbutton,
  #esg-grid-2-1-wrap .esg-filters .esg-sortbutton,
  #esg-grid-2-1-wrap .esg-filters .esg-mobile-filter-button{font-size:14px!important}
}

/* v1.0.8 mobile fix: on phones the filter wraps onto centered rows of separate pills (no sideways scroll).
   Each pill = white chip with the tiles' 2px #e5e5e5 border; selected = brand red. Desktop untouched. */
@media (max-width:767px){
  #esg-grid-2-1-wrap .esg-filters{flex-direction:column;align-items:center;gap:12px;padding:0 12px;box-sizing:border-box}
  #esg-grid-2-1-wrap .esg-filters .esg-filter-wrapper{
    display:flex!important;flex-wrap:wrap!important;justify-content:center;gap:8px!important;
    width:100%!important;max-width:100%!important;padding:0!important;overflow:visible!important;
    background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;scroll-snap-type:none}
  #esg-grid-2-1-wrap .esg-filters .esg-filterbutton{
    height:40px!important;line-height:36px!important;padding:0 16px!important;font-size:14px!important;
    background:#fff!important;border:2px solid #e5e5e5!important;box-shadow:0 1px 4px rgba(35,31,32,.06)!important}
  #esg-grid-2-1-wrap .esg-filters .esg-filterbutton.selected,
  #esg-grid-2-1-wrap .esg-filters .esg-filterbutton.selected:hover{border-color:#ef4136!important}
  #esg-grid-2-1-wrap .esg-filters .esg-filterbutton:not(.selected):hover,
  #esg-grid-2-1-wrap .esg-filters .esg-filterbutton:not(.selected):active{background:rgba(215,223,35,.28)!important}
}