* { box-sizing: border-box; }

/* simple grid */
.row::after { content: ""; clear: both; display: table;}
[class*="col-"] { float: left; padding: 15px;}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/* Responsive */
@media (max-width: 1000px) {
    /*div.category {display: none!important;}*/
    
}

@media (max-width: 641px) {
    div.category   {display: block!important; width: 90%!important} /* make category and main div one below eachother */
    div.cat_name    {width: 70%!important}   /* widen category name div */
    div.cat_plus    {display: none!important}    /* hide + symbol in category */
    div.main_wrapper{display: block!important}
    ul.sub_cats     {display: none!important}    /* hide subcategory dropdowns */
    div.header_cont     {display: block!important}
    div.logo_cont     {width: 100%!important}
    div.search_cont     { padding-left: 0; padding-right: 0}
    .hide_mobile    {display: none!important}
    div.product_box {width: 95%!important}
    
    /* hide lightbox */
    #jquery-overlay {display: none!important}
    #jquery-lightbox {display: none!important}
    
    [class*="col-"] { float: none!important; padding: 15px; display: block!important; width: 100%!important}
}

/* hide back category leement on large displays */
@media (min-width: 1000px) {
    .back_cat           {display: none!important}
    
}

@font-face          {font-family: 'Share'; font-style: normal; font-weight: 400; src: local('Share'), local('Share-Regular'), url('fonts/share.woff') format('woff');}



