:root {
--frankiebakes-dark-green: #073716;
--frankiebakes-dark-green-rgb: 7, 55, 22;
--frankiebakes-sage-green: #76a689;
--frankiebakes-sage-green-rgb: 118, 166, 137;
--frankiebakes-light-green: #99b881;
--frankiebakes-light-green-rgb: 153, 184, 129;
--frankiebakes-light-green-2: #e6e8e1;
--frankiebakes-light-green-2-rgb: 230, 232, 225;
--frankiebakes-charcoal: #343432;
--frankiebakes-charcoal-rgb: 52, 52, 50;
--frankiebakes-warm-grey: #94908e;
--frankiebakes-warm-grey-rgb: 148, 144, 142;
--frankiebakes-light-border-color: #dfdfdf;
--frankiebakes-light-border-color-rgb: 223, 223, 223;
--frankiebakes-light-grey: #f1f1f1;
--frankiebakes-light-grey-rgb: 241, 241, 241;
--frankiebakes-white: #fff;
--frankiebakes-border: #e5e2e0;
--frankiebakes-accent: var(--frankiebakes-light-green, #99b881);
--frankiebakes-accent-soft: var(--frankiebakes-light-green-2, #e6e8e1);
--frankiebakes-success: #2e7d32;
} body.frkb-has-addons .woocommerce-variation-price,
body.frkb-has-addons .single-product div.product > .price,
body.frkb-has-addons .single-product .product .summary > .price {
display: none;
}
.frkb-addons {
margin: 1rem 0;
}
.frkb-addons__heading {
font-weight: 600;
margin: 0 0 0.5rem;
}
.frkb-addons__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.frkb-addons__item {
border: 1px solid var(--frankiebakes-border, #e5e2e0);
border-radius: 8px;
padding: 0.75rem;
transition:
border-color 0.15s ease,
background-color 0.15s ease;
}
.frkb-addons__item:hover {
border-color: var(--frankiebakes-dark-green, #073716);
}
.frkb-addons__item.is-selected {
border-color: var(--frankiebakes-accent, #c8783c);
background: var(--frankiebakes-accent-soft, #fbf4ee);
}
.frkb-addons__toggle {
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
margin: 0;
}
.frkb-addons__checkbox {
flex: 0 0 auto;
margin: 0;
width: 18px;
height: 18px;
margin-top: 3px;
accent-color: var(--frankiebakes-dark-green, #073716);
}
.frkb-addons__thumb {
flex: 0 0 auto;
width: 56px;
height: 56px;
object-fit: cover;
border-radius: 6px;
}
.frkb-addons__details {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.frkb-addons__name {
font-weight: 600;
}
.frkb-addons__helper {
color: var(--frankiebakes-warm-grey, #94908e);
}
.frkb-addons__pricing {
display: inline-flex;
align-items: baseline;
gap: 0.4rem;
flex-wrap: wrap;
}
.frkb-addons__price-was {
color: var(--frankiebakes-warm-grey, #94908e);
}
.frkb-addons__price-now {
font-weight: 700;
}
.frkb-addons__save {
font-size: 0.85em;
color: var(--frankiebakes-success, #2e7d32);
}
.frkb-addons__variation {
margin-top: 0.6rem;
padding-left: calc(56px + 1.5rem);
}
.frkb-addons__select {
width: 100%;
max-width: 100%;
padding: 10px 12px;
border: 1px solid var(--frankiebakes-light-border-color, #dfdfdf);
border-radius: 3px;
font-family: inherit;
font-size: 0.95rem;
color: var(--frankiebakes-charcoal, #343432);
background-color: var(--frankiebakes-white, #fff);
cursor: pointer;
}
.frkb-addons__select:focus {
outline: 1px solid var(--frankiebakes-dark-green, #073716);
outline-offset: 0;
border-color: var(--frankiebakes-dark-green, #073716);
}
.frkb-addons__total {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-top: 1rem;
margin-bottom: 1.5rem;
padding-top: 0.85rem;
border-top: 1px solid var(--frankiebakes-light-border-color, #dfdfdf);
}
.frkb-addons__total-label {
font-weight: 700;
}
.frkb-addons__total-amount {
font-weight: 700;
font-size: 1.1em;
}
@media (max-width: 480px) {
.frkb-addons__variation {
padding-left: 0;
}
}