/*W2_LIGHT_CONTRAST_V1*/
/* P36_DOCK_EXACT_V1 padding, min-height, max-height and margin removed: the site's
   dock declares none of them. The 16px side padding was being added to the
   content width, making this pill 32px wider than the site's. The inner
   elements carry their own padding, so nothing moves closer to the edge. */
/* P34_DOCK_SEAT_PARITY_V1 a declared starting size, so the first paint uses a real value
   instead of the var() fallback and the controller has nothing to correct. */
:root{ --dock-scale: 1; }
/* P22_DOCK_UNCONDITIONAL_V1 — the pill geometry no longer depends on body.w2-footer-compact.
   That class was set by w2footer.js, which is deleted; without it the whole
   site-matching block silently stopped applying. Unconditional now. */
/* W2_FOOT_GLASS_V3 — constructor checkout dock, one-to-one with the main site.
   Loaded AFTER w2-merged.css. V3 fix: the LIVE merged sizes the pill via
   `html.w2-dark body .w2-foot .w2-foot-actions` (68px) —
   specificity 0-4-2. V1/V2 targeted `html body .w2-foot .w2-foot-actions`
   (0-2-2) so the size lost. Every sizing/material rule below now MATCHES the
   compact selector shape (and loads later) so it wins. Mobile only. */
@media (max-width: 639.98px) {/* wrapper centers the pill (match compact specificity) */ html body .w2-foot .w2-foot-bubble,
  html body .w2-foot .w2-foot-bubble,
  html.w2-dark body .w2-foot .w2-foot-bubble {
    display: flex !important; justify-content: center !important; align-items: center !important;
    width: 100% !important; box-sizing: border-box !important;
    background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
    padding: 0 0 max(10px, env(safe-area-inset-bottom)) 0 !important;
  }/* the glass pill — SITE CANON size (58px / width auto / max 520),
  new material,
  scroll-scaled. Selector matches the live compact rules so 58 beats 68. */ html body .w2-foot .w2-foot-actions,
  html body .w2-foot .w2-foot-actions,
  html.w2-dark body .w2-foot .w2-foot-actions,
  html:not(.w2-dark) body .w2-foot .w2-foot-actions {
    /* P34_DOCK_SEAT_PARITY_V1 seated exactly as the site seats its dock: pinned to the
       window, centred by transform, 10px above the safe area. It used to be
       position:relative inside .w2-foot, so the container's padding decided
       where it landed - a different mechanism, a different resting place. */
    position: fixed !important; overflow: visible !important;
    left: 50% !important; right: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
    z-index: 1000 !important;
    /* W2_FOOT_PARITY_V1 — the site dock is width:auto too, so each side hugged
       its own content and the two never matched. Fixed width, same formula on
       both, so the pill is identical coming from the site. 16px air per side
       mirrors the site's 1rem. */
    /* P26_DOCK_WIDTH_PARITY_V2 the site dock is width:auto with a flat max-width:520px —
       the pill hugs its content. A forced full width is what made this one
       read as a different, bigger footer even with matching height and radius. */
    /* P37_DOCK_CONSTANT_SIZE_V1 324 x 58 measured on the site dock at rest. A number, not
       a derivation: width:auto reads the contents, and these contents change
       (the VND price loads late, the cart badge appears), so the pill moved. */
    width: 324px !important;
    flex: 0 0 auto !important; align-self: center !important;
    box-sizing: border-box !important;
    height: 58px !important;
    /* W2_FOOT_PARITY_V1 — symmetric 1rem, exactly the site's
       padding-left/right. The old 8px/18px sat the CTA off-centre. */
    border-radius: 999px !important;
    transform: translate3d(-50%, 0, 0) scale(var(--dock-scale, 1)) !important;
    transform-origin: 50% 50% !important;
    background:
      radial-gradient(120% 150% at 50% 42%, transparent 48%, rgba(0,0,0,0.03) 82%, rgba(0,0,0,0.05) 100%),
      linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.022) 48%, rgba(255,255,255,0.04) 100%) !important;
    border: 1px solid rgba(255,255,255,0.34) !important;
    -webkit-backdrop-filter: blur(2.8px) saturate(1.5) brightness(1.07) contrast(1.1) !important;
    backdrop-filter: blur(2.8px) saturate(1.5) brightness(1.07) contrast(1.1) !important;
    box-shadow:
      0 10px 30px rgba(0,0,0,0.12),
      0 2px 8px rgba(0,0,0,0.06),
      inset 0 1px 0 rgba(255,255,255,0.72),
      inset 0 -1px 0 rgba(0,0,0,0.07),
      inset 1px 0 0 rgba(120,190,255,0.16),
      inset -1px 0 0 rgba(255,150,220,0.12) !important;
  }html body .w2-foot .w2-foot-actions > *,
  html.w2-dark body .w2-foot .w2-foot-actions > * { position: relative !important; z-index: 1 !important; }/* keep the CTA/price compact so content fits the 58px shell (site parity) */ html body .w2-foot .w2-foot-actions .w2-foot-cta,
  html.w2-dark body .w2-foot .w2-foot-actions .w2-foot-cta {
    padding: 10px 12px !important; min-height: 0 !important; font-size: 16px !important;
  }html body .w2-foot .w2-foot-usd,
  html.w2-dark body .w2-foot .w2-foot-usd { font-size: 22px !important; line-height: 1 !important; }html body .w2-foot .w2-foot-gbt,
  html.w2-dark body .w2-foot .w2-foot-gbt { font-size: 12px !important; line-height: 1 !important; margin-top: 2px !important; }

  /* moving specular glint (scroll-driven via w2footglass.js) */
  html body .w2-foot .w2-foot-actions::before {
    content: "" !important; position: absolute !important; inset: 0 !important;
    border-radius: inherit !important; pointer-events: none !important; z-index: 0 !important;
    mix-blend-mode: screen !important; opacity: var(--glass-glint-opacity, 0.28) !important;
    background:
      radial-gradient(80px 30px at var(--glass-glint-x, 32%) 4%, rgba(255,255,255,0.50), rgba(255,255,255,0.14) 34%, transparent 72%),
      linear-gradient(112deg, transparent 22%, rgba(255,255,255,0.10) 44%, rgba(255,255,255,0.26) 50%, rgba(255,255,255,0.06) 57%, transparent 76%) !important;
  }/* cool caustic under the pill,
  fades a touch as it shrinks */ html body .w2-foot .w2-foot-actions::after {
    content: "" !important; position: absolute !important; left: 8% !important; right: 8% !important;
    bottom: -3px !important; height: 16px !important; border-radius: 999px !important;
    pointer-events: none !important; z-index: 0 !important; filter: blur(2px) !important; mix-blend-mode: screen !important;
    background: radial-gradient(60% 130% at 50% 100%, rgba(255,255,255,0.16), rgba(120,190,255,0.08) 36%, rgba(255,150,220,0.05) 58%, transparent 80%) !important;
    opacity: calc(0.30 - var(--dock-progress, 0) * 0.08) !important;
  }

