/* === Mini Bootstrap-like Grid & Utilities for OpenCart === */
/* Author: you | Drop into catalog/view/theme/.../stylesheet/bootstrap-lite.css */

/* ----- Base / variables ----- */
:root{
    /* Breakpoints */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    --bp-xxl: 1400px;

    /* Gutters */
    --gutter-x: 1.5rem;
    --gutter-y: 0;
}

/* Box sizing + simple normalize */
*,*::before,*::after{ box-sizing: border-box; }
img,svg,video,canvas{ max-width:100%; height:auto; }
hr{ box-sizing: content-box; height:0; overflow:visible; }

/* ----- Containers ----- */
.container,
.container-fluid{
    width:100%;
    padding-right: calc(var(--gutter-x) / 2);
    padding-left:  calc(var(--gutter-x) / 2);
    margin-right:auto;
    margin-left:auto;
}

.container{
    max-width:100%;
}
@media (min-width: var(--bp-sm)){ .container{ max-width:540px; } }
@media (min-width: var(--bp-md)){ .container{ max-width:720px; } }
@media (min-width: var(--bp-lg)){ .container{ max-width:960px; } }
@media (min-width: var(--bp-xl)){ .container{ max-width:1140px; } }
@media (min-width: var(--bp-xxl)){ .container{ max-width:1320px; } }

/* ----- Rows (with gutters via CSS vars) ----- */
.row{
    display:flex;
    flex-wrap:wrap;
    margin-right: calc(var(--gutter-x) / -2);
    margin-left:  calc(var(--gutter-x) / -2);
    row-gap: var(--gutter-y);
}

/* ----- Columns ----- */
.col{
    flex: 1 0 0%;
    padding-right: calc(var(--gutter-x) / 2);
    padding-left:  calc(var(--gutter-x) / 2);
    min-width:0;
}
.col-auto{
    flex: 0 0 auto;
    width:auto;
    padding-right: calc(var(--gutter-x) / 2);
    padding-left:  calc(var(--gutter-x) / 2);
}

/* Fixed width columns 1..12 */
[class^="col-"], [class*=" col-"]{
    padding-right: calc(var(--gutter-x) / 2);
    padding-left:  calc(var(--gutter-x) / 2);
}

.col-1{  flex:0 0 auto; width:8.333333%; }
.col-2{  flex:0 0 auto; width:16.666667%; }
.col-3{  flex:0 0 auto; width:25%; }
.col-4{  flex:0 0 auto; width:33.333333%; }
.col-5{  flex:0 0 auto; width:41.666667%; }
.col-6{  flex:0 0 auto; width:50%; }
.col-7{  flex:0 0 auto; width:58.333333%; }
.col-8{  flex:0 0 auto; width:66.666667%; }
.col-9{  flex:0 0 auto; width:75%; }
.col-10{ flex:0 0 auto; width:83.333333%; }
.col-11{ flex:0 0 auto; width:91.666667%; }
.col-12{ flex:0 0 auto; width:100%; }

/* Offsets */
.offset-1{  margin-left:8.333333%; }
.offset-2{  margin-left:16.666667%; }
.offset-3{  margin-left:25%; }
.offset-4{  margin-left:33.333333%; }
.offset-5{  margin-left:41.666667%; }
.offset-6{  margin-left:50%; }
.offset-7{  margin-left:58.333333%; }
.offset-8{  margin-left:66.666667%; }
.offset-9{  margin-left:75%; }
.offset-10{ margin-left:83.333333%; }
.offset-11{ margin-left:91.666667%; }

