/* CASA INÉS — custom cart/checkout (PT-BR, R$) layered over the Shopify theme */
:root{
  --ci-accent:#810f0f;
  --ci-accent-dark:#5e0a0a;
  --ci-green:#1f8f4e;
  --ci-ink:#1a1a1a;
  --ci-muted:#6b6b6b;
  --ci-line:#e6e6e6;
  --ci-bg:#ffffff;
  --ci-radius:10px;
  --ci-font:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ---------- cart count badge ---------- */
.ci-cart-badge{
  position:absolute; top:-6px; right:-8px; min-width:18px; height:18px; padding:0 5px;
  background:var(--ci-accent); color:#fff; border-radius:999px; font:600 11px/18px var(--ci-font);
  text-align:center; box-shadow:0 0 0 2px #fff;
}
.ci-cart-anchor{position:relative;}

/* ---------- drawer ---------- */
.ci-overlay{position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; visibility:hidden;
  transition:opacity .25s ease; z-index:99998;}
.ci-overlay.open{opacity:1; visibility:visible;}
.ci-drawer{position:fixed; top:0; right:0; height:100%; width:420px; max-width:92vw; background:#fff;
  transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); z-index:99999;
  display:flex; flex-direction:column; font-family:var(--ci-font); box-shadow:-8px 0 40px rgba(0,0,0,.15);}
.ci-drawer.open{transform:translateX(0);}
.ci-drawer__head{display:flex; align-items:center; justify-content:space-between; padding:20px 22px;
  border-bottom:1px solid var(--ci-line);}
