/*====================================================
=                 HEADER VARIABLES                   =
====================================================*/

:root{
    --primary:#9B1E22;
    --primary-dark:#7A171B;
    --accent:#9B1E22;
    --text:#12181E;
    --text-light:#6E6E6E;
    --border:#E2E2E2;
    --bg:#FCFAF8;
    --white:#FFFFFF;
  --primary-fg:#FFFFFF;
  --accent-dark:#9B1E22;
  --accent-fg:#0D0D0D;
  --brand-red:#9B1E22;
  --card:#FFFFFF;
  --border:#E2E2E2;
  --muted:#6E6E6E;
  --sidebar:#0D0D0D;
  --radius:12px;
  --shadow:0 6px 24px rgba(0,0,0,.08);
}


/*====================================================
=                 SITE HEADER                        =
====================================================*/

.site-header{
    width:100%;
    background:#FFFFFF;
    position:relative;
    z-index:1000;
}


/*====================================================
=          HEADER — B2B UTILITY BAR (NEW)            =
====================================================*/

.header-utility-bar{
    background: var(--sidebar);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.header-utility-bar__inner{
    max-width: 1280px;
    margin: 0 auto;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.header-utility-bar__phone{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #F0F0F0;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.header-utility-bar__phone:hover{
    color: #FFFFFF;
}

.header-utility-bar__phone .dashicons{
    font-size: 15px;
    width: 15px;
    height: 15px;
}

.header-utility-bar__links{
    display: flex;
    align-items: center;
    gap: 18px;
}

.header-utility-bar__link{
    color: rgba(255,255,255,.85);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.header-utility-bar__link:hover{
    color: #FFFFFF;
}

.header-utility-bar__quote{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}

.header-utility-bar__quote:hover{
    background: var(--accent-dark);
    color: #FFFFFF;
}

.header-utility-bar__quote .dashicons{
    font-size: 14px;
    width: 14px;
    height: 14px;
}

@media (max-width: 991px){
    .header-utility-bar{ display: none; }
}


/*====================================================
=          HEADER — QUOTE / PHONE BLOCK (legacy,     =
=          no longer used in markup — kept for       =
=          reference only)                           =
====================================================*/

.header-quote-phone{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.header-quote-phone__quote{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}

.header-quote-phone__quote:hover{
    background: var(--accent-dark);
    color: var(--white);
    text-decoration: none;
}

.header-quote-phone__quote .dashicons{
    font-size: 15px;
    width: 15px;
    height: 15px;
}

.header-quote-phone__phone{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    white-space: nowrap;
}

.header-quote-phone__phone-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--primary);
    font-size: 16px;
    flex-shrink: 0;
}

.header-quote-phone__phone-text{
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.header-quote-phone__phone-text em{
    font-style: normal;
    font-size: 11px;
    color: var(--text-light);
}

.header-quote-phone__phone-text strong{
    font-size: 13.5px;
    color: var(--text);
}

@media (max-width: 1100px){
    .header-quote-phone__phone-text{ display: none; }
}

@media (max-width: 900px){
    .header-quote-phone{ display: none; }
}


.header-row-1{
    background:#FFFFFF;
    border-bottom:1px solid var(--border);
}

.header-row-1__inner{
   

    max-width: 1280px;
    display: flex;
    align-items: center;
    margin: 0px auto;
    padding: 10px 16px;
    gap: 16px;

}


/*====================================================
=                 LOGO                              =
====================================================*/

.site-branding{
    flex-shrink:0;
}

.site-branding img{
    display:block;
    width:auto;
    max-height:52px;
}


/*====================================================
=                 B2B PROMO                         =
====================================================*/

.header-b2b-promo{

    display:flex;
    align-items:center;
    gap:10px;

    padding:8px 14px;

    border:2px solid #9B1E22;

    border-radius:4px;

    background:#FFFFFF;
    flex-shrink: 0;
    cursor: pointer;
    margin-left: 8px;
}

.header-b2b-promo__icon{

   

    background: #9B1E22;
    color: #FFFFFF;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;


}

.header-b2b-promo__text{

    display:flex;
    flex-direction:column;

}

.header-b2b-promo__text strong{

    font-size:13px;
    display: block;
    font-weight: 700;

    color:var(--primary);

}

.header-b2b-promo__text em{

    font-size:12px;

    color:#9B1E22;

    font-style:italic;

}


/*====================================================
=                 HEADER ACTIONS                    =
====================================================*/

.header-actions{
    display: flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
    gap: 12px;

}

.btn-create-account{

    font-size: 13px;
    font-weight: 700;
    color: rgb(255, 255, 255) !important;
    background: var(--text);
    padding: 10px 20px;
    border-radius: 4px;
    white-space: nowrap;
    transition: background 0.15s;
    text-decoration: none !important;

}

.btn-create-account:hover {
    background: #262626;
    text-decoration: none !important;
}

/* HELLO / SIGN IN — separate button with Account dropdown */
.header-actions__hello{
    position:relative;
}

.header-actions__hello-trigger{
    display:flex;
    align-items:center;
    gap:6px;
    text-decoration:none !important;
    padding:6px 10px;
    border-radius:4px;
    transition:background .15s;
    white-space:nowrap;
}

.header-actions__hello-trigger:hover{
    background:#F4EFEB;
}

.header-actions__hello-trigger:hover .header-actions__hello-line2{
    color:var(--primary);
}

.header-actions__hello-icon{
    font-size:24px;
    width:24px;
    height:24px;
    color:var(--text);
    flex-shrink:0;
}

.header-actions__hello-text{
    display:flex;
    flex-direction:column;
    line-height:1.25;
}

.header-actions__hello-line1{
    font-size:11px;
    font-weight:600;
    color:var(--text-light);
}

.header-actions__hello-line2{
    font-size:13px;
    font-weight:700;
    color:var(--text);
}

/* Account dropdown, opened from the Hello/Sign In button */
.header-account-dropdown{
    position:absolute;
    top:100%;
    right:0;
    margin-top:8px;
    width:420px;
    max-width:calc(100vw - 32px);
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:8px;
    box-shadow:var(--shadow);
    opacity:0;
    visibility:hidden;
    transform:translateY(4px);
    transition:opacity .15s, transform .15s, visibility .15s;
    z-index:300;
    overflow:hidden;
}

.header-actions__hello:hover .header-account-dropdown,
.header-actions__hello:focus-within .header-account-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.header-account-dropdown__head{
    background:rgba(155,30,34,.06);
    border-bottom:1px solid var(--border);
    padding:12px 20px;
    text-align:right;
}

.header-account-dropdown__head a{
    font-size:13px;
    font-weight:700;
    color:var(--primary-dark);
    text-decoration:none;
}

.header-account-dropdown__head a:hover{
    color:var(--primary);
}

.header-account-dropdown__cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px 24px;
    padding:16px 20px 20px;
}

.header-account-dropdown__col{
    display:flex;
    flex-direction:column;
}

.header-account-dropdown__col a{
    padding:9px 0;
    font-size:13.5px;
    font-weight:600;
    color:var(--text);
    text-decoration:none;
    white-space:nowrap;
}

.header-account-dropdown__col a:hover{
    color:var(--primary);
}

/* RETURNS & ORDERS — its own separate button, no dropdown */
.header-actions__returns{
    display:flex;
    flex-direction:column;
    line-height:1.25;
    padding:6px 10px;
    border-radius:4px;
    text-decoration:none !important;
    white-space:nowrap;
    transition:background .15s;
}

.header-actions__returns:hover{
    background:#F4EFEB;
}

.header-actions__returns-line1{
    font-size:11px;
    font-weight:600;
    color:var(--text-light);
}

.header-actions__returns-line2{
    font-size:13px;
    font-weight:700;
    color:var(--text);
}

.header-actions__returns:hover .header-actions__returns-line2{
    color:var(--primary);
}

.header-actions__cart{

    position:relative;

    display:flex;

    align-items:center;

    color:#12181E;

    text-decoration:none;

    padding:6px 4px 6px 10px;

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

}

.header-actions__cart .dashicons{

    font-size:28px;

}

.cart-badge{

    position:absolute;

    top:-8px;

    right:-10px;

    min-width:18px;

    height:18px;

    padding:0 4px;

    border-radius:50%;

    background:var(--primary);

    color:#FFFFFF;

    font-size:11px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

}


/*====================================================
=                 ROW 2                             =
====================================================*/

.header-row-2{

    background:#0D0D0D;

}

.header-row-2__inner{

    max-width:1320px;

    margin:auto;

    padding:10px 24px;

    display:flex;

    align-items:center;

    /* gap:18px; */

}


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

.categories-toggle-btn{

    color: rgb(255, 255, 255);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    font-family: inherit;
    background: var(--primary-dark);
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    padding: 10px 20px;
    white-space: nowrap;
    gap: 8px;
    height: 48px;
    border-radius: 3px 0px 0px 3px;


}

.categories-toggle-btn:hover{

    background:#0D0D0D;

}

.categories-toggle-btn .dashicons{

    font-size:20px;

}


/* Wrapper */
.categories-wrapper{
    position:relative;
    flex-shrink:0;
}

/* Drawer */

.categories-drawer{

    position:absolute;
    top:100%;
    left:0;

    /* width:1220px; */
    width: auto;

    z-index:9999;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:opacity .18s, visibility .18s;

}

.categories-drawer.dc-active{

    opacity:1;
    visibility:visible;
    pointer-events:auto;

}

/* Drawer */



    .categories-panel{
        position:absolute;
        top:100%;
        left:0;

      
    
        /* width:1220px; */
    
        /* background:transparent; */
       
        /* box-shadow:0 8px 25px rgba(0,0,0,.15); */
    
        opacity:0;
        visibility:hidden;
        transform:translateY(-20px);
    
        transition:
            opacity .25s ease-out,
            transform .25s ease-out,
            visibility .25s;



            top: 8px;              /* small gap from header */
    border-radius: 0 6px 6px 6px;
    /* box-shadow: 0 12px 40px rgba(0,0,0,.22); */
    overflow: hidden; 


    width: max-content; 
    }




.categories-drawer.dc-active .categories-panel{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}


/* Layout */


.dc-mega-sidebar{
    flex:0 0 auto;
    width: fit-content;       /* was: 290px */
    min-width: 220px;         /* keeps it from getting too narrow */
    background:#7A171B;
    display:flex;
    flex-direction:column;


    /* background: #7A171B; */
}

.dc-mega-categories{
    display:flex;
    align-items:flex-start;  

    width: fit-content;
}


.dc-mega-parent{
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:46px;
    padding:0 18px;
    white-space: nowrap;      /* prevents label wrapping now that width is auto */
    color:#FFFFFF;
    cursor:pointer;
    border-bottom:1px solid rgba(255,255,255,.08);
    font-size:14px;
    font-weight:600;
    transition: background .18s, color .18s, padding-left .18s;
    
}

.dc-mega-parent:hover,
.dc-mega-parent.dc-active{
    background:#FFFFFF;
    color:#9B1E22;
    /* padding-left:24px; */
    text-decoration: none;

}


.dc-mega-arrow{
/* 
    opacity:.45;
    transition:.18s; */


     display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -12px -14px -12px 8px; /* pulls the box out to the row's edge without shifting layout */
    flex-shrink: 0;
    font-size: 20px;
}

.dc-mega-parent:hover .dc-mega-arrow,
.dc-mega-parent.dc-active .dc-mega-arrow{
    opacity:1;
    transform:translateX(2px);

}


/* RIGHT AREA */

.dc-mega-content{
    
  width: auto;
  display: inline-flex;   /* ← hugs the active panel's content, no leftover gutter */
  height: auto;

    background:#FFFFFF;
    box-shadow:0 8px 25px rgba(0,0,0,.15);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateX(15px);

    position:relative;
    /* min-height:520px; */
}

.dc-mega-content.show{
    /* display:block; */
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(0);
}

/* PANEL */

.dc-mega-panel{
   

 position: absolute;
    inset: 0;
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(15px);
    transition: opacity .25s ease-out, transform .25s ease-out, visibility .25s ease-out;
    pointer-events: none; 

}

.dc-mega-panel.dc-active{

    position: relative;
    inset: auto;
    display: grid;                                            /* ← was: flex + flex-wrap */
    grid-template-columns: repeat(4, 200px);                   /* ← fallback; each panel overrides via inline style with its real column count */
    align-items: start;
    gap: 18px 30px;
    padding: 20px 32px;
    width: max-content;
    height: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);

    }



/* Column */

.dc-mega-column{

    width: 100%;   /* fills its grid cell — was: flex:1 1 180px; max-width:200px; min-width:150px; */

}

.dc-mega-column h4{

    margin-bottom:10px;

    font-size:14px;

    font-weight:700;

    color:#12181E;

}

.dc-mega-column h4 a{

    color:var(--primary) !important;

    text-decoration:none !important;
    position:relative;
    display:inline-block;
    padding-bottom:2px;
    background-image:linear-gradient(90deg, var(--primary-dark) 0%, #EADAD6 100%);
    background-repeat:no-repeat;
    background-position:0 100%;
    background-size:0% 2px;
    transition:background-size .28s cubic-bezier(.4,0,.2,1), color .18s;

}

.dc-mega-column h4 a:hover{

    color:var(--primary-dark) !important;
    background-size:100% 2px;

}

.dc-mega-column ul{

    margin:0;

    padding:0;

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:8px;

}

.dc-mega-column ul li a{

    text-decoration:none !important;

    color:var(--text-light) !important;

    font-size:13px;

    position:relative;
    display:inline-block;
    padding-bottom:2px;
    background-image:linear-gradient(90deg, var(--primary-dark) 0%, #EADAD6 100%);
    background-repeat:no-repeat;
    background-position:0 100%;
    background-size:0% 2px;
    transition:background-size .28s cubic-bezier(.4,0,.2,1), color .18s;

}

.dc-mega-column ul li a:hover{

    color:var(--primary) !important;
    background-size:100% 2px;

}


/* Overlay */

.categories-overlay{
    position:absolute;
    inset:0;
    z-index:-1;
    background:rgba(0,0,0,0);
    cursor:pointer;
}

.categories-drawer.dc-active .categories-overlay{
    background:rgba(0,0,0,.2);
}


/* Search Bar */

.search-form-outer{

    flex:1;

    /* margin-left:24px; */

}

/* Row 1 search bar: centered between logo/promo and account actions,
   like the NeweggBusiness header. */
.header-row-1__search{
    max-width: 620px;
    margin: 0 auto;
}

@media (max-width: 1200px){
    .header-row-1__search{
        max-width: 400px;
    }
}

.search-form-outer .dc-search-form{

    display:flex;

    align-items:stretch;

    width:100%;

    border:1.5px solid var(--border);

    border-radius:6px;

    overflow:hidden;

    background:#FFFFFF;

    transition:border-color .15s, box-shadow .15s;

}

.search-form-outer .dc-search-form:focus-within{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(155,30,34,.12);

}

.dc-search-form .search-cat-select{

    flex:0 0 92px;

    min-width:0;

    height:46px;

    border:none;

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

    padding:0 10px;

    font-size:13px;

    font-weight:600;

    color:var(--text);

    background:#F7F5F3;

    cursor:pointer;

}

.dc-search-form .search-cat-select:focus{

    outline:none;

}

.dc-search-form .search-input-field{

    flex:1;

    min-width:0;

    height:46px;

    border:none;

    padding:0 16px;

    font-size:14px;

    background:transparent;

}

.dc-search-form .search-input-field:focus{

    outline:none;

}

.dc-search-form .search-submit-btn{

    flex-shrink:0;

    width:52px;

    height:46px;

    border:none;

    background:var(--primary);

    color:#FFFFFF;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:background .15s;

}

.dc-search-form .search-submit-btn:hover{

    background:var(--primary-dark);

}

.dc-search-form .dashicons-search{

    font-size:20px;

    width:20px;

    height:20px;

}


/*====================================================
=                 ROW 3                             =
====================================================*/
.header-row-2 {
    background: #0D0D0D;
 
}


.header-row-3{

    background:#0D0D0D;
    border-top: 1px solid rgba(255, 255, 255, 0.1);

}

.header-row-3__inner{

    max-width: 1280px;
    display: flex;
    align-items: center;
    min-height: 36px;
    margin: 0px auto;
    padding: 0px 16px 0px 219px;
    gap: 0px;
}

.subnav-tagline{

    margin-left: 20px;

    color: #F0F0F0;
    font-size: 13px;
    font-style: italic;
    font-weight: 700;
    white-space: nowrap;

}

@media (max-width: 1150px){
    .subnav-tagline{ display: none; }
}

.subnav-links{

    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin-left: auto;
    gap: 0px;

}


/*====================================================
=          B2B ACCOUNTS NAV DROPDOWN                 =
====================================================*/

.subnav-dropdown{
    position: relative;
}

.subnav-dropdown__toggle{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    border-radius: 4px;
    color: rgba(255,255,255,.9);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-family: inherit;
    padding: 8px 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, background .15s;
}

.subnav-dropdown__toggle:hover,
.subnav-dropdown:hover .subnav-dropdown__toggle,
.subnav-dropdown:focus-within .subnav-dropdown__toggle{
    color: #FFFFFF;
    background: rgba(255,255,255,.08);
}

.subnav-dropdown__chev{
    font-size: 10px;
    line-height: 1;
    transition: transform .18s ease;
}

.subnav-dropdown:hover .subnav-dropdown__chev,
.subnav-dropdown:focus-within .subnav-dropdown__chev{
    transform: rotate(180deg);
}

.subnav-dropdown__panel{
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 240px;
    background: #0D0D0D;
    
    border-radius: 6px;
    box-shadow: var(--shadow);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .15s, transform .15s, visibility .15s;
    z-index: 200;
}

.subnav-dropdown:hover .subnav-dropdown__panel,
.subnav-dropdown:focus-within .subnav-dropdown__panel{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.subnav-dropdown__panel a{
    display: block;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.subnav-dropdown__panel a:hover{
    background: #262626;
    color: var(--primary);
}

.subnav-dropdown__panel a + a{
    margin-top: 2px;
}

.subnav-links a{

    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    padding: 8px 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;

}

.subnav-links a:hover{

    color: white;

}

.subnav-links__hotdeals{

    color: var(--white) !important;
    background: var(--accent);
    font-weight: 700;
    margin-left: 4px;

}

.subnav-links__hotdeals:hover{

    background: var(--accent-dark);
    color: var(--white) !important;

}


/*====================================================
=                LARGE SCREENS                      =
====================================================*/

/* @media(min-width:1400px){

    .mega-panel{

        grid-template-columns:repeat(4,1fr);

    }

} */


/*====================================================
=                LAPTOP                             =
====================================================*/

@media(max-width:1200px){

    .categories-panel{

        width:96%;

    }

    /* .mega-panel{

        grid-template-columns:repeat(4,1fr);

    } */

}


/*====================================================
=         RESPONSIVE HEADER VISIBILITY
====================================================*/

/* Desktop by default */
.mobile-header{
    display:none;
}

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

    .header-utility-bar,
    .header-row-1,
    .header-row-2{
        display:none !important;
    }

    .mobile-header{
        display:block;
        width:100%;
        background: #7A171B !important;
    }
}

/* Desktop */
@media (min-width:992px){

    .mobile-header{
        display:none !important;
    }

    .header-utility-bar,
    .header-row-1,
    .header-row-2{
        display:block;
    }
}
/*====================================================
=                MOBILE HEADER
====================================================*/
/* NOTE: This block previously styled .mobile-header, .mobile-header__top,
   .mobile-header__logo img, .mobile-header__icons, .mobile-cart-badge,
   .mobile-wishlist-badge and .mobile-header__search directly — all of
   which are ALSO styled (with different values) in style.css's
   "MOBILE HEADER v2" section for the current header.php markup.
   Same selectors, two files, two different values = the browser was
   picking whichever file happened to load last, which is why the top
   bar padding/search sizing/badge sizing looked inconsistent and the
   search bar felt squeezed. Removed here so style.css's mheader2
   system (dcs-mheader2-*, mobile-header__top, mobile-header__bar2) is
   the single source of truth. The show/hide breakpoint rules above
   (.mobile-header display:none/block at 991/992px) still apply and
   are unaffected — only the visual styling was deleted here. */

/*====================================================
=          GLOBAL SEARCH FORM
====================================================*/

.dc-search-form{
    display:flex;
    align-items:stretch;
    width:100%;
}

.dc-search-form .search-cat-select{

    flex:0 0 72px;

    border:0;

    border-right:1px solid #E2E2E2;

    padding:0 8px;

    height:46px;

    background:#F4EFEB;

}

.dc-search-form .search-input-field{

    flex:1;

    min-width:0;

    border:0;

    padding:0 14px;

    height:46px;

    background:#FFFFFF;

}

.dc-search-form .search-submit-btn{

    width:52px;

    flex-shrink:0;

    border:0;

    background:#9B1E22;

    color:#FFFFFF;

}

/* MOBILE */

@media(max-width:991px){

.dc-search-form{

    width:100%;

}

.dc-search-form .search-cat-select{

    flex:0 0 58px;

    height:42px;

    font-size:13px;
    display: none;

}

.dc-search-form .search-input-field{

    height:42px;

    font-size:14px;

}

.dc-search-form .search-submit-btn{

    width:44px;

    height:46px;

}

}

/*====================================================
=         MOBILE SEARCH ONLY
====================================================*/

@media (max-width:991px){

    .mobile-search-wrapper{
    
        width:100%;
    
        padding:0px 0px 0px;
    
        box-sizing:border-box;
    
    }
    
    .mobile-search-wrapper .dc-search-form{
    
        width:100%;
    
        display:flex;
    
        align-items:center;
    
    }
    
  

        .mobile-search-wrapper .search-input-field{
        
            border-radius:4px 0 0 4px;
        
        }
        
        .mobile-search-wrapper .search-submit-btn{
        
            width:46px;
            border-radius:0 4px 4px 0;
        
        }
        
        }

/*====================================================
=        CATEGORIES DRAWER - MOBILE
====================================================*/

/* Hidden on desktop; only relevant once the drawer
   switches to its full-screen mobile layout */
.dc-mega-mobile-header{
    display:none;
}

@media (max-width:991px){

    /* The drawer gets moved to <body> by JS on mobile so
       it is no longer trapped inside .header-row-2, which
       is display:none on this breakpoint */

    .categories-drawer{
        position:fixed;
        inset:0;
        z-index:99999;
        width:100%;
        height:100%;
        background:rgba(0,0,0,.3);
    }

    .categories-overlay{
        position:fixed;
        inset:0;
        z-index:0;
        background:transparent;
    }

    .categories-panel{
        position:fixed;
        top:0;
        left:0;
        width:78%;
        max-width:300px;
        height:100%;
        height:100dvh;
        background:#FFFFFF;
        border-radius:0;
        opacity:1;
        visibility:visible;
        transform:translateX(-100%);
        transition:transform .25s ease-out;
        display:flex;
        flex-direction:column;
        z-index:1;
        box-shadow:2px 0 20px rgba(0,0,0,.2);
    }

    .categories-drawer.dc-active .categories-panel{
        transform:translateX(0);
    }

    /* Drawer header bar (Back / Title / Close) */

    .dc-mega-mobile-header{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:14px 16px;
        background:var(--primary-dark);
        color:#FFFFFF;
        flex-shrink:0;
        gap:10px;
    }

    .dc-mega-back{
        display:none;
        align-items:center;
        gap:4px;
        background:none;
        border:none;
        color:#FFFFFF;
        font-size:14px;
        font-weight:600;
        cursor:pointer;
        padding:0;
        white-space:nowrap;
    }

    .dc-mega-back .dashicons{
        font-size:18px;
        width:18px;
        height:18px;
    }

    .dc-mega-mobile-header.dc-show-back .dc-mega-back{
        display:flex;
    }

    .dc-mega-mobile-title{
        flex:1;
        text-align:center;
        font-size:15px;
        font-weight:700;
    }

    .dc-mega-close{
        background:none;
        border:none;
        color:#FFFFFF;
        font-size:24px;
        line-height:1;
        cursor:pointer;
        padding:0;
    }

    /* Sidebar (category list) + content (subcategory panel) */

    .dc-mega-categories{
        position:relative;
        flex:1;
        width:100%;
        align-items:stretch;   /* overrides the desktop rule's align-items:flex-start
                                   (line ~724), which otherwise leaks through on mobile
                                   and stops the sidebar from stretching to fill the
                                   panel — leaving blank white space below the list */
        overflow:hidden;
    }

    .dc-mega-sidebar{
        flex:0 0 auto;
        width: 100%;               /* fills the panel — was: fit-content, which left a
                                       blank gutter between the list and the panel's
                                       fixed 85%/360px width on mobile */
        min-width: 220px;
        background:#7A171B;
        display:flex;
        flex-direction:column;
        overflow-y:auto;
        /* -webkit-overflow-scrolling: touch removed — same iOS Safari
           compositing bug fixed on the homepage carousels: this property
           on a scrolling container with rounded/overflow-hidden, transitioning
           children (the row highlight states below) can paint a solid black
           bar over the content during/after scroll. Not needed on modern iOS. */
    }
    .dc-mega-content{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        overflow-y:auto;
        /* -webkit-overflow-scrolling: touch removed — see note above */
        box-shadow:none;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translateX(100%);
        transition:transform .25s ease-out;
    }

    .dc-mega-content.show{
        transform:translateX(0);
    }

    .dc-mega-panel{
        position:static;
        inset:auto;
        display:none;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:none;
        width:100%;
        max-width:100%;
    }

    .dc-mega-panel.dc-active{
        display:flex;
        flex-direction:column;
        flex-wrap:nowrap;
        width:100%;
        max-width:100%;
        padding:18px 16px;
        gap:24px;
    }

    .dc-mega-column{
        width:100%;
    }

    /* Lock background scroll while the mobile drawer is open */
    body.drawer-open{
        overflow:hidden;
    }

}
@media (max-width: 991px) {
    .dc-mega-arrow{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: -12px -14px -12px 8px;
    }
}

/* home css */

*{box-sizing:border-box}
html{margin:0;padding:0;max-width:100%;overflow-x:hidden}
body{margin:0;padding:0;max-width:100%}
body{font-family:'Inter',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto;display:block}
table{max-width:100%}
pre,code{white-space:pre-wrap;word-break:break-word}
/* PHP notice/warning/error dumps are unstyled raw text with long file
   paths and stack traces — without this they force the page wider than
   the viewport and are what was causing the homepage scrollbar. */
body > table,
body > b,
.wp-die-message{
  max-width:100vw;
  overflow-x:auto;
  word-break:break-word;
  white-space:pre-wrap;
  display:block;
}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-dark)}
h1,h2,h3,h4{margin:0 0 .3em;line-height:1.2;letter-spacing:-.01em}
h1{font-size:clamp(1.5rem,4vw,3.25rem);font-weight:900}
h2{font-size:clamp(1.5rem,2.5vw,2rem);font-weight:800}
.dcs-container{max-width:1200px;margin:0 auto;padding:0 20px}
.dcs-text-center{text-align:center}

/* Buttons */
.dcs-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.75rem 1.25rem;border-radius:8px;font-weight:700;font-size:.9rem;border:2px solid transparent;cursor:pointer;transition:all .18s ease;text-decoration:none;line-height:1}
.dcs-btn:hover{text-decoration:none}
.dcs-btn--accent{background:var(--accent);color:var(--accent-fg)}
.dcs-btn--accent:hover{background:var(--accent-dark);color:var(--accent-fg)}
.dcs-btn--ghost{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.4)}
.dcs-btn--ghost:hover{background:rgba(255,255,255,.1);color:#FFFFFF}
.dcs-btn--outline{background:transparent;color:var(--primary);border-color:var(--primary)}
.dcs-btn--outline:hover{background:var(--primary);color:#FFFFFF}

.dcs-eyebrow{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:.4rem}
.dcs-eyebrow--on-dark{color:var(--accent)}

/* Header */
.dcs-header{background:#FFFFFF;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40}
.dcs-topbar{background:var(--primary-dark);color:#FFFFFF;font-size:.78rem}
.dcs-topbar__row{display:flex;justify-content:space-between;padding:.45rem 20px;flex-wrap:wrap;gap:.5rem}
.dcs-topbar__contact a{color:#FFFFFF;margin-left:1rem}
.dcs-header__row{display:flex;align-items:center;gap:1.25rem;padding:.9rem 20px;flex-wrap:wrap}
.dcs-brand{display:inline-flex;align-items:center;gap:.5rem;font-weight:900;font-size:1.25rem;color:var(--primary-dark)}
.dcs-brand__mark{background:var(--primary);color:#FFFFFF;border-radius:8px;padding:.15rem .5rem}
.dcs-search{display:flex;flex:1;min-width:220px;background:var(--bg);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.dcs-search input{flex:1;border:0;padding:.7rem .9rem;background:transparent;font:inherit;outline:none}
.dcs-search button{border:0;padding:0 1rem;background:var(--primary);color:#FFFFFF;cursor:pointer}
.dcs-nav__list{list-style:none;display:flex;gap:1.1rem;margin:0;padding:0}
.dcs-nav__list a{color:var(--text);font-weight:600;font-size:.92rem}
.dcs-nav__list a:hover{color:var(--primary)}

/* Hero */
.dcs-hero{background:linear-gradient(135deg,var(--primary-dark),var(--primary) 60%,var(--primary-dark));color:#FFFFFF;position:relative;overflow:hidden;padding:56px 0}
.dcs-hero::before,.dcs-hero::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(80px)}
.dcs-hero::before{background:rgba(206,0,0,.25);top:-160px;right:-120px}
.dcs-hero::after{background:rgba(255,255,255,.08);bottom:-160px;left:-100px}
.dcs-hero__grid{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.dcs-hero em{font-style:normal;color:var(--accent)}
.dcs-hero__copy p{color:rgba(255,255,255,.85);max-width:560px}
.dcs-hero__cta{display:flex;gap:.75rem;margin:1.4rem 0;flex-wrap:wrap}
.dcs-hero__badges{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;max-width:520px;color:rgba(255,255,255,.9);font-size:.85rem}
.dcs-hero__tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.dcs-hero__tiles a{display:block;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:1.1rem;color:#FFFFFF}
.dcs-hero__tiles a:hover{background:rgba(255,255,255,.12);border-color:var(--accent)}
.dcs-hero__tiles span{font-size:1.8rem;display:block;margin-bottom:.35rem}
.dcs-hero__tiles strong{display:block;font-size:.95rem}
.dcs-hero__tiles em{display:block;font-style:normal;color:rgba(255,255,255,.65);font-size:.78rem;margin-top:.15rem}

/* Section basics */
.dcs-section{padding:56px 0;background:var(--bg)}
.dcs-section__head{max-width:640px;margin:0 auto 2.5rem}
.dcs-section__head p{color:var(--muted);margin-top:.5rem}

/* Categories */
.dcs-cats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.5rem}
.dcs-cats__item{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center;color:var(--text)}
.dcs-cats__icon{width:84px;height:84px;border-radius:50%;background:#F4EFEB;display:grid;place-items:center;font-size:2rem;transition:all .2s;border:2px solid transparent}
.dcs-cats__item:hover .dcs-cats__icon{background:#EADAD6;border-color:var(--primary)}
.dcs-cats__label{font-size:.85rem;font-weight:700}
.dcs-cats__item:hover .dcs-cats__label{color:var(--primary)}

/* Product carousel */
.dcs-carousel{padding:56px 0;background:#FFFFFF;overflow:hidden}
.dcs-carousel.is-red{background:linear-gradient(180deg, #FCFAF8, #FFFFFF); }
.dcs-carousel__head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.dcs-carousel__body{position:relative;padding:0 53px}
.dcs-carousel__viewport{overflow:hidden}
.dcs-carousel__track{display:flex;gap:1.5rem;transition:transform .5s cubic-bezier(.22,.61,.36,1);will-change:transform}
.dcs-carousel__foot{display:flex;justify-content:center;margin-top:2rem}

.dcs-carousel__btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:#FFFFFF;box-shadow:0 6px 20px rgba(15,23,42,.14);cursor:pointer;font-size:1.3rem;line-height:1;color:var(--primary-dark);display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:2}
.dcs-carousel__btn:hover{background:var(--primary);color:#FFFFFF;border-color:var(--primary);box-shadow:0 8px 22px rgba(206,0,0,.3);transform:translateY(-50%) scale(1.08)}
.dcs-carousel__btn:active{transform:translateY(-50%) scale(.94)}
.dcs-carousel__btn--prev{left:0}
.dcs-carousel__btn--next{right:0}

/* Card */
.dcs-card{flex:0 0 calc(25% - 1.125rem);min-width:0;background:#FFFFFF;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;position:relative;display:flex;flex-direction:column;transition:all .2s}
.dcs-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--primary)}
.dcs-card__badge{position:absolute;top:.75rem;left:.75rem;background:var(--primary);color:#FFFFFF;font-size:.68rem;font-weight:800;letter-spacing:.08em;padding:.25rem .6rem;border-radius:99px;z-index:1}
.dcs-carousel.is-red .dcs-card__badge{background:var(--brand-red)}
.dcs-card__media{aspect-ratio:1/1;padding-bottom:2px ;padding:1.5rem;overflow:hidden}
.dcs-card__media a{display:block;width:100%;height:100%;cursor:pointer}
.dcs-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.dcs-card:hover .dcs-card__media img{transform:scale(1.05)}
.dcs-card__body{padding:1rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.dcs-card__brand{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dcs-card__title{font-size:.9rem;font-weight:700;line-height:1.35;min-height:2.5em;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.dcs-card__title a{color:inherit;text-decoration:none !important;cursor:pointer}
.dcs-card__title a:hover{color:var(--primary);text-decoration:none !important}
.dcs-carousel.is-red .dcs-card__title a:hover{color:var(--brand-red)}
.dcs-card__price{display:flex;align-items:baseline;gap:.5rem;     font-size: 18px;
    font-weight: 800;
    color: var(--red);}
.dcs-card__price-now{font-size:1.1rem;font-weight:900;color:var(--primary-dark)}
.dcs-carousel.is-red .dcs-card__price-now{color:var(--brand-red)}
.dcs-card__price-old{font-size:.8rem;color:var(--muted);text-decoration:line-through}
.dcs-card .dcs-btn{margin-top:auto;justify-content:center}

/* Brands */
.dcs-brands{background:var(--sidebar);color:#FFFFFF;padding:64px 0}
.dcs-brands h2{color:#FFFFFF}
.dcs-brands p{color:rgba(255,255,255,.7)}
.dcs-brands__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.dcs-brands__item{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:1.4rem;color:#FFFFFF;transition:all .2s;display:block}
.dcs-brands__item:hover{background:rgba(255,255,255,.1);border-color:var(--accent);color:#FFFFFF}
.dcs-brands__item strong{display:block;font-size:1.15rem;font-weight:900}
.dcs-brands__item em{display:block;font-style:normal;color:rgba(255,255,255,.6);font-size:.78rem;margin:.4rem 0 1rem}
.dcs-brands__item span{color:var(--accent);font-weight:800;font-size:.78rem}

/* RFQ */
.dcs-rfq{background:linear-gradient(90deg,var(--primary-dark),var(--primary));color:#FFFFFF;padding:56px 0;position:relative;overflow:hidden}
.dcs-rfq::before{content:"";position:absolute;top:-120px;right:-60px;width:360px;height:360px;border-radius:50%;background:rgba(206,0,0,.25);filter:blur(80px)}
.dcs-rfq__grid{position:relative;display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center}
.dcs-rfq h2{color:#FFFFFF}
.dcs-rfq p{color:rgba(255,255,255,.85)}
.dcs-rfq__cta{display:flex;gap:.75rem;flex-wrap:wrap}

/* Testimonials — infinite marquee, slow */
.dcs-testimonials{padding:56px 0;background:#FFFFFF}
.dcs-marquee{overflow:hidden;position:relative;margin-top:2rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#0D0D0D 60px,#0D0D0D calc(100% - 60px),transparent);
          mask-image:linear-gradient(90deg,transparent,#0D0D0D 60px,#0D0D0D calc(100% - 60px),transparent)}
.dcs-marquee__track{display:flex;gap:1.25rem;width:max-content;animation:dcs-scroll 90s linear infinite}
.dcs-marquee:hover .dcs-marquee__track{animation-play-state:paused}
.dcs-testimonial{flex:0 0 360px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:1.2rem;margin:0}
.dcs-testimonial blockquote{margin:0 0 1rem;font-size:.95rem;color:var(--text);line-height:1.5}
.dcs-testimonial figcaption{display:flex;align-items:center;gap:.75rem}
.dcs-testimonial__avatar{width:40px;height:40px;border-radius:50%;background:var(--primary);color:#FFFFFF;display:grid;place-items:center;font-weight:800;font-size:.85rem}
.dcs-testimonial strong{display:block;font-size:.9rem}
.dcs-testimonial em{display:block;font-style:normal;font-size:.78rem;color:var(--muted)}
@keyframes dcs-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Partners marquee */
.dcs-partners{padding:32px 0;background:var(--bg)}
.dcs-partners__mask{border:1px solid var(--border);background:#FFFFFF;border-radius:12px;overflow:hidden;padding:14px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#0D0D0D 40px,#0D0D0D calc(100% - 40px),transparent);
          mask-image:linear-gradient(90deg,transparent,#0D0D0D 40px,#0D0D0D calc(100% - 40px),transparent)}
.dcs-partners__track{display:flex;gap:.75rem;width:max-content;animation:dcs-scroll 60s linear infinite}
.dcs-partners__chip{background:rgba(206,0,0,.06);border:1px solid rgba(206,0,0,.15);color:var(--primary-dark);font-weight:700;font-size:.85rem;padding:.5rem 1rem;border-radius:8px;white-space:nowrap}

/* Footer */
.dcs-footer{background:#0D0D0D;color:#E2E2E2;padding:56px 0 0}
.dcs-footer__grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:1.75rem}
.dcs-footer h4{color:#FFFFFF;font-size:.95rem;margin-bottom:1rem}
.dcs-footer ul{list-style:none;padding:0;margin:0}
.dcs-footer ul li{margin-bottom:.5rem}
.dcs-footer ul a{color:#E2E2E2;font-size:.88rem}
.dcs-footer ul a:hover{color:#FFFFFF}
.dcs-footer__brand{max-width:340px}
.dcs-footer__brand .dcs-brand{color:#FFFFFF;margin-bottom:1rem}
.dcs-footer__desc{color:rgba(255,255,255,.7);font-size:.9rem;line-height:1.6}

.dcs-footer__subscribe h4{margin-bottom:0.5rem;font-size:1.05rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#FFFFFF}
.dcs-footer__subscribe > p{color:#6E6E6E;font-size:.9rem;line-height:1.6;margin-bottom:1.2rem}

.dcs-footer__contact{display:flex;flex-direction:column;gap:.6rem; padding-top: 20px; margin-bottom:1.4rem;padding-bottom:1.25rem;border-bottom:1px solid rgba(255,255,255,.1);font-size:.95rem}
.dcs-footer__contact--no-rule{border-bottom:none;padding-bottom:0;margin-bottom:1.1rem}
.dcs-footer__contact a,
.dcs-footer__contact .dcs-footer__location{display:inline-flex;align-items:center;gap:.5rem;color:#E2E2E2;font-weight:700;text-decoration:none!important;transition:color .18s}
.dcs-footer__contact a:hover{color:#FFFFFF;text-decoration:none!important}
.dcs-footer__contact-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px;color:var(--accent);font-size:1rem;background:none;border-radius:0;transition:none}
.dcs-footer__contact a:hover .dcs-footer__contact-icon{background:none;color:var(--accent)}
.dcs-footer__location{color:#E2E2E2;font-weight:600;font-size:.9rem}
.dcs-footer__location-icon{display:inline-flex;flex-shrink:0;color:var(--accent)}

.dcs-subscribe{display:flex; gap:9px;}
.dcs-subscribe__field{display:flex;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:0 .8rem;transition:border-color .18s,background .18s;     padding-bottom: 26px;
}
.dcs-subscribe__field:focus-within{border-color:var(--accent);background:rgba(255,255,255,.1)}
.dcs-subscribe input{flex:1;min-width:0;background:transparent;border:0;color:#FFFFFF;padding:.55rem 0;font:inherit;font-size:.85rem;outline:none}
.dcs-subscribe input::placeholder{color:rgba(255,255,255,.4)}
.dcs-subscribe button{flex-shrink:0;width:38px;background:var(--accent);color:var(--accent-fg);border:0;border-radius:8px;display:grid;place-items:center;cursor:pointer;transition:background .18s,transform .18s}
.dcs-subscribe button svg{width:15px;height:15px}
.dcs-subscribe button:hover{background:var(--accent-dark);transform:translateY(-1px)}
.dcs-subscribe button:active{transform:translateY(0)}
.dcs-subscribe__msg{font-size:.8rem;color:rgba(255,255,255,.75)}
.dcs-subscribe__msg.is-error{color:#fca5a5}
.dcs-subscribe__msg.is-ok{color:#86efac}

.dcs-footer__social{display:flex;gap:.6rem}
.dcs-footer__social a{width:34px;height:32px;border-radius:10px;background:rgba(255,255,255,.08);color:#FFFFFF;display:grid;place-items:center;transition:all .2s}
.dcs-footer__social a:hover{background:var(--accent);color:var(--accent-fg);transform:translateY(-2px)}
.dcs-footer__bottom{margin-top:3rem;border-top:1px solid rgba(255,255,255,.08);padding:1rem 0;font-size:.82rem;color:rgba(255,255,255,.6)}
.dcs-footer__bottom .dcs-container{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.dcs-footer__bottom a{color:#E2E2E2}

/* Responsive */
@media (max-width:1024px){
  .dcs-hero__grid{grid-template-columns:1fr}
  .dcs-hero__tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dcs-cats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dcs-brands__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dcs-footer__grid{grid-template-columns:1fr 1fr;gap:2rem}
  .dcs-card{flex-basis:calc(33.333% - 1rem)}
}
@media (max-width:768px){
  .dcs-cats{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
  .dcs-cats__icon{width:68px;height:68px;font-size:1.6rem}
  .dcs-brands__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dcs-rfq__grid{grid-template-columns:1fr}
  .dcs-card{flex-basis:calc(50% - .75rem)}
  .dcs-testimonial{flex-basis:300px}
  .dcs-header__row{gap:.75rem}
  .dcs-nav__list{width:100%;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
  .dcs-carousel__body{padding:0 38px}
  .dcs-carousel__btn{width:34px;height:34px;font-size:1.05rem}
  .dcs-footer__subscribe h4{margin-bottom:1.5rem;         margin-top: 1.5rem;
  }

  /* Shorter, denser carousel cards on phone: less padding around the
     image and smaller heading/badge/button type. */
  .dcs-card__media{padding:1rem}
  .dcs-card__body{padding:.7rem;gap:.3rem}
  .dcs-card__title{font-size:.82rem;min-height:2.2em}
  .dcs-card__badge{font-size:.6rem;padding:.2rem .55rem;top:.55rem;left:.55rem}
  .dcs-card__brand{font-size:.65rem}
  .dcs-card__price{font-size:15px}
  .dcs-card__price-now{font-size:.95rem}
  .dcs-btn{font-size:.78rem;padding:.55rem .9rem}
}
@media (max-width:520px){
  .dcs-card{flex-basis:100%}
  .dcs-brands__grid{grid-template-columns:1fr 1fr}
  .dcs-footer__grid{grid-template-columns:1fr}
  .dcs-hero__badges{grid-template-columns:1fr}
  .dcs-topbar__contact a{margin-left:.5rem;font-size:.75rem}
  .dcs-container{padding:0 14px}
  .dcs-carousel{padding:40px 0}
  .dcs-carousel__body{padding:0 30px}
  .dcs-carousel__btn{width:30px;height:30px;font-size:1rem}
  .dcs-carousel__btn--prev{left:-4px}
  .dcs-carousel__btn--next{right:-4px}

  /* Full-width single card at this size: cap the image area so the
     card itself stays short instead of a tall 1:1 square photo. */
  .dcs-card__media{aspect-ratio:16/11;padding:.9rem}
  .dcs-card__body{padding:.65rem;gap:.28rem}
  .dcs-card__title{font-size:.8rem;min-height:2em}
  .dcs-card__badge{font-size:.58rem;padding:.18rem .5rem}
  .dcs-btn{font-size:.75rem;padding:.5rem .85rem}
}