/*======================================================
                CAMPX DELIVERY V2
=======================================================*/

/*==========================
GENERAL
==========================*/

:root{
    --primary:#ff6600;
    --primary-hover:#e55b00;
    --heading:#222;
    --text:#666;
    --border:#ededed;
    --card:#ffffff;
    --bg:#f8f9fb;
    --success:#0f9d58;
}

*{
    box-sizing:border-box;
}

/*==========================
PRODUCT SECTION
==========================*/

.product-section{
    padding:80px 0;
    background:#fff;
}

.product-section .container{
    max-width:1320px;
    margin:auto;
    padding:0 20px;
}

/*==========================
SECTION HEADER
==========================*/

.section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;
}

.section-header h2{
    margin:0;
    font-size:38px;
    font-weight:700;
    color:var(--heading);
}

.view-all{
    color:var(--primary);
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.view-all:hover{
    color:var(--primary-hover);
}

/*==========================
SLIDER
==========================*/

.product-slider-wrapper{
    position:relative;
}

.product-slider{

    display:flex;

    gap:28px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scrollbar-width:none;

    padding:10px 5px 20px;

}

.product-slider::-webkit-scrollbar{
    display:none;
}

/*==========================
ARROWS
==========================*/

.slider-arrow{

    position:absolute;

    top:45%;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#fff;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

    cursor:pointer;

    z-index:5;

    transition:.3s;

}

.prev-arrow{
    left:-24px;
}

.next-arrow{
    right:-24px;
}

.slider-arrow:hover{

    background:var(--primary);

    color:#fff;

}

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

@media(max-width:992px){

.section-header h2{
    font-size:32px;
}

.slider-arrow{
    display:none;
}

}

@media(max-width:768px){

.product-section{
    padding:55px 0;
}

.product-section .container{
    padding:0 15px;
}

.section-header{

    flex-direction:column;

    align-items:flex-start;

    gap:10px;

}

.section-header h2{

    font-size:28px;

}

}

/*======================================================
                PRODUCT CARD
=======================================================*/

.product-card{

    flex:0 0 285px;

    display:flex;

    flex-direction:column;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:all .35s ease;

    position:relative;

}

.product-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 45px rgba(0,0,0,.18);

}

/*==========================
IMAGE
==========================*/

.product-image{

    height:260px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#fafafa;

    overflow:hidden;

    position:relative;

}

.product-image img{

    width:85%;

    height:210px;

    object-fit:contain;

    transition:.35s;

}

.product-card:hover .product-image img{

    transform:scale(1.08);

}

/*==========================
SALE BADGE
==========================*/

.sale-badge{

    position:absolute;

    top:15px;

    left:15px;

    background:#ff3b30;

    color:#fff;

    font-size:11px;

    font-weight:700;

    padding:6px 12px;

    border-radius:30px;

}

/*==========================
CONTENT
==========================*/

.product-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:20px;

}

.product-category{

    color:#888;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:8px;

}

.product-title{

    font-size:19px;

    font-weight:700;

    color:#222;

    line-height:1.5;

    min-height:58px;

    margin:0 0 15px;

}

/*==========================
PRICE
==========================*/

.product-price{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:18px;

}

.new-price{

    color:#ff6600;

    font-size:28px;

    font-weight:700;

}

.old-price{

    color:#999;

    text-decoration:line-through;

    font-size:15px;

}

/*==========================
DEALER
==========================*/

.dealer-label{

    width:100%;

    color:#00884a;

    font-size:12px;

    font-weight:700;

}

.dealer-moq{

    width:100%;

    color:#666;

    margin-top:6px;

}

/*==========================
RATING
==========================*/

.product-rating{

    color:#ffb400;

    margin-bottom:12px;

}

/*==========================
BULK
==========================*/

.bulk-offer{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:#ecf9f0;

    color:#138c3f;

    border-radius:30px;

    padding:8px 14px;

    font-size:12px;

    font-weight:700;

    margin-bottom:18px;

}

/*==========================
BUTTON
==========================*/

