.ct-page {
  --ct-ink:#081d33;
  --ct-muted:#53677e;
  --ct-teal:#007f78;
  --ct-border:#dae6ec;
  --ct-state:#007f78;
  color:var(--ct-ink);
  max-width:1160px;
  margin:12px auto 24px;
  font-family:inherit;
  min-width:0
}
.ct-page * {
  box-sizing:border-box
}
.ct-page [hidden] {
  display:none!important
}
.ct-page h1,.ct-page h2,.ct-page p {
  margin:0
}
.customer-order-tracking-page>details.panel>summary { display:flex; align-items:center; gap:10px; min-height:48px; cursor:pointer; list-style:none }
.customer-order-tracking-page>details.panel>summary::-webkit-details-marker { display:none }
.customer-order-tracking-page>details.panel>summary::before { content:'›'; color:#007f78; font-size:24px }
.customer-order-tracking-page>details.panel[open]>summary::before { transform:rotate(90deg) }
.ct-page svg { width:24px; height:24px; flex:0 0 auto }
.ct-brand.ct-brand--compact { min-height:88px; padding:18px 26px 32px; background:#edf5f6; color:var(--ct-ink); border:1px solid var(--ct-border); border-bottom:0 }
.ct-order-date { color:var(--ct-muted); font-size:13px; margin-top:4px!important }
.ct-breakdown { margin:16px 0 0; padding:0 4px; font-size:14px; color:var(--ct-muted) }
.ct-breakdown>div { display:flex; justify-content:space-between; gap:16px; padding:5px 0 }
.ct-breakdown dd { margin:0; white-space:nowrap }
.ct-brand {
  position:relative;
  overflow:hidden;
  background:#102c32;
  min-height:132px;
  border-radius:20px 20px 0 0;
  padding:24px;
  color:#fff
}
.ct-cover {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.48
}
.ct-brand a {
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  color:inherit;
  text-decoration:none
}
.ct-logo {
  width:44px;
  height:44px;
  object-fit:contain;
  border-radius:12px
}
.ct-brand strong {
  font-size:24px
}
.ct-brand small {
  display:block;
  margin-top:4px
}
.ct-card {
  position:relative;
  margin:-18px 16px 0;
  background:#fff;
  border:1px solid var(--ct-border);
  border-radius:18px;
  padding:26px;
  box-shadow:0 6px 24px #102c3208
}
.ct-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:20px
}
.ct-heading h1 {
  font-size:18px;
  line-height:1.4
}
.ct-refresh {
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:grid;
  place-items:center;
  background:#f2f8fa;
  border:1px solid var(--ct-border);
  border-radius:50%;
  color:var(--ct-teal);
  font-size:26px;
  cursor:pointer
}
.ct-status-layout {
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr);
  gap:28px
}
.ct-state {
  display:flex;
  gap:14px;
  align-items:center;
  padding:8px 0 18px
}
.ct-state-icon {
  flex:0 0 48px;
  height:48px;
  border-radius:50%;
  background:var(--ct-state);
  color:white;
  display:grid;
  place-items:center;
  font-size:28px
}
.ct-state h2 {
  font-size:clamp(22px,2.3vw,30px);
  line-height:1.2;
  letter-spacing:-.5px
}
.ct-state-icon svg { width:28px; height:28px }
.ct-state p {
  color:var(--ct-muted);
  margin-top:8px;
  font-size:15px;
  line-height:1.5
}
.ct-timeline {
  list-style:none;
  display:flex;
  padding:16px 0;
  margin:8px 0 0;
  gap:0
}
.ct-timeline li {
  position:relative;
  flex:1;
  text-align:center;
  min-width:0;
  color:var(--ct-muted)
}
.ct-timeline li:not(:last-child):after {
  content:"";
  position:absolute;
  top:14px;
  left:50%;
  width:100%;
  height:3px;
  background:#dbe3e8;
  z-index:0
}
.ct-timeline li.done:after {
  background:var(--ct-teal)
}
.ct-timeline span {
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  margin:0 auto 10px;
  background:#e3e9ed;
  color:#52677a;
  font-size:13px
}
.ct-timeline .done span {
  background:var(--ct-teal);
  color:#fff
}
.ct-timeline svg { width:17px; height:17px }
.ct-timeline .pending svg { visibility:hidden }
.ct-timeline .active span {
  background:var(--ct-state);
  color:#fff;
  outline:3px solid #bce6e0;
  outline-offset:3px
}
.ct-timeline strong {
  display:block;
  font-weight:500;
  font-size:12px;
  padding:0 2px;
  overflow-wrap:anywhere
}
.ct-timeline .active strong {
  font-weight:750;
  color:var(--ct-ink)
}
.ct-summary {
  display:grid;
  gap:8px;
  align-content:start;
  border-left:1px solid var(--ct-border);
  padding-left:20px
}
.ct-summary-row,.ct-estimate {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid #e7eef1;
  border-radius:12px;
  background:#f9fbfc
}
.ct-summary-row>span,.ct-estimate>span {
  display:grid;
  place-items:center;
  flex:0 0 32px;
  color:var(--ct-teal)
}
.ct-summary small,.ct-summary strong {
  display:block;
  line-height:1.4
}
.ct-summary small {
  font-size:12px;
  color:var(--ct-muted)
}
.ct-summary strong {
  font-size:14px;
  overflow-wrap:anywhere
}
.ct-estimate {
  background:#eaf7f1;
  border-color:#eaf7f1
}
.ct-estimate strong {
  color:#006947
}
.ct-total {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:14px 4px;
  font-size:16px
}
.ct-total strong {
  white-space:nowrap
}
.ct-details {
  border-top:1px solid var(--ct-border);
  margin-top:22px;
  padding-top:18px
}
.ct-details summary {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:48px;
  border:1px solid var(--ct-teal);
  color:var(--ct-teal);
  border-radius:10px;
  padding:12px 16px;
  font-weight:700;
  cursor:pointer;
  list-style:none
}
.ct-details summary::-webkit-details-marker {
  display:none
}
.ct-items {
  list-style:none;
  padding:0;
  margin:16px 0
}
.ct-items li {
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  gap:10px;
  padding:14px 0;
  border-bottom:1px solid var(--ct-border);
  font-size:14px;
  align-items:start
}
.ct-items small {
  display:block;
  color:var(--ct-muted);
  margin-top:4px;
  overflow-wrap:anywhere
}
.ct-items strong {
  overflow-wrap:anywhere
}
.ct-quantity {
  color:var(--ct-muted)
}
.ct-quantity img { display:block; width:36px; height:36px; object-fit:cover; border-radius:8px; margin-bottom:5px }
.ct-quantity small { margin:0; color:inherit; white-space:nowrap }
.ct-back {
  display:inline-flex;
  align-items:center;
  min-height:48px;
  margin-top:14px;
  color:var(--ct-teal);
  font-size:14px;
  font-weight:650;
  text-decoration:none
}
.ct-install {
  display:flex;
  gap:12px;
  align-items:center;
  margin:0 20px;
  padding:18px 24px;
  background:#f6fafa;
  border-radius:0 0 16px 16px
}
.ct-install img {
  width:36px;
  height:36px;
  border-radius:9px
}
.ct-install div {
  flex:1
}
.ct-install strong,.ct-install small {
  display:block;
  font-size:12px
}
.ct-install small {
  margin-top:4px;
  color:var(--ct-muted)
}
.ct-install button,.ct-lookup button {
  min-height:48px;
  border:0;
  background:var(--ct-teal);
  color:#fff;
  padding:12px 16px;
  border-radius:9px;
  font-weight:700;
  cursor:pointer
}
.ct-page :is(a,button,input,summary):focus-visible {
  outline:3px solid #007eaa;
  outline-offset:4px
}
.ct-connection:empty {
  display:none
}
.ct-connection {
  color:var(--ct-muted);
  font-size:13px;
  margin-top:16px!important
}
.ct-card[data-tone=preparing] {
  --ct-state:#995200
}
.ct-card[data-tone=delivery] {
  --ct-state:#006db7
}
.ct-card[data-tone=attention] {
  --ct-state:#a52929
}
.ct-lookup {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  background:#edf7f7;
  padding:40px;
  border-radius:20px
}
.ct-lookup h1 {
  font-size:38px;
  line-height:1.15;
  margin:12px 0
}
.ct-lookup-intro>p {
  color:var(--ct-muted);
  line-height:1.6
}
.ct-lookup .ct-eyebrow {
  color:var(--ct-teal);
  font-weight:750;
  margin-top:28px
}
.ct-lookup-form {
  background:#fff;
  border:1px solid var(--ct-border);
  border-radius:16px;
  padding:28px;
  display:grid;
  gap:12px
}
.ct-lookup h2 {
  font-size:23px;
  line-height:1.25
}
.ct-lookup-form>p,.ct-lookup small {
  color:var(--ct-muted);
  font-size:14px;
  line-height:1.5
}
.ct-lookup label {
  font-size:14px;
  font-weight:650;
  margin-top:8px
}
.ct-lookup input {
  min-width:0;
  width:100%;
  min-height:48px;
  border:1px solid #a6bac8;
  border-radius:9px;
  background:white;
  color:var(--ct-ink);
  padding:12px;
  font:inherit
}
.ct-lookup button {
  width:100%;
  margin-top:8px;
  font-size:16px
}
.ct-lookup .ct-privacy {
  background:#f0f8fb;
  padding:14px;
  border-radius:8px;
  font-size:12px
}
.ct-lookup .ct-error {
  color:#9c2020;
  background:#fff2ef;
  border-radius:8px;
  padding:12px
}
.ct-recover-callout {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:#eef8f6;
  border:1px solid #d5e9e4;
  border-radius:14px;
  padding:16px 20px;
  margin:16px 0;
  color:#081d33
}
.ct-recover-callout strong {
  display:block
}
.ct-recover-callout a {
  display:inline-flex;
  align-items:center;
  min-height:48px;
  color:#007f78;
  font-weight:700;
  padding:8px
}

