/**
 * BOX Partners Global Styles - Marketing Tools
 * =============================================
 */

/* ==========================================================================
   HERO / IMAGE SECTION
   ========================================================================== */

.our-image {
    width: 100% !important;
}

.our-image img {
    width: 100% !important;
    height: auto !important;
}

.img-fluid {
    max-width: 100% !important;
    height: auto !important;
}

.w-100 {
    width: 100% !important;
}


/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */

.clearfix::after {
    display: block !important;
    clear: both !important;
    content: "" !important;
}

.content {
    background-color: #fff !important;
}

.m-l-30 {
    margin-left: 30px !important;
}

.m-b-none {
    margin-bottom: 0px !important;
}

.mt-5 {
    margin-top: 3rem !important;
}


/* ==========================================================================
   MARKETING INTRO SECTION
   ========================================================================== */

.marketing-intro {
    position: relative !important;
    padding: 60px 80px !important;
}


/* ==========================================================================
   MARKETING CONTENT BLOCKS
   ========================================================================== */

.marketingMainCnt {
    display: flex !important;
    background-color: #fff !important;
    padding-bottom: 0 !important;          /* use margin for row spacing instead */
    margin: 0 auto 40px !important;        /* centered row, 40px gap under each */
}

/* Reduce gap directly under intro paragraph if needed later
.marketing-intro > .marketingMainCnt:first-child {
    margin-bottom: 30px;
}
*/

.m-hub-img .img-cnt,
.wb-link-img .img-cnt {
    margin-left: 16px !important;
}


/* ==========================================================================
   TEXT CONTENT CONTAINER
   ========================================================================== */

.text {
    width: 100% !important;
}

.cont-cnt {
    width: 50% !important;
    float: right !important;
    padding: 1em !important;
}

.cont-cnt p {
    font-family: acumin-pro !important;
    font-size: 17px !important;
    font-weight: 100 !important;
    color: #626262 !important;
    margin-bottom: 5px !important;
    line-height: 26px !important;
}

/* Kill the extra top offset from .mt-5 inside this layout */
.marketing-intro .marketingMainCnt .cont-cnt.mt-5 {
    margin-top: 0 !important;
}


/* ==========================================================================
   IMAGE CONTAINER
   ========================================================================== */

.img-cnt {
    width: 50% !important;
    float: left !important;
    padding: 1em !important;
    margin-left: 16px !important;
}

.image-side {
    width: 100% !important;
}

.image-side img {
    width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
}


/* ==========================================================================
   HEADINGS
   ========================================================================== */

.heading {
    font-size: 30px !important;
    line-height: 32px !important;
    color: #800000 !important;
    font-family: acumin-pro-condensed, sans-serif !important;
    font-weight: 700 !important;
}

.heading .title {
    font-family: acumin-pro-condensed !important;
    color: #595959 !important;
    font-weight: 500 !important;
    font-size: 32px !important;
    line-height: 44px !important;
    text-align: justify !important;
    display: block;
}

/* Intro paragraph under hero (the long sentence) */
.marketing-tools-intro {
    font-family: acumin-pro-condensed !important;
    color: #595959 !important;
    font-weight: 500 !important;
    padding: 10px 0 !important;
    font-size: 32px !important;
    line-height: 44px !important;
    text-align: justify !important;
    display: block !important;
}