.cart-btn{

    width:100%;

    height:48px;

    border:none;

    border-radius:12px;

    background:#ff6600;

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.cart-btn:hover{

    background:#e55b00;

}

/*==========================
QTY
==========================*/

.qty-box{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

}

.qty-btn{

    width:40px;

    height:40px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:10px;

    background:#ff6600;

    color:#fff;

    text-decoration:none;

    font-size:20px;

    transition:.3s;

}

.qty-btn:hover{

    background:#e55b00;

}

.qty-number{

    font-size:18px;

    font-weight:700;

}

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

@media(max-width:992px){

.product-card{

    flex:0 0 250px;

}

}

@media(max-width:768px){

.product-card{

    flex:0 0 220px;

}

.product-image{

    height:200px;

}

.product-image img{

    height:170px;

}

.product-title{

    font-size:17px;

    min-height:50px;

}

.new-price{

    font-size:24px;

}

}



/* =====================================================
   CAMPX V2 - FINAL PRODUCT IMAGE OVERRIDE
   Must remain at the bottom of this file
   ===================================================== */

.product-card {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 285px !important;
    width: 285px !important;
    min-height: 470px !important;
    height: auto !important;
    overflow: hidden !important;
}

.product-card .product-image {
    position: relative !important;
    display: flex !important;
    flex: 0 0 250px !important;
    width: 100% !important;
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #f8f8f8 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.product-card .product-image img {
    display: block !important;
    width: 86% !important;
    height: 215px !important;
    max-width: 100% !important;
    max-height: 215px !important;
    object-fit: contain !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    transform: none !important;
}

.product-card:hover .product-image img {
    transform: scale(1.06) !important;
}

.product-card .product-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    padding: 18px !important;
}

.product-card .product-title {
    display: block !important;
}

.product-card .cart-btn-area {
    margin-top: auto !important;
}

.product-card .bulk-offer {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@media (max-width: 992px) {
    .product-card {
        flex-basis: 260px !important;
        width: 260px !important;
    }
}

@media (max-width: 768px) {
    .product-card {
        flex-basis: 235px !important;
        width: 235px !important;
        min-height: 430px !important;
    }

    .product-card .product-image {
        flex-basis: 205px !important;
        height: 205px !important;
        min-height: 205px !important;
        max-height: 205px !important;
    }

    .product-card .product-image img {
        height: 175px !important;
        max-height: 175px !important;
    }
}


/* =====================================================
   CAMPX V2 - FINAL CARD VISIBILITY FIX
   ===================================================== */

.product-slider-wrapper {
    height: auto !important;
    min-height: 500px !important;
    overflow: visible !important;
}

.product-slider {
    height: auto !important;
    min-height: 500px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    align-items: flex-start !important;
    padding-bottom: 30px !important;
}

.product-card {
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
    overflow: hidden !important;
}

.product-card .product-image {
    display: flex !important;
    position: relative !important;
    width: 100% !important;
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
    flex: 0 0 240px !important;
    background: #f8f8f8 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.product-card .product-image img {
    display: block !important;
    width: 88% !important;
    height: 210px !important;
    min-height: 0 !important;
    max-height: 210px !important;
    object-fit: contain !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.product-card .product-content {
    display: flex !important;
    flex-direction: column !important;
    height: 260px !important;
    min-height: 260px !important;
    padding: 16px 18px 18px !important;
    box-sizing: border-box !important;
}

.product-card .product-title {
    margin-bottom: 8px !important;
    min-height: 42px !important;
}

.product-card .product-price {
    margin-bottom: 8px !important;
}

.product-card .bulk-offer {
    margin-bottom: 10px !important;
}

.product-card .cart-btn-area {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: auto !important;
}

.product-card .add-cart-form {
    display: block !important;
    width: 100% !important;
}

.product-card .cart-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 44px !important;
}

/* Keep slider arrows outside the cards */
.product-slider-wrapper .slider-arrow {
    z-index: 20 !important;
}

@media (max-width: 768px) {

    .product-slider-wrapper {
        min-height: 450px !important;
    }

    .product-slider {
        min-height: 450px !important;
    }

    .product-card {
        height: 440px !important;
        min-height: 440px !important;
        max-height: 440px !important;
    }

    .product-card .product-image {
        height: 200px !important;
        min-height: 200px !important;
        max-height: 200px !important;
        flex-basis: 200px !important;
    }

    .product-card .product-image img {
        height: 175px !important;
        max-height: 175px !important;
    }

    .product-card .product-content {
        height: 240px !important;
        min-height: 240px !important;
    }
}


/* =====================================================
   CAMPX PRODUCT CARD - CLEAN FINAL OVERRIDE
   ===================================================== */

/* Prevent horizontal page shifting */
html,
body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Product section */
.product-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 60px !important;
    padding-right: 60px !important;
    box-sizing: border-box !important;
}

