/**
 * Listings classes
 *
 * @package    BardCanvas
 * @subpackage bardcommerce
 * @author     Alejandro Caballero - lava.caballero@gmail.com
 */

/* --------------------------- */
/* Prices - all over the place */
/* --------------------------- */

.price       { font-size: 1.1rem; line-height: normal; white-space: nowrap; }
.price .off  { color: darkred; font-weight: normal; text-decoration: line-through; font-size: 0.9rem;
               vertical-align: top; position: relative; top: .1rem;  }
.price .sale { color: green;   font-weight: bold; }

.price .currency { display: inline-block;
                   font-size: 0.7rem; line-height: 0.7rem;
                   vertical-align: top; margin-top: 0.1rem; margin-right: 1px; }
.price .symbol   {  }

/* ------------- */
/* Some defaults */
/* ------------- */

.product_box          { display: inline-block; box-shadow: 0 0 20px silver; border-radius: 5px; position: relative;
                        background-color: whitesmoke; text-decoration: none;
                        font-family: Arial, Helvetica, sans-serif; }
.product_box.featured { background-color: lightgoldenrodyellow;
                        box-shadow: 0 0 20px rgba(184, 134, 11, 0.5); }

/* ------------------------------------------- */
/* Products grid (records browser on listings) */
/* ------------------------------------------- */

.products_grid              { display: flex; flex-wrap: wrap; justify-content: space-around;
                              align-items: stretch; align-content: stretch; }
.products_grid .product_box { min-width: 240px; width: 100%; margin: 0 0 20px 0; }

@media all and (min-width:  480px) { .products_grid .product_box { width: calc(50% - 20px); margin: 10px; } }
@media all and (min-width:  720px) { .products_grid .product_box { width: calc(33% - 20px); } }
@media all and (min-width: 1024px) { .products_grid .product_box { width: calc(25% - 20px); } }
@media all and (min-width: 1440px) { .products_grid .product_box { width: calc(16% - 20px); } }

.products_grid .product_box          { padding-bottom: 40px; }
.products_grid .product_box .actions { position: absolute; bottom: 0; }

/* ----------------- */
/* Products scroller */
/* ----------------- */

.products_scroller_container                    { display: block; position: relative; padding: 0;
                                                  background-color: ghostwhite; color: dimgrey; }
.products_scroller_container .button            { display: none; } 
.products_scroller_container .button            { position: absolute; width: 16px; text-align: center; 
                                                  color: white; background-color: black; opacity: 0.25;
                                                  font-size: 16px; z-index: 1; cursor: pointer; }
.products_scroller_container .button.left       { top: 0; left:  0; bottom: 0; }
.products_scroller_container .button.right      { top: 0; right: 0; bottom: 0; }
.products_scroller_container .button .fa        { position: absolute; top: 50%; left: 2px; }
.products_scroller_container .button:hover      { opacity: 0.5; }
.products_scroller_container.scrollable .button { display: block; }

.products_scroller                            { display: flex; flex-wrap: nowrap; justify-content: space-between;
                                                align-items: stretch; align-content: stretch;
                                                overflow: auto; overflow-y: hidden; }
.products_scroller .product_box               { width: 240px; margin: 10px; white-space: normal;
                                                /* box-shadow: none; */
                                                flex-shrink: 0; flex-grow: 0; }
.products_scroller .product_box .title        { margin-bottom: calc(1.2em + 5px); }
.products_scroller .product_box .category     { display: none; }
.products_scroller .product_box .product_meta { display: none; }
.products_scroller .product_box .actions      { display: none; }
.products_scroller .product_box .price        { position: absolute; bottom: 5px; right: 5px; padding: 0; }

.bardcommerce_scroller h2:empty { display: none; }

/* ------------------------------------------ */
/* Single product box - for grid and scroller */
/* ------------------------------------------ */

.product_box a:link    { color: black !important; }
.product_box a:visited { color: grey  !important; }
.product_box a:hover   { color: blue  !important; }

.product_box > a, .product_box > span { display: inline-block; width: 100%; }

