/*
Theme Name: Kiosko Child
Theme URI: https://example.com
Description: Tema filho do Kiosko
Author: Ana Clara Poubel
Template: kiosko
Version: 1.0
*/


.btn, .wp-block-button__link {
   padding: 0.5rem 0.5rem 0.5rem 1.2rem;
   border-radius: 1000px;
   cursor: pointer;
   transition: color 0.3s ease, background-color 0.3s ease, background-size 0.3s ease;
   font-weight: 700;
   display: flex;
   gap: 0.5rem;
   justify-content: space-between;
   align-items: center;
   font-size: clamp(1rem, 1.5vw, 1.2rem);
   backdrop-filter: blur(3px);
}

.btn-sm {
   padding: 0rem 0.4rem 0rem 0.9rem;
   border-radius: 1000px;
   cursor: pointer;
   transition: color 0.3s ease, background-color 0.3s ease;
   font-weight: 600;
   display: flex;
   gap: 0.5rem;
   justify-content: space-between;
   align-items: center;
   font-size: clamp(0.8rem, 1.5vw, 0.9rem);
   backdrop-filter: blur(3px);
   height: 40px;
}

.btn-primary::after,
.btn-secondary::after,
.btn-tertiary::after,
.btn-reserve::after,
.wp-block-button__link::after {
   content: '';
   display: inline-block;
   padding: 10px;
   height: 38px;
   width: 38px;
   border-radius: 1000px;
   background-image: url('assets/img/icons/arrow-white.svg');
   background-size: 20px;
   background-repeat: no-repeat;
   background-position: center;
   transform: rotate(135deg);
   transition: background-size 0.3s ease;
}
.btn-secondary::after {
   background-image: url('assets/img/icons/arrow-blue.svg');
}

.btn-primary:hover::after,
.btn-secondary:hover::after,
.btn-tertiary:hover::after,
.btn-reserve:hover::after,
.wp-block-button__link:hover::after {
   background-size: 24px;
}

.btn-sm::after {
   content: '';
   display: block;
   height: 28px;
   width: 28px;
   background-size: 15px;
   transition: background-size 0.3s ease;
}
.btn-sm:hover::after {
   background-size: 18px;
}

.btn-primary {
   color: var(--wp--preset--color--secondary);
   background-color: color-mix(in srgb, var(--wp--preset--color--primary) 65%, transparent);
}

.btn-primary:hover {
   background-color: color-mix(in srgb, var(--wp--preset--color--primary) 85%, transparent);
}

.btn-primary::after {
   background-color: var(--wp--preset--color--primary);
}

.btn-secondary {
   color: var(--wp--preset--color--primary);
   background-color: color-mix(in srgb, var(--wp--preset--color--secondary) 65%, transparent);
}

.btn-secondary:hover {
   background-color: color-mix(in srgb, var(--wp--preset--color--secondary) 85%, transparent);
}

.btn-secondary::after {
   background-color: var(--wp--preset--color--secondary);
}

.btn-tertiary, .wp-block-button__link.has-tertiary-background-color {
   color: var(--wp--preset--color--secondary);
   background-color: color-mix(in srgb, var(--wp--preset--color--tertiary) 65%, transparent);
}

.btn-tertiary:hover, .wp-block-button__link.has-tertiary-background-color:hover {
   background-color: color-mix(in srgb, var(--wp--preset--color--tertiary) 85%, transparent);
}

.btn-tertiary::after, .wp-block-button__link.has-tertiary-background-color::after {
   background-color: var(--wp--preset--color--tertiary);
}


/* .produtos-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
} */

.produto-card {
    border-radius: 1000px 1000px 150px 150px;
}

a:where(:not(.wp-element-button)) {
    text-decoration: none;
}
.add_to_cart_button {
    display: flex;
    width: 100%;
    text-transform: uppercase;
    color: var(--wp--preset--color--dark);
    background-color: var(--wp--preset--color--white);
}