body                {font-family: Verdana, Arial, sans-serif !important; font-size: 11px; margin: 0; background: #f9f9f9; height: 100%; width: 100%; min-height: 100vh; display: flex; flex-direction: column}
html                {font-family: Verdana, Arial, sans-serif !important; font-size: 11px; margin: 0; background: #f9f9f9; height: 100%; width: 100%}
table               {font-family: Verdana, Arial, sans-serif; font-size: 11px;}
a                   {color: #004b91; text-decoration: none;}
a:hover             {color: #50b247;}
a.footer            {color: #777}
a.footer:hover      {color: #fff}
a.head              {color: #aaa; padding-left: 10px; margin: 0;}
a.head:hover        {color: #fff}
a.drop              {color: #50b247; padding: 0; margin: 0;}

h3                  {color: #50b247; font-family: 'Share'; margin-bottom: 0; font-size: 20px;}
.selected           {color: #d50000; font-weight: bold}
select              {background: #fff; border: 1px solid #cfd9e6; border-radius: 4px; padding: 4px 6px; color: #333; height: 28px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);} 
select:focus        {outline: none; border-color: #7cb4ff; box-shadow: 0 0 0 2px rgba(124,180,255,0.25);} 
li.drop             {list-style: none; width: auto; margin-bottom: 5px;} 
li.drop:hover       {background: #f1f1f1;}
li.drop             {margin: 0; padding: 5px;}
li                  {list-style: none;}

#lang_ul, #curr_ul  {display: none; width: 150px; position: absolute; background-color: #555; margin: 0; padding: 0; box-shadow: 1px 1px 3px black;}

.lx1                {padding-left: 6px; }
.lx2                {padding-left: 12px; }
.lx3                {padding-left: 18px; }
.lx4                {padding-left: 24px; }
.lx5                {padding-left: 30px; }
.lx6                {padding-left: 36px; }
.lx7                {padding-left: 42px; }
.lx8                {padding-left: 48px; }
.lx9                {padding-left: 54px; }
.lx10               {padding-left: 60px; }

.shadow             {box-shadow: 0 0 10px #CCC;}    
.radial-corner      {border-radius: 10px;}
	

    
div.header_cont     {display: flex;}
div.logo_cont       {height: 50px; width: 250px; display: block; text-align: center}
div.search_cont     {height: 50px; flex: 1;}
div.controls_cont   {height: 80px; width: 200px; display: block; text-align: center}

div.page_shell      {min-height: 100vh; display: flex; flex-direction: column; flex: 1 0 auto;}
div.page_content    {flex: 1 0 auto; display: flex; flex-direction: column; width: 100%;}
div.main_wrapper    {display: flex; width: 100%; flex: 1 0 auto;}
div.header          {width: 100%; height: 100px; background: url('../images/line-repeat.png') top repeat-x #f9f9f9; z-index: 4}
div.body            {flex: 1; display: inline; margin-top: 20px;}
div.centered        {display: block; position: fixed; top: 50%; left: 50%; width: 400px; margin-left: -200px; margin-top: -200px;}
div.category        {top: 0; width: 230px; margin-left: 10px; display: inline-table; margin-top: 20px}
div.product         {width: 98%; height: 135px; float: left; margin: 10px; background: #fff}
div.product_box     {width: 250px; height: 280px; float: left; margin: 10px; background: #fff; position: relative; z-index: 0;}
div.cat_box         {width: 180px; height: 210px; float: left; margin: 10px; background: #fff; box-shadow: 0 0 10px #eee;}
div.cat_box2        {height: 110px; width: 150px; float: left; background: #fff; text-align: center; overflow: hidden}
div.cat_box2 img    {width: 80%;}
div.cat_box3        {width: 400px; height: 177px; float: left; margin: 10px; background: #fff;}
div.product_box_sm  {width: 140px; height: 180px; float: left; margin: 10px; text-align: center; background: white;}
div.product_header  {width: 100%; height: 40px; background: url('../images/line-repeat-inv.png') bottom repeat-x #fff;}
div.pagination      { margin-left: auto; margin-right: auto; width: 100%; height: 40px;  background: url('../images/line-repeat-inv.png') bottom repeat-x #fff; border-top: 1px solid #50b247}
div.lang_div        {position: absolute; background: #fff; width: 60px; height: 180px; padding: 3px;}
div.cart_baloon     {position: absolute; background: url('../images/cart-baloon.png') no-repeat; width: 40px; height: 40px; margin-left: 90px; padding-top: 14px; text-align: center; top: 80px; z-index: 1000;}
div.footer          {width: 100%; background: #1a1818 url('../images/bg_footer.png') repeat-x top; padding: 40px; margin-top: auto; font-size: 16px}

.page_container     {flex: 1 0 auto; width: 100%;}
.page_shell > .footer {margin-top: auto;}

.pager {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    font-size: 16px;
}
.pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #cfd9e6;
    border-radius: 10px;
    background: #fff;
    color: #555;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.pager-btn:hover {
    border-color: #3388ff;
    color: #3388ff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.pager-btn.active {
    background: #3388ff;
    border: none;
    color: #fff;
    box-shadow: 0 2px 6px rgba(124,180,255,0.25);
    font-weight: 700;
}
.pager-btn.disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}
.pager-ellipsis {
    min-width: 18px;
    text-align: center;
    color: #7a8896;
}

div.nav             {width: 100%; height: 30px; background: #f9f9f9; z-index: 5;}
div.spacer          {height: 100px; width: 100%;float: left;}
.clearfix { display: block; }
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
div.fader           {position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: #000; z-index: 1400;  opacity: 0.8;}
div.closebtn        {position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; background: #ff0000; text-align: center; font-size: 16px; font-weight: bold; color: white; cursor: pointer}


img                 {border: none}


.price              {color: #555; font-size: 19px; font-family: 'Share';}
h1                  {color: #555; font-size: 25px; font-family: fantasy;}

.breadcrumb         {padding-left: 20px; font-size: 13px; }

/* Search */
td.search-corner    {width: 7px;  height: 36px; background: none;}
td.search-repeat    {height: 36px; background: none;}
td.search-btn       {width: 51px; height: 36px;}
input.search        {width: 100%; background: none; border: none; height: 30px; font-size: 13px}
input.btn-search    {background: none; width: 51px; height: 36px; border: none; cursor: pointer;}


/* Login */

input.login         {margin: 2px; width: 100px; color: #777; font-size: 9px}
input.btn-login     {background: url('../images/btn_login.png') no-repeat; width: 60px; height: 60px; border: none; cursor: pointer;}
input.btn-logout    {background: url('../images/btn_logout.png') no-repeat; width: 60px; height: 60px; border: none; cursor: pointer;}
input.trash         {background: url('../images/icon-trash.png') no-repeat; width: 30px; height: 30px; border: none; cursor: pointer;}


/* buttons */
.btn_addcart        {background: url('../images/btn_add_cart.png') no-repeat center; width: 45px ; height: 25px; cursor: pointer; border: none;}
.btn-go             {background: url('../images/btn_go.png') no-repeat center; width: 30px ; height: 30px;border: none; cursor: pointer;}
.btn-info           {background: url('../images/btn_info.png') no-repeat center; width: 45px ; height: 25px; cursor: pointer}
.btn-admin          {background: url('../images/btn_admin.png') no-repeat center; width: 60px ; height: 60px; border: none; cursor: pointer}

.button             {background: url('../images/button.png') no-repeat top left; border: 1px solid white; cursor: pointer; color: white; padding: 4px; text-align: center; box-shadow: 1px 1px 3px black;
					border-radius: 5px;}
.button:hover       {color: #50b247;}


.hidden             {visibility: hidden;}
.visible            {visibility: visible;}
.border             {box-shadow: 0 0 10px blue;}


hr                  {border: none; border-bottom: 1px solid #d9d9d9;}

tr.row:hover        {background: #e1e1e9}
tr.rowodd           {background: #f1f1f1}
tr.rowodd:hover     {background: #e1e1e9}




/* vertical menu dropdown */

    /*VERTICAL MENU*/       nav.vertical{ position: relative; width: 100%; z-index: 100; }
    /* ALL UL */            nav.vertical ul{ margin: 0; padding: 0; list-style: none; box-shadow: 0 0 10px #CCC; }
    /* ALL LI */            nav.vertical li{ position: relative; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc}
    /* ALL A */             nav.vertical a{ display: block; color: #004b91; text-decoration: none; padding-left: 10px; padding-top: 5px; padding-bottom: 5px; background: #fff; transition: 0.2s; }
    /* ALL A HOVER */       nav.vertical li:hover > a{ background: #eee; }
    /* INNER UL HIDE */     nav.vertical ul ul{ position: absolute; left: 0; top: 0; width: 100%; visibility: hidden; opacity: 0; transition: transform 0.2s; transform: translateX(50px); }
    /* INNER UL SHOW */     nav.vertical li:hover > ul{ left: 100%; visibility: visible; opacity: 1; transform: translateX(0px); }
                            nav.vertical div {display: inline-table}

/* horisontal dropdown menu */                            
#primary_nav_wrap { z-index: 1050 }
#primary_nav_wrap ul { list-style: none; margin: 0; padding: 0 }
#primary_nav_wrap ul a { display: block; color: #aaa; text-decoration: none; font-weight: 700; font-size: 12px; line-height: 32px; padding: 0 15px; font-family: "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif }
#primary_nav_wrap ul li { position: relative; margin: 0; padding: 0 }
#primary_nav_wrap ul li.current-menu-item { background: #ddd }
#primary_nav_wrap ul li:hover { background: #f6f6f6; transition: 0.2s;}
#primary_nav_wrap ul ul.left { display: none; position: absolute; top: 100%; left: 0; background: #fff; padding: 0; box-shadow: 0 0 10px #CCC;  z-index: 1051; transition: 0.2s; text-align: left}
#primary_nav_wrap ul ul.right { display: none; position: absolute; top: 100%; right: 0; background: #fff; padding: 0; box-shadow: 0 0 10px #CCC;  z-index: 1051; transition: 0.2s; text-align: left}
#primary_nav_wrap ul ul li { float: none; width: 200px;}
#primary_nav_wrap ul ul li.current-menu-item { background: #50b247 }
#primary_nav_wrap ul ul a { line-height: 120%; padding: 10px 15px; color: #555 }
#primary_nav_wrap ul ul ul { top: 0; left: 100% }
#primary_nav_wrap ul li:hover > ul { display: block; transition: 0.2s;}


/**********/
/* ADMIN */


/* Menu Buttons */
div.menu_btn        {height: 20px; padding-top: 5px; text-align: center;}
td.menu_btn         {border: solid 1px #ddd; width: 100px; }
td.menu_btn:hover   {background: #ddd}
td.selected         {background: #aaccff}
td.delimiter        {background: url(../images/delimiter.png) no-repeat transparent center; width: 20px;}



/* Input Field validation icons */
.valid              {background: url('../images/icon-valid.png') no-repeat center; width: 15px }
.invalid            {background: url('../images/icon-invalid.png') no-repeat center; width: 15px }

.pagebreak { page-break-before: always; } /* page-break-after works, as well


/* responsive content */
.content-wrapper { overflow: hidden; width: 100%}
.content-wrapper div { min-height: 200px; padding: 10px;}

#content-one { float: left; margin-right: 20px; width: 50%;  }
#content-two { background-color: white; overflow: hidden; margin: 10px; min-height: 170px;}

@media screen and (max-width: 400px) {  
    #content-one { float: none; margin-right: 0; width: auto; border: 0; border-bottom: 1px solid #ccc; }
}

/* Modern topbar + drawer */
.topbar-modern {
    --topbar-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 14px;
    background: #222;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    position: sticky;
    top: 0;
    z-index: 1100;
    font-size: 14px
}
.topbar-modern > * { flex-shrink: 0; }
.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.topbar-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    border-radius: 10px;
    background: none;
}
.topbar-logo img {
    height: 36px;
    width: auto;
    display: block;
}
.topbar-link {
    color: #4a5a6a;
    padding: 6px 8px;
    border-radius: 8px;

}
.topbar-link:hover { background: #eef2f6; color: #3388ff }
.topbar-link.active,
.topbar-logo.active {
    background: #3388ff;
    color: #fff;
}
.topbar-search {
    flex: 1 1 380px;
    padding: 2px 6px;
    min-width: 260px;
}
.topbar-search-form { width: 100%; }
.topbar-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 1px solid #e5e8ec;
    border-radius: 12px;
    background: #fff;
    padding-left: 10px;
}
.topbar-search-input {
    flex: 1;
    height: 40px;
    border: none;
    background: transparent;
    font-size: 14px;
    padding: 0 4px;
}
.topbar-search-input:focus { outline: none; }
.topbar-search-select {
    min-width: 150px;
    height: 30px;
    border: 1px solid #e5e8ec;
    border-radius: 10px;
    background: #f8fafc;
    padding: 0 10px;
    font-size: 13px;
}
.topbar-search-select:focus { outline: none; border-color: #3388ff; box-shadow: 0 0 0 2px rgba(51,136,255,0.12); }
.topbar-search-submit {
    height: 40px;
    width: 44px;
    border: none !important;
    font-size: 16px;
    background: #3388ff !important;
    color: white !important;
}
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.icon-btn {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid #e5e8ec;
    background: #fff;
    color: #555;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.icon-btn:hover { background-color: green}
.icon-btn.active {
    background: #3388ff;
    border-color: #3388ff;
    color: #fff;
    box-shadow: 0 6px 16px rgba(51,136,255,0.25);
}
.icon-btn .icon { font-size: 18px; }
.hamburger { display: none; }
.badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    padding: 2px 6px;
    background: #e53935;
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 1098;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.nav-backdrop { z-index: 1090; }
.nav-backdrop.open { opacity: 1; pointer-events: auto; }

.drawer {
    position: fixed;
    top: var(--topbar-height, 60px);
    right: 0;
    width: 400px;
    max-width: 100%;
    height: calc(100vh - var(--topbar-height, 60px));
    background: #fff;
    box-shadow: -8px 0 24px rgba(0,0,0,0.12);
    transform: translateX(110%);
    transition: transform 0.28s ease;
    z-index: 1099;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #e5e8ec;
}
.drawer-backdrop { top: var(--topbar-height, 60px); height: calc(100vh - var(--topbar-height, 60px)); }
.drawer.open { transform: translateX(0); }
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid #e5e8ec;
    gap: 12px;
}
.drawer-header { display: none; }
.drawer-tabs { display: none; }
.drawer-close {
    border: 1px solid #e5e8ec;
    background: #fff;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    cursor: pointer;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}
.drawer-body { padding: 18px; overflow-y: auto; flex: 1; }
.drawer-panel h3 { margin: 0 0 10px; }
.drawer-panel { display: none; }
.drawer-panel.active { display: block; }
.drawer-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.drawer-form input[type="text"],
.drawer-form input[type="password"] {
    width: 100%; padding: 10px 12px; margin-top: 4px; margin-bottom: 10px;
    border: 1px solid #d5dce3; border-radius: 8px;
}
.drawer-form label { display: block; font-weight: 600; color: #1f2b38; }
.drawer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.setting-block { margin-bottom: 10px; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid #d5dce3;
    margin: 4px 6px 0 0;
    color: #1f2b38;
    font-weight: 600;
}
.chip.active { background: #2d86f6; color: #fff; border-color: #2d86f6; }
.muted { color: #5b6b7a; font-size: 12px; margin-bottom: 6px; }

.mini-cart-list { margin: 10px 0 6px; display: flex; flex-direction: column; gap: 10px; }
.mini-cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid #e5e8ec;
    border-radius: 10px;
    background: #f9fbfd;
}
.mini-cart-name { font-weight: 700; color: #1f2b38; }
.mini-cart-meta { color: #5b6b7a; font-size: 12px; }
.mini-cart-remove button {
    background: none;
    border: 1px solid #e5e8ec;
    border-radius: 10px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    color: #d32f2f;
}
.mini-cart-remove button:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.mini-cart-more { font-size: 12px; color: #5b6b7a; padding: 0 2px; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
}
.btn.primary { background: #2d86f6; color: #fff; border-color: #2d86f6; }
.btn.ghost { background: #f6f8fb; color: #1f2b38; border-color: #e5e8ec; }

.no-scroll { overflow: auto !important; }

.mobile-nav {
    position: fixed;
    top: var(--topbar-height, 60px);
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    transform: translateY(-110%);
    transition: transform 0.22s ease;
    z-index: 1091;
    display: flex;
    flex-direction: column;
}
.mobile-nav a {
    padding: 14px 16px;
    border-bottom: 1px solid #e5e8ec;
    color: #1f2b38;
    font-weight: 700;
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav.open { transform: translateY(0); }

@media (max-width: 1200px) {
    .topbar-modern {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "hamburger logo actions"
            "search search search";
        align-items: center;
        gap: 8px 12px;
    }
    .hamburger { display: inline-flex; grid-area: hamburger; justify-self: start; }
    .topbar-left { display: flex; grid-area: logo; flex: 0 1 auto; justify-content: center; }
    .topbar-actions { grid-area: actions; justify-self: end; }
    .topbar-search { grid-area: search; flex: 0 0 100%; width: 100%; padding: 4px 0 0; }
    .drawer { width: 440px; max-width: 100%; top: var(--topbar-height, 60px); height: calc(100vh - var(--topbar-height, 60px)); }
    .drawer-backdrop { top: var(--topbar-height, 60px); height: calc(100vh - var(--topbar-height, 60px)); }
}
@media (max-width: 900px) {
    .topbar-modern { grid-template-columns: auto 1fr auto; grid-template-areas:
        "hamburger logo actions"
        "search search search"; }
    .topbar-left { display: flex; grid-area: logo; justify-content: center; }
    .topbar-actions { grid-area: actions; justify-self: end; }
    .drawer { width: 100%; }
}
.sort-bar {
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 5px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.sort-title {
    font-weight: 700;
    color: #4a5a6a;
}
.sort-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sort-select {
    width: 180px;
    max-width: 100%;
    height: 36px;
    border: 1px solid #cfd9e6;
    border-radius: 8px;
    padding: 0 10px;
    background: #fff;
    color: #1f2b38;
}
.sort-select:focus {
    outline: none;
    border-color: #3388ff;
    box-shadow: 0 0 0 2px rgba(51,136,255,0.12);
}
@media (max-width: 768px) {
    .sort-title { display: none; }
    .sort-controls { width: 100%; justify-content: space-between; }
    .sort-select { flex: 1 1 48%; min-width: 150px; }
}