Tratamentos, Hidratação & Home Care

Máscaras reconstrutoras, cronograma capilar, séruns, ampolas de ácido hialurônico e kits home care para manutenção.

/* =========================================================
DI MARRIET PROFESSIONAL – SHOP & CATEGORY UX REDESIGN
========================================================= */

/* 1. FORCE PRODUCT TITLES TO BE BOLD, BLACK (#111111) AND HIGHLY VISIBLE */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3,
.woocommerce ul.products li.product .ast-loop-product__link h2,
.woocommerce-loop-product__title,
.woocommerce ul.products li.product a h2,
.woocommerce ul.products li.product a h3 {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
color: #111111 !important;
font-family: ‘Montserrat’, sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
margin: 10px 0 6px 0 !important;
text-transform: none !important;
text-align: center !important;
height: 42px !important;
overflow: hidden !important;
}

/* 2. STYLE CATEGORY SPAN DISCREETLY ABOVE TITLE */
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce ul.products li.product .product-category,
.ast-woo-product-category {
display: block !important;
color: #777777 !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
margin-bottom: 4px !important;
text-align: center !important;
}

/* 3. SYMMETRICAL CARDS & GRID ALIGNMENT */
.woocommerce ul.products {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
gap: 24px !important;
margin: 20px 0 40px 0 !important;
padding: 0 !important;
list-style: none !important;
}

.woocommerce ul.products li.product {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 16px !important;
margin: 0 !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.woocommerce ul.products li.product:hover {
transform: translateY(-5px) !important;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
border-color: #f4af19 !important;
}

/* 4. UNIFORM IMAGE CONTAINER FOR PERFECT SYMMETRY */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
width: 100% !important;
height: 220px !important;
object-fit: contain !important;
border-radius: 8px !important;
margin-bottom: 12px !important;
background-color: #f8fafc !important;
padding: 10px !important;
}

/* 5. ELEGANT GOLD PRICING */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product span.price {
color: #d49d18 !important;
font-size: 18px !important;
font-weight: 700 !important;
margin: 8px 0 12px 0 !important;
text-align: center !important;
display: block !important;
}

.woocommerce ul.products li.product .price del {
color: #94a3b8 !important;
font-size: 14px !important;
font-weight: 400 !important;
margin-right: 6px !important;
}

.woocommerce ul.products li.product .price ins {
background: transparent !important;
color: #d49d18 !important;
font-weight: 700 !important;
}

/* 6. CALL TO ACTION BUTTON (COMPRAR) */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
background-color: #f4af19 !important;
color: #000000 !important;
font-family: ‘Montserrat’, sans-serif !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
border-radius: 6px !important;
padding: 12px 16px !important;
text-align: center !important;
display: block !important;
width: 100% !important;
border: none !important;
transition: background 0.2s ease, color 0.2s ease !important;
margin-top: 8px !important;
text-decoration: none !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover {
background-color: #111111 !important;
color: #ffffff !important;
}