@media(max-width:760px) {
  .ct-status-layout {
  grid-template-columns:1fr;
  gap:16px
}
.ct-summary {
  border:0;
  padding:0
}
.ct-page {
  margin:0 auto 20px
}
.ct-brand {
  padding:18px;
  min-height:130px
}
.ct-brand strong {
  font-size:22px
}
.ct-card {
  margin:-22px 0 0;
  padding:18px;
  border-radius:18px
}
.ct-state h2 {
  font-size:23px
}
.ct-state-icon {
  flex-basis:40px;
  height:40px;
  font-size:24px
}
.ct-timeline {
  margin:0;
  padding:12px 0
}
.ct-timeline strong {
  font-size:11px
}
.ct-timeline span {
  width:24px;
  height:24px;
  font-size:11px
}
.ct-timeline li:not(:last-child):after {
  top:11px
}
.ct-install {
  margin:0;
  padding:16px 12px;
  gap:8px
}
.ct-install button {
  font-size:12px;
  padding:10px
}
.ct-lookup {
  grid-template-columns:1fr;
  gap:20px;
  padding:18px
}
.ct-lookup h1 {
  font-size:28px
}
.ct-lookup-form {
  padding:20px
}
.ct-lookup .ct-eyebrow {
  margin-top:12px
}
.ct-recover-callout {
  flex-wrap:wrap
}
.ct-items li {
  grid-template-columns:28px minmax(0,1fr) auto
}
.ct-heading {
  margin-bottom:8px
}
.ct-brand.ct-brand--compact { min-height:88px; padding:18px 18px 28px }
.ct-logo { width:40px; height:40px }
.ct-install { flex-wrap:wrap }
.ct-install div { min-width:0; flex-basis:140px }
.ct-page.ct-lookup { padding:16px 0; background:transparent; gap:16px }
.ct-lookup .ct-back { margin-top:0 }

}

.ct-page.ct-lookup label {
  color:var(--ct-ink)
}

@media(max-width:760px) {
  .ct-page.ct-lookup .ct-lookup-intro>p:not(.ct-eyebrow) {
  display:none
}
.ct-page.ct-lookup .ct-lookup-intro>h1 { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

}