/* =====================================================
PUBLIC INDUSTRY MARKETPLACE HEADER
===================================================== */

.industry-hero{

    position:relative;

    padding:34px 0 30px;

    background:
        linear-gradient(
            135deg,
            var(--navy) 0%,
            #17233f 100%
        );

    overflow:hidden;

}


/* =====================================================
SUBTLE HERO BACKGROUND DETAIL
===================================================== */

.industry-hero::before{

    content:"";

    position:absolute;

    top:-140px;

    right:-120px;

    width:360px;

    height:360px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(76,132,20,.16) 0%,
            rgba(76,132,20,0) 70%
        );

    pointer-events:none;

}


.industry-hero .container{

    position:relative;

    z-index:2;

}


/* =====================================================
BREADCRUMB
===================================================== */

.industry-breadcrumb{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:18px;

    color:rgba(255,255,255,.55);

    font-size:12px;

    font-weight:600;

}


.industry-breadcrumb a{

    color:rgba(255,255,255,.68);

    text-decoration:none;

    transition:color .2s ease;

}


.industry-breadcrumb a:hover{

    color:#ffffff;

}


.industry-breadcrumb i{

    color:rgba(255,255,255,.32);

    font-size:8px;

}


.industry-breadcrumb span:last-child{

    color:#ffffff;

}


/* =====================================================
INDUSTRY HEADER LAYOUT
===================================================== */

.industry-hero-layout{

    display:grid;

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

    gap:36px;

    align-items:end;

}


.industry-hero-content{

    max-width:760px;

}


/* =====================================================
INDUSTRY TITLE
===================================================== */

.industry-hero h1{

    margin:0;

    color:#ffffff;

    font-size:34px;

    font-weight:800;

    line-height:1.2;

    letter-spacing:-.3px;

}


/* =====================================================
INDUSTRY DESCRIPTION
===================================================== */

.industry-hero p{

    max-width:720px;

    margin:9px 0 0;

    color:rgba(255,255,255,.72);

    font-size:14px;

    line-height:1.65;

}


/* =====================================================
TRUST LINE
===================================================== */

.hero-trust{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    margin-top:16px;

    color:rgba(255,255,255,.72);

    font-size:12px;

    font-weight:600;

}


.hero-trust span{

    position:relative;

    margin-right:14px;

    padding-right:14px;

}


.hero-trust span:not(:last-child)::after{

    content:"";

    position:absolute;

    top:50%;

    right:0;

    width:3px;

    height:3px;

    border-radius:50%;

    background:var(--green);

    transform:translateY(-50%);

}


/* =====================================================
INDUSTRY STATISTICS
===================================================== */

.industry-statistics{

    display:grid;

    grid-template-columns:
        repeat(3,minmax(110px,1fr));

    gap:10px;

}


.industry-stat-item{

    min-width:120px;

    padding:13px 15px;

    border:1px solid rgba(255,255,255,.14);

    border-radius:9px;

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

    backdrop-filter:blur(4px);

}


.industry-stat-item span{

    display:block;

    margin:0 0 6px;

    color:rgba(255,255,255,.65);

    font-size:11px;

    font-weight:600;

    white-space:nowrap;

}


.industry-stat-item strong{

    display:block;

    color:#ffffff;

    font-size:21px;

    font-weight:800;

    line-height:1;

}


/* =====================================================
CATALOG SECTION
DATABASE READY VERSION
===================================================== */


/* =====================================================
MARKETPLACE CATALOG SECTION
===================================================== */

.catalog-section{

    padding:34px 0 48px;

    background:#f8fafc;

}


/* =====================================================
MARKETPLACE MAIN LAYOUT
===================================================== */

.catalog-layout{

    display:grid;

    grid-template-columns:
        300px minmax(0,1fr);

    gap:22px;

    align-items:start;

}


/* =====================================================
LEFT SIDEBAR
===================================================== */


.catalog-sidebar{

    position:sticky;

    top:90px;

    align-self:start;

    min-width:0;

}

/* =====================================================
MOBILE BROWSE CATEGORIES BUTTON
===================================================== */