/* ----- Responsive columns (sm / md / lg / xl / xxl) ----- */
@media (min-width: var(--bp-sm)){
    .col-sm{ flex:1 0 0%; }
    .col-sm-auto{ flex:0 0 auto; width:auto; }
    .col-sm-1{ width:8.333333%; flex:0 0 auto; } .col-sm-2{ width:16.666667%; flex:0 0 auto; }
    .col-sm-3{ width:25%; flex:0 0 auto; }     .col-sm-4{ width:33.333333%; flex:0 0 auto; }
    .col-sm-5{ width:41.666667%; flex:0 0 auto; }.col-sm-6{ width:50%; flex:0 0 auto; }
    .col-sm-7{ width:58.333333%; flex:0 0 auto; }.col-sm-8{ width:66.666667%; flex:0 0 auto; }
    .col-sm-9{ width:75%; flex:0 0 auto; }      .col-sm-10{ width:83.333333%; flex:0 0 auto; }
    .col-sm-11{ width:91.666667%; flex:0 0 auto;}.col-sm-12{ width:100%; flex:0 0 auto; }
    .offset-sm-1{ margin-left:8.333333%; } .offset-sm-2{ margin-left:16.666667%; }
    .offset-sm-3{ margin-left:25%; } .offset-sm-4{ margin-left:33.333333%; }
    .offset-sm-5{ margin-left:41.666667%; } .offset-sm-6{ margin-left:50%; }
    .offset-sm-7{ margin-left:58.333333%; } .offset-sm-8{ margin-left:66.666667%; }
    .offset-sm-9{ margin-left:75%; } .offset-sm-10{ margin-left:83.333333%; }
    .offset-sm-11{ margin-left:91.666667%; }
}
@media (min-width: var(--bp-md)){
    .col-md{ flex:1 0 0%; }
    .col-md-auto{ flex:0 0 auto; width:auto; }
    .col-md-1{ width:8.333333%; flex:0 0 auto; } .col-md-2{ width:16.666667%; flex:0 0 auto; }
    .col-md-3{ width:25%; flex:0 0 auto; }       .col-md-4{ width:33.333333%; flex:0 0 auto; }
    .col-md-5{ width:41.666667%; flex:0 0 auto; }.col-md-6{ width:50%; flex:0 0 auto; }
    .col-md-7{ width:58.333333%; flex:0 0 auto; }.col-md-8{ width:66.666667%; flex:0 0 auto; }
    .col-md-9{ width:75%; flex:0 0 auto; }      .col-md-10{ width:83.333333%; flex:0 0 auto; }
    .col-md-11{ width:91.666667%; flex:0 0 auto;}.col-md-12{ width:100%; flex:0 0 auto; }
    .offset-md-1{ margin-left:8.333333%; } .offset-md-2{ margin-left:16.666667%; }
    .offset-md-3{ margin-left:25%; } .offset-md-4{ margin-left:33.333333%; }
    .offset-md-5{ margin-left:41.666667%; } .offset-md-6{ margin-left:50%; }
    .offset-md-7{ margin-left:58.333333%; } .offset-md-8{ margin-left:66.666667%; }
    .offset-md-9{ margin-left:75%; } .offset-md-10{ margin-left:83.333333%; }
    .offset-md-11{ margin-left:91.666667%; }
}
@media (min-width: var(--bp-lg)){
    .col-lg{ flex:1 0 0%; }
    .col-lg-auto{ flex:0 0 auto; width:auto; }
    .col-lg-1{ width:8.333333%; flex:0 0 auto; } .col-lg-2{ width:16.666667%; flex:0 0 auto; }
    .col-lg-3{ width:25%; flex:0 0 auto; }       .col-lg-4{ width:33.333333%; flex:0 0 auto; }
    .col-lg-5{ width:41.666667%; flex:0 0 auto; }.col-lg-6{ width:50%; flex:0 0 auto; }
    .col-lg-7{ width:58.333333%; flex:0 0 auto; }.col-lg-8{ width:66.666667%; flex:0 0 auto; }
    .col-lg-9{ width:75%; flex:0 0 auto; }      .col-lg-10{ width:83.333333%; flex:0 0 auto; }
    .col-lg-11{ width:91.666667%; flex:0 0 auto;}.col-lg-12{ width:100%; flex:0 0 auto; }
    .offset-lg-1{ margin-left:8.333333%; } .offset-lg-2{ margin-left:16.666667%; }
    .offset-lg-3{ margin-left:25%; } .offset-lg-4{ margin-left:33.333333%; }
    .offset-lg-5{ margin-left:41.666667%; } .offset-lg-6{ margin-left:50%; }
    .offset-lg-7{ margin-left:58.333333%; } .offset-lg-8{ margin-left:66.666667%; }
    .offset-lg-9{ margin-left:75%; } .offset-lg-10{ margin-left:83.333333%; }
    .offset-lg-11{ margin-left:91.666667%; }
}
@media (min-width: var(--bp-xl)){
    .col-xl{ flex:1 0 0%; }
    .col-xl-auto{ flex:0 0 auto; width:auto; }
    .col-xl-1{ width:8.333333%; flex:0 0 auto; } .col-xl-2{ width:16.666667%; flex:0 0 auto; }
    .col-xl-3{ width:25%; flex:0 0 auto; }       .col-xl-4{ width:33.333333%; flex:0 0 auto; }
    .col-xl-5{ width:41.666667%; flex:0 0 auto; }.col-xl-6{ width:50%; flex:0 0 auto; }
    .col-xl-7{ width:58.333333%; flex:0 0 auto; }.col-xl-8{ width:66.666667%; flex:0 0 auto; }
    .col-xl-9{ width:75%; flex:0 0 auto; }      .col-xl-10{ width:83.333333%; flex:0 0 auto; }
    .col-xl-11{ width:91.666667%; flex:0 0 auto;}.col-xl-12{ width:100%; flex:0 0 auto; }
    .offset-xl-1{ margin-left:8.333333%; } .offset-xl-2{ margin-left:16.666667%; }
    .offset-xl-3{ margin-left:25%; } .offset-xl-4{ margin-left:33.333333%; }
    .offset-xl-5{ margin-left:41.666667%; } .offset-xl-6{ margin-left:50%; }
    .offset-xl-7{ margin-left:58.333333%; } .offset-xl-8{ margin-left:66.666667%; }
    .offset-xl-9{ margin-left:75%; } .offset-xl-10{ margin-left:83.333333%; }
    .offset-xl-11{ margin-left:91.666667%; }
}
@media (min-width: var(--bp-xxl)){
    .col-xxl{ flex:1 0 0%; }
    .col-xxl-auto{ flex:0 0 auto; width:auto; }
    .col-xxl-1{ width:8.333333%; flex:0 0 auto; } .col-xxl-2{ width:16.666667%; flex:0 0 auto; }
    .col-xxl-3{ width:25%; flex:0 0 auto; }       .col-xxl-4{ width:33.333333%; flex:0 0 auto; }
    .col-xxl-5{ width:41.666667%; flex:0 0 auto; }.col-xxl-6{ width:50%; flex:0 0 auto; }
    .col-xxl-7{ width:58.333333%; flex:0 0 auto; }.col-xxl-8{ width:66.666667%; flex:0 0 auto; }
    .col-xxl-9{ width:75%; flex:0 0 auto; }      .col-xxl-10{ width:83.333333%; flex:0 0 auto; }
    .col-xxl-11{ width:91.666667%; flex:0 0 auto;}.col-xxl-12{ width:100%; flex:0 0 auto; }
    .offset-xxl-1{ margin-left:8.333333%; } .offset-xxl-2{ margin-left:16.666667%; }
    .offset-xxl-3{ margin-left:25%; } .offset-xxl-4{ margin-left:33.333333%; }
    .offset-xxl-5{ margin-left:41.666667%; } .offset-xxl-6{ margin-left:50%; }
    .offset-xxl-7{ margin-left:58.333333%; } .offset-xxl-8{ margin-left:66.666667%; }
    .offset-xxl-9{ margin-left:75%; } .offset-xxl-10{ margin-left:83.333333%; }
    .offset-xxl-11{ margin-left:91.666667%; }
}