/* W2_FOOTONE_V1 background deleted: never applied in any state */
  html body .w2-foot .w2-foot-actions .w2-foot-cta { background: none !important; border: 0 !important; box-shadow: none !important; }

  html.w2-dark body .w2-foot .w2-foot-actions .w2-foot-cta { color: #ffffff !important; }
  html.w2-dark body .w2-foot .w2-foot-usd { color: #ffffff !important; }
  html:not(.w2-dark) body .w2-foot .w2-foot-actions .w2-foot-cta { color: #111111 !important; }
  html:not(.w2-dark) body .w2-foot .w2-foot-usd { color: #111111 !important; }
  html body .w2-foot .w2-foot-gbt { color: var(--w2-dong) !important; }
  /* P38_DOCK_LAYOUT_ONE_FILE_V1 layout, moved here from w2-merged.css so one file owns the
     whole dock. overflow:hidden is deliberate: the pill is a fixed 324px and a
     long label must clip, never widen it. */
  html body .w2-foot .w2-foot-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    overflow: hidden !important;
    cursor: pointer;
  }

  /* P37_DOCK_CONSTANT_SIZE_V1 nothing inside may resize the pill. */
  html body .w2-foot .w2-foot-actions .w2-foot-cta {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* the cart badge sat in flow: arriving in the cart widened the button by
     its own ~25px and the whole dock with it. Out of flow now. */
  /* W2BADGEONPRICE_260810 the phone rule for the button's ::after is DELETED with the
     pseudo-element it positioned. A rule that can never match is how a
     reader later concludes the badge still lives on the button. */

  html body .w2-foot .w2-foot-actions .w2-foot-price {
    flex: 0 0 auto !important;
  }

  /* P35_DOCK_PRICE_WIDTH_V1 reserve the price column's final width. The VND line is an
     em-dash until the FX rate arrives; with width:auto the dock grew when the
     number replaced it. The site's dock holds fixed-width icons and never
     changes width after the first paint - this is how we match that. */
  html body .w2-foot .w2-foot-gbt {
    min-width: 9ch !important;
    text-align: right !important;
    display: block !important;
  }
  html body .w2-foot .w2-foot-usd {
    min-width: 4ch !important;
    text-align: right !important;
    display: block !important;
  }


  @media (prefers-reduced-motion: reduce) {
    html body .w2-foot .w2-foot-actions { transform: none !important; }
    html body .w2-foot .w2-foot-actions::before { opacity: 0.28 !important; }
  }
}

/* W2_DOCK_KB_HIDE_V1 — fade the dock out while typing OUTSIDE it (set by w2footglass.js) */
body.w2-kb-hidefoot .w2-foot {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .18s ease !important;
}/* W2_FOOT_PARITY_V1 — the dock is built by JS after `defer` and nothing reserved its box,
  so the page painted without it and then reflowed. This holds the space from the first frame: no jump,
  no flash. */ html body .w2-foot,
  html.w2-dark body .w2-foot {
    min-height: calc(58px + max(10px, env(safe-area-inset-bottom))) !important;
  }


/* ===================== W2RAILDOCK_V1 ===========================
   WEB (>=768px) dock is frameless: the plate under the checkout row is gone,
   the white CTA and the price float straight on the stage. Loaded after
   w2-merged.css, same specificity shape as the rules it supersedes:
     html body .w2-foot .w2-foot-actions      (background:#0a0a0a)
     html.w2-dark body .w2-foot .w2-foot-actions   (rgba(255,255,255,.06))
     .bottom                                  (background:#fff + border-top)
   Mobile (<=639.98px) keeps the glass pill above -- untouched.
   ============================================================== */
@media (min-width: 768px) {html body .w2-foot .w2-foot-actions,
  html.w2-dark body .w2-foot .w2-foot-actions,
  html:not(.w2-dark) body .w2-foot .w2-foot-actions {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }html body .bottom,
  html.w2-dark body .bottom,
  html:not(.w2-dark) body .bottom {
    background: transparent !important;
    border-top: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}


/* ===================== W2CONTRAST_V1 LIGHT DOCK ================
   W2RAILDOCK_V1 took the plate away; the CTA ink is hard-coded #ffffff in
   w2-merged.css and was only readable because that plate was black. Dark theme
   already had a white-pill rule, light theme had no mirror -- so Add to cart
   went white on white. The button becomes the only surface, as it should be in
   a frameless dock. Web only; mobile keeps the glass pill.
   ============================================================== */
/* ═══ W2_CTAPILL_V1 — THE SHAPE OF THE CTA, STATED ONCE ═══════════════
   Both themes, every width. The button is a pill like the header rail, the
   product tabs and the word chips; it was the one control on the page still
   shaped like a box. Radius and padding are NOT repeated in the theme rules
   below — that repetition is exactly what let the dark button drift to 14px
   while the light one was 999px. */
html body .w2-foot .w2-foot-actions .w2-foot-cta{
  border-radius: 999px !important;
  padding: 16px 22px !important;
  box-shadow: none !important;
}

/* ═══ W2_CTAPILL_V1 — and its COLOUR, which is the only thing a theme changes ═══
   The dark half moved here from w2-merged.css so the two halves can be read
   side by side. Kept web-only, as it was: on a phone the glass pill owns the
   dock and the CTA is transparent inside it. */
@media (min-width: 768px) {
  html.w2-dark body .w2-foot .w2-foot-actions .w2-foot-cta{
    background: #FFFFFF !important;
    color: #0A0A0A !important;
    border: 1px solid #FFFFFF !important;
  }
  html.w2-dark body .w2-foot .w2-foot-actions .w2-foot-cta:active{
    background: #ECECEC !important;
  }
  html:not(.w2-dark) body .w2-foot .w2-foot-actions .w2-foot-cta{
    background: #0A0A0A !important;
    color: #FFFFFF !important;
    border: 1px solid #0A0A0A !important;
  }
  html:not(.w2-dark) body .w2-foot .w2-foot-actions .w2-foot-cta:active{
    background: #262626 !important;
  }
  html:not(.w2-dark) body .w2-foot .w2-foot-actions .w2-foot-usd{
    color: #0A0A0A !important;
  }
}/* W2_ONECO_V1 — the buy pill stops breaking in two. .w2-foot-cta is flex:1 1 0 beside a price block at flex:0 0 auto,
  with padding:16px 22px from the rule above. The price never yields,
  the button takes what is left,
  and the label wraps. Nothing about that is locale specific: "Add to cart",
  "Thêm vào giỏ" and "В корзину" all break once the price is wide enough. So the label never breaks,
  the price yields before the label does,
  and the padding stops being a fixed 22px on a narrow screen. The last resort is an ellipsis,
  not a second line — a clipped word still reads as one button,
  two lines read as two. */ html body .w2-foot .w2-foot-actions .w2-foot-cta {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body .w2-foot .w2-foot-actions .w2-foot-price{
  flex: 0 1 auto !important;
  min-width: 0 !important;
}html body .w2-foot .w2-foot-actions .w2-foot-usd,
  html body .w2-foot .w2-foot-actions .w2-foot-gbt {
  white-space: nowrap !important;
}
@media (max-width: 430px){html body .w2-foot .w2-foot-actions .w2-foot-cta,
  html:not(.w2-dark) body .w2-foot .w2-foot-actions .w2-foot-cta {
    padding-left: 14px !important;
    /* W2BADGEGAP_260810 14px was narrower than the badge, so it stood on the
       label. This is the gap between the label and the price. */
    padding-right: 32px !important;
  }
}
@media (max-width: 360px){html body .w2-foot .w2-foot-actions .w2-foot-cta,
  html:not(.w2-dark) body .w2-foot .w2-foot-actions .w2-foot-cta {
    padding-left: 10px !important;
    /* W2BADGEGAP_260810 same reservation on the narrowest phones. */
    padding-right: 32px !important;
    font-size: 15px !important;
  }
}.w2-foot-price{ flex-direction:row !important; align-items:center !important; }.w2-foot-price{ flex-direction:row !important; align-items:center !important; }

/* W2FOOTCLEAN_260810 — the cart count is an emoji after the word.

   THE MODEL, stated once. "Add to cart" then a small gap then the heart, like a
   character typed after the last letter. One rule, no breakpoints: the web and
   the phone show the same thing because there is nothing to differ.

   IN FLOW, ON PURPOSE. The heart is a flex item of the button, next to the
   label. Absolute positioning put it at the button's right EDGE, which on a wide
   desktop button is nowhere near the word — it read as belonging to the price.
   In flow it stays glued to the word at every width.

   THIS ONLY FITS BECAUSE THE ARROW LEFT. w2backpill.js is deleted, and its 52px
   of the fixed 324px dock went to the button. Before that, adding anything in
   flow pushed the label into ellipsis — which is exactly what happened, twice.
     button 214px - 14 - 14 = 186px of content
     cart glyph 18 + 7, label ~100, gap 10, heart 24 = 159px
   ~27px of slack, so the label is not clipped and the pair stays centred.

   THE HEART IS THE GARMENT'S OWN FILE — image_construct/heart/heart_red_filled,
   the same raster that prints on the shirt. Same shape, same red, because it is
   the same asset and not a vector that resembles it. `contain`, never cropped. */

/* the cart glyph is a flex item now; its trailing margin is the word's lead-in */
/* W2FOOTCLEAN_260810 — the cart count is an emoji after the word.

   THE MODEL, stated once. "Add to cart" then a small gap then the heart, like a
   character typed after the last letter. One rule, no breakpoints: the web and
   the phone show the same thing because there is nothing to differ.

   IN FLOW, ON PURPOSE. The heart is a flex item of the button, next to the
   label. Absolute positioning put it at the button's right EDGE, which on a wide
   desktop button is nowhere near the word — it read as belonging to the price.
   In flow it stays glued to the word at every width.

   THIS ONLY FITS BECAUSE THE ARROW LEFT. w2backpill.js is deleted, and its 52px
   of the fixed 324px dock went to the button. Before that, adding anything in
   flow pushed the label into ellipsis — which is exactly what happened, twice.
     button 214px - 14 - 14 = 186px of content
     cart glyph 18 + 7, label ~100, gap 10, heart 24 = 159px
   ~27px of slack, so the label is not clipped and the pair stays centred.

   THE HEART IS THE GARMENT'S OWN FILE — image_construct/heart/heart_red_filled,
   the same raster that prints on the shirt. Same shape, same red, because it is
   the same asset and not a vector that resembles it. `contain`, never cropped. */

/* the cart glyph is a flex item now; its trailing margin is the word's lead-in */
/* W2FOOTCLEAN_260810 — the cart count is an emoji after the word.

   THE MODEL, stated once. "Add to cart" then a small gap then the heart, like a
   character typed after the last letter. One rule, no breakpoints: the web and
   the phone show the same thing because there is nothing to differ.

   IN FLOW, ON PURPOSE. The heart is a flex item of the button, next to the
   label. Absolute positioning put it at the button's right EDGE, which on a wide
   desktop button is nowhere near the word — it read as belonging to the price.
   In flow it stays glued to the word at every width.

   THIS ONLY FITS BECAUSE THE ARROW LEFT. w2backpill.js is deleted, and its 52px
   of the fixed 324px dock went to the button. Before that, adding anything in
   flow pushed the label into ellipsis — which is exactly what happened, twice.
     button 214px - 14 - 14 = 186px of content
     cart glyph 18 + 7, label ~100, gap 10, heart 24 = 159px
   ~27px of slack, so the label is not clipped and the pair stays centred.

   THE HEART IS THE GARMENT'S OWN FILE — image_construct/heart/heart_red_filled,
   the same raster that prints on the shirt. Same shape, same red, because it is
   the same asset and not a vector that resembles it. `contain`, never cropped. */

/* the cart glyph is a flex item now; its trailing margin is the word's lead-in */

/* W2FOOTCLEAN_260810 — the cart count is an emoji after the word.

   THE MODEL, stated once. "Add to cart" then a small gap then the heart, like a
   character typed after the last letter. One rule, no breakpoints: the web and
   the phone show the same thing because there is nothing to differ.

   IN FLOW, ON PURPOSE. The heart is a flex item of the button, next to the
   label. Absolute positioning put it at the button's right EDGE, which on a wide
   desktop button is nowhere near the word — it read as belonging to the price.
   In flow it stays glued to the word at every width.

   THIS ONLY FITS BECAUSE THE ARROW LEFT. w2backpill.js is deleted, and its 52px
   of the fixed 324px dock went to the button. Before that, adding anything in
   flow pushed the label into ellipsis — which is exactly what happened, twice.
     button 214px - 14 - 14 = 186px of content
     cart glyph 18 + 7, label ~100, gap 10, heart 24 = 159px
   ~27px of slack, so the label is not clipped and the pair stays centred.

   THE HEART IS THE GARMENT'S OWN FILE — image_construct/heart/heart_red_filled,
   the same raster that prints on the shirt. Same shape, same red, because it is
   the same asset and not a vector that resembles it. `contain`, never cropped. */

/* the cart glyph is a flex item now; its trailing margin is the word's lead-in */
.w2-foot-cta::before{ margin-right:7px !important; }

/* W2FOOTCLEAN_260810 — the cart count is an emoji after the word.

   THE MODEL, stated once. "Add to cart" then a small gap then the heart, like a
   character typed after the last letter. One rule, no breakpoints: the web and
   the phone show the same thing because there is nothing to differ.

   IN FLOW, ON PURPOSE. The heart is a flex item of the button, next to the
   label. Absolute positioning put it at the button's right EDGE, which on a wide
   desktop button is nowhere near the word — it read as belonging to the price.
   In flow it stays glued to the word at every width.

   THIS ONLY FITS BECAUSE THE ARROW LEFT. w2backpill.js is deleted, and its 52px
   of the fixed 324px dock went to the button. Before that, adding anything in
   flow pushed the label into ellipsis — which is exactly what happened, twice.
     button 214px - 14 - 14 = 186px of content
     cart glyph 18 + 7, label ~100, gap 10, heart 24 = 159px
   ~27px of slack, so the label is not clipped and the pair stays centred.

   THE HEART IS THE GARMENT'S OWN FILE — image_construct/heart/heart_red_filled,
   the same raster that prints on the shirt. Same shape, same red, because it is
   the same asset and not a vector that resembles it. `contain`, never cropped. */

/* the cart glyph is a flex item now; its trailing margin is the word's lead-in.
   Written with the full selector chain so it can be found and removed again
   without a pattern that also matches the bundle's own glyph rule — which is
   what deleted the shopping cart once. */

/* W2FOOTCLEAN_260810 — the cart count is an emoji after the word.

   THE MODEL, stated once. "Add to cart" then a small gap then the heart, like a
   character typed after the last letter. One rule, no breakpoints: the web and
   the phone show the same thing because there is nothing to differ.

   IN FLOW, ON PURPOSE. The heart is a flex item of the button, next to the
   label. Absolute positioning put it at the button's right EDGE, which on a wide
   desktop button is nowhere near the word — it read as belonging to the price.
   In flow it stays glued to the word at every width.

   THIS ONLY FITS BECAUSE THE ARROW LEFT. w2backpill.js is deleted, and its 52px
   of the fixed 324px dock went to the button. Before that, adding anything in
   flow pushed the label into ellipsis — which is exactly what happened, twice.
     button 214px - 14 - 14 = 186px of content
     cart glyph 18 + 7, label ~100, gap 10, heart 24 = 159px
   ~27px of slack, so the label is not clipped and the pair stays centred.

   THE HEART IS THE GARMENT'S OWN FILE — image_construct/heart/heart_red_filled,
   the same raster that prints on the shirt. Same shape, same red, because it is
   the same asset and not a vector that resembles it. `contain`, never cropped. */

/* the cart glyph is a flex item now; its trailing margin is the word's lead-in.
   Written with the full selector chain so it can be found and removed again
   without a pattern that also matches the bundle's own glyph rule — which is
   what deleted the shopping cart once. */
html body .w2-foot .w2-foot-actions .w2-foot-cta::before{ margin-right:7px !important; }

.w2-foot-cta{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding-left:14px !important;
  padding-right:14px !important;
  /* THE CLIP MOVES UP ONE LEVEL. The button carried overflow:hidden, and
     overflow clips at the PADDING box — so the heart, which hangs to the right
     on a negative margin, had its right half cut off exactly at the button's
     edge. That is what looked like something covering it.
     Removing the clip here loses nothing: .w2-foot-actions is the fixed 324px
     pill and it already carries overflow:hidden of its own (w2footglass, the
     P38 layout block). A label too long for the dock is still contained — by
     the pill instead of by the button. The heart lives inside the pill, so it
     stays whole.
     What is given up is the ellipsis on the label: an over-long translation
     will now be cut rather than trail into "…". Worth saying out loud, and the
     English, Russian and Vietnamese labels all fit today. */
}

/* SPECIFICITY, not just !important. The clip is declared as
     html body .w2-foot .w2-foot-actions .w2-foot-cta{overflow:hidden!important}
   which is 0-4-2. A bare .w2-foot-cta{overflow:visible!important} is 0-1-0 and
   LOSES: among !important declarations the more specific one wins. That is why
   the previous release changed nothing on screen. Matched selector, so it is
   the later rule that decides. */
html body .w2-foot .w2-foot-actions .w2-foot-cta{
  overflow:visible !important;
  text-overflow:clip !important;
}

.w2-foot-cta[data-w2c-count]:not([data-w2c-count="0"])::after{
  content:attr(data-w2c-count);
  position:static;
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; flex:0 0 auto;
  /* NET-ZERO WIDTH. The button centres its whole content, so a heart that adds
     width re-centres the group and drags the cart glyph and the label left —
     which is the shift that kept coming back. The left margin is the gap after
     the word; the negative right margin gives back exactly what the heart and
     that gap took (10 + 24 = 34), so the flex line measures the same with a
     full cart as with an empty one. The label does not move at all; the heart
     simply appears after it. It has room to hang there because the arrow left
     and padding-right:14px sits under it. */
  margin-left:10px;
  margin-right:-34px;
  background:url("/miniapp/construct/image_construct/heart/heart_red_filled.png") center/contain no-repeat;
  color:#fff; font-size:10px; font-weight:800; line-height:1;
  /* the digit rides the lobes, not the point */
  padding-bottom:4px; box-sizing:border-box;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  pointer-events:none;
}