/*
Tier catalog layout and card design.
Replaces the former window.resizeTiers jQuery routine that measured
.tier-product-sales-message, .tier-product-description2 and .tier-card and stamped
pixel heights onto each one. CSS Grid subgrid does the same alignment natively:
the #catalogBody.tier-grid container owns one shared set of row tracks and every
card passes those tracks down to its own sections, so the Nth section of every
card sits on the same track.
Tier cards deliberately carry no Bootstrap column classes. A percentage width such
as col-xl-4 resolves against the grid track rather than the row once the container
is a grid, which collapsed the cards and let fixed-size content spill out. The grid
owns column sizing outright.
Only loaded for tier catalogs (see _LayoutV2.cshtml).
*/
.tier-grid {
--tier-gap: 1.5rem;
--tier-col-min: 17rem;
/*
Target maximum width of a single card. Applied as a cap on the grid container
scaled by the card count, not on the tracks, so the cards stay equal width.
Without it a catalog with only one or two tiers stretches its cards across the
whole row on desktop. Raise it to widen the cards or set a large value to
effectively disable the cap.
*/
--tier-col-max: 24rem;
--tier-card-bg: #fff;
/*
Tint derived from the accent so it follows the admin button color. The flat
fallback covers browsers without color-mix.
*/
--tier-card-selected-bg: #f2f4f7;
--tier-card-radius: 16px;
--tier-card-border: #e4e7ec;
--tier-card-padding: 2rem 1.75rem;
/*
Height reserved for the sale-message band on every card, message or not, so a
single featured tier does not sit taller than the rest. Fits one line of the
banner text: .625rem of padding top and bottom plus .6875rem * 1.3 of line box.
*/
--tier-header-height: 2.15rem;
--tier-accent: #1f1f1f;
--tier-ink: #101828;
--tier-muted: #667085;
--tier-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);
--tier-shadow-featured: 0 4px 8px rgba(16, 24, 40, .06), 0 16px 40px rgba(16, 24, 40, .12);
}
/*
auto-fit keeps every tier on a single row and lets the cards shrink as the count
grows; it only wraps once a card would fall below --tier-col-min, which is the
mobile/tablet case.
The tracks stay 1fr so every card is the same width. A fixed minmax() maximum
sizes the tracks unevenly - grid fills each track to that maximum in turn rather
than sharing the leftover space - so the width cap lives on the container instead
(see the card-count rules below).
*/
#catalogBody.tier-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--tier-col-min), 1fr));
margin-inline: auto;
/*
Column gap only. The shorthand would also apply between the row tracks, and since
subgrid items inherit their parent's gaps every card would reproduce a gap between
each of its sections - including around tracks that collapsed to zero height for
that card. Section spacing is owned by each section's own margin instead.
*/
column-gap: var(--tier-gap);
row-gap: 0;
align-items: stretch;
margin-bottom: 0;
}
/*
Card-count width cap. CSS cannot cap a track and keep the tracks even, so the
container is capped to what N cards at --tier-col-max plus their gaps would occupy
and centered with the auto inline margins above. The cards stay adjacent and equal.
Counts past five are left uncapped - by then the cards are no longer oversized.
*/
#catalogBody.tier-grid:has(> .tier-col:first-child:last-child) {
max-width: var(--tier-col-max);
}
#catalogBody.tier-grid:has(> .tier-col:nth-child(2):last-child) {
max-width: calc(2 * var(--tier-col-max) + var(--tier-gap));
}
#catalogBody.tier-grid:has(> .tier-col:nth-child(3):last-child) {
max-width: calc(3 * var(--tier-col-max) + 2 * var(--tier-gap));
}
#catalogBody.tier-grid:has(> .tier-col:nth-child(4):last-child) {
max-width: calc(4 * var(--tier-col-max) + 3 * var(--tier-gap));
}
#catalogBody.tier-grid:has(> .tier-col:nth-child(5):last-child) {
max-width: calc(5 * var(--tier-col-max) + 4 * var(--tier-gap));
}
/*
min-width: 0 at every level of the chain. Grid items default to min-width: auto,
so a wide price or an unbreakable word in the description would otherwise force
the track wider than its share and push content past the card edge.
*/
.tier-grid .tier-col,
.tier-grid .tier-card-wrapper,
.tier-grid .tier-card,
.tier-grid .tier-card-body,
.tier-grid .tier-details {
min-width: 0;
}
.tier-grid .tier-col {
align-self: stretch;
}
.tier-grid .tier-card-wrapper,
.tier-grid .tier-card {
height: 100%;
}
/* Card shell */
.tier-grid .tier-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--tier-card-bg);
border: 1px solid var(--tier-card-border);
border-radius: var(--tier-card-radius);
box-shadow: var(--tier-shadow);
min-height: var(--tier-card-min-height, auto);
transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.tier-grid .tier-card-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: var(--tier-card-padding);
text-align: center;
}
@media (hover: hover) {
.tier-grid .tier-card:hover {
transform: translateY(-2px);
box-shadow: var(--tier-shadow-featured);
}
/* Without this the generic hover shadow would wipe out the selection ring. */
.tier-grid .tier-card--selected:hover {
box-shadow: 0 0 0 2px var(--tier-accent), var(--tier-shadow-featured);
}
}
.tier-grid .tier-card--selected {
border-color: var(--tier-accent);
background: var(--tier-card-selected-bg);
box-shadow: 0 0 0 2px var(--tier-accent), var(--tier-shadow);
}
@supports (background: color-mix(in srgb, red 5%, white)) {
.tier-grid .tier-card--selected {
background: color-mix(in srgb, var(--tier-accent) 7%, #fff);
}
}
/*
Featured tier. Driven by the presence of ModelProduct.SaleMessageHtml, which is the
only per-product "most popular" signal in the schema.
*/
.tier-grid .tier-card--featured {
border-color: var(--tier-accent);
box-shadow: var(--tier-shadow-featured);
}
/*
Sales message renders as the card header band. It is a child of .tier-card rather
than .tier-card-body so it can span the full card width edge to edge, under the
card's own padding.
The band height is fixed on every card, whether or not the product has a message,
so the sections below it start at the same offset in each tier. Without this the
only thing aligning the cards is the desktop [msg] subgrid track, which leaves the
wrapped and stacked layouts misaligned.
*/
.tier-grid .tier-card-header {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: var(--tier-header-height);
flex: 0 0 auto;
/* Inset by the 1px border so the band does not bleed past the rounded corner. */
border-radius: calc(var(--tier-card-radius) - 1px) calc(var(--tier-card-radius) - 1px) 0 0;
overflow: hidden;
}
.tier-grid .tier-product-sales-message--filled {
/*
Block rather than flex: text-overflow only applies to the inline content of a
block container, and a flex container would wrap the text in an anonymous item
where the ellipsis never takes effect. line-height equal to the band height
centers the single line vertically.
*/
display: block;
/* Horizontal padding only - the header element owns the vertical size. */
padding: 0 1rem;
width: 100%;
background: var(--tier-header-bg, var(--tier-accent));
color: var(--tier-header-color, #fff);
font-size: .6875rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
line-height: var(--tier-header-height);
/*
A message long enough to wrap would push past the fixed band height, so it is
clamped to a single line instead.
*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/*
The banner colors are inherited, so markup that ships its own tags stays legible.
Wrapper tags are forced inline-block so a
or
in the admin HTML cannot
start a new line box and defeat the clamp above.
vertical-align: middle with a neutral line-height keeps an inline icon centered
against the label. Left on the baseline, a glyph larger than the 11px banner text
(an icon font sized at 20px, for example) sits noticeably low.
*/
.tier-grid .tier-product-sales-message--filled * {
color: inherit;
margin: 0;
display: inline-block;
vertical-align: middle;
line-height: 1;
white-space: nowrap;
}
/*
Cards without a sale message still need the header element to reserve the band
height (and hold the [msg] track), but it must show no background.
*/
.tier-grid .tier-product-sales-message--empty {
padding: 0;
background: none;
}
.tier-grid .tier-image {
display: block;
margin: 0 auto 1rem;
height: var(--tier-image-height, 175px);
width: var(--tier-image-width, 175px);
max-width: 100%;
object-fit: contain;
}
.tier-grid .tier-product-name {
margin: 0 0 .5rem;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.3;
color: var(--tier-ink);
}
.tier-grid .tier-product-description {
margin: 0 0 1.25rem;
font-size: .875rem;
line-height: 1.5;
color: var(--tier-muted);
overflow-wrap: anywhere;
}
/* Price */
.tier-grid .tier-price {
display: flex;
align-items: baseline;
justify-content: center;
flex-wrap: wrap;
gap: .125rem;
margin-bottom: 1.5rem;
color: var(--tier-ink);
}
/* Fluid so the amount scales with the track instead of overflowing narrow cards. */
.tier-grid .tier-price__amount {
font-size: clamp(2rem, 1.25rem + 2.2vw, 3.125rem);
font-weight: 600;
line-height: 1.1;
letter-spacing: -.02em;
}
.tier-grid .tier-price__currency {
font-size: clamp(1rem, .8rem + .5vw, 1.25rem);
font-weight: 600;
align-self: flex-start;
margin-top: .35em;
}
.tier-grid .tier-price__interval,
.tier-grid .tier-price__after {
font-size: clamp(.875rem, .8rem + .3vw, 1rem);
color: var(--tier-muted);
}
/* Feature list */
.tier-grid .tier-details {
display: flex;
flex-direction: column;
flex: 1 1 auto;
text-align: left;
}
.tier-grid .tier-product-description2 {
flex: 1 1 auto;
}
.tier-grid .tier-details-title {
margin: 0 0 .75rem;
font-size: .75rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--tier-muted);
}
.tier-grid .tier-product-description2 {
font-size: .875rem;
line-height: 1.6;
color: var(--tier-ink);
overflow-wrap: anywhere;
}
.tier-grid .tier-product-description2 ul {
list-style: none;
margin: 0;
padding: 0;
}
.tier-grid .tier-product-description2 li {
position: relative;
padding-left: 1.65rem;
margin-bottom: .5rem;
}
.tier-grid .tier-product-description2 li::before {
content: "";
position: absolute;
left: 0;
top: .3em;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: var(--tier-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center / .7rem no-repeat;
}
/*
Admin-authored description HTML often ships its own bullet icon (a Bootstrap
Icons , an inline