/* All tracking-page styles are scoped to avoid changing your existing header/footer. */
     #htg-track {
        --accent: #932588;
        --ink: #28212d;
        --muted: #827a87;
        --border: #eee7ef;
        --soft: #fbf7fb;
        font-family: Poppins, Arial, sans-serif;
        background: #fcfafd;
        color: var(--ink);
        padding: 34px 0 85px;
        min-height: 60vh
     }

     #htg-track * {
        box-sizing: border-box
     }

     #htg-track .wrap {
        width: min(1160px, calc(100% - 32px));
        margin: auto
     }

     #htg-track .crumb {
        font-size: 12px;
        color: var(--muted);
        margin-bottom: 25px
     }

     #htg-track .crumb a {
        color: var(--accent);
        text-decoration: none
     }

     #htg-track .hero {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        margin-bottom: 25px
     }

     #htg-track .eyebrow {
        color: var(--accent);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase
     }

     #htg-track h1 {
       font-family: "Poppins", sans-serif;
        font-size: clamp(24px, 3vw, 34px);
        font-weight: 800;
        margin: 8px 0;
        color: var(--ink)
     }

     #htg-track .sub {
        font-size: 12px;
        color: var(--muted);
        margin: 0;
        line-height: 1.8
     }

     #htg-track .hero-icon {
        height: 65px;
        width: 65px;
        display: grid;
        place-items: center;
        border-radius: 19px;
        background: #f4e5f2;
        color: var(--accent);
        font-size: 27px
     }

     #htg-track .search-panel {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 23px;
        margin-bottom: 28px;
        box-shadow: 0 8px 32px #4d164708
     }

     #htg-track .search-panel label {
        font-size: 12px;
        font-weight: 700;
        display: block;
        margin-bottom: 12px
     }

     #htg-track .search-row {
        display: flex;
        gap: 10px
     }

     #htg-track .search-input {
        display: flex;
        align-items: center;
        gap: 12px;
        border: 1px solid #e9e1e9;
        border-radius: 11px;
        padding: 0 15px;
        flex: 1;
        background: #fcfbfc;
        color: #a59ba8
     }

     #htg-track input[type=search] {
        width: 100%;
        min-width: 0;
        height: 48px;
        border: 0;
        outline: 0;
        background: transparent;
        font: inherit;
        font-size: 12px;
        color: var(--ink)
     }

     #htg-track .primary-btn {
        background: var(--accent);
        border: 0;
        border-radius: 11px;
        color: #fff;
        padding: 12px 22px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer
     }

     #htg-track .search-help {
        margin: 10px 0 0;
        color: var(--muted);
        font-size: 10px
     }

     #htg-track .list-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin: 0 0 16px
     }

     #htg-track .list-heading h2 {
        font-size: 18px;
        font-weight: 700;
        margin: 0
     }

     #htg-track .count {
        font-size: 11px;
        color: var(--accent);
        background: #f4e5f2;
        padding: 7px 11px;
        border-radius: 30px
     }

     #htg-track .order-card {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 17px;
        margin-bottom: 16px;
        overflow: hidden;
        box-shadow: 0 8px 30px #2d102707
     }

     #htg-track .order-summary {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 18px;
        text-align: left;
        background: #fff;
        border: 0;
        padding: 20px 23px;
        cursor: pointer;
        font: inherit;
        color: inherit
     }

     #htg-track .order-summary:hover {
        background: #fefbfe
     }

     #htg-track .order-thumb {
        width: 72px;
        height: 72px;
        object-fit: contain;
        background: #faf8fa;
        border: 1px solid #f2edf2;
        border-radius: 12px;
        padding: 6px;
        flex-shrink: 0
     }

     #htg-track .summary-main {
        flex: 1;
        min-width: 0
     }

     #htg-track .order-id {
        font-size: 14px;
        font-weight: 700;
        overflow-wrap: anywhere
     }

     #htg-track .summary-meta {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        margin-top: 7px;
        font-size: 11px;
        color: var(--muted)
     }

     #htg-track .summary-meta i {
        color: var(--accent);
        margin-right: 4px
     }

     #htg-track .summary-side {
        text-align: right;
        flex-shrink: 0
     }

     #htg-track .amount {
        font-size: 13px;
        font-weight: 700;
        display: block;
        margin-bottom: 8px
     }

     #htg-track .badge-status {
        display: inline-block;
        border-radius: 30px;
        padding: 6px 11px;
        font-size: 10px;
        font-weight: 700;
        background: #fff4df;
        color: #9c6700
     }

     #htg-track .badge-status.done {
        background: #e8f8ee;
        color: #168346
     }

     #htg-track .badge-status.cancel {
        background: #ffebed;
        color: #ba3447
     }

     #htg-track .chevron {
        color: var(--accent);
        font-size: 13px;
        transition: transform .25s
     }

     #htg-track .order-summary[aria-expanded=true] .chevron {
        transform: rotate(180deg)
     }

     #htg-track .order-details {
        display: none;
        border-top: 1px solid var(--border);
        padding: 24px
     }

     #htg-track .order-details.open {
        display: block;
        animation: track-in .2s ease
     }

     #htg-track .detail-top {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        margin-bottom: 27px
     }

     #htg-track .mini-label {
        font-size: 10px;
        color: var(--muted);
        display: block;
        margin-bottom: 5px
     }

     #htg-track .detail-top strong {
        font-size: 12px;
        overflow-wrap: anywhere
     }

     #htg-track .tracking-title {
        font-size: 15px;
        font-weight: 700;
        margin: 0 0 20px
     }

     #htg-track .timeline {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        position: relative;
        gap: 0;
        margin: 0 0 28px
     }

     #htg-track .timeline:before {
        content: "";
        position: absolute;
        height: 4px;
        background: #e6dce6;
        top: 18px;
        left: 12.5%;
        right: 12.5%;
        border-radius: 8px
     }

     #htg-track .step {
        position: relative;
        text-align: center;
        min-width: 0
     }

     #htg-track .step .dot {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #d8d1db;
        color: white;
        display: grid;
        place-items: center;
        margin: 0 auto 12px;
        position: relative;
        z-index: 1;
        font-size: 13px
     }

     #htg-track .step.complete .dot {
        background: #249a57
     }

     #htg-track .step.current .dot {
        background: var(--accent);
        box-shadow: 0 0 0 5px #f5e6f3
     }

     #htg-track .step .step-label {
        font-size: 11px;
        font-weight: 600;
        line-height: 1.5;
        display: block;
        padding: 0 5px
     }

     #htg-track .step:not(.complete):not(.current) .step-label {
        color: #a49aa6
     }

     #htg-track .detail-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        margin: 0 0 23px
     }

     #htg-track .info-box {
        background: #fbf8fb;
        border: 1px solid #f1eaf1;
        border-radius: 13px;
        padding: 16px
     }

     #htg-track .info-box h3 {
        font-size: 12px;
        font-weight: 700;
        margin: 0 0 9px
     }

     #htg-track .info-box p {
        font-size: 11px;
        line-height: 1.8;
        margin: 0;
        color: #706773
     }

     #htg-track .products {
        border: 1px solid var(--border);
        border-radius: 13px;
        overflow: hidden;
        margin-bottom: 20px
     }

     #htg-track .products-title {
        font-size: 12px;
        font-weight: 700;
        margin: 0;
        padding: 14px 16px;
        background: #fcf9fc
     }

     #htg-track .product-row {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 13px 16px;
        border-top: 1px solid var(--border)
     }

     #htg-track .product-row img {
        width: 56px;
        height: 56px;
        object-fit: contain;
        border-radius: 8px;
        background: #faf8fa
     }

     #htg-track .product-copy {
        flex: 1;
        min-width: 0
     }

     #htg-track .product-copy b {
        font-size: 11px;
        display: block
     }

     #htg-track .product-copy small {
        font-size: 10px;
        color: var(--muted);
        display: block;
        margin-top: 5px
     }

     #htg-track .product-price {
        font-size: 11px;
        font-weight: 700;
        text-align: right
     }

     #htg-track .note-box {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 13px;
        padding: 17px
     }

     #htg-track .note-box h3 {
        font-size: 12px;
        font-weight: 700;
        margin: 0 0 5px
     }

     #htg-track .note-box p {
        font-size: 10px;
        color: var(--muted);
        margin: 0 0 13px
     }

     #htg-track textarea {
        width: 100%;
        min-height: 95px;
        border: 1px solid #e9e1e9;
        border-radius: 10px;
        padding: 12px;
        resize: vertical;
        outline: none;
        font: inherit;
        font-size: 11px;
        background: #fcfbfc
     }

     #htg-track textarea:focus,
     #htg-track .search-input:focus-within {
        border-color: var(--accent)
     }

     #htg-track .note-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-top: 11px
     }

     #htg-track .note-feedback {
        font-size: 10px;
        color: var(--muted)
     }

     #htg-track .empty {
        display: none;
        text-align: center;
        padding: 42px 20px;
        border: 1px dashed #dfcfdf;
        border-radius: 16px;
        color: var(--muted);
        font-size: 12px
     }

     #htg-track .empty i {
        display: block;
        font-size: 32px;
        color: var(--accent);
        margin-bottom: 14px
     }

     @keyframes track-in {
        from {
           opacity: 0;
           transform: translateY(-5px)
        }

        to {
           opacity: 1;
           transform: translateY(0)
        }
     }

     @media(max-width:720px) {
        #htg-track {
           padding: 22px 0 55px
        }

        #htg-track .hero-icon {
           display: none
        }

        #htg-track .search-panel {
           padding: 16px
        }

        #htg-track .order-summary {
           padding: 15px;
           gap: 10px;
           flex-wrap: wrap
        }

        #htg-track .order-thumb {
           width: 55px;
           height: 55px
        }

        #htg-track .summary-main {
           flex-basis: calc(100% - 100px)
        }

        #htg-track .summary-side {
           margin-left: 65px;
           text-align: left
        }

        #htg-track .chevron {
           margin-left: auto
        }

        #htg-track .order-details {
           padding: 17px 13px
        }

        #htg-track .detail-grid {
           grid-template-columns: 1fr
        }

        #htg-track .step .step-label {
           font-size: 9px
        }

        #htg-track .step .dot {
           width: 33px;
           height: 33px
        }

        #htg-track .timeline:before {
           top: 15px
        }

        #htg-track .product-price {
           font-size: 10px
        }

        #htg-track .search-row {
           flex-direction: column
        }

        #htg-track .primary-btn {
           min-height: 43px
        }
     }

     @media(prefers-reduced-motion:reduce) {

        #htg-track .order-details,
        #htg-track .chevron {
           animation: none;
           transition: none
        }
     }

     /* Reference-style horizontal tracking: connecting line, checked circles and icons underneath. */
     #htg-track .htg-progress-panel {
        background: #fff;
        border: 1px solid #e8e8ee;
        border-radius: 18px;
        padding: 28px 26px 20px;
        margin: 0 0 25px;
        box-shadow: 0 8px 25px #18242d08
     }

     #htg-track .htg-progress-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 34px
     }

     #htg-track .htg-progress-kicker {
        display: block;
        color: #26965b;
        font-size: 10px;
        letter-spacing: 1.7px;
        font-weight: 700;
        margin-bottom: 5px
     }

     #htg-track .htg-progress-heading h4 {
        font-size: 17px;
        font-weight: 700;
        margin: 0;
        color: #24303c
     }

     #htg-track .htg-progress-state {
        background: #e7f7ee;
        color: #17854a;
        border-radius: 30px;
        padding: 7px 13px;
        font-size: 11px;
        font-weight: 700
     }

     #htg-track .htg-progress-track {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        position: relative;
        isolation: isolate
     }

     #htg-track .htg-progress-line {
        position: absolute;
        top: 19px;
        left: 12.5%;
        right: 12.5%;
        height: 5px;
        background: #dce2e6;
        border-radius: 8px;
        z-index: -1;
        overflow: hidden
     }

     #htg-track .htg-progress-line span {
        display: block;
        width: var(--progress);
        height: 100%;
        background: #28a45d;
        border-radius: 8px
     }

     #htg-track .htg-progress-step {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        color: #9aa3ad
     }

     #htg-track .htg-progress-circle {
        width: 43px;
        height: 43px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #d6dce1;
        border: 4px solid #fff;
        box-shadow: 0 0 0 1px #d6dce1;
        color: #fff;
        font-size: 15px;
        margin-bottom: 22px
     }

     #htg-track .htg-progress-step.is-reached .htg-progress-circle {
        background: #29a45d;
        box-shadow: 0 0 0 1px #29a45d
     }

     #htg-track .htg-progress-step.is-current .htg-progress-circle {
        box-shadow: 0 0 0 1px #29a45d, 0 0 0 7px #d8f5e4
     }

     #htg-track .htg-progress-icon {
        font-size: 23px;
        margin-bottom: 9px;
        color: #a8b0b8
     }

     #htg-track .htg-progress-step.is-reached .htg-progress-icon {
        color: #28a45d
     }

     #htg-track .htg-progress-label {
        font-size: 11px;
        line-height: 1.55;
        font-weight: 700;
        color: #8e98a1;
        max-width: 130px
     }

     #htg-track .htg-progress-step.is-reached .htg-progress-label {
        color: #28343e
     }

     #htg-track .htg-progress-caption {
        font-size: 9px;
        margin-top: 5px;
        color: #a4adb5
     }

     #htg-track .htg-progress-step.is-current .htg-progress-caption {
        color: #168a4c;
        font-weight: 700
     }

     #htg-track .htg-progress-foot {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 28px;
        padding: 14px 16px;
        border-radius: 10px;
        background: #f3faf6;
        font-size: 11px;
        color: #576a60
     }

     #htg-track .htg-progress-foot i {
        color: #26965b;
        margin-right: 5px
     }

     @media(max-width:600px) {
        #htg-track .htg-progress-panel {
           padding: 22px 10px 14px
        }

        #htg-track .htg-progress-heading {
           margin-bottom: 30px;
           padding: 0 6px
        }

        #htg-track .htg-progress-heading h4 {
           font-size: 13px
        }

        #htg-track .htg-progress-state {
           font-size: 9px;
           padding: 5px 8px
        }

        #htg-track .htg-progress-line {
           top: 15px;
           height: 4px
        }

        #htg-track .htg-progress-circle {
           width: 34px;
           height: 34px;
           font-size: 11px;
           margin-bottom: 17px
        }

        #htg-track .htg-progress-icon {
           font-size: 17px
        }

        #htg-track .htg-progress-label {
           font-size: 9px;
           padding: 0 2px
        }

        #htg-track .htg-progress-caption {
           font-size: 8px
        }

        #htg-track .htg-progress-foot {
           font-size: 10px;
           padding: 12px
        }
     }
