.sbs-shop {
--sbs-navy: #1f3354;
--sbs-navy-dark: #172842;
--sbs-gold: #e5bd56;
--sbs-paper: #f8f5ef;
--sbs-ink: #1f2630;
--sbs-muted: #69717e;
--sbs-line: rgba(31, 51, 84, .16);
position: relative;
left: 50%;
width: min(1180px, calc(100vw - 40px));
max-width: none;
margin: 42px 0 72px;
transform: translateX(-50%);
color: var(--sbs-ink);
}
.sbs-shop,
.sbs-shop * {
box-sizing: border-box;
}
.sbs-shop__header {
margin-bottom: 30px;
text-align: center;
}
.sbs-shop__eyebrow {
margin: 0 0 9px;
color: var(--sbs-navy);
font-size: 12px;
font-weight: 850;
letter-spacing: .16em;
}
.sbs-shop__title {
margin: 0;
color: var(--sbs-navy);
font-size: clamp(38px, 5vw, 58px);
line-height: 1.05;
font-weight: 900;
}
.sbs-shop__intro {
max-width: 680px;
margin: 14px auto 0;
color: var(--sbs-muted);
font-size: 17px;
line-height: 1.55;
}
.sbs-shop__list {
display: grid;
gap: 26px;
}
.sbs-book-card {
container-type: inline-size;
display: grid;
grid-template-columns: 190px minmax(250px, 1fr) 410px;
gap: 34px;
align-items: center;
min-width: 0;
padding: 30px;
overflow: hidden;
border: 1px solid rgba(31, 51, 84, .12);
border-radius: 26px;
background:
linear-gradient(135deg, rgba(255,255,255,.99), rgba(248,245,239,.99));
box-shadow: 0 18px 48px rgba(31, 38, 48, .11);
}
.sbs-book-card__cover-column,
.sbs-book-card__content-column,
.sbs-book-card__offers-column {
min-width: 0;
}
.sbs-book-card__cover-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 275px;
}
.sbs-book-card__cover-wrap::before {
content: "";
position: absolute;
inset: 14% 5% 5%;
border-radius: 18px;
background: rgba(31, 51, 84, .17);
filter: blur(22px);
transform: translateY(12px);
}
.sbs-book-card__cover {
position: relative;
z-index: 1;
display: block;
width: 100%;
max-width: 180px;
height: auto;
max-height: 285px;
object-fit: contain;
border-radius: 10px;
box-shadow: 0 14px 32px rgba(20, 26, 34, .23);
}
.sbs-book-card__content-column {
align-self: center;
}
.sbs-book-card__genre {
margin: 0 0 18px;
color: var(--sbs-gold);
font-size: 14px;
font-weight: 900;
line-height: 1.25;
letter-spacing: .08em;
text-transform: uppercase;
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
}
.sbs-book-card__description {
max-width: 520px;
color: var(--sbs-navy);
font-size: 19px;
line-height: 1.58;
font-weight: 650;
}
.sbs-book-card__offers-column {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
border-top: 1px solid var(--sbs-line);
border-bottom: 1px solid var(--sbs-line);
}
.sbs-offer-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 190px;
gap: 20px;
align-items: center;
min-height: 88px;
padding: 15px 0;
}
.sbs-offer-row + .sbs-offer-row {
border-top: 1px solid var(--sbs-line);
}
.sbs-offer-row__details,
.sbs-offer-row__action {
min-width: 0;
}
.sbs-offer-row__format {
color: var(--sbs-navy);
font-size: 15px;
font-weight: 800;
line-height: 1.3;
overflow-wrap: break-word;
word-break: normal;
}
.sbs-offer-row__price {
margin-top: 6px;
color: var(--sbs-ink);
font-size: 18px;
font-weight: 900;
line-height: 1.25;
}
.sbs-offer-row__price del {
margin-right: 5px;
color: var(--sbs-muted);
font-size: .8em;
font-weight: 600;
}
.sbs-offer-row__price ins {
text-decoration: none;
}
.sbs-shop-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
padding: 11px 14px;
border: 1px solid var(--sbs-navy);
border-radius: 12px;
background: var(--sbs-navy);
color: #fff !important;
font-family: inherit;
font-size: 14px;
font-weight: 850;
line-height: 1.2;
text-align: center;
text-decoration: none !important;
cursor: pointer;
appearance: none;
transition:
transform .16s ease,
background-color .16s ease,
border-color .16s ease,
opacity .16s ease;
}
.sbs-shop-button:hover,
.sbs-shop-button:focus-visible {
border-color: var(--sbs-navy-dark);
background: var(--sbs-navy-dark);
color: #fff !important;
transform: translateY(-1px);
}
.sbs-shop-button:focus-visible {
outline: 3px solid rgba(229, 189, 86, .5);
outline-offset: 3px;
}
.sbs-shop-button.is-loading {
opacity: .72;
cursor: wait;
}
.sbs-shop-button.is-success {
border-color: #2f7450;
background: #2f7450;
}
.sbs-shop-button.is-error {
border-color: #a84545;
background: #a84545;
}
.sbs-shop-button.is-disabled,
.sbs-shop-button:disabled {
opacity: .58;
cursor: not-allowed;
transform: none;
}
.sbs-shop__live-region {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.sbs-shop .woocommerce-notices-wrapper,
.sbs-shop .woocommerce-message,
.sbs-shop .added_to_cart,
.sbs-shop a.added_to_cart {
display: none !important;
} @container (max-width: 940px) {
.sbs-book-card {
grid-template-columns: 175px minmax(0, 1fr);
gap: 28px;
}
.sbs-book-card__offers-column {
grid-column: 1 / -1;
}
.sbs-offer-row {
grid-template-columns: minmax(0, 1fr) 210px;
}
}
@container (max-width: 620px) {
.sbs-book-card {
grid-template-columns: 115px minmax(0, 1fr);
gap: 20px;
padding: 21px;
border-radius: 20px;
}
.sbs-book-card__cover-wrap {
min-height: 180px;
}
.sbs-book-card__cover {
max-height: 190px;
}
.sbs-book-card__description {
font-size: 17px;
line-height: 1.5;
}
.sbs-offer-row {
grid-template-columns: 1fr;
gap: 11px;
min-height: 0;
padding: 17px 0;
}
}
@container (max-width: 390px) {
.sbs-book-card {
grid-template-columns: 86px minmax(0, 1fr);
gap: 15px;
padding: 16px;
}
.sbs-book-card__cover-wrap {
min-height: 145px;
}
.sbs-book-card__genre {
margin-bottom: 9px;
font-size: 11px;
}
.sbs-book-card__description {
font-size: 15px;
line-height: 1.45;
}
}
@media (max-width: 700px) {
.sbs-shop {
width: min(100% - 20px, 1180px);
margin-top: 28px;
}
} body.sbs-custom-shop-page .products:not(.sbs-shop__list),
body.sbs-custom-shop-page ul.products,
body.sbs-custom-shop-page .woocommerce-loop-category__title,
body.sbs-custom-shop-page .product-category,
body.sbs-custom-shop-page .woocommerce-products-header + .products {
display: none !important;
}