/* Subheader - now used on h2 elements */
.subheader,
h2.subheader {
    font-family: acumin-pro-condensed !important;
    color: #CE0019 !important;
    font-size: 36px !important;
    font-weight: 400 !important;
    line-height: 46px !important;
    margin: 0 0 30px 0 !important;
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

.button,
.button-lg {
    font-family: acumin-pro-condensed !important;
    color: #CE0019 !important;
    text-decoration: none !important;
    font-size: 28px !important;
    text-transform: uppercase !important;
    display: inline-block !important;
}

.b-btn {
    font-family: acumin-pro-condensed !important;
    color: #CE0019 !important;
    /* This keeps your arrow image */
    background: url(https://cdn.boxpartners.com/siteimages/boxpartners/css/icons8-right-48.png) no-repeat;
    
    /* 1. FORCE THE ARROW TO CENTER */
    background-position: right 45% !important; 
    
    background-size: 19px !important;
    text-decoration: none !important;
    font-size: 28px !important;
    text-transform: uppercase !important;
    width: fit-content;
    
    /* 2. ENABLE FLEXBOX (Just like the inline code) */
    display: inline-flex !important; 
    align-items: center !important;
    
    /* 3. FIX THE PADDING (Crucial: Top and Bottom MUST match) */
    /* We use !important to defeat MarketingTools.css which is setting bottom to 8px */
    padding: 4px 25px 4px 0px !important;

    /* 4. TIGHTEN LINE HEIGHT (Just like the inline code) */
    /* This removes invisible font space so the math works perfectly */
    line-height: 1 !important; 
}

.b-btn .icons {
    margin-left: 6px !important;
    vertical-align: middle !important;
}


/* ==========================================================================
   RESPONSIVE STYLES
   ========================================================================== */

/* Extra Large Screens (1200px+) */
@media (min-width: 1200px) {
    .subheader,
    h2.subheader {
        width: 100% !important;
        display: flex !important;
    }

    /* Center the whole block; rows fill it */
    .marketing-intro {
        padding: 60px 80px !important;
    }

    .marketing-intro .marketingMainCnt {
        width: 100% !important;
        margin: 0 auto 40px !important;
    }
}

/* Large Screens (992px - 1259px) */
@media (min-width: 992px) and (max-width: 1259px) {
    .heading .title {
        font-size: 27px !important;
    }

    .cont-cnt p {
        margin-bottom: 0px !important;
        font-size: 14px !important;
        line-height: 21px !important;
    }

.b-btn {
        background-position: right center !important;
        background-size: 16px !important;
        font-size: 20px !important;
    }

    .marketing-intro {
        padding: 40px 30px !important;
    }

    .cont-cnt {
        width: 100% !important;
    }

    .img-cnt {
        margin-left: 28px !important;
    }

    .subheader,
    h2.subheader {
        font-size: 26px !important;
        margin-bottom: 8px;
    }
}

/* Medium Screens (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .heading {
        font-size: 22px !important;
        line-height: 26px !important;
    }

    .heading .title {
        font-size: 27px !important;
    }

    .cont-cnt p {
        margin-bottom: 0px !important;
        font-size: 14px !important;
        line-height: 21px !important;
    }

.b-btn {
        background-position: right center !important;
        background-size: 16px !important;
        font-size: 20px !important;
    }

    .mt-5 {
        margin-top: 0px !important;
    }

    .marketing-intro {
        padding: 40px 30px !important;
    }

    .cont-cnt {
        width: 100% !important;
    }

    .img-cnt {
        margin-left: 28px !important;
    }

    .subheader,
    h2.subheader {
        font-size: 26px !important;
        margin-bottom: 8px !important;
    }
}

/* Small Screens (max 767px) */
@media (max-width: 767px) {
    .button-lg,
    .button {
        margin-bottom: 60px !important;
    }

    .marketingMainCnt {
        padding: 0px 40px !important;
        padding-bottom: 0px !important;
    }

    .cont-cnt {
        width: 100% !important;
    }

    .wb-link-img {
        margin-top: 40px !important;
    }

    .m-l-30 {
        margin-left: 0px !important;
    }

    .subheader,
    h2.subheader {
        font-size: 30px !important;
        margin-bottom: 5px !important;
    }

    .marketing-intro .marketingMainCnt {
        display: table !important;
    }

    .marketing-intro {
        padding: 40px 0px !important;
    }

    .marketingMainCnt {
        display: block !important;
        width: 100%;
    }

    .img-cnt {
        width: 100% !important;
        float: left;
        margin-left: 0px !important;
    }

    .m-hub-img .img-cnt,
    .wb-link-img .img-cnt {
        margin-left: 0px !important;
    }

    .image-side img {
        width: 100% !important;
    }
}

/* Extra Small Screens (max 575px) */
@media (max-width: 575px) {
    .button-lg,
    .button {
        margin-bottom: 60px !important;
    }

    .marketingMainCnt {
        display: table !important;
    }

    .m-hub-img .img-cnt,
    .wb-link-img .img-cnt {
        margin-left: 0px !important;
    }

    .img-cnt {
        width: 100% !important;
        margin-left: 0px !important;
    }

    .subheader,
    h2.subheader {
        font-size: 26px !important;
        margin-bottom: 5px !important;
    }
}

/* Very Small Screens (max 480px) */
@media (max-width: 480px) {
    .heading .title {
        font-size: 26px !important;
    }

    .img-cnt {
        margin-left: 0px !important;
    }

    .marketingMainCnt {
        display: table !important;
    }

    .m-hub-img .img-cnt,
    .wb-link-img .img-cnt {
        margin-left: 0px !important;
    }

    .cont-cnt {
        width: 100% !important;
        float: left !important;
        padding: 0px !important;
    }

    .image-side,
    .img-cnt {
        width: 100% !important;
    }

    .subheader,
    h2.subheader {
        font-size: 24px !important;
        margin-bottom: 5px !important;
    }
}

/* Clean up old float-based layout */
.marketing-intro .img-cnt {
    float: none !important;
    padding: 0 !important;
    margin: 0 0 0 16px !important;
    width: 50% !important;       /* or flex: 1; */
}

.marketingMainCnt {
    display: flex !important;
    align-items: center !important; /* THIS IS THE MAGIC FIX */
    justify-content: space-between !important;
}

/* ==========================================================================
   EMAIL BLAST PAGE STYLES
   ========================================================================== */

/* Hero Banner */
.top-banner {
    width: 100% !important;
}

.top-banner img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Main Content Container */
.em-cont {
    padding: 50px 55px !important;
    background-color: #fff !important;
}

/* Header Text Wrapper */
.header-text {
    width: 100% !important;
}

/* Intro Paragraph Text */
.em-ptext {
    font-family: acumin-pro-condensed !important;
    color: #595959 !important;
    font-weight: 500 !important;
    font-size: 29px !important;
    line-height: 44px !important;
    text-align: justify !important;
    display: block !important;
    margin-bottom: 20px !important;
}

/* Content Layout */
.content-row {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

.content-text {
    width: 100% !important;
}

.content-header {
    font-family: acumin-pro-condensed !important;
    color: #CE0019 !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    margin-top: 25px !important;
    margin-bottom: 0.0rem !important;
}

.content-paragraph {
    font-family: acumin-pro !important;
    font-size: 16px !important;
    font-weight: 100 !important;
    color: #626262 !important;
    line-height: 1.5 !important;
}

/* Email Blast Archive Header */
.blastarch {
    font-family: acumin-pro-condensed !important;
    color: #CE0019 !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    line-height: 42px !important;
}

/* Utility - Shift Right (for lists) */
.shift-right {
    margin-left: 1.5em !important;
    margin-bottom: 8px !important;
    padding-left: 0rem !important;

}

/* Shift Right Lists - Differentiate OL vs UL */
ol.shift-right {
    margin-bottom: 8px !important;
    list-style-type: decimal !important;
}

ul.shift-right {
    margin-bottom: 8px !important;
    list-style-type: disc !important;
}

.shift-right li {
    font-family: acumin-pro !important;
    font-size: 16px !important;
    color: #626262 !important;
}

/* Breadcrumb Trail */
.breadcrumb-trail {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    margin-bottom: 1rem !important;
    list-style: none !important;
}

.breadcrumb-trail li {
    padding-right: 0.5rem !important;
}

.breadcrumb-trail li::after {
    content: "/";
    padding-left: 0.5rem !important;
    color: #6c757d !important;
}

.breadcrumb-trail li:last-child::after {
    content: "" !important;
}

.breadcrumb-trail .breadcrumb {
    color: #CE0019 !important;
    text-decoration: none !important;
    font-family: acumin-pro !important;
    font-size: 14px !important;
}

.breadcrumb-trail .breadcrumb:hover {
    text-decoration: underline !important;
}


/* ==========================================================================
   EMAIL BLAST CATEGORY ARCHIVE - COMPACT 3-COLUMN LAYOUT
   ========================================================================== */

#category-container-slide {
    width: 100% !important;
}

#category-container-slide .category-slide-list {
    column-count: 3 !important;
    column-gap: 20px !important;
    column-width: 180px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 700px !important;
}

.category-slide-item {
    break-inside: avoid !important;
    margin-bottom: 3px !important;
}

.category-link-slide {
    display: inline-block !important;
}

.category-child-link {
    font-family: acumin-pro !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    display: inline-block !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #595959 !important;
}

.category-child-link:hover {
    color: #CE0019 !important;
}

/* Large screens */
@media (min-width: 1260px) {
    .category-child-link {
        font-size: 15px !important;
    }
    
    #category-container-slide .category-slide-list {
        max-width: 750px !important;
        column-width: 200px !important;
    }
}