.product_box .thumbnail                 { display: inline-block; width: 100%; border: none; height: 220px;
                                          background: white center center no-repeat;
                                          border-top-left-radius: 5px; border-top-right-radius: 5px;
                                          background-size: contain; position: relative; }
.product_box:hover                      { background-color: #e7e7e7; }
.product_box.featured:hover             { background-color: palegoldenrod; }
.product_box:hover .thumbnail:after     { display: block; content: '';
                                          position: absolute; top: 0; left: 0; width: 100%; height: 100%;
                                          background-color: rgba(135, 206, 235, 0.25);
                                          border-top-left-radius: 5px; border-top-right-radius: 5px; }
.product_box.featured .thumbnail:before { display: inline-block; position: absolute; top: 0; right: 0;
                                          content: '⭐'; color: goldenrod; font-size: 60px; line-height: 60px; }
.product_box > span                     { padding: 5px 10px 0 10px; display: inline-block; width: 100%;
                                          font-size: 0.9em; line-height: 1.2em; height: calc(1.2em + 5px);
                                          overflow: hidden;
                                          white-space: nowrap; text-overflow: ellipsis; }
.product_box .title                     { display: inline-block; width: 100%; margin: 10px 0; padding: 0 10px;
                                          font-size: 0.9em; line-height: 1.2em; height: 3.6em;
                                          white-space: normal; overflow: hidden; }
.product_box .price                     { display: inline-block; width: 100%; text-align: right;
                                          font-size: 1.1rem; line-height: 1.2rem; height: 1.2rem; padding-right: 10px; }

.product_box .product_meta              { font-size: 0.9rem; line-height: 1.4rem; height: auto;
                                          white-space: normal;  }

.product_box .actions                         { display: flex; flex-wrap: nowrap; margin: 5px 0 0 0; padding: 0;
                                                justify-content: stretch; align-items: stretch; align-content: stretch;
                                                height: auto; }
.product_box .actions .action                 { margin: 0; padding: 5px; text-align: center;
                                                font-family: Arial, Arial, Helvetica, sans-serif;
                                                white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                                                font-size: 10pt; line-height: 24px; height: 34px;
                                                cursor: pointer; }
.product_box .actions .action.add_to_wishlist { flex-shrink: 1; flex-grow: 1;
                                                color: navy; background-color: rgba(135, 206, 235, 0.10);
                                                border-bottom-left-radius:  5px; }
.product_box .actions .action.add_to_cart     { flex-shrink: 1; flex-grow: 1;
                                                color: green; background-color: rgba(173, 255, 47, 0.10);
                                                border-bottom-right-radius: 5px; }

.product_box .actions .action.add_to_wishlist:hover { color: blue;        background-color: rgba(135, 206, 235, 0.5); }
.product_box .actions .action.add_to_cart:hover     { color: forestgreen; background-color: rgba(173, 255, 47, 0.5); }

.products_scroller_container.smaller                         { font-size: 0.9rem; }
.products_scroller_container.smaller .product_box            { width:  200px; font-family: 'Arial Narrow', Arial, Helvetica, sans-serif; }
.products_scroller_container.smaller .product_box .thumbnail { height: 120px; font-family: 'Arial Narrow', Arial, Helvetica, sans-serif; }

.products_scroller_container.smallest                         { font-size: 0.8rem; }
.products_scroller_container.smallest .product_box            { width:  140px; font-family: 'Arial Narrow', Arial, Helvetica, sans-serif; }
.products_scroller_container.smallest .product_box .thumbnail { height: 100px; font-family: 'Arial Narrow', Arial, Helvetica, sans-serif; }
.products_scroller_container.smallest .price                  { font-size: 0.9rem; }
.products_scroller_container.smallest .price .off             { font-size: 0.7rem; top: 0;  }

.product_box .actions .action.add_to_wishlist[disabled] ,
.product_box .actions .action.add_to_cart[disabled]     { filter: grayscale(50%); opacity: 0.5; pointer-events: none; }

/* ------------------ */
/* Scroller for shops */
/* ------------------ */

.products_scroller .shop_box              { text-align: center; width: auto; max-width: calc(50% - 20px); flex-grow: 1; }
.products_scroller .shop_box .title       { height: auto; font-weight: bold; margin-bottom: 0; }
.products_scroller .shop_box .description { height: auto; font-style: italic; }

/* ------------------- */
/* Single product page */
/* ------------------- */

#product_info .main_section                              { display: flex; flex-wrap: nowrap;
                                                           justify-content: space-between;
                                                           align-items: stretch; align-content: stretch; }