.catalog-mobile-button{

    display:none;

    width:100%;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    min-height:44px;

    padding:11px 14px;

    border:1px solid #e5e7eb;

    border-radius:8px;

    background:#ffffff;

    color:var(--navy);

    font-size:13px;

    font-weight:700;

    cursor:pointer;

    box-sizing:border-box;

    transition:
        border-color .2s ease,
        background .2s ease;

}


.catalog-mobile-button:hover{

    border-color:#cbd5e1;

    background:#f8fafc;

}


.catalog-mobile-button i{

    color:var(--green);

    font-size:13px;

}


/* OVERLAY */


.catalog-overlay{


    position:fixed;


    inset:0;


    background:rgba(0,0,0,.45);


    opacity:0;


    visibility:hidden;


    transition:.3s;


    z-index:1998;


}



.catalog-overlay.open{


    opacity:1;


    visibility:visible;


}






/* =====================================================
MARKETPLACE CATEGORY SIDEBAR CONTAINER
===================================================== */

.catalog-drawer{

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:10px;

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

    overflow-y:auto;

    overflow-x:hidden;

    box-shadow:0 4px 14px rgba(15,23,42,.04);

}


/* =====================================================
SIDEBAR SCROLLBAR
===================================================== */

.catalog-drawer::-webkit-scrollbar{

    width:6px;

}


.catalog-drawer::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:10px;

}


.catalog-drawer::-webkit-scrollbar-track{

    background:transparent;

}



/* =====================================================
CATEGORY SIDEBAR HEADER
===================================================== */

.drawer-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:52px;

    padding:14px 18px;

    border-bottom:1px solid #eef2f7;

    background:#ffffff;

}


.drawer-header h3{

    margin:0;

    color:var(--navy);

    font-size:14px;

    font-weight:700;

    line-height:1.3;

}


/* =====================================================
MOBILE CLOSE BUTTON
===================================================== */

.drawer-close{

    display:none;

    width:32px;

    height:32px;

    padding:0;

    border:0;

    border-radius:6px;

    background:transparent;

    color:#64748b;

    font-size:17px;

    cursor:pointer;

    align-items:center;

    justify-content:center;

    transition:
        background .2s ease,
        color .2s ease;

}


.drawer-close:hover{

    color:var(--navy);

    background:#f1f5f9;

}




/* =====================================================
DATABASE CATEGORY TREE
===================================================== */

.catalog-tree{

    padding:4px 0 14px;

}


/* =====================================================
LEVEL 1
===================================================== */

.category-level-1{

    border-bottom:0;

}


.category-btn,
.subcategory-btn{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    border:0;

    background:transparent;

    cursor:pointer;

    box-sizing:border-box;

    color:#334155;

    transition:
        background .2s ease,
        color .2s ease;

}


.category-btn{

    padding:11px 18px;

    font-size:14px;

    font-weight:700;

}


.subcategory-btn{

    padding:10px 18px 10px 30px;

    font-size:13px;

    font-weight:600;

}


.category-btn:hover,
.subcategory-btn:hover{

    color:var(--green);

    background:#f5f8f2;

}


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

.category-btn i,
.subcategory-btn i{

    flex-shrink:0;

    color:#94a3b8;

    font-size:10px;

    transition:
        transform .2s ease,
        color .2s ease;

}


.category-btn:hover i,
.subcategory-btn:hover i{

    color:var(--green);

}


.category-btn i.rotate,
.subcategory-btn i.rotate{

    transform:rotate(90deg);

}


/* =====================================================
CHILD LEVELS
===================================================== */

.category-children,
.subcategory-children{

    background:#fbfcfd;

}


.category-level-3{

    padding:9px 18px 9px 44px;

    color:#64748b;

    font-size:13px;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease;

}


.category-level-3:hover{

    color:var(--green);

    background:#f2f7ee;

}


/* =====================================================
ACTIVE PRODUCT TYPE
===================================================== */

.category-level-3.category-active{

    color:var(--green);

    background:#edf5e7;

    font-weight:700;

}


/* =====================================================
ALL PRODUCTS OPTION
===================================================== */

.all-products-option{

    padding:10px 18px;

    color:var(--navy);

    font-size:13px;

    font-weight:600;

    border-bottom:1px solid #eef2f7;

}


.all-products-option:hover{

    color:var(--green);

    background:#f2f7ee;

}


