@media (max-width: 900px) {

    .catalog-hero-inner {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .catalog-hero-content {
        text-align: center;
    }

    .catalog-hero-content h1 {
        margin-inline: auto;
    }

    .catalog-hero-content p {
        margin-inline: auto;
    }

    .catalog-actions {
        justify-content: center;
    }

    .catalog-filter {
        flex-direction: column;
        align-items: flex-start;
    }

    .category-pills {
        justify-content: flex-start;
    }

    .catalog-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .catalog-info-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

}


@media (max-width: 600px) {

    .breadcrumb-section {
        padding: 14px 0;
    }

    .catalog-hero {
        padding: 60px 0;
    }

    .catalog-hero-content h1 {
        font-size: 36px;
    }

    .catalog-actions {
        flex-direction: column;
    }

    .catalog-actions .btn {
        width: 100%;
    }

    .catalog-main-card {
        width: 290px;
        min-height: 330px;
    }

    .catalog-card-body {
        min-height: 250px;
    }

    .catalog-filter-title h2 {
        font-size: 20px;
    }

    .category-pills {
        width: 100%;
    }

    .category-pill {
        flex: 1 1 auto;
        text-align: center;
    }

    .catalog-products-section {
        padding: 65px 0;
    }

    .catalog-section-heading {
        display: block;
    }

    .catalog-section-heading .section-link {
        display: inline-block;
        margin-top: 12px;
    }

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

    .catalog-product-card {
        min-height: auto;
    }

    .catalog-info-section {
        padding: 65px 0;
    }

}

/* =========================
   PULSA RESPONSIVE
========================= */

@media (max-width: 900px) {

    .product-page-hero-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .product-page-content {
        text-align: center;
    }

    .product-page-content h1,
    .product-page-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .product-hero-actions {
        justify-content: center;
    }

    .operator-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nominal-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pulsa-information-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

}


@media (max-width: 600px) {

    .product-page-hero {
        padding: 60px 0;
    }

    .product-page-content h1 {
        font-size: 36px;
    }

    .product-hero-actions {
        flex-direction: column;
    }

    .product-hero-actions .btn {
        width: 100%;
    }

    .phone-card {
        width: 280px;
        min-height: 380px;
    }

    .phone-screen {
        min-height: 285px;
    }

    .operator-section,
    .nominal-section {
        padding: 65px 0;
    }

    .section-heading-center h2,
    .section-heading-row h2 {
        font-size: 27px;
    }

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

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

    .nominal-card {
        padding: 17px;
    }

    .operator-detail-section {
        padding: 50px 0;
    }

    .operator-detail-card {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 25px;
    }

    .operator-detail-icon {
        width: 70px;
        height: 70px;
        border-radius: 18px;
    }

    .pulsa-information {
        padding: 65px 0;
    }

    .pulsa-information-content h2 {
        font-size: 30px;
    }

}

@media (max-width: 900px) {

    .data-hero-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .data-hero-content {
        text-align: center;
    }

    .data-hero-content h1,
    .data-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .data-hero-content .product-hero-actions {
        justify-content: center;
    }

    .data-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .data-operator-grid,
    .data-product-grid {
        grid-template-columns: 1fr;
    }

    .data-tips-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

}


@media (max-width: 600px) {

    .data-hero {
        padding: 60px 0;
    }

    .data-hero-content h1 {
        font-size: 36px;
    }

    .data-hero-content .product-hero-actions {
        flex-direction: column;
    }

    .data-hero-content .product-hero-actions .btn {
        width: 100%;
    }

    .data-device {
        width: 280px;
    }

    .data-category-section,
    .data-operator-section,
    .data-product-section {
        padding: 65px 0;
    }

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

    .data-operator-card {
        padding: 20px;
    }

    .data-info-section {
        padding: 60px 0;
    }

    .data-info-card {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 24px;
    }

    .data-tips-section {
        padding: 65px 0;
    }

    .data-tips-content h2 {
        font-size: 30px;
    }

}

@media (max-width: 1000px) {

    .game-hero-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .game-hero-content {
        text-align: center;
    }

    .game-hero-content h1,
    .game-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .game-hero-content .product-hero-actions {
        justify-content: center;
    }

    .game-trust-row {
        justify-content: center;
    }

    .game-hero-visual {
        max-width: 600px;
        width: 100%;
        margin: auto;
    }

    .game-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .game-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .game-order-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .game-feature-grid,
    .game-console-inner,
    .game-voucher-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

}


@media (max-width: 650px) {

    .game-hero {
        padding: 60px 0;
    }

    .game-hero-content h1 {
        font-size: 36px;
        letter-spacing: -1.2px;
    }

    .game-hero-content .product-hero-actions {
        flex-direction: column;
    }

    .game-hero-content .product-hero-actions .btn {
        width: 100%;
    }

    .game-trust-row {
        gap: 20px;
    }

    .game-hero-visual {
        min-height: 330px;
    }

    .game-floating-card {
        right: 5px;
        bottom: 0;
    }

    .game-category-section,
    .game-product-section,
    .game-feature-section,
    .game-console-section,
    .game-order-section,
    .game-voucher-section,
    .game-faq-section {
        padding: 65px 0;
    }

    .game-category-grid,
    .game-product-grid,
    .game-order-grid {
        grid-template-columns: 1fr;
    }

    .game-feature-content h2,
    .game-console-content h2,
    .game-voucher-content h2 {
        font-size: 30px;
    }

    .game-voucher-points {
        flex-direction: column;
    }

    .game-feature-stat {
        flex-direction: column;
    }

    .game-feature-stat div {
        width: 100%;
    }

}

@media (max-width: 1000px) {

    .pln-hero-grid,
    .pln-intro-grid,
    .pln-important-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .pln-hero-content {
        text-align: center;
    }

    .pln-hero-content h1,
    .pln-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .pln-hero-content .product-hero-actions {
        justify-content: center;
    }

    .pln-highlight-row {
        justify-content: center;
    }

    .pln-hero-visual {
        max-width: 600px;
        width: 100%;
        margin: auto;
    }

    .pln-nominal-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pln-process-grid,
    .pln-benefit-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 650px) {

    .pln-hero,
    .pln-intro,
    .pln-nominal-section,
    .pln-process-section,
    .pln-important-section,
    .pln-benefit-section,
    .pln-faq-section {
        padding: 65px 0;
    }

    .pln-hero-content h1 {
        font-size: 35px;
        letter-spacing: -1px;
    }

    .pln-hero-content .product-hero-actions {
        flex-direction: column;
    }

    .pln-hero-content .product-hero-actions .btn {
        width: 100%;
    }

    .pln-highlight-row {
        gap: 20px;
    }

    .pln-floating-card {
        right: 5px;
        bottom: 5px;
    }

    .pln-nominal-grid,
    .pln-process-grid,
    .pln-benefit-grid {
        grid-template-columns: 1fr;
    }

    .pln-intro-content h2,
    .pln-important-content h2 {
        font-size: 30px;
    }

    .pln-nominal-card p {
        min-height: auto;
    }

}

@media (max-width: 1000px) {

    .ewallet-hero-grid,
    .ewallet-intro-grid,
    .ewallet-check-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .ewallet-hero-content {
        text-align: center;
    }

    .ewallet-hero-content h1,
    .ewallet-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .ewallet-hero-content .product-hero-actions {
        justify-content: center;
    }

    .ewallet-highlight-row {
        justify-content: center;
    }

    .ewallet-hero-visual {
        max-width: 600px;
        width: 100%;
        margin: auto;
    }

    .ewallet-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ewallet-benefit-grid,
    .ewallet-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 650px) {

    .ewallet-hero,
    .ewallet-intro,
    .ewallet-product-section,
    .ewallet-benefit-section,
    .ewallet-process-section,
    .ewallet-check-section,
    .ewallet-faq-section {
        padding: 65px 0;
    }

    .ewallet-hero-content h1 {
        font-size: 35px;
        letter-spacing: -1px;
    }

    .ewallet-hero-content .product-hero-actions {
        flex-direction: column;
    }

    .ewallet-hero-content .product-hero-actions .btn {
        width: 100%;
    }

    .ewallet-highlight-row {
        gap: 20px;
    }

    .ewallet-floating-card {
        right: 5px;
        bottom: 5px;
    }

    .ewallet-product-grid,
    .ewallet-benefit-grid,
    .ewallet-process-grid {
        grid-template-columns: 1fr;
    }

    .ewallet-intro-content h2,
    .ewallet-check-content h2 {
        font-size: 30px;
    }

}

@media (max-width: 1000px) {

    .order-guide-hero-grid,
    .order-tips-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .order-guide-content {
        text-align: center;
    }

    .order-guide-content h1,
    .order-guide-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .order-guide-content .product-hero-actions {
        justify-content: center;
    }

    .order-guide-stat {
        justify-content: center;
    }

    .order-step-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .order-guide-hero,
    .order-step-section,
    .order-product-guide,
    .order-tips-section,
    .order-flow-section,
    .order-faq-section {
        padding: 65px 0;
    }

    .order-guide-content h1 {
        font-size: 35px;
        letter-spacing: -1px;
    }

    .order-guide-content .product-hero-actions {
        flex-direction: column;
    }

    .order-guide-content .product-hero-actions .btn {
        width: 100%;
    }

    .order-guide-stat {
        gap: 20px;
    }

    .order-step-grid,
    .order-product-grid {
        grid-template-columns: 1fr;
    }

    .order-tips-content h2 {
        font-size: 30px;
    }

    .order-flow {
        flex-direction: column;
        gap: 15px;
    }

    .order-flow-line {
        width: 1px;
        height: 35px;
    }

}

@media (max-width: 1000px) {

    .check-order-hero-grid,
    .how-check-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .check-order-intro {
        text-align: center;
    }

    .check-order-intro h1,
    .check-order-intro > p {
        margin-left: auto;
        margin-right: auto;
    }

}


@media (max-width: 700px) {

    .check-order-hero,
    .order-status-section,
    .how-check-section,
    .order-security-section,
    .check-faq-section {
        padding: 65px 0;
    }

    .check-order-intro h1 {
        font-size: 36px;
        letter-spacing: -1px;
    }

    .order-check-card {
        padding: 23px;
    }

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

    .security-box {
        flex-direction: column;
        padding: 25px;
    }

    .security-content h2 {
        font-size: 25px;
    }

    .security-points {
        display: grid;
    }

}

 /* =========================================
    FAQ HERO
 ========================================= */

.faq-hero {
    padding: 85px 0;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(37, 99, 235, .12),
            transparent 35%
        ),
        var(--light);
}

