:root {
    --ccc-white: #FFFFFF;
    --ccc-grey: #E4E4E4;
    --ccc-theme: #D20001;
    --ccc-background: #F8F9F9;

    --ccc-h1: 32px;
    --ccc-h2: 28px; 
    --ccc-h3: 24px; 
    
}

.ccc-header-wrapper { padding: 15px 0; background-color: var(--ccc-white); box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.20); }
.ccc-header {  display: flex; align-items: center; justify-content: space-between; }
.ccc-logo { display: block; width: 100%; max-width: 235px;  }
.ccc-logo .href { display: block; }
.ccc-progress {}

ol.ccc-steps {
    margin: 0; padding: 0; list-style: none none; list-style-position: inside;
    display: flex; align-items: center; gap: 0 5px; 
    gap: 0 10px; font-size: 18px;
}

ol.ccc-steps dl { margin: 0; display: flex; align-items: center; gap: 0 7px; }
ol.ccc-steps dl dt { 
    margin: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; 
    width: 30px; height: 30px; border-radius: 3px; font-weight: bold; border: 2px solid var(--ccc-grey);  
    line-height: 1; font-size: 18px;
}
ol.ccc-steps dl dd { margin: 0; flex-shrink: 0; display: flex; align-items: center; gap: 0 7px; }
ol.ccc-steps dl dd strong { display: block; flex-shrink: 0; font-weight: normal;   }
ol.ccc-steps dl dd em { display: block; width: 60px;  flex-grow: 1; height: 2px; background: var(--ccc-grey); }

ol.ccc-steps > li {}
ol.ccc-steps > li.item-active dl dt { border-color: var(--ccc-theme); background-color: var(--ccc-theme); color: var(--ccc-white);  }
ol.ccc-steps > li.item-active dl dd strong { color: var(--ccc-theme); font-weight: bold; }


.layout-checkout-wrapper { background-color: var(--ccc-background); padding: 30px 0; }
.layout-checkout { display: flex; flex-wrap: wrap;  }
.layout-checkout .col-heading { flex: 0 0 100%; margin-bottom: 15px;   }
.layout-checkout .col-heading .heading { margin: 0; font-size: var(--ccc-h1); }
.layout-checkout .col-main { flex: 1; }
.layout-checkout .col-spacer { flex: 0 0 30px; }
.layout-checkout .col-sidebar { flex: 0 0 400px; }



/* ╔═══════════════════════════════════════════════════════════════════════════════════════════════╗ */
/* ║                                       BREAKPOINTS                                             ║ */
/* ╚═══════════════════════════════════════════════════════════════════════════════════════════════╝ */
@media (min-width: 576px) {}
@media (min-width: 768px) { 
 
}
@media (min-width: 992px) {	 
} /* @media */
@media (min-width: 1280px) {
} /* @media */
@media (min-width: 1366px) {}
@media (min-width: 1440px) {
}
@media (min-width: 1600px) {
}
/* 5XL */
@media (min-width: 1920px) {
} /* 1920px & Up */

/* ╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗ */
/* ║                                                                                                      ║ */
/* ║ ####################################   DEVELOPMENT BREAKPOINTS   ##################################  ║ */
/* ║                                                                                                      ║ */
/* ╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝ */

/* 4XL */
@media (max-width: 1919.98px) {
 
} /* @media -----------------------------------| width < 1920px |-------------------------------------------*/

/* 3XL */
@media (max-width: 1599.98px) {
  
} /* @media -----------------------------------| width < 1600px |-------------------------------------------*/

/* 2XL */
@media (max-width: 1439.98px) {
 
  
} /* @media -----------------------------------| width < 1440px |-------------------------------------------*/

/* XL */
@media (max-width: 1365.98px) {
 
 
    
} /* @media -----------------------------------| width < 1366px |-------------------------------------------*/

/* LG */
@media (max-width: 1279.98px) {

    
 
} /* @media -----------------------------------| width < 1200px |-------------------------------------------*/

/* MD */
@media (max-width: 991.98px) {

   

} /* @media -----------------------------------| width < 992px |-------------------------------------------*/

/* SM */
@media (max-width: 767.98px) {

    

} /* @media -----------------------------------| width < 768px |-------------------------------------------*/

/* XS */
@media (max-width: 575.98px) and (orientation:landscape) {}
@media (max-width: 575.98px) {
 
    
    
} /* @media -----------------------------------| width < 576px |-------------------------------------------*/


@media (max-width: 319.98px) {


 } /* @media -----------------------------------| width < 320px |-------------------------------------------*/   

/* ════════════════════════════════════════════╣     END    ╠════════════════════════════════════════════ */
@media screen and (min-width: 320px) and (max-width: 767.98px) and (orientation: landscape) { }
/* ╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗ */
/* ║                                 ¡ NO STYLES BELOW THIS LINE PLEASE !                                 ║ */
/* ╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝ */