@import url('https://googleapis.com');

/* Box */
.shop-category {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    width: 100%;
    height: 90px;
    min-height: 90px;
    box-sizing: border-box;

    padding: 20px;
    border-radius: 16px;

    text-align: left;
    text-decoration: none;

    background: #E5F3FF;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
	
}

.shop-category:hover {
    transform: translateY(-4px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}


/* Icon */
.shop-category-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 32px;
    height: 36px;

    margin-bottom: 12px;

    font-size: 32px;
    line-height: 1;
    font-variation-settings:
        'OPSZ' 24,
        'wght' 400,
        'FILL' 0,
        'GRAD' 0;
}
/* Snacks and Candy */
.category-snacks-and-candys .material-symbols-outlined {
    color: #D98B00;
}

.category-snacks-and-candys:hover .material-symbols-outlined {
    color: #B86F00;
}

/* CLOTHES */
.category-clothes .material-symbols-outlined {
    color: #7955D9;
}

.category-clothes:hover .material-symbols-outlined {
    color: #5D3FAD;
}

/* GROCERIES */
.category-groceries .material-symbols-outlined {
    color: #43A765;
}

.category-groceries:hover .material-symbols-outlined {
    color: #32844E;
}

/* ACCESSORIES / OTHER */
.category-accessories-others .material-symbols-outlined {
    color: #4B91D1;
}

.category-accessories-others:hover .material-symbols-outlined {
    color: #3274B0;
}

/* HEALTH & BEAUTY */
.category-health-and-beauty .material-symbols-outlined {
    color: #D95D87;
}

.category-health-and-beauty:hover .material-symbols-outlined {
    color: #B83F69;
}

/* PRE-MADE PACKAGES */
.category-premadepackages .material-symbols-outlined {
    color: #D6A800;
}

.category-premadepackages:hover .material-symbols-outlined {
    color: #B38B00;
}


/* Title */
.shop-category-name {
    display: flex;
    align-items: flex-start;

    height: 40px;

    font-size: 17px;
    font-weight: 600;
    line-height: 20px;

    color: #1F1F1F;
}


/* Price */
.shop-category-price {
    font-size: 13px;
    color: #6B7280;
		line-height: 1.3;
		margin-top:4px;
}

/* Colors for boxes */

.category-snacks-and-candys {
    background: #FFF1D6;
}

.category-clothes {
    background: #E8E0FF;
}

.category-groceries {
    background: #DFF5E5;
}

.category-accessories-others {
    background: #E1F0FF;
}

.category-health-and-beauty {
    background: #FFE3EC;
}

.category-premadepackages {
    background: #FFF4CC;
}

.category-food:hover {
    background: #FFDFA8;
}

.category-clothes:hover {
    background: #D0BFFF;
}

.category-snacks-candy:hover {
    background: #BDE8C9;
}

.category-accessories-others:hover {
    background: #BFDFFF;
}

.category-health-and-beauty:hover {
    background: #FFC2D6;
}

.category-premadepackages:hover {
    background: #FFE58A;
}

/* Image Thumbnail WooComerce */
.mk-product-warp .mk-product-thumbnail-warp {
  width: 100%;
  background-color: #f8fafc;
  border-bottom: 1px solid #edf2f7;
  overflow: hidden;
}

.mk-product-warp .mk-product-thumbnail-warp img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
	
}

/* Shadow for Product holder */

.mk-product-warp:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.mk-product-warp:hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mk-product-warp a.add_to_cart_button {
  
  align-items: center;
  justify-content: center;
  gap: 8px;
  
  /* Button Sizing */
  width: calc(100% - 32px);
  margin: 0 16px 16px 16px;
  padding: 10px 16px;
  box-sizing: border-box;
 
}

/* Icon Color inside Button */
.mk-product-warp a.add_to_cart_button svg path {
  fill: #FFFFFF;
  }

.shop-category-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Forces all 6 items into 1 row */
    gap: 16px;                            /* Space between boxes */
    width: 100%;
    box-sizing: border-box;
}


@media (max-width: 992px) {
    .shop-category-grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 12px; /* Extra room for mobile swipe/scrollbar */
    }

    .shop-category {
        flex: 0 0 150px;
			
    }
}

/* Hides the images in the categories, inside the shop */
.woocommerce-products-header .wpb-content-wrapper .vc_col-sm-12 .woocommerce ul.products li.product a img {
	display:none;
}
/* Hides the category from that is found in the store */
.blue{
	display:none