/*
 * Tư-Trà Beverage: the cart's quantity stepper, ported from Tư-Trà Add To
 * Cart v1.2.0 (tt-element-wc-atc.php): the bar and its perspective press
 * (lines 660-671, rescoped from .tt-el-wa-wrap to .tt-pl-bev-stepper,
 * colours on the colorway variables, the cart's sans font) and the
 * odometer (lines 684-814, verbatim apart from a decorative banner line,
 * removed as in the element's v1.3.0). Sized for the cart line below.
 */
.tt-pl-bev-stepper .tt-el-wa-stage{ perspective: var(--tt-el-wa-perspective, 200px); perspective-origin: 50% 50%; margin:0 0 var(--tt-el-wa-gap, var(--space-s, 1rem)); }
.tt-pl-bev-stepper .tt-el-wa-qty{ --tt-el-wa-ry:0deg; --tt-el-wa-tz:0px; --tt-el-wa-ox:50%; width:100%; box-sizing:border-box; margin:0; padding:0 var(--tt-el-wa-qty-inset, 0); height: var(--tt-el-wa-qty-h, var(--space-xl, 3rem)); background: var(--tt-el-wa-qty-bg, rgba(var(--color-the-rgb, 98, 112, 77), .2)); border-radius: var(--tt-el-wa-radius, var(--space-3xs, 2px)); display:flex; align-items:center; justify-content:space-between; position:relative; transform-origin: var(--tt-el-wa-ox) 50%; transform: rotateY(var(--tt-el-wa-ry)) translateZ(var(--tt-el-wa-tz)); transition: transform .55s cubic-bezier(.2,1.6,.35,1); touch-action: manipulation; user-select:none; -webkit-user-select:none; }
.tt-pl-bev-stepper .tt-el-wa-qty.is-pressed{ transition: transform .18s cubic-bezier(.32,.72,0,1); }
@media (prefers-reduced-motion: reduce){ .tt-pl-bev-stepper .tt-el-wa-qty,.tt-pl-bev-stepper .tt-el-wa-qty.is-pressed{ transition-duration:.01s; } }
.tt-pl-bev-stepper .tt-el-wa-qty .tt-el-wa-step{ appearance:none; -webkit-appearance:none; background:transparent; border:0; border-radius:0; box-shadow:none; margin:0; padding:0; flex:0 0 auto; width: var(--tt-el-wa-qty-h, var(--space-xl, 3rem)); min-width:0; height:100%; display:flex; align-items:center; justify-content:center; font-family:var(--tt-pl-bev-j-sans); font-weight: var(--tt-el-wa-step-weight, 500); font-size: var(--tt-el-wa-step-size, var(--step-0, 1rem)); line-height:1; color: var(--tt-el-wa-step-ink, rgba(35, 31, 32, .6)); cursor:pointer; -webkit-tap-highlight-color: transparent; transition: opacity .15s ease; }
.tt-pl-bev-stepper .tt-el-wa-qty .tt-el-wa-step:hover{ opacity:.8; }
.tt-pl-bev-stepper .tt-el-wa-qty .tt-el-wa-step:active{ opacity:.5; }
.tt-pl-bev-stepper .tt-el-wa-qty .tt-el-wa-field{ position:relative; flex:1 1 auto; min-width:0; height:100%; display:flex; align-items:center; justify-content:center; }
.tt-pl-bev-stepper .tt-el-wa-qty .tt-el-wa-input{ -webkit-appearance:none; -moz-appearance:textfield; appearance:none; width:6ch; min-width:0; height:100%; text-align:center; background:transparent; border:0; border-radius:0; box-shadow:none; font-style:normal; font-weight:500; font-size: var(--step-0, 1rem); line-height:1; font-family:var(--tt-pl-bev-j-sans); color:transparent; caret-color: var(--tt-el-wa-qty-ink, rgb(35, 31, 32)); font-variant-numeric: tabular-nums; -webkit-font-smoothing:antialiased; outline:0; padding:0; margin:0; }
.tt-pl-bev-stepper .tt-el-wa-qty .tt-el-wa-input:focus{ outline:0; box-shadow:none; border:0; }
.tt-pl-bev-stepper .tt-el-wa-input::-webkit-outer-spin-button,.tt-pl-bev-stepper .tt-el-wa-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.tt-pl-bev-stepper .tt-el-wa-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:1; overflow:hidden; color: var(--tt-el-wa-qty-ink, rgb(35, 31, 32)); font-weight:500; font-size: var(--step-0, 1rem); line-height:1; font-family:var(--tt-pl-bev-j-sans); font-variant-numeric: tabular-nums; }

/* Cart size: a compact bar beside the line total. */
.tt-pl-bev-stepper { --tt-el-wa-qty-h: 2.5rem; --tt-el-wa-step-size: 1.0625rem; width: 8.5rem; flex: 0 0 auto; }
.tt-pl-bev-stepper .tt-el-wa-stage { margin: 0; }
.tt-pl-bev-stepper .tt-el-wa-qty .tt-el-wa-input, .tt-pl-bev-stepper .tt-el-wa-overlay { font-size: 16px; }
.tt-el-wc-ca-line.is-busy .tt-pl-bev-stepper { opacity: 1; }

@property --tt-el-odo-m-top    { syntax: '<percentage>'; inherits: false; initial-value: 0%;   }
@property --tt-el-odo-m-bottom { syntax: '<percentage>'; inherits: false; initial-value: 100%; }

.tt-el-odo{
  font-variant-numeric: lining-nums;
  --tt-el-odo-sign: 1;
  --tt-el-odo-h: 1.6em;
}
.tt-el-odo-digit{
  display: flex; align-items: center; justify-content: center; line-height: 1;
}