.all-products-option.category-active{

    color:var(--green);

    background:#edf5e7;

}

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


/* =====================================================
MARKETPLACE PRODUCT AREA
===================================================== */

.catalog-content{

    min-width:0;

}


/* =====================================================
CATALOG HEADER
===================================================== */

.catalog-header{

    margin-bottom:18px;

}


.catalog-header-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

}


.catalog-header h2{

    margin:0;

    color:var(--navy);

    font-size:26px;

    font-weight:800;

    line-height:1.25;

}


.catalog-header p{

    max-width:700px;

    margin:6px 0 0;

    color:#64748b;

    font-size:13px;

    line-height:1.6;

}


/* =====================================================
FOLLOW CATEGORY BUTTON
===================================================== */

.follow-category-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    min-height:36px;

    padding:8px 14px;

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

    border-radius:7px;

    background:#ffffff;

    color:var(--green);

    font-size:12px;

    font-weight:600;

    line-height:1;

    cursor:pointer;

    white-space:nowrap;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;

}


.follow-category-btn:hover{

    background:var(--green);

    border-color:var(--green);

    color:#ffffff;

    box-shadow:0 4px 10px rgba(76,132,20,.14);

}


.follow-category-btn.active{

    background:var(--green);

    border-color:var(--green);

    color:#ffffff;

}


.follow-category-btn i{

    font-size:11px;

}

/* =====================================================
CATEGORY ACTION BUTTONS
===================================================== */

.category-action-buttons{

    display:flex;

    align-items:center;

    gap:8px;

}


/* =====================================================
PRODUCT GRID TOGGLE
===================================================== */

.product-grid-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

    width:40px;

    height:40px;

    flex:0 0 40px;

    padding:0;

    border:1px solid #e5e7eb;

    border-radius:8px;

    background:#ffffff;

    color:#64748b;

    font-size:15px;

    cursor:pointer;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease;

}


.product-grid-toggle:hover{

    color:var(--green);

    border-color:rgba(76,132,20,.45);

    background:#f8fafc;

}


.product-grid-toggle.active{

    color:#ffffff;

    border-color:var(--green);

    background:var(--green);

}


/* =====================================================
CATALOG TOOLBAR
===================================================== */

.catalog-toolbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-top:18px;

    padding:12px 16px;

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:8px;

}


.product-count{

    color:#64748b;

    font-size:13px;

}


.product-count span{

    color:var(--navy);

    font-weight:700;

}



/* =====================================================
SORT
===================================================== */

.product-sort{

    display:flex;

    align-items:center;

    gap:8px;

}


.product-sort label{

    color:#64748b;

    font-size:12px;

}


.product-sort select{

    min-height:36px;

    padding:8px 36px 8px 12px;

    border:1px solid #d9dee8;

    border-radius:7px;

    background:#ffffff;

    color:var(--navy);

    font-family:inherit;

    font-size:12px;

    cursor:pointer;

    appearance:none;

    -webkit-appearance:none;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #64748b 50%
        ),
        linear-gradient(
            135deg,
            #64748b 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 15px) 50%,
        calc(100% - 10px) 50%;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat:no-repeat;

}


.product-sort select:hover,
.product-sort select:focus{

    border-color:var(--green);

    outline:none;

}

/* =====================================================
PRODUCT GRID
===================================================== */


.product-grid{


    display:grid;


    grid-template-columns:
    repeat(auto-fill,minmax(280px,1fr));


    gap:30px;


    margin-top:35px;


}

/* =====================================================
PRODUCT GRID
DEFAULT = 3 COLUMNS
===================================================== */

.product-grid{

    display:grid;

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

    gap:14px;

    margin-top:28px;

}


/* =====================================================
2 COLUMN VIEW
===================================================== */

.product-grid.product-grid-two{

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

}


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

@media(max-width:992px){

    .product-grid,
    .product-grid.product-grid-two{

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

    }

}


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

@media(max-width:768px){

    .product-grid,
    .product-grid.product-grid-two{

        grid-template-columns:1fr;

    }


    .product-grid-toggle{

        display:none;

    }

}

/* =====================================================
MARKETPLACE CATEGORY RAIL
===================================================== */

