/* Responsive layer only.
   Desktop visuals remain defined in the base stylesheets. */

:root{
    --resp-page-pad: clamp(12px, 2vw, 24px);
    --resp-card-pad: clamp(16px, 2.4vw, 28px);
    --resp-section-gap: clamp(56px, 7vw, 96px);
}

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

body{
    width:100%;
}

img,
svg,
video,
iframe,
canvas{
    display:block;
    max-width:100%;
    height:auto;
}

.container,
.container-fluid,
.row,
[class*="col-"],
.custom-navbar,
.footer-top,
.footer-bottom,
.products-catalog-toolbar,
.products-catalog-card-body,
.contact-info-item,
.product_detail-thumbs-wrap,
.product_detail-tabs,
.about-agencies-card{
    min-width:0;
}

.offcanvas{
    max-width:100vw;
}

.hero h1,
.hero p,
.section-title,
.karlo-tabs-header h2,
.about-hero-title,
.about-hero-text,
.about-section-title,
.contact-title,
.contact-description,
.contact-info-item span,
.products-catalog-heading h1,
.products-catalog-heading p,
.products-catalog-card-meta h3,
.products-catalog-card-meta span,
.footer-about p,
.footer-links a,
.footer-bottom p,
.product_detail-title,
.product_detail-lead,
.product_detail-copy,
.product_detail-feature-card h3,
.product_detail-feature-card p,
.product_detail-dimension-card span,
.product_detail-dimension-card strong,
.product_detail-card-body h3,
.product_detail-card-body span,
.product_detail-card-body a{
    overflow-wrap:anywhere;
    word-break:break-word;
}

.hero p{
    font-size:clamp(.92rem, 1.02vw, 1.1rem);
}

.about-hero-text,
.contact-description,
.product_detail-lead,
.product_detail-copy{
    font-size:clamp(.88rem, 1.02vw, 1rem);
}

.footer-about p,
.footer-links a{
    font-size:clamp(.88rem, 1.02vw, .9375rem);
}

.products-catalog-heading p{
    font-size:clamp(.94rem, 1.02vw, 1.0625rem);
}

.products-catalog-card-meta span{
    font-size:clamp(.94rem, 1.02vw, 1.125rem);
}

.contact-info-item span{
    font-size:clamp(.82rem, 1vw, .875rem);
}

.product_detail-feature-card p,
.product_detail-dimension-card span{
    font-size:clamp(.82rem, 1vw, .94rem);
}

.product_detail-card-body span,
.product_detail-card-body a{
    font-size:clamp(.88rem, 1vw, .95rem);
}

.section-title,
.karlo-tabs-header h2{
    font-size:clamp(2rem, 3vw, 3rem);
}

.products-catalog-heading h1{
    font-size:clamp(1.9rem, 3vw, 2.625rem);
}

.about-hero-title{
    font-size:clamp(2.25rem, 5vw, 4rem);
}

.about-section-title{
    font-size:clamp(1.9rem, 3.2vw, 2.625rem);
}

.contact-title{
    font-size:clamp(2rem, 5vw, 3.75rem);
}

.product_detail-title{
    font-size:clamp(1.75rem, 3.5vw, 2.65rem);
}