/* Section heading */
.product-section .section-header {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Slider */
.product-section .product-slider {
    width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
}

/* Product card */
.product-section .product-card {
    display: flex !important;
    flex-direction: column !important;
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* IMAGE - top of card */
.product-section .product-card .product-image {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
    flex: 0 0 240px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #f8f8f8 !important;
    overflow: hidden !important;
}

/* Actual product image */
.product-section .product-card .product-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
}

/* View Product overlay */
.product-section .product-card .product-image-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    pointer-events: none !important;
}

/* Keep label from sitting beside image */
.product-section .product-card .quick-view-label {
    display: none !important;
}

/* Product content below image */
.product-section .product-card .product-content {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 260px !important;
    min-height: 260px !important;
    padding: 14px 18px 18px !important;
    box-sizing: border-box !important;
}

/* Category */
.product-section .product-card .product-category {
    margin: 0 0 6px !important;
}

/* Product name */
.product-section .product-card .product-title {
    margin: 0 0 8px !important;
    min-height: 42px !important;
}

/* Price */
.product-section .product-card .product-price {
    margin: 0 0 8px !important;
}

/* Bulk purchase */
.product-section .product-card .bulk-offer {
    margin: 0 0 10px !important;
    width: fit-content !important;
}

/* Cart area at bottom */
.product-section .product-card .cart-btn-area {
    display: block !important;
    width: 100% !important;
    margin-top: auto !important;
}

/* Add to cart form */
.product-section .product-card .add-cart-form {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Add to cart button */
.product-section .product-card .cart-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
}

/* Mobile */
@media (max-width: 768px) {

    .product-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .product-section .product-card {
        height: 450px !important;
        min-height: 450px !important;
        max-height: 450px !important;
    }

    .product-section .product-card .product-image {
        height: 210px !important;
        min-height: 210px !important;
        max-height: 210px !important;
        flex-basis: 210px !important;
    }

    .product-section .product-card .product-content {
        height: 240px !important;
        min-height: 240px !important;
    }
}


/* =====================================================
   PRODUCT SLIDER - LEFT ARROW VISIBILITY
   ===================================================== */

.product-slider-wrapper {
    position: relative !important;
    padding-left: 55px !important;
    padding-right: 55px !important;
    box-sizing: border-box !important;
}

.product-slider-wrapper .slider-arrow {
    position: absolute !important;
    z-index: 50 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.product-slider-wrapper .slider-arrow:first-child {
    left: 8px !important;
}

.product-slider-wrapper .slider-arrow:last-child {
    right: 8px !important;
}

@media (max-width: 768px) {
    .product-slider-wrapper {
        padding-left: 45px !important;
        padding-right: 45px !important;
    }

    .product-slider-wrapper .slider-arrow:first-child {
        left: 3px !important;
    }

    .product-slider-wrapper .slider-arrow:last-child {
        right: 3px !important;
    }
}


/* =====================================================
   CAMPX PREMIUM PRODUCT CARD POLISH
   ===================================================== */

/* ---------- ARROWS ---------- */

.product-slider-wrapper .slider-arrow {
    background: #ffffff !important;
    color: #222222 !important;
    border: 1px solid #eeeeee !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.12) !important;
    cursor: pointer !important;
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease !important;
}

.product-slider-wrapper .slider-arrow:hover,
.product-slider-wrapper .slider-arrow:focus,
.product-slider-wrapper .slider-arrow:active {
    background: #ff6600 !important;
    color: #ffffff !important;
    border-color: #ff6600 !important;
    box-shadow: 0 8px 22px rgba(255,102,0,.30) !important;
    transform: scale(1.08) !important;
    outline: none !important;
}

.product-slider-wrapper .slider-arrow:active {
    transform: scale(.96) !important;
}


/* ---------- CARD ---------- */

.product-section .product-card {
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid #eeeeee !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.07) !important;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease !important;
}

/* Premium orange accent */
.product-section .product-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 12% !important;
    width: 76% !important;
    height: 3px !important;
    background: #ff6600 !important;
    border-radius: 0 0 5px 5px !important;
    opacity: 0 !important;
    transform: scaleX(.5) !important;
    transition:
        opacity .25s ease,
        transform .25s ease !important;
    z-index: 5 !important;
}

.product-section .product-card:hover {
    transform: translateY(-7px) !important;
    border-color: #f1f1f1 !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.13) !important;
}

.product-section .product-card:hover::before {
    opacity: 1 !important;
    transform: scaleX(1) !important;
}