@media(min-width:769px){
    .catalog-layout{
        grid-template-columns:280px minmax(0,1fr);
        gap:28px;
    }

    .catalog-sidebar{
        top:86px;
        max-height:calc(100vh - 106px);
    }

    .catalog-drawer{
        max-height:calc(100vh - 106px);
        border:0;
        border-right:1px solid #e2e8f0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
        scrollbar-width:thin;
        scrollbar-color:#cbd5e1 transparent;
    }

    .drawer-header{
        position:sticky;
        top:0;
        z-index:3;
        padding:13px 18px 13px 0;
        background:#f8fafc;
    }

    .catalog-tree{
        padding-right:18px;
    }
}

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

.product-card{

    display:flex;

    flex-direction:column;

    height:100%;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:12px;

    overflow:hidden;

    transition:.3s;

}


.product-card:hover{

    transform:translateY(-4px);

    box-shadow:0 14px 28px rgba(0,0,0,.07);

}


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

.product-image{

    position:relative;

    aspect-ratio:4/3;

    overflow:hidden;

    flex-shrink:0;

}


/* =====================================================
PRODUCT IMAGE SLIDER
===================================================== */

.product-main-image{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:0;

    transition:
        opacity .35s ease,
        transform .35s ease;

}


.product-main-image.active{

    opacity:1;

}


.product-card:hover
.product-main-image.active{

    transform:scale(1.04);

}


/* =====================================================
IMAGE NAVIGATION BUTTONS
===================================================== */

.image-prev,
.image-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:32px;

    height:32px;

    border:none;

    border-radius:50%;

    background:rgba(12,18,36,.45);

    backdrop-filter:blur(4px);

    color:#fff;

    font-size:16px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    transition:.25s;

    z-index:5;

}


.image-prev{

    left:12px;

}


.image-next{

    right:12px;

}


.product-card:hover .image-prev,
.product-card:hover .image-next{

    opacity:1;

}


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

.image-dots{

    position:absolute;

    bottom:12px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:6px;

    z-index:5;

}


.image-dots span{

    width:7px;

    height:7px;

    border-radius:50%;

    background:rgba(12,18,36,.35);

    border:1px solid rgba(255,255,255,.8);

    cursor:pointer;

    transition:.25s;

}


.image-dots span.active{

    background:var(--green);

    border-color:var(--green);

}


/* =====================================================
FAVORITE
===================================================== */

.favorite-btn{

    position:absolute;

    right:12px;

    top:12px;

    width:36px;

    height:36px;

    border-radius:50%;

    border:none;

    background:#fff;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#64748b;

    font-size:16px;

    box-shadow:0 4px 12px rgba(0,0,0,.12);

    z-index:10;

}


.favorite-btn:hover,
.favorite-btn.active{

    color:#e11d48;

}


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

.product-info{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:17px 18px 18px;

}


.product-title{

    margin:0 0 7px;

    color:var(--navy);

    font-size:16px;

    font-weight:700;

    line-height:1.35;

}


.product-description{

    margin:0 0 14px;

    color:#64748b;

    font-size:13px;

    line-height:1.5;

}


/* =====================================================
PRODUCT META
===================================================== */

.product-meta{

    margin-bottom:14px;

}


/* =====================================================
PRODUCT ACTION BUTTON
ALWAYS AT BOTTOM
===================================================== */

.product-info .inquiry-btn{

    width:100%;

    margin-top:auto;

}


/* =====================================================
PRODUCT BADGES
===================================================== */

.product-badges{

    position:absolute;

    top:12px;

    left:0;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:5px;

    z-index:10;

}


.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:25px;

    padding:5px 10px 5px 12px;

    border-radius:0 4px 4px 0;

    color:#fff;

    font-size:10px;

    font-weight:700;

    line-height:1;

    letter-spacing:.3px;

    text-transform:uppercase;

    box-shadow:0 2px 5px rgba(0,0,0,.08);

}


/* SPONSORED */

.sponsored-badge{

    background:#d97706;

}


/* FEATURED */

.featured-badge{

    background:var(--green);

}


/* =====================================================
LOAD MORE
===================================================== */

