:root {
--cbfw-radius: 10px;
--cbfw-border: #e3e5e8;
--cbfw-bg: #ffffff;
--cbfw-bg-soft: #f7f8fa;
--cbfw-text: inherit;
--cbfw-muted: #6b7280;
--cbfw-accent: #2f4df5;
--cbfw-savings: #00a32a;
--cbfw-gap: 12px;
}   .cbfw-bundled-items {
margin: 0 0 1.25em;
}
.cbfw-bundled-items__title {
font-size: 1.05em;
margin: 0 0 0.65em;
}
.cbfw-bundled-items__list,
.cbfw-card__items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var( --cbfw-gap );
}
.cbfw-bundled-item {
display: flex;
align-items: center;
gap: var( --cbfw-gap );
background: var( --cbfw-bg );
border: 1px solid var( --cbfw-border );
border-radius: var( --cbfw-radius );
padding: 10px 14px;
margin: 0;
}
.cbfw-bundled-item__image {
flex: 0 0 56px;
}
.cbfw-bundled-item__image img {
width: 56px;
height: 56px;
object-fit: cover;
border-radius: calc( var( --cbfw-radius ) - 4px );
display: block;
background: var( --cbfw-bg-soft );
}
.cbfw-bundled-item__info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1 1 auto;
}
.cbfw-bundled-item__name,
.cbfw-bundled-item__name a {
font-weight: 600;
color: var( --cbfw-text );
text-decoration: none;
overflow-wrap: anywhere;
}
.cbfw-bundled-item__price {
font-size: 0.9em;
color: var( --cbfw-muted );
}
.cbfw-bundled-item__price del {
opacity: 0.65;
}
.cbfw-bundled-item__qty {
flex: 0 0 auto;
background: var( --cbfw-bg-soft );
border: 1px solid var( --cbfw-border );
border-radius: 999px;
color: var( --cbfw-accent );
font-size: 0.85em;
font-weight: 600;
padding: 2px 10px;
white-space: nowrap;
}    .cbfw-layout-grid .cbfw-bundled-items__list {
display: grid;
grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) );
align-items: stretch;
}
.cbfw-layout-grid .cbfw-bundled-item {
position: relative;
flex-direction: column;
align-items: center;
text-align: center;
padding: 16px 12px;
}
.cbfw-layout-grid .cbfw-bundled-item__image {
flex-basis: auto;
}
.cbfw-layout-grid .cbfw-bundled-item__image img {
width: 72px;
height: 72px;
}
.cbfw-layout-grid .cbfw-bundled-item__info {
align-items: center;
}
.cbfw-layout-grid .cbfw-bundled-item__qty {
position: absolute;
top: 8px;
right: 8px;
} .cbfw-layout-compact .cbfw-bundled-items__list {
gap: 6px;
}
.cbfw-layout-compact .cbfw-bundled-item {
padding: 6px 12px;
border-radius: calc( var( --cbfw-radius ) - 2px );
}
.cbfw-layout-compact .cbfw-bundled-item__image {
display: none;
}
.cbfw-layout-compact .cbfw-bundled-item__info {
flex-direction: row;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
} .cbfw-layout-table .cbfw-bundled-items__list {
display: block;
border: 1px solid var( --cbfw-border );
border-radius: var( --cbfw-radius );
overflow: hidden;
}
.cbfw-layout-table .cbfw-bundled-item {
display: grid;
grid-template-columns: 48px minmax( 0, 1fr ) auto auto;
align-items: center;
column-gap: var( --cbfw-gap );
border: 0;
border-bottom: 1px solid var( --cbfw-border );
border-radius: 0;
padding: 8px 14px;
}
.cbfw-layout-table .cbfw-bundled-item:last-child {
border-bottom: 0;
}
.cbfw-layout-table .cbfw-bundled-item:nth-child( even ) {
background: var( --cbfw-bg-soft );
}
.cbfw-layout-table .cbfw-bundled-item__info {
display: contents;
}
.cbfw-layout-table .cbfw-bundled-item__image {
flex-basis: auto;
}
.cbfw-layout-table .cbfw-bundled-item__image img {
width: 40px;
height: 40px;
}
.cbfw-layout-table .cbfw-bundled-item__price {
text-align: right;
white-space: nowrap;
}
@media ( max-width: 480px ) {
.cbfw-layout-table .cbfw-bundled-item {
grid-template-columns: 40px minmax( 0, 1fr ) auto;
}
.cbfw-layout-table .cbfw-bundled-item__price {
display: none;
}
}   .cbfw-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var( --cbfw-gap );
background: var( --cbfw-bg-soft );
border-radius: var( --cbfw-radius );
padding: 12px 14px;
margin: 14px 0 0;
flex-wrap: wrap;
}
.cbfw-summary__label {
font-weight: 600;
}
.cbfw-summary__prices ins {
text-decoration: none;
font-weight: 700;
font-size: 1.15em;
}
.cbfw-summary__prices del {
color: var( --cbfw-muted );
margin-right: 8px;
}
.cbfw-savings-badge {
display: inline-block;
background: color-mix( in srgb, var( --cbfw-savings ) 12%, transparent );
color: var( --cbfw-savings );
border-radius: 999px;
font-size: 0.72em;
font-weight: 700;
padding: 3px 10px;
vertical-align: middle;
white-space: nowrap;
}
@supports not ( background: color-mix( in srgb, red 12%, transparent ) ) {
.cbfw-savings-badge {
background: #e6f6ea;
}
}   .cbfw-card {
border: 1px solid var( --cbfw-border );
border-radius: calc( var( --cbfw-radius ) + 4px );
background: var( --cbfw-bg );
padding: 18px;
max-width: 480px;
display: flex;
flex-direction: column;
gap: var( --cbfw-gap );
}
.cbfw-card--list {
max-width: 100%;
}
.cbfw-card__header {
text-align: center;
}
.cbfw-card__title {
margin: 0;
font-size: 1.2em;
}
.cbfw-card__title a {
text-decoration: none;
color: var( --cbfw-text );
}
.cbfw-card__subtitle {
margin: 4px 0 0;
font-size: 0.9em;
color: var( --cbfw-muted );
}
.cbfw-card__image img {
width: 100%;
height: auto;
border-radius: var( --cbfw-radius );
display: block;
}
.cbfw-card__form {
margin: 0;
}
.cbfw-card__button {
width: 100%;
text-align: center;
background: var( --cbfw-accent );
border-color: var( --cbfw-accent );
color: #fff;
border-radius: var( --cbfw-radius );
padding: 12px 16px;
cursor: pointer;
}
.cbfw-card__button:hover,
.cbfw-card__button:focus {
background: var( --cbfw-accent );
border-color: var( --cbfw-accent );
color: #fff;
filter: brightness( 0.9 );
}
.cbfw-card__unavailable {
text-align: center;
color: var( --cbfw-muted );
margin: 0;
}   @media ( max-width: 480px ) {
.cbfw-bundled-item {
padding: 8px 10px;
}
.cbfw-bundled-item__image,
.cbfw-bundled-item__image img {
flex-basis: 44px;
width: 44px;
height: 44px;
}
.cbfw-summary {
flex-direction: column;
align-items: flex-start;
}
}