/* Keep the mobile menu usable on every device below desktop. */
@media (max-width: 1024px){
    .custom-navbar,
    .custom-navbar.scrolled{
        padding-inline:16px;
    }

    .custom-navbar .container-fluid{
        gap:12px;
    }

    .navbar-brand img{
        height:48px;
    }

    .navbar-toggler{
        display:flex;
        align-items:center;
        justify-content:center;
        width:42px;
        height:42px;
        font-size:24px;
        order:2;
    }

    .navbar-collapse{
        display:flex !important;
        align-items:center;
        justify-content:flex-end;
        flex:1 1 auto;
        gap:8px;
    }

    .navbar-collapse .navbar-nav{
        display:none !important;
    }

    .navbar-collapse .search-btn{
        display:none !important;
    }

    .theme-toggle-btn{
        display:flex !important;
        width:42px;
        height:42px;
        margin-inline-start:8px;
        flex:0 0 auto;
        order:1;
    }

    .hero{
        overflow:hidden;
    }

    .hero-content{
        min-height:auto;
        padding-top:110px;
    }

    .hero h1{
        text-align:center;
        font-size:clamp(2rem, 5.5vw, 3rem);
    }

    .hero p{
        text-align:center;
        max-width:620px;
        margin-inline:auto;
    }

    .hero-sofa{
        display:block;
        max-width:100%;
        margin:32px auto 0;
    }

    .hero-stats{
        position:relative;
        left:auto;
        bottom:auto;
        margin-top:36px;
        justify-content:center;
        flex-wrap:wrap;
        gap:20px 28px;
    }

    .slider-nav{
        position:relative;
        right:auto;
        bottom:auto;
        margin-top:24px;
        justify-content:center;
    }

    .hero-lamp{
        display:none;
    }

    .hero-shape{
        width:min(100%, 620px);
        height:auto;
    }

    .hero-shape2{
        width:700px;
        height:700px;
        left:-280px;
        bottom:-280px;
    }

    .brand-story,
    .categories,
    .products,
    .gallery,
    .karlo-category-section,
    .karlo-tabs-section,
    .about-team,
    .about-agencies,
    .about-cta,
    .contact-map-section{
        padding-block:var(--resp-section-gap);
    }

    .products-catalog-shell > .row{
        align-items:flex-start;
    }

    .products-catalog-shell > .row > aside{
        flex:0 0 32%;
        max-width:32%;
    }

    .products-catalog-shell > .row > .col-12.col-xl-9{
        flex:0 0 68%;
        max-width:68%;
    }

    .products-catalog-sidebar{
        position:sticky;
        top:18px;
    }

    .products-catalog-main{
        min-height:auto;
    }

    .products-catalog-toolbar{
        grid-template-columns:1fr;
        gap:16px;
    }

    .products-catalog-sort-wrap,
    .products-catalog-heading{
        justify-self:stretch;
    }

    .products-catalog-heading{
        text-align:right;
    }

    .products-catalog-sort-box{
        min-width:100%;
    }

    .product_detail-hero .order-1{
        order:2 !important;
    }

    .product_detail-hero .order-2{
        order:1 !important;
    }

    .product_detail-carousel-inner,
    .product_detail-carousel .carousel-item,
    .product_detail-carousel-image{
        min-height:380px;
    }

    .product_detail-title{
        font-size:clamp(1.9rem, 4vw, 2.3rem);
    }

    .product_detail-panel{
        padding:20px;
    }

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

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

    .about-hero-image{
        width:min(100%, 420px);
        height:auto;
        aspect-ratio:1;
    }

    .about-showcase-image{
        height:350px;
    }

    .about-stats{
        position:static;
        transform:none;
        padding:30px;
    }

    .about-agencies-card{
        padding:40px;
    }

    .contact-content{
        min-height:auto;
        padding:80px 52px 40px;
    }

    .contact-form-wrapper{
        min-height:auto;
        padding:48px;
    }

    .contact-form-card{
        padding:34px;
    }

    .contact-form-header h2{
        font-size:clamp(1.5rem, 3vw, 1.75rem);
    }

    .footer-top{
        padding:70px 32px 46px;
    }

    .footer-about p{
        max-width:100%;
    }
}