/* ---------- IMAGE ---------- */

.product-section .product-card .product-image {
    background: #f8f8f8 !important;
}

.product-section .product-card .product-image img {
    transition:
        transform .35s ease !important;
}

.product-section .product-card:hover .product-image img {
    transform: scale(1.06) !important;
}


/* ---------- PRODUCT NAME ---------- */

.product-section .product-card .product-title {
    transition: color .2s ease !important;
}

.product-section .product-card:hover .product-title {
    color: #ff6600 !important;
}


/* ---------- BULK PURCHASE ---------- */

.product-section .product-card .bulk-offer {
    border: 1px solid rgba(40,180,90,.12) !important;
    transition:
        transform .2s ease,
        box-shadow .2s ease !important;
}

.product-section .product-card:hover .bulk-offer {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(40,180,90,.10) !important;
}


/* ---------- ADD TO CART ---------- */

.product-section .product-card .cart-btn {
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 6px 15px rgba(255,102,0,.20) !important;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease !important;
}

.product-section .product-card .cart-btn:hover {
    background: #e95700 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 9px 20px rgba(255,102,0,.30) !important;
}

.product-section .product-card .cart-btn:active {
    transform: translateY(0) scale(.98) !important;
}


/* ---------- CART SHINE EFFECT ---------- */

.product-section .product-card .cart-btn::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -120% !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.28),
        transparent
    ) !important;
    transform: skewX(-20deg) !important;
    transition: left .55s ease !important;
}

.product-section .product-card .cart-btn:hover::after {
    left: 140% !important;
}


/* ---------- MOBILE: KEEP IT STABLE ---------- */

@media (max-width: 768px) {

    .product-section .product-card:hover {
        transform: none !important;
    }

    .product-section .product-card:hover .product-image img {
        transform: none !important;
    }

    .product-section .product-card:hover::before {
        opacity: 0 !important;
    }
}


/* =========================================================
   CAMPX MOBILE RESPONSIVE FIX
   320px - 767px
   ========================================================= */