.faq-hero-grid {
    display: grid;
    grid-template-columns: 1fr .8fr;
    gap: 70px;
    align-items: center;
}

.faq-hero-content h1 {
    max-width: 650px;
    margin-top: 8px;
    color: var(--dark);
    font-size: clamp(40px, 5vw, 58px);
    line-height: 1.07;
    letter-spacing: -2px;
}

.faq-hero-content > p {
    max-width: 600px;
    margin-top: 20px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
}

.faq-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.faq-hero-image {
    overflow: hidden;
    border-radius: 25px;
}

.faq-hero-image img {
    width: 100%;
    display: block;
}


/* =========================================
   CATEGORY
========================================= */

.faq-category-section {
    padding: 90px 0;
    background: var(--white);
}

.faq-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 45px;
}

.faq-category-card {
    position: relative;
    padding: 25px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--white);
    text-decoration: none;
    transition: .3s ease;
}

.faq-category-card:hover {
    border-color: #bfdbfe;
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.faq-category-icon {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #eff6ff;
    font-size: 18px;
}

.faq-category-card h3 {
    margin-top: 18px;
    color: var(--dark);
    font-size: 14px;
}

.faq-category-card p {
    max-width: 170px;
    margin-top: 7px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.6;
}

.faq-category-arrow {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 800;
}


/* =========================================
   FAQ MAIN
========================================= */

.faq-main-section {
    padding: 90px 0;
    background: var(--white);
}

.faq-main-section.faq-alt {
    background: var(--light);
}

.faq-section-title {
    max-width: 850px;
    margin: 0 auto;
}

.faq-section-title h2 {
    margin-top: 7px;
    color: var(--dark);
    font-size: 32px;
    line-height: 1.2;
}

.faq-list {
    max-width: 850px;
    margin: 35px auto 0;
}

.faq-item {
    border-bottom: 1px solid var(--border);
}

.faq-item summary {
    position: relative;
    padding: 22px 45px 22px 0;
    color: var(--dark);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    position: absolute;
    top: 16px;
    right: 5px;
    color: var(--primary);
    font-size: 21px;
    font-weight: 400;
}

.faq-item[open] summary::after {
    content: "−";
}

.faq-item p {
    max-width: 760px;
    padding: 0 45px 22px 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.85;
}


/* =========================================
   HELP CARDS
========================================= */

.help-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1000px;
    margin: 40px auto 0;
}

