/* CSS Debugger by Plazzer 
USAGE: Include in site's footer the following code snippet:
<?php if (strpos($_SERVER['HTTP_HOST'], '*****.yourbetasite.co.uk') !== false) { ?>
      <details id="debugger" role="button" title="Breakpoints Debug Tool (in footer.phtml)"><summary></summary></details>
<?php } ?>
*/
#debugger { display: inline-block; position: fixed; bottom: 30px; left: 0; z-index: 999;  }
#debugger summary { list-style: none; }
#debugger summary::marker, /* Latest Chrome, Edge, Firefox */ 
#debugger summary::-webkit-details-marker /* Safari */ { display:none; }
#debugger summary::before { 
    display: inline-block; background-color: #fff; color: #840372; 
    font-size: 12px; font-weight: 600; padding: 2px 4px; content: '∞';
    box-shadow: 0 1px 1px rgba(0,0,0,0.35);
}

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

/* 4XL */
@media (max-width: 1919.98px) {
     #debugger summary::before { content:'4XL'; }
} /* @media -----------------------------------| width < 1920px |-------------------------------------------*/

/* 3XL */
@media (max-width: 1599.98px) {
     #debugger summary::before { content:'3XL'; }
} /* @media -----------------------------------| width < 1600px |-------------------------------------------*/

/* 2XL */
@media (max-width: 1439.98px) {
     #debugger summary::before { content:'2XL'; }
} /* @media -----------------------------------| width < 1440px |-------------------------------------------*/

/* XL */
@media (max-width: 1365.98px) {
    #debugger summary::before { content:'XL'; }    
} /* @media -----------------------------------| width < 1366px |-------------------------------------------*/

/* LG */
@media (max-width: 1279.98px) {
    #debugger summary::before { content:'LG'; }
} /* @media -----------------------------------| width < 1200px |-------------------------------------------*/

/* MD */
@media (max-width: 991.98px) {
     #debugger summary::before { content:'MD'; }
} /* @media -----------------------------------| width < 992px |-------------------------------------------*/

/* SM */
@media (max-width: 767.98px) {
    #debugger summary::before { content:'SM'; }
} /* @media -----------------------------------| width < 768px |-------------------------------------------*/

/* XS */
@media (max-width: 575.98px) and (orientation:landscape) {}
@media (max-width: 575.98px) {
    #debugger summary::before { content:'XS'; }
} /* @media -----------------------------------| width < 576px |-------------------------------------------*/