/* ===== shared: toast, messages ===== */
html.ck-open, html.ck-open body { overflow: hidden; }
.grn { color: #16a34a; }
.pin-msg { font-size: 13px; margin-top: 8px; min-height: 1em; }
.pin-msg.ok { color: #16a34a; } .pin-msg.bad { color: #d32f2f; }
#st-toast {
  position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px); background: #212121; color: #fff;
  padding: 11px 20px; border-radius: 6px; font-size: 14px; opacity: 0; pointer-events: none; transition: .25s; z-index: 1100;
}
#st-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ===== checkout page shell (both layouts) ===== */
#ck { position: fixed; inset: 0; z-index: 1000; overflow-y: auto; -webkit-overflow-scrolling: touch; font-family: inherit; }
#ck[hidden] { display: none !important; }
#ck *, #ck *::before, #ck *::after { box-sizing: border-box; }
#ck-form[hidden] { display: none; }
.ckh { position: sticky; top: 0; z-index: 5; background: #fff; }
.ckh-in { display: flex; align-items: center; gap: 14px; margin: 0 auto; }
.ck-x { background: none; border: 0; padding: 6px; margin-left: -6px; cursor: pointer; color: inherit; display: flex; }
.ckh-logo { height: 26px; width: auto; }
.ckh-sec { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ckw { display: grid; margin: 0 auto; align-items: start; }
.ckr { position: sticky; }
.ck-err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; border-radius: 4px; padding: 10px 12px; font-size: 14px; margin-bottom: 10px; }
.ck-err[hidden] { display: none; }
.st .st-b, .st .st-sum, .st .st-chg, .st .st-ok { display: none; }
.st.open .st-b { display: block; }
.st.done .st-sum, .st.done .st-chg { display: block; }
.st.done .st-ok { display: inline-flex; }
.fld { display: flex; flex-direction: column; gap: 4px; }
.fld.full { grid-column: 1 / -1; }
.fld input, .fld select, .fld textarea, .cpn input { font: inherit; width: 100%; outline: none; background: #fff; color: #212121; resize: vertical; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid1 { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 460px; }
.hint { font-size: 12px; color: #878787; margin: 10px 0 0; }
.st-act { margin-top: 18px; }
.itm { display: flex; gap: 16px; align-items: flex-start; }
.itm-img { width: 88px; flex: none; }
.itm-img img { width: 100%; height: auto; display: block; }
.itm-b { flex: 1; min-width: 0; }
.itm-t { font-size: 15px; line-height: 1.35; margin-bottom: 4px; }
.itm-s { font-size: 12px; color: #878787; margin-bottom: 8px; }
.ck-pr { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.ck-pr s { color: #878787; } .ck-pr b { font-size: 17px; } .ck-pr em { color: #16a34a; font-style: normal; font-weight: 600; }
.ck-unit { font-size: 12px; color: #717478; margin-top: 2px; }
.ck-qty { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; }
.ck-qty button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #c2c2c2; background: #fff; font-size: 16px; cursor: pointer; color: #212121; line-height: 1; }
.ck-qty span { min-width: 44px; text-align: center; border: 1px solid #c2c2c2; padding: 3px 0; font-weight: 600; font-size: 14px; }
.ck-pm { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.ck-pm input { width: 18px; height: 18px; flex: none; margin: 0; }
.ck-pm span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ck-pm b { font-size: 14px; font-weight: 600; } .ck-pm small { font-size: 12px; color: #616161; }
.ck-pm em { font-style: normal; font-weight: 600; font-size: 14px; white-space: nowrap; }
.cpn { display: flex; gap: 8px; margin-top: 14px; max-width: 420px; }
.cpn button { flex: none; padding: 0 16px; font-weight: 600; cursor: pointer; background: #fff; }
.pd-row { display: flex; justify-content: space-between; gap: 12px; }
.ck-foot { display: none; }
#ck-pay:disabled { opacity: .7; cursor: wait; }

/* ===== done (COD confirmation) ===== */
.ck-done { max-width: 560px; margin: 40px auto; padding: 32px 24px; text-align: center; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.ck-done[hidden] { display: none; }
.ck-done-ic { width: 68px; height: 68px; border-radius: 50%; background: #dcfce7; color: #16a34a; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.ck-done h3 { margin: 0 0 8px; font-size: 22px; }
.ck-done p { margin: 0 auto 14px; color: #424242; line-height: 1.5; max-width: 400px; }
.ck-done-box { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 auto 14px; max-width: 420px; }
.ck-done-box > div { background: #f7f8fa; border-radius: 8px; padding: 10px 12px; text-align: left; }
.ck-done-box small { display: block; font-size: 12px; color: #717478; } .ck-done-box b { font-size: 15px; word-break: break-all; }
.ck-done-note { font-size: 13px; color: #717478 !important; }
.ck-done-btn { display: inline-block; background: #16a34a; color: #fff; font-weight: 700; padding: 12px 20px; border-radius: 8px; text-decoration: none; }

/* =====================================================================
   Layout 1 (store-1): app-style flow — stepper, one screen at a time
   ===================================================================== */
#ck.fk { background: #f1f2f4; color: #111112; font-size: 14px; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
#ck.fk .ckh { box-shadow: 0 1px 0 #e8e8ea; }
#ck.fk .ckh-in { max-width: 1080px; height: 56px; padding: 0 16px; }
#ck.fk .ckh-title { font-size: 18px; font-weight: 600; }
#ck.fk .ckh-logo { margin-left: auto; height: 24px; }
#ck.fk .stp { list-style: none; margin: 0 auto; padding: 4px 16px 12px; max-width: 560px; display: flex; align-items: center; gap: 8px; }
#ck.fk .stp li[data-s] { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: #717478; white-space: nowrap; }
#ck.fk .stp li i { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #c9cbcf; font-style: normal; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; background: #fff; color: #717478; }
#ck.fk .stp li.on { color: #111112; font-weight: 600; }
#ck.fk .stp li.on i { border-color: #16a34a; background: #16a34a; color: #fff; }
#ck.fk .stp li.ok i { border-color: #16a34a; color: #16a34a; }
#ck.fk .stp li.ok i { font-size: 0; }
#ck.fk .stp li.ok i::before { content: '\2713'; font-size: 13px; }
#ck.fk .stp .ln { flex: 1; height: 1.5px; background: #d4d6da; margin-bottom: 18px; }
#ck.fk .ckw { max-width: 1080px; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; padding: 16px; }
#ck.fk .st { display: none; }
#ck.fk .st.open { display: block; }
#ck.fk .st-h { display: none; }
#ck.fk .card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 10px; }
#ck.fk .card-h { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; margin-bottom: 16px; color: #111112; }
#ck.fk .card-h svg { color: #16a34a; }
/* floating-label fields */
#ck.fk .flt { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
#ck.fk .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#ck.fk .fl { position: relative; display: block; }
#ck.fk .fl input, #ck.fk .fl textarea, #ck.fk .fl select { width: 100%; border: 1px solid #c9cbcf; border-radius: 8px; padding: 20px 12px 7px; font: inherit; font-size: 15px;
  background: #fff; color: #111112; outline: none; resize: vertical; }
#ck.fk .fl select { padding: 13px 12px; height: 50px; appearance: auto; }
#ck.fk .fl span { position: absolute; left: 12px; top: 15px; font-size: 15px; color: #717478; pointer-events: none; transition: .15s; }
#ck.fk .fl input:focus, #ck.fk .fl textarea:focus, #ck.fk .fl select:focus { border-color: #16a34a; box-shadow: 0 0 0 1px #16a34a; }
#ck.fk .fl input:focus + span, #ck.fk .fl input:not(:placeholder-shown) + span,
#ck.fk .fl textarea:focus + span, #ck.fk .fl textarea:not(:placeholder-shown) + span { top: 5px; font-size: 11px; color: #16a34a; }
#ck.fk .btn-y { background: #ffc200; color: #111112; border: 0; border-radius: 10px; height: 48px; padding: 0 28px; min-width: 200px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
#ck.fk .btn-y:hover { filter: brightness(.97); }
#ck.fk .st-act { margin-top: 18px; }
/* deliver-to */
#ck.fk .dlv { display: flex; gap: 12px; align-items: flex-start; }
#ck.fk .dlv-b { flex: 1; min-width: 0; }
#ck.fk .dlv-l { font-size: 13px; color: #717478; margin-bottom: 4px; }
#ck.fk .dlv-n { display: flex; align-items: center; gap: 8px; font-size: 15px; }
#ck.fk .tag { background: #f1f2f4; color: #3d3d3f; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 3px; letter-spacing: .3px; }
#ck.fk .dlv-a { font-size: 13px; color: #3d3d3f; margin-top: 4px; line-height: 1.45; }
#ck.fk .dlv-p { font-size: 13px; color: #3d3d3f; margin-top: 2px; }
#ck.fk .chg { flex: none; border: 1px solid #c9cbcf; background: #fff; color: #2a55e5; font: inherit; font-weight: 600; font-size: 13px; padding: 7px 14px; border-radius: 8px; cursor: pointer; }
/* item */
#ck.fk .itm2 { display: flex; gap: 14px; }
#ck.fk .itm2-l { width: 84px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#ck.fk .itm2-img { width: 84px; height: 96px; border-radius: 8px; background: #f1f2f4; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#ck.fk .itm2-img img { max-width: 90%; max-height: 90%; }
#ck.fk .qty2 { font-size: 13px; border: 1px solid #c9cbcf; border-radius: 6px; padding: 3px 4px 3px 8px; display: flex; align-items: center; gap: 2px; background: #fff; }
#ck.fk .qty2 select { border: 0; background: transparent; font: inherit; font-weight: 600; cursor: pointer; outline: none; }
#ck.fk .itm2-b { flex: 1; min-width: 0; }
#ck.fk .itm2-t { font-size: 14px; line-height: 1.4; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#ck.fk .itm2-s { font-size: 12px; color: #717478; margin-bottom: 8px; }
#ck.fk .itm2-p { display: flex; align-items: baseline; gap: 8px; font-size: 16px; }
#ck.fk .off2 { color: #008c00; font-weight: 700; }
#ck.fk .itm2-p s { color: #8b8e93; font-size: 14px; }
#ck.fk .itm2-p b { font-weight: 700; }
#ck.fk .itm2-d { font-size: 12px; color: #3d3d3f; margin-top: 8px; }
#ck.fk .cpn2-h { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
#ck.fk .cpn2-h svg { color: #c26a00; }
#ck.fk .cpn { margin-top: 12px; max-width: none; }
#ck.fk .cpn input { border: 1px solid #c9cbcf; border-radius: 8px; padding: 11px 12px; font-size: 14px; }
#ck.fk .cpn button { border: 1px solid #c9cbcf; color: #2a55e5; border-radius: 8px; }
/* payment */
#ck.fk .pay-top { display: flex; align-items: center; justify-content: space-between; }
#ck.fk .pay-top small { display: block; font-size: 13px; color: #717478; }
#ck.fk .pay-top b { font-size: 22px; font-weight: 700; }
#ck.fk .pay-top .sec { display: inline-flex; align-items: center; gap: 6px; color: #008c00; font-size: 12px; font-weight: 600; }
#ck.fk .pay-list { padding: 4px 16px 16px; }
#ck.fk .ck-pm { padding: 16px 0; border-bottom: 1px solid #f0f0f2; }
#ck.fk .ck-pm input { accent-color: #16a34a; }
#ck.fk .ck-pm b { font-size: 15px; }
#ck.fk .pay-go { padding-top: 16px; }
#ck.fk .pay-go .btn-y { width: 100%; }
#ck.fk .hint.c { text-align: center; padding: 0 16px; }
/* price details */
#ck.fk .ckr { top: 128px; }
#ck.fk .pd { padding: 0; }
#ck.fk .pd h4 { margin: 0; padding: 14px 16px; font-size: 16px; font-weight: 600; border-bottom: 1px solid #f0f0f2; }
#ck.fk .pd-row { padding: 8px 16px; font-size: 14px; }
#ck.fk .pd-row:nth-of-type(1) { padding-top: 14px; }
#ck.fk .pd-row.tot { margin: 6px 16px 0; padding: 14px 0; border-top: 1px dashed #d4d6da; font-weight: 700; font-size: 16px; }
#ck.fk .pd-save { margin: 0 12px 12px; padding: 10px 12px; background: #e6f4e6; color: #008c00; font-weight: 600; font-size: 13px; border-radius: 8px; }
#ck.fk .safe { display: flex; gap: 10px; align-items: center; padding: 8px 6px; color: #717478; font-size: 12px; }
#ck.fk .cf-amt { display: flex; flex-direction: column; }
#ck.fk .vpd { color: #2a55e5; font-size: 12px; font-weight: 600; text-decoration: none; }
#ck.fk .ck-done { margin-top: 24px; }

/* =====================================================================
   Layout 2 (store-2): section checkout with order box
   ===================================================================== */
#ck.az { background: #fff; color: #0f1111; font-size: 14px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
#ck.az .ckh { border-bottom: 1px solid #ddd; background: linear-gradient(#fff, #f7f7f7); }
#ck.az .ckh-in { max-width: 1150px; height: 60px; padding: 0 18px; }
#ck.az .ckh-t { flex: 1; text-align: center; margin: 0; font-size: 26px; font-weight: 400; }
#ck.az .ckh-sec { margin-left: 0; color: #565959; }
#ck.az .ckw { max-width: 1150px; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; padding: 20px 18px 40px; }
#ck.az .st { border-bottom: 1px solid #ddd; padding: 16px 0; }
#ck.az .st-h { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; align-items: start; gap: 6px 16px; }
#ck.az .st-t { font-size: 18px; font-weight: 700; }
#ck.az .st.open .st-t { color: #c45500; }
#ck.az .ckh-t .m { display: none; }
#ck.az .st-ok { display: none !important; }
#ck.az .st-sum { font-size: 14px; line-height: 1.5; color: #0f1111; }
#ck.az .st-chg { background: none; border: 0; color: #007185; font-size: 14px; cursor: pointer; padding: 0; }
#ck.az .st-chg:hover { color: #c45500; text-decoration: underline; }
#ck.az .st-b { margin: 14px 0 0; border: 1px solid #d5d9d9; border-radius: 8px; padding: 18px 20px; }
#ck.az .rv-place { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 14px 16px; border: 1px solid #d5d9d9; border-radius: 8px; }
#ck.az .rv-place span { font-size: 18px; font-weight: 700; color: #b12704; }
#ck.az .rv-place .btn-y { padding: 8px 22px; }
#ck.az select:disabled { background: #f0f2f2; color: #565959; }
#ck.az .st-sub { margin: 0 0 14px; font-size: 18px; font-weight: 700; }
#ck.az .fld span { font-size: 13px; font-weight: 700; }
#ck.az .fld input, #ck.az .fld select, #ck.az .fld textarea, #ck.az .cpn input {
  border: 1px solid #888c8c; border-radius: 3px; padding: 7px 9px; font-size: 14px; box-shadow: 0 1px 2px rgba(15,17,17,.15) inset; }
#ck.az .fld input:focus, #ck.az .fld select:focus, #ck.az .fld textarea:focus, #ck.az .cpn input:focus { border-color: #007185; box-shadow: 0 0 0 3px #c8f3fa, 0 1px 2px rgba(15,17,17,.15) inset; }
#ck.az .btn-y { background: #ffd814; border: 1px solid #fcd200; border-radius: 100px; padding: 8px 18px; font: inherit; font-size: 13px; color: #0f1111; cursor: pointer; box-shadow: 0 2px 5px rgba(213,217,217,.5); }
#ck.az .btn-y:hover { background: #f7ca00; }
#ck.az .btn-y.wide { width: 100%; padding: 10px; font-size: 14px; }
#ck.az .pm-box { border: 1px solid #d5d9d9; border-radius: 8px; overflow: hidden; }
#ck.az .ck-pm { padding: 14px 16px; }
#ck.az .ck-pm + .ck-pm { border-top: 1px solid #d5d9d9; }
#ck.az .ck-pm.on { background: #fcf5ee; box-shadow: 0 0 0 1px #fbd8b4 inset; }
#ck.az .ck-pm input { accent-color: #007185; }
#ck.az .cpn-l { margin-top: 18px; font-weight: 700; font-size: 14px; }
#ck.az .cpn { margin-top: 8px; }
#ck.az .cpn button { border: 1px solid #d5d9d9; border-radius: 8px; box-shadow: 0 2px 5px rgba(213,217,217,.5); font-weight: 400; }
#ck.az .rv-del { color: #007600; font-weight: 700; font-size: 15px; margin-bottom: 12px; }
#ck.az .itm-t { font-weight: 700; font-size: 14px; }
#ck.az .ck-pr b { color: #b12704; }
#ck.az .ck-pr em { color: #cc0c39; }
#ck.az .ckr { top: 16px; }
#ck.az .box { border: 1px solid #d5d9d9; border-radius: 8px; padding: 16px 18px; }
#ck.az .fine { font-size: 12px; color: #565959; text-align: center; margin: 8px 0 12px; line-height: 1.4; }
#ck.az .box h4 { margin: 0; padding-top: 12px; border-top: 1px solid #ddd; font-size: 18px; font-weight: 700; }
#ck.az .box .pd-row { font-size: 12px; padding: 4px 0; }
#ck.az .box h4 + .pd-row { margin-top: 8px; }
#ck.az .box .pd-row.tot { margin-top: 8px; padding-top: 10px; border-top: 1px solid #ddd; font-size: 18px; font-weight: 700; color: #b12704; }
#ck.az .pd-save { font-size: 12px; color: #007600; font-weight: 700; margin-top: 8px; }

/* ===== tablet / mobile ===== */
@media (max-width: 900px) {
  #ck.fk .ckw, #ck.az .ckw { grid-template-columns: 1fr; padding-bottom: 90px; }
  .ckr { position: static; }
  .ck-foot { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; align-items: center; justify-content: space-between; gap: 12px;
    background: #fff; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -2px 10px rgba(0,0,0,.1); }
  .cf-amt { display: flex; flex-direction: column; line-height: 1.2; }
  .cf-amt s { color: #878787; font-size: 12px; } .cf-amt b { font-size: 19px; } .cf-amt small { font-size: 12px; color: #565959; }
  #ck.fk .ck-foot .btn-y { min-width: 0; flex: 0 0 52%; height: 46px; }
  #ck.az .ck-foot .btn-y { flex: 0 0 58%; padding: 12px; font-size: 15px; }
  #ck.fk .st-act, #ck.fk .pay-go { display: none; }
  #ck.fk .ckh-in { height: 52px; }
  #ck.fk .st-act, #ck.az .st-act { display: none; }            /* the bottom bar drives the steps on mobile */
  #ck.fk .pay-go { display: block; position: absolute; left: -9999px; }   /* submit stays in the form; the bottom bar drives it */
  #ck.az .st-h { grid-template-columns: minmax(0, 1fr) auto; }
  #ck.az .st-sum { grid-column: 1 / -1; }
  #ck.az .ckh-t .d { display: none; } #ck.az .ckh-t .m { display: inline; }
  #ck.az .ckh-t { text-align: left; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  #ck.az .st-chg { grid-column: 2; grid-row: 1; justify-self: end; }
  #ck.az .ckh-logo { display: none; }
  #ck.az .ck-foot .btn-y { white-space: nowrap; font-size: 14px; padding: 12px 10px; flex: 0 0 64%; }
  #ck.az .ckw { display: flex; flex-direction: column; }
  #ck.az .st:not(.open) { display: none; }
  #ck.az.on-review .st.done { display: block; padding: 12px 0; }
  #ck.az .st.open > .st-h { display: none; }
  #ck.az .st.open .st-b { border: 0; padding: 4px 0 0; margin: 0; }
  #ck.az .ckr { display: none; }
  #ck.az.on-review .ckr { display: block; order: -1; margin-bottom: 6px; }
  #ck.az .rv-place { display: none; }
  #ck.az .st-b { margin-left: 0; padding: 14px; }
  #ck.az .ckh-t { font-size: 18px; }
  #ck.az .box .fine { display: block; }
  #ck.az.on-review .ck-foot .btn-y { flex: 0 0 58%; }
}
@media (max-width: 600px) {
  .grid2 { grid-template-columns: 1fr; }
  #ck.fk .ckh-in, #ck.az .ckh-in { height: 52px; padding: 0 12px; }
  #ck.fk .ckw { padding: 8px 8px 96px; gap: 0; }
  #ck.fk .two { grid-template-columns: 1fr 1fr; }
  #ck.fk .stp { padding-bottom: 10px; }
  #ck.az .ckw { padding: 12px 12px 90px; }
  .ckh-logo { height: 22px; }
  .itm-img { width: 70px; }
}

#ck .st, #ck .ck-err { scroll-margin-top: 72px; }

/* ===== product video player ===== */
.vp { position: relative; width: 100%; height: 100%; background: #000; overflow: hidden; display: flex; align-items: center; justify-content: center; user-select: none; }
.vp video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.vp-error { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; padding: 24px; color: #fff; background: rgba(0,0,0,.82); text-align: center; font-size: 14px; }
.vp.error .vp-error { display: flex; }
.vp.error .vp-big, .vp.error .vp-bar { display: none; }
.vp-big { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #111; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.35); transition: opacity .2s, transform .15s; }
.vp-big svg { width: 34px; height: 34px; margin-left: 3px; }
.vp-big:active { transform: scale(.94); }
.vp.playing .vp-big { opacity: 0; pointer-events: none; }
.vp-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; opacity: 0; transition: opacity .2s; }
.vp.show .vp-bar { opacity: 1; }
.vp-bar button { background: none; border: 0; color: #fff; width: 32px; height: 32px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; }
.vp-bar button svg { width: 22px; height: 22px; }
.vp-time { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; min-width: 78px; }
.vp-seek { flex: 1 1 40px; min-width: 40px; width: 40px; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; cursor: pointer; margin: 0;
  background: linear-gradient(90deg, #ffc200 var(--p, 0%), rgba(255,255,255,.35) var(--p, 0%)); }
.vp-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #ffc200; border: 0; }
.vp-seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #ffc200; border: 0; }
.vp:fullscreen { width: 100vw; height: 100vh; }
/* video entries in galleries */
.vtile { position: relative; }
.vtile img { filter: brightness(.92); }
.vplay { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255,255,255,.92); color: #111; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px rgba(0,0,0,.3); pointer-events: none; }
.vplay svg { width: 26px; height: 26px; margin-left: 3px; }
.vplay.sm { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.vplay.sm svg { width: 12px; height: 12px; margin-left: 1px; }
.vlabel { position: absolute; left: 10px; bottom: 10px; background: rgba(17,17,18,.75); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .3px; padding: 3px 8px; border-radius: 4px; pointer-events: none; }

/* ===== phone-unlocked coupon ===== */
html.cp-open, html.cp-open body { overflow: hidden; }
#cpn-pop { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; font-family: inherit; }
#cpn-pop[hidden] { display: none !important; }
#cpn-pop *, #cpn-pop *::before, #cpn-pop *::after { box-sizing: border-box; }
.cp-back { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); animation: cpFade .2s ease; }
.cp-sheet { position: relative; width: min(420px, 92vw); background: #fff; border-radius: 16px; padding: 26px 22px 20px; box-shadow: 0 24px 60px rgba(0,0,0,.25); animation: cpUp .22s ease; color: #111112; }
@keyframes cpFade { from { opacity: 0 } }
@keyframes cpUp { from { transform: translateY(18px); opacity: 0 } }
.cp-grab { display: none; }
.cp-x { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f1f2f4; font-size: 22px; line-height: 1; cursor: pointer; color: #3d3d3f; }
.cp-sheet h3 { margin: 0 0 6px; font-size: 20px; font-weight: 700; padding-right: 36px; }
.cp-sub { margin: 0 0 16px; font-size: 14px; color: #5f6368; line-height: 1.5; }
.cp-ticket { display: flex; border: 1.5px dashed #16a34a; border-radius: 12px; background: #f0fdf4; overflow: hidden; margin-bottom: 16px; }
.cp-l { width: 64px; flex: none; display: flex; align-items: center; justify-content: center; background: #16a34a; position: relative; }
.cp-l::before, .cp-l::after { content: ''; position: absolute; right: -8px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.cp-l::before { top: -8px; } .cp-l::after { bottom: -8px; }
.cp-pct { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #16a34a; font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.cp-r { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.cp-r small { font-size: 10px; font-weight: 700; letter-spacing: .8px; color: #15803d; }
.cp-r b { font-size: 18px; font-weight: 800; color: #111112; }
.cp-price { font-size: 13px; color: #5f6368; } .cp-price s { color: #9aa0a6; } .cp-price strong { color: #15803d; font-size: 15px; }
.cp-field { display: flex; align-items: center; border: 1.5px solid #c9cbcf; border-radius: 10px; overflow: hidden; transition: border-color .15s; }
.cp-field:focus-within { border-color: #16a34a; box-shadow: 0 0 0 1px #16a34a; }
.cp-cc { padding: 0 12px; font-weight: 700; color: #3d3d3f; border-right: 1px solid #e8e8ea; line-height: 48px; }
.cp-field input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 16px; padding: 0 12px; height: 48px; min-width: 0; letter-spacing: .3px; }
.cp-err { color: #d32f2f; font-size: 13px; margin-top: 8px; }
.cp-err[hidden] { display: none; }
.cp-btn { width: 100%; height: 50px; margin-top: 14px; border: 0; border-radius: 10px; background: #ffc200; color: #111112; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.cp-btn:disabled { opacity: .7; cursor: wait; }
.cp-link { width: 100%; margin-top: 8px; border: 0; background: none; color: #2a55e5; font: inherit; font-weight: 600; font-size: 14px; padding: 10px; cursor: pointer; }
.cp-fine { font-size: 11px; color: #9aa0a6; text-align: center; margin: 10px 0 0; }
.cp-ok { width: 64px; height: 64px; border-radius: 50%; background: #dcfce7; color: #16a34a; font-size: 30px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 4px auto 12px; }
.js-cp-done { text-align: center; } .js-cp-done h3 { padding-right: 0; }
.cp-step[hidden] { display: none; }
@media (max-width: 600px) {
  #cpn-pop { align-items: flex-end; }
  .cp-sheet { width: 100%; border-radius: 18px 18px 0 0; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); animation: cpSlide .25s ease; }
  @keyframes cpSlide { from { transform: translateY(100%) } }
  .cp-grab { display: block; width: 40px; height: 4px; border-radius: 2px; background: #d4d6da; margin: 0 auto 14px; }
  .cp-x { top: 16px; }
}
/* checkout coupon box */
.cpn-cta { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1.5px dashed #16a34a; border-radius: 10px; background: #f0fdf4; cursor: pointer; text-align: left; font: inherit; color: #111112; }
.cpn-cta b { display: block; font-size: 15px; } .cpn-cta small { font-size: 12px; color: #5f6368; }
.cpn-cta span:nth-child(2) { flex: 1; }
.cpn-ic { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #16a34a; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cpn-go { font-size: 22px; color: #16a34a; }
.cpn-on { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: #e6f4e6; }
.cpn-on > div { flex: 1; } .cpn-on b { display: block; color: #15803d; } .cpn-on small { font-size: 12px; color: #3d3d3f; }
.cpn-on button { border: 0; background: none; color: #d32f2f; font: inherit; font-weight: 600; cursor: pointer; }
.cpn-hint-on { color: #15803d; font-weight: 600; }
.js-cpn-hint a { color: #2a55e5; font-weight: 600; }