/* Medium screens - 2 columns */
@media (min-width: 768px) and (max-width: 991px) {
    #category-container-slide .category-slide-list {
        column-count: 2 !important;
        max-width: 500px !important;
    }
}

/* Small screens - single column */
@media (max-width: 767px) {
    #category-container-slide .category-slide-list {
        column-count: 1 !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   EMAIL BLAST RESPONSIVE STYLES
   ========================================================================== */

/* Large Screens (992px - 1259px) */
@media (min-width: 992px) and (max-width: 1259px) {
    .em-cont {
        padding: 40px 50px !important;
    }

    .em-ptext {
        font-size: 28px !important;
        line-height: 38px !important;
    }

    .content-archive-column {
        width: 32% !important;
    }
}

/* Medium Screens (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .em-cont {
        padding: 40px 30px !important;
    }

    .em-ptext {
        font-size: 24px !important;
        line-height: 34px !important;
    }

    .content-archive-column {
        width: 48% !important;
    }

    .category-slide-list {
        width: 48% !important;
    }
}

/* Small Screens (max 767px) */
@media (max-width: 767px) {
    .em-cont {
        padding: 33px 33px !important;
    }

    .em-ptext {
        font-size: 22px !important;
        line-height: 30px !important;
    }

    .content-text {
        width: 100% !important;
    }

    .content-archive-column {
        display: block !important;
        width: 100% !important;
        margin-top: 0px !important;
    }

    .category-slide-list {
        width: 100% !important;
    }

    .category-child-link {
        display: block !important;
        font-size: 16px !important;
    }

    #category-container-slide {
        display: block !important;
    }

    .shift-right {
        padding-left: 25px !important;
    }
}