.ci-drawer__head h2{margin:0; font:600 16px/1 var(--ci-font); letter-spacing:.04em; text-transform:uppercase; color:var(--ci-ink);}
.ci-x{background:none; border:0; cursor:pointer; font-size:22px; line-height:1; color:var(--ci-ink); padding:4px;}
.ci-drawer__body{flex:1; overflow-y:auto; padding:8px 22px;}
.ci-empty{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  height:100%; color:var(--ci-muted); text-align:center;}
.ci-empty a{color:var(--ci-accent); font-weight:600; text-decoration:none;}
.ci-line{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--ci-line);}
.ci-line__img{width:70px; height:70px; object-fit:cover; border-radius:8px; background:#f3f3f3; flex:none;}
.ci-line__info{flex:1; min-width:0;}
.ci-line__title{font:500 14px/1.35 var(--ci-font); color:var(--ci-ink); margin:0 0 2px; text-decoration:none; display:block;}
.ci-line__var{font:400 12px/1.3 var(--ci-muted); color:var(--ci-muted); margin-bottom:8px;}
.ci-line__row{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.ci-qty{display:inline-flex; align-items:center; border:1px solid var(--ci-line); border-radius:999px;}
.ci-qty button{width:28px; height:28px; background:none; border:0; cursor:pointer; font-size:15px; color:var(--ci-ink);}
.ci-qty span{min-width:24px; text-align:center; font:500 13px var(--ci-font);}
.ci-line__price{font:600 14px var(--ci-font); color:var(--ci-ink); white-space:nowrap;}
.ci-line__remove{background:none;border:0;cursor:pointer;color:var(--ci-muted);font-size:11px;text-decoration:underline;padding:0;margin-top:6px;}
.ci-drawer__foot{padding:18px 22px 24px; border-top:1px solid var(--ci-line);}
.ci-subtotal{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;}
.ci-subtotal span:first-child{font:600 14px var(--ci-font); text-transform:uppercase; letter-spacing:.03em;}
.ci-subtotal span:last-child{font:700 18px var(--ci-font);}
.ci-note{font:400 12px var(--ci-muted); color:var(--ci-muted); margin:0 0 14px;}
.ci-btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:15px 18px;
  background:var(--ci-ink); color:#fff; border:0; border-radius:6px; cursor:pointer; text-decoration:none;
  font:600 14px/1 var(--ci-font); letter-spacing:.03em; text-transform:uppercase; transition:background .15s;}
.ci-btn:hover{background:#000;}
.ci-btn--accent{background:var(--ci-accent);} .ci-btn--accent:hover{background:var(--ci-accent-dark);}
.ci-btn--green{background:var(--ci-green);} .ci-btn--green:hover{filter:brightness(.93);}
.ci-btn[disabled]{opacity:.5; cursor:not-allowed;}
.ci-btn--ghost{background:#fff; color:var(--ci-ink); border:1px solid var(--ci-ink);}
.ci-btn--ghost:hover{background:#f6f6f6;}

/* ---------- product page variant select (injected) ---------- */
.ci-variant{margin:14px 0;}
.ci-variant label{display:block; font:600 12px var(--ci-font); text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px; color:var(--ci-ink);}
.ci-variant select{width:100%; padding:12px 14px; border:1px solid #cfcfcf; border-radius:6px; font:400 14px var(--ci-font); background:#fff;}

/* ---------- checkout & cart pages ---------- */
.ci-page{font-family:var(--ci-font); color:var(--ci-ink); background:#fafafa; min-height:100vh;}
.ci-topbar{background:#fff; border-bottom:1px solid var(--ci-line);}
.ci-topbar__in{max-width:1100px; margin:0 auto; padding:20px 24px; display:flex; align-items:center; justify-content:space-between;}
.ci-logo{font:600 24px var(--ci-font); letter-spacing:.18em; color:var(--ci-ink); text-decoration:none;}
.ci-logo small{display:block; font:400 9px var(--ci-font); letter-spacing:.22em; color:var(--ci-muted); text-align:center; margin-top:2px;}
.ci-secure{font:500 12px var(--ci-font); color:var(--ci-muted); display:flex; align-items:center; gap:6px;}
.ci-wrap{max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr; gap:0; align-items:start;}
.ci-col-main{padding:40px 48px 80px;}
.ci-col-side{padding:40px 48px 80px; background:#fff; border-left:1px solid var(--ci-line); min-height:100vh;}
@media(max-width:880px){ .ci-wrap{grid-template-columns:1fr;} .ci-col-side{border-left:0; border-top:1px solid var(--ci-line); min-height:auto;} .ci-col-main,.ci-col-side{padding:28px 22px;} }
.ci-h{font:600 18px var(--ci-font); margin:0 0 16px; color:var(--ci-ink);}
.ci-h2{font:600 14px var(--ci-font); text-transform:uppercase; letter-spacing:.04em; margin:28px 0 12px; color:var(--ci-ink);}
.ci-field{margin-bottom:14px;}
.ci-field label{display:block; font:500 12px var(--ci-font); color:var(--ci-muted); margin-bottom:6px;}
.ci-field input,.ci-field select,.ci-field textarea{width:100%; padding:13px 14px; border:1px solid #cfcfcf; border-radius:6px;
  font:400 14px var(--ci-font); background:#fff; box-sizing:border-box;}
.ci-field input:focus,.ci-field select:focus{outline:none; border-color:var(--ci-accent); box-shadow:0 0 0 2px rgba(129,15,15,.12);}
.ci-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.ci-row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
.ci-err{color:#c0392b; font:500 12px var(--ci-font); margin-top:4px; display:none;}
.ci-field.invalid input,.ci-field.invalid select{border-color:#c0392b;}
.ci-field.invalid .ci-err{display:block;}

/* payment methods */
.ci-pay{border:1px solid var(--ci-line); border-radius:8px; overflow:hidden; margin-bottom:24px;}
.ci-pay__opt{display:flex; align-items:center; gap:12px; padding:16px 16px; border-bottom:1px solid var(--ci-line); cursor:pointer;}
.ci-pay__opt:last-child{border-bottom:0;}
.ci-pay__opt input{accent-color:var(--ci-accent); width:18px; height:18px;}
.ci-pay__opt.disabled{cursor:not-allowed; color:var(--ci-muted); background:#fafafa;}
.ci-pay__name{font:600 14px var(--ci-font); display:flex; align-items:center; gap:8px;}
.ci-pay__tag{font:600 11px var(--ci-font); color:#fff; background:var(--ci-green); padding:2px 8px; border-radius:999px;}
.ci-pay__sub{font:400 12px var(--ci-muted); margin-top:2px;}
.ci-pay__body{padding:0 16px 16px; display:none;}
.ci-pay__opt.active + .ci-pay__body{display:block;}
.ci-badge-soon{font:600 11px var(--ci-font); color:#9a6a00; background:#fdf3d6; padding:2px 8px; border-radius:999px;}

/* order summary */
.ci-sum-line{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--ci-line);}
.ci-sum-line img{width:56px; height:56px; object-fit:cover; border-radius:6px; background:#f3f3f3;}
.ci-sum-line .t{flex:1; font:500 13px/1.35 var(--ci-font);}
.ci-sum-line .v{font:400 12px var(--ci-muted);}
.ci-sum-line .p{font:600 13px var(--ci-font); white-space:nowrap;}
.ci-sum-tot{margin-top:18px;}
.ci-sum-tot .r{display:flex; justify-content:space-between; padding:6px 0; font:400 14px var(--ci-font); color:var(--ci-muted);}
.ci-sum-tot .r.total{font:700 20px var(--ci-font); color:var(--ci-ink); border-top:1px solid var(--ci-line); padding-top:14px; margin-top:6px;}
.ci-pixoff{background:#eafaf0; border:1px solid #bfe8cf; border-radius:8px; padding:12px 14px; font:500 13px var(--ci-font); color:#176b3a; margin-top:14px;}

/* pix result */
.ci-pix-box{text-align:center;}
.ci-pix-box img{width:230px; height:230px; border:1px solid var(--ci-line); border-radius:8px; padding:8px; background:#fff;}
.ci-copy{display:flex; gap:8px; margin-top:14px;}
.ci-copy input{flex:1; padding:11px; border:1px solid #cfcfcf; border-radius:6px; font:400 12px monospace;}
.ci-copy button{padding:0 16px; border:0; background:var(--ci-ink); color:#fff; border-radius:6px; cursor:pointer; font:600 12px var(--ci-font);}
.ci-status{margin-top:16px; font:600 13px var(--ci-font);}
.ci-spinner{display:inline-block;width:16px;height:16px;border:2px solid #ccc;border-top-color:var(--ci-accent);border-radius:50%;animation:cispin .8s linear infinite;vertical-align:-3px;margin-right:6px;}
@keyframes cispin{to{transform:rotate(360deg)}}
.ci-back{display:inline-block; margin-top:18px; color:var(--ci-muted); font:500 13px var(--ci-font); text-decoration:none;}
.ci-back:hover{color:var(--ci-ink);}