.load-more-btn{

    display:block;

    min-width:140px;

    margin:28px auto 0;

    padding:10px 22px;

    background:#ffffff;

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

    border-radius:7px;

    color:var(--green);

    font-size:13px;

    font-weight:600;

    line-height:1.4;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;

}


.load-more-btn:hover{

    background:var(--green);

    border-color:var(--green);

    color:#ffffff;

    box-shadow:0 4px 10px rgba(76,132,20,.14);

}


.load-more-btn:focus-visible{

    outline:2px solid rgba(76,132,20,.25);

    outline-offset:2px;

}


.load-more-btn:disabled{

    opacity:.55;

    cursor:not-allowed;

    box-shadow:none;

}

/* =====================================================
INQUIRY MODAL SYSTEM
===================================================== */

.inquiry-modal{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

    background:rgba(12,18,36,.58);

    backdrop-filter:blur(4px);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .22s ease,
        visibility .22s ease;

    z-index:5000;

}


.inquiry-modal.open{

    opacity:1;

    visibility:visible;

}


/* =====================================================
MODAL BOX
===================================================== */

.inquiry-box{

    position:relative;

    width:100%;

    max-width:560px;

    max-height:calc(100dvh - 48px);

    overflow-y:auto;

    padding:30px;

    border:1px solid #e5e7eb;

    border-radius:14px;

    background:#ffffff;

    box-shadow:
        0 28px 70px
        rgba(15,23,42,.22);

}


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

.inquiry-close{

    position:absolute;

    top:16px;

    right:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    padding:0;

    border:1px solid #e5e7eb;

    border-radius:8px;

    background:#ffffff;

    color:#64748b;

    font-size:14px;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;

    z-index:5;

}


.inquiry-close:hover{

    background:#f8fafc;

    border-color:#cbd5e1;

    color:var(--navy);

}


/* =====================================================
FORM HEADER
===================================================== */

.inquiry-header{

    padding-right:42px;

    margin-bottom:20px;

}


.inquiry-header h2{

    margin:0;

    color:var(--navy);

    font-size:23px;

    font-weight:800;

    line-height:1.25;

}


.inquiry-header p{

    max-width:460px;

    margin:7px 0 0;

    color:#64748b;

    font-size:13px;

    line-height:1.55;

}


/* =====================================================
SELECTED PRODUCT
===================================================== */

.selected-product{

    margin-bottom:22px;

    padding:13px 15px;

    border:1px solid #dce8d2;

    border-left:4px solid var(--green);

    border-radius:8px;

    background:#f5f8f2;

}


.selected-product span{

    display:block;

    margin-bottom:3px;

    color:#64748b;

    font-size:10px;

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;

}


.selected-product strong{

    display:block;

    color:var(--navy);

    font-size:14px;

    font-weight:700;

    line-height:1.4;

}


/* =====================================================
INQUIRY FORM
===================================================== */

#inquiryForm{

    display:flex;

    flex-direction:column;

    gap:15px;

}


/* =====================================================
FIELD
===================================================== */

.inquiry-field{

    display:flex;

    flex-direction:column;

    gap:6px;

}


.inquiry-field label{

    color:#334155;

    font-size:12px;

    font-weight:700;

}


.inquiry-field label span{

    color:#dc2626;

}