@media (max-width: 767px){
    .custom-navbar,
    .custom-navbar.scrolled{
        padding-inline:14px;
    }

    .navbar-brand img{
        height:42px;
    }

    .row.align-items-center.slider-width{
          text-align: center;
          margin-top: 10px;

    }


    .karlo-swiper-next.karlo-swiper-next-margin {
        display: none;
    }

    .karlo-swiper-prev.karlo-swiper-next-margin.swiper-button-disabled {
        display: none;
    }

    .navbar-toggler,
    .search-btn,
    .theme-toggle-btn{
        width:40px;
        height:40px;
        font-size:20px;
    }

    .offcanvas{
        width:min(88vw, 320px);
    }

    .offcanvas-header{
        padding:20px 18px;
    }

    .mobile-menu{
        margin-top:12px;
    }

    .mobile-menu a,
    .mobile-dropdown-btn{
        padding:16px 0;
        font-size:14px;
    }

    .mobile-submenu{
        padding-bottom:12px;
    }

    .mobile-submenu a{
        padding:8px 14px;
    }

    .hero-content{
        padding-top:96px;
        padding-bottom:56px;
    }

    .hero h1,
    .section-title,
    .karlo-tabs-header h2,
    .products-catalog-heading h1{
        font-size:clamp(1.65rem, 6vw, 2.2rem);
        line-height:1.45;
    }

    .hero p{
        line-height:2;
    }

    .hero-stats{
        gap:16px;
    }

    .best-sellers{
        padding-block:72px;
    }

    .best-header{
        margin-bottom:42px;
    }

    .bestSellerSwiper{
        padding:12px 0 56px;
    }

    .bestSellerSwiper .swiper-slide{
        width:100% !important;
    }

    .product-card{
        max-width:100%;
    }

    .product-image{
        height:auto;
        aspect-ratio:16 / 10;
    }

    .product-content{
        padding:18px;
    }

    .product-content h3{
        font-size:1.4rem;
    }

    .product-head{
        gap:12px;
    }

    .new-price{
        font-size:.95rem;
    }

    .old-price{
        font-size:.85rem;
    }

    .view-btn{
        margin-top:18px;
    }

    .hero-btn{
        width:100%;
        max-width:280px;
        height:54px;
    }

    .brand-story,
    .categories,
    .products,
    .gallery,
    .karlo-category-section,
    .karlo-tabs-section,
    .about-team,
    .about-agencies,
    .about-cta,
    .contact-map-section{
        padding-block:72px;
    }

    .cat-item span{
        font-size: 14px;
    }


    .karlo-category-box span{
        font-size: 1rem;
    }
   

    .products-catalog-page{
        padding:20px 0;
    }

    .products-catalog-shell{
        padding-inline:12px;
    }

    .products-catalog-shell > .row > aside,
    .products-catalog-shell > .row > .col-12.col-xl-9{
        flex:0 0 100%;
        max-width:100%;
    }

    .products-catalog-sidebar{
        position:relative;
        top:auto;
        border-radius:22px;
        margin-bottom:18px;
    }

    .products-catalog-sidebar-head{
        padding:22px 18px 14px;
    }

    .products-catalog-sidebar-head h2{
        font-size:18px;
    }

    .products-catalog-categories{
        display:flex;
        flex-direction:row;
        gap:12px;
        overflow-x:auto;
        padding:16px;
        scrollbar-width:none;
    }

    .products-catalog-categories::-webkit-scrollbar{
        display:none;
    }

    .products-catalog-category{
        flex:0 0 auto;
        min-width:160px;
        border-bottom:none;
        border-radius:16px;
        background:rgba(255,255,255,.02);
        padding:16px 14px;
    }

    .products-catalog-category::after{
        display:none;
    }

    .products-catalog-main{
        padding:24px 16px 28px;
        border-radius:22px;
    }

    .products-catalog-toolbar{
        margin-bottom:22px;
    }

    .products-catalog-heading h1{
        font-size:clamp(1.7rem, 7vw, 2.1rem);
    }

    .products-catalog-heading p{
        font-size:14px;
    }

    .products-catalog-card-media{
        aspect-ratio:1 / .88;
    }

    .products-catalog-card-body{
        padding:16px;
        gap:12px;
    }

    .products-catalog-card-action{
        width:38px;
        height:38px;
        flex-basis:38px;
    }

    .products-catalog-card-meta h3{
        font-size:18px;
    }

    .products-catalog-card-meta span{
        font-size:16px;
    }

    .products-catalog-pagination{
        gap:10px;
        margin-top:30px;
    }

    .products-page-btn{
        min-width:48px;
        height:48px;
        padding-inline:14px;
    }

    .products-page-btn-text{
        min-width:68px;
    }

    .product_detail-shell{
        padding:18px 0 28px;
    }

    .product_detail-hero,
    .product_detail-info-section,
    .product_detail-features-section,
    .product_detail-related-section{
        padding-block:14px;
    }

    .product_detail-gallery-card{
        padding:12px;
        border-radius:20px;
    }

    .product_detail-sidebar{
        padding:12px;
        border-radius:20px;
    }

    .product_detail-carousel-inner,
    .product_detail-carousel .carousel-item,
    .product_detail-carousel-image{
        min-height:300px;
    }

    .product_detail-zoom-btn{
        width:36px;
        height:36px;
        top:12px;
        left:12px;
    }

    .product_detail-thumbs-wrap{
        grid-template-columns:1fr;
        gap:10px;
    }

    .product_detail-thumb-nav{
        display:none;
    }

    .product_detail-thumbs{
        gap:10px;
    }

    .product_detail-thumb{
        width:78px;
        height:64px;
    }

    .product_detail-panel{
        padding:18px;
        border-radius:16px;
    }

    .product_detail-title{
        font-size:clamp(1.55rem, 6vw, 1.95rem);
    }

    .product_detail-lead,
    .product_detail-copy{
        font-size:.95rem;
        line-height:2;
    }

    .product_detail-call-btn{
        min-height:52px;
        font-size:.95rem;
        padding-inline:14px;
    }

    .product_detail-socials{
        gap:12px;
    }

    .product_detail-social-btn{
        width:46px;
        height:46px;
    }

    .product_detail-tabs-card{
        padding:14px;
    }

    .product_detail-tabs{
        justify-content:flex-start;
    }

    .product_detail-tab-btn{
        min-height:50px;
        padding-inline:12px;
        font-size:.92rem;
    }

    .product_detail-tab-content{
        padding-top:20px;
    }

    .product_detail-feature-grid,
    .product_detail-dimensions-grid,
    .product_detail-advantages{
        grid-template-columns:1fr;
    }

    .product_detail-section-head h2{
        font-size:1.55rem;
    }

    .product_detail-card-body{
        padding:16px;
    }

    .product_detail-card-body h3{
        font-size:1rem;
    }

    .about-hero .row{
        gap:24px;
    }

    .about-hero-title{
        line-height:1.35;
    }

    .about-hero-text{
        max-width:100%;
        line-height:2;
    }

    .about-hero-image{
        width:min(100%, 360px);
        margin:12px auto 0;
    }

    .about-team{
        margin:84px 0;
    }

    .about-team-card img{
        height:260px;
    }

    .about-team-content{
        padding:18px;
    }

    .about-agencies{
        margin:84px 0;
    }

    .about-agencies-card{
        padding:24px 18px;
        border-radius:24px;
    }

    .about-agencies-list li{
        font-size:1rem;
        padding:14px 16px;
        margin-bottom:14px;
    }

    .about-map-image{
        width:100%;
        max-width:520px;
        margin-inline:auto;
    }

    .contact-page{
        overflow:hidden;
    }

    .contact-content-all{
        padding-inline:0;
    }

    .contact-hero .row{
        gap:0;
    }

    .contact-content{
        padding:72px 18px 32px;
    }

    .contact-title{
        margin:20px 0;
        font-size:clamp(1.8rem, 7vw, 2.5rem);
    }

    .contact-description{
        margin-bottom:32px;
        line-height:2;
    }

    .contact-info-list{
        gap:18px;
    }

    .contact-info-item{
        align-items:flex-start;
        gap:12px;
    }

    .contact-icon{
        width:54px;
        height:54px;
        font-size:1.1rem;
        flex:0 0 54px;
    }

    .contact-info-item h6{
        font-size:1rem;
    }

    .contact-info-item span{
        font-size:.88rem;
    }

    .contact-form-wrapper{
        padding:24px 18px 18px;
    }

    .contact-form-card{
        padding:22px;
        border-radius:24px;
    }

    .contact-form-header{
        margin-bottom:28px;
    }

    .contact-form-header h2{
        font-size:1.5rem;
    }

    .contact-form-header i{
        font-size:34px;
        margin-bottom:14px;
    }

    .contact-input,
    .contact-select,
    .contact-textarea{
        padding:15px 18px;
        margin-bottom:16px;
        border-radius:14px;
    }

    .contact-textarea{
        min-height:150px;
    }

    .contact-submit-btn{
        height:54px;
        font-size:1rem;
        border-radius:14px;
    }

    .contact-map-section{
        padding-block:72px;
    }

    .contact-map-card iframe{
        height:320px;
    }

    .footer-top{
        padding:56px 16px 34px;
    }

    .footer-logo{
        height:50px;
    }

    .footer-about,
    .footer-links,
    .footer-contact{
        text-align:center;
    }

    .footer-links{
        display: none;
    }

    .footer-links h4,
    .footer-contact h4{
        font-size:18px;
        margin-bottom:24px;
    }

    .footer-links h4::after,
    .footer-contact h4::after{
        right:50%;
        transform:translateX(50%);
    }

    .footer-socials{
        justify-content:center;
    }

    .footer-links a{
        margin-bottom:14px;
    }

    .contact-item{
        justify-content:center;
        text-align:right;
        gap:12px;
    }

    .footer-bottom{
        padding:18px 0;
    }

    .footer-bottom p{
        text-align:center;
    }
}

