/* =============================================================================
   OptiCheckout — marketing site: interactive pieces
   1) Hero video preview (poster + play) and its lightbox modal
   2) Live, coded checkout facsimiles (Glide one-page, Arc multi-step)
   Self-contained. Reuses the design tokens from style.css. Namespaced with
   .hv- (hero video), .vm- (video modal) and .co- (checkout facsimile) so it
   can never collide with the real plugin's .wccp-* classes.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. HERO — video preview (poster image + play button → modal)
   --------------------------------------------------------------------------- */
.hv {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
}
.hv img { display: block; width: 100%; }
/* darkening scrim so the play button and label always read */
.hv::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 50% 46%, rgba(6,24,18,.34), rgba(6,24,18,.10) 55%, transparent 78%),
    linear-gradient(180deg, transparent 55%, rgba(6,24,18,.28));
  opacity: .9;
  transition: opacity .25s var(--ease);
  pointer-events: none;
}
.hv:hover::after { opacity: 1; }

.hv__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.94);
  color: var(--accent-ink);
  box-shadow: 0 18px 44px -14px rgba(6,24,18,.6), 0 4px 12px rgba(6,24,18,.3);
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.hv__play svg { width: 34px; height: 34px; margin-left: 4px; } /* nudge the triangle optically centre */
.hv:hover .hv__play { transform: translate(-50%, -50%) scale(1.06); background: #fff; }
/* soft pulsing halo — pauses for reduced-motion */
.hv__play::before {
  content: "";
  position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.6);
  animation: hvpulse 2.6s var(--ease) infinite;
}
@keyframes hvpulse {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.hv__label {
  position: absolute; left: 18px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: #fff;
  background: rgba(9,26,20,.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.16);
  padding: 8px 14px; border-radius: 100px;
}
.hv__label svg { width: 15px; height: 15px; }
.hv__dur {
  position: absolute; right: 16px; bottom: 16px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: #fff;
  background: rgba(9,26,20,.6);
  border: 1px solid rgba(255,255,255,.16);
  padding: 5px 11px; border-radius: 7px;
}
@media (max-width: 620px) {
  .hv__play { width: 68px; height: 68px; }
  .hv__play svg { width: 26px; height: 26px; }
  .hv__label { font-size: 12.5px; left: 12px; bottom: 12px; }
  .hv__dur { display: none; }
}

/* ---- video modal (lightbox) ---- */
.vm {
  position: fixed; inset: 0; z-index: 100;
  display: none; place-items: center;
  padding: 28px;
  background: rgba(7,18,14,.72);
  backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .22s var(--ease);
}
.vm.open { display: grid; opacity: 1; }
.vm__box {
  position: relative;
  width: min(960px, 100%);
  background: #0d1a16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: translateY(10px) scale(.98);
  transition: transform .28s var(--ease);
}
.vm.open .vm__box { transform: none; }
.vm__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  text-align: center;
  padding: 32px;
  color: #dfeae4;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(18,148,108,.22), transparent 60%),
    #0d1a16;
}
.vm__badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-2);
  border: 1px solid rgba(18,148,108,.4);
  background: rgba(18,148,108,.12);
  padding: 6px 13px; border-radius: 100px;
  margin-bottom: 20px;
}
.vm__frame h3 { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin: 0 0 10px; }
.vm__frame p { color: #a9bcb4; max-width: 44ch; margin: 0 auto; font-size: 15.5px; }
.vm__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2);
  transition: background .18s var(--ease);
}
.vm__close:hover { background: rgba(255,255,255,.22); }
.vm__close svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------------------
   2. INTERACTIVE CHECKOUT FACSIMILE
   Lives inside .tpl-stage for glide/arc. .co-demo is the whole apparatus:
   a toolbar (viewport + reset) above the browser frame, and the checkout
   itself inside a scroll viewport.
   --------------------------------------------------------------------------- */
.co-demo { --co-accent: var(--accent); --co-accent-ink: var(--accent-ink); }

.co-demo__toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.co-demo__hint {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--accent-ink);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  padding: 6px 13px; border-radius: 100px;
}
.co-demo__hint svg { width: 15px; height: 15px; }
.co-demo__spacer { flex: 1; }