.inquiry-field input,
.inquiry-field textarea{

    width:100%;

    border:1px solid #d9dee8;

    border-radius:8px;

    background:#ffffff;

    color:var(--navy);

    font-family:inherit;

    font-size:13px;

    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.inquiry-field input{

    min-height:42px;

    padding:9px 12px;

}


.inquiry-field textarea{

    min-height:110px;

    padding:11px 12px;

    line-height:1.55;

    resize:vertical;

}


.inquiry-field input::placeholder,
.inquiry-field textarea::placeholder{

    color:#94a3b8;

}


.inquiry-field input:focus,
.inquiry-field textarea:focus{

    border-color:var(--green);

    box-shadow:
        0 0 0 3px
        rgba(76,132,20,.10);

}


/* =====================================================
TWO-COLUMN FIELD ROW
===================================================== */

.form-row{

    display:grid;

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

    gap:12px;

}


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

.inquiry-submit{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:100%;

    min-height:44px;

    margin-top:3px;

    padding:10px 18px;

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

    border-radius:8px;

    background:var(--green);

    color:#ffffff;

    font-size:13px;

    font-weight:700;

    cursor:pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;

}


.inquiry-submit:hover{

    background:var(--green-dark);

    border-color:var(--green-dark);

    box-shadow:
        0 5px 12px
        rgba(76,132,20,.16);

}


.inquiry-submit i{

    font-size:11px;

}

/* =====================================================
SUCCESS SCREEN
===================================================== */

.inquiry-success{

    position:absolute;

    inset:0;

    display:none;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-height:420px;

    padding:50px 40px;

    border-radius:14px;

    background:#ffffff;

    text-align:center;

    overflow:hidden;

    box-sizing:border-box;

    z-index:20;

}


.inquiry-success.active{

    display:flex;

}


/* Prevent success screen from scrolling */

.inquiry-box:has(.inquiry-success.active){
    min-height:350px;
    overflow:hidden;
}


/* =====================================================
SUCCESS ICON
===================================================== */

.success-icon{

    display:flex;

    flex:0 0 auto;

    align-items:center;

    justify-content:center;

    width:68px;

    height:68px;

    margin-bottom:20px;

    border-radius:50%;

    background:#eef5e8;

    color:var(--green);

}


.success-icon i{

    font-size:30px;

}


/* =====================================================
SUCCESS TITLE
===================================================== */

.inquiry-success h3{

    margin:0 0 10px;

    color:var(--navy);

    font-size:22px;

    font-weight:800;

    line-height:1.3;

}


/* =====================================================
SUCCESS MESSAGE
===================================================== */

.inquiry-success p{

    width:100%;

    max-width:390px;

    margin:0 0 24px;

    color:#64748b;

    font-size:13px;

    line-height:1.7;

}


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

.success-close{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:140px;

    min-height:42px;

    padding:10px 22px;

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

    border-radius:8px;

    background:var(--green);

    color:#ffffff;

    font-family:inherit;

    font-size:13px;

    font-weight:700;

    line-height:1;

    cursor:pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;

}


.success-close:hover{

    background:var(--green-dark);

    border-color:var(--green-dark);

    box-shadow:0 5px 12px rgba(76,132,20,.16);

}


/* =====================================================
SCROLLBAR
===================================================== */

.inquiry-box::-webkit-scrollbar{

    width:6px;

}


.inquiry-box::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:10px;

}


.inquiry-box::-webkit-scrollbar-track{

    background:transparent;

}


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

@media(max-width:600px){

    .inquiry-modal{

        align-items:flex-end;

        padding:0;

    }


    .inquiry-box{

        max-width:none;

        max-height:92dvh;

        padding:24px 18px 20px;

        border-radius:14px 14px 0 0;

    }


    .inquiry-close{

        top:13px;

        right:13px;

    }


    .inquiry-header{

        padding-right:40px;

        margin-bottom:18px;

    }


    .inquiry-header h2{

        font-size:20px;

    }


    .inquiry-header p{

        font-size:12px;

    }


    .form-row{

        grid-template-columns:1fr;

    }


    .inquiry-field textarea{

        min-height:95px;

    }


    /* SUCCESS SCREEN */

    .inquiry-success{

        min-height:360px;

        padding:40px 24px;

        border-radius:14px 14px 0 0;

    }


    .success-icon{

        width:62px;

        height:62px;

        margin-bottom:18px;

    }


    .success-icon i{

        font-size:27px;

    }


    .inquiry-success h3{

        font-size:20px;

    }


    .inquiry-success p{

        max-width:330px;

        margin-bottom:22px;

        font-size:12px;

    }

}


/* =====================================================
INDUSTRY MARKETPLACE
FINAL RESPONSIVE RULES
===================================================== */


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