/* Extra Small Screens (max 575px) */
@media (max-width: 575px) {
    .em-cont {
        padding: 25px 20px !important;
    }

    .em-ptext {
        font-size: 20px !important;
        line-height: 28px !important;
    }

    .blastarch {
        font-size: 26px !important;
        line-height: 34px !important;
    }
}

/* Very Small Screens (max 480px) */
@media (max-width: 480px) {
    .em-ptext {
        font-size: 18px !important;
        line-height: 26px !important;
    }

    .content-header {
        font-size: 22px !important;
        line-height: 30px !important;
    }

    .shift-right {
        padding-left: 20px !important;
    }

    .shift-right li {
        font-size: 15px !important;
        line-height: 24px !important;
    }
}

/* ==========================================================================
   PRIVATE LABEL WEBSITE STYLES
   ========================================================================== */

   /* === MAIN WRAPPER === */
.catalogMain {
    display: block !important;
    background-color: #fff !important;
    padding: 50px 55px 1px 55px!important;
    margin: 0 auto !important;
    max-width: 1220px !important;  /* stays inside “container” size */                 /* fills whatever wrapper gives it */
    box-sizing: border-box !important;
}

/* === SECTION HEADER === */
.mainheader {
    font-family: acumin-pro-condensed !important;
    color: #CE0019 !important;
    font-size: 36px !important;
    font-weight: 300 !important;
    line-height: 63px !important;
    margin-top: 50px !important;
    margin-bottom: 20px !important;
}

/* === GENERIC PADDING === */
.catalogPadding {
    padding: 30px !important;
    box-sizing: border-box !important;
}

/* === CARD GRID BLOCKS === */
.plt-card-sm {
    width: 555px !important;
    height: 297px !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    padding: 30px !important;
    float: left !important;
    box-sizing: border-box !important;
}

.sampleCatalog-two {
    width: 555px !important;
    height: 297px !important;
    background-color: #fff !important;
    padding: 30px !important;
    float: left !important;
    box-sizing: border-box !important;
}

.setupCatalog-two-gray {
    width: 555px !important;
    height: 297px !important;
    background-color: #f4f4f4 !important;
    padding: 30px !important;
    float: left !important;
    box-sizing: border-box !important;
}

/* === BOTTOM SPACER === */
.getinTouch {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
    width: 100% !important;
}

.MTPLW.subheader, h2.subheader {
    font-family: acumin-pro-condensed !important;
    color: #CE0019 !important;
    font-size: 26px !important;
    font-weight: 300 !important;
    line-height: 35px !important;
    padding: 0 !important;
    margin: 0 !important   ;
}

/* MTPLW PAGE ONLY – big heroic version */
.MTPLW .heading .title {
    font-family: acumin-pro-condensed !important;
    color: #595959 !important;
    font-weight: 300 !important;
    font-size: 26px !important;
    line-height: 44px !important;
    text-align: justify !important;
    display: block !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}

.MTPLW .mainheader {
    font-family: acumin-pro-condensed;
    color: #CE0019 !important;
    font-size: 36px !important;
    font-weight: 300 !important;
    line-height: 63px !important;
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;  
    margin-top: 40px !important;
}

.MTPLW .subheader.mt-sm {
    font-family: acumin-pro-condensed !important;
    color: #CE0019 !important;
    font-size: 26px !important;
    font-weight: 300 !important;
    line-height: 35px !important;
    padding: 0 !important;
    margin: 50px 0 0 0 !important;
}