/* segmented viewport switch */
.co-seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 100px; padding: 3px; }
.co-seg button {
  font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer;
  border: 0; background: none; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 100px; transition: all .16s var(--ease);
}
.co-seg button svg { width: 15px; height: 15px; }
.co-seg button.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.co-reset {
  font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2);
  padding: 7px 13px; border-radius: 100px; transition: all .16s var(--ease);
}
.co-reset:hover { color: var(--accent-ink); border-color: var(--accent-line); }
.co-reset svg { width: 14px; height: 14px; }

/* the browser frame's scroll viewport */
.co-view {
  height: 620px; overflow-y: auto; overflow-x: hidden;
  background: #f4f5f2;
  scroll-behavior: smooth;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.co-view::-webkit-scrollbar { width: 10px; }
.co-view::-webkit-scrollbar-thumb { background: #cfcdc0; border-radius: 10px; border: 3px solid #f4f5f2; }
/* phone width: constrain the checkout to a 400px column, centred on a rail */
.co-view.is-phone { background: #e9ebe6; padding: 22px 0; }
.co-view.is-phone .co { max-width: 400px; margin-inline: auto; box-shadow: var(--shadow); border-radius: 20px; overflow: hidden; }

/* ---- the checkout itself ---- */
.co { background: #f4f5f2; color: #1a2a24; }
.co-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 30px; background: #e9efec; border-bottom: 1px solid #dbe3df;
}
.co-top__brand { font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: #16241f; }
.co-secure {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--co-accent-ink);
  background: #fff; border: 1px solid #cfe0d8; border-radius: 100px; padding: 7px 14px;
}
.co-secure svg { width: 14px; height: 14px; }

.co-body { padding: 28px 30px 40px; }
.co-head h2 { font-size: 30px; letter-spacing: -.02em; margin: 0 0 6px; color: #14211c; }
.co-head p { font-size: 14.5px; color: #5c6a64; margin: 0 0 24px; }

.co-grid { display: grid; grid-template-columns: 1fr 340px; gap: 26px; align-items: start; }
.co-card {
  background: #fff; border: 1px solid #e7e4d9; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16,31,26,.04), 0 8px 24px -18px rgba(16,31,26,.18);
}
.co-main { padding: 26px 26px 28px; }

/* form primitives */
.co-field { margin-bottom: 16px; }
.co-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.co-label {
  display: block; font-size: 13px; font-weight: 600; color: #34413b; margin-bottom: 6px;
}
.co-label .req { color: #cf4b3e; margin-left: 2px; }
.co-label .opt { color: #8a938e; font-weight: 500; }
.co-input, .co-select {
  width: 100%; font-family: var(--font); font-size: 15px; color: #1a2a24;
  background: #fff; border: 1px solid #d8d4c7; border-radius: 10px;
  padding: 13px 14px; transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.co-input::placeholder { color: #9aa19c; }
.co-input:focus, .co-select:focus {
  outline: none; border-color: var(--co-accent);
  box-shadow: 0 0 0 3px rgba(15,122,90,.16);
}
.co-select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6a64' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px;
}
.co-check {
  display: flex; align-items: center; gap: 11px;
  font-size: 14px; color: #34413b; cursor: pointer;
  background: #f7f8f4; border: 1px solid #e7e4d9; border-radius: 10px; padding: 13px 14px;
}
.co-check input { width: 18px; height: 18px; accent-color: var(--co-accent); flex: none; }
.co-note { font-size: 13px; color: #6b756f; margin: -8px 0 14px; }

/* section / step headers */
.co-sec { margin-bottom: 26px; }
.co-sec:last-child { margin-bottom: 0; }
.co-sec__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.co-badge {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
  border: 2px solid var(--co-accent); color: var(--co-accent-ink); background: #fff;
}
.co-sec__title { font-size: 18px; font-weight: 700; color: #18271f; }
.co-sec__aux { margin-left: auto; font-size: 13.5px; color: #5c6a64; }
.co-sec__aux a { color: var(--co-accent-ink); font-weight: 600; }

/* ---- ARC progress rail ---- */
.co-rail {
  display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center;
  padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid #ece9de; gap: 6px;
}
.co-rail__step { display: inline-flex; align-items: center; gap: 10px; }
.co-rail__dot {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
  border: 2px solid #d5d1c4; color: #8a938e; background: #fff;
  transition: all .2s var(--ease);
}
.co-rail__lbl { font-size: 14.5px; font-weight: 600; color: #8a938e; transition: color .2s var(--ease); }
.co-rail__line { height: 2px; background: #e2dfd3; transition: background .3s var(--ease); }
.co-rail__step.is-active .co-rail__dot { border-color: var(--co-accent); color: var(--co-accent-ink); box-shadow: 0 0 0 4px rgba(15,122,90,.12); }
.co-rail__step.is-active .co-rail__lbl { color: #18271f; }
.co-rail__step.is-done .co-rail__dot { background: var(--co-accent); border-color: var(--co-accent); color: #fff; }
.co-rail__step.is-done .co-rail__lbl { color: #34413b; }
.co-rail__step.is-done ~ .co-rail__line { }
.co-rail__line.is-filled { background: var(--co-accent); }

/* ARC step panels */
.co-step { display: none; animation: cofade .3s var(--ease); }
.co-step.is-active { display: block; }
@keyframes cofade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.co-step h3 { font-size: 19px; margin: 0 0 16px; color: #18271f; }

/* shipping / payment option rows */
.co-opt {
  display: flex; align-items: center; gap: 13px; cursor: pointer;
  border: 1px solid #ddd9cc; border-radius: 11px; padding: 15px 16px; margin-bottom: 11px;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.co-opt:hover { border-color: var(--accent-line); }
.co-opt.is-sel { border-color: var(--co-accent); background: #f2fbf7; box-shadow: 0 0 0 1px var(--co-accent) inset; }
.co-opt__radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #c3c8c1; flex: none; display: grid; place-items: center; transition: border-color .16s; }
.co-opt.is-sel .co-opt__radio { border-color: var(--co-accent); }
.co-opt.is-sel .co-opt__radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--co-accent); }
.co-opt__main { flex: 1; }
.co-opt__t { font-size: 15px; font-weight: 600; color: #1c2a24; }
.co-opt__s { font-size: 13px; color: #6b756f; }
.co-opt__price { font-size: 15px; font-weight: 700; color: #1c2a24; }
.co-opt__logos { display: inline-flex; gap: 5px; }
.co-opt__logos i { width: 30px; height: 20px; border-radius: 4px; display: block; background: #eceae0; border: 1px solid #ded9cc; }

/* fake card input strip (payment step) */
.co-cardbox { margin-top: 6px; border: 1px solid #e0dccf; border-radius: 11px; overflow: hidden; }
.co-cardbox .co-input { border: 0; border-radius: 0; }
.co-cardbox__row { display: grid; grid-template-columns: 1fr 110px 100px; border-top: 1px solid #ebe8dd; }
.co-cardbox__row .co-input + .co-input { border-left: 1px solid #ebe8dd; }
.co-cardbox .co-input:focus { box-shadow: 0 0 0 2px rgba(15,122,90,.18) inset; }

/* step nav */
.co-nav { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.co-back {
  font-family: var(--font); font-size: 14.5px; font-weight: 600; cursor: pointer;
  background: none; border: 0; color: #5c6a64; display: inline-flex; align-items: center; gap: 6px;
}
.co-back:hover { color: #18271f; }
.co-back svg { width: 16px; height: 16px; }

/* primary CTA */
.co-cta {
  font-family: var(--font); font-size: 16px; font-weight: 700; cursor: pointer;
  width: 100%; border: 0; border-radius: 100px; padding: 16px 22px;
  background: var(--co-accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: 0 1px 2px rgba(11,91,67,.25), 0 10px 22px -10px rgba(11,91,67,.5);
  transition: background .18s var(--ease), transform .12s var(--ease);
}
.co-cta:hover { background: var(--accent-2); transform: translateY(-1px); }
.co-cta:active { transform: none; }
.co-cta svg { width: 18px; height: 18px; }
.co-nav .co-cta { width: auto; margin-left: auto; padding: 15px 26px; }
.co-trust { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: #6b756f; }
.co-trust svg { width: 15px; height: 15px; color: var(--co-accent); }

/* order-placed success overlay */
.co-done {
  display: none; text-align: center; padding: 40px 26px;
  animation: cofade .35s var(--ease);
}
.co-done.is-on { display: block; }
.co-done__mark {
  width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 18px;
  display: grid; place-items: center; background: var(--co-accent); color: #fff;
}
.co-done__mark svg { width: 34px; height: 34px; }
.co-done h3 { font-size: 21px; margin: 0 0 6px; color: #18271f; }
.co-done p { font-size: 14.5px; color: #5c6a64; margin: 0; }

/* ---- ORDER SUMMARY (shared) ---- */
.co-sum { padding: 22px; position: sticky; top: 16px; }
.co-sum__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.co-sum__head h3 { font-size: 17px; margin: 0; color: #18271f; }
.co-sum__count { font-size: 13px; color: #6b756f; }

/* free-shipping meter */
.co-fs { margin-bottom: 18px; }
.co-fs__t { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #34413b; margin-bottom: 8px; }
.co-fs__t svg { width: 17px; height: 17px; color: var(--co-accent); flex: none; }
.co-fs__t b { color: var(--co-accent-ink); }
.co-fs__bar { height: 7px; border-radius: 100px; background: #e7ede9; overflow: hidden; }
.co-fs__fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--accent-2), var(--co-accent)); width: 0; transition: width .4s var(--ease); }
.co-fs__meta { display: flex; justify-content: space-between; font-size: 12px; color: #79837d; margin-top: 6px; }
.co-fs.is-unlocked .co-fs__t { color: var(--co-accent-ink); font-weight: 600; }

/* line items */
.co-line { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid #eee9dc; }
.co-line:first-of-type { border-top: 0; }
.co-thumb {
  width: 52px; height: 52px; border-radius: 10px; flex: none; overflow: hidden;
  background: #eef1ec; box-shadow: inset 0 0 0 1px rgba(16,31,26,.06);
}
.co-thumb .p-art, .sc-item__thumb .p-art, .sc-bg__ph .p-art { display: block; width: 100%; height: 100%; }
.co-line__main { flex: 1; min-width: 0; }
.co-line__name { font-size: 14px; font-weight: 600; color: #22302a; margin-bottom: 3px; }
.co-line__opt { font-size: 12px; color: #8a938e; margin-bottom: 6px; }
.co-qty { display: inline-flex; align-items: center; border: 1px solid #ddd9cc; border-radius: 8px; overflow: hidden; }
.co-qty button {
  width: 28px; height: 28px; border: 0; background: #fff; cursor: pointer; color: var(--co-accent-ink);
  font-size: 16px; line-height: 1; display: grid; place-items: center; transition: background .14s;
}
.co-qty button:hover { background: #f2fbf7; }
.co-qty span { min-width: 30px; text-align: center; font-size: 13.5px; font-weight: 600; }
.co-line__price { font-size: 14px; font-weight: 700; color: #22302a; white-space: nowrap; }

/* coupon */
.co-coupon { border-top: 1px solid #eee9dc; padding-top: 14px; margin-top: 4px; }
.co-coupon__toggle {
  display: flex; align-items: center; gap: 9px; cursor: pointer; width: 100%;
  background: none; border: 0; font-family: var(--font); font-size: 14px; font-weight: 600;
  color: var(--co-accent-ink); padding: 0;
}
.co-coupon__toggle svg { width: 16px; height: 16px; }
.co-coupon__toggle .chev { margin-left: auto; transition: transform .2s var(--ease); }
.co-coupon.is-open .co-coupon__toggle .chev { transform: rotate(180deg); }
.co-coupon__body { display: none; gap: 8px; margin-top: 12px; }
.co-coupon.is-open .co-coupon__body { display: flex; }
.co-coupon__body .co-input { padding: 10px 12px; }
.co-coupon__apply {
  font-family: var(--font); font-size: 13.5px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--co-accent-ink);
  border-radius: 9px; padding: 0 16px; white-space: nowrap;
}
.co-coupon__msg { font-size: 12.5px; color: var(--co-accent-ink); margin-top: 8px; display: none; }
.co-coupon.is-applied .co-coupon__msg { display: block; }

/* totals */
.co-totals { border-top: 1px solid #eee9dc; margin-top: 14px; padding-top: 14px; }
.co-trow { display: flex; justify-content: space-between; font-size: 14px; color: #4a564f; margin-bottom: 9px; }
.co-trow--sale b { color: var(--co-accent-ink); }
.co-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; padding-top: 12px; border-top: 1px solid #eee9dc; }
.co-total__l { font-size: 16px; font-weight: 700; color: #18271f; }
.co-total__v { font-size: 24px; font-weight: 800; color: #14211c; letter-spacing: -.02em; }

/* ---- responsive collapse of the facsimile grid ---- */
.co-view.is-phone .co-grid,
.co-narrow .co-grid { grid-template-columns: 1fr; }
.co-view.is-phone .co-sum,
.co-narrow .co-sum { position: static; }
.co-view.is-phone .co-body { padding: 20px 16px 32px; }
.co-view.is-phone .co-top { padding: 15px 18px; }
.co-view.is-phone .co-rail__lbl { display: none; }
.co-view.is-phone .co-head h2 { font-size: 24px; }
/* phone: the section head's "Already have an account? Log in" aux has no room
   next to the title, so let it drop to its own line under the title. */
.co-view.is-phone .co-sec__head { flex-wrap: wrap; row-gap: 3px; }
.co-view.is-phone .co-sec__aux { margin-left: 42px; }
/* phone: the joined card strip is too tight for "Name on card | MM/YY | CVC" in
   one row (the name placeholder clips), so give the name its own full-width row. */
.co-view.is-phone .co-cardbox__row { grid-template-columns: 1fr 1fr; }
.co-view.is-phone .co-cardbox__row > .co-input:nth-child(1) {
  grid-column: 1 / -1; border-bottom: 1px solid #ebe8dd;
}
.co-view.is-phone .co-cardbox__row > .co-input:nth-child(2) { border-left: 0; }

/* stage layout for the interactive panel: media on top, caption below */
.tpl-stage--live { display: block; }
.tpl-stage--live .co-demo { margin-bottom: 22px; }
.tpl-live-desc { display: grid; grid-template-columns: auto 1fr; gap: 8px 22px; align-items: center; }
.tpl-live-desc__kind { grid-row: 1; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.tpl-live-desc h3 { grid-row: 2; grid-column: 1; font-size: 1.5rem; margin: 0; white-space: nowrap; }
.tpl-live-desc p { grid-row: 2; grid-column: 2; margin: 0; color: var(--ink-2); font-size: 15.5px; align-self: center; }
.tpl-live-desc .tpl-meta { grid-row: 3; grid-column: 1 / -1; margin-top: 4px; }
@media (max-width: 760px) {
  .tpl-live-desc { grid-template-columns: 1fr; }
  .tpl-live-desc h3 { grid-column: 1; white-space: normal; }
  .tpl-live-desc p { grid-column: 1; grid-row: auto; }
}

/* "Live" marker on interactive template tabs */
.tpl-tab .live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-2); margin-left: 7px; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(18,148,108,.5); animation: livedot 2s var(--ease) infinite;
}
.tpl-tab.active .live-dot { background: #7fe0bf; }
@keyframes livedot {
  0% { box-shadow: 0 0 0 0 rgba(18,148,108,.5); }
  70% { box-shadow: 0 0 0 6px rgba(18,148,108,0); }
  100% { box-shadow: 0 0 0 0 rgba(18,148,108,0); }
}

@media (max-width: 620px) {
  .co-view { height: 500px; }
  .co-body { padding: 20px 15px 30px; }
  .co-top { padding: 14px 16px; }
  .co-grid { grid-template-columns: 1fr; }
  .co-sum { position: static; }
  .co-head h2 { font-size: 24px; }
  .co-rail__lbl { display: none; }
  .co-sec__head { flex-wrap: wrap; row-gap: 3px; }
  .co-sec__aux { margin-left: 42px; }
  .co-cardbox__row { grid-template-columns: 1fr 1fr; }
  .co-cardbox__row > .co-input:nth-child(1) { grid-column: 1 / -1; border-bottom: 1px solid #ebe8dd; }
  .co-cardbox__row > .co-input:nth-child(2) { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hv__play::before, .tpl-tab .live-dot { animation: none; }
  .co-view { scroll-behavior: auto; }
  .co-step, .co-done, .vm, .vm__box { transition: none; animation: none; }
}

/* ==========================================================================
   SKELETON LOADERS — a faithful port of the real plugin's loading states.
   A soft diagonal sheen sweeps each placeholder bar; rows are STAGGERED via
   --row so the highlight reaches them in sequence (a living wave, not a flat
   pulse). Covers are opaque so real content never peeks, then fade to reveal.
   Three surfaces: order-summary (recalc + first paint), the form column
   (first paint), and the side-cart drawer (open / qty / FBT add).
   ========================================================================== */
.sk {
  display: block; background-color: var(--sk-base, #e6eae6);
  background-image: linear-gradient(100deg, transparent 22%, var(--sk-hi, #f5f8f5) 46%, var(--sk-hi, #f5f8f5) 54%, transparent 78%);
  background-size: 220% 100%; background-position: 150% 0; background-repeat: no-repeat;
  border-radius: 6px; height: 12px;
  animation: coSheen 1.2s ease-in-out infinite;
  animation-delay: calc(var(--row, 0) * 90ms);
}
@keyframes coSheen { 0% { background-position: 150% 0; } 60%, 100% { background-position: -50% 0; } }

/* ---- order-summary skeleton --------------------------------------------- */
.co-skel {
  position: absolute; inset: 0; z-index: 5; border-radius: 16px; padding: 22px;
  background: #fff; display: none; flex-direction: column; gap: 13px;
  --sk-base: #e6eae6; --sk-hi: #f5f8f5;
}
.co-sum.is-loading { position: relative !important; }
.co-sum.is-loading > .co-skel { display: flex; }
.co-sum.is-loading > :not(.co-skel) { opacity: 0; }
.co-sum.is-revealed > :not(.co-skel) { animation: coReveal .45s cubic-bezier(.22,.61,.36,1) both; }
@keyframes coReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.co-skel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.co-skel__fs { height: 56px; border-radius: 12px; }
.co-skel__line { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.co-skel__box { width: 52px; height: 52px; border-radius: 10px; flex: none; }
.co-skel__tx { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.co-skel__tx .sk:first-child { width: 72%; height: 11px; }
.co-skel__tx .sk:last-child { width: 44%; height: 11px; }
.co-skel__amt { width: 46px; height: 12px; flex: none; }
.co-skel__coupon { height: 34px; border-radius: 9px; margin: 6px 0; }
.co-skel__totrow { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; }
.co-skel__grand { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
/* bleed skins carry the summary's own wash so the cover blends in */
.co--bleed .co-skel { border-radius: 0; padding: 38px clamp(22px, 2.6vw, 40px); background: #eef0ea; --sk-base: #e1e5df; --sk-hi: #eef1ec; }
.co--warm.co--bleed .co-skel { background: #f4ede1; --sk-base: #e8ddca; --sk-hi: #f7efe1; }

/* ---- first-paint form skeleton ------------------------------------------ */
.co-main { position: relative; }
.co-formskel {
  position: absolute; inset: 0; z-index: 5; border-radius: 16px;
  padding: 26px 26px 28px; background: #fff;
  display: flex; flex-direction: column; gap: 15px;
  opacity: 0; visibility: hidden; transition: opacity .34s ease;
  --sk-base: #e9ece8; --sk-hi: #f6f9f6;
}
.co.is-firstpaint .co-formskel { opacity: 1; visibility: visible; }
.co--bleed .co-formskel { border-radius: 0; padding: 38px clamp(24px, 4vw, 60px) 56px; }
.co--warm .co-formskel { background: #fffdf9; }
.co--roomy .co-formskel { padding: 22px; background: transparent; }
.co--roomy.co.is-firstpaint .co-formskel { background: #fbf7f0; }
.co-fskel__h { width: 42%; height: 20px; margin-bottom: 4px; }
.co-fskel__field { display: flex; flex-direction: column; gap: 8px; }
.co-fskel__field > .sk:first-child { height: 11px; }
.co-fskel__input { height: 44px; border-radius: 10px; width: 100%; }
.co-fskel__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.co-fskel__btn { height: 50px; border-radius: 12px; margin-top: 4px; }

/* ---- side-cart drawer skeleton ------------------------------------------ */
.sc-skel {
  position: absolute; left: 0; right: 0; top: 52px; bottom: 0; z-index: 6;
  background: #fff; padding: 18px 20px; display: flex; flex-direction: column; gap: 18px;
  opacity: 0; visibility: hidden; transition: opacity .3s ease;
  --sk-base: #e9ece8; --sk-hi: #f6f9f6;
}
.sc-drawer.is-loading .sc-skel { opacity: 1; visibility: visible; }
.sc-skel__fs { height: 52px; border-radius: 12px; }
.sc-skel__item { display: flex; gap: 14px; }
.sc-skel__thumb { width: 62px; height: 72px; border-radius: 11px; flex: none; }
.sc-skel__tx { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.sc-skel__fbt { display: flex; gap: 10px; }
.sc-skel__card { width: 136px; height: 104px; border-radius: 12px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; }
  .co-sum.is-revealed > :not(.co-skel) { animation: none; }
  .co-formskel, .sc-skel { transition: none; }
}