*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --red:#E31E24;--red2:#C0181E;--dark:#1a1a1a;--mid:#555;
  --gray:#f4f5f7;--lgray:#e8eaed;--white:#fff;
  --green:#16a34a;--amber:#d97706;--blue:#2563eb;--purple:#7c3aed;
  --r:10px;--sh:0 2px 12px rgba(0,0,0,.1);
  --font:"Segoe UI",system-ui,sans-serif;
}
body{font-family:var(--font);background:#f0f2f5;color:var(--dark);min-height:100vh}
.tc{max-width:1440px;margin:0 auto;background:var(--white);min-height:100vh}
/* ── Header */
.tc-hdr{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 20px;background:var(--dark);position:sticky;top:0;z-index:100;
  box-shadow:0 2px 8px rgba(0,0,0,.3)}
.tc-logo{font-size:1.15rem;font-weight:700;color:#fff;white-space:nowrap}
.tc-logo span{color:var(--red)}
.tc-tabs{display:flex;gap:6px;margin-left:auto}
.tc-tab{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:34px;padding:8px 20px;border:none;border-radius:6px;cursor:pointer;
  font-size:.88rem;font-weight:700;background:rgba(255,255,255,.09);
  color:rgba(255,255,255,.78);transition:.2s;position:relative;line-height:1}
.tc-tab:hover{background:rgba(255,255,255,.17);color:#fff}
.tc-tab.active{background:var(--red);color:#fff}
.tc-badge{position:absolute;top:-6px;right:-8px;background:var(--amber);color:#fff;
  font-size:.68rem;font-weight:700;border-radius:999px;padding:1px 6px;
  min-width:18px;text-align:center;display:none}
/* ── Panels */
.tc-panel{display:none;padding:20px}
.tc-panel.active{display:block}
/* ── Product browsing layout */
.tc-prod-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:18px;align-items:start}
.tc-catpane{position:sticky;top:72px;background:var(--gray);border:1.5px solid var(--lgray);
  border-radius:var(--r);padding:13px;max-height:calc(100vh - 96px);overflow:auto}
.tc-cat-title{font-size:.76rem;font-weight:800;color:var(--mid);text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:10px}
.tc-products-main{min-width:0}
/* ── Filter bar */
.tc-fbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  background:var(--gray);border-radius:var(--r);padding:12px 16px;margin-bottom:12px}
.tc-search{flex:1;min-width:200px;padding:9px 14px;border:1.5px solid var(--lgray);
  border-radius:8px;font-size:.9rem;outline:none;transition:.2s}
.tc-search:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(227,30,36,.1)}
.tc-sel{padding:9px 12px;border:1.5px solid var(--lgray);border-radius:8px;
  font-size:.88rem;background:var(--white);cursor:pointer;outline:none}
.tc-sel:focus{border-color:var(--red)}
.tc-reset{padding:9px 13px;border:1.5px solid var(--lgray);border-radius:8px;
  background:var(--white);color:var(--mid);font-size:.84rem;font-weight:700;
  cursor:pointer;transition:.2s;white-space:nowrap}
.tc-reset:hover{border-color:var(--red);color:var(--red);background:#fff}
/* ── Category sidebar */
.tc-chips{display:flex;flex-direction:column;gap:6px;scrollbar-width:thin}
.tc-chip{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px;border-radius:8px;border:1.5px solid transparent;background:transparent;
  color:var(--dark);font-size:.8rem;font-weight:600;cursor:pointer;transition:.2s;text-align:left}
.tc-chip:hover{background:var(--white);border-color:#ddd;color:var(--red)}
.tc-chip.active{background:var(--red);color:#fff;border-color:var(--red)}
.tc-chip-count{font-size:.7rem;font-weight:700;border-radius:999px;padding:1px 7px;
  color:var(--mid);background:var(--white);min-width:24px;text-align:center}
.tc-chip.active .tc-chip-count{color:var(--red);background:#fff}
/* ── Product grid */
.tc-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:15px}
.tc-card{border-radius:var(--r);border:1.5px solid var(--lgray);overflow:hidden;
  transition:.25s;background:var(--white)}
.tc-card:hover{box-shadow:var(--sh);border-color:#ccc;transform:translateY(-2px)}
.tc-cimg{width:100%;aspect-ratio:1;object-fit:contain;background:var(--gray);
  display:block;padding:8px}
.tc-cph{width:100%;aspect-ratio:1;display:flex;align-items:center;
  justify-content:center;font-size:2.5rem;background:var(--gray);color:var(--lgray)}
.tc-cbody{padding:10px 12px}
.tc-ccat{font-size:.69rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--red);margin-bottom:2px}
.tc-cname{font-size:.82rem;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.2em;margin-bottom:5px}
.tc-cprice{font-size:1rem;font-weight:700;color:var(--green);margin-bottom:8px}
.tc-cacts{display:flex;gap:6px}
.tc-btn-add{flex:1;padding:7px 8px;background:var(--red);color:#fff;
  border:none;border-radius:6px;font-size:.79rem;font-weight:600;
  cursor:pointer;transition:.2s}
.tc-btn-add:hover{background:var(--red2)}
.tc-btn-add.in{background:var(--green)}
.tc-btn-qv{padding:7px 10px;background:var(--gray);color:var(--mid);
  border:1.5px solid var(--lgray);border-radius:6px;font-size:.8rem;
  cursor:pointer;transition:.2s}
.tc-btn-qv:hover{background:var(--lgray)}
/* ── Loading */
.tc-load{text-align:center;padding:60px 20px;color:var(--mid)}
.tc-spin{width:46px;height:46px;border:4px solid var(--lgray);
  border-top-color:var(--red);border-radius:50%;
  animation:spin .8s linear infinite;margin:0 auto 14px}
@keyframes spin{to{transform:rotate(360deg)}}
/* ── Pagination */
.tc-pag{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;
  margin-top:22px;padding-top:14px;border-top:1px solid var(--lgray)}
.tc-pb{padding:6px 12px;border:1.5px solid var(--lgray);border-radius:6px;
  background:var(--white);color:var(--dark);cursor:pointer;font-size:.84rem;font-weight:700;transition:.2s}
.tc-pb:hover{border-color:var(--red);color:var(--red)}
.tc-pb.active{background:var(--red);color:#fff;border-color:var(--red)}
.tc-rc{font-size:.8rem;color:#999;margin-bottom:6px}
/* ── Projects */
.tc-pfil{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  background:var(--gray);border-radius:var(--r);padding:12px 16px;margin-bottom:16px}
.tc-kl{display:flex;align-items:center;gap:6px;font-size:.88rem;font-weight:500;cursor:pointer}
.tc-projgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(275px,1fr));gap:16px}
.tc-pjcard{border-radius:var(--r);border:1.5px solid var(--lgray);
  overflow:hidden;background:var(--white);transition:.25s;cursor:pointer}
.tc-pjcard:hover{box-shadow:var(--sh);border-color:#ccc;transform:translateY(-2px)}
.tc-pjstripe{height:4px}
.tc-pjbody{padding:13px 16px}
.tc-pjtop{display:flex;gap:8px;align-items:flex-start;margin-bottom:6px}
.tc-pjtitle{font-size:.93rem;font-weight:700;flex:1;line-height:1.3}
.tc-pjcost{font-size:.88rem;font-weight:700;color:var(--green);white-space:nowrap}
.tc-badges{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px}
.tc-pill{padding:2px 10px;border-radius:999px;font-size:.71rem;font-weight:600}
.diff-beg{background:#dcfce7;color:var(--green)}
.diff-int{background:#fef9c3;color:#854d0e}
.diff-adv{background:#fee2e2;color:var(--red2)}
.tier-b{background:#eff6ff;color:var(--blue)}
.tier-m{background:#fff7ed;color:#c2410c}
.tier-p{background:#fdf4ff;color:var(--purple)}
.mc-ard{background:var(--blue);color:#fff}
.mc-e32{background:var(--red);color:#fff}
.mc-e86{background:#ea8507;color:#fff}
.mc-rpi{background:var(--purple);color:#fff}
.mc-opi{background:#e36a1e;color:#fff}
/* ── MCU filter chips (Projects panel) ───────────────────────── */
.tc-mcu-bar{display:flex;gap:7px;flex-wrap:wrap;align-items:center;
  margin-bottom:12px;padding:10px 16px;background:var(--gray);border-radius:var(--r)}
.tc-mcu-chip{display:flex;align-items:center;gap:6px;padding:7px 14px;
  border-radius:999px;border:1.5px solid var(--lgray);background:var(--white);
  font-size:.82rem;font-weight:600;cursor:pointer;transition:.2s;
  white-space:nowrap;color:var(--dark);flex-shrink:0}
.tc-mcu-chip:hover{border-color:#aaa;background:var(--lgray)}
.tc-mcu-chip.active{background:var(--dark);color:#fff;border-color:var(--dark)}
.tc-mcu-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.tc-pjline{font-size:.81rem;color:var(--mid);line-height:1.5;margin-bottom:4px}
/* ── Project modal */
.tc-mbg{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;
  display:none;align-items:flex-start;justify-content:center;
  padding:20px;overflow-y:auto}
.tc-mbg.open{display:flex}
.tc-modal{background:var(--white);border-radius:14px;width:100%;max-width:740px;
  max-height:90vh;overflow-y:auto;position:relative;margin:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.3)}
.tc-mclose{position:sticky;top:12px;float:right;margin:12px 14px 0;
  background:var(--lgray);border:none;border-radius:50%;
  width:32px;height:32px;cursor:pointer;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;z-index:5;transition:.2s}
.tc-mclose:hover{background:var(--red);color:#fff}
.tc-mstripe{height:5px;border-radius:14px 14px 0 0}
.tc-minner{padding:18px 22px 26px;clear:both}
.tc-mtitle{font-size:1.25rem;font-weight:700;margin-bottom:3px}
.tc-msub{color:var(--mid);font-size:.88rem;margin-bottom:10px}
.tc-mbadges{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px}
.tc-step{margin-bottom:18px;padding:13px 15px;background:var(--gray);
  border-radius:8px;border-left:3px solid var(--red)}
.tc-stitle{font-weight:700;margin-bottom:5px;font-size:.89rem}
.tc-sdesc{font-size:.84rem;line-height:1.6;color:var(--mid);margin-bottom:6px}
.tc-slbl{font-size:.73rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--red);margin:7px 0 4px}
.tc-pinout{font-family:monospace;font-size:.77rem;background:#1e1e2e;
  color:#cdd6f4;padding:10px 14px;border-radius:6px;white-space:pre-wrap;line-height:1.6}
.tc-code{font-family:monospace;font-size:.74rem;background:#1e2030;
  color:#c0caf5;padding:10px 14px;border-radius:6px;white-space:pre-wrap;
  line-height:1.6;max-height:300px;overflow-y:auto}
.tc-plist{list-style:none;display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.tc-plist li{display:flex;align-items:center;justify-content:space-between;
  font-size:.81rem;padding:5px 10px;background:var(--gray);border-radius:6px}
.tc-plist a{color:var(--blue);text-decoration:none;font-weight:500}
.tc-plist a:hover{text-decoration:underline}
.tc-pp{color:var(--green);font-weight:600;font-size:.79rem}
.tc-proj-addbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 14px;padding:10px 12px;background:#fff5f5;border:1.5px solid #fecaca;border-radius:8px}
.tc-proj-addbar .tc-btn-add{width:auto;min-width:190px}
.tc-proj-addnote{font-size:.78rem;color:#666}
.tc-part-miss{font-size:.74rem;color:#999;margin-left:8px;white-space:nowrap}
/* ── QV modal */
.tc-qvbg{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;
  display:none;align-items:center;justify-content:center;padding:20px}
.tc-qvbg.open{display:flex}
.tc-qv{background:var(--white);border-radius:14px;max-width:580px;width:100%;
  padding:22px;position:relative;max-height:90vh;overflow-y:auto}
.tc-qvx{position:absolute;top:12px;right:14px;background:var(--lgray);
  border:none;border-radius:50%;width:32px;height:32px;cursor:pointer;
  font-size:1rem;transition:.2s;display:flex;align-items:center;justify-content:center}
.tc-qvx:hover{background:var(--red);color:#fff}
.tc-qvlayout{display:flex;gap:18px;flex-wrap:wrap}
.tc-qvimg{width:180px;height:180px;object-fit:contain;background:var(--gray);
  border-radius:8px;flex-shrink:0}
.tc-qvinfo{flex:1;min-width:180px}
.tc-qvname{font-size:.98rem;font-weight:700;margin-bottom:7px}
.tc-qvprice{font-size:1.25rem;font-weight:700;color:var(--green);margin-bottom:6px}
.tc-qvvar{margin:10px 0 14px}
.tc-qvvar label{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--mid);margin-bottom:5px}
.tc-qvvar select{width:100%;max-width:320px;padding:10px 12px;border:1.5px solid var(--lgray);border-radius:8px;font-size:.92rem;background:#fff;cursor:pointer;transition:border-color .15s}
.tc-qvvar select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(227,30,36,.12)}
.tc-civar{display:inline-block;background:#eff6ff;color:#2563eb;font-size:.66rem;font-weight:700;padding:1px 7px;border-radius:20px;margin-left:5px;vertical-align:middle}
.tc-qvspecs{margin:0 0 14px}
.tc-qvspecs-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--mid);margin-bottom:6px}
.tc-qvspecs ul{list-style:none;margin:0;padding:0;border:1px solid var(--lgray);border-radius:8px;overflow:hidden}
.tc-qvspecs li{display:flex;justify-content:space-between;gap:14px;padding:7px 12px;font-size:.84rem;border-top:1px solid var(--lgray)}
.tc-qvspecs li:first-child{border-top:none}
.tc-qvspecs li:nth-child(even){background:#f7f8fa}
.tc-qvspecs li .k{color:var(--mid);font-weight:600}
.tc-qvspecs li .v{color:var(--dark);font-weight:700;text-align:right}
.tc-qvmeta{font-size:.77rem;color:var(--mid);margin-bottom:6px}
.tc-qvdesc{font-size:.81rem;line-height:1.5;color:var(--mid);margin-bottom:10px}
.tc-qvlink{color:var(--blue);font-size:.81rem;text-decoration:none}
.tc-qvsec{margin-top:14px;border-top:1.5px solid var(--lgray);padding-top:12px}
.tc-qvsect{font-size:.74rem;font-weight:700;color:var(--mid);text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:8px}
.tc-qvideas{font-size:.79rem;line-height:1.55;color:var(--mid);white-space:pre-line;
  max-height:220px;overflow:auto;background:var(--gray);border-radius:8px;padding:10px 12px}
.tc-qvproj{display:flex;flex-direction:column;gap:6px}
.tc-qvproj button{text-align:left;border:1.5px solid var(--lgray);background:var(--white);
  border-radius:7px;padding:8px 10px;cursor:pointer;font-size:.8rem;font-weight:600;color:var(--dark)}
.tc-qvproj button:hover{border-color:var(--red);color:var(--red)}
/* ── QV — Pairs well with */
.tc-acc-wrap{margin-top:18px;border-top:1.5px solid var(--lgray);padding-top:14px}
.tc-acc-title{font-size:.74rem;font-weight:700;color:var(--mid);text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:10px}
.tc-acc-row{display:flex;gap:9px;flex-wrap:wrap}
.tc-acc-card{display:flex;gap:9px;align-items:flex-start;background:var(--gray);
  border-radius:8px;padding:8px 10px;flex:1 1 160px;max-width:240px;cursor:default}
.tc-acc-card:hover{background:var(--lgray)}
.tc-acc-img{width:42px;height:42px;object-fit:contain;background:#fff;
  border-radius:5px;flex-shrink:0}
.tc-acc-body{flex:1;min-width:0}
.tc-acc-chip{font-size:.66rem;font-weight:700;color:var(--red);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:2px}
.tc-acc-name{font-size:.74rem;font-weight:600;line-height:1.3;margin-bottom:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tc-acc-price{font-size:.76rem;color:var(--green);font-weight:700;margin-bottom:5px}
.tc-acc-add{background:var(--dark);color:#fff;border:none;border-radius:4px;
  padding:4px 9px;font-size:.71rem;cursor:pointer;transition:.15s;white-space:nowrap;width:100%}
.tc-acc-add:hover{background:var(--red)}
.tc-acc-add.in{background:var(--green)}
/* ── Cart */
.tc-clayout{display:grid;grid-template-columns:290px 1fr;gap:22px;align-items:start}
@media(max-width:680px){.tc-clayout{grid-template-columns:1fr}}
.tc-cform{background:var(--gray);border-radius:var(--r);padding:16px}
.tc-cform h3{font-size:.93rem;font-weight:700;margin-bottom:11px}
.tc-ff{margin-bottom:9px}
.tc-ff label{display:block;font-size:.77rem;font-weight:600;color:var(--mid);margin-bottom:3px}
.tc-ff input{width:100%;padding:8px 10px;border:1.5px solid var(--lgray);
  border-radius:7px;font-size:.84rem;outline:none;background:var(--white);transition:.2s}
.tc-ff input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(227,30,36,.1)}
.tc-cpanel h3{font-size:.93rem;font-weight:700;margin-bottom:11px}
.tc-empty{text-align:center;padding:40px 20px;color:var(--mid)}
.tc-empty-i{font-size:3rem;margin-bottom:8px}
.tc-citem{display:grid;grid-template-columns:48px 1fr auto auto auto;
  gap:9px;align-items:center;padding:9px 11px;
  background:var(--gray);border-radius:8px;margin-bottom:7px}
.tc-cithumb{width:48px;height:48px;object-fit:contain;background:var(--white);border-radius:5px}
.tc-ciname{font-size:.81rem;font-weight:600;line-height:1.3}
.tc-ciprice{font-size:.78rem;color:var(--mid)}
.tc-qctrl{display:flex;align-items:center;gap:4px}
.tc-qbtn{width:26px;height:26px;border:1.5px solid var(--lgray);
  background:var(--white);border-radius:5px;cursor:pointer;font-size:.95rem;
  font-weight:700;display:flex;align-items:center;justify-content:center;transition:.2s}
.tc-qbtn:hover{background:var(--red);color:#fff;border-color:var(--red)}
.tc-qval{min-width:28px;text-align:center;font-weight:700;font-size:.87rem}
.tc-citot{font-weight:700;font-size:.88rem;color:var(--green);white-space:nowrap}
.tc-rmb{background:none;border:none;cursor:pointer;color:#aaa;
  font-size:1.05rem;transition:.2s;padding:3px}
.tc-rmb:hover{color:var(--red)}
.tc-tots{margin-top:12px;padding:12px 15px;background:var(--gray);
  border-radius:8px;border-top:2px solid var(--lgray)}
.tc-tr{display:flex;justify-content:space-between;align-items:center;
  font-size:.87rem;padding:3px 0;border-bottom:1px solid var(--lgray)}
.tc-tr:last-child{border:none;font-size:.98rem;font-weight:700;
  color:var(--dark);padding-top:7px;margin-top:3px}
.tc-cbtns{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.tc-bprint{flex:1;padding:11px 16px;background:var(--red);color:#fff;
  border:none;border-radius:8px;font-size:.88rem;font-weight:700;cursor:pointer;transition:.2s}
.tc-bprint:hover{background:var(--red2)}
.tc-bclr{padding:11px 14px;background:var(--white);color:var(--mid);
  border:1.5px solid var(--lgray);border-radius:8px;font-size:.86rem;
  font-weight:600;cursor:pointer;transition:.2s}
.tc-bclr:hover{background:var(--lgray)}
/* ── Logo image in header */
.tc-logo-img{max-height:40px;max-width:160px;object-fit:contain;display:block}
/* ── CSS-only product/accessory placeholder (replaces broken emoji) */
.tc-cph--icon::before,.tc-qvimg--ph::before,.tc-acc-img--ph::before{
  content:'';display:block;width:100%;height:100%;
  background:var(--lgray) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23b0b8c5' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M9 21V9'/%3E%3C/svg%3E") center/40% no-repeat}
.tc-qvimg--ph{background:var(--gray)}
.tc-acc-img--ph{width:42px;height:42px;border-radius:5px;background:var(--lgray)}
/* ── CSS-only empty cart icon (replaces broken emoji) */
.tc-cart-icon{width:52px;height:52px;margin:0 auto;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 24 24' fill='none' stroke='%23c8cdd5' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat}
/* ── Projects disclaimer modal ──────────────────────────────────── */
.tc-disc-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:2000;
  display:none;align-items:center;justify-content:center;padding:20px}
.tc-disc-bg.open{display:flex}
.tc-disc-modal{background:var(--white);border-radius:14px;max-width:480px;width:100%;
  padding:30px 28px 24px;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.35)}
.tc-disc-icon{font-size:2.4rem;line-height:1;margin-bottom:12px;color:var(--amber)}
.tc-disc-modal h3{font-size:1.1rem;font-weight:700;margin-bottom:12px;color:var(--dark)}
.tc-disc-modal p{font-size:.86rem;line-height:1.65;color:var(--mid);margin-bottom:10px}
.tc-disc-modal p:last-of-type{margin-bottom:18px}
.tc-disc-btn{padding:11px 28px;background:var(--red);color:#fff;
  border:none;border-radius:8px;font-size:.9rem;font-weight:700;
  cursor:pointer;transition:.2s;width:100%}
.tc-disc-btn:hover{filter:brightness(.88)}
/* ── Estimate notice modal ─────────────────────────────────────── */
.tc-ebg{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:2100;
  display:none;align-items:center;justify-content:center;padding:20px}
.tc-ebg.open{display:flex}
.tc-emodal{background:var(--white);border-radius:14px;max-width:540px;width:100%;
  padding:28px 28px 24px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.tc-etitle{font-size:1.08rem;font-weight:800;color:var(--dark);margin-bottom:12px}
.tc-etext{font-size:.88rem;line-height:1.65;color:#333;margin-bottom:18px}
.tc-eactions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.tc-ecancel,.tc-eok{border:none;border-radius:8px;padding:11px 16px;
  font-size:.88rem;font-weight:700;cursor:pointer}
.tc-ecancel{background:var(--gray);color:var(--mid)}
.tc-eok{background:var(--red);color:#fff}
.tc-eok:hover{filter:brightness(.88)}
/* ── Print only (screen hidden) */
.tc-print-only{display:none}

/* ================================================================
   PRINT  —  A4 proforma invoice
   JS moves #tcPrint to a direct <body> child before window.print(),
   then body[data-tcel-p] > *:not(#tcPrint) hides the entire WP theme.
   ================================================================ */
@page{size:A4 portrait;margin:14mm 14mm 18mm 14mm}

@media print{
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}

  /* Reset html/body */
  html,body{margin:0!important;padding:0!important;background:#fff!important}

  /* Force body to block layout (theme may use flex/grid sticky-footer) */
  body[data-tcel-p]{
    display:block!important;
    margin:0!important;padding:0!important;overflow:hidden!important;
  }

  /* CSS backup: hide every direct body child except #tcPrint.
     JS already sets inline display:none (higher specificity), but keep
     this as a belt-and-braces fallback. */
  body[data-tcel-p]>*{display:none!important}
  body[data-tcel-p]>#tcPrint{
    display:block!important;
    position:static!important;
    width:100%!important;
    margin:0!important;padding:0!important;
    left:auto!important;top:auto!important;
    background:#fff!important;
  }

  /* ── The print area itself ── */
  #tcPrint{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    background:#fff!important;
    font-family:"Calibri","Segoe UI",sans-serif;
    font-size:9pt;
    color:#111;
  }

  /* ── Fallback when JS hasn't run (no data-tcel-p attr) ── */
  .tc{display:none!important}
  .tc-disc-bg{display:none!important}
  .tc-print-only{display:block!important}

  /* ================================================================
     INVOICE LAYOUT
     ================================================================ */

  /* Header: logo/title left, invoice ref right */
  .pr-hdr{
    display:flex!important;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:6mm;
    border-bottom:3px solid #E31E24;
    padding-bottom:4mm;
    width:100%;
  }
  .pr-logo-img{max-height:50px;max-width:170px;object-fit:contain;display:block;margin-bottom:2mm}
  .pr-co{font-size:18pt;font-weight:700;color:#E31E24;line-height:1.15}
  .pr-co-sub{font-size:8pt;color:#555;margin-top:2mm;line-height:1.5}
  .pr-title{font-size:16pt;font-weight:700;text-align:right}
  .pr-tsub{font-size:8pt;color:#555;text-align:right;margin-top:2mm;line-height:1.5}

  /* Bill To */
  .pr-bill{margin-bottom:5mm;font-size:8.5pt;line-height:1.6}
  .pr-blbl{font-weight:700;font-size:7pt;text-transform:uppercase;
    color:#888;letter-spacing:.06em;margin-bottom:1.5mm}

  /* ── Product table ──
     table-layout:fixed + explicit % columns = no overflow, ever.
     Cols must sum to 100%. */
  .pr-tbl{
    width:100%!important;
    border-collapse:collapse;
    font-size:8pt;
    margin-bottom:5mm;
    table-layout:fixed;
  }
  .pr-tbl col.pr-col-num  {width:5%}
  .pr-tbl col.pr-col-desc {width:39%}
  .pr-tbl col.pr-col-sku  {width:16%}
  .pr-tbl col.pr-col-price{width:14%}
  .pr-tbl col.pr-col-qty  {width:8%}
  .pr-tbl col.pr-col-tot  {width:18%}

  .pr-tbl thead tr th{
    background:#E31E24!important;color:#fff!important;
    padding:2mm 2.5mm;text-align:left;font-weight:700;font-size:7.5pt;
  }
  .pr-tbl tbody tr td{
    padding:1.8mm 2.5mm;
    border-bottom:1px solid #e5e7eb;
    vertical-align:top;
    word-break:break-word;
    overflow-wrap:break-word;
  }
  .pr-tbl .pr-td-desc{word-break:break-all}
  .pr-tbl tbody tr:nth-child(even) td{background:#f8f9fa!important}
  /* Numeric column alignment */
  .pr-tbl tbody tr td:nth-child(4){text-align:right}
  .pr-tbl tbody tr td:nth-child(5){text-align:center}
  .pr-tbl tbody tr td:nth-child(6){text-align:right;font-weight:600}
  /* Prevent rows splitting across pages */
  .pr-tbl tbody tr{page-break-inside:avoid}

  /* Totals */
  .pr-tots{width:210px;margin-left:auto;font-size:8.5pt;margin-bottom:5mm}
  .pr-tor{display:flex!important;justify-content:space-between;
    padding:1.5mm 0;border-bottom:1px solid #e5e7eb}
  .pr-tgrand{font-weight:700;font-size:10pt;
    border-top:2px solid #111;border-bottom:none;
    padding-top:2mm;margin-top:1mm}

  /* Note + footer */
  .pr-note{
    background:#f8f9fa!important;
    border-left:3px solid #E31E24;
    padding:2mm 4mm;font-size:7.5pt;
    margin-bottom:4mm;line-height:1.5;
  }
  .pr-foot{font-size:7.5pt;color:#888;border-top:1px solid #ddd;
    padding-top:3mm;text-align:center}
}

@media(max-width:900px){
  .tc-hdr{padding:10px 14px;gap:10px}
  .tc-tab{padding:10px 14px!important;font-size:.84rem!important;min-height:44px}
  .tc-prod-layout{grid-template-columns:190px minmax(0,1fr);gap:12px}
  .tc-catpane{top:64px}
}
@media(max-width:700px){
  .tc-hdr{flex-direction:column;align-items:stretch;gap:8px;position:static}
  .tc-logo{text-align:center;font-size:1.1rem}
  .tc-tabs{margin-left:0;justify-content:stretch;gap:3px}
  .tc-tab{flex:1;padding:12px 6px!important;font-size:.81rem!important;
    min-height:48px;text-align:center;border-radius:8px}
  .tc-panel{padding:12px}
  .tc-prod-layout{display:block}
  .tc-catpane{position:static;max-height:none;margin-bottom:12px;padding:10px 12px}
  .tc-cat-title{margin-bottom:8px}
  .tc-chips{flex-direction:row;overflow-x:auto;padding-bottom:4px}
  .tc-chip{width:auto;white-space:nowrap;flex:0 0 auto}
  .tc-fbar{padding:10px 12px;gap:8px}
  .tc-search{min-width:100px}
  .tc-pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .tc-projgrid{grid-template-columns:1fr}
  .tc-clayout{grid-template-columns:1fr}
  .tc-qvlayout{flex-direction:column}
  .tc-qvimg{width:100%;height:200px}
  .tc-modal{max-height:95vh;border-radius:10px}
  .tc-qv{padding:16px;border-radius:10px}
  .tc-citem{grid-template-columns:40px 1fr auto;gap:7px}
  .tc-citot{display:none}
  .tc-col-grid{grid-template-columns:1fr}
  .tc-stats-row{gap:8px}
  .tc-stat-box{min-width:90px}
  .tc-acc-card{max-width:100%}
}
@media(max-width:400px){
  .tc-pgrid{grid-template-columns:repeat(2,1fr);gap:8px}
  .tc-tab{font-size:.74rem!important;padding:11px 4px!important}
}
/* ── Elementor / WordPress theme compatibility ──────────────────── */
.tc *{box-sizing:border-box!important}
.tc .tc-tabs{display:flex!important;flex-wrap:nowrap!important}
.tc .tc-tab{color:rgba(255,255,255,.78)!important}
.tc .tc-tab.active{color:#fff!important;background:var(--red)!important}
.tc .tc-prod-layout{display:grid!important}
.tc .tc-catpane{background:var(--gray)!important}
.tc .tc-fbar{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;gap:10px!important;width:100%!important}
.tc .tc-search{width:auto!important;flex:1 1 160px!important;min-width:160px!important;display:inline-block!important;max-width:100%!important;color:var(--dark)!important;background:#fff!important}
.tc .tc-sel{width:auto!important;flex:0 0 auto!important;min-width:120px!important;display:inline-block!important;color:var(--dark)!important;background:#fff!important}
.tc .tc-reset{width:auto!important;flex:0 0 auto!important;color:var(--mid)!important;background:#fff!important}
.tc #tcCS{display:none!important}
.tc .tc-chip{color:var(--dark)!important;background:#fff!important}
.tc .tc-chip.active{color:#fff!important;background:var(--red)!important}
.tc .tc-chip.active .tc-chip-count{color:var(--red)!important;background:#fff!important}
.tc .tc-pfil{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:10px!important}
.tc .tc-pgrid{display:grid!important}
.tc .tc-projgrid{display:grid!important}
@media(max-width:700px){.tc .tc-prod-layout{display:block!important}}