/* Corrosion Integrity — Components & Service Requests
   Everything is scoped under .ci-shop so the active theme is untouched. */

.ci-shop{
  --ci-navy:#1F3864; --ci-navy-d:#16294a; --ci-navy-l:#2d4d80;
  --ci-steel:#5a6b82; --ci-ink:#1a1f29; --ci-mute:#667085;
  --ci-line:#dfe4ec; --ci-bg:#f4f6f9; --ci-gold:#b8860b;
  --ci-green:#2f7d52; --ci-greenbg:#e8f3ec; --ci-red:#b42318;
  --ci-sh:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.08);
  --ci-sh2:0 4px 12px rgba(16,24,40,.09);
  /* !important here only: some themes (Elementor kits included) emit
     !important typography on bare element selectors, which would otherwise
     restyle our headings and controls. Kept to font + colour only. */
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  color:var(--ci-ink);
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.ci-shop h2,.ci-shop h3,.ci-shop h4,.ci-shop h5{
  font-family:inherit!important;
  color:var(--ci-ink)!important;
  text-transform:none!important;
}
.ci-shop .ci-form legend{font-family:inherit!important;color:var(--ci-navy)!important}
.ci-shop table.ci-sum th{color:#fff!important}
.ci-shop *,.ci-shop *::before,.ci-shop *::after{box-sizing:border-box}
.ci-shop button,.ci-shop input,.ci-shop select,.ci-shop textarea{font-family:inherit}

/* nav ------------------------------------------------------------- */
.ci-shop .ci-nav{display:flex;gap:2px;border-bottom:1px solid var(--ci-line);margin-bottom:26px;
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.ci-shop .ci-nav button{background:none;border:0;border-bottom:3px solid transparent;
  color:var(--ci-steel);font-size:15px;font-weight:600;padding:12px 18px;cursor:pointer;
  white-space:nowrap;transition:color .13s,border-color .13s;margin:0}
.ci-shop .ci-nav button:hover{color:var(--ci-navy)}
.ci-shop .ci-nav button.on{color:var(--ci-navy);border-bottom-color:var(--ci-navy)}
.ci-shop .ci-badge{display:inline-block;min-width:20px;height:20px;line-height:20px;padding:0 6px;
  border-radius:10px;background:var(--ci-navy);color:#fff;font-size:12px;font-weight:700;
  text-align:center;margin-left:7px}
/* An explicit display value would otherwise beat the [hidden] attribute. */
.ci-shop [hidden]{display:none!important}

.ci-shop .ci-panel{display:none}
.ci-shop .ci-panel.on{display:block}
.ci-shop .ci-h{font-size:22px;margin:0 0 6px;line-height:1.25;letter-spacing:-.01em}
.ci-shop .ci-lede{margin:0 0 20px;color:var(--ci-mute);font-size:14.5px;max-width:74ch}

/* filters --------------------------------------------------------- */
.ci-shop .ci-filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px}
.ci-shop .ci-filters button{background:#fff;border:1px solid var(--ci-line);border-radius:16px;
  padding:6px 14px;font-size:13px;font-weight:500;color:var(--ci-steel);cursor:pointer;transition:.13s}
.ci-shop .ci-filters button:hover{border-color:var(--ci-navy-l);color:var(--ci-navy)}
.ci-shop .ci-filters button.on{background:var(--ci-navy);border-color:var(--ci-navy);color:#fff;font-weight:600}
.ci-shop .ci-filters .n{opacity:.6;margin-left:3px}

/* cards ----------------------------------------------------------- */
.ci-shop .ci-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:16px}
.ci-shop .ci-card{background:#fff;border:1px solid var(--ci-line);border-radius:9px;overflow:hidden;
  box-shadow:var(--ci-sh);display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s}
.ci-shop .ci-card:hover{box-shadow:var(--ci-sh2);transform:translateY(-1px)}
.ci-shop .ci-thumb{height:150px;background:#fff center/contain no-repeat;background-origin:content-box;
  padding:9px;border-bottom:1px solid var(--ci-line);position:relative}
.ci-shop .ci-thumb.noimg{background:repeating-linear-gradient(45deg,#f4f6f9,#f4f6f9 9px,#eef1f6 9px,#eef1f6 18px)}
.ci-shop .ci-thumb .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;color:#9aa5b5;font-size:11.5px;font-weight:600}
.ci-shop .ci-cat{position:absolute;top:8px;left:8px;background:rgba(31,56,100,.92);color:#fff;
  font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;
  border-radius:3px;z-index:1}
.ci-shop .ci-body{padding:13px 14px 14px;flex:1;display:flex;flex-direction:column}
.ci-shop .ci-body h3{margin:0 0 6px;font-size:15px;line-height:1.3}
.ci-shop .ci-body h3 a{color:var(--ci-ink);text-decoration:none}
.ci-shop .ci-body h3 a:hover{color:var(--ci-navy-l);text-decoration:underline}
.ci-shop .ci-blurb{font-size:13px;color:var(--ci-mute);margin:0 0 10px;flex:1}
.ci-shop .ci-chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:11px}
.ci-shop .ci-chip{background:#eef2f7;color:var(--ci-steel);font-size:11px;padding:2.5px 7px;border-radius:3px}

/* price ----------------------------------------------------------- */
.ci-shop .ci-prow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 10px;
  padding-top:9px;border-top:1px solid var(--ci-line)}
.ci-shop .ci-pr{font-size:18px;font-weight:700;color:var(--ci-navy);letter-spacing:-.01em}
.ci-shop .ci-pu{font-size:12px;color:var(--ci-mute)}
.ci-shop .ci-pq{font-size:13px;font-weight:600;color:var(--ci-gold)}
.ci-shop .ci-lead{font-size:11px;color:var(--ci-mute);background:#eef2f7;padding:2px 7px;
  border-radius:3px;margin-left:auto}
.ci-shop select.ci-vsel{width:100%;border:1px solid var(--ci-line);border-radius:5px;padding:7px 9px;
  margin-bottom:9px;font-size:13.5px;background:#fff;color:var(--ci-ink);height:auto}

.ci-shop .ci-addrow{display:flex;gap:7px}
.ci-shop .ci-addrow input{width:64px;border:1px solid var(--ci-line);border-radius:5px;padding:7px 8px;
  font-size:14px;text-align:center;height:auto;margin:0}
.ci-shop .ci-btn{background:var(--ci-navy);color:#fff;border:0;border-radius:5px;padding:8px 14px;
  font-size:13.5px;font-weight:600;cursor:pointer;transition:background .13s;white-space:nowrap;
  text-decoration:none;display:inline-block;line-height:1.4}
.ci-shop .ci-btn:hover{background:var(--ci-navy-d);color:#fff}
.ci-shop .ci-btn[disabled]{background:#b6bfcd;cursor:progress}
.ci-shop .ci-btn.flex{flex:1}
.ci-shop .ci-btn.lg{padding:12px 24px;font-size:15px}
.ci-shop .ci-btn.ghost{background:#fff;color:var(--ci-navy);border:1px solid var(--ci-line)}
.ci-shop .ci-btn.ghost:hover{background:#f7f9fc;border-color:var(--ci-navy-l)}

/* cart ------------------------------------------------------------ */
.ci-shop .ci-cartwrap{background:#fff;border:1px solid var(--ci-line);border-radius:9px;
  box-shadow:var(--ci-sh);overflow:hidden}
.ci-shop .ci-empty{padding:52px 24px;text-align:center;color:var(--ci-mute)}
.ci-shop .ci-empty svg{opacity:.3;margin-bottom:10px}
.ci-shop .ci-empty b{display:block;color:var(--ci-ink);margin-bottom:3px}
.ci-shop .ci-li{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:15px 18px;
  border-bottom:1px solid var(--ci-line);align-items:start}
.ci-shop .ci-li:last-child{border-bottom:0}
.ci-shop .ci-lt{height:52px;border:1px solid var(--ci-line);border-radius:5px;padding:3px;
  background:#fff center/contain no-repeat;background-origin:content-box}
.ci-shop .ci-lt.noimg{background:repeating-linear-gradient(45deg,#f4f6f9,#f4f6f9 6px,#eef1f6 6px,#eef1f6 12px)}
.ci-shop .ci-li h4{margin:0 0 3px;font-size:15px;line-height:1.3}
.ci-shop .ci-sku{font-size:11.5px;color:var(--ci-mute);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  margin-bottom:8px}
.ci-shop .ci-ask{background:#f7f9fc;border:1px solid var(--ci-line);border-radius:6px;padding:9px 11px;margin-top:8px}
.ci-shop .ci-ask label{display:block;font-size:11px;font-weight:700;color:var(--ci-steel);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.ci-shop .ci-ask textarea{width:100%;border:1px solid var(--ci-line);border-radius:5px;padding:7px 9px;
  font-size:13.5px;line-height:1.45;resize:vertical;min-height:54px;background:#fff}
.ci-shop .ci-ask .hint{font-size:11.5px;color:var(--ci-mute);margin-top:5px}
.ci-shop .ci-qty input{width:56px;border:1px solid var(--ci-line);border-radius:5px;padding:6px;
  text-align:center;font-size:14px;height:auto;margin:0}
.ci-shop .ci-lprice{margin:8px 0 4px;line-height:1.35;text-align:right}
.ci-shop .ci-lprice .ext{display:block;font-size:15.5px;font-weight:700;color:var(--ci-navy)}
.ci-shop .ci-lprice .each{display:block;font-size:11.5px;color:var(--ci-mute)}
.ci-shop .ci-rm{background:none;border:0;color:var(--ci-red);font-size:12.5px;cursor:pointer;
  padding:4px 0;text-decoration:underline;text-underline-offset:2px}
.ci-shop .ci-totals{padding:14px 18px;background:#fff;border-top:2px solid var(--ci-navy)}
.ci-shop .ci-totals .tr{display:flex;justify-content:space-between;gap:16px;padding:5px 0;font-size:14px}
.ci-shop .ci-totals .tr.sm{font-size:12.8px;color:var(--ci-mute)}
.ci-shop .ci-totals .tr.big{border-top:1px solid var(--ci-line);margin-top:6px;padding-top:9px;font-size:15px}
.ci-shop .ci-totals .tr.big b{font-size:17px;color:var(--ci-navy)}
.ci-shop .ci-tbd{color:var(--ci-gold);font-weight:600}
.ci-shop .ci-cfoot{padding:16px 18px;background:#f7f9fc;border-top:1px solid var(--ci-line);
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.ci-shop .ci-cnt{font-size:13.5px;color:var(--ci-steel)}
.ci-shop .ci-cnt b{color:var(--ci-ink)}

/* forms ----------------------------------------------------------- */
.ci-shop .ci-form{background:#fff;border:1px solid var(--ci-line);border-radius:9px;
  box-shadow:var(--ci-sh);padding:22px;max-width:900px}
.ci-shop .ci-form fieldset{border:0;padding:0;margin:0 0 26px}
.ci-shop .ci-form legend{font-size:12px;font-weight:700;color:var(--ci-navy);text-transform:uppercase;
  letter-spacing:.07em;padding:0 0 10px;border-bottom:1px solid var(--ci-line);width:100%;
  margin-bottom:15px;float:none}
.ci-shop .ci-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.ci-shop .ci-row.one{grid-template-columns:1fr}
.ci-shop .ci-f label{display:block;font-size:12.5px;font-weight:600;color:var(--ci-steel);margin-bottom:5px}
.ci-shop .ci-req{color:var(--ci-red)}
.ci-shop .ci-f input,.ci-shop .ci-f select,.ci-shop .ci-f textarea{width:100%;
  border:1px solid var(--ci-line);border-radius:6px;padding:9px 11px;font-size:14px;line-height:1.45;
  background:#fff;color:var(--ci-ink);height:auto;margin:0}
.ci-shop .ci-f textarea{min-height:88px;resize:vertical}
.ci-shop .ci-f .bad{border-color:#d92d20;background:#fffbfa}
.ci-shop input:focus,.ci-shop select:focus,.ci-shop textarea:focus{outline:2px solid var(--ci-navy-l);
  outline-offset:-1px;border-color:var(--ci-navy-l)}
.ci-shop .ci-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ci-shop .ci-err{color:var(--ci-red);font-size:13.5px;font-weight:600;margin:12px 0 0}

/* services -------------------------------------------------------- */
.ci-shop .ci-sgrp{font-size:11.5px;font-weight:700;color:var(--ci-mute);text-transform:uppercase;
  letter-spacing:.06em;margin:16px 0 8px}
.ci-shop .ci-sgrp:first-child{margin-top:0}
.ci-shop .ci-svc{display:block;border:1px solid var(--ci-line);border-radius:7px;padding:12px 14px;
  margin-bottom:9px;cursor:pointer;transition:.13s;background:#fff}
.ci-shop .ci-svc:hover{border-color:var(--ci-navy-l);background:#fafcff}
.ci-shop .ci-svc.on{border-color:var(--ci-green);background:var(--ci-greenbg)}
.ci-shop .ci-svc .top{display:flex;align-items:flex-start;gap:10px}
.ci-shop .ci-svc input[type=checkbox]{margin:2px 0 0;width:16px;height:16px;accent-color:var(--ci-green);
  flex:0 0 auto}
.ci-shop .ci-svc .nm{font-weight:600;font-size:14.5px}
.ci-shop .ci-svc .ds{font-size:13px;color:var(--ci-mute);margin-top:2px}
.ci-shop .ci-svc .sn{margin:11px 0 0 26px;display:none}
.ci-shop .ci-svc.on .sn{display:block}
.ci-shop .ci-svc .sn input{width:100%;font-size:13.5px;padding:7px 10px;border:1px solid #b9d4c4;
  border-radius:5px;height:auto}

/* confirmation ---------------------------------------------------- */
.ci-shop .ci-done{background:#fff;border:1px solid var(--ci-line);border-radius:9px;
  box-shadow:var(--ci-sh);padding:26px;max-width:900px}
.ci-shop .ci-done .hd{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.ci-shop .ci-tick{width:34px;height:34px;border-radius:50%;background:var(--ci-green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}
.ci-shop .ci-done h2{margin:0;font-size:20px}
.ci-shop .ci-jn{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#eef2f7;
  padding:2px 7px;border-radius:4px;font-size:13.5px;color:var(--ci-navy);font-weight:700}
.ci-shop table.ci-sum{width:100%;border-collapse:collapse;border:0!important;margin:14px 0;
  font-size:13.5px;background:none}
.ci-shop table.ci-sum tr,.ci-shop table.ci-sum tbody{border:0!important;background:none}
.ci-shop table.ci-sum th{text-align:left;background:var(--ci-navy);color:#fff;padding:8px 11px;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;border:0!important}
.ci-shop table.ci-sum td{padding:8px 11px;border:0!important;
  border-bottom:1px solid var(--ci-line)!important;vertical-align:top}
.ci-shop table.ci-sum td.k{font-weight:600;width:33%;background:#f7f9fc}
.ci-shop table.ci-sum td.r{text-align:right;white-space:nowrap}
.ci-shop .ci-note{background:#f7f9fc;border-left:3px solid var(--ci-navy-l);padding:12px 15px;
  font-size:13px;color:var(--ci-steel);border-radius:0 6px 6px 0;margin:16px 0}

/* toast ----------------------------------------------------------- */
.ci-shop .ci-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(90px);
  background:var(--ci-ink);color:#fff;padding:11px 20px;border-radius:7px;font-size:13.5px;
  font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.22);z-index:9999;pointer-events:none;
  transition:transform .26s cubic-bezier(.2,.8,.3,1);max-width:90vw}
.ci-shop .ci-toast.up{transform:translateX(-50%) translateY(0)}

@media (max-width:640px){
  .ci-shop .ci-row{grid-template-columns:1fr}
  .ci-shop .ci-li{grid-template-columns:1fr}
  .ci-shop .ci-lt{display:none}
  .ci-shop .ci-lprice{text-align:left}
  .ci-shop .ci-form{padding:16px}
}
@media (prefers-reduced-motion:reduce){
  .ci-shop *{transition:none!important}
}