/*
Theme Name: Libreria Child Theme
Theme URI: https://woocommerce.com/products/libreria
Author: ThemeGrill
Author URI: https://themegrill.com
Description: Libreria Child Theme
Template:libreria
Version: 1.0.0
*/


/**
 * Below are the styles wrote for touchups for logo spacing, nav menu spacing as well fix the maximum width of header sidebar logo
 */
.libreria-header .libreria-container {
    padding-top: 8px;
    padding-bottom: 8px;
}

.libreria-header-sidebar__logo img {
    max-width: 88%;
}

.libreria-main-navigation ul li {
    margin-right: 24px;
}

/**
 * Below are the styles wrote for align navigation items properly as by default it was fall the nav items into new row site logo to center on checkout page.
 */

.libreria-site-branding {
    flex-grow: 0.5;
}

.woocommerce-checkout .libreria-site-branding {
    flex-grow: 1;
}

.libreria-main-navigation ul .libreria-submenu-toggle {
    padding: 0;
}

/**
 * Client requested to make update cart button to visible as by default the color of button was less visible. So I used the black color same as other buttons in theme. 
 * Reference: Zendesk ticket #15335
 */
.woocommerce-cart .woocommerce-cart-form .actions>.button {
    color: #FFF;
    background-color: #2C1810;
}

/**
 * Client requested to have all book images to have even in size like current size. We make added style to match with live site, as well changed the woocommerce catelog setting to crop image in 1:1 ratio which was 4:3 by default by theme.
 * Reference: Zendesk ticket #15335
 */

li.product .product__thumbnail img {
    height: 270px;
    width: auto;
}

.woocommerce .products.columns-6 {
    column-gap: 1.9em;
}

/**
 * Client requested to show "Sale" badges only for "Clearance" category. So we hide it from all products excapt the "Clearance" category products
 * Reference: Zendesk ticket #15335
 */
.product.product_cat-clearance .onsale {
    display: inline-block;
}

.onsale,
.product__thumbnail .wc-block-grid__product-onsale {
    display: none;
}

/**
 * Client requested "is there no way to make our Logo larger on the landing page even if that means dropping it below the line?"
 * Reference: Zendesk ticket #15335
 * So we added below style to overright the maximum height theme allowed to enter 100px in customizer setting
 */
.custom-logo {
    max-height: 160px;
    max-width: 220px;
}

/**
* Client provided the category images which have the category names written in images as they liked it to have so removed the title by css below
*
* Reference: Zendesk ticket #15335
*/
.home .wc-block-product-categories-list-item__name {
    display: none;
}

/**
* Client asked this: When you go to shop and scroll to see the list of titles, can you line up the “Add to Cart” buttons so they are in line with one another?
 so added below css in order to fix this
*
* Reference: Zendesk ticket #15335
*/
li.product .woocommerce-loop-product__title {
    min-height: 98px;
}

/* we have proactively fixed the homepage product grid sections add to cart button alignment as well by this css */
li.product .wc-block-grid__product-title,
.featured-pro-title {
    min-height: 101px;
}

/* Added this css for adjust the height and width of featured products section which is showing on New Arrivals section on homepage */
.wc-block-components-product-image img {
    height: 270px;
    width: auto;
}

/* Added this css to make category names in filter on shop to be uppercase as per requested by client in this ticket #15335 */
.libreria-filter-sidebar .wc-block-product-categories-list .wc-block-product-categories-list-item {
    text-transform: uppercase;
}

.wc-block-product-categories-list-item__image.wc-block-product-categories-list-item__image--placeholder img {
    max-height: 210px;
    width: auto;
}

/* Added this style to fix the button that shows after added to cart */
.added_to_cart {
    background-color: #EFDFD2;
    padding: 10px 30px !important;
}

/**
* Client asked this: My boss tried to check out doing a mock order, and said he couldn’t see the “show” button to show the password when you type it in. 
 so added below css in order to fix this, as well we have done adjustment to button css like box-shadow, font-size, line-height, padding and margin in order to make it proper. 
*
* Reference: Zendesk ticket #15335
*/
.woocommerce form .show-password-input {
    padding: 7px 24px;
    font-size: 14px;
    line-height: 24px;
    margin-top: 10px;
    -webkit-box-shadow: 7px 7px 0px rgba(17, 17, 17, 0.1);
    box-shadow: 7px 7px 0px rgba(17, 17, 17, 0.1);
}

.woocommerce form .show-password-input::after {
    content: "Show";
    font-weight: 500;
}

.woocommerce form .show-password-input.display-password::after {
    content: "Hide";
}