```css
/* =========================================
   01. Google Font Import
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&display=swap');


/* =========================================
   02. Universal Selector & Body
========================================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #fff8f5;
    color: #302522;
    font-family: 'Hind Siliguri', sans-serif;
}


/* =========================================
   03. Common Container
========================================= */

.wrap {
    width: min(1080px, 92%);
    margin: auto;
}


/* =========================================
   04. Header / Top Section
========================================= */

.top {
    background: #FF4500;
    color: #fff;
    padding: 10px 0;
}

.brand {
    font-size: 22px;
    font-weight: 700;
}

.brand span {
    float: right;
    font-size: 20px;
    font-weight: 400;
}


/* =========================================
   05. Hero Section
========================================= */

.hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 38px;
    padding: 42px 0;
    align-items: center;
}


/* =========================================
   06. Product Media Section
========================================= */

.media {
    display: grid;
    gap: 12px;
}

.main-photo {
    width: 100%;
    height: 390px;
    object-fit: cover;
    border-radius: 18px;
    background: #f5e1dc;
}

.media video {
    width: 100%;
    max-height: 280px;
    border-radius: 14px;
    background: #211;
}

.video-note {
    padding: 22px;
    background: #f6e7e2;
    border-radius: 12px;
    color: #765;
}


/* =========================================
   07. Product Badge
========================================= */

.badge {
    display: inline-block;
    background: #ffe0e4;
    color: #FF4500;
    padding: 6px 13px;
    border-radius: 30px;
    font-weight: 600;
}


/* =========================================
   08. Heading & Paragraph
========================================= */

h1 {
    font-size: 34px;
    margin: 12px 0;
}

p {
    line-height: 1.7;
}


/* =========================================
   09. Product Price Section
========================================= */

.price {
    display: flex;
    gap: 15px;
    align-items: center;
    margin: 22px 0;
}

.price del {
    color: #888;
    font-size: 20px;
}

.price strong {
    color: #b52f50;
    font-size: 32px;
}


/* =========================================
   10. Stock Status
========================================= */

.stock {
    color: #6A5ACD;
}


/* =========================================
   11. Button Section
========================================= */

.button {
    display: inline-block;
    border: 0;
    border-radius: 9px;
    padding: 12px 22px;
    background: #FF4500;
    color: #fff;
    text-decoration: none;
    font: 600 17px 'Hind Siliguri', sans-serif;
    cursor: pointer;
}

.button:hover {
    background: #922541;
}


/* =========================================
   12. Order Card Section
========================================= */

.order-card {
    background: #fff;
    padding: 30px;
    border-radius: 18px;
    box-shadow: 0 8px 30px #5b263010;
    margin: 18px auto 50px;
}

.order-card h2 {
    margin-top: 0;
}


/* =========================================
   13. Muted & Small Text
========================================= */

.muted,
.small {
    color: #777;
}

.small {
    text-align: center;
    font-size: 13px;
}


/* =========================================
   14. Form Grid Layout
========================================= */

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}


/* =========================================
   15. Form Labels
========================================= */

label {
    display: grid;
    gap: 6px;
    font-weight: 600;
}

.wide {
    grid-column: 1 / -1;
}


/* =========================================
   16. Form Input Fields
========================================= */

input,
textarea,
select {
    width: 100%;
    padding: 12px;
    border: 1px solid #e3d3ce;
    border-radius: 8px;
    font: 16px 'Hind Siliguri', sans-serif;
    background: #fff;
}

textarea {
    min-height: 88px;
    resize: vertical;
}


/* =========================================
   17. Order Summary Section
========================================= */

.summary {
    margin: 24px 0;
    padding: 16px;
    background: #fff7f4;
    border-radius: 10px;
}

.summary div {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
}

.summary .total {
    border-top: 1px solid #e5d3cd;
    margin-top: 8px;
    padding-top: 13px;
    font-size: 20px;
    color: #a52c4b;
}


/* =========================================
   18. Submit Button
========================================= */

.submit {
    width: 100%;
}


/* =========================================
   19. Footer Section
========================================= */

footer {
    text-align: center;
    padding: 25px;
    color: #8b7770;
}


/* =========================================
   20. Invoice Section
========================================= */

.invoice-wrap {
    padding: 25px 0 50px;
}

.actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-bottom: 15px;
}

.secondary {
    background: #6d625f;
}

.invoice {
    background: #fff;
    padding: 34px;
    border: 1px solid #eaded9;
    border-radius: 12px;
    max-width: 850px;
    margin: auto;
}


/* =========================================
   21. Invoice Header
========================================= */

.invoice-head {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #b53657;
    padding-bottom: 16px;
}

.invoice-head h1 {
    margin: 0;
}

.invoice-no {
    text-align: right;
}


/* =========================================
   22. Success Message
========================================= */

.success {
    background: #e9f8ee;
    color: #226a3c;
    padding: 12px;
    margin: 20px 0;
    border-radius: 8px;
}


/* =========================================
   23. Invoice Table
========================================= */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
}

th,
td {
    padding: 11px;
    border: 1px solid #e8ded9;
    text-align: left;
}

th {
    background: #fff4f0;
}


/* =========================================
   24. Invoice Total
========================================= */

.invoice-total {
    text-align: right;
}


/* =========================================
   25. Table Responsive
========================================= */

.table-scroll {
    overflow: auto;
}

.table-scroll table {
    min-width: 750px;
}


/* =========================================
   26. Responsive Design (Mobile)
========================================= */

@media (max-width: 700px) {

    .hero {
        grid-template-columns: 1fr;
        padding: 20px 0;
        gap: 20px;
    }

    .main-photo {
        height: 300px;
    }

    h1 {
        font-size: 27px;
    }

    .grid {
        grid-template-columns: 1fr;
    }

    .wide {
        grid-column: auto;
    }

    .order-card {
        padding: 20px;
    }

    .invoice {
        padding: 18px;
    }

    .actions {
        flex-wrap: wrap;
    }

    .brand span {
        display: none;
    }
}


/* =========================================
   27. Print Design
========================================= */

@media print {

    body {
        background: #fff;
    }

    .actions {
        display: none;
    }

    .invoice {
        border: 0;
        box-shadow: none;
    }

    .wrap {
        width: 100%;
    }

}
```

/* =========================================
   CSS ফাইলের Section তালিকা
   | Section | কাজ |
   |---|---|
| 01 | Google Font |
| 02 | Universal & Body |
| 03 | Container |
| 04 | Header |
| 05 | Hero |
| 06 | Product Media |
| 07 | Badge |
| 08 | Heading & Paragraph |
| 09 | Product Price |
| 10 | Stock |
| 11 | Button |
| 12 | Order Card |
| 13 | Text |
| 14–16 | Form Design |
| 17 | Order Summary |
| 18 | Submit Button |
| 19 | Footer |
| 20–24 | Invoice Design |
| 25 | Table Responsive |
| 26 | Mobile Responsive |
| 27 | Print Design |
========================================= */