@media(max-width:1000px){

    /* HERO */

    .industry-hero-layout{

        grid-template-columns:1fr;

        gap:20px;

    }


    .industry-statistics{

        max-width:520px;

    }


    /* CATALOGUE */

    .catalog-layout{

        grid-template-columns:
            260px minmax(0,1fr);

        gap:18px;

    }


    .catalog-header-top{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

}


/* =====================================================
TABLET / MOBILE MARKETPLACE
===================================================== */

@media(max-width:768px){

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

    .industry-hero{

        padding:28px 0 26px;

    }


    .industry-hero-layout{

        gap:18px;

    }


    /* =====================================================
    CATALOGUE SECTION
    ===================================================== */

    .catalog-section{

        padding:24px 0 38px;

    }


    .catalog-layout{

        display:block;

    }


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

    .catalog-sidebar{

        position:static;

        margin-bottom:18px;

    }


    .catalog-mobile-button{

        display:flex;

    }


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

    .catalog-drawer{

        position:fixed;

        top:0;

        left:-100%;

        width:320px;

        max-width:90vw;

        height:100dvh;

        max-height:100dvh;

        background:#ffffff;

        border:0;

        border-radius:0;

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

        overflow-y:auto;

        overflow-x:hidden;

        overscroll-behavior:contain;

        -webkit-overflow-scrolling:touch;

        transition:left .3s ease;

        z-index:2000;

    }


    .catalog-drawer.open{

        left:0;

    }


    .drawer-close{

        display:flex;

    }


    .drawer-header{

        position:sticky;

        top:0;

        z-index:20;

        background:#ffffff;

    }


    /* =====================================================
    DRAWER SCROLLBAR
    ===================================================== */

    .catalog-drawer::-webkit-scrollbar{

        width:6px;

    }


    .catalog-drawer::-webkit-scrollbar-thumb{

        background:#cbd5e1;

        border-radius:10px;

    }


    .catalog-drawer::-webkit-scrollbar-track{

        background:transparent;

    }


    /* =====================================================
    CATALOGUE HEADER
    ===================================================== */

    .catalog-header{

        margin-bottom:14px;

    }


    .catalog-header-top{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }


    .catalog-header h2{

        font-size:23px;

    }


    /* =====================================================
    TOOLBAR
    ===================================================== */

    .catalog-toolbar{

        flex-direction:row;

        align-items:center;

        justify-content:space-between;

        gap:12px;

        margin-top:14px;

        padding:11px 13px;

    }


    /* =====================================================
    PRODUCT GRID
    ===================================================== */

    .product-grid{

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

        gap:12px;

        margin-top:20px;

    }

}


/* =====================================================
PHONE
===================================================== */

@media(max-width:600px){

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

    .industry-hero{

        padding:24px 0;

    }


    .industry-breadcrumb{

        margin-bottom:14px;

        font-size:11px;

    }


    .industry-hero-layout{

        gap:18px;

    }


    .industry-hero h1{

        font-size:27px;

    }


    .industry-hero p{

        font-size:13px;

        line-height:1.6;

    }


    /* =====================================================
    TRUST LINE
    ===================================================== */

    .hero-trust{

        margin-top:13px;

        font-size:11px;

        line-height:1.6;

    }


    .hero-trust span{

        margin-right:10px;

        padding-right:10px;

    }


    /* =====================================================
    INDUSTRY STATISTICS
    ===================================================== */

    .industry-statistics{

        width:100%;

        max-width:none;

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

        gap:7px;

    }


    .industry-stat-item{

        min-width:0;

        padding:11px 8px;

    }


    .industry-stat-item span{

        font-size:9px;

        white-space:normal;

    }


    .industry-stat-item strong{

        font-size:18px;

    }


    /* =====================================================
    CATALOG TOOLBAR
    ===================================================== */

    .catalog-toolbar{

        flex-wrap:wrap;

    }


    .product-sort{

        margin-left:auto;

    }


    /* =====================================================
    INQUIRY MODAL
    ===================================================== */

    .inquiry-box{

        max-width:95%;

        padding:22px;

    }


    .form-row{

        grid-template-columns:1fr;

    }


    .inquiry-box h2{

        font-size:21px;

    }

}


/* =====================================================
SMALL PHONE
===================================================== */

@media(max-width:520px){

    /* =====================================================
    PRODUCT GRID
    ===================================================== */

    .product-grid{

        grid-template-columns:1fr;

        gap:12px;

    }


    /* =====================================================
    TOOLBAR
    ===================================================== */

    .catalog-toolbar{

        align-items:center;

    }


    .product-count{

        font-size:12px;

    }


    .product-sort label{

        display:none;

    }


    .product-sort select{

        max-width:145px;

    }

}