/* Breadcrums */
#page_content .trail {
    font-size: 12pt;
}

/* Categories */
.categories_list {
    display         : grid;
    background      : #FFF;
    width           : 100%;
    position        : relative;
    text-align      : center;
    justify-content : center;
    
    grid-template-columns   : repeat(auto-fit, 220px);
    /* grid-template-rows      : repeat(auto-fit, 220px); */
    grid-gap                : 12px;
}
.categories_list .category {
    background      : #FFF;
    box-shadow      : 0px 5px 10px 0px rgba(0,0,0,0.2);
    padding         : 4px;
    transition      : 0.4s;
    align-self      : top;
}
.categories_list .category:hover {
    box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.5);
}
.category a {
    --ah            : 28px;
    display         : block;
    /* width           : 220px; */
    /* height          : 220px; */
    padding         : 4px;
    color           : #333;
    font-size       : 12pt;
    text-align      : center;
    opacity         : 0.8;
}
.category a:hover {
    color   : var(--blue02);
    opacity : 1.0;
}
.category .name {
    /* height  : var(--ah); */
}
.category .category_img {
    max-width   : 100%;
    max-height  : calc( 100% - var(--ah) );
}








/*Page Description*/
.page_description {
    width       : 90%;
    min-width   : 900px;
    left        : 5%;
    margin-top  : 20px;
}
.page_description h2 {
    text-align  : center;
    font-size   : 16pt!important;
}
.page_description {
    font-size   : 12pt;
}










/* Products List */
/*
.product_list .product {
    display     : grid;
    background  : #DDD;
    min-width   : 200px;
    min-height  : 200px;
    max-height  : 200px;
    margin-top  : 20px;
    position    : relative;
    overflow    : hidden;
    grid-template-areas:
        "h h h"
        "a b c"
    ;
}
.product_list .product .h {
    grid-area   : h;
    grid-row    : 1;
    font-size   : 14pt;
}
.product_list .product .b {
    display: grid;
    width:200px;
    grid-template-rows: auto-fill 28px;
    grid-area: a;
}
.product_list .product .b .pic {
    background:red;
    width:100%;
    grid-row:1;
}
.product_list .product .b .pic img {
    display     : block;
    max-width   : 100%;
    max-height  : 100%;
}
.product_list .product .b .mod {
    font-size   : 12pt;
    grid-row    : 2;
}
.product_list .product .info {
    grid-area   : b;
    font-size   : 12pt;
}
.product_list .product .price {
    grid-area   : c;
}
*/
.product {
    --tbh       : 32px;
    --c1w       : 180px;
    --c2w       : 240px;
    --bc        : #EEE;
    background  : #FFF;
    box-shadow  : 0px 0px 0px 2px var(--bc), 0px 8px 10px 0px rgba(0,0,0,0.4);
    min-width   : 300px;
    height      : 300px;
    margin-top  : 20px;
    position    : relative;
    overflow    : hidden;
}
.product .h {
    background  : var(--bc);
    width       : 100%;
    height      : var(--tbh);
    line-height : var(--tbh);
}
.product .h .title {
    width       : 100%;
    padding-left: 10px;
    font-size   : 14pt;
    text-shadow : 0px 4px 2px rgba(0,0,0,0.2);
}
.product .content {
    width       : 100%;
    height      : calc( 100%  - var(--tbh) );
}
.product .content .col {
    display         : inline-block;
    height          : 100%;
    vertical-align  : top;
}
.product .content .col1 {
    width       : 180px;
    overflow    : hidden;
}
.product .content .pic {
    width       : var(--c1w);
    height      : calc(100% - 28px);
}
.product .content .pic a {
    display     : block;
    width       : 100%;
    height      : 100%;
    text-align  : center;
}
.product .content .pic img {
    display     : block;
    max-width   : 100%;
    max-height  : 100%;
    margin      : 0 auto;
}
.product .content .mod {
    width       : 100%;
    height      : 28px;
    position    : absolute;
    bottom      : 0px;
    font-size   : 12pt;
    text-align  : center;
}
.product .content .mod a {
    display     : block;
    color       : var(--blue02);
    transition  : 0.4s;
}
.product .content .mod a:hover {
    text-shadow : 0px 8px 4px #2696FF55, 0px 0px 2px #2696FF;
}

.product .content .col2 {
    width       : calc(100% - var(--c1w) - var(--c2w));
    padding     : 8px 8px 8px 20px;
    font-size   : 12pt;
}
.product .content .col3 {
    width       : var(--c2w);
    position    : absolute;
    right       : 0px;
}
.product .content .price {
    height      : calc(100% - 50px);
}
.product .content .price .lbl,
.product .content .price .val {
    display         : inline-block;
    height          : 28px;
    line-height     : 28px;
    font-size       : 12pt;
    vertical-align  : top;
}
.product .content .price .lbl {
    width           : 120px;
    padding-right   : 8px;
    text-align      : right;
}
.product .content .price1 .val {
    color   : var(--blue01);
}
.product .content .price2 .val {
    color   : var(--red02);
}

.product .content .view {
    width       : 100%;
    height      : 32px;
    text-align  : center;
}
.product .content .view a {
    display         : block;
    background      : #2696FF;
    border-radius   : 14px;
    width           : 120px;
    height          : 28px;
    line-height     : 28px;
    margin          : auto;
    color           : #FFF;
    font-size       : 12pt;
    transition      : 0.4s;
    z-index         : 1;
}
.product .content .view a:hover {
    background  : #2696FF;
    box-shadow  : inset 0px -2px 0px 0px rgba(255,255,255,0.3), 0px 16px 10px -8px #2696FFBB, inset 0px 10px 0px 0px rgba(255,255,255,0.3);
    text-shadow : 0px 0px 5px rgba(255,255,255);
    text-shadow : 0px 2px 1px var(--blueShadow);
    color       : #FFF;
}

.pl_detail {
    display                 : grid;
    grid-template-columns   : 1fr 1fr;
    padding                 : 8px;
}
.pl_detail .product_description {
    color   : #555;
}
.pl_detail .product_specs {
    display                 : grid;
    grid-template-columns   : 1fr 2fr;
    grid-template-rows      : repeat(auto-fill, 1fr);
    grid-column-gap         : 10px;
    grid-row-gap            : 3px;
}
.pl_detail .product_specs :is(.lbl, .val) {
    padding:4px 2px;
}
.pl_detail .product_specs .lbl {
    background      : #DDD;
    padding-right   : 4px;
    text-align      : right;
    font-size       : 9pt;
}
.pl_detail .product_specs .val {
    background  : #DDD;
    padding-left: 4px;
    color       : #444;
    font-size   : 9pt;
}