body.tkb-design-system,
body.tkb-design-system *,
body.tkb-design-system *::before,
body.tkb-design-system *::after {
box-sizing: border-box;
} body.tkb-design-system :where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--tkb-orange) !important;
outline-offset: 2px !important;
box-shadow: var(--tkb-focus-ring);
}
body.tkb-design-system :where(a, button, input, select, textarea) {
transition:
color var(--tkb-transition),
background-color var(--tkb-transition),
border-color var(--tkb-transition),
box-shadow var(--tkb-transition),
opacity var(--tkb-transition),
transform var(--tkb-transition);
} body.tkb-design-system :where(
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.single_add_to_cart_button,
.woocommerce #payment #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce .cart button[name="apply_coupon"],
.woocommerce .cart button[name="update_cart"],
a.checkout-button.button.alt,
button.button.et_pb_button,
.et_pb_button
):not(.remove):not(.tkbpp-carousel-arrow):not(.tkb-v2-icon) {
min-height: var(--tkb-control-height);
border: 1px solid var(--tkb-orange) !important;
border-radius: var(--tkb-radius-md) !important;
background: var(--tkb-orange) !important;
color: var(--tkb-ink) !important;
font-weight: 800 !important;
line-height: 1.15 !important;
text-decoration: none !important;
box-shadow: none !important;
}
body.tkb-design-system :where(
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.single_add_to_cart_button,
.woocommerce #payment #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce .cart button[name="apply_coupon"],
.woocommerce .cart button[name="update_cart"],
a.checkout-button.button.alt,
button.button.et_pb_button,
.et_pb_button
):not(.remove):not(.tkbpp-carousel-arrow):not(.tkb-v2-icon):hover {
border-color: var(--tkb-orange-hover) !important;
background: var(--tkb-orange-hover) !important;
color: var(--tkb-ink) !important;
}
body.tkb-design-system :where(button, .button, input[type="submit"]):disabled,
body.tkb-design-system :where(button, .button, input[type="submit"]).disabled {
cursor: not-allowed !important;
opacity: 0.55 !important;
} body.tkb-design-system :where(
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="search"],
.woocommerce input[type="number"]:not(.qty),
.woocommerce select,
.woocommerce textarea,
.et_pb_contact_form input:not([type="checkbox"]):not([type="radio"]),
.et_pb_contact_form select,
.et_pb_contact_form textarea
) {
min-height: var(--tkb-control-height);
border: 1px solid #cccccc !important;
border-radius: var(--tkb-radius-sm) !important;
background-color: var(--tkb-surface) !important;
color: var(--tkb-ink) !important;
font: inherit;
box-shadow: none !important;
}
body.tkb-design-system :where(
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="search"],
.woocommerce input[type="number"]:not(.qty),
.woocommerce select,
.woocommerce textarea,
.et_pb_contact_form input:not([type="checkbox"]):not([type="radio"]),
.et_pb_contact_form select,
.et_pb_contact_form textarea
):focus {
border-color: var(--tkb-orange) !important;
box-shadow: var(--tkb-focus-ring) !important;
outline: 0 !important;
} body.tkb-design-system :where(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
margin-bottom: 22px !important;
padding: 15px 18px 15px 48px !important;
border: 1px solid var(--tkb-line) !important;
border-top: 3px solid var(--tkb-orange) !important;
border-radius: var(--tkb-radius-md) !important;
background: var(--tkb-surface) !important;
color: var(--tkb-ink) !important;
box-shadow: var(--tkb-shadow-sm) !important;
}
body.tkb-design-system .woocommerce-error {
border-top-color: var(--tkb-danger) !important;
}
body.tkb-design-system .woocommerce-message::before,
body.tkb-design-system .woocommerce-info::before {
color: var(--tkb-orange) !important;
}
body.tkb-design-system .woocommerce-error::before {
color: var(--tkb-danger) !important;
} body.tkb-design-system :where(
.woocommerce-breadcrumb a,
.woocommerce .product_meta a,
.woocommerce .tagged_as a,
.woocommerce .posted_in a,
.woocommerce-info a.showcoupon,
.tkb-artist-link,
.tkb-label-link
) {
color: var(--tkb-orange) !important;
}
body.tkb-design-system :where(
.woocommerce-breadcrumb a,
.woocommerce .product_meta a,
.woocommerce .tagged_as a,
.woocommerce .posted_in a,
.woocommerce-info a.showcoupon,
.tkb-artist-link,
.tkb-label-link
):hover {
color: var(--tkb-orange-hover) !important;
} body.tkb-design-system .tb-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 22px;
padding: 4px 8px;
border-radius: var(--tkb-radius-xs);
color: #ffffff;
font-size: 10px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.45px;
text-transform: uppercase;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
}
body.tkb-design-system .tb-badge.is-red { background: var(--tkb-danger); }
body.tkb-design-system .tb-badge.is-orange { background: var(--tkb-restock); }
body.tkb-design-system .tb-badge.is-green { background: var(--tkb-success); }
body.tkb-design-system .tb-badge.is-yellow { background: var(--tkb-warning); }
body.tkb-design-system .tb-badge.is-blue { background: var(--tkb-info); }
body.tkb-design-system .tb-badge.is-black { background: var(--tkb-black); } body.tkb-design-system ::selection {
background: rgba(var(--tkb-orange-rgb), 0.32);
color: var(--tkb-ink);
}