body { padding: 0px; font-family: Arial;}
a { color: #2162a1}
header {}
header .navbar {justify-content: center; padding: 1rem;}
ol.breadcrumb { padding: 1rem; list-style: none; text-align: center; font-size: 11px;}
ol.breadcrumb li { display: inline-block; }
.navbar { text-align: center;}
.nav-tabs { list-style: none; text-align: center; margin: 0px; padding: 1rem;}
.nav-tabs li { display: inline-block;}

.container { border:1px solid #333; max-width: 900px; margin: auto;}


/* List Item  */
.product-list {
    padding: 3rem 1rem;
}

.product-list .row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    justify-items: center;
}

.product-list .row .col {
    width: 100%;
    max-width: 300px;
    height: 100%;
    box-sizing: border-box;
}

.product-item {
    height: 100%;
    padding: 1rem;
    box-sizing: border-box;
    background: #ffffff;
    border:1px solid #ccc;
    border-top:1px solid #ededed;
    border-left:1px solid #ededed;
    border-radius: 5px;
}

.product-item a { display: block;  text-decoration: none; font-weight: bold;}
.product-item a:hover { color: #ED1C24;}
.product-item a img {margin:auto; margin-bottom: 35px; max-height: 220px; max-width: 100%; display: block;}
.product-item .shop-logo { text-align: center;}

.product-item .price-discount-wrap {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: stretch;
    padding: 1rem 0px;
}

.product-item .price-info,
.product-item .discount-info {
    flex: 1;
}

.product-item .price-info { display:flex; flex-direction: column;}
.product-item .price-format { display: block;}
.product-item .price-format .price { color: #ED1C24;}
.product-item .price-format .price .value { font-size: 1.25rem; font-weight: bold;}
.product-item .price-format .price .penny { font-size: 0.85rem;}
.product-item .price-format .price .currency { font-size: 0.65rem; padding-left: 3px;}

.product-item .price-format .was {}
.product-item .price-format .was .value { font-size: .85rem;}
.product-item .price-format .was .penny { font-size: .85rem;}
.product-item .price-format .was .currency { font-size: .65rem; padding-left: 3px;}

.product-item .discount-info {display:flex; display: flex; flex-direction: column; align-items: end;}
.product-item .discount-info .discount { display: block; color: #198754;}
.product-item .discount-info .discount .minus {}
.product-item .discount-info .discount .value { font-size: 1rem; font-weight: bold}
.product-item .discount-info .discount .penny { font-size: 0.85rem;}
.product-item .discount-info .discount .currency { font-size: 0.65rem; padding-left: 3px;}
.product-item .discount-info .discount_percent { display: block; font-size: 0.85rem;}
.product-item .discount-info .discount_percent .unit {}

/* List Item  */


/* Category Detail */

.category {}
.categories { padding: 5rem 0px; margin-bottom: 2rem;}
.categories h1 { text-align: center;}
.list-category ul { list-style: none; padding: 0px; margin: 0px; text-align: center;}
.list-category ul li { display: inline-block;}
.list-category ul li a { color: #333; text-decoration: none; padding: .55rem .85rem; display: block; border: 1px solid #fafafa; border-radius: 5px; margin: 3px;}
.list-category ul li a:hover { background: #fafafa;}

ul.level-0 { font-weight: bold;}
ul.level-0 li.active a { color: #ffffff; background: #2162a1;}
ul.level-1 { margin-top: 15px;}
ul.level-1 li.active a { color: #ffffff; background: #2162a1;}

/* Category Detail */


/* Product Detail */

.product-info { padding: 3rem 0px; text-align: center;}
.product-info h1 { padding: 2rem 0px;}
.product-info h1 a { text-decoration: none; font-weight: bold; color: #333;}
.product-info h1 a:hover { color: #666;}
.product-info img { max-width: 100%;}

#shops {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: auto;
    border: 1px solid #ededed;
}
#shops > div.offer {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-top: 2px solid #ededed;
    border-bottom: 1px solid #ccc;

}

#shops div.logo { flex: auto;}
#shops div.product-condition { flex: 1 1 auto;display:flex; flex-direction: column; font-size: .85rem; padding: 0px 1rem;}
#shops div.product-condition ul { margin: 0px; padding: 0px; list-style: none;}
#shops div.product-condition ul li { margin-bottom: 5px;}
#shops .price-discount-wrap { padding: 0px 1rem;}
#shops .price-discount-wrap div.discount-info { flex: 1 1 auto;}
#shops .price-discount-wrap div.price-info { flex: 1 1 auto; }
#shops div.cta { flex: 0 0 auto; }

#shops img {
    max-width: 100px;
    height: auto;
}
#shops a {
    padding: 0.85rem 1.25rem;
    text-transform: uppercase;
    color: #fff;
    background-color: #ED1C24;
    text-decoration: none;
    border-radius: 0px;
    display: block;
    text-align: center;
    font-size: .85rem; font-weight: bold;
}
#shops a:hover {
    background-color: #000000;
}

.offer .price-info { display:flex; flex-direction: column; align-items: flex-end;}
.offer .price-format { display: block;}
.offer .price-format .price .value { font-size: 1.25rem; font-weight: bold; color: #ED1C24;}
.offer .price-format .was .value { font-size: .85rem;}
.offer .price-format .price .penny { font-size: .85rem;}
.offer .price-format .was .penny { font-size: .85rem;}
.offer .price-format .price .currency { font-size: 0.65rem; padding-left: 3px;}
.offer .price-format .was .currency { font-size: .65rem; padding-left: 3px;}

.offer .discount-info {display:flex; flex-direction: column; align-items: flex-end;}
.offer .discount-info .discount { display: block; color: #198754;}
.offer .discount-info .discount .text {}
.offer .discount-info .discount .value { font-size: 1.25rem; font-weight: bold;}
.offer .discount-info .discount .penny { font-size: 0.85rem;}
.offer .discount-info .discount .currency { font-size: 0.65rem; padding-left: 3px;}
.offer .discount-info .discount_percent { display: block; font-size: 0.85rem;}



@media (max-width: 768px) {
    #shops > div.offer {
        flex-direction: column;
        align-items: stretch;
    }

    #shops .price-discount-wrap {display: flex;
        justify-content: space-between;
        gap: 1rem;
        align-items: stretch;
        padding:1rem 0px;}

    #shops .price-discount-wrap div.discount-info { flex: 1 1 auto;    flex-direction: column;
        align-items: start;}
    #shops .price-discount-wrap div.price-info { flex: 1 1 auto;}

    #shops div.product-condition {
        order: 10;
        display: block;
        padding: 1rem 0px;
    }
}




/* Offer */