<?php
/**
 * CSS template for theme grid/layout settings.
 *
 * WARNING: do not edit this file. Your changes will be overwritten and lost after update.
 * To modify styles generated by this file, override these styles in your custom CSS file.
 */
?>
/**
 * <?php echo date("Y-m-d H:i:s"); ?>
 */
<?php
    $storeCode = $block->getStoreViewCode();
    $t = $this->helper('Infortis\Base\Helper\Data');
    $helpRespo = $this->helper('Infortis\Infortis\Helper\Responsive');
    $helpGrid = $this->helper('Infortis\Base\Helper\Itemgrid');

    $isResponsive       = $t->getCfgLayout('responsive/responsive', $storeCode);
    $isFluid            = $t->getCfgLayout('responsive/fluid_width', $storeCode);
    $maxWidth           = $t->getMaxWidth($storeCode);
    $customWidth        = $t->getCustomWidth($storeCode);

    $maxBreak           = $helpRespo->mapWidthToBreakpoint($maxWidth);
    $breakpoint         = $helpRespo->getMapBreakpointNameToBreakpoint();
    $pageWidth          = $helpRespo->getMapBreakpointToPageWidth();

    $isFullWidth        = ($maxWidth === 0) ? true : false;

    echo '/* w:' . $maxWidth .', b:'. $maxBreak . '*/';

    // Explanation of breakpoints stored in $breakpoint array.
    // Breakpoint name => width of viewport:
    //
    // '3XL' => 1920,
    // '2XL' => 1680,
    // 'XL'  => 1440,
    // 'L'   => 1200,
    // 'M'   => 992,
    // 'S'   => 768,
    // 'XS'  => 640,
    // '2XS' => 480,
    // '3XS' => 320,
?>





<?php if ($isResponsive == false): // Non-responsive layout ?>





    <?php // Fixed width for non-responsive layout
        $nonrespWidth = 0;
        if ($customWidth)
            $nonrespWidth = $customWidth;
        else 
            $nonrespWidth = $pageWidth[$maxBreak];
    ?>

    body {
        min-width: <?php echo $nonrespWidth; ?>px;
    }
    .container {
        width: <?php echo $nonrespWidth; ?>px !important;
    }





