/* YM Base - 1.0.0 */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600');

:root {
    /* FONTS */
    --main-font: "Open Sans", sans-serif;
    /* COLOR PALETTE - replace values with client's color palette */
    --color-primary: #000000; 
    --color-primary-lighten: #222222;
    --color-primary-darken: #7c6025;
    --color-primary-contrast-text: #FFFFFF;
    --color-secondary: #9d7c34; 
    --color-secondary-lighten: #d2ac5c;
    --color-secondary-contrast-text: #FFFFFF;
    --color-tertiary: #d2ac5c;
    --color-tertiary-lighten: #d2ac5c;
    --color-tertiary-darken: #9d7c34; /* A11y ok with color-light */
    --color-tertiary-contrast-text: #000000;
    --color-complementary: #d2ac5c;
    --color-complementary-darken: #007681; /* A11y ok with color-light */
    --color-complementary-contrast-text: #3C3C3B;
    --color-light: #FFFFFF;
    --color-dark: #000000;
    --color-neutral-1: #3C3C3B;
    --color-neutral-2: #989898;
    --color-neutral-3: #CFCFCF;
    --color-neutral-4: #E9E9E9;
    --color-neutral-5: #F4F5F5; 
    --color-neutral-1-translucid: rgba(60, 60, 59, 0.9);
    --color-neutral-5-translucid: rgba(244, 245, 245, 0.95);
    --gradient-primary: linear-gradient(#000000, #9d7c34);
    /* BACKGROUNDS & TEXT COLOR - replace values with color variables */
    --default-text-color: var(--color-neutral-1);
    --featured-categories-bg: var(--color-dark);
    --featured-category-text-color: var(--color-tertiary); 
    --featured-products-bg: var(--color-tertiary);
    --featured-products-text-color: var(--color-tertiary-contrast-text);
    /* TOPBAR */
    --topbar-bg-color: var(--color-primary);
    --topbar-text-color: var(--color-primary-contrast-text); 
    /* NAVBAR */
    --navbar-bg-color: var(--color-primary-darken);
    --navbar-text-color: var(--color-secondary-contrast-text);
    /* BANNERS - replace values with color variables or images */
    --userinfo-banner-bg: var(--gradient-primary); 
    --mymovements-banner-bg: var(--gradient-primary); 
    --myproducts-banner-bg: var(--gradient-primary);  
    --myvouchers-banner-bg: var(--gradient-primary); 
    --cart-banner-bg: var(--gradient-primary);  
    --header-section-bg: var(--gradient-primary);
    /* FOOTER */
    --footer-bg-color: var(--color-neutral-5);
    --footer-text-color: var(--color-neutral-1);
    --footer-text-hover-color: var(--color-primary);
}

body {
    font-family: var(--main-font);
    color: var(--default-text-color);
}

/* TOPBAR */
.app-full-topbar {
    background-color: var(--topbar-bg-color);
    color: var(--topbar-text-color);
}

.profile-menu-header-container {
    background-color: var(--color-secondary);
    color: var(--color-secondary-contrast-text);
}

/* Custom catalog logo */
.catalog-logo {
    background-image: url("https://ym2-static-repository-ar-prod.s3.us-west-2.amazonaws.com/logo/57/catalog_logo.png");
}

/* NAVBAR */
.app-full-navbar {
    background-color: var(--navbar-bg-color);
    color: var(--navbar-text-color);
}

/* BANNERS */

.cart-banner {
    background: var(--cart-banner-bg);
}

.myproducts-banner {
    background: var(--myproducts-banner-bg);
}

.userinfo-banner {
    background: var(--userinfo-banner-bg);
}

.myvouchers-banner {
    background: var(--myvouchers-banner-bg);
}

.mymovements-banner {
    background: var(--mymovements-banner-bg);
}

.header-section {
    background: var(--header-section-bg);
}

/* BUTTONS */
/* WIP: button's styles and classes will be modified */
.btn-default,
.btn-primary,
.item-action-button,
.item-action-button.MuiButtonBase-root,
.btn-new,
.btn-cards,
.bg-brand-1,
.bg-brand-2 {
    background-color: var(--color-primary);
    color: var(--color-primary-contrast-text);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default:active:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-cards:hover,
.btn-cards:focus,
.btn-cards:active,
.bg-brand-1:hover, 
.bg-brand-1:focus,
.bg-brand-1:active, 
.bg-brand-2:hover,
.bg-brand-2:focus,
.bg-brand-2:active {
    background-color: var(--color-primary-lighten);
    color: var(--color-primary-contrast-text);
}

/* buttons in featured products section */
.wrapper-featured-bg .item-action-button {
    background-color: var(--color-primary-contrast-text);
    color: var(--color-primary);
}

.wrapper-featured-bg .item-action-button:hover {
    background-color: var(--color-neutral-4);
}

/* FEATURED CATEGORIES */

.featured-category-title {
    color: var(--featured-category-text-color);
}
.featured-categories-container{
     background-color: var(--featured-categories-bg);
}
.featured-categories-container .featured-category-title:hover {
    color: var(--color-secondary);
}

.featured-categories-container .featured-category-icon-background {
    background-color: rgb(157 124 52 / 20%); /* to hide change last value to 0 */
}

/* PRODUCTS */

.wrapper-featured-bg h3 {
    color: var(--featured-products-text-color) !important;
}
.wrapper-featured-bg {
    display: none;
}

.wrapper-featured-bg .item-price {
    color: var(--color-dark);
}

/* Featured products slider dots */
.show-grid .slick-dots li {
    border: 1px solid var(--color-light);
}

.show-grid .slick-dots li.slick-active button {
    background-color: var(--color-light);
}

section.wrapper-featured-bg .MuiAvatar-root.item-icon-delivery {
    color: var(--color-light);
    background-color: var(--color-secondary);
}
.item-info {
    color: inherit;
}

.item-price {
    color: var(--color-dark);
}
.item-price>p {
    font-weight: 500 ;
	font-size: 15px;
}
.item-price>p>strong {
    font-weight: 600;
	font-size: 26px;
}
/* PRODUCT DETAIL */
.item-detail-action .item-action-button.outlined {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.item-discount div {
    border-color: var(--color-dark);
}

.item-discount div span {
    color: var(--color-dark);
}

/* CATEGORY RESULTS */


/* Material UI Overrides filter buttons */
.custom-MuiIconButton-root:hover {
    background-color: inherit;
    color: var(--color-primary);
}

.custom-ArrayForwardIcon {
    background-color: var(--color-neutral-1);
    color: var(--color-light)
}

.custom-ArrayForwardIcon:hover {
    background-color: var(--color-primary);
}

/* CONTACT US FAB */
#contact-us-fab {
    background-color: var(--color-secondary);
    color: var(--color-secondary-contrast-text)
}

/* FOOTER */
.footer-container {
    background-color: var(--footer-bg-color);
    color: var(--footer-text-color);
}

.footer-item:hover {
    color: var(--footer-text-hover-color);
}

/* AGREGADO  */
.topbar-user-button.MuiButton-root:hover {
	color: var(--color-tertiary);
}
/* Colores Base MuiBadge-badge  */
.cart-badge .MuiBadge-badge {
	background-color:  var(--color-secondary);
	color: var(--color-secondary-contrast-text);
}

.topbar-cart:focus, .topbar-cart:hover {
	-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
	filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
	color: inherit;
}

.modal-header {
    background-color: #000000;
}
#featured-categories-heading {
	color: #d2ac5c !important;}


.home-banner {
    background-color: var(--color-primary);
}
.wrapper {
    background-color: var(--color-primary);
}
.wrapper h3 {
    color: var(--color-primary-contrast-text)
}

section.wrapper .item-icon-delivery {
    color: var(--color-secondary);
    background-color: var(--color-tertiary);
}
.boxed-item .item-image{
    border-bottom: 1px solid #d2ac5c !important;
}
.boxed-item .item-image img {
    transition: 0.3s;
}
.grid-container>div.boxed-item {
    border: 1px solid #d2ac5c !important;
}
.boxed-item .item-title
{
    font-weight: 400;
}
.grid-container>div.grid-item
{
    box-shadow: none;
}
/* Colores Loaders  */
#loader {
	background-color: var(--color-primary);
}
#loader>div:first-child {
	border-top: 16px solid var(--color-secondary);
}
#loaderMenu>div:first-child {
	border-top: 16px solid var(--color-tertiary);
}
.header-feat-category {
    border-bottom: solid #d2ac5c;
    color: var(--color-tertiary);
}
.subheader-feat-category .subheader-limpiar-filtros button p {
    color: #fff;
}
.subheader-feat-category .subheader-filtros {
    border-right: 1px solid #d2ac5c;
}
.subheader-feat-category .subheader-filtros button {
    border: 1px solid var(--color-tertiary);
    color: var(--color-tertiary);
	background: transparent;
}
.subheader-feat-category .subheader-filtros button span {
    color: var(--color-tertiary);
}
.subheader-feat-category .subheader-limpiar-filtros button span{
    color: var(--color-tertiary);
}
.sidebar-category .form-control {
    border: 1px solid #d2ac5c !important;
    color: var(--color-tertiary);
    background: transparent !important;
    border-radius: 5px !important;
}
.sidebar-category label.control-label {
    color: #fff;
}
.sidebar-category strong {
    color: #ffffff;
    font-weight: 600;
}
.sidebar-category .sidebar-category-btn{
    color: #ffffff;
}
.sidebar-category span {
    color: #ffffff;
}
.item-detail-money .item-detail-not-logged {
    color: var(--color-secondary);
}
.item-detail-money p {
    font-weight: 400;
}
.item-detail-title {
    color: var(--color-secondary);
	font-weight: 400;
}
.item-detail-box {
    color: var(--color-secondary);
}
.item-detail-points>div>p>strong {
    color: var(--color-secondary);
}
.item-detail-delivery {
    color: var(--color-secondary);
}
section.wrapper>div.container:nth-child(4) .wrapper {
	background-color: var(--color-tertiary);
    margin: 0px -200px;
}
section.wrapper>div.container:nth-child(4) .wrapper h3 {
    color: var(--color-dark);
}
.item-breadcrumb {
    font-weight: 400;
    color: var(--color-tertiary);
}
.item-detail-attributes ul li {
	font-weight: 400;
}
.modal-header .close {
    color: var(--color-tertiary);
    opacity: 1;
    font-weight: 400;
}
.ymlite-modal-login-email {
    background-color: #ffffff!important;
}
.adress-popup>div:first-child > div:nth-child(1) > div:nth-child(2) h5 {
    color: #fff;
}
.adress-popup>div:first-child > div:nth-child(1) > div:nth-child(1) i {
    color: #fff;
}
.cart-badge:hover {color: inherit;}
.contact-us-footer {
	background-color:  var(--color-secondary); 
	color: var(--color-secondary-contrast-text);
}
/* ajusta la opacidad del boton cancelar en el agregado de una direccion, sino desaparece el boton */
.MuiButton-root:hover {
    background-color: rgb(0 0 0 / 77%) !important;
}
/* color de boton Confirmar Pedido Carrito */
#root .ym-button--success, .modal-dialog .ym-button--success {
    color:  var(--color-primary-contrast-text);
	background-color: var(--color-primary);
}

#root .ym-button--success:hover, .modal-dialog .ym-button--success:hover {
	background-color: var(--color-secondary);
    color: var(--color-primary-contrast-text);
}
.subcategories-menu-list li .subcategories-item:hover {
    color: #7c6025;
}