/* MTPLW page — make the button look like the old PLW button */
.MTPLW .catalogMain a.button {
    background-color: #CE0019 !important;
    color: #fff !important;
    font-family: acumin-pro !important;
    font-size: 12px !important;
    padding: 5px 10px 3px 10px !important;
    margin-top: 6px !important;
    margin-bottom: 10px !important;
    width: 250px !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    cursor: pointer !important;
}

/* Scoped styles for Private Label Website page only */

#loggedOutSer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;

    /* center it and keep it inside the main content width */
    width: 100% !important;
    max-width: 1110px !important;
    margin: 30px auto 0 auto !important;

    /* no stupid gray gap before the footer */
    margin-bottom: 0 !important;
}

.MTPLW #loggedOutSer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    margin-top: 30px !important;
    margin-bottom: 60px !important;
    width: 100% !important;
    max-width: 1110px !important;
}

.MTPLW #loggedOutSer .plt-card-sm {
    width: 50% !important;
    max-width: 555px !important;
    min-width: 300px !important;
    height: auto !important;
    min-height: 297px !important;
    float: none !important;
    box-sizing: border-box !important;
}

.MTPLW #loggedOutSer .sampleCatalog-two {
    background-color: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.MTPLW #loggedOutSer .sampleCatalog-two img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.MTPLW #loggedOutSer .setupCatalog-two-gray {
    background-color: transparent !important;
}

.MTPLW #loggedOutSer .setupCatalog-two-gray p {
    font-family: acumin-pro !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-bottom: 15px !important;
}

.MTPLW #loggedOutSer .setupCatalog-two-gray a {
    color: #CE0019 !important;
}

/* Stack on smaller screens */
@media (max-width: 767px) {
    .MTPLW #loggedOutSer .plt-card-sm {
        width: 100% !important;
        max-width: 100% !important;
    }
}

.MTPLW a.wpl-dyna-cont {
    color: #34A8E1 !important;
    text-decoration: underline !important;
}

.MTPLW .plt-card-sm.setupCatalog-two .subheader2 {
    font-family: acumin-pro-condensed !important;
    color: #CE0019 !important;
    font-size: 26px !important;
    font-weight: 300 !important;
    line-height: 35px !important;
    padding: 0 !important;
    margin: 10px 0 20px 0 !important;
    display: block !important;
}


/* ==========================================================================
   DIGITAL CATALOG PAGE STYLES (MTDC)
   Scoped to .MTDC wrapper to prevent conflicts
   ========================================================================== */

/* === CATALOG MAIN CONTAINER === */
.MTDC .catalogMain {
    display: block !important;
    background-color: #fff !important;
    padding: 50px 55px 50px 55px !important;
    margin: 0 auto !important;
    max-width: 1220px !important;
    box-sizing: border-box !important;
}

/* === HERO IMAGE === */
.MTDC .catalogHero {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* === MAIN HEADER (ACTIVATE YOUR...) === */
.MTDC .large {
    font-size: 63px !important;
    color: #000000 !important;
    font-family: acumin-pro-extra-condensed, sans-serif !important;
    line-height: 1 !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
}

.MTDC .large span {
    color: #CE0019 !important;
}

/* === TEXT UTILITIES === */
.MTDC .text-center {
    text-align: center !important;
}

.MTDC .text-fit-align {
    text-align: justify !important;
    margin: 0 0 50px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #595959 !important;
    font-family: acumin-pro, sans-serif !important;
}

/* === BOOTSTRAP-STYLE GRID (Scoped) === */
.MTDC .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex !important;
    flex-wrap: wrap !important;
    margin-top: calc(-1 * var(--bs-gutter-y)) !important;
    margin-right: calc(-0.5 * var(--bs-gutter-x)) !important;
    margin-left: calc(-0.5 * var(--bs-gutter-x)) !important;
}

.MTDC .row > * {
    flex-shrink: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
    padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
    margin-top: var(--bs-gutter-y) !important;
}

.MTDC .col-sm-12 {
    flex: 0 0 auto !important;
    width: 100% !important;
}