<?php else: // Responsive layout ?>





    <?php // Set width only when page is set as fluid ?>
    <?php if ($isFluid): ?>
        .container { width: 96%; }
    <?php endif; ?>

    <?php // Fixed max width for old versions of IE, only for responsive layout ?>
    <?php if ($customWidth): ?>
        .lte-ie8 .container { max-width:<?php echo $customWidth; ?>px; }
    <?php else: ?>
        .lte-ie8 .container { max-width:<?php echo $pageWidth[$maxBreak]; ?>px; }
    <?php endif; ?>

    <?php // If "full width" selected for maximum width ?>
    <?php if ($isFullWidth): ?>
        <?php // Stretch containers to full width and remove max width ?>
        .container {
            max-width: none !important;
            width: 100%;
        }
    <?php endif; ?>





    <?php // Breakpoints: ?>

    <?php // Viewport width equal or greater than breakpoint 3XL
        $bp = $breakpoint['3XL'];
    ?>
    <?php if ($maxBreak >= $bp): ?>

    @media only screen and (min-width: <?php echo $bp; ?>px)
    {

        <?php if ($maxBreak == $bp): // If it's the highest breakpoint ?>

            <?php if ($customWidth): ?>
                .container { max-width: <?php echo $customWidth; ?>px; }
            <?php else: ?>
                .container { max-width: <?php echo $pageWidth[ $bp ]; ?>px; }
            <?php endif; ?>

        <?php else: ?>

            <?php if (!$isFluid): ?>
                .container { max-width: <?php echo $pageWidth[ $bp ]; ?>px; }
            <?php endif; ?>

        <?php endif; ?>

        /* Item grid
        -------------------------------------------------------------- */
        <?php echo $helpGrid->getCssGridItem($t->getCfg('category_grid/columns_breakpoint_3XL')); // 1920+ ?>

        /* Item grid - adaptive
        -------------------------------------------------------------- */
        /* Item grid: 2 columns */
        .itemgrid-adaptive.itemgrid-2col .item { width:18%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-2col > li:nth-of-type(5n+1) { clear:left !important; }
        
        /* Item grid: 3 columns */
        .itemgrid-adaptive.itemgrid-3col .item { width:14.6666%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-3col > li:nth-of-type(6n+1) { clear:left !important; }
        
        /* Item grid: 4 columns */
        .itemgrid-adaptive.itemgrid-4col .item { width:12.2857%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-4col > li:nth-of-type(7n+1) { clear:left !important; }
        
        /* Item grid: 5 columns */
        .itemgrid-adaptive.itemgrid-5col .item { width:10.5%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-5col > li:nth-of-type(8n+1) { clear:left !important; }
        
        /* Item grid: 6 columns */
        .itemgrid-adaptive.itemgrid-6col .item { width:10.5%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-6col > li:nth-of-type(8n+1) { clear:left !important; }
        
        /* Item grid: 7 columns */
        .itemgrid-adaptive.itemgrid-7col .item { width:10.5%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-7col > li:nth-of-type(8n+1) { clear:left !important; }

        <?php //Deprecated ?>
        /* Hide */
        .hide-below-1680 { display:inherit !important; }
        .hide-below-1440 { display:inherit !important; }
        .hide-below-1360 { display:inherit !important; }
        .hide-below-1280 { display:inherit !important; }

    }

    <?php endif; ?>





    <?php // Viewport width equal or greater than breakpoint 2XL
        $bp = $breakpoint['2XL'];
        $higherBp = $breakpoint['3XL'];
    ?>
    <?php if ($maxBreak >= $bp): ?>

    @media only screen and (min-width: <?php echo $bp; ?>px) <?php if ($maxBreak > $bp): ?>and (max-width: <?php echo $higherBp - 1; ?>px) <?php endif; ?>
    {
        <?php if ($maxBreak == $bp): // If it's the highest breakpoint ?>

            <?php if ($customWidth): ?>
                .container { max-width: <?php echo $customWidth; ?>px; }
            <?php else: ?>
                .container { max-width: <?php echo $pageWidth[ $bp ]; ?>px; }
            <?php endif; ?>

        <?php else: ?>

            <?php if (!$isFluid): ?>
                .container { max-width: <?php echo $pageWidth[ $bp ]; ?>px; }
            <?php endif; ?>

        <?php endif; ?>

        /* Item grid
        -------------------------------------------------------------- */
        <?php echo $helpGrid->getCssGridItem($t->getCfg('category_grid/columns_breakpoint_2XL')); // 1680+ ?>

        /* Item grid - adaptive
        -------------------------------------------------------------- */
        /* Item grid: 2 columns */
        .itemgrid-adaptive.itemgrid-2col .item { width:18%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-2col > li:nth-of-type(5n+1) { clear:left !important; }
        
        /* Item grid: 3 columns */
        .itemgrid-adaptive.itemgrid-3col .item { width:14.6666%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-3col > li:nth-of-type(6n+1) { clear:left !important; }
        
        /* Item grid: 4 columns */
        .itemgrid-adaptive.itemgrid-4col .item { width:12.2857%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-4col > li:nth-of-type(7n+1) { clear:left !important; }
        
        /* Item grid: 5 columns */
        .itemgrid-adaptive.itemgrid-5col .item { width:10.5%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-5col > li:nth-of-type(8n+1) { clear:left !important; }
        
        /* Item grid: 6 columns */
        .itemgrid-adaptive.itemgrid-6col .item { width:10.5%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-6col > li:nth-of-type(8n+1) { clear:left !important; }
        
        /* Item grid: 7 columns */
        .itemgrid-adaptive.itemgrid-7col .item { width:10.5%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-7col > li:nth-of-type(8n+1) { clear:left !important; }

        <?php //Deprecated ?>
        /* Hide */
        .hide-below-1680 { display:inherit !important; }
        .hide-below-1440 { display:inherit !important; }
        .hide-below-1360 { display:inherit !important; }
        .hide-below-1280 { display:inherit !important; }

    }

    <?php endif; ?>





    <?php // Additional styles for viewport width equal or greater than breakpoint 2XL
        $bp = $breakpoint['2XL'];
    ?>
    <?php if ($maxBreak >= $bp): ?>

    @media only screen and (min-width: <?php echo $bp; ?>px)
    {

        /* 2 columns - left
        -------------------------------------------------------------- */
        .page-layout-2columns-left .column.main {
            width: 83.33333333%;
        }
        .page-layout-2columns-left .sidebar-main {
            width: 16.66666667%;
        }
        .page-layout-2columns-left .sidebar-additional {
            width: 16.66666667%;
        }

        /* 2 columns - right
        -------------------------------------------------------------- */
        .page-layout-2columns-right .column.main {
            width: 83.33333333%;
        }
        .page-layout-2columns-right .sidebar-main {
            width: 16.66666667%;
        }
        .page-layout-2columns-right .sidebar-additional {
            width: 16.66666667%;
        }

    }

    <?php endif; ?>





    <?php // Viewport width equal or greater than breakpoint XL
        $bp = $breakpoint['XL'];
        $higherBp = $breakpoint['2XL'];
    ?>
    <?php if ($maxBreak >= $bp): ?>

    @media only screen and (min-width: <?php echo $bp; ?>px) <?php if ($maxBreak > $bp): ?>and (max-width: <?php echo $higherBp - 1; ?>px) <?php endif; ?>
    {

        <?php if ($maxBreak == $bp): // If it's the highest breakpoint ?>

            <?php if ($customWidth): ?>
                .container { max-width: <?php echo $customWidth; ?>px; }
            <?php else: ?>
                .container { max-width: <?php echo $pageWidth[ $bp ]; ?>px; }
            <?php endif; ?>

        <?php else: ?>

            <?php if (!$isFluid): ?>
                .container { max-width: <?php echo $pageWidth[ $bp ]; ?>px; }
            <?php endif; ?>

        <?php endif; ?>

        /* Item grid
        -------------------------------------------------------------- */
        <?php echo $helpGrid->getCssGridItem($t->getCfg('category_grid/columns_breakpoint_XL')); // 1440+ ?>

        /* Item grid - adaptive
        -------------------------------------------------------------- */
        /* Item grid: 2 columns */
        .itemgrid-adaptive.itemgrid-2col .item { width:23%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-2col > li:nth-of-type(4n+1) { clear:left !important; }
        
        /* Item grid: 3 columns */
        .itemgrid-adaptive.itemgrid-3col .item { width:18%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-3col > li:nth-of-type(5n+1) { clear:left !important; }
        
        /* Item grid: 4 columns */
        .itemgrid-adaptive.itemgrid-4col .item { width:14.6666%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-4col > li:nth-of-type(6n+1) { clear:left !important; }
        
        /* Item grid: 5 columns */
        .itemgrid-adaptive.itemgrid-5col .item { width:12.2857%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-5col > li:nth-of-type(7n+1) { clear:left !important; }
        
        /* Item grid: 6 columns */
        .itemgrid-adaptive.itemgrid-6col .item { width:10.5%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-6col > li:nth-of-type(8n+1) { clear:left !important; }
        
        /* Item grid: 7 columns */
        .itemgrid-adaptive.itemgrid-7col .item { width:10.5%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-7col > li:nth-of-type(8n+1) { clear:left !important; }

        <?php //Deprecated ?>
        /* Hide */
        .hide-below-1440 { display:inherit !important; }
        .hide-below-1360 { display:inherit !important; }
        .hide-below-1280 { display:inherit !important; }

    }

    <?php endif; ?>





    <?php // Viewport width equal or greater than breakpoint L
        $bp = $breakpoint['L'];
        $higherBp = $breakpoint['XL'];
    ?>
    <?php if ($maxBreak >= $bp): ?>

    @media only screen and (min-width: <?php echo $bp; ?>px) <?php if ($maxBreak > $bp): ?>and (max-width: <?php echo $higherBp - 1; ?>px) <?php endif; ?>
    {
        <?php if ($maxBreak == $bp): // If it's the highest breakpoint ?>

            <?php if ($customWidth): ?>
                .container { max-width: <?php echo $customWidth; ?>px; }
            <?php else: ?>
                .container { max-width: <?php echo $pageWidth[ $bp ]; ?>px; }
            <?php endif; ?>

        <?php else: ?>

            <?php if (!$isFluid): ?>
                .container { max-width: <?php echo $pageWidth[ $bp ]; ?>px; }
            <?php endif; ?>

        <?php endif; ?>

        /* Item grid
        -------------------------------------------------------------- */
        <?php echo $helpGrid->getCssGridItem($t->getCfg('category_grid/columns_breakpoint_L')); // 1200+ ?>

        /* Item grid - adaptive
        -------------------------------------------------------------- */
        /* Item grid: 2 columns */
        .itemgrid-adaptive.itemgrid-2col .item { width:31.3333%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-2col > li:nth-of-type(3n+1) { clear:left !important; }
        
        /* Item grid: 3 columns */
        .itemgrid-adaptive.itemgrid-3col .item { width:23%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-3col > li:nth-of-type(4n+1) { clear:left !important; }
        
        /* Item grid: 4 columns */
        .itemgrid-adaptive.itemgrid-4col .item { width:18%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-4col > li:nth-of-type(5n+1) { clear:left !important; }
        
        /* Item grid: 5 columns */
        .itemgrid-adaptive.itemgrid-5col .item { width:14.6666%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-5col > li:nth-of-type(6n+1) { clear:left !important; }
        
        /* Item grid: 6 columns */
        .itemgrid-adaptive.itemgrid-6col .item { width:12.2857%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-6col > li:nth-of-type(7n+1) { clear:left !important; }
        
        /* Item grid: 7 columns */
        .itemgrid-adaptive.itemgrid-7col .item { width:10.5%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-7col > li:nth-of-type(8n+1) { clear:left !important; }

        <?php //Deprecated ?>
        /* Hide */
        .hide-below-1280 { display:inherit !important; }

    }

    <?php endif; ?>





    <?php // Viewport width below breakpoint L ?>

    @media only screen and (max-width: <?php echo $breakpoint['L'] - 1; ?>px) {
    }





    <?php // Viewport width equal or greater than breakpoint M
        $bp = $breakpoint['M'];
        $higherBp = $breakpoint['L'];
    ?>
    <?php if ($maxBreak >= $bp): ?>

    @media only screen and (min-width: <?php echo $bp; ?>px) <?php if ($maxBreak > $bp): ?>and (max-width: <?php echo $higherBp - 1; ?>px) <?php endif; ?>
    {
        <?php if ($maxBreak == $bp): // If it's the highest breakpoint ?>

            <?php if ($customWidth): ?>
                .container { max-width: <?php echo $customWidth; ?>px; }
            <?php else: ?>
                .container { max-width: <?php echo $pageWidth[ $bp ]; ?>px; }
            <?php endif; ?>

        <?php else: ?>

            <?php if (!$isFluid): ?>
                .container { max-width: <?php echo $pageWidth[ $bp ]; ?>px; }
            <?php endif; ?>

        <?php endif; ?>

        /* Item grid
        -------------------------------------------------------------- */
        <?php echo $helpGrid->getCssGridItem($t->getCfg('category_grid/columns_breakpoint_M')); // 992+ ?>

        /* Item grid - adaptive
        -------------------------------------------------------------- */
        /* Item grid: 2 columns */
        .itemgrid-adaptive.itemgrid-2col .item { width:48%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-2col > li:nth-of-type(2n+1) { clear:left !important; }
        
        /* Item grid: 3 columns */
        .itemgrid-adaptive.itemgrid-3col .item { width:31.3333%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-3col > li:nth-of-type(3n+1) { clear:left !important; }
        
        /* Item grid: 4 columns */
        .itemgrid-adaptive.itemgrid-4col .item { width:23%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-4col > li:nth-of-type(4n+1) { clear:left !important; }
        
        /* Item grid: 5 columns */
        .itemgrid-adaptive.itemgrid-5col .item { width:18%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-5col > li:nth-of-type(5n+1) { clear:left !important; }
        
        /* Item grid: 6 columns */
        .itemgrid-adaptive.itemgrid-6col .item { width:14.6666%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-6col > li:nth-of-type(6n+1) { clear:left !important; }
        
        /* Item grid: 7 columns */
        .itemgrid-adaptive.itemgrid-7col .item { width:12.2857%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-7col > li:nth-of-type(7n+1) { clear:left !important; }

    }

    <?php endif; ?>





    <?php // Viewport width below breakpoint M ?>

    @media only screen and (max-width: <?php echo $breakpoint['M'] - 1; ?>px) {
    }





    <?php // Viewport width equal or greater than breakpoint S
        $bp = $breakpoint['S'];
        $higherBp = $breakpoint['M'];
    ?>
    <?php if ($maxBreak >= $bp): ?>

    @media only screen and (min-width: <?php echo $bp; ?>px) <?php if ($maxBreak > $bp): ?>and (max-width: <?php echo $higherBp - 1; ?>px) <?php endif; ?>
    {
        <?php if ($maxBreak == $bp): // If it's the highest breakpoint ?>

            <?php if ($customWidth): ?>
                .container { max-width: <?php echo $customWidth; ?>px; }
            <?php else: ?>
                .container { max-width: <?php echo $pageWidth[ $bp ]; ?>px; }
            <?php endif; ?>

        <?php else: ?>

            <?php if (!$isFluid): ?>
                .container { max-width: <?php echo $pageWidth[ $bp ]; ?>px; }
            <?php endif; ?>

        <?php endif; ?>

        /* 2 columns - left
        -------------------------------------------------------------- */
        .page-layout-2columns-left .column.main {
            width: 75%;
        }
        .page-layout-2columns-left .sidebar-main {
            width: 25%;
        }
        .page-layout-2columns-left .sidebar-additional {
            width: 25%;
        }

        /* 2 columns - right
        -------------------------------------------------------------- */
        .page-layout-2columns-right .column.main {
            width: 75%;
        }
        .page-layout-2columns-right .sidebar-main {
            width: 25%;
        }
        .page-layout-2columns-right .sidebar-additional {
            width: 25%;
        }

        /* 3 columns
        -------------------------------------------------------------- */
        .page-layout-3columns .column.main {
            width: 75%;
            float: right;
        }
        .page-layout-3columns .sidebar-main {
            width: 25%;
            float: left;
        }
        .page-layout-3columns .sidebar-additional {
            width: 25%;
            padding-right: 2%;
            padding-left: 0;
            clear: left;
            float: left;
        }

        /* Item grid
        -------------------------------------------------------------- */
        <?php echo $helpGrid->getCssGridItem($t->getCfg('category_grid/columns_breakpoint_S')); // 768+ ?>

        /* Item grid - adaptive
           Between breakpoints S and M decrease number of columns
           if default number of columns is 4 or higher.
        -------------------------------------------------------------- */
        /* Item grid: 4 columns */
        .itemgrid-adaptive.itemgrid-4col .item { width:31.3333%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-4col > li:nth-of-type(3n+1) { clear:left !important; }

        /* Item grid: 5 columns */
        .itemgrid-adaptive.itemgrid-5col .item { width:23%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-5col > li:nth-of-type(4n+1) { clear:left !important; }

        /* Item grid: 6 columns */
        .itemgrid-adaptive.itemgrid-6col .item { width:18%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-6col > li:nth-of-type(5n+1) { clear:left !important; }

        /* Item grid: 7 columns */
        .itemgrid-adaptive.itemgrid-7col .item { width:14.6666%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-7col > li:nth-of-type(6n+1) { clear:left !important; }

        /* Item grid: 8 columns */
        .itemgrid-adaptive.itemgrid-8col .item { width:12.2857%; clear:none !important; }
        .itemgrid-adaptive.itemgrid-8col > li:nth-of-type(7n+1) { clear:left !important; }

    }

    <?php endif; ?>





    <?php // Viewport width below breakpoint S ?>

    @media only screen and (max-width: <?php echo $breakpoint['S'] - 1; ?>px) {

        <?php // Stretch containers to full width and remove max width ?>
        .container {
            max-width: none !important;
            width: 100%;
        }
        
        <?php // Below 768px all grid units are stretched (full width) and stack vertically ?>
        .grid12-1,
        .grid12-2,
        .grid12-3,
        .grid12-4,
        .grid12-5,
        .grid12-6,
        .grid12-7,
        .grid12-8,
        .grid12-9,
        .grid12-10,
        .grid12-11,
        .grid12-12,
        .grid-full
        {
            width:100% !important; <?php // Added "!important" to override units with "no-gutter" ?>
            margin-left:0;
            margin-right:0;
        }

        <?php // Basic building units for page columns - below this breakpoint all grid units are stretched full width and stack vertically ?>
        .columns .column.main,
        .columns .sidebar-main,
        .columns .sidebar-additional
        {
            width: 100%;
            margin-left: 0;
            margin-right: 0;
            padding-right: 0;
            padding-left: 0;
        }

        <?php // Vertically aligned grid ?>
        .v-grid-container { display:block; }
        .v-grid { float:inherit; display:block; width:100%; }

    }





    <?php // Viewport width between breakpoints XS and S ?>

    @media only screen and (min-width: <?php echo $breakpoint['XS']; ?>px) and (max-width: <?php echo $breakpoint['S'] - 1; ?>px) {

        /* Item grid
        -------------------------------------------------------------- */
        <?php echo $helpGrid->getCssGridItem($t->getCfg('category_grid/columns_breakpoint_XS')); // 640+ ?>

    }





    <?php // Viewport width below breakpoint XS ?>

    @media only screen and (max-width: <?php echo $breakpoint['XS'] - 1; ?>px) {

        <?php if ($t->getCfg('category_grid/disable_hover_effect') == '640'): ?>
            <?php echo $helpGrid->getCssDisableHoverEffect();  ?>
        <?php endif; ?>

        <?php if ($t->getCfg('category_grid/hide_addto_links') == '640'): ?>
            <?php echo $helpGrid->getCssHideAddtoLinks();  ?>
        <?php endif; ?>

    }





    <?php // Viewport width between breakpoints 2XS and XS ?>

    @media only screen and (min-width: <?php echo $breakpoint['2XS']; ?>px) and (max-width: <?php echo $breakpoint['XS'] - 1; ?>px) {

        /* Item grid
        -------------------------------------------------------------- */
        <?php echo $helpGrid->getCssGridItem($t->getCfg('category_grid/columns_breakpoint_2XS')); // 480+ ?>

    }





    <?php // Viewport width below breakpoint 2XS ?>

    @media only screen and (max-width: <?php echo $breakpoint['2XS'] - 1; ?>px) {

        <?php if ($t->getCfg('category_grid/disable_hover_effect') == '480'): ?>
            <?php echo $helpGrid->getCssDisableHoverEffect();  ?>
        <?php endif; ?>

        <?php if ($t->getCfg('category_grid/hide_addto_links') == '480'): ?>
            <?php echo $helpGrid->getCssHideAddtoLinks();  ?>
        <?php endif; ?>

    }





    <?php // Viewport width between breakpoints 3XS and 2XS ?>

    @media only screen and (min-width: <?php echo $breakpoint['3XS']; ?>px) and (max-width: <?php echo $breakpoint['2XS'] - 1; ?>px) {

        /* Item grid
        -------------------------------------------------------------- */
        <?php echo $helpGrid->getCssGridItem($t->getCfg('category_grid/columns_breakpoint_3XS')); // below 480 ?>

    }





    <?php // Viewport width below breakpoint 3XS ?>

    @media only screen and (max-width: <?php echo $breakpoint['3XS'] - 1; ?>px) {

        <?php if ($t->getCfg('category_grid/disable_hover_effect') == '320'): ?>
            <?php echo $helpGrid->getCssDisableHoverEffect(); ?>
        <?php endif; ?>

        <?php if ($t->getCfg('category_grid/hide_addto_links') == '320'): ?>
            <?php echo $helpGrid->getCssHideAddtoLinks();  ?>
        <?php endif; ?>




        /* Item grid
        -------------------------------------------------------------- */
        /* Always show 1 column */
        /* Important: added ".itemgrid" class to override other styles */
        .itemgrid.itemgrid-adaptive .item { width:98%; clear:none !important; }

    }





    <?php //Deprecated ?>

    @media only screen and (max-width: 1023px) {

        .hide-below-1024 { display:none !important; }

    }

    @media only screen and (max-width: 959px) {

        .hide-below-960 { display:none !important; }

    }

    @media only screen and (max-width: <?php echo $breakpoint['S'] - 1; ?>px) {

        .hide-below-768 { display:none !important; }

    }

    @media only screen and (max-width: <?php echo $breakpoint['2XS'] - 1; ?>px) {

        .hide-below-480 { display:none !important; }

    }


    @media only screen and (max-width: <?php echo $breakpoint['3XS'] - 1; ?>px) {

        .hide-below-320 { display:none !important; }

    }

<?php endif; //end: responsive layout ?>
