.ostu-bundle {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
padding: var(--space-20, 20px);
margin: 22px 0;
}
.ostu-bundle__head { margin-bottom: var(--space-16, 16px); }
.ostu-bundle__title { font-size: clamp(20px, 3vw, 26px); margin: 2px 0 6px; }
.ostu-bundle__sub { color: var(--slate-600); font-size: 14px; margin: 0; }
.ostu-bundle__items {
display: flex;
flex-direction: column;
gap: var(--space-12, 12px);
margin: 0 0 18px;
padding: 0;
list-style: none;
}
.ostu-bundle__item {
display: flex;
gap: 14px;
align-items: center;
padding: var(--space-12, 12px);
border: 1px solid var(--border);
border-radius: var(--radius);
background: #fff;
transition: border-color .2s ease, box-shadow .2s ease;
}
.ostu-bundle__item:hover { border-color: rgba(5, 150, 105, .3); box-shadow: var(--shadow-card); }
.ostu-bundle__item.is-unavailable { opacity: .6; }
.ostu-bundle__media {
flex: 0 0 64px;
width: 64px;
height: 64px;
border-radius: 10px;
background: var(--muted);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.ostu-bundle__media img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 6px;
}
.ostu-bundle__detail { display: flex; flex-direction: column; gap: var(--space-4, 4px); min-width: 0; flex: 1; }
.ostu-bundle__name {
font-size: 14.5px;
font-weight: var(--fw-semibold, 600);
color: var(--fg);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ostu-bundle__name:hover { color: var(--green); }
.ostu-bundle__price {
font-size: 15px;
font-weight: var(--fw-bold, 700);
color: var(--slate-dark);
font-variant-numeric: tabular-nums;
}
.ostu-bundle__price del { color: var(--slate-500); font-weight: var(--fw-medium, 500); font-size: var(--fs-xs, 13px); opacity: .7; margin-right: 5px; }
.ostu-bundle__price ins { text-decoration: none; color: var(--price-sale, #b91c1c); }
.ostu-bundle__flag {
align-self: flex-start;
font-size: var(--fs-2xs, 12px);
font-weight: var(--fw-bold, 700);
color: var(--slate-500);
background: var(--muted);
border-radius: var(--radius-pill, 999px);
padding: 2px 10px;
}
.ostu-bundle__cta {
border-top: 1px dashed var(--border);
padding-top: 18px;
display: flex;
flex-direction: column;
gap: var(--space-12, 12px);
}
.ostu-bundle__total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-12, 12px);
flex-wrap: wrap;
}
.ostu-bundle__total-label { font-weight: var(--fw-semibold, 600); color: var(--slate); font-size: 15px; }
.ostu-bundle__total-amount {
font-family: var(--font-display);
font-size: 26px;
font-weight: var(--fw-bold, 700);
color: var(--slate-dark);
font-variant-numeric: tabular-nums;
}
.ostu-bundle__total-amount .woocommerce-Price-amount { color: var(--slate-dark); }
.ostu-bundle__add {
width: 100%;
min-height: 54px;
font-size: var(--fs-md, 16px);
font-weight: var(--fw-bold, 700);
}
.ostu-bundle__add.is-loading { opacity: .8; pointer-events: none; }
.ostu-bundle__add.is-done { background: var(--green-dark); }
.ostu-bundle__note { margin: 0; font-size: var(--fs-xs, 13px); color: var(--slate-500); text-align: center; }
.ostu-bundle__error {
margin: 0;
font-size: 13.5px;
font-weight: var(--fw-semibold, 600);
color: var(--danger-dark);
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: var(--radius);
padding: 10px 14px;
}
.ostu-fbt {
grid-column: 1 / -1;
margin-top: var(--space-40, 40px);
}
.ostu-fbt__title { font-size: 24px; margin-bottom: 18px; }
.ostu-fbt__title .eyebrow { display: block; margin-bottom: 6px; }
.ostu-fbt__grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
@media (min-width: 560px) { .ostu-fbt__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px) { .ostu-fbt__grid { grid-template-columns: repeat(3, 1fr); } }
.ostu-fbt-card {
display: flex;
gap: var(--space-12, 12px);
align-items: center;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
padding: var(--space-12, 12px);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ostu-fbt-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-card-hover);
border-color: rgba(5, 150, 105, .3);
}
.ostu-fbt-card__media {
flex: 0 0 72px;
width: 72px;
height: 72px;
border-radius: var(--radius);
background: var(--muted);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.ostu-fbt-card__media img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 6px;
}
.ostu-fbt-card__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.ostu-fbt-card__name {
font-size: 13.5px;
font-weight: var(--fw-semibold, 600);
color: var(--fg);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ostu-fbt-card__name:hover { color: var(--green); }
.ostu-fbt-card__price {
font-size: 15px;
font-weight: var(--fw-bold, 700);
color: var(--slate-dark);
font-variant-numeric: tabular-nums;
}
.ostu-fbt-card__price del { color: var(--slate-500); font-weight: var(--fw-medium, 500); font-size: var(--fs-xs, 13px); opacity: .7; margin-right: 5px; }
.ostu-fbt-card__price ins { text-decoration: none; color: var(--price-sale, #b91c1c); }
.ostu-fbt-card .ostu-fbt-card__add,
.ostu-fbt-card a.ostu-fbt-card__add.button {
align-self: flex-start;
margin-top: 3px;
background: var(--green);
color: #fff;
border: 0;
border-radius: 10px;
padding: 8px 14px;
font-size: var(--fs-xs, 13px);
font-weight: var(--fw-semibold, 600);
min-height: 0;
line-height: 1.2;
transition: background .2s, transform .2s;
}
.ostu-fbt-card .ostu-fbt-card__add:hover { background: var(--green-dark); transform: translateY(-1px); }
.ostu-fbt-card .ostu-fbt-card__add.loading { opacity: .75; }
@media (prefers-reduced-motion: reduce) {
.ostu-bundle__item,
.ostu-fbt-card { transition: none; }
}