/* =========================================================
   QUDRATSHOP MASTER ARTICLE CSS
   Version: 2.0
   Scope:
   - Product Guide
   - Buying Guide
   - Best Products / Top List
   - Comparison
   - Product Collection

   Brand Logic:
   Question → Understand → Explain → Verify → Compare → Decide
   ========================================================= */


/* =========================================================
   1. ARTICLE ROOT
   ========================================================= */

.qs-article {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 18px 16px 32px;
    box-sizing: border-box;

    background: #ffffff;
    color: #222222;

    font-family: "Noto Sans Bengali", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.75;

    text-align: left;
    overflow-wrap: break-word;
    word-break: normal;
}

.qs-article *,
.qs-article *::before,
.qs-article *::after {
    box-sizing: border-box;
}

.qs-article p {
    margin: 0 0 12px;
    padding: 0;
    color: #222222;
    font-size: 18px;
    line-height: 1.75;
}

.qs-article p:last-child {
    margin-bottom: 0;
}

.qs-article strong,
.qs-article b {
    font-weight: 700;
}

.qs-article a {
    color: #2D7A4F;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.qs-article img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* =========================================================
   2. HERO
   ========================================================= */

.qs-hero {
    width: 100%;
    margin: 0 0 24px;
    padding: 23px 18px 21px;

    background: #EEF7F1;
    border-top: 4px solid #2D7A4F;
    border-radius: 12px;

    text-align: center;
}

.qs-type {
    margin: 0 0 8px;

    color: #2D7A4F;
    font-size: 14px;
    line-height: 1.4;

    font-weight: 700;
    letter-spacing: .35px;

    text-align: center;
}

.qs-hero h1 {
    margin: 0 0 9px;
    padding: 0;

    color: #1A4731;

    font-size: 32px;
    line-height: 1.3;
    font-weight: 700;

    text-align: center;
}

.qs-hero-subtitle {
    max-width: 760px;
    margin: 0 auto;

    color: #555555;

    font-size: 17px;
    line-height: 1.65;

    text-align: center;
}


/* =========================================================
   3. HEADINGS
   ========================================================= */

.qs-article h2 {
    margin: 30px 0 13px;
    padding: 0;

    color: #2D7A4F;

    font-size: 28px;
    line-height: 1.4;
    font-weight: 700;

    text-align: left;
}

.qs-article h3 {
    margin: 0 0 7px;
    padding: 0;

    color: #1A4731;

    font-size: 21px;
    line-height: 1.45;
    font-weight: 700;

    text-align: left;
}


/* =========================================================
   4. INTRO / NORMAL CONTENT
   ========================================================= */

.qs-intro {
    margin: 0 0 20px;
}

.qs-section {
    margin: 0 0 24px;
}


/* =========================================================
   5. SNAPSHOT
   ========================================================= */

.qs-snapshot {
    width: 100%;
    margin: 18px 0 28px;
    padding: 17px 18px;

    background: #F8F5E8;

    border-left: 5px solid #C9A84C;
    border-radius: 10px;
}

.qs-snapshot h2,
.qs-snapshot h3 {
    margin-top: 0;
}

.qs-snapshot p {
    margin-bottom: 8px;
}


/* =========================================================
   6. FEATURE BLOCK
   Use only for top decision-relevant features.
   ========================================================= */

.qs-feature {
    width: 100%;
    margin: 0 0 10px;
    padding: 15px 17px;

    background: #ffffff;

    border: 1px solid #DDE9E1;
    border-left: 4px solid #2D7A4F;

    border-radius: 9px;
}

.qs-feature p {
    margin-bottom: 0;
}

.qs-feature-soft {
    background: #F7FBF8;
}


/* =========================================================
   7. BUYING POINT
   For Buying Guides / Decision Criteria
   ========================================================= */

.qs-buying-point {
    width: 100%;
    margin: 0 0 14px;
    padding: 16px 17px;

    background: #ffffff;

    border: 1px solid #DFE8E2;
    border-radius: 9px;
}

.qs-buying-point h3 {
    margin-bottom: 7px;
}

.qs-checkline {
    margin-top: 9px;
    padding: 9px 11px;

    background: #EEF7F1;

    color: #1A4731;

    border-radius: 7px;

    font-size: 16px;
    line-height: 1.6;
}

.qs-checkline strong {
    color: #1A4731;
}


/* =========================================================
   8. TIP
   ========================================================= */

.qs-tip {
    width: 100%;
    margin: 18px 0 28px;
    padding: 16px 18px;

    background: #EEF7F1;

    border-left: 5px solid #2D7A4F;
    border-radius: 10px;
}

.qs-tip p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   9. VERIFY / CHECK
   ========================================================= */

.qs-check {
    width: 100%;
    margin: 0 0 24px;
    padding: 17px 18px;

    background: #EEF7F1;

    border-left: 5px solid #2D7A4F;
    border-radius: 10px;
}

.qs-check p {
    margin-bottom: 9px;
}


/* =========================================================
   10. WARNING
   ========================================================= */

.qs-warning {
    width: 100%;
    margin: 18px 0 28px;
    padding: 17px 18px;

    background: #FFF6E5;

    border-left: 5px solid #D4A017;
    border-radius: 10px;
}

.qs-warning h3 {
    color: #6E5200;
}


/* =========================================================
   11. REAL RISK ONLY
   ========================================================= */

.qs-danger {
    width: 100%;
    margin: 18px 0 28px;
    padding: 17px 18px;

    background: #FFF1EF;

    border-left: 5px solid #C94B40;
    border-radius: 10px;
}

.qs-danger h3 {
    color: #9B332B;
}


/* =========================================================
   12. SIMPLE LIST
   ========================================================= */

.qs-list {
    margin: 0 0 24px;
    padding: 0;
}

.qs-list p {
    margin-bottom: 8px;
}


/* =========================================================
   13. LIMITATIONS / THINGS TO KNOW
   ========================================================= */

.qs-limitations {
    width: 100%;
    margin: 0 0 26px;
    padding: 3px 0 3px 16px;

    border-left: 4px solid #C9A84C;
}

.qs-limitations p {
    margin-bottom: 8px;
}


/* =========================================================
   14. TABLES
   ========================================================= */

.qs-table-wrap,
.qs-comparison-wrap {
    width: 100%;
    margin: 0 0 28px;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.qs-table {
    width: 100%;
    min-width: 560px;

    border-collapse: collapse;

    background: #ffffff;

    color: #222222;

    font-size: 16px;
    line-height: 1.6;
}

.qs-table th,
.qs-table td {
    padding: 11px 12px;

    border: 1px solid #DDE5DF;

    vertical-align: top;
    text-align: left;
}

.qs-table th {
    background: #2D7A4F;
    color: #ffffff;
    font-weight: 700;
}

.qs-table td:first-child {
    width: 36%;

    background: #EEF7F1;
    color: #1A4731;

    font-weight: 700;
}


/* =========================================================
   15. COMPARISON TABLE
   ========================================================= */

.qs-comparison {
    width: 100%;
    min-width: 680px;

    border-collapse: collapse;

    background: #ffffff;

    font-size: 16px;
    line-height: 1.6;
}

.qs-comparison th,
.qs-comparison td {
    padding: 11px 12px;

    border: 1px solid #DDE5DF;

    vertical-align: top;
    text-align: left;
}

.qs-comparison th {
    background: #2D7A4F;
    color: #ffffff;
    font-weight: 700;
}

.qs-comparison tbody tr:nth-child(even) {
    background: #F8FBF9;
}


/* =========================================================
   16. BEST PRODUCT / TOP LIST ITEM
   ========================================================= */

.qs-product-item {
    width: 100%;
    margin: 0 0 18px;
    padding: 18px;

    background: #ffffff;

    border: 1px solid #DFE8E2;
    border-radius: 10px;
}

.qs-product-head {
    margin: 0 0 10px;
}

.qs-product-title {
    margin: 0 0 6px;

    color: #1A4731;

    font-size: 22px;
    line-height: 1.4;
    font-weight: 700;
}

.qs-product-label {
    display: inline-block;
    margin: 0 0 8px;
    padding: 4px 9px;

    background: #EEF7F1;
    color: #1A4731;

    border-radius: 6px;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}

.qs-product-summary {
    margin: 0 0 10px;
}

.qs-product-best-for {
    margin: 10px 0 0;
    padding: 9px 11px;

    background: #F8F5E8;

    border-radius: 7px;

    font-size: 16px;
    line-height: 1.6;
}

.qs-product-check {
    margin: 10px 0 0;
    padding-left: 13px;

    border-left: 3px solid #C9A84C;

    color: #555555;

    font-size: 16px;
    line-height: 1.6;
}


/* =========================================================
   17. RANK
   Use only if ranking is meaningful.
   ========================================================= */

.qs-rank {
    display: inline-block;
    margin: 0 7px 0 0;
    padding: 3px 8px;

    background: #1A4731;
    color: #ffffff;

    border-radius: 6px;

    font-size: 14px;
    font-weight: 700;
}


/* =========================================================
   18. VERDICT
   ========================================================= */

.qs-verdict {
    width: 100%;
    margin: 30px 0 20px;
    padding: 20px 19px;

    background: #EEF7F1;

    border: 1px solid #CFE2D5;
    border-left: 6px solid #2D7A4F;

    border-radius: 12px;
}

.qs-verdict h2 {
    margin: 0 0 13px;

    color: #1A4731;

    font-size: 27px;
}

.qs-verdict p {
    margin-bottom: 10px;
}


/* =========================================================
   19. END NOTE / CTA
   ========================================================= */

.qs-end {
    width: 100%;
    padding: 16px 10px 4px;

    text-align: center;
}

.qs-end-main {
    margin: 0 0 7px;

    color: #1A4731;

    font-size: 19px;
    line-height: 1.55;
    font-weight: 700;

    text-align: center;
}

.qs-end-brand {
    margin: 0;

    color: #777777;

    font-size: 15px;
    line-height: 1.5;

    text-align: center;
}


/* =========================================================
   20. NOTE / META
   ========================================================= */

.qs-note {
    color: #666666;

    font-size: 15px;
    line-height: 1.65;
}


/* =========================================================
   21. DIVIDER
   ========================================================= */

.qs-divider {
    width: 100%;
    height: 1px;

    margin: 26px 0;

    background: #E5E9E6;
    border: 0;
}


/* =========================================================
   22. KEYBOARD ACCESSIBILITY
   ========================================================= */

.qs-article a:focus-visible {
    outline: 2px solid #2D7A4F;
    outline-offset: 3px;
    border-radius: 3px;
}


/* =========================================================
   23. TABLET
   ========================================================= */

@media (max-width: 768px) {

    .qs-article {
        padding: 14px 13px 28px;

        font-size: 17px;
        line-height: 1.72;
    }

    .qs-article p {
        font-size: 17px;
        line-height: 1.72;
        margin-bottom: 11px;
    }

    .qs-hero {
        padding: 19px 14px 18px;
        margin-bottom: 21px;
    }

    .qs-hero h1 {
        font-size: 27px;
        line-height: 1.32;
    }

    .qs-hero-subtitle {
        font-size: 16px;
    }

    .qs-article h2 {
        margin-top: 27px;

        font-size: 24px;
        line-height: 1.4;
    }

    .qs-article h3 {
        font-size: 20px;
    }

    .qs-snapshot,
    .qs-tip,
    .qs-check,
    .qs-warning,
    .qs-danger,
    .qs-verdict,
    .qs-buying-point,
    .qs-product-item {
        padding: 15px;
    }

    .qs-feature {
        padding: 14px 15px;
    }

    .qs-table,
    .qs-comparison {
        font-size: 15px;
    }

    .qs-table th,
    .qs-table td,
    .qs-comparison th,
    .qs-comparison td {
        padding: 9px 10px;
    }

}


/* =========================================================
   24. MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .qs-article {
        padding: 12px 10px 25px;
    }

    .qs-hero {
        padding: 17px 12px 16px;
        border-radius: 10px;
    }

    .qs-type {
        font-size: 12px;
    }

    .qs-hero h1 {
        font-size: 24px;
        line-height: 1.34;
    }

    .qs-hero-subtitle {
        font-size: 15px;
        line-height: 1.6;
    }

    .qs-article h2 {
        font-size: 22px;
        margin-top: 25px;
        margin-bottom: 11px;
    }

    .qs-article h3 {
        font-size: 19px;
    }

    .qs-product-title {
        font-size: 20px;
    }

    .qs-snapshot,
    .qs-tip,
    .qs-check,
    .qs-warning,
    .qs-danger,
    .qs-verdict,
    .qs-feature,
    .qs-buying-point,
    .qs-product-item {
        border-radius: 8px;
    }

    .qs-end {
        padding-left: 4px;
        padding-right: 4px;
    }

    .qs-end-main {
        font-size: 17px;
    }

}