@media (max-width: 480px){
    .custom-navbar,
    .custom-navbar.scrolled{
        padding-inline:12px;
    }

   
    .navbar-brand img{
        height:38px;
    }

    .navbar-toggler,
    .search-btn,
    .theme-toggle-btn{
        width:38px;
        height:38px;
        font-size:18px;
    }

    .offcanvas{
        width:min(88vw, 300px);
    }

    .offcanvas-header{
        padding:18px 16px;
    }

    .hero-content{
        padding-top:88px;
    }

    .hero h1{
        font-size:clamp(1.55rem, 8vw, 2.1rem);
    }

    .hero p{
        font-size:.92rem;
    }

    .hero-btn{
        max-width:260px;
        height:52px;
    }

    .hero-shape{
        width:500px;
        right:-170px;
        top:-90px;
    }

    .hero-shape2{
        width:520px;
        height:520px;
        left:-220px;
        bottom:-220px;
    }

    .hero-stats{
        gap:14px;
    }

    .section-title,
    .karlo-tabs-header h2{
        font-size:clamp(1.5rem, 6vw, 2rem);
        margin-bottom:32px;
    }

    .category-card{
        height:200px;
        font-size:1.35rem;
    }

    .products-catalog-sidebar-head h2{
        font-size:1rem;
    }

    .products-catalog-category{
        min-width:140px;
    }

    .products-catalog-card-body{
        padding:14px;
    }

    .products-catalog-card-meta h3{
        font-size:1rem;
    }

    .products-catalog-card-meta span{
        font-size:.95rem;
    }

    .products-page-btn{
        min-width:44px;
        height:44px;
    }

    .product_detail-shell{
        padding:14px 0 22px;
    }

    .product_detail-gallery-card{
        padding:10px;
    }

    .product_detail-sidebar{
        padding:10px;
    }

    .product_detail-carousel-inner,
    .product_detail-carousel .carousel-item,
    .product_detail-carousel-image{
        min-height:260px;
    }

    .product_detail-thumb{
        width:70px;
        height:58px;
    }

    .product_detail-panel{
        padding:16px;
    }

    .product_detail-title{
        font-size:clamp(1.4rem, 7vw, 1.85rem);
    }

    .product_detail-socials{
        gap:10px;
    }

    .product_detail-social-btn{
        width:42px;
        height:42px;
    }

    .product_detail-tabs-card{
        padding:12px;
    }

    .product_detail-tab-btn{
        min-height:46px;
        font-size:.88rem;
    }

    .product_detail-feature-card,
    .product_detail-dimension-card{
        padding:18px 14px;
    }

    .product_detail-section-head h2{
        font-size:1.35rem;
        margin-bottom:28px;
    }

    .product_detail-card-body a{
        font-size:.9rem;
    }

    .about-hero-title{
        font-size:clamp(1.85rem, 8.5vw, 2.35rem);
    }

    .about-hero-image{
        width:min(100%, 280px);
    }

    .about-team-card img{
        height:220px;
    }

    .about-agencies-list li{
        font-size:.96rem;
        padding:12px 14px;
    }

    .about-btn{
        width:100%;
        justify-content:center;
        padding-inline:18px;
    }

    .contact-content,
    .contact-form-wrapper{
        padding-inline:12px;
    }

    .contact-title{
        font-size:clamp(1.65rem, 8vw, 2.1rem);
    }

    .contact-form-card{
        padding:18px;
    }

    .contact-map-card iframe{
        height:260px;
    }

    .footer-about p,
    .footer-links a,
    .footer-bottom p{
        font-size:.92rem;
        line-height:2;
    }

    .footer-socials a{
        width:40px;
        height:40px;
    }

    .contact-item span{
        font-size:.9rem;
    }
}