/* ==========================================================================
   UNEX — shared storefront styles (product page, checkout, success, cart drawer)
   All component classes are prefixed (ux-, pp-, co-, ok-) so this file can be
   loaded next to index.html's own inline styles without clashing.
   ========================================================================== */

:root{
  --bg:#100e10; --bg-alt:#161315; --surface:#1e1a1c; --surface-2:#282224;
  --line:#3a3235; --line-soft:#2c2528;
  --accent:#ed1c24; --accent-2:#ff6a4d; --accent-3:#7a0f13;
  --text:#f5f3ff; --text-muted:#a29cac; --whatsapp:#25d366; --ok:#3ddc84;
  --radius:16px;
}

/* ---------- Page base (opt-in with <body class="ux">) ---------- */
.ux{
  margin:0; min-height:100vh; color:var(--text);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 520px at 15% -10%, rgba(237,28,36,.15), transparent 60%),
    radial-gradient(800px 460px at 100% 0%, rgba(122,15,19,.30), transparent 55%),
    var(--bg);
}
.ux *{box-sizing:border-box;}
.ux a{color:inherit;}
.ux img{max-width:100%; display:block;}
.ux h1,.ux h2,.ux h3{font-family:'Chakra Petch',sans-serif; margin:0;}
.ux :focus-visible{outline:2px solid var(--accent-2); outline-offset:2px;}
.ux-mono{font-family:'Space Mono',monospace;}
.ux-muted{color:var(--text-muted);}
.ux-hidden{display:none !important;}
.ux-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------- Header ---------- */
.ux-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:18px; padding:12px 20px;
  background:rgba(16,14,16,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.ux-logo{display:flex; align-items:center; gap:9px; text-decoration:none; font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:20px; letter-spacing:2px;}
.ux-logo img{width:34px; height:34px; filter:drop-shadow(0 0 8px rgba(237,28,36,.45));}
.ux-nav{display:none; gap:22px; margin-left:18px;}
.ux-nav a{text-decoration:none; font-size:14px; font-weight:600; color:var(--text-muted); transition:color .15s;}
.ux-nav a:hover{color:var(--text);}
.ux-header-actions{margin-left:auto; display:flex; align-items:center; gap:10px;}
@media(min-width:760px){ .ux-nav{display:flex;} }

.ux-icon-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:42px; min-width:42px; padding:0 14px; border-radius:999px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); color:var(--text);
  font:600 13px 'Plus Jakarta Sans',sans-serif; text-decoration:none;
  transition:border-color .15s, background .15s;
}
.ux-icon-btn:hover{border-color:#5a4f53; background:var(--surface-2);}
.ux-icon-btn svg{width:19px; height:19px; flex:none;}
.ux-icon-btn.wa{background:var(--whatsapp); border-color:transparent; color:#07210f;}
.ux-icon-btn.wa:hover{filter:brightness(1.05); background:var(--whatsapp);}
.ux-icon-btn .lbl{display:none;}
@media(min-width:520px){ .ux-icon-btn .lbl{display:inline;} }
.ux-badge{
  position:absolute; top:-5px; right:-3px; min-width:20px; height:20px; padding:0 5px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; border-radius:999px;
  font:700 11px 'Plus Jakarta Sans',sans-serif; border:2px solid var(--bg);
}
.ux-badge[hidden]{display:none;}

/* ---------- Buttons ---------- */
.ux-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 24px; border-radius:999px; cursor:pointer; text-decoration:none;
  font:700 15px/1.1 'Plus Jakarta Sans',sans-serif; border:1px solid transparent; white-space:nowrap;
  transition:transform .12s, box-shadow .2s, background .2s, border-color .2s, filter .2s;
}
.ux-btn:active{transform:scale(.98);}
.ux-btn svg{width:18px; height:18px; flex:none;}
.ux-btn-primary{background:linear-gradient(180deg,#ff2d35,#d6141b); color:#fff; box-shadow:0 10px 26px -10px rgba(237,28,36,.75);}
.ux-btn-primary:hover{box-shadow:0 12px 30px -8px rgba(237,28,36,.9); filter:brightness(1.05);}
.ux-btn-wa{background:var(--whatsapp); color:#07210f;}
.ux-btn-wa:hover{filter:brightness(1.06);}
.ux-btn-ghost{background:transparent; border-color:var(--line); color:var(--text);}
.ux-btn-ghost:hover{border-color:#6a5e62; background:rgba(255,255,255,.04);}
.ux-btn-block{width:100%;}
.ux-btn-lg{padding:17px 26px; font-size:16px;}
.ux-btn[disabled]{opacity:.55; cursor:not-allowed; box-shadow:none; filter:none; transform:none;}

/* ---------- Cards, chips, qty ---------- */
.ux-card{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:22px;}
.ux-chip{
  padding:10px 18px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  font:600 14px 'Plus Jakarta Sans',sans-serif; transition:border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.ux-chip:hover{border-color:#6a5e62;}
.ux-chip[aria-pressed="true"]{border-color:var(--accent); background:rgba(237,28,36,.16); color:#fff; box-shadow:0 0 0 3px rgba(237,28,36,.14);}
.ux-qty{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; background:var(--surface); overflow:hidden;}
.ux-qty button{width:40px; height:40px; border:0; background:transparent; color:var(--text); font-size:20px; line-height:1; cursor:pointer; transition:background .15s;}
.ux-qty button:hover{background:var(--surface-2);}
.ux-qty button:disabled{opacity:.35; cursor:not-allowed;}
.ux-qty output{min-width:34px; text-align:center; font:700 15px 'Space Mono',monospace;}
.ux-qty.sm button{width:32px; height:32px; font-size:17px;}
.ux-qty.sm output{min-width:26px; font-size:13px;}

/* ---------- Forms ---------- */
.ux-field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px;}
.ux-field label{font-size:13px; font-weight:600; color:var(--text-muted);}
.ux-field label .req{color:var(--accent-2);}
.ux-field label .opt{font-weight:500; opacity:.7;}
.ux-input,.ux-select,.ux-textarea{
  width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--line);
  background:var(--bg-alt); color:var(--text); font:500 15px 'Plus Jakarta Sans',sans-serif;
  transition:border-color .15s, box-shadow .15s;
}
.ux-textarea{resize:vertical; min-height:88px;}
.ux-input::placeholder,.ux-textarea::placeholder{color:#6f6872;}
.ux-input:focus,.ux-select:focus,.ux-textarea:focus{outline:none; border-color:var(--accent-2); box-shadow:0 0 0 3px rgba(255,106,77,.18);}
.ux-input.invalid,.ux-select.invalid,.ux-textarea.invalid{border-color:#ff5a5a; box-shadow:0 0 0 3px rgba(255,90,90,.15);}
.ux-field .err{display:none; font-size:12px; color:#ff8a8a;}
.ux-field.has-error .err{display:block;}
.ux-row{display:grid; gap:0 14px;}
@media(min-width:560px){ .ux-row.two{grid-template-columns:1fr 1fr;} }
.ux-alert{padding:13px 16px; border-radius:12px; font-size:14px; margin-bottom:16px; border:1px solid;}
.ux-alert.error{background:rgba(255,90,90,.1); border-color:rgba(255,90,90,.4); color:#ffb3b3;}
.ux-alert.info{background:rgba(255,106,77,.08); border-color:rgba(255,106,77,.3); color:#ffd2c7;}

/* ---------- Toast ---------- */
.ux-toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); z-index:120;
  transform:translate(-50%,20px); opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:14px; max-width:calc(100% - 32px);
  padding:12px 14px 12px 18px; border-radius:14px;
  background:#2b2427; border:1px solid var(--line); box-shadow:0 18px 40px -12px rgba(0,0,0,.7);
  font-size:14px; font-weight:600; transition:opacity .22s, transform .22s;
}
.ux-toast.show{opacity:1; transform:translate(-50%,0); pointer-events:auto;}
.ux-toast button{border:0; cursor:pointer; background:var(--accent); color:#fff; padding:8px 14px; border-radius:999px; font:700 13px 'Plus Jakarta Sans',sans-serif;}
.ux-toast .tick{color:var(--ok); font-size:18px; line-height:1;}

/* ---------- Cart drawer ---------- */
.ux-drawer-bg{position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .25s;}
.ux-drawer-bg.open{opacity:1; pointer-events:auto;}
.ux-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:101; width:min(100%,430px);
  display:flex; flex-direction:column; background:var(--bg-alt); border-left:1px solid var(--line);
  transform:translateX(102%); transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.ux-drawer.open{transform:none;}
.ux-drawer-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line);}
.ux-drawer-head h3{font-size:19px;}
.ux-x{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--text); font-size:22px; line-height:1; cursor:pointer;}
.ux-x:hover{background:var(--surface-2);}
.ux-drawer-body{flex:1; overflow-y:auto; padding:8px 20px;}
.ux-drawer-foot{padding:16px 20px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--bg);}
.ux-line{display:flex; justify-content:space-between; gap:12px; font-size:14px; color:var(--text-muted); padding:3px 0;}
.ux-line.total{color:var(--text); font-weight:700; font-size:16px; padding-top:10px; margin-top:6px; border-top:1px dashed var(--line);}
.ux-line.total .v{font-family:'Space Mono',monospace; color:var(--accent-2); font-size:18px;}
.ux-empty{text-align:center; padding:56px 10px; color:var(--text-muted);}
.ux-empty svg{width:54px; height:54px; margin:0 auto 14px; opacity:.5;}

.ux-item{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-soft);}
.ux-item:last-child{border-bottom:0;}
.ux-item-img{width:72px; height:72px; flex:none; border-radius:12px; background:var(--surface-2); overflow:hidden; border:1px solid var(--line-soft);}
.ux-item-img img{width:100%; height:100%; object-fit:cover;}
.ux-item-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.ux-item-name{font-weight:700; font-size:14px; line-height:1.3; text-decoration:none;}
.ux-item-opts{font-size:12px; color:var(--text-muted);}
.ux-item-bottom{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px;}
.ux-item-price{font:700 14px 'Space Mono',monospace; color:var(--accent-2);}
.ux-remove{border:0; background:transparent; color:var(--text-muted); font-size:12px; cursor:pointer; text-decoration:underline; padding:0; align-self:flex-start;}
.ux-remove:hover{color:#ff8a8a;}

/* ======================================================================
   PRODUCT PAGE (pp-)
   ====================================================================== */
.pp{max-width:1140px; margin:0 auto; padding:18px 20px 130px;}
@media(min-width:900px){ .pp{padding-bottom:70px;} }
.pp-crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); margin:6px 0 18px;}
.pp-crumbs a{text-decoration:none;}
.pp-crumbs a:hover{color:var(--text);}
.pp-crumbs .sep{opacity:.4;}
.pp-crumbs .cur{color:var(--text); font-weight:600; max-width:48vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.pp-grid{display:grid; gap:26px;}
@media(min-width:900px){ .pp-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:44px; align-items:start;} }

.pp-gallery{min-width:0;}
@media(min-width:900px){ .pp-gallery{position:sticky; top:88px;} }
.pp-stage{
  position:relative; aspect-ratio:1/1; border-radius:22px; overflow:hidden;
  background:radial-gradient(circle at 50% 35%, #2a2326, #181416); border:1px solid var(--line);
}
.pp-stage img{width:100%; height:100%; object-fit:contain; transition:opacity .2s;}
.pp-zoom-hint{position:absolute; right:12px; bottom:12px; font-size:11px; padding:5px 10px; border-radius:999px; background:rgba(0,0,0,.55); color:#ddd; backdrop-filter:blur(6px);}
.pp-thumbs{display:flex; gap:10px; margin-top:12px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:thin;}
.pp-thumb{width:68px; height:68px; flex:none; padding:0; border-radius:12px; overflow:hidden; cursor:pointer; background:var(--surface); border:2px solid var(--line); opacity:.7; transition:opacity .15s, border-color .15s;}
.pp-thumb img{width:100%; height:100%; object-fit:cover;}
.pp-thumb:hover{opacity:1;}
.pp-thumb[aria-current="true"]{border-color:var(--accent); opacity:1;}

.pp-info{min-width:0;}
.pp-eyebrow{display:inline-flex; align-items:center; gap:7px; font:700 11px 'Space Mono',monospace; letter-spacing:2px; text-transform:uppercase; color:var(--accent-2); margin-bottom:10px;}
.pp-eyebrow i{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px rgba(61,220,132,.15);}
.pp-title{font-size:clamp(26px,5.2vw,38px); line-height:1.12; letter-spacing:-.3px; margin-bottom:14px;}
.pp-price-row{display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 12px; margin-bottom:6px;}
.pp-price{font:700 clamp(30px,6vw,40px)/1 'Space Mono',monospace; color:var(--accent-2); text-shadow:0 0 22px rgba(255,106,77,.25);}
.pp-price small{font-size:.42em; color:var(--text-muted); margin-right:6px; letter-spacing:1px; text-shadow:none;}
.pp-from{font-size:12px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;}
.pp-tax{font-size:13px; color:var(--text-muted); margin-bottom:22px;}
.pp-lead{color:var(--text-muted); font-size:15px; margin:0 0 22px;}

.pp-opt{margin-bottom:20px;}
.pp-opt-label{display:flex; justify-content:space-between; font-size:13px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; margin-bottom:10px;}
.pp-opt-label span{color:var(--text-muted); font-weight:600; text-transform:none; letter-spacing:0;}
.pp-chips{display:flex; flex-wrap:wrap; gap:10px;}
.pp-buy{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:26px 0 14px;}
.pp-buy .grow{flex:1; min-width:150px;}
.pp-wa{margin-bottom:22px;}

.pp-trust{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:22px 0;}
.pp-trust div{display:flex; gap:11px; align-items:flex-start; padding:13px 14px; background:var(--surface); border:1px solid var(--line-soft); border-radius:14px; font-size:12.5px; line-height:1.4; color:var(--text-muted);}
.pp-trust svg{width:22px; height:22px; flex:none; color:var(--accent-2);}
.pp-trust b{display:block; color:var(--text); font-size:13px; margin-bottom:1px;}

.pp-pay{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12px; color:var(--text-muted);}
.pp-pay span.p{padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--text); font-weight:600;}

.pp-section{margin-top:44px;}
.pp-section > h2{font-size:22px; margin-bottom:16px; display:flex; align-items:center; gap:10px;}
.pp-section > h2::before{content:""; width:4px; height:22px; border-radius:2px; background:var(--accent);}
.pp-desc .desc-heading{font:700 13px 'Chakra Petch',sans-serif; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent-2); margin:20px 0 8px;}
.pp-desc .desc-p{color:#d9d4e0; margin:0 0 10px; font-size:15px;}
.pp-desc ul{list-style:none; padding:0; margin:0 0 10px; display:grid; gap:9px;}
.pp-desc li{position:relative; padding-left:28px; font-size:15px; color:#e2dde8;}
.pp-desc ul:not(.plain) li::before{content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%; background:rgba(61,220,132,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ddc84' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;}
.pp-desc ul.plain li::before{content:""; position:absolute; left:8px; top:10px; width:6px; height:6px; border-radius:50%; background:var(--accent-2);}
.pp-video{border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#000;}
.pp-video.r16{aspect-ratio:16/9;} .pp-video.r9{aspect-ratio:9/16; max-width:340px;}
.pp-video iframe{width:100%; height:100%; border:0; display:block;}

.pp-steps{display:grid; gap:12px;}
@media(min-width:700px){ .pp-steps{grid-template-columns:repeat(3,1fr);} }
.pp-step{padding:18px; border-radius:16px; background:var(--surface); border:1px solid var(--line-soft);}
.pp-step .n{width:30px; height:30px; border-radius:50%; background:rgba(237,28,36,.16); color:var(--accent-2); font:700 14px 'Space Mono',monospace; display:flex; align-items:center; justify-content:center; margin-bottom:10px;}
.pp-step b{display:block; margin-bottom:3px;}
.pp-step p{margin:0; font-size:13.5px; color:var(--text-muted);}

.pp-related{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
@media(min-width:900px){ .pp-related{grid-template-columns:repeat(4,1fr); gap:18px;} }
.pp-rel{display:flex; flex-direction:column; text-decoration:none; background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; transition:transform .18s, border-color .18s;}
.pp-rel:hover{transform:translateY(-3px); border-color:#5a4f53;}
.pp-rel .im{aspect-ratio:1/1; background:#181416;}
.pp-rel .im img{width:100%; height:100%; object-fit:cover;}
.pp-rel .tx{padding:12px 14px 14px;}
.pp-rel .nm{font:700 14px/1.3 'Chakra Petch',sans-serif; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em;}
.pp-rel .pr{font:700 14px 'Space Mono',monospace; color:var(--accent-2); margin-top:6px;}

/* Mobile sticky buy bar */
.pp-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(16,14,16,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line);
}
.pp-sticky .sp{display:flex; flex-direction:column; line-height:1.15; margin-right:auto;}
.pp-sticky .sp small{font-size:11px; color:var(--text-muted);}
.pp-sticky .sp b{font:700 18px 'Space Mono',monospace; color:var(--accent-2);}
.pp-sticky .ux-btn{padding:13px 18px; font-size:14px;}
@media(min-width:900px){ .pp-sticky{display:none;} }

/* ======================================================================
   CHECKOUT (co-)
   ====================================================================== */
.co{max-width:1100px; margin:0 auto; padding:22px 20px 70px;}
.co-top{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:20px;}
.co-top h1{font-size:clamp(26px,5vw,34px);}
.co-secure{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--text-muted);}
.co-secure svg{width:17px; height:17px; color:var(--ok);}
.co-steps{display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--text-muted); margin-bottom:24px; flex-wrap:wrap;}
.co-steps .s{display:flex; align-items:center; gap:8px;}
.co-steps .s i{width:24px; height:24px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font:700 12px 'Space Mono',monospace; font-style:normal;}
.co-steps .s.done i{background:var(--ok); border-color:var(--ok); color:#06210f;}
.co-steps .s.now{color:var(--text);} .co-steps .s.now i{background:var(--accent); border-color:var(--accent); color:#fff;}
.co-steps .bar{width:28px; height:1px; background:var(--line);}

.co-grid{display:grid; gap:22px;}
@media(min-width:900px){ .co-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr); gap:34px; align-items:start;} }
.co-main{display:grid; gap:18px;}
.co-card-title{display:flex; align-items:center; gap:12px; font-size:18px; margin-bottom:18px;}
.co-card-title i{width:30px; height:30px; flex:none; border-radius:50%; background:rgba(237,28,36,.16); color:var(--accent-2); font:700 14px 'Space Mono',monospace; display:flex; align-items:center; justify-content:center; font-style:normal;}

/* payment methods */
.ux-pays{display:grid; gap:12px;}
.ux-pay{display:block; border:1.5px solid var(--line); border-radius:16px; background:var(--bg-alt); cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s; overflow:hidden;}
.ux-pay:hover{border-color:#5a4f53;}
.ux-pay.active{border-color:var(--accent); background:rgba(237,28,36,.06); box-shadow:0 0 0 3px rgba(237,28,36,.12);}
.ux-pay-head{display:flex; align-items:center; gap:14px; padding:16px 18px;}
.ux-pay input{position:absolute; opacity:0; pointer-events:none;}
.ux-radio{width:22px; height:22px; flex:none; border-radius:50%; border:2px solid #6a5e62; display:flex; align-items:center; justify-content:center; transition:border-color .15s;}
.ux-pay.active .ux-radio{border-color:var(--accent);}
.ux-pay.active .ux-radio::after{content:""; width:10px; height:10px; border-radius:50%; background:var(--accent);}
.ux-pay-ic{width:44px; height:44px; flex:none; border-radius:12px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--accent-2);}
.ux-pay-ic svg{width:23px; height:23px;}
.ux-pay-tx{flex:1; min-width:0;}
.ux-pay-tx b{display:block; font-size:15px;}
.ux-pay-tx span{font-size:12.5px; color:var(--text-muted);}
.ux-pay-tag{font:700 10px 'Space Mono',monospace; letter-spacing:1px; text-transform:uppercase; padding:4px 9px; border-radius:999px; background:rgba(61,220,132,.14); color:var(--ok); white-space:nowrap;}
.ux-pay-body{display:none; padding:0 18px 18px 18px; font-size:13.5px; color:var(--text-muted);}
.ux-pay.active .ux-pay-body{display:block;}
.ux-pay-body p{margin:0 0 10px;}
.ux-bank{border:1px dashed #5a4f53; border-radius:14px; padding:6px 16px; background:rgba(0,0,0,.2); margin-bottom:12px;}
.ux-bank-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line-soft);}
.ux-bank-row:last-child{border-bottom:0;}
.ux-bank-row span{font-size:12px; color:var(--text-muted);}
.ux-bank-row b{font:700 14px 'Space Mono',monospace; color:var(--text); text-align:right; word-break:break-all;}
.ux-copy{border:1px solid var(--line); background:var(--surface-2); color:var(--text); border-radius:999px; padding:5px 11px; font:600 11px 'Plus Jakarta Sans',sans-serif; cursor:pointer; margin-left:10px; flex:none;}
.ux-copy:hover{border-color:var(--accent-2);}
.ux-note{display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:#ffd2c7; background:rgba(255,106,77,.08); border:1px solid rgba(255,106,77,.25); border-radius:12px; padding:11px 13px;}
.ux-note svg{width:17px; height:17px; flex:none; margin-top:1px;}
.ux-cards-logos{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
.ux-cards-logos span{font:700 11px 'Space Mono',monospace; padding:4px 10px; border-radius:6px; background:#fff; color:#1a1a2e; letter-spacing:.5px;}

/* summary */
.co-summary{position:relative;}
@media(min-width:900px){ .co-summary{position:sticky; top:88px;} }
.co-sum-card{padding:0; overflow:hidden;}
.co-sum-card summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; font:700 17px 'Chakra Petch',sans-serif;}
.co-sum-card summary::-webkit-details-marker{display:none;}
.co-sum-card summary .t{font:700 16px 'Space Mono',monospace; color:var(--accent-2);}
.co-sum-card summary .chev{transition:transform .2s; width:18px; height:18px; margin-left:8px;}
.co-sum-card[open] summary .chev{transform:rotate(180deg);}
@media(min-width:900px){ .co-sum-card summary{pointer-events:none; cursor:default;} .co-sum-card summary .chev,.co-sum-card summary .t{display:none;} }
.co-sum-body{padding:0 22px 22px; border-top:1px solid var(--line);}
.co-sum-body .ux-item{padding:14px 0;}
.co-sum-body .ux-item-img{width:62px; height:62px;}
.co-place{margin-top:18px;}
.co-fine{font-size:12px; color:var(--text-muted); text-align:center; margin:14px 0 0; line-height:1.5;}
.co-fine a{text-decoration:underline;}
.co-perks{display:grid; gap:9px; margin-top:16px; padding-top:16px; border-top:1px dashed var(--line);}
.co-perks div{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--text-muted);}
.co-perks svg{width:17px; height:17px; color:var(--accent-2); flex:none;}
.co-empty{max-width:520px; margin:70px auto; text-align:center;}
.co-empty svg{width:72px; height:72px; margin:0 auto 18px; opacity:.45;}
.co-empty h2{font-size:26px; margin-bottom:8px;}
.co-empty p{color:var(--text-muted); margin:0 0 24px;}

/* ======================================================================
   SUCCESS / CANCEL (ok-)
   ====================================================================== */
.ok{max-width:640px; margin:0 auto; padding:34px 20px 80px;}
.ok-hero{text-align:center; margin-bottom:26px;}
.ok-ic{width:84px; height:84px; margin:0 auto 18px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.ok-ic.good{background:rgba(61,220,132,.14); color:var(--ok); box-shadow:0 0 0 10px rgba(61,220,132,.06);}
.ok-ic.warn{background:rgba(255,106,77,.14); color:var(--accent-2); box-shadow:0 0 0 10px rgba(255,106,77,.06);}
.ok-ic svg{width:42px; height:42px; stroke-dasharray:60; stroke-dashoffset:60; animation:ok-draw .7s .15s ease forwards;}
@keyframes ok-draw{to{stroke-dashoffset:0;}}
.ok-hero h1{font-size:clamp(26px,6vw,34px); margin-bottom:8px;}
.ok-hero p{color:var(--text-muted); margin:0 auto; max-width:460px;}
.ok-id{display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:8px 16px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font:700 14px 'Space Mono',monospace;}
.ok-id span{font:600 12px 'Plus Jakarta Sans',sans-serif; color:var(--text-muted);}
.ok-card{margin-bottom:16px;}
.ok-card h2{font-size:17px; margin-bottom:12px;}
.ok-todo{display:grid; gap:12px; counter-reset:s;}
.ok-todo li{list-style:none; display:flex; gap:12px; align-items:flex-start; font-size:14px; color:#d9d4e0;}
.ok-todo li::before{counter-increment:s; content:counter(s); width:26px; height:26px; flex:none; border-radius:50%; background:rgba(237,28,36,.16); color:var(--accent-2); font:700 13px 'Space Mono',monospace; display:flex; align-items:center; justify-content:center;}
.ok-todo{margin:0; padding:0;}
.ok-actions{display:grid; gap:12px; margin-top:22px;}

/* ======================================================================
   SHARED EXTRAS (icons, footer, select arrow, autofill, spinner, focus)
   ====================================================================== */
.ux svg.i{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.ux svg.i.f{fill:currentColor; stroke:none;}

.ux-footer{border-top:1px solid var(--line); margin-top:34px; padding:26px 20px calc(26px + env(safe-area-inset-bottom)); text-align:center; font-size:13px; color:var(--text-muted);}
.ux-footer nav{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin-bottom:12px;}
.ux-footer a{text-decoration:none;}
.ux-footer a:hover{color:var(--text); text-decoration:underline;}
.ux-footer p{margin:0;}

.ux-select{
  appearance:none; -webkit-appearance:none; padding-right:42px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a29cac' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px;
}
.ux-select option{background:#1e1a1c; color:#f5f3ff;}

.ux-input:-webkit-autofill,.ux-textarea:-webkit-autofill,.ux-select:-webkit-autofill{
  -webkit-box-shadow:0 0 0 100px var(--bg-alt) inset; -webkit-text-fill-color:var(--text); caret-color:var(--text);
}
.ux-pay:focus-within{outline:2px solid var(--accent-2); outline-offset:2px;}

.ux-btn.loading{position:relative; color:transparent !important; pointer-events:none;}
.ux-btn.loading::after{
  content:""; position:absolute; width:20px; height:20px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; animation:ux-spin .7s linear infinite;
}
@keyframes ux-spin{to{transform:rotate(360deg);}}

.ux-copied{color:var(--ok) !important; border-color:var(--ok) !important;}

@media (prefers-reduced-motion: reduce){
  .ux *,.ux-drawer,.ux-toast{transition:none !important; animation:none !important;}
  .ux-btn.loading::after{animation-duration:1.6s !important;}
  .ok-ic svg{stroke-dashoffset:0;}
}