/* ----- Gutters utilities (set CSS vars) ----- */
.g-0 { --gutter-x:0; --gutter-y:0; }
.g-1 { --gutter-x:.25rem; --gutter-y:.25rem; }
.g-2 { --gutter-x:.5rem;  --gutter-y:.5rem; }
.g-3 { --gutter-x:1rem;   --gutter-y:1rem; }
.g-4 { --gutter-x:1.5rem; --gutter-y:1.5rem; }
.g-5 { --gutter-x:3rem;   --gutter-y:3rem; }

.gx-0{ --gutter-x:0; } .gy-0{ --gutter-y:0; }
.gx-1{ --gutter-x:.25rem; } .gy-1{ --gutter-y:.25rem; }
.gx-2{ --gutter-x:.5rem; }  .gy-2{ --gutter-y:.5rem; }
.gx-3{ --gutter-x:1rem; }   .gy-3{ --gutter-y:1rem; }
.gx-4{ --gutter-x:1.5rem; } .gy-4{ --gutter-y:1.5rem; }
.gx-5{ --gutter-x:3rem; }   .gy-5{ --gutter-y:3rem; }

/* ----- Display utilities ----- */
.d-none{ display:none !important; }
.d-block{ display:block !important; }
.d-inline{ display:inline !important; }
.d-inline-block{ display:inline-block !important; }
.d-flex{ display:flex !important; }
.d-inline-flex{ display:inline-flex !important; }

/* ----- Flex utilities ----- */
.flex-row{ flex-direction:row !important; }
.flex-column{ flex-direction:column !important; }
.flex-wrap{ flex-wrap:wrap !important; }
.flex-nowrap{ flex-wrap:nowrap !important; }

