/*
 * ITS WHAT I GOT
 * Responsive overrides
 * Breakpoints:
 * 320px - 767px   Mobile
 * 768px - 999px   Tablet
 * 1000px - 1300px Small laptop
 * 1301px - 1600px Laptop
 *
 * This file is intentionally loaded after the existing stylesheets.
 */

/* =========================================================
   GLOBAL SAFETY
========================================================= */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

button,
input,
select,
textarea {
    max-width: 100%;
}

.container {
    width: 100%;
}

.category-list,
.category-list ul,
.nav ul,
ul {
    max-width: 100%;
}

/* =========================================================
   MOBILE — 320px TO 767px
========================================================= */
@media (min-width: 320px) and (max-width: 767px) {

    body {
        font-size: 15px;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* ---------- Header ---------- */
    .top-h {
        width: 100%;
    }

    .header-top {
        flex-direction: column;
        gap: 10px;
        padding: 10px 0;
        text-align: center;
    }

    .header-top-1 {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .header-top p {
        font-size: 11px;
        text-align: center;
    }

    .head-s,
    .goog-te-gadget select.goog-te-combo,
    select#currencySelector {
        width: 145px;
        max-width: 100%;
    }

    header {
        width: 100%;
    }

    .h-bx {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 12px 0 16px;
    }

    .logo {
        width: 110px;
        height: auto;
        min-height: 90px;
    }

    .logo img {
        width: auto;
        max-width: 110px;
        height: auto !important;
        max-height: 95px;
        object-fit: contain;
    }

    .h-bx > div[style*="width"] {
        width: 100% !important;
    }

    .f-row {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 14px;
    }

    .header-s {
        width: 100%;
        height: 44px;
        order: 1;
    }

    .header-s input {
        min-width: 0;
        font-size: 14px;
    }

    .header-s i,
    .search-btn i {
        font-size: 17px;
    }

    .acc,
    .switch-profile {
        justify-content: center;
        font-size: 13px;
        text-align: center;
    }

    .acc span {
        font-size: 11px;
    }

    .nav {
        width: 100%;
        padding-top: 8px;
    }

    .nav ul {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 7px 16px;
        margin: 0;
        padding: 0;
    }

    .nav ul li {
        text-align: left;
    }

    .nav ul li a {
        display: inline-block;
        font-size: 14px;
        line-height: 1.4;
        padding: 3px 0;
    }

    /* ---------- Homepage hero ---------- */
    .hero {
        flex-direction: column;
        gap: 18px;
        margin: 12px 0;
        padding: 14px 15px;
        width: 100%;
    }

    .category-box {
        width: 100%;
        border-radius: 16px;
    }

    .category-header {
        height: 44px;
        padding: 0 15px;
        justify-content: center;
        font-size: 16px;
        text-align: center;
    }

    .category-list {
        padding: 5px 14px 10px;
    }

    /* List items stay left aligned on mobile as requested. */
    .category-list li {
        text-align: left;
    }

    .category-list li a {
        justify-content: space-between;
        min-height: 38px;
        padding: 7px 2px;
        text-align: left;
        font-size: 13px;
    }

    .category-list .sub-menu {
        position: static;
        width: 100%;
        margin: 0;
        padding: 3px 10px 6px 14px;
        box-shadow: none;
        border-radius: 0;
    }

    .category-list .sub-menu li a {
        text-align: left;
        font-size: 12px;
    }

    .main-con {
        width: 100%;
        min-width: 0;
    }

    .ban-head {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 7px;
        text-align: center;
    }

    .ban-head span {
        font-size: 11px;
        line-height: 1.25;
        padding: 5px 8px;
        text-align: center;
    }

    .ban-con {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    body .banner-c {
        width: 100%;
        text-align: center;
        margin: 30px 0 !important;
    }
    body #banner-text {
        font-size: 50px !important;
    }
    .banner-c h3 {
        margin: 10px auto 13px;
        font-size: 18px;
        line-height: 1.35;
        text-align: center;
    }

    .banner-c h1 {
        margin: 0 auto;
        font-size: clamp(32px, 10vw, 46px);
        line-height: 1.05;
        text-align: center;
    }

    .banner-c h1 span {
        display: inline-block;
        top: 8px;
        font-size: clamp(54px, 15vw, 76px);
        line-height: .8;
    }

    .banner-c p {
        margin: 14px auto 20px;
        max-width: 520px;
        font-size: 15px;
        line-height: 1.55;
        text-align: center;
    }

    .btns {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .btn1,
    .btn2 {
        min-width: 135px;
        padding: 12px 18px;
        font-size: 14px;
        text-align: center;
    }

    .banner-img {
        width: 100%;
        text-align: center;
    }

    .banner-img > img:first-child {
        width: min(230px, 70vw) !important;
        height: auto !important;
    }

    .banner-img .line {
        width: 100% !important;
        height: auto;
    }

    /* ---------- Homepage support ---------- */
    .support {
        padding: 30px 0;
    }

    .sup-bxs {
        row-gap: 20px;
    }

    .sup-bxs > [class*="col-"] {
        width: 100%;
        flex: 0 0 100%;
    }

    .sup-bx {
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        text-align: center;
    }

    .sup-icon {
        padding: 11px;
    }

    .sup-bx h3 {
        margin-bottom: 4px;
        font-size: 16px;
        text-align: center;
    }

    .sup-bx p {
        font-size: 13px;
        line-height: 1.55;
        text-align: center;
    }

    /* ---------- Common page sections ---------- */
    .about,
    .feature,
    .trade,
    .harvest,
    .popular,
    .contact-us,
    .terms-sec,
    .cart-sec,
    .dashboard-sec {
        text-align: center;
    }

    .abt-con,
    .abt-img {
        width: 100%;
        text-align: center;
    }

    .abt-con h1,
    .abt-con h1 span {
        text-align: center;
    }

    .abt-con h1 {
        font-size: clamp(30px, 8vw, 44px);
        line-height: 1.12;
    }

    .abt-con h1 span {
        display: inline-block;
        font-size: clamp(48px, 13vw, 70px);
        line-height: .85;
    }

    .abt-con p {
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.7;
        text-align: center;
    }

    .abt-con .abt-link {
        font-size: 14px;
    }

    .section-title {
        margin-bottom: 24px;
        font-size: 26px;
        line-height: 1.2;
        text-align: center;
    }

    /* ---------- Product/listing cards ---------- */
    .popular-bx,
    .p-bx,
    .p-1,
    .p-2,
    .product-content,
    .product-info,
    .product-description,
    .product-details-section,
    .product-gallery {
        width: 100%;
        max-width: 100%;
    }

    .popular .row > [class*="col-"],
    .products .row > [class*="col-"] {
        width: 100%;
    }

    .p-bx,
    .popular-bx {
        text-align: center;
    }

    .product-title,
    .product-price,
    .product-description,
    .product-tag {
        text-align: center;
    }

    .product-title {
        font-size: 17px;
        line-height: 1.35;
    }

    .product-price {
        font-size: 16px;
    }

    .product-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .product-gallery img,
    .product-main-img img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* ---------- Bootstrap columns ---------- */
    .row {
        --bs-gutter-x: 1.25rem;
    }

    .row > [class*="col-"] {
        margin-bottom: 18px;
    }

    /* ---------- Forms / cards ---------- */
    .form-container,
    .form-inner,
    .login,
    .signup,
    .request-search-card,
    .new-request-card,
    .fb-post,
    .cart,
    .single-product {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .form-container,
    .form-inner {
        padding: 20px 15px;
    }

    .form-control,
    .form-select,
    input,
    select,
    textarea {
        font-size: 14px;
    }

    /* Keep list/table content readable and left aligned. */
    li,
    td,
    th {
        text-align: left;
    }

    /* Headings and paragraph copy are centered on mobile. */
    h1, h2, h3, h4, h5, h6,
    p {
        text-align: center;
    }

    /* ---------- FAQ ---------- */
    .faq-container,
    .swg-container {
        width: min(100% - 30px, 1540px);
    }

    .faq-intro-section,
    .swg-intro-section {
        padding: 45px 0;
    }

    .faq-intro-box,
    .swg-intro-box {
        grid-template-columns: 1fr;
        gap: 25px;
        min-height: 0;
        padding: 30px 18px;
        border-radius: 24px;
        text-align: center;
    }

    .faq-intro-content h2,
    .swg-intro-content h2 {
        font-size: clamp(31px, 8vw, 44px);
        letter-spacing: -1px;
        text-align: center;
    }

    .faq-intro-content p,
    .swg-intro-content p {
        margin: 18px auto 0;
        font-size: 15px;
        line-height: 1.65;
        text-align: center;
    }

    .faq-script,
    .swg-script {
        font-size: clamp(42px, 13vw, 60px);
        transform-origin: center;
        text-align: center;
    }

    .faq-intro-art,
    .swg-intro-art {
        min-height: 270px;
    }

    .faq-art-circle-one,
    .swg-art-circle-one {
        width: 235px;
        height: 235px;
    }

    .faq-art-circle-two,
    .swg-art-circle-two {
        width: 175px;
        height: 175px;
    }

    .faq-art-main,
    .swg-art-main {
        width: 100px;
        height: 100px;
        font-size: 38px;
    }

    .faq-art-small,
    .swg-art-small {
        width: 62px;
        height: 62px;
        font-size: 21px;
        border-width: 5px;
    }

    /* ---------- Request feed / chat ---------- */
    .request-feed,
    #requestResultsArea {
        width: 100%;
        max-width: 100% !important;
    }

    .new-request-card .card-body {
        padding: 18px !important;
    }

    .fb-post-header,
    .fb-post-title,
    .fb-post-body {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .fb-post-title h5 {
        font-size: 20px !important;
        text-align: center;
    }

    .fb-post-description {
        font-size: 14px !important;
        text-align: center;
    }

    .search-filter-row {
        flex-direction: column;
    }

    .search-filter-row .form-control,
    .search-filter-row .form-select,
    .search-filter-row .btn {
        width: 100%;
    }

    /* ---------- Footer ---------- */
    footer {
        margin-top: 30px;
        padding: 45px 0 25px;
        text-align: center;
    }

    footer .row {
        row-gap: 10px;
    }

    footer .row > [class*="col-"] {
        width: 100%;
        flex: 0 0 100%;
        text-align: center;
    }

    footer p {
        max-width: 520px;
        margin: 15px auto 0;
        font-size: 13px;
        line-height: 1.7;
        text-align: center;
    }

    .social {
        justify-content: center;
    }

    .footer-links h3,
    .footer-links h4 {
        text-align: center;
    }

    .footer-links h3::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-links h4::before {
        left: 50%;
        transform: translateX(-50%);
    }

    .f-line {
        display: none;
    }

    /* Decorative SVG should not create horizontal overflow. */
    .line-2 {
        left: 0;
        top: auto;
        width: 100%;
        overflow: hidden;
    }

    .line-2 svg {
        width: 180%;
        max-width: none;
        height: auto;
        margin-left: -40%;
    }
    .offers-table tbody td {
        padding: 0 !important;
    }
}


/* =========================================================
   TABLET — 768px TO 999px
========================================================= */
@media (min-width: 768px) and (max-width: 999px) {

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .header-top {
        flex-wrap: wrap;
        gap: 8px 20px;
    }

    .header-top-1 {
        gap: 12px;
    }

    .h-bx {
        gap: 22px;
        align-items: center;
    }

    .logo {
        width: 105px;
        height: auto;
        min-height: 95px;
        flex: 0 0 105px;
    }

    .logo img {
        max-width: 100px;
        height: auto !important;
    }

    .h-bx > div[style*="width"] {
        width: 100% !important;
        min-width: 0;
    }

    .f-row {
        gap: 12px;
        flex-wrap: wrap;
    }

    .header-s {
        width: 100%;
        height: 43px;
    }

    .header-s input {
        font-size: 14px;
    }

    .nav {
        padding-top: 10px;
    }

    .nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 18px;
    }

    .nav ul li {
        text-align: left;
    }

    .nav ul li a {
        font-size: 15px;
    }

    .hero {
        padding: 18px 24px;
        gap: 22px;
    }

    .category-box {
        width: 235px;
        flex: 0 0 235px;
    }

    .category-header {
        font-size: 15px;
    }

    .category-list li a {
        font-size: 12px;
    }

    .main-con {
        min-width: 0;
        flex: 1;
    }

    .ban-head {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        text-align: center;
    }

    .ban-head span {
        font-size: 10px;
        text-align: center;
    }

    .ban-con {
        gap: 15px;
    }

    .banner-c {
        min-width: 0;
        text-align: center;
    }

    .banner-c h3 {
        font-size: 20px;
        line-height: 1.3;
        text-align: center;
    }

    .banner-c h1 {
        font-size: clamp(38px, 6vw, 56px);
        line-height: 1.05;
        text-align: center;
    }

    .banner-c h1 span {
        font-size: clamp(58px, 9vw, 82px);
        top: 10px;
    }

    .banner-c p {
        font-size: 15px;
        text-align: center;
    }

    .btns {
        justify-content: center;
        flex-wrap: wrap;
    }

    .banner-img {
        text-align: center;
    }

    .banner-img > img:first-child {
        max-width: 280px;
        height: auto !important;
    }

    .sup-bx {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .sup-bx h3,
    .sup-bx p {
        text-align: center;
    }

    .abt-con h1 {
        font-size: 43px;
        line-height: 1.1;
        text-align: center;
    }

    .abt-con h1 span {
        font-size: 65px;
    }

    .abt-con p {
        font-size: 15px;
        line-height: 1.65;
        text-align: center;
    }

    .row > [class*="col-"] {
        margin-bottom: 20px;
    }

    .faq-container,
    .swg-container {
        width: min(100% - 48px, 1540px);
    }

    .faq-intro-box,
    .swg-intro-box {
        grid-template-columns: 1fr 1fr;
        gap: 35px;
        min-height: 420px;
        padding: 40px;
    }

    .faq-intro-content h2,
    .swg-intro-content h2 {
        font-size: clamp(38px, 5vw, 52px);
    }

    .faq-intro-content p,
    .swg-intro-content p {
        font-size: 16px;
    }

    footer {
        padding: 55px 0 30px;
    }

    footer .row > [class*="col-"] {
        text-align: center;
    }

    footer p,
    .footer-links h3,
    .footer-links h4 {
        text-align: center;
    }

    .footer-links h3::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .f-line {
        display: none;
    }
}


/* =========================================================
   SMALL LAPTOP — 1000px TO 1300px
========================================================= */
@media (min-width: 1000px) and (max-width: 1300px) {

    .container {
        width: 100% !important;
        max-width: 1140px;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .h-bx {
        gap: 28px;
    }

    .logo {
        width: 115px;
        height: 115px;
        flex: 0 0 115px;
    }

    .logo img {
        max-width: 110px;
        height: auto !important;
    }

    .f-row {
        gap: 16px;
    }

    .header-s {
        width: 100%;
        max-width: 620px;
    }

    .nav ul {
        gap: 14px;
    }

    .nav ul li a {
        font-size: 16px;
    }

    .hero {
        padding-left: 45px;
        padding-right: 45px;
        gap: 30px;
    }

    .category-box {
        width: 255px;
        flex: 0 0 255px;
    }

    .main-con {
        min-width: 0;
    }

    .ban-con {
        gap: 20px;
    }

    .banner-c h3 {
        font-size: 24px;
    }

    .banner-c h1 {
        font-size: clamp(48px, 5.2vw, 62px);
        line-height: 1.05;
    }

    .banner-c h1 span {
        font-size: clamp(70px, 8vw, 90px);
    }

    .banner-c p {
        font-size: 17px;
    }

    .banner-img {
        max-width: 42%;
    }

    .banner-img > img:first-child {
        max-width: 330px;
        height: auto !important;
    }

    .sup-bx {
        gap: 10px;
    }

    .sup-bx h3 {
        font-size: 16px;
    }

    .sup-bx p {
        font-size: 13px;
    }

    .abt-con h1 {
        font-size: 48px;
    }

    .abt-con h1 span {
        font-size: 72px;
    }

    .abt-con p {
        font-size: 16px;
    }

    .faq-intro-box,
    .swg-intro-box {
        gap: 45px;
        padding: 50px;
    }

    .faq-intro-content h2,
    .swg-intro-content h2 {
        font-size: clamp(42px, 4vw, 56px);
    }

    footer {
        padding: 65px 0 35px;
    }
    .m-tg {
        height: 100%;
    }
    .trade-bx span {
        top: 20px;
        left: 0;
        text-align: center;
    }
    .footer-links h4 {
        font-size: 14px;
    }
}


/* =========================================================
   LAPTOP — 1301px TO 1600px
========================================================= */
@media (min-width: 1301px) and (max-width: 1600px) {

    .container {
        width: 100%;
        max-width: 1320px;
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    .h-bx {
        gap: 38px;
    }

    .header-s {
        width: 100%;
    }

    .nav ul {
        gap: 18px;
    }

    .nav ul li a {
        font-size: 17px;
    }

    .hero {
        padding-left: 80px;
        padding-right: 80px;
        gap: 38px;
    }

    .category-box {
        width: 275px;
        flex: 0 0 275px;
    }

    .main-con {
        min-width: 0;
    }

    .banner-c h1 {
        font-size: clamp(55px, 4.6vw, 66px);
    }

    .banner-c h1 span {
        font-size: clamp(78px, 7vw, 96px);
    }

    .banner-c h3 {
        font-size: 27px;
    }

    .banner-c p {
        font-size: 18px;
    }

    .banner-img > img:first-child {
        max-width: 390px;
        height: auto !important;
    }

    .abt-con h1 {
        font-size: 54px;
    }

    .abt-con h1 span {
        font-size: 80px;
    }

    .faq-intro-content h2,
    .swg-intro-content h2 {
        font-size: clamp(46px, 3.6vw, 62px);
    }
}


/* =========================================================
   COMMON RESPONSIVE OVERRIDES FOR PAGE-SPECIFIC COMPONENTS
   Applies inside all requested ranges.
========================================================= */
@media (min-width: 320px) and (max-width: 1600px) {

    .single-product,
    .product-details-section,
    .product-description-section,
    .cart-sec,
    .dashboard-sec,
    .terms-sec {
        overflow-x: hidden;
    }

    .product-details-section .row,
    .product-description-section .row,
    .cart-sec .row {
        align-items: center;
    }

    .product-main-img img,
    .product-gallery img,
    .thumb-row img {
        max-width: 100%;
        height: auto;
    }

    .details-grid {
        max-width: 100%;
    }

    .attachment-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        gap: 10px;
    }

    .attachment-image {
        max-width: 100%;
        height: auto;
    }

    .conversation-thread,
    .chat-window,
    .chat-body,
    .chat-footer,
    .request-search-form,
    .guest-reply-form,
    .seller-chat-form {
        max-width: 100%;
    }

    .chat-input,
    .conversation-text,
    .reply-message,
    .description-box,
    textarea {
        overflow-wrap: anywhere;
    }

    .table-responsive {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent long words/URLs from breaking the layout. */
    a,
    p,
    h1, h2, h3, h4, h5, h6,
    span,
    td,
    th,
    label {
        overflow-wrap: anywhere;
    }
}

/* =========================================================
   MOBILE CORRECTION PASS — 320px TO 767px
   Fix fixed desktop dimensions that can squeeze the homepage.
========================================================= */
@media (min-width: 320px) and (max-width: 767px) {

    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body {
        font-size: 15px;
    }

    /* Keep every main wrapper inside the viewport. */
    .container,
    .hero,
    .support,
    .about,
    .feature,
    .harvest,
    .popular,
    .trade,
    footer {
        max-width: 100% !important;
    }

    .container {
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* ---------------- HERO ---------------- */
    .hero {
        display: flex !important;
        flex-direction: column !important;
        width: calc(100% - 20px) !important;
        margin: 12px 10px !important;
        padding: 12px !important;
        gap: 15px !important;
    }

    .category-box,
    .main-con {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 100% !important;
    }

    .category-header {
        justify-content: center !important;
        text-align: center !important;
        font-size: 16px !important;
    }

    .category-list {
        width: 100% !important;
        padding: 6px 14px !important;
    }

    .category-list li,
    .category-list li a,
    .category-list .sub-menu li,
    .category-list .sub-menu li a {
        text-align: left !important;
    }

    .category-list li a {
        width: 100% !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    .ban-head {
        width: 100% !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        padding: 2px 0 7px !important;
        scrollbar-width: none;
    }

    .ban-head::-webkit-scrollbar {
        display: none;
    }

    .ban-head span {
        flex: 0 0 auto !important;
        font-size: 10px !important;
        padding: 7px 11px !important;
        white-space: nowrap !important;
    }

    .ban-con {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }

    .banner-c,
    .banner-img {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    .banner-c h3 {
        width: 100% !important;
        max-width: 360px !important;
        margin: 5px auto 12px !important;
        font-size: 18px !important;
        line-height: 1.35 !important;
    }

    .banner-c h1 {
        width: 100% !important;
        margin: 0 auto !important;
        font-size: clamp(30px, 9vw, 42px) !important;
        line-height: 1.05 !important;
    }

    .banner-c h1 span {
        position: relative !important;
        display: block !important;
        top: 4px !important;
        font-size: clamp(48px, 15vw, 66px) !important;
        line-height: .9 !important;
    }

    .banner-c p {
        width: 100% !important;
        max-width: 340px !important;
        margin: 12px auto 18px !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .btns {
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }

    .btn1,
    .btn2 {
        font-size: 14px !important;
        padding: 11px 17px !important;
        min-width: 130px !important;
    }

    .banner-img > img:first-child {
        width: min(210px, 65vw) !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    .banner-img .line {
        display: none !important;
    }

    /* ---------------- SUPPORT ---------------- */
    .support {
        padding: 30px 0 !important;
    }

    .sup-bxs {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .sup-bxs > [class*="col-"] {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    .sup-bx {
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    .sup-con {
        max-width: 330px;
    }

    .sup-bx h3,
    .sup-bx p {
        text-align: center !important;
    }

    /* ---------------- ABOUT ---------------- */
    .about {
        padding: 20px 0 35px !important;
    }

    .abt-bx {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex-direction: column !important;
    }

    .abt-bx > [class*="col-"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .abt-con {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .abt-con h1 {
        width: 100% !important;
        font-size: clamp(28px, 8vw, 40px) !important;
        line-height: 1.12 !important;
        text-align: center !important;
    }

    .abt-con h1 span {
        display: inline-block !important;
        font-size: clamp(45px, 14vw, 65px) !important;
        line-height: .8 !important;
    }

    .abt-con p {
        width: 100% !important;
        max-width: 520px !important;
        margin: 18px auto !important;
        font-size: 14px !important;
        line-height: 1.65 !important;
        text-align: center !important;
    }

    .abt-img {
        max-width: 100% !important;
        margin: 15px auto 0 !important;
    }

    .abt-img img {
        width: min(360px, 90vw) !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    /* ---------------- FEATURE / PRODUCTS ---------------- */
    .feature {
        width: calc(100% - 24px) !important;
        margin: 25px 12px !important;
        padding: 30px 14px 35px !important;
        border-radius: 30px !important;
    }

    .feature > span {
        font-size: clamp(48px, 15vw, 68px) !important;
        line-height: .9 !important;
        margin-top: 0 !important;
    }

    .feature > h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin: 8px 0 25px !important;
    }

    .feature > .row {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .feature > .row > [class*="col-"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .feature .f-bx {
        width: 100% !important;
        padding: 12px !important;
    }

    .feature .f-bx .f-img {
        width: 100% !important;
        height: 240px !important;
        padding: 30px !important;
    }

    .feature .f-bx h2 {
        font-size: 17px !important;
        line-height: 1.35 !important;
        text-align: center !important;
    }

    .feature .f-bx .p-bx {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px 12px !important;
    }

    .feature .f-bx .p-bx p {
        font-size: 16px !important;
    }

    .feature .f-bx .cart-btn {
        font-size: 12px !important;
        padding: 9px 14px !important;
    }

    .f-link {
        text-align: center !important;
    }

    /* ---------------- FARMER'S CORNER ---------------- */
    .harvest {
        width: 100% !important;
        padding: 45px 15px !important;
        overflow: hidden !important;
    }

    .harvest > .row {
        width: 100% !important;
        margin: 0 !important;
        flex-direction: column !important;
    }

    .harvest > .row > [class*="col-"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .har-con {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .harvest span {
        display: block !important;
        font-size: clamp(48px, 15vw, 68px) !important;
        line-height: .9 !important;
        text-align: center !important;
    }

    .harvest h1 {
        font-size: clamp(28px, 8vw, 40px) !important;
        line-height: 1.15 !important;
        margin: 12px auto 18px !important;
        text-align: center !important;
    }

    .harvest p {
        width: 100% !important;
        max-width: 520px !important;
        margin: 15px auto !important;
        font-size: 14px !important;
        line-height: 1.65 !important;
        text-align: center !important;
    }

    .harvest p br {
        display: none !important;
    }

    .har-arrow {
        justify-content: center !important;
        margin-bottom: 25px !important;
    }

    .harvest-slider {
        width: 100% !important;
    }

    .harvest-slider .swiper-slide img,
    .harvest-track img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 369 / 481 !important;
        object-fit: cover !important;
    }

    .h-line {
        display: none !important;
    }

    /* ---------------- POPULAR ---------------- */
    .popular {
        width: 100% !important;
        padding: 60px 15px !important;
        overflow: hidden !important;
    }

    .popular > span {
        font-size: clamp(48px, 15vw, 68px) !important;
        line-height: .9 !important;
    }

    .popular > h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin: 10px auto 25px !important;
    }

    .popular-wrapper,
    .popular-bx {
        width: 100% !important;
        max-width: 100% !important;
    }

    .popular .f-bx {
        width: 100% !important;
        padding: 12px !important;
    }

    .popular .f-bx .f-img {
        height: 230px !important;
        padding: 25px !important;
    }

    .popular .f-bx h2 {
        font-size: 17px !important;
        text-align: center !important;
    }

    .popular .f-bx .p-bx {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px 12px !important;
    }

    .popular-arrow {
        margin-top: 25px !important;
    }

    /* ---------------- READY TO TRADE ---------------- */
    .trade {
        width: 100% !important;
        padding: 20px 0 !important;
        overflow: hidden !important;
    }

    .m-tg {
        width: 100% !important;
        height: 100% !important;
        background-size: cover !important;
        background-position: center !important;
        left: 0 !important;
    }

    .trade > .container {
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .trade-bx {
        width: 100% !important;
        margin: 0 !important;
        padding: 70px 0 !important;
        flex-direction: column !important;
    }

    .trade-bx > [class*="col-"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
    }

    .trade-bx h1 {
        width: 100% !important;
        font-size: clamp(30px, 9vw, 44px) !important;
        line-height: 1.15 !important;
        margin-bottom: 25px !important;
        text-align: center !important;
    }

    .trade-bx span {
        display: block !important;
        position: relative !important;
        top: auto !important;
        font-size: clamp(50px, 15vw, 70px) !important;
        line-height: .9 !important;
        margin-top: 4px !important;
    }

    .trade-bx p {
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 auto 20px !important;
        direction: ltr !important;
        text-align: center !important;
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .trade-bx .btns {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    /* ---------------- FOOTER ---------------- */
    footer {
        width: 100% !important;
        padding: 45px 0 25px !important;
        margin-top: 25px !important;
    }

    footer .container {
        width: 100% !important;
    }

    footer .row {
        width: 100% !important;
        margin: 0 !important;
    }

    footer .row > [class*="col-"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
    }

    footer img {
        max-width: 100% !important;
        height: auto !important;
    }

    footer p {
        width: 100% !important;
        max-width: 500px !important;
        margin: 15px auto !important;
        font-size: 13px !important;
        line-height: 1.65 !important;
        text-align: center !important;
    }

    .social {
        justify-content: center !important;
        margin-bottom: 25px !important;
    }

    .f-line {
        display: none !important;
    }

    .footer-links {
        width: 100% !important;
        text-align: center !important;
    }

    .footer-links h3,
    .footer-links h4 {
        text-align: center !important;
    }

    .footer-links h3::after,
    .footer-links h4::before {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .footer-links h4 {
        font-size: 15px !important;
        padding-bottom: 12px !important;
        margin-bottom: 12px !important;
    }

    .footer-links1 {
        display: inline-block !important;
        text-align: center !important;
    }

    /* Do not allow decorative/background elements to create a narrow layout. */
    .line-2,
    .line-2 svg {
        max-width: 100% !important;
    }
}

/* =========================================================
   TABLET CORRECTION — 768px TO 999px
========================================================= */
@media (min-width: 768px) and (max-width: 999px) {
    .hero {
        width: calc(100% - 30px) !important;
        margin: 15px !important;
        padding: 18px !important;
    }

    .about .container,
    .trade .container,
    footer .container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .abt-bx,
    .trade-bx {
        flex-direction: column !important;
    }

    .abt-bx > [class*="col-"],
    .trade-bx > [class*="col-"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .abt-con,
    .abt-img,
    .trade-bx h1,
    .trade-bx p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .abt-con p,
    .trade-bx p {
        max-width: 680px !important;
        width: 100% !important;
    }

    .feature {
        width: calc(100% - 48px) !important;
        margin: 35px 24px !important;
        padding: 40px 25px !important;
        border-radius: 45px !important;
    }

    .feature > .row > [class*="col-"] {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .feature .f-bx .f-img {
        width: 100% !important;
        height: 250px !important;
    }

    .harvest {
        padding: 50px 24px !important;
    }

    .harvest > .row {
        margin: 0 !important;
    }

    .harvest > .row > [class*="col-"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .harvest p br {
        display: none !important;
    }

    .harvest h1,
    .harvest p,
    .harvest span {
        text-align: center !important;
    }

    .harvest .har-arrow {
        justify-content: center !important;
    }

    .harvest-slider .swiper-slide img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 369 / 481 !important;
    }

    .trade-bx {
        padding: 90px 0 !important;
    }

    .trade-bx span {
        position: relative !important;
        top: auto !important;
        display: inline-block !important;
    }

    .trade-bx p {
        direction: ltr !important;
        text-align: center !important;
    }

    .trade-bx .btns {
        justify-content: center !important;
    }
}

/* =========================================================
   SMALL LAPTOP CORRECTION — 1000px TO 1300px
========================================================= */
@media (min-width: 1000px) and (max-width: 1300px) {
    .hero {
        padding-left: 35px !important;
        padding-right: 35px !important;
    }

    .feature {
        margin-left: 40px !important;
        margin-right: 40px !important;
        padding-left: 45px !important;
        padding-right: 45px !important;
        border-radius: 65px !important;
    }

    .harvest {
        padding-left: 40px !important;
        padding-right: 30px !important;
    }

    .harvest h1 {
        font-size: 44px !important;
    }

    .harvest p {
        font-size: 17px !important;
    }

    .harvest p br {
        display: none !important;
    }

    .harvest-slider .swiper-slide img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 369 / 481 !important;
    }

    .trade-bx {
        padding: 110px 0 !important;
    }

    .trade-bx p {
        width: min(100%, 420px) !important;
    }
}

/* =========================================================
   LAPTOP CORRECTION — 1301px TO 1600px
========================================================= */
@media (min-width: 1301px) and (max-width: 1600px) {
    .hero {
        padding-left: 55px !important;
        padding-right: 55px !important;
    }

    .feature {
        margin-left: 60px !important;
        margin-right: 60px !important;
        padding-left: 65px !important;
        padding-right: 65px !important;
    }

    .harvest {
        padding-left: 80px !important;
        padding-right: 40px !important;
    }

    .trade-bx {
        padding-top: 125px !important;
        padding-bottom: 125px !important;
    }

    .trade-bx p {
        width: min(100%, 460px) !important;
    }
}

/* =========================================================
   FINAL CALIBRATION PASS
   Keeps the requested breakpoint system while preventing
   fixed desktop dimensions from leaking into smaller widths.
========================================================= */

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

/* Never let Bootstrap rows create viewport overflow. */
.row {
    max-width: 100%;
}

/* =========================================================
   MOBILE FINAL — 320px TO 767px
========================================================= */
@media (min-width: 320px) and (max-width: 767px) {

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .h-bx > div[style*="width"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .f-row {
        width: 100% !important;
        min-width: 0 !important;
    }

    .header-s {
        min-width: 0 !important;
        width: 100% !important;
    }

    .hero {
        box-sizing: border-box !important;
    }

    /* Keep headings readable at the narrowest supported width. */
    .banner-c h3,
    .banner-c h1,
    .banner-c p,
    .abt-con h1,
    .abt-con p,
    .feature h1,
    .harvest h1,
    .harvest p,
    .popular h1,
    .trade-bx h1,
    .trade-bx p {
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .banner-c h1 {
        font-size: clamp(28px, 8.5vw, 42px) !important;
    }

    .banner-c h1 span {
        font-size: clamp(46px, 14vw, 66px) !important;
    }

    .abt-con h1,
    .harvest h1,
    .trade-bx h1 {
        font-size: clamp(27px, 8vw, 40px) !important;
    }

    .feature > h1,
    .popular > h1 {
        font-size: clamp(24px, 7vw, 30px) !important;
    }

    .feature .f-bx .f-img,
    .popular .f-bx .f-img {
        width: 100% !important;
        max-width: 100% !important;
    }

    .feature .f-bx img,
    .popular .f-bx img {
        max-width: 100% !important;
    }

    /* Category list remains left aligned exactly as requested. */
    .category-list li,
    .category-list li a,
    .category-list .sub-menu li,
    .category-list .sub-menu li a,
    li {
        text-align: left !important;
    }

    /* Everything else in the content remains centered. */
    .support,
    .about,
    .feature,
    .harvest,
    .popular,
    .trade,
    footer,
    .support h1,
    .support h2,
    .support h3,
    .support p,
    .about h1,
    .about h2,
    .about h3,
    .about p,
    .feature h1,
    .feature h2,
    .feature p,
    .harvest h1,
    .harvest p,
    .popular h1,
    .popular h2,
    .trade h1,
    .trade p {
        text-align: center !important;
    }

    .footer-links1 {
        text-align: center !important;
    }
}

/* =========================================================
   TABLET FINAL — 768px TO 999px
========================================================= */
@media (min-width: 768px) and (max-width: 999px) {

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    /* Header: logo, search/account area and navigation must fit. */
    .h-bx {
        width: 100% !important;
        gap: 20px !important;
    }

    .h-bx > div[style*="width"] {
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .f-row {
        width: 100% !important;
        min-width: 0 !important;
        gap: 14px !important;
    }

    .header-s {
        width: auto !important;
        flex: 1 1 360px !important;
        min-width: 220px !important;
    }

    .acc,
    .switch-profile {
        flex: 0 0 auto !important;
        white-space: nowrap;
    }

    .nav ul {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Hero remains two-column on tablet, but never overflows. */
    .hero {
        width: calc(100% - 30px) !important;
        max-width: 100% !important;
        margin: 15px !important;
        padding: 18px !important;
        gap: 22px !important;
        align-items: stretch !important;
    }

    .category-box {
        width: 235px !important;
        flex: 0 0 235px !important;
    }

    .main-con {
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .ban-head {
        width: 100% !important;
        overflow-x: auto !important;
        scrollbar-width: none;
    }

    .ban-head::-webkit-scrollbar {
        display: none;
    }

    .ban-head span {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .ban-con {
        width: 100% !important;
    }

    .banner-c,
    .banner-img {
        min-width: 0 !important;
    }

    .banner-c h1 {
        font-size: clamp(38px, 5.4vw, 54px) !important;
    }

    .banner-c h1 span {
        font-size: clamp(55px, 8vw, 78px) !important;
    }

    /* Product grid: two cards per row, with fluid image width. */
    .feature {
        width: calc(100% - 44px) !important;
        margin: 35px 22px !important;
        padding: 38px 22px !important;
    }

    .feature > .row > [class*="col-"] {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .feature .f-bx,
    .feature .f-bx .f-img {
        width: 100% !important;
        max-width: 100% !important;
    }

    .feature .f-bx .f-img {
        height: 235px !important;
        padding: 24px !important;
    }

    /* Farmer's Corner: two balanced columns on tablet. */
    .harvest {
        padding: 55px 22px !important;
    }

    .harvest > .row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        margin-left: -10px !important;
        margin-right: -10px !important;
    }

    .harvest > .row > [class*="col-"] {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .har-con {
        width: 100% !important;
    }

    .harvest-slider .swiper-slide img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 369 / 481 !important;
        object-fit: cover !important;
    }

    /* Popular Swiper cards stay inside the viewport. */
    .popular {
        width: 100% !important;
        overflow: hidden !important;
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    .popular .f-bx,
    .popular .f-bx .f-img {
        width: 100% !important;
        max-width: 100% !important;
    }

    .popular .f-bx .f-img {
        height: 260px !important;
        padding: 25px !important;
    }

    /* Ready-to-trade remains a balanced two-column tablet block. */
    .trade-bx {
        width: 100% !important;
        padding: 105px 0 !important;
    }

    .trade-bx > [class*="col-"] {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .trade-bx h1 {
        font-size: clamp(38px, 5vw, 52px) !important;
    }

    .trade-bx span {
        position: relative !important;
        top: auto !important;
        display: inline-block !important;
        font-size: clamp(55px, 8vw, 76px) !important;
    }

    .trade-bx p {
        width: 100% !important;
        max-width: 430px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        direction: ltr !important;
        text-align: center !important;
        font-size: 16px !important;
    }

    .trade-bx .btns {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    footer .row > [class*="col-"] {
        min-width: 0 !important;
    }
}

/* =========================================================
   SMALL LAPTOP FINAL — 1000px TO 1300px
========================================================= */
@media (min-width: 1000px) and (max-width: 1300px) {

    .container {
        width: 100% !important;
        max-width: 1140px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .h-bx {
        width: 100% !important;
        gap: 24px !important;
    }

    .h-bx > div[style*="width"] {
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .f-row {
        width: 100% !important;
        gap: 14px !important;
    }

    .header-s {
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .nav ul {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .hero {
        width: 100% !important;
        padding-left: 35px !important;
        padding-right: 35px !important;
        gap: 30px !important;
        box-sizing: border-box !important;
    }

    .category-box {
        width: 255px !important;
        flex: 0 0 255px !important;
    }

    .main-con {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .banner-c h1 {
        font-size: clamp(45px, 4.8vw, 60px) !important;
    }

    .banner-c h1 span {
        font-size: clamp(65px, 7vw, 88px) !important;
    }

    .banner-img {
        max-width: 40% !important;
    }

    /* Four-card feature grid without the original 292px fixed image width. */
    .feature {
        width: calc(100% - 80px) !important;
        margin: 45px 40px !important;
        padding: 45px !important;
    }

    .feature > .row > [class*="col-"] {
        width: 25% !important;
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }

    .feature .f-bx,
    .feature .f-bx .f-img {
        width: 100% !important;
        max-width: 100% !important;
    }

    .feature .f-bx .f-img {
        height: 235px !important;
        padding: 22px !important;
    }

    .feature .f-bx h2 {
        font-size: 18px !important;
    }

    .feature .f-bx .p-bx {
        gap: 8px !important;
    }

    .feature .f-bx .p-bx p {
        font-size: 17px !important;
    }

    .harvest {
        padding-left: 40px !important;
        padding-right: 30px !important;
    }

    .harvest > .row {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }

    .harvest > .row > [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .harvest-slider .swiper-slide img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 369 / 481 !important;
        object-fit: cover !important;
    }

    .popular .f-bx,
    .popular .f-bx .f-img {
        width: 100% !important;
        max-width: 100% !important;
    }

    .popular .f-bx .f-img {
        height: 270px !important;
        padding: 25px !important;
    }

    .trade-bx {
        padding: 115px 0 !important;
    }

    .trade-bx p {
        width: min(100%, 430px) !important;
    }

    footer .row > [class*="col-"] {
        min-width: 0 !important;
    }
}

/* =========================================================
   LAPTOP FINAL — 1301px TO 1600px
========================================================= */
@media (min-width: 1301px) and (max-width: 1600px) {

    .container {
        width: 100% !important;
        max-width: 1320px !important;
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    .h-bx {
        width: 100% !important;
        gap: 32px !important;
    }

    .h-bx > div[style*="width"] {
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .f-row {
        width: 100% !important;
        min-width: 0 !important;
    }

    .header-s {
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .hero {
        width: 100% !important;
        padding-left: 55px !important;
        padding-right: 55px !important;
        gap: 38px !important;
    }

    .category-box {
        width: 275px !important;
        flex: 0 0 275px !important;
    }

    .main-con {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .banner-img {
        max-width: 42% !important;
    }

    .feature {
        width: calc(100% - 120px) !important;
        margin: 50px 60px !important;
        padding: 50px 65px !important;
    }

    .feature > .row > [class*="col-"] {
        width: 25% !important;
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }

    .feature .f-bx,
    .feature .f-bx .f-img {
        width: 100% !important;
        max-width: 100% !important;
    }

    .feature .f-bx .f-img {
        height: 275px !important;
        padding: 28px !important;
    }

    .harvest {
        padding-left: 80px !important;
        padding-right: 40px !important;
    }

    .harvest-slider .swiper-slide img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 369 / 481 !important;
        object-fit: cover !important;
    }

    .popular .f-bx,
    .popular .f-bx .f-img {
        width: 100% !important;
        max-width: 100% !important;
    }

    .popular .f-bx .f-img {
        height: 290px !important;
        padding: 30px !important;
    }

    .trade-bx {
        padding-top: 125px !important;
        padding-bottom: 125px !important;
    }

    .trade-bx p {
        width: min(100%, 460px) !important;
    }
}

/* =========================================================
   V4 PRECISION PASS — TABLET / SMALL LAPTOP / LAPTOP
   Purpose: balanced gutters, readable card sizes, consistent
   alignment and no fixed desktop dimensions at smaller widths.
========================================================= */

/* ---------- Shared homepage alignment ---------- */
@media (min-width: 768px) and (max-width: 1600px) {
    .hero,
    .support > .container,
    .about > .container {
        box-sizing: border-box !important;
    }

    .hero > .category-box,
    .hero > .main-con {
        min-width: 0 !important;
    }

    .banner-c,
    .banner-img,
    .abt-con,
    .abt-img,
    .har-con,
    .harvest-slider,
    .trade-bx > [class*="col-"] {
        box-sizing: border-box !important;
    }

    .feature .row,
    .support .row,
    .harvest .row,
    .trade-bx .row,
    footer .row {
        box-sizing: border-box !important;
    }
}

/* =========================================================
   TABLET PRECISION — 768px TO 999px
========================================================= */
@media (min-width: 768px) and (max-width: 999px) {

    /* Keep the page visually centered with a predictable gutter. */
    .hero {
        width: min(100% - 32px, 940px) !important;
        margin: 16px auto !important;
        padding: 18px !important;
        gap: 18px !important;
    }

    .category-box {
        width: 220px !important;
        flex: 0 0 220px !important;
        border-radius: 16px !important;
    }

    .category-header {
        height: 42px !important;
        padding: 0 14px !important;
        font-size: 14px !important;
    }

    .category-list {
        padding: 5px 12px !important;
    }

    .category-list li a {
        min-height: 32px !important;
        padding: 6px 0 !important;
        font-size: 11px !important;
    }

    .ban-head {
        gap: 6px !important;
        margin-bottom: 8px !important;
    }

    .ban-head span {
        font-size: 9px !important;
        padding: 6px 9px !important;
    }

    .ban-con {
        align-items: center !important;
        gap: 12px !important;
    }

    .banner-c {
        flex: 1 1 58% !important;
    }

    .banner-img {
        flex: 0 1 42% !important;
    }

    .banner-c h3 {
        font-size: clamp(16px, 2.1vw, 21px) !important;
        margin-bottom: 13px !important;
        line-height: 1.25 !important;
    }

    .banner-c h1 {
        font-size: clamp(34px, 5.1vw, 48px) !important;
        line-height: 1.03 !important;
    }

    .banner-c h1 span {
        font-size: clamp(50px, 7.3vw, 70px) !important;
        top: 8px !important;
    }

    .banner-c p {
        font-size: 13px !important;
        line-height: 1.45 !important;
        max-width: 300px !important;
        margin: 10px auto 14px !important;
    }

    .btn1,
    .btn2 {
        min-width: 105px !important;
        padding: 9px 12px !important;
        font-size: 11px !important;
        border-radius: 7px !important;
    }

    .banner-img > img:first-child {
        width: min(205px, 100%) !important;
    }

    /* Four support items in one row, with equal columns. */
    .support {
        padding: 28px 0 !important;
    }

    .support .sup-bxs {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
    }

    .support .sup-bxs > [class*="col-"] {
        width: 25% !important;
        flex: 0 0 25% !important;
        max-width: 25% !important;
        margin-bottom: 0 !important;
    }

    .sup-bx {
        gap: 7px !important;
        align-items: center !important;
    }

    .sup-icon {
        padding: 8px !important;
        flex: 0 0 auto !important;
    }

    .sup-icon svg {
        width: 28px !important;
        height: 28px !important;
    }

    .sup-bx h3 {
        font-size: 11px !important;
        line-height: 1.25 !important;
        margin-bottom: 3px !important;
    }

    .sup-bx p {
        font-size: 9px !important;
        line-height: 1.35 !important;
    }

    /* About is intentionally one column at tablet width so the image
       does not compete with the copy on a 768px screen. */
    .about > .container {
        width: min(100% - 40px, 760px) !important;
        margin: 0 auto !important;
    }

    .abt-bx {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
    }

    .abt-bx > [class*="col-"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .abt-con h1 {
        max-width: 610px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: clamp(31px, 4.5vw, 40px) !important;
    }

    .abt-con p {
        max-width: 620px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 13px !important;
    }

    .abt-img img {
        width: min(440px, 78vw) !important;
    }

    /* Product grid: two equal cards, never squeezed. */
    .feature {
        width: min(100% - 40px, 920px) !important;
        margin: 35px auto !important;
        padding: 34px 24px 38px !important;
    }

    .feature > span,
    .harvest span,
    .popular > span,
    .trade-bx > span {
        font-size: clamp(45px, 7vw, 62px) !important;
        line-height: .85 !important;
    }

    .feature > h1,
    .popular > h1 {
        font-size: clamp(27px, 3.8vw, 36px) !important;
        line-height: 1.15 !important;
    }

    .feature > .row {
        row-gap: 16px !important;
    }

    .feature > .row > [class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .feature .f-bx {
        min-width: 0 !important;
        padding: 10px !important;
        border-radius: 18px !important;
    }

    .feature .f-bx .f-img {
        height: 190px !important;
        padding: 18px !important;
        border-radius: 18px !important;
    }

    .feature .f-bx h2 {
        font-size: 13px !important;
        margin-top: 10px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .feature .f-bx .p-bx {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4px !important;
        align-items: center !important;
    }

    .feature .f-bx .p-bx .p-1,
    .feature .f-bx .p-bx .p-2 {
        font-size: 12px !important;
        text-align: left !important;
    }

    .feature .f-bx .cart-btn {
        grid-column: 1 / -1 !important;
        justify-self: center !important;
        padding: 7px 11px !important;
        font-size: 10px !important;
    }

    /* Farmer's Corner becomes a clean two-column block. */
    .harvest {
        padding: 48px 28px !important;
    }

    .harvest > .row {
        gap: 10px !important;
    }

    .har-con {
        text-align: left !important;
    }

    .harvest span,
    .harvest h1,
    .harvest p {
        text-align: left !important;
    }

    .harvest h1 {
        font-size: clamp(27px, 3.8vw, 38px) !important;
        line-height: 1.12 !important;
        margin-bottom: 14px !important;
    }

    .harvest p {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    .harvest p br {
        display: none !important;
    }

    .harvest-slider .swiper-slide img {
        aspect-ratio: 1 / 1 !important;
        max-height: 300px !important;
        border-radius: 18px !important;
    }

    /* Popular section stays within its own viewport. */
    .popular {
        padding: 55px 0 !important;
        overflow: hidden !important;
    }

    .popular-wrapper {
        width: 100% !important;
        overflow: hidden !important;
    }

    .popular .f-bx .f-img {
        height: 220px !important;
        padding: 18px !important;
    }

    /* Trade: equal columns with the heading on the left and copy on right. */
    .trade-bx {
        width: min(100% - 44px, 920px) !important;
        margin: 0 auto !important;
        padding: 85px 0 !important;
    }

    .trade-bx h1 {
        font-size: clamp(34px, 4.6vw, 46px) !important;
        line-height: 1.08 !important;
    }

    .trade-bx p {
        max-width: 360px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }

    .trade-bx .btns {
        justify-content: flex-start !important;
    }
}

/* =========================================================
   SMALL LAPTOP PRECISION — 1000px TO 1300px
========================================================= */
@media (min-width: 1000px) and (max-width: 1300px) {

    .hero {
        width: min(100% - 48px, 1240px) !important;
        margin: 18px auto !important;
        padding: 22px 28px !important;
        gap: 26px !important;
    }

    .category-box {
        width: 230px !important;
        flex: 0 0 230px !important;
    }

    .category-list li a {
        font-size: 14px !important;
        padding: 7px 0 !important;
    }

    .ban-head {
        gap: 5px !important;
        margin-bottom: 8px !important;
    }

    .ban-head span {
        font-size: 9px !important;
        padding: 7px 10px !important;
    }

    .banner-c h3 {
        font-size: 19px !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
    }

    .banner-c h1 {
        font-size: clamp(43px, 4.5vw, 56px) !important;
        line-height: 1.02 !important;
    }

    .banner-c h1 span {
        font-size: clamp(62px, 6.8vw, 82px) !important;
        top: 9px !important;
    }

    .banner-c p {
        /* font-size: 14px !important; */
        line-height: 1.45 !important;
        margin: 12px 0 17px !important;
    }

    .btn1,
    .btn2 {
        padding: 10px 16px !important;
        font-size: 12px !important;
    }

    .banner-img > img:first-child {
        width: min(280px, 100%) !important;
    }

    .support {
        padding: 35px 0 !important;
    }

    .support .sup-bxs {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 16px !important;
    }

    .support .sup-bxs > [class*="col-"] {
        width: 25% !important;
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }

    .sup-icon {
        padding: 9px !important;
    }

    .sup-icon svg {
        width: 31px !important;
        height: 31px !important;
    }

    .sup-bx h3 {
        /* font-size: 12px !important; */
    }

    .sup-bx p {
        /* font-size: 10px !important; */
        line-height: 1.4 !important;
    }

    .about {
        padding: 30px 0 50px !important;
    }

    .abt-bx {
        align-items: center !important;
    }

    .abt-con {
        padding-right: 20px !important;
    }

    .abt-con h1 {
        font-size: clamp(37px, 4vw, 48px) !important;
        line-height: 1.08 !important;
        text-align: left !important;
    }

    .abt-con h1 span {
        font-size: clamp(58px, 6vw, 74px) !important;
    }

    .abt-con p {
        font-size: 16px !important;
        line-height: 1.55 !important;
        text-align: left !important;
        max-width: 560px !important;
    }

    .abt-img img {
        width: min(430px, 100%) !important;
    }

    /* 3 columns gives 1000-1300px a much more usable card width. */
    .feature {
        width: min(100% - 70px, 1180px) !important;
        margin: 45px auto !important;
        padding: 42px 34px 45px !important;
        border-radius: 42px !important;
    }

    .feature > .row > [class*="col-"] {
        width: 33.333333% !important;
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }

    .feature .f-bx .f-img {
        height: 220px !important;
        padding: 22px !important;
    }

    .feature .f-bx h2 {
        font-size: 14px !important;
        margin-top: 11px !important;
    }

    .feature .f-bx .p-bx .p-1,
    .feature .f-bx .p-bx .p-2 {
        font-size: 13px !important;
    }

    .feature .f-bx .cart-btn {
        padding: 8px 12px !important;
        font-size: 10px !important;
    }

    .harvest {
        padding: 60px 55px !important;
    }

    .har-con {
        padding-right: 20px !important;
    }

    .harvest span {
        font-size: 64px !important;
        line-height: .9 !important;
    }

    .harvest h1 {
        font-size: clamp(35px, 3.7vw, 48px) !important;
        line-height: 1.08 !important;
    }

    .harvest p {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    .harvest p br {
        display: none !important;
    }

    .harvest-slider .swiper-slide img {
        aspect-ratio: 1 / 1.05 !important;
        height: auto !important;
        max-height: 390px !important;
    }

    .popular {
        padding: 70px 0 !important;
    }

    .popular > h1 {
        font-size: 40px !important;
    }

    .popular .f-bx .f-img {
        height: 245px !important;
        padding: 22px !important;
    }

    .trade-bx {
        width: min(100% - 90px, 1180px) !important;
        margin: 0 auto !important;
        padding: 105px 0 !important;
    }

    .trade-bx h1 {
        font-size: 46px !important;
    }

    .trade-bx p {
        width: 100% !important;
        max-width: 400px !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
    }
}

/* =========================================================
   LAPTOP PRECISION — 1301px TO 1600px
========================================================= */
@media (min-width: 1301px) and (max-width: 1600px) {

    .hero {
        width: min(100% - 80px, 1480px) !important;
        margin: 20px auto !important;
        padding: 24px 40px !important;
        gap: 34px !important;
    }

    .category-box {
        width: 260px !important;
        flex: 0 0 260px !important;
    }

    .category-list li a {
        font-size: 13px !important;
        padding: 8px 0 !important;
    }

    .ban-head {
        gap: 7px !important;
        margin-bottom: 10px !important;
    }

    .ban-head span {
        font-size: 11px !important;
        padding: 8px 14px !important;
    }

    .banner-c h3 {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    .banner-c h1 {
        font-size: clamp(50px, 4vw, 64px) !important;
        line-height: 1.02 !important;
    }

    .banner-c h1 span {
        font-size: clamp(70px, 6.2vw, 92px) !important;
    }

    .banner-c p {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    .banner-img > img:first-child {
        width: min(330px, 100%) !important;
    }

    .support {
        padding: 40px 0 !important;
    }

    .support .sup-bxs {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    .support .sup-bxs > [class*="col-"] {
        width: 25% !important;
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }

    .sup-icon {
        padding: 10px !important;
    }

    .sup-icon svg {
        width: 34px !important;
        height: 34px !important;
    }

    .sup-bx h3 {
        /* font-size: 13px !important; */
    }

    .sup-bx p {
        font-size: 15px !important;
        line-height: 1.45 !important;
    }

    .about {
        padding: 35px 0 60px !important;
    }

    .abt-con h1 {
        font-size: clamp(42px, 3.6vw, 54px) !important;
        line-height: 1.08 !important;
        text-align: left !important;
    }

    .abt-con h1 span {
        font-size: clamp(65px, 5.5vw, 82px) !important;
    }

    .abt-con p {
        font-size: 17px !important;
        line-height: 1.6 !important;
        text-align: left !important;
        max-width: 620px !important;
    }

    .abt-img img {
        width: min(500px, 100%) !important;
    }

    .feature {
        width: min(100% - 110px, 1390px) !important;
        margin: 50px auto !important;
        padding: 48px 10px 52px !important;
        border-radius: 55px !important;
    }

    .feature > .row > [class*="col-"] {
        width: 25% !important;
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }

    .feature .f-bx .f-img {
        height: 250px !important;
        padding: 24px !important;
    }

    .feature .f-bx h2 {
        font-size: 15px !important;
    }

    .feature .f-bx .p-bx .p-1,
    .feature .f-bx .p-bx .p-2 {
        font-size: 14px !important;
    }

    .harvest {
        padding: 65px 90px !important;
    }

    .harvest span {
        font-size: 70px !important;
        line-height: .9 !important;
    }

    .harvest h1 {
        font-size: clamp(39px, 3.2vw, 50px) !important;
        line-height: 1.08 !important;
    }

    .harvest p {
        font-size: 17px !important;
        line-height: 1.55 !important;
    }

    .harvest p br {
        display: none !important;
    }

    .harvest-slider .swiper-slide img {
        max-height: 450px !important;
        aspect-ratio: 1 / 1.15 !important;
        height: auto !important;
    }

    .popular {
        padding: 80px 0 !important;
    }

    .popular > h1 {
        font-size: 45px !important;
    }

    .popular .f-bx .f-img {
        height: 270px !important;
        padding: 25px !important;
    }

    .trade-bx {
        width: min(100% - 150px, 1350px) !important;
        margin: 0 auto !important;
        padding: 115px 0 !important;
    }

    .trade-bx h1 {
        font-size: 50px !important;
    }

    .trade-bx p {
        max-width: 440px !important;
        font-size: 17px !important;
        line-height: 1.55 !important;
    }
    .m-tg {
        height: 100%;
    }
}