@media (max-width: 767px) {

    /* ---------- PAGE SAFETY ---------- */

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

    main {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }


    /* ---------- HERO / BANNER ---------- */

    .hero-section,
    .hero-slider,
    .hero-slide {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .hero-slide {
        min-height: 420px !important;
        height: 420px !important;
    }

    .hero-bg {
        width: 100% !important;
        height: 100% !important;
        background-size: cover !important;
        background-position: center center !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 22px !important;
        box-sizing: border-box !important;
    }

    .hero-content .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .hero-text {
        width: 100% !important;
        max-width: 270px !important;
        box-sizing: border-box !important;
    }

    .hero-title {
        font-size: 34px !important;
        line-height: 1.05 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .hero-subtitle {
        font-size: 14px !important;
        line-height: 1.4 !important;
        max-width: 260px !important;
    }

    .hero-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }


    /* ---------- CATEGORY SECTION ---------- */

    .category-section {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }


    /* ---------- PRODUCT SECTION ---------- */

    .product-section {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .product-section .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    .product-slider-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .product-slider {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
    }

    .product-card {
        flex: 0 0 calc(100vw - 70px) !important;
        width: calc(100vw - 70px) !important;
        max-width: 330px !important;
        box-sizing: border-box !important;
    }


    /* ---------- FOOTER ---------- */

    .footer {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .footer-top {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 20px 16px !important;
        box-sizing: border-box !important;
    }

    .footer-box {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .footer-main {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        padding: 30px 18px !important;
        box-sizing: border-box !important;
    }

    .footer-col {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .footer-col h3 {
        font-size: 17px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }

    .footer-col p,
    .footer-col li,
    .footer-col a {
        font-size: 13px !important;
        line-height: 1.7 !important;
        overflow-wrap: anywhere !important;
    }

    .footer-col ul {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .footer-social {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .footer-bottom {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        padding: 18px 14px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

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

}


/* =========================================================
   VERY SMALL PHONES
   320px - 374px
   ========================================================= */

@media (max-width: 374px) {

    .hero-slide {
        height: 400px !important;
        min-height: 400px !important;
    }

    .hero-content {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .hero-text {
        max-width: 235px !important;
    }

    .hero-title {
        font-size: 30px !important;
    }

    .hero-subtitle {
        font-size: 12px !important;
        max-width: 220px !important;
    }

    .product-card {
        flex-basis: calc(100vw - 55px) !important;
        width: calc(100vw - 55px) !important;
    }

}


/* =========================================================
   CAMPX FINAL MOBILE FOOTER
   ========================================================= */

@media (max-width: 767px) {

    .footer {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .footer-top {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        padding: 20px 16px !important;
        gap: 14px !important;
        box-sizing: border-box !important;
    }

    .footer-box {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .footer-main {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        padding: 30px 18px !important;
        gap: 30px !important;
        box-sizing: border-box !important;
    }

    .footer-col {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .footer-col h3 {
        font-size: 17px !important;
        margin-bottom: 12px !important;
    }

    .footer-col p,
    .footer-col li,
    .footer-col a {
        font-size: 13px !important;
        line-height: 1.7 !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    .footer-col ul {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .footer-social {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .footer-bottom {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
        padding: 18px 14px !important;
        box-sizing: border-box !important;
    }

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


/* =========================================================
   FINAL MOBILE PRODUCT SLIDER WIDTH FIX
   ========================================================= */

@media (max-width: 767px) {

    .product-slider-wrapper {
        width: 100% !important;
        padding-left: 45px !important;
        padding-right: 45px !important;
        box-sizing: border-box !important;
    }

    .product-slider {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
    }

    .product-card {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .product-card .cart-btn {
        width: 100% !important;
        white-space: nowrap !important;
    }

}


/* =========================================================
   CAMPX - FINAL CONTACT + BLOG MOBILE FIX
   320px - 767px
   ========================================================= */

@media (max-width: 767px) {

    /* =========================
       CONTACT PAGE
       ========================= */

    .contact-page {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .contact-page .contact-header {
        width: 100% !important;
        padding: 24px 14px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    .contact-page .contact-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 14px !important;
        padding: 0 14px !important;
        box-sizing: border-box !important;
    }

    .contact-page .contact-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    .contact-page .contact-wrapper {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 20px !important;
        padding: 20px 14px 30px !important;
        box-sizing: border-box !important;
    }

    .contact-page .contact-map {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .contact-page .contact-map iframe,
    .contact-page .contact-map img {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .contact-page .contact-form-box {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 24px 18px !important;
        box-sizing: border-box !important;
    }

    .contact-page .contact-form-box input,
    .contact-page .contact-form-box textarea,
    .contact-page .contact-form-box select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .contact-page .contact-form-box textarea {
        min-height: 110px !important;
        resize: vertical !important;
    }

    .contact-page .contact-form-box button {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }


    /* =========================
       BLOG PAGE
       ========================= */

    .blog-page {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .blog-page .blog-header {
        width: 100% !important;
        padding: 24px 14px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    .blog-page .blog-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 20px !important;
        padding: 0 14px 30px !important;
        box-sizing: border-box !important;
    }

    .blog-page .blog-card {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .blog-page .blog-card img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 180px !important;
        object-fit: cover !important;
        box-sizing: border-box !important;
    }

    .blog-page .blog-content {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 16px !important;
    }

    .blog-page .blog-content h2,
    .blog-page .blog-content h3 {
        font-size: 20px !important;
        line-height: 1.3 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    .blog-page .blog-content p {
        font-size: 13px !important;
        line-height: 1.6 !important;
        overflow-wrap: break-word !important;
    }

    .blog-page .blog-date {
        display: block !important;
        margin-bottom: 8px !important;
    }

    .blog-page .blog-btn {
        display: inline-block !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

}

/* =========================================================
   CONTACT HERO - FINAL MOBILE FIX
   ========================================================= */

@media (max-width: 767px) {

    .contact-banner {
        width: 100% !important;
        max-width: 100% !important;
        height: 300px !important;
        min-height: 300px !important;
        overflow: hidden !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    .contact-banner-content {
        position: absolute !important;
        left: 20px !important;
        right: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    .contact-banner-content h1 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px !important;
        font-size: 42px !important;
        line-height: 1.05 !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    .contact-banner-content p {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

}

/* =========================================================
   CAMPX TABLET - PRODUCT SLIDER FIX
   768px - 1024px
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    .product-slider-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 50px !important;
        padding-right: 50px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .product-slider {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
    }

    .product-card {
        flex: 0 0 calc(50% - 12px) !important;
        width: calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
        box-sizing: border-box !important;
    }

    .product-card .cart-btn {
        width: 100% !important;
        white-space: nowrap !important;
    }

    .product-slider-wrapper .slider-arrow {
        z-index: 30 !important;
    }

}