/* === CARD SECTIONS WITH BACKGROUND IMAGES === */
.MTDC .sampleCatalog,
.MTDC .setupCatalog {
    font-family: acumin-pro, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #595959 !important;
    min-height: 500px !important;
    max-height: 650px !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.MTDC .sampleCatalog {
    background-image: url(https://cdn.boxpartners.com/siteimages/boxpartners/catalog/DigitalCatalog_PageImages_SampleDigitalCatalog_FullHeight.jpg) !important;
    background-position: top center !important;
}

.MTDC .setupCatalog {
    background-image: url(https://cdn.boxpartners.com/siteimages/boxpartners/catalog/DigitalCatalog_PageImages_SetUp_FullHeight.jpg) !important;
    background-position: bottom center !important;
}

/* === CATALOG PADDING === */
.MTDC .catalogPadding {
    padding-left: 50px !important;
    padding-right: 50px !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    box-sizing: border-box !important;
}

/* === SPACER IMAGES === */
.MTDC .catalogMain img {
    width: 100% !important;
}

.MTDC .catalogMain .leftSpace {
    height: 50% !important;
}

.MTDC .catalogMain .rightSpace {
    width: 80% !important;
    height: 25% !important;
}

/* === SUBHEADER STYLING === */
.MTDC span.subheader {
    font-family: acumin-pro-condensed, sans-serif !important;
    color: #CE0019 !important;
    font-size: 36px !important;
    font-weight: 400 !important;
    line-height: 46px !important;
    display: block !important;
}

.MTDC h2.subheader {
    font-family: acumin-pro-condensed, sans-serif !important;
    color: #CE0019 !important;
    font-size: 36px !important;
    font-weight: 400 !important;
    line-height: 46px !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
}

/* === MARGIN UTILITY === */
.MTDC .mt-sm-35 {
    margin-top: 35px !important;
}

/* === BUTTON STYLING === */
.MTDC .catalogMain a.button {
    background-color: #CE0019 !important;
    color: #fff !important;
    font-family: acumin-pro, sans-serif !important;
    font-size: 12px !important;
    padding: 5px 10px 3px 10px !important;
    margin-top: 6px !important;
    margin-bottom: 10px !important;
    width: 250px !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    cursor: pointer !important;
}

.MTDC .catalogMain a.button:hover {
    background-color: #a30014 !important;
}

/* === PARAGRAPH STYLING INSIDE CARDS === */
.MTDC .setupCatalog p {
    font-family: acumin-pro, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #595959 !important;
    margin-bottom: 15px !important;
}

.MTDC .setupCatalog a {
    color: #CE0019 !important;
    text-decoration: none !important;
}

.MTDC .setupCatalog a:hover {
    text-decoration: underline !important;
}

/* ==========================================================================
   DIGITAL CATALOG RESPONSIVE STYLES
   ========================================================================== */

/* Extra Large Screens (1260px+) */
@media (min-width: 1260px) {
    .MTDC .sampleCatalog,
    .MTDC .setupCatalog {
        min-height: 550px !important;
    }

    .MTDC .catalogMain .leftSpace {
        height: 63% !important;
    }

    .MTDC .large {
        font-size: 65px !important;
    }

    .MTDC span.subheader,
    .MTDC h2.subheader {
        width: 100% !important;
        display: flex !important;
    }
}

/* Large Screens (992px - 1259px) */
@media (min-width: 992px) and (max-width: 1259px) {
    .MTDC .sampleCatalog,
    .MTDC .setupCatalog {
        min-height: 480px !important;
    }

    .MTDC .catalogMain .leftSpace {
        height: 60% !important;
    }

    .MTDC .large {
        font-size: 55px !important;
    }

    .MTDC .catalogPadding {
        padding-left: 35px !important;
        padding-right: 35px !important;
    }
}

/* Medium+ Screens (768px+) - Side by side layout */
@media (min-width: 768px) {
    .MTDC .col-md-6 {
        flex: 0 0 auto !important;
        width: 50% !important;
    }
}

/* Medium Screens (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .MTDC .sampleCatalog,
    .MTDC .setupCatalog {
        min-height: 420px !important;
        font-size: 14px !important;
    }

    .MTDC .catalogMain .leftSpace {
        height: 55% !important;
    }

    .MTDC .large {
        font-size: 45px !important;
    }

    .MTDC span.subheader,
    .MTDC h2.subheader {
        font-size: 24px !important;
        line-height: 32px !important;
    }

    .MTDC .catalogPadding {
        padding-left: 25px !important;
        padding-right: 25px !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .MTDC .setupCatalog p {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    .MTDC .catalogMain a.button {
        width: 200px !important;
        font-size: 11px !important;
    }
}

/* Small Screens (max 767px) - STACK CARDS VERTICALLY */
@media (max-width: 767px) {
    .MTDC .col-md-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    .MTDC .sampleCatalog,
    .MTDC .setupCatalog {
        min-height: 380px !important;
    }

    .MTDC .catalogMain .leftSpace {
        height: 70% !important;
    }

    .MTDC .large {
        font-size: 38px !important;
    }

    .MTDC span.subheader,
    .MTDC h2.subheader {
        font-size: 26px !important;
        line-height: 34px !important;
    }

    .MTDC .catalogPadding {
        padding-left: 25px !important;
        padding-right: 25px !important;
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }

    .MTDC .catalogMain a.button {
        width: 220px !important;
    }

    .MTDC .catalogMain {
        padding: 30px 25px !important;
    }

    .MTDC .text-fit-align {
        margin-bottom: 30px !important;
    }
}

/* Extra Small Screens (max 575px) */
@media (max-width: 575px) {
    .MTDC .sampleCatalog,
    .MTDC .setupCatalog {
        min-height: 340px !important;
    }

    .MTDC .catalogMain .leftSpace {
        height: 55% !important;
    }

    .MTDC .large {
        font-size: 32px !important;
    }

    .MTDC span.subheader,
    .MTDC h2.subheader {
        font-size: 22px !important;
        line-height: 30px !important;
    }

    .MTDC .catalogPadding {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .MTDC .text-fit-align {
        font-size: 14px !important;
    }

    .MTDC .catalogMain {
        padding: 25px 20px !important;
    }
}

/* Very Small Screens (max 480px) */
@media (max-width: 480px) {
    .MTDC .sampleCatalog,
    .MTDC .setupCatalog {
        min-height: 300px !important;
        font-size: 14px !important;
    }

    .MTDC .catalogMain .leftSpace {
        height: 350px !important;
    }

    .MTDC .large {
        font-size: 28px !important;
    }

    .MTDC span.subheader,
    .MTDC h2.subheader {
        font-size: 20px !important;
        line-height: 28px !important;
    }

    .MTDC .catalogMain a.button {
        width: 100% !important;
        max-width: 220px !important;
    }

    .MTDC .setupCatalog p {
        font-size: 14px !important;
    }

    .MTDC .catalogMain {
        padding: 20px 15px !important;
    }
}

/* ==============================================
   WEBSITE PRODUCT LINK (MTWPL)
   ============================================== */

/* Basic spacing & utilities */
.MTWPL .no-padder,
.MTWPL .no-paddr {
    padding: 0 !important;
}

.MTWPL .mb-20 {
    margin-bottom: 20px !important;
}

.MTWPL .mt-sm {
    margin-top: 25px !important;
}

/* Scoped grid */
.MTWPL .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.MTWPL .row > * {
    flex: 1 1 100% !important;
}

/* Hero */
.MTWPL .our-image img.catalogHero {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Main container */
.MTWPL .catalogMain {
    max-width: 1220px !important;
    margin: 0 auto !important;
    padding: 50px 55px !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

/* Headings & body copy */
.MTWPL .heading {
    font-family: acumin-pro-condensed, sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
    color: #800000 !important;
}

.MTWPL .heading .title {
    font-family: acumin-pro-condensed, sans-serif !important;
    display: block !important;
    font-size: 29px !important;
    line-height: 44px !important;
    font-weight: 500 !important;
    color: #595959 !important;
    text-align: justify !important;
    padding: 0 !important;
}

.MTWPL .text-fit-align,
.MTWPL p.text {
    font-family: acumin-pro, sans-serif !important;
    font-size: 16px !important;
    line-height: 22px !important;
    color: #595959 !important;
}

.MTWPL h1.mainheader,
.MTWPL h2.subheader {
    font-family: acumin-pro-condensed, sans-serif !important;
    color: #CE0019 !important;
    margin-bottom: 0 !important;
}

.MTWPL h1.mainheader {
    font-size: 36px !important;
    font-weight: 300 !important;
    line-height: 63px !important;
    margin-top: 25px !important;
}

.MTWPL h2.subheader {
    font-size: 26px !important;
    font-weight: 300 !important;
    line-height: 40px !important;
}

/* Feature list */
.MTWPL .lists-features {
    margin-left: 15px !important;
    margin-bottom: 30px !important;
    list-style: disc !important;
    color: #595959 !important;
}

.MTWPL .lists-features li {
    font-size: 16px !important;
    line-height: 22px !important;
}


/* ==============================================
   THUMBNAIL GRIDS (Home Page Layouts + Templates)
   ============================================== */

/* UL as flex wrapper */
.MTWPL .img-cards-brd ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Desktop: 4 across */
.MTWPL .img-cards-brd li {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    box-sizing: border-box !important;
}

/* Kill leftover theme buttons */
.MTWPL .img-cards-brd li.themeButton {
    width: 100% !important;
}

/* Thumb image */
.MTWPL .img-cards-brd li img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Caption */
.MTWPL .img-cards-brd li p {
    text-align: center !important;
    font-family: acumin-pro, sans-serif !important;
    font-weight: bolder !important;
    color: #595959 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    margin-top: 10px !important;
    margin-bottom: 18px !important;
    padding: 0 !important;
    display: block !important;
}

/* Links under thumbnails */
.MTWPL .img-cards-brd li a {
    display: inline-block !important;
    text-decoration: none !important;
    color: #000 !important;
}

/* Medium screens: 2 across */
@media (max-width: 900px) {
    .MTWPL .img-cards-brd li {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* Small screens: 1 across */
@media (max-width: 500px) {
    .MTWPL .img-cards-brd li {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}


/* ==============================================
   HEADER SPECS IMAGE
   ============================================== */

.MTWPL .img-cards-header-specs {
    display: block !important;
    width: 100% !important;
    max-width: 1220px !important;
    margin: 20px auto 0 !important;
    padding-left: 0 !important;
}

.MTWPL .img-cards-header-specs .header-image-large {
    display: inline-block !important;
    max-width: 780px !important;
    width: 100% !important;
    height: 590px !important;
}


/* ==============================================
   BOTTOM CONTENT (WPL CONTENT)
   ============================================== */

.MTWPL .wpl-content-sec {
    display: flex !important;
    flex-wrap: wrap !important;
    max-width: 1110px !important;
    width: 100% !important;
    margin: 30px auto 0 !important;
    padding: 30px 0 0 20px !important;
}

/* two columns */
.MTWPL .wpl-content-sec .plt-card-sm {
    flex: 1 1 50% !important;
    min-height: 297px !important;
    box-sizing: border-box !important;
    float: none !important;
}

/* left: image */
.MTWPL .sampleCatalog {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    padding: 0 !important;
}

.MTWPL .sampleCatalog img {
    display: block !important;
    width: 90% !important;
    height: auto !important;
}

/* right: text */
.MTWPL .setupCatalog {
    display: flex !important;
    align-items: center !important;
    padding: 30px 0 30px 10px !important;
}

.MTWPL .wpl-dyna-cont {
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
}

/* links */
.MTWPL .wpl-dyna-cont a {
    color: #34A8E1 !important;
    text-decoration: underline !important;
}

/* Mobile: stack bottom content */
@media (max-width: 767px) {
    .MTWPL .wpl-content-sec .plt-card-sm {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

/* Make captions behave like template */
.MTWPL .img-cards-brd li {
    text-align: center !important;
}

.MTWPL .img-cards-brd li > a:last-of-type {
    display: block !important;
}

/* FINAL OVERRIDES */

/* UL */
.MTWPL .img-cards-brd ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* LI */
.MTWPL .img-cards-brd ul > li {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Image */
.MTWPL .img-cards-brd ul > li img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* Make <a> fill the grid cell */
.MTWPL .img-cards-brd li > a:first-of-type {
    display: block !important;
    width: 100% !important;
}

/* Img sizing */
@media (min-width: 1400px) {
    .img-card-wrapper img {
        width: 290px !important;
        padding: 11px !important;
        display: block;
    }
}

@media (max-width: 767px) {
    .img-card-wrapper img {
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
    }
}

/* MTWPL custom margins */
.MTWPL .thumb-margin-1 {
    margin: 10px 0 10px 15px !important;
}

.MTWPL .thumb-margin-2 {
    margin: 20px 10px 30px !important;
}

.MTWPL h2.subheader20 {
    font-family: acumin-pro-condensed !important;
    color: #CE0019 !important;
    font-size: 26px !important;
    font-weight: 300 !important;
    line-height: 40px !important;
    margin-bottom: 20px !important;
}

.MTWPL .img-cards-brd ul {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.MTWPL .img-cards-brd ul > li {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    box-sizing: border-box !important;
}

@media (max-width: 900px) {
    .MTWPL .img-cards-brd ul > li {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 500px) {
    .MTWPL .img-cards-brd ul > li {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Caption */
.MTWPL .img-cards-brd ul > li p,
.MTWPL .img-cards-brd ul > li > a:last-of-type {
    display: block !important;
    text-align: center !important;
    font-family: acumin-pro, sans-serif !important;
    font-weight: bolder !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #595959 !important;
    text-decoration: none !important;
}