#product_info .main_section .media_strip                 { flex-shrink: 0; flex-grow: 0; width: 80px;
                                                           padding-right: 20px; }
#product_info .main_section .media_strip .strip_container { overflow: auto; overflow-x: hidden; }
#product_info .main_section .media_strip .media_item     { display: inline-block; margin-bottom: 10px;
                                                           background: white; border: 1px solid silver;
                                                           cursor: pointer; }
#product_info .main_section .media_strip .media_item img { width: 100%; vertical-align: top; }

#product_info .main_section .product_media               { flex-shrink: 0; width: 40%; min-height: 200px; }
#product_info .main_section .basic_details               { flex-shrink: 1; width: 60%; padding-left: 20px; }


#product_info .main_section .product_media .media_box             { background: white; border: 2px solid silver;
                                                                    width: 100%; height: 100%; max-height: 300px;
                                                                    position: relative; overflow: hidden; }
#product_info .main_section .product_media .media_item            { position: absolute; left: 50%; top: 50%;
                                                                    -webkit-transform: translate(-50%,-50%);
                                                                    -ms-transform:     translate(-50%,-50%);
                                                                    transform:         translate(-50%,-50%); }
#product_info .main_section .product_media .media_item.horizontal { width:  calc(100% - 20px); }
#product_info .main_section .product_media .media_item.vertical   { height: calc(100% - 20px); }

@media all and (max-width: 720px) {
    #product_info .main_section                              { flex-wrap: wrap; }
    #product_info .main_section .media_strip                 { width: 100%; padding: 10px 10px 0 10px;
                                                               margin-bottom: 20px;
                                                               white-space: nowrap; overflow: auto;
                                                               background: white; border: 1px solid black; }
    #product_info .main_section .media_strip .media_item     { display: inline-block; width: auto; padding: 0;
                                                               margin: 0 10px 10px 0; }
    #product_info .main_section .media_strip .media_item img { width: auto; height: 60px; margin: 0; }
}

@media all and (max-width: 600px) {
    #product_info .main_section .product_media { width: 100%; }
    #product_info .main_section .basic_details { width: 100%; margin-top: 20px; padding-left: 0; }
    #product_info .main_section .product_media .media_box { height: 50vh; max-height: none; }
}

#product_info .main_section .media_strip .media_item:hover {
    box-shadow: 0 0 5px dimgrey;
}
#product_info .main_section .media_strip .media_item.selected {
    border-color: black; box-shadow: 0 0 5px greenyellow;
}
#product_info .main_section .media_strip .media_item.selected:hover {
    box-shadow: 0 0 5px mediumseagreen;
}

#product_info .main_section .basic_details > *            { margin-top:    0; }
#product_info .main_section .basic_details > *:last-child { margin-bottom: 0; }

#product_info .x_by          { overflow: hidden; line-height: 1.2em; white-space: nowrap; }
#product_info .x_by img      { float: left; height: 2.8em; margin-right: 10px; }
#product_info .x_by .caption , 
#product_info .x_by .link    { display: inline-block; white-space: nowrap; overflow: hidden;
                               text-overflow: ellipsis; }

#product_info .add_buttons                  { text-align: center; }
#product_info .add_buttons button           { margin: 10px; }
#product_info .add_buttons .add_to_cart     { font-size: 1.1em; }
#product_info .add_buttons .add_to_wishlist {  }

#product_info .variant_options                         { margin: 20px 0; border: 1px solid silver;
                                                         font-family: arial, helvetica, sans-serif;
                                                         font-size: 0.9em; line-height: normal;  }
#product_info .variant_options .values_list            { padding: 5px; margin-bottom: 5px;
                                                         border-bottom: 1px solid silver; }