.justify-content-start{ justify-content:flex-start !important; }
.justify-content-center{ justify-content:center !important; }
.justify-content-end{ justify-content:flex-end !important; }
.justify-content-between{ justify-content:space-between !important; }
.justify-content-around{ justify-content:space-around !important; }

.align-items-start{ align-items:flex-start !important; }
.align-items-center{ align-items:center !important; }
.align-items-end{ align-items:flex-end !important; }

.align-self-start{ align-self:flex-start !important; }
.align-self-center{ align-self:center !important; }
.align-self-end{ align-self:flex-end !important; }

/* ----- Spacing utilities (0..5) ----- */
/* scale: 0, .25rem, .5rem, 1rem, 1.5rem, 3rem */
.m-0{ margin:0 !important; } .p-0{ padding:0 !important; }
.m-1{ margin:.25rem !important; } .p-1{ padding:.25rem !important; }
.m-2{ margin:.5rem !important; }  .p-2{ padding:.5rem !important; }
.m-3{ margin:1rem !important; }   .p-3{ padding:1rem !important; }
.m-4{ margin:1.5rem !important; } .p-4{ padding:1.5rem !important; }
.m-5{ margin:3rem !important; }   .p-5{ padding:3rem !important; }

.mt-0{ margin-top:0 !important; }       .pt-0{ padding-top:0 !important; }
.me-0{ margin-right:0 !important; }     .pe-0{ padding-right:0 !important; }
.mb-0{ margin-bottom:0 !important; }    .pb-0{ padding-bottom:0 !important; }
.ms-0{ margin-left:0 !important; }      .ps-0{ padding-left:0 !important; }

.mt-1{ margin-top:.25rem !important; }  .pt-1{ padding-top:.25rem !important; }
.me-1{ margin-right:.25rem !important; }.pe-1{ padding-right:.25rem !important; }
.mb-1{ margin-bottom:.25rem !important;}.pb-1{ padding-bottom:.25rem !important; }
.ms-1{ margin-left:.25rem !important; } .ps-1{ padding-left:.25rem !important; }

.mt-2{ margin-top:.5rem !important; }   .pt-2{ padding-top:.5rem !important; }
.me-2{ margin-right:.5rem !important; } .pe-2{ padding-right:.5rem !important; }
.mb-2{ margin-bottom:.5rem !important; }.pb-2{ padding-bottom:.5rem !important; }
.ms-2{ margin-left:.5rem !important; }  .ps-2{ padding-left:.5rem !important; }

.mt-3{ margin-top:1rem !important; }    .pt-3{ padding-top:1rem !important; }
.me-3{ margin-right:1rem !important; }  .pe-3{ padding-right:1rem !important; }
.mb-3{ margin-bottom:1rem !important; } .pb-3{ padding-bottom:1rem !important; }
.ms-3{ margin-left:1rem !important; }   .ps-3{ padding-left:1rem !important; }

.mt-4{ margin-top:1.5rem !important; }  .pt-4{ padding-top:1.5rem !important; }
.me-4{ margin-right:1.5rem !important; }.pe-4{ padding-right:1.5rem !important; }
.mb-4{ margin-bottom:1.5rem !important;}.pb-4{ padding-bottom:1.5rem !important; }
.ms-4{ margin-left:1.5rem !important; } .ps-4{ padding-left:1.5rem !important; }

.mt-5{ margin-top:3rem !important; }    .pt-5{ padding-top:3rem !important; }
.me-5{ margin-right:3rem !important; }  .pe-5{ padding-right:3rem !important; }
.mb-5{ margin-bottom:3rem !important; } .pb-5{ padding-bottom:3rem !important; }
.ms-5{ margin-left:3rem !important; }   .ps-5{ padding-left:3rem !important; }

/* ----- Text utilities ----- */
.text-start{ text-align:left !important; }
.text-center{ text-align:center !important; }
.text-end{ text-align:right !important; }
.text-nowrap{ white-space:nowrap !important; }

/* ----- Order utilities ----- */
.order-first{ order:-1 !important; }
.order-last{ order:999 !important; }
.order-0{ order:0 !important; }
.order-1{ order:1 !important; }
.order-2{ order:2 !important; }
.order-3{ order:3 !important; }
.order-4{ order:4 !important; }
.order-5{ order:5 !important; }

/* ----- Visibility helper for accessibility ----- */
.visually-hidden{
    position:absolute !important;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0);
    white-space:nowrap; border:0;
}