/* The offers catalog and the offer pages (STEP 3.3). Brand tokens only; test/app-system.test.js checks. */
.catalog-cards{padding:0;margin:0;list-style:none}
/* Art round 4 (B129, point 7): a card is as tall as its own content, so a one-price card no longer
   stretches to the tallest card of its row and stands half empty. */
.catalog-cards.bw-cards{align-items:start}
.catalog-cards>.catalog-item{margin:0;display:flex}
.catalog-cards>.catalog-item>.bw-card{flex:1 1 auto}
.catalog-cards>.catalog-item[hidden]{display:none}
/* Art director live round 1, item 6: a group's last row has no empty cell. With four columns (1,024 px
   and up, .bw-cards--4) a lone last card takes the row, a last pair takes half each, and the third of a
   last three takes two columns; with two columns (768 to 1,023 px) an odd last card takes the row. */
@media (min-width:1024px){.catalog-cards>li:last-child:nth-child(4n+1){grid-column:1 / -1}.catalog-cards>li:nth-last-child(2):nth-child(4n+1),.catalog-cards>li:last-child:nth-child(4n+2){grid-column:span 2}.catalog-cards>li:last-child:nth-child(4n+3){grid-column:span 2}}
@media (min-width:768px) and (max-width:1023px){.catalog-cards>li:last-child:nth-child(2n+1){grid-column:1 / -1}}
/* Art round 4 (B129, point 7): a last-row card that spans two or more columns sets its title in the first
   half and its prices and terms in the second, so the wide card is not half empty. */
@media (min-width:1024px){.catalog-cards>li:last-child:nth-child(4n+1)>.bw-card,.catalog-cards>li:nth-last-child(2):nth-child(4n+1)>.bw-card,.catalog-cards>li:last-child:nth-child(4n+2)>.bw-card,.catalog-cards>li:last-child:nth-child(4n+3)>.bw-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;column-gap:var(--bw-layout-gutter)}}
@media (min-width:768px) and (max-width:1023px){.catalog-cards>li:last-child:nth-child(2n+1)>.bw-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;column-gap:var(--bw-layout-gutter)}}
.catalog-cards .bw-card{grid-auto-flow:row dense}
.catalog-cards .bw-card>.bw-card__title{grid-column:1;grid-row:1 / span 2}
.catalog-cards .bw-card>:not(.bw-card__title){grid-column:-2}
.bw-card__prices{display:grid;gap:var(--bw-space-4)}
.offer-prices .action{white-space:nowrap}
.offer-prices .action .bw-button{min-height:var(--bw-space-32);padding-block:var(--bw-space-4)}
/* Art round 4 (B129, points 14, 15 and 16): on a phone a table's Buy button is a full 48 px touch target,
   and a price cell is one text block: its amount, unit, period and note wrap together beside the label
   instead of standing as separate pieces of the stacked cell. */
@media (max-width:767px){.offer-prices .action .bw-button{min-height:var(--bw-layout-control-height);padding-block:var(--bw-space-12)}}
.price-cell{display:block;min-width:0}
.offer-deadline{max-width:var(--bw-measure)}
.catalog-pick .bw-button{align-self:flex-start}
.offer-prices td.bw-num,.ladder-prices td.bw-num{white-space:normal}
/* Art round 3 (B125). Point 14: a price's amount and its unit or period stay on one line ("$35 a month");
   where four cards share 976 px (1,024 to 1,279 px), a card's large price takes the 20 px step so it fits.
   Point 7: an offer group's heading sits 24 px above its cards, and a group starts well clear of the
   cards before it. Point 8: on the offer page every second column starts on the fifth column's line, so
   the facts beside the prices start there too from 1,024 px. */
.price-unit{white-space:nowrap}
@media (min-width:1024px) and (max-width:1279px){.catalog-cards .bw-card__price{font-size:var(--bw-text-20);line-height:var(--bw-leading-20)}}
.catalog-group{margin-block-start:var(--bw-space-48)}
.catalog-group+.catalog-group{margin-block-start:var(--bw-space-64)}
.catalog-group>h3+.catalog-cards{margin-block-start:var(--bw-space-24)}
@media (min-width:1024px){#first-screen .bw-facts{grid-template-columns:calc(4 * var(--bw-layout-col) + 3 * var(--bw-layout-gutter)) minmax(0,1fr)}}
/* Print: the offer, its prices, deadline and terms; no navigation, forms, buttons or doors. */
@media print{.bw-site-nav,.bw-site-footer,.bw-skip,.bw-doors,[data-catalog],[data-chooser],[data-chooser-result],.bw-button,#doors-title{display:none!important}.bw-band{background:none}.bw-region{padding-block:var(--bw-space-24)}.bw-table-wrap{overflow:visible}.offer-prices .action{display:none}}