.help-card {
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--white);
    transition: .3s ease;
}

.help-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.help-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #eff6ff;
    font-size: 18px;
}

.help-card h3 {
    margin-top: 18px;
    color: var(--dark);
    font-size: 15px;
}

.help-card p {
    margin-top: 8px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.7;
}

.help-card a {
    display: inline-block;
    margin-top: 17px;
    color: var(--primary);
    font-size: 9px;
    font-weight: 700;
    text-decoration: none;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1000px) {

    .faq-hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .faq-hero-content {
        text-align: center;
    }

    .faq-hero-content h1,
    .faq-hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .faq-hero-actions {
        justify-content: center;
    }

    .faq-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .faq-hero,
    .faq-category-section,
    .faq-main-section {
        padding: 65px 0;
    }

    .faq-hero-content h1 {
        font-size: 36px;
        letter-spacing: -1px;
    }

    .faq-category-grid,
    .help-grid {
        grid-template-columns: 1fr;
    }

    .faq-section-title h2 {
        font-size: 27px;
    }

}

@media (max-width: 1000px) {

    .faq-hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .faq-hero-content {
        text-align: center;
    }

    .faq-hero-content h1,
    .faq-hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .faq-hero-actions {
        justify-content: center;
    }

    .faq-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .faq-hero,
    .faq-category-section,
    .faq-main-section {
        padding: 65px 0;
    }

    .faq-hero-content h1 {
        font-size: 36px;
        letter-spacing: -1px;
    }

    .faq-category-grid,
    .help-grid {
        grid-template-columns: 1fr;
    }

    .faq-section-title h2 {
        font-size: 27px;
    }

}