#product_info .variant_options .values_list:last-child { margin-bottom: 0; border-bottom: none; }
#product_info .variant_options .values_list .caption   { font-size: 0.8em; font-weight: bold; margin-bottom: 5px; }
#product_info .variant_options .value                  { display: inline-block; white-space: nowrap; background: white;
                                                         border: 1px solid silver; margin: 2px; padding: 1px 5px;
                                                         cursor: pointer; }
#product_info .variant_options .value:hover            { box-shadow: 0 0 5px dimgrey; }
#product_info .variant_options .value.selected         { color: white; background-color:
                                                         grey; border-color: black; box-shadow: 0 0 5px greenyellow;  }
#product_info .variant_options .value.selected:hover   { box-shadow: 0 0 5px mediumseagreen; }

#product_info .variant_messages.highlighted { color: black; background-color: greenyellow; border-color: darkgreen; }

.category_path               { font-family: arial, helvetica, sans-serif; font-size: 0.9em; line-height: normal; }
.category_path.main_category { margin-bottom: 10px;  }

/* -------------- */
/* Other elements */
/* -------------- */

#header .menu .bardcommerce_menu_entry .wlegend { display: inline-block; font-size: 12px; line-height: 20px; vertical-align: top; margin-top: 1px; }

.subcategory_selector_item.framed_content.inlined { margin: 4px 2px; padding: 2px 4px; }

/* --------------- */
/* Cart, wishlists */
/* --------------- */

.rowed_products .product_row                    { border-bottom: 2px solid silver; }
.rowed_products .product_row:first-child        { border-top: 2px solid silver; }
.rowed_products .product_row .col               { margin: 10px 0;  }
.rowed_products .product_row .col p             { margin: 10px 0; }
.rowed_products .product_row .col *:first-child { margin-top:    0; }
.rowed_products .product_row .col *:last-child  { margin-bottom: 0; }
.rowed_products .product_row .product_image img { width: 150px; }
.rowed_products .product_row .actions           { text-align: center; }

@media all and (max-width: 720px) {
    .rowed_products .product_row .actions { text-align: left; }
}

/* -------- */
/* Checkout */
/* -------- */

#shopping_orders_builder .delivery_info { max-width: calc(50% - 50px); vertical-align: top; }
#shopping_orders_builder .shipping_method_option.highlighted { background-color: silver; border-radius: 2px; }

/* -------------- */
/* Order listings */
/* -------------- */

.single_order_details .shop_name        { font-size: 1.8em; line-height: normal; }
.single_order_details .shop_logo        { height: 2rem; vertical-align: middle; }
.single_order_details .shop_description { margin-top: 10px; font-style: italic; }

.single_order_details               .account_address_card { border: none; padding: 0;
                                                            background-color: transparent; }
.single_order_details .shop_address .account_address_card { font-family: Arial, Helvetica, sans-serif;
                                                            font-size: 0.9em; line-height: normal; }

.single_order_details .details_block               { margin-top: 20px; }
.single_order_details .invoice_data                { font-size: 1.1em; line-height: 1.3em; }
.single_order_details .order_flags                 { font-family: Arial, Helvetica, sans-serif; font-size: 0.8rem; }
.single_order_details .order_flags .framed_content { font-size: 0.95rem; width: 130px; }

.order_products .order_product_item            { white-space: nowrap; margin-bottom: 10px; }
.order_products .order_product_item:last-child { margin-bottom: 0; }
.order_products .order_product_item img        { height: 2.2em; float: left; margin-right: 10px; }
.order_products .order_product_item .line      { display: block; white-space: nowrap;
                                                 overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------- */
/* Shortcode-generated listings */
/* ---------------------------- */

ul.bardcommerce_embedded_listing.fancy {
    display: block;
    margin: 0;
    padding: 0;
}

ul.bardcommerce_embedded_listing.fancy li {
    display: block;
    margin: 0 0 5px 0;
    padding: 5px;
    border-bottom: 1px solid dimgrey;
}

ul.bardcommerce_embedded_listing.fancy li:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}

ul.bardcommerce_embedded_listing.fancy li a {
    display: block;
    padding-left: 42px;
    background: transparent top left no-repeat;
    background-size: 32px auto;
}