.tt-el-odo[data-mode="columns"]{
  position: relative;
  display: inline-block;
  height: var(--tt-el-odo-h);
  line-height: var(--tt-el-odo-h);
  white-space: nowrap;
  vertical-align: middle;
  font-kerning: none;
  --tt-el-odo-progress: 0;
}
.tt-el-odo[data-mode="columns"][data-anchor="center"]{ width: 100%; }

/* a character cell. width = the glyph's measured advance; a
   --tt-el-odo-h line box puts every cell on the same baseline. The
   glyph is aligned to the SAME edge the cell is anchored to,
   so the glyph's position depends only on the anchor edge and
   the cell's transform — NEVER on --tt-el-odo-cell-w. */
.tt-el-odo-col{
  position: absolute; top: 0;
  height: var(--tt-el-odo-h);
  width: var(--tt-el-odo-cell-w);
  line-height: var(--tt-el-odo-h);
}
.tt-el-odo[data-anchor="right"]  .tt-el-odo-col{ right: 0; text-align: right; }
.tt-el-odo[data-anchor="center"] .tt-el-odo-col{ left: 0;  text-align: left;  }

/* MOVING cell — slide from -> to on the shared progress var.
   FROZEN cells (unchanged & unmoved) keep the static inline
   transform JS wrote at commit; no rule here touches them, so
   they cannot drift while other cells animate. */
.tt-el-odo[data-anchor="right"] .tt-el-odo-col--moving{
  transform: translateX(calc(-1 *
    (var(--tt-el-odo-from) + (var(--tt-el-odo-to) - var(--tt-el-odo-from)) * var(--tt-el-odo-progress))));
}
.tt-el-odo[data-anchor="center"] .tt-el-odo-col--moving{
  transform: translateX(calc(
    var(--tt-el-odo-from) + (var(--tt-el-odo-to) - var(--tt-el-odo-from)) * var(--tt-el-odo-progress)));
}

/* ANIM cell — value changed; the glyph rolls vertically.
   Independent of whether the cell also slides horizontally. */
.tt-el-odo-col--anim{
  overflow: hidden;
  --tt-el-odo-mag: clamp(0,
    calc((var(--tt-el-odo-progress) - var(--tt-el-odo-i) * var(--tt-el-odo-stagger)) / var(--tt-el-odo-window)),
    1);
  --tt-el-odo-mask: calc(2 * min(var(--tt-el-odo-mag), calc(1 - var(--tt-el-odo-mag))));
  --tt-el-odo-m-top:    calc(24% * var(--tt-el-odo-mask));
  --tt-el-odo-m-bottom: calc(100% - 24% * var(--tt-el-odo-mask));
  mask-image: linear-gradient(to bottom,
    transparent 0%, #000 var(--tt-el-odo-m-top), #000 var(--tt-el-odo-m-bottom), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, #000 var(--tt-el-odo-m-top), #000 var(--tt-el-odo-m-bottom), transparent 100%);
}
.tt-el-odo-col--anim .tt-el-odo-digit{
  position: absolute; inset: 0;
  display: block;
  line-height: var(--tt-el-odo-h);
  text-align: inherit;
}
.tt-el-odo-col--anim .tt-el-odo-digit.primary{
  transform: translateY(calc(var(--tt-el-odo-mag) * -100% * var(--tt-el-odo-sign)));
}
.tt-el-odo-col--anim .tt-el-odo-digit.secondary{
  transform: translateY(calc((1 - var(--tt-el-odo-mag)) * 100% * var(--tt-el-odo-sign)));
}

/*
   BLOCK-ROLL — word-level animation for option labels.

   Sibling utility to the columns engine above. The columns
   engine animates per-character with frozen unchanged cells;
   this one rolls the ENTIRE word as one block, used by the
   accordion's .tt-el-bo-current label so that picking a new
   option does a full vertical roll from old label to new.

   Direction is decided in JS (rollTo's `sign` argument) and
   applied as inline transforms on each cell frame-by-frame
   (v1.2.6) — NOT via a CSS variable:
     sign +1 = new option is LATER in the list  → old slides up,
                                                   new from BELOW
     sign -1 = new option is EARLIER in the list → old slides down,
                                                   new from ABOVE

   Width also transitions in JS (rollTo's three phases: expand →
   roll → shrink) so changing from "TIÊU CHUẨN" to "REGULAR"
   doesn't jump the chevron sideways. The two cells are
   right-anchored (CSS below) so the right edge of the label
   stays glued to the chevron throughout. */
.tt-el-odo[data-mode="block"]{
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  height: var(--tt-el-odo-h);
  line-height: var(--tt-el-odo-h);
  white-space: nowrap;
  /* Width transitions and cell transforms are both set inline by
     rollTo (v1.2.6) — no CSS-variable-driven transform here. See
     the v1.2.6 changelog: the CSS-var approach (--tt-el-odo-progress
     + --tt-el-odo-sign in calc) was replaced by direct inline
     transforms on each cell because iOS Safari was late to resolve
     the parent var into the children's calc, producing a transient
     translateY(0) overlap. */
}
.tt-el-odo-block{
  display: block;
  line-height: var(--tt-el-odo-h);
  white-space: nowrap;
}
/* During a roll, both cells are absolutely positioned and
   right-anchored so the right edge stays glued to the chevron.
   Their transform is set INLINE by rollTo frame-by-frame (v1.2.6),
   NOT here — do not add a transform rule keyed on
   --tt-el-odo-progress, it reintroduces the iOS overlap bug. */
.tt-el-odo[data-mode="block"] .tt-el-odo-block--primary,
.tt-el-odo[data-mode="block"] .tt-el-odo-block--secondary{
  position: absolute; top: 0; right: 0;
}