/* =========================================================
   KARTEL62 FAST CELL
   RESPONSIVE SYSTEM
   ========================================================= */


/* =========================================================
   LARGE TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width: 1100px) {

    .container {
        width: min(
            calc(100% - 36px),
            1000px
        );
    }


    .main-nav {
        gap: 0;
    }


    .main-nav a {
        padding-inline: 7px;
        font-size: 8px;
    }


    .header-actions {
        gap: 4px;
    }


    .order-check {
        padding-inline: 7px;
    }


    .product-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .category-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }


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

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {


    .header-inner {
        min-height: 68px;
    }


    .main-nav,
    .header-actions {
        display: none;
    }


    .mobile-toggle {
        display: block;
    }


    .hero,
    .contact-hero,
    .faq-hero {
        padding: 70px 0;
    }


    .hero-grid,
    .contact-hero-grid,
    .faq-hero-grid {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .hero-content,
    .contact-hero-content,
    .faq-hero-content {

        text-align: center;

    }


    .hero-content h1,
    .contact-hero-content h1,
    .faq-hero-content h1 {

        margin-left: auto;

        margin-right: auto;

    }


    .hero-content > p,
    .contact-hero-content > p,
    .faq-hero-content > p {

        margin-left: auto;

        margin-right: auto;

    }


    .hero-actions,
    .contact-hero-actions,
    .faq-hero-actions {

        justify-content: center;

    }


    .hero-image,
    .contact-hero-image,
    .faq-hero-image {

        max-width: 700px;

        width: 100%;

        margin-inline: auto;

    }


    .category-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .feature-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .contact-info-grid,
    .quick-help-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .contact-form-wrapper {
        grid-template-columns: 1fr;
        gap: 35px;
    }


    .footer-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .final-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 900px) {

    .mobile-nav {

        position: fixed;

        top: 68px;

        left: 0;

        right: 0;

        z-index: 999;

        display: flex;

        flex-direction: column;

        max-height: calc(100vh - 68px);

        overflow-y: auto;

        padding: 12px;

        border-bottom:
            1px solid var(--border);

        background:
            rgba(255,255,255,.98);

        box-shadow:
            0 20px 35px
            rgba(15,23,42,.10);

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(-10px);

        transition:
            opacity .25s ease,
            visibility .25s ease,
            transform .25s ease;

    }


    .mobile-nav.is-open {

        opacity: 1;

        visibility: visible;

        transform: translateY(0);

    }


    .mobile-nav a {

        padding: 13px 14px;

        border-radius: 9px;

        color: var(--dark);

        font-size: 10px;

        font-weight: 600;

        text-decoration: none;

    }


    .mobile-nav a:hover {

        background: var(--primary-light);

        color: var(--primary);

    }


    .mobile-nav-divider {

        height: 1px;

        margin: 7px 0;

        background: var(--border);

    }

}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 700px) {


    .container {

        width:
            calc(100% - 30px);

    }


    .section {

        padding: 65px 0;

    }


    .hero,
    .contact-hero,
    .faq-hero {

        padding: 60px 0;

    }


    h1 {

        font-size: 38px;

    }


    h2 {

        font-size: 28px;

    }


    .product-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .category-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .feature-grid {

        grid-template-columns: 1fr;

    }


    .contact-info-grid,
    .quick-help-grid {

        grid-template-columns: 1fr;

    }


    .form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }


    .footer-grid {

        grid-template-columns: 1fr;

        gap: 32px;

    }


    .footer-bottom {

        align-items: flex-start;

        flex-direction: column;

        justify-content: center;

        padding: 18px 0;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 500px) {


    .container {

        width:
            calc(100% - 24px);

    }


    .header-inner {

        min-height: 62px;

    }


    .mobile-nav {

        top: 62px;

        max-height:
            calc(100vh - 62px);

    }


    .brand-mark {

        width: 38px;

        height: 38px;

    }


    .brand-text strong {

        font-size: 13px;

    }


    .brand-text small {

        font-size: 7px;

    }


    .hero,
    .contact-hero,
    .faq-hero {

        padding: 50px 0;

    }


    .hero-content h1,
    .contact-hero-content h1,
    .faq-hero-content h1 {

        font-size: 34px;

        letter-spacing: -1.3px;

    }


    .hero-content > p,
    .contact-hero-content > p,
    .faq-hero-content > p {

        font-size: 10px;

    }


    .hero-actions,
    .contact-hero-actions,
    .faq-hero-actions {

        flex-direction: column;

    }


    .hero-actions .btn,
    .contact-hero-actions .btn,
    .faq-hero-actions .btn {

        width: 100%;

    }


    .product-grid {

        grid-template-columns: 1fr;

    }


    .category-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .category-card {

        padding: 18px 12px;

    }


    .order-check-card {

        padding: 24px 18px;

    }


    .order-check-card h1 {

        font-size: 27px;

    }


    .contact-form {

        padding: 20px 16px;

    }


    .final-cta {

        padding: 55px 0;

    }


    .final-cta-actions {

        width: 100%;

        flex-direction: column;

    }


    .final-cta-actions .btn {

        width: 100%;

    }


    .faq-item summary {

        padding-right: 35px;

        font-size: 10px;

    }


    .faq-item p {

        padding-right: 25px;

        font-size: 9px;

    }

}


/* =========================================================
   VERY SMALL DEVICE
   ========================================================= */

@media (max-width: 360px) {


    .container {

        width:
            calc(100% - 20px);

    }


    .category-grid {

        grid-template-columns: 1fr;

    }


    .brand-text {

        display: none;

    }


    .hero-content h1,
    .contact-hero-content h1,
    .faq-hero-content h1 {

        font-size: 30px;

    }

}