/* Database-backed order tracking additions. */
#htg-track .htg-progress-track { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#htg-track .receipt-box { margin-top:24px; padding:22px; border:1px solid #eadfea; border-radius:16px; background:#fcf9fc; }
#htg-track .receipt-box h3 { font-size:16px; font-weight:600; margin-bottom:10px; }
#htg-track .receipt-box p, #htg-track .receipt-list, #htg-track .receipt-feedback { font-size:13px; }
#htg-track .receipt-form input[type=file] { display:block; width:100%; padding:14px; background:white; border:1px dashed #cda9ca; border-radius:10px; }
#htg-track .receipt-list { margin:14px 0 0; padding-left:20px; overflow-wrap:anywhere; }
#htg-track .receipt-list a { color:#982586; }
#htg-track .receipt-list small { color:#777; }
#htg-track .primary-btn:disabled { opacity:.6; cursor:wait; }
#htg-track .tracking-error { padding:18px; color:#842029; background:#fff2f2; border-radius:12px; }
#htg-track .estimate-label { display:block; font-size:11px; font-weight:400; color:#777; }
#htg-track .empty .product-img { max-width:360px; }
#htg-track .empty i { display:inline; font-size:inherit; margin:0; }
#htg-track .order-card[hidden] { display:none; }
#htg-track .note-box textarea { white-space:pre-wrap; }
@media(max-width:650px) {
  #htg-track .htg-progress-track { grid-template-columns:1fr; }
  #htg-track .receipt-box { padding:16px; }
}
#htg-track .htg-progress-line { left:8.333333%; right:8.333333%; }
@media(max-width:650px) {
  #htg-track .htg-progress-track { gap:18px; }
  #htg-track .htg-progress-line, #htg-track .htg-progress-icon { display:none; }
  #htg-track .htg-progress-step { display:grid; grid-template-columns:44px 1fr; text-align:left; column-gap:12px; align-items:center; }
  #htg-track .htg-progress-circle { grid-row:1 / 3; margin:0; }
  #htg-track .htg-progress-label { max-width:none; font-size:12px; }
  #htg-track .htg-progress-caption { grid-column:2; margin:0; }
}