/*
Theme Name:		Cardsmiths Storefront 2022
Theme URI:		https://wordpress.org/themes/storefront
Description:	Cardsmiths is a Storefront child theme
Author:			WooThemes
Author URI:		http://woothemes.com
Template:		storefront
Version:		1.0.1
License:		GNU General Public License v2 or later
License URI:	http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:	cardsmiths
*/

/*@import url("../storefront/style.css");*/

/* PERF-PHASE-2 (2026-10-01): Sora is self-hosted now.
 * It used to arrive by @import from fonts.googleapis.com, which meant the
 * browser had to fetch and parse this 171 KB stylesheet - 24th of the 25 in
 * <head> - before it could even discover the font, then cross two more
 * origins (googleapis, gstatic) to get it. That chain was the ~1,000 ms LCP
 * render delay and the CLS of 0.174: text painted in Arial, then reflowed
 * when Sora finally landed.
 *
 * Preloaded in csb_perf_preload_font(). font-display:optional means Sora is
 * used only if it is ready by first paint, so there is no swap and no shift;
 * after the first visit it is cached and effectively always ready.
 *
 * One variable file per subset (wght 400-800 covers the 400/700 this theme
 * asks for). latin-ext is kept so accented player names render in Sora too -
 * it is only fetched when such a character appears. */
@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 400 800;
	font-display: optional;
	src: url('fonts/sora-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 400 800;
	font-display: optional;
	src: url('fonts/sora-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* was @import url('fonts/stylesheet.css') - one more chained request, for a
 * face only template-mobile.php uses. Inlined; the woff2 itself is still
 * fetched only when something actually asks for LCD. */
@font-face {
	font-family: 'LCD';
	src: url('fonts/LCD14.woff2') format('woff2'),
		url('fonts/LCD14.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
/* Change main font to Sora */
body, button, input, textarea {
    font-family: "Sora";
	color: black;
}
h1, h2, h3, h4, h5, h6 {
	font-family: "Sora";
}

button.alt, 
input[type="button"].alt, 
input[type="reset"].alt, 
input[type="submit"].alt, 
.button.alt, 
.widget-area .widget a.button.alt {
    background-color: #FFC82E;
    border-color: #333333;
    color: #333;
    border-radius: 12px;
}

a {
	text-decoration: none;
	color: #15ccad;
}

/* Site navigation/header */
.site-header {
	background-color: #FFF;
	padding-top: 0;
}

.main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.main-navigation ul li a:hover, 
.main-navigation ul li:hover > a, 
.site-title a:hover, 
.site-header ul.menu li.current-menu-item > a {
    color: #15CCAD; /* mint green */
}

/* SPEC 36 L5 (Sam, Oct 25 2026: the dropdown is "light grey panel, grey text
 * in the fallback font, on a black header"). The grey is NOT Storefront's
 * .main-navigation ul ul rules - those carry no colour at all, only
 * float/position/left:-9999px/width:200px. It is the CUSTOMIZER:
 * storefront/inc/customizer/class-storefront-customizer.php:1038 prints
 *   @media (min-width:768px){ .main-navigation ul.menu ul.sub-menu,
 *     .main-navigation ul.nav-menu ul.children{background-color:#f0f0f0} }
 * into <style id="storefront-style-inline-css"> - head line 542 of the live
 * homepage - being header_background_color #ffffff darkened 15%. The grey
 * TEXT is ours: .dark-mode .main-navigation ul li a{color:#999}, ~line 1947.
 *
 * Won on specificity, not on !important and not on enqueue order. The
 * customizer panel rule is (0,3,2); Storefront's own
 * .main-navigation ul.menu ul li a{padding:.875em 1.41575em;font-weight:400;
 * font-size:.875em} is (0,2,4); the #999 is (0,2,3). The .site-header prefix
 * makes the rules below (0,4,2)/(0,4,4) and clears all three. That also
 * holds whenever css/csb-critical*.css is live, because that block is
 * inlined at wp_head 9 - AFTER this stylesheet - and carries those same
 * Storefront rules verbatim. Do not shorten these selectors.
 *
 * One set covers the lot: LIVE BREAKS, Checklists, FAQ/TERMS and the phone
 * list are all ul.sub-menu inside .main-navigation.
 *
 * No font-family here on purpose. Sora is inherited from body above, and it
 * is font-display:optional (see PERF-PHASE-2 at the top of this file), so a
 * cold first paint uses the fallback face either way. The change Sam will
 * see is the panel, the weight, the size and the colour. */
.site-header .main-navigation ul.menu ul.sub-menu {
	background-color: #111418;
	border: 1px solid #272d34;
	border-radius: 10px;
	padding: 6px;
}
.site-header .main-navigation ul.menu ul.sub-menu li a {
	font-size: 13px;
	font-weight: 600;
	color: #e6e9eb;
	padding: 8px 12px;
	border-radius: 6px;
}
/* li:hover > a as well as a:hover, because Storefront tints the whole row
 * that way (ul.menu ul li:hover>a{background-color:rgba(0,0,0,.025)}); and
 * current-menu-item has to be restated because the mint rule above,
 * .site-header ul.menu li.current-menu-item > a, is only (0,3,3) and loses
 * to the item rule. On the homepage that item is "All Checklists". */
.site-header .main-navigation ul.menu ul.sub-menu li a:hover,
.site-header .main-navigation ul.menu ul.sub-menu li:hover > a,
.site-header .main-navigation ul.menu ul.sub-menu li.current-menu-item > a {
	color: #15ccad;
	background-color: #171c22;
}
/* The phone list is in the FLOW. Storefront collapses a sub-menu there with
 * visibility:hidden;opacity:0;max-height:0, so the panel never paints when
 * closed - but max-height caps the CONTENT box only, so the 6px padding and
 * 1px border above would still reserve 6+6+1+1 = 14 px of dead space under
 * every closed parent, three of them in this menu. Measured at 390 px with
 * the two rules below removed: each closed parent li went 40.4 px -> 53.5 px.
 * Six classes, so these win wherever they sit in the file; do not collapse
 * them into the rule above. */
.site-header .main-navigation .handheld-navigation ul.menu ul.sub-menu {
	padding: 0;
	border-width: 0;
}
.site-header .main-navigation .handheld-navigation ul.menu ul.sub-menu.toggled-on {
	padding: 6px;
	border-width: 1px;
}
/* Belt, and dead today: the customizer paints the notch pseudo-element
 * .main-navigation ul.menu > li.menu-item-has-children:after #ffffff too,
 * but nothing in Storefront or here gives it `content`, so it generates no
 * box. If an update ever adds one, it would land white on the dark panel. */
.site-header .main-navigation ul.menu > li.menu-item-has-children::after {
	background-color: #111418;
}

.site-header-cart .cart-contents .amount {
    font-size: 14px;
    font-weight: 700;
}

/* CART */
.woocommerce-cart-form .cart_item{
	display:flex !important;
	margin-bottom: 25px;
}
.thumbnail img {
	width:200px;
	height: auto;
}
.thumbnail img {
	overflow: hidden;
}
.product-details {
	flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
	box-shadow: 0px 2px 4px rgb(0 0 0 / 28%);
    border-radius: 4px;
}
.product-details-top,
.product-details-bottom {
	display :flex;
	justify-content: space-between;
	align-items: center;
	height: 50%;
}
.product-details-top {
	border-bottom: 3px solid #15ccad;
}
.product-details-top .product-name a {
	color: black;
	font-size: 18px;
	font-weight: bold;
}
.product-details-bottom .amount {
	font-size: 18px;
	font-weight: bold;
}
.product-remove .remove::before{
	color: #c00;
	/*font-size: 20px;*/
	font-size: 1.618em;
    line-height: 1em;
}
.coupon {
	text-align: right;
}
.woocommerce-cart-form button,
.coupon .input-text,
.coupon .button{
	border-radius: 8px;
	margin: 5px;   
}
.woocommerce-cart-form button {
	float:right;
	clear: both;
}
.woocommerce-cart-form button,
.coupon .button {
	width: 165px;
}
.woocommerce-cart-form button:disabled {
	display: none;
}
.product-details-reserved {
    flex-grow: .75;
}
.woocommerce-cart-form .cart-label {
	font-size: 10px;
}

.pagination .page-numbers li .page-numbers, .woocommerce-pagination .page-numbers li .page-numbers {
    background-color: rgb(21 204 173 / 25%);
}

.woocommerce-pagination .page-numbers li .page-numbers.current {
    background-color: #15ccad;
    color: white;
}
.woocommerce-result-count {
    color: #15ccad;
}

table#resultstable td {
	padding: 0;
}
table#resultstable thead tr td,
table#resultstable td:nth-child(2n){
	border-right:1px solid black;
}
table#resultstable td.high {
    background-color: #15ccad;
	color: white;
}
/* LIVE STREAM PAGE */
.livebreaks {
	width: 100%;
	overflow: hidden;
	background: #1d2126;
	/*display: grid;
    grid-template-columns: 1fr 300px;*/
}

.livechat {
	float: left;
	position: relative;
	width: 33%;
	padding-bottom: 35.67%; 
	padding-top: 25px;
	height: 0;
}

.livevideo {
	position: relative;
	width:100%;
	padding-bottom: 40.67%; 
	height: 0;
}
.livebreakstatus{
    float: left;
    margin-top: 10px;
}
.videocompleted iframe {
	width: 100%;	
}
.livevideo iframe,.livechat iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

h3.yourteams {
	padding: 0;
}

h3.allteams {
	padding: 0;
}
.home .site-main{
	margin-bottom: 0;
} 
.home .content-area {
	margin-bottom: 0;
}
.page-template-template-livestream-php .wrapper .content-area {
	float: none;
	width: 100%;
}

.page-template-template-livestream-php h1.title {
	display: none;
}

.page-template-template-livestream-php .page {
	width:55%;
	margin: 0 auto;
	
}

#leftbreak {
	width:100%;
	overflow: hidden;
	clear: both;
	max-width:1320px;
}

#rightbreak {
	width: 240px;
	float: right;
	padding-left: 10px;
	overflow: hidden;
}

#leftbreak li,
#rightbreak li {
	list-style: none;
}

#leftbreak h2,
#rightbreak h2 {
	padding: 0;
	font-size: 90%;
}

#leftbreak .widget,
#rightbreak .widget {
	margin-bottom: 10px;
}

.buy .nickname {
	font-weight: bold;
	/*color: #FF0000;*/
	color: #000;
	text-decoration: underline;
}
.slots-feat img {
	width: 161px;
	height: auto;
}
.slots-feat {
	width: 161px;
	overflow: hidden;
	position: relative;
}
.slots-right{
	display:flex;
	flex-direction: column;
    flex-grow: 1;
	padding: 20px;
}
.slots-middle, 
.slots-bottom {
	display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50%;
}

.slots-link a {
	margin-top: 0px;
	padding: 0;
	font-weight: bold;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: -0.01em;
	color: #151619;
}
.slots-middle {
	border-bottom: 4px solid #F7F7F7;
}
.slots-message .slots-teams-slots {
	color: #15ccad;
	font-weight: bold;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.slots-message .slots-qty {
	font-weight: bold;
	font-size: 24px;
	line-height: 34px;
	letter-spacing: -0.02em;
	color: #151619;
}

.slots-buy{
	margin-right:10px;
}
.slots-entry {
	display: grid;
	grid-template-columns: 161px 1fr;
	grid-template-rows: 161px;
	border-radius: 8px;
    overflow: hidden;
    background: white;
	/*width: 48%;*/
}

.livestream-slots-contain{
	display: flex;
	flex-flow: row wrap;
	gap: 10px;
}
.slots-action .button {
	width: 225px;
	height: 48px;
	background-color:#15ccad;
	text-decoration:none;
	margin:0;
	text-align: center;
	color: white;
	padding: 6px 20px;
	border-radius: 8px;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.slots-action .button:hover {
	text-decoration:underline;
}
.slots-action .button.future a {
	color: white;
}
.csbopenslots {
	overflow:hidden
}
.slots-buy,.slots-buy a {
	cursor:pointer;
}
.csbhomeupcoming .slots-feat {
	max-width:100%;
}
.csbhomeupcoming {
	background: white;
}

#break-name {
	color: #FFC82E;
	font-weight: 600;
	font-size: 24px;
	line-height: 34px;
}
.currentbreak .currenttitle img {
	float:left;
	margin-right: 15px;
    width: 45px;
}
.currentbreak .current-break-label {
	color: white;
	font-weight: normal;
}
.currentbreak .currenttitle {
	padding: 10px 0;
	border-top: 4px solid white;
	border-bottom: 4px solid white;
	overflow: hidden;
}

.clearfix {
	clear: both;
}
.purchased-alert{
    background:url(/wp-content/themes/cardsmiths/images/mint-badge.png), center center no-repeat;
    background-size: 100%;
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: 0px;
    color: white;
    text-align: center;
    padding: 5px;
	font-weight: bold;
}
.upcoming-entry .purchased-alert{
	bottom: 35px;
	width: 110%;
	margin-left: -10px;
}
.purchased-mine {
	border: 5px solid #15ccad;
}
.upcoming-entry:not(.purchased-mine) {
	margin: 5px;
}
.current-break-label,
#break-extra .slots-remaining {
    text-transform: uppercase;
}
#break-extra .slots-remaining-count {
	color: #FFC82E;
	font-weight: bold;
	font-size: 48px;
	line-height: 52px;
}

.csbfbouter {
    width: 100%;
	max-width: 1320px;
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 0px;
    align-items: end;
	background-image: url('/wp-content/themes/cardsmiths/images/fb-back.png');
}

.see-auction.button a {
	line-height: 36px;
    color: white;
}
.csbfbouter button{
	padding: 14px 24px;
    border-radius: 12px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    height: 46px;
    letter-spacing: 1px;
	width: 200px;
}

.csbfbouter button.gold {
    background-color: #FFC82E !important;
    color: black !important;
}

.csbfbouter button.mint {
    background-color: #15ccad !important;
    color: white !important;
}
.community-flex {
	display:flex;
	flex-direction: column;
    gap: 15px;
}
.community-flex .title.white {
	color: white;
}
.community-flex .title.mint {
	color: #15ccad;
}
.community-flex .title.gold {
	color: #FFC82E;
}
.community-flex .title {
	font-weight: bold;
	font-size: 48px;
	line-height: 52px;
	letter-spacing: -0.04em;
	text-align: left;
}
.community-flex .desc {
	color:white;
	font-weight: bold;
	font-size: 16px;
	line-height: 22px;
}
.outer-flex {
	display:flex;
	justify-content: space-between;
	flex-direction: column;
}

.livestream-day {
	overflow:hidden;
	float:left;
	margin-right:10px;
	border-left:3px solid black;
	padding-left:5px;
}
.home .livestream-day {
	float: none;
	overflow:hidden;
	margin-right:10px;
	border-left: none;;
	padding-left:5px;
	width: 85%;
    max-width: 1320px;
    margin: 0 auto;
}
.csbhomeinfo {
	background: black;
}
.csbhomeinfo #sb_instagram {
	width: 85% !important;
	max-width: 1320px;
	margin: 0 auto;
}
.livestream-open-day-title,
.livestream-day-title {
	font-weight: bold;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	padding: 5px 0;
	border-bottom: 4px solid rgba(86, 92, 114, .2);
	margin-bottom: 10px;
}
.home .livestream-day-title {
	border-bottom: none;
}
.livestream-open-day-title img,
.livestream-day-title img {
	height: 24px;
	width: auto;
	margin-right: 10px;
}
.livestream-day-title {
	color: #FFC82E;
}
.livestream-open-day-title {
	color: #15ccad;
}

.preview-left{
    width:365px;
    float:left;
}
.preview-right{
    width:calc(100% - 385px);
    float:right;
}

.simple-auctions .entry-header .entry-title{
	font-size: 24px;
	line-height: 32px;
}
.simple-auctions .entry-header .entry-title a {
	text-decoration: none;
}

.rectal-bar-contain{
    /*background: #15ccad9c;*/
    background-color: #c0c0c0;
    width: 100%;
	border-radius: 12px;
	overflow:hidden;
	/*background-image: url(/wp-content/themes/cardsmiths/images/hundy.jpg);
    background-repeat: no-repeat;
    background-position: 66.6%;
    background-size: contain;*/
}
.rectal-bar{
    background: #15ccad;
    text-align: center;
    height: 35px;
    color: white;
    font-size: 25px;
    line-height: 35px;
	min-width: 45px;
}
.rectal-contain {
    display: flex;
    flex-direction: column;
    align-items: center;
	padding: 10px 0;
}
.rectal-bar-desc{
    text-align: center;
    font-weight: bold;
}
.rectal-contain a.info-link {
	text-decoration: none;
}
.rectal-contain a.info-link:hover {
	text-decoration: underline;
}

.storefront-breadcrumb {
    margin: 0;
}

@media screen and (max-width: 768px) {
    .preview-left{
        width:365px;
        max-width:100%;
        margin: 0 auto;
        float:none;
    }
    .preview-right{
        width:100%;
        float:none;
    }
}

@media (min-width: 768px) {
	.col-full {
		max-width: 1320px;
	}
	/* the header lines up with the homepage bands: same 1440 box, same
	 * 16px gutters, so the logo starts where the search bar does
	 * (Storefront's .col-full is content-box + 2.6em padding, which is
	 * why this one spells out its own box) */
	#masthead .col-full {
		display: flex;
		align-items: center;
		max-width: 1440px;
		height: 120px;
		width: auto;
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}

	#masthead .main-navigation {
		text-align: right;
	}

	.woocommerce-active .site-header div.site-branding {
		width: auto;
	}
	.site-branding {
		margin-bottom: 0 !important;
		margin-right: 0 !important;
	}
	.site-header .site-branding img {
		max-width: 330px;
		height: 64px;
		width: auto;
	}
}
.entry-title:not(.product_title) {
    font-size: 96px;
    line-height: 96px;
    font-weight: 600;
    text-align: left;
}
.site-main.skinny {
	max-width: 650px;
	margin: 0 auto;
}

/* Homepage widget tweaks */
.page-template-template-homepage .widget {    
	list-style: none; 
	margin-bottom:0px;
	overflow:hidden;
}
/*
.csbhomebanner {
	background: black;
    padding: 40px 0;
}
.csbhomebanner img {
	max-width: 1920px;
	margin: 0 auto;
	width: 100%;
}
*/

.page-template-template-homepage:not(.has-post-thumbnail) .site-main {
    padding-top: 0;
}
.csbhomefeatured h3 {
	color: white;
    background-color: #15CCAD;
	display: inline-block;
	font-size: 1em;
	padding: 4px 8px;
    text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 2px;
}
.home-break-date {
	font-weight: bold;
	font-size: 48px;
	line-height: 52px;
	letter-spacing: -0.04em;
	color: #151619;
	padding-bottom: 20px;
}
.home-break-date.top {
	text-align:center;
	width: 85%;
	max-width: 1325px;
	margin: 15px auto 0;
	padding-bottom: 0;
}
.page-section-header {
	text-align: right;
}
.homepage-section-header { 
    display: flex;
    align-items:center;
}
.homepage-section-header span{
	font-size: 2em;
	color:black;
    margin-left: 10px;
    font-weight: 700;
}
.homepage-section-header img {
	width: 54px;
	height: auto;
}
.home #content .col-full{
	max-width:100%;
	padding: 0;
}
/*
.homewidgetarea {
	padding: 0 20px;
}
*/
li.product {
    background-color: white;
    overflow: hidden;
    border-radius: 12px;
}
/*
.plus, .minus {
	padding: 0.6180469716em 0 !important;
}

#uwa_auction_form {
	width: 325px;
}
#uwa_auction_form button{
	margin: 0;
}
*/
.csbauctionpage,
.csbhomecontain {
	background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)),
	    url(/wp-content/themes/cardsmiths/images/csb-back.png);
    background-repeat: no-repeat,
	    no-repeat;
    background-position: 0 375px,
	    85% 0;
    background-size: 100%,
	    65%;
    padding: 25px;
}
.pb-cat-contain {
	display: flex;
	justify-content: space-between;
}
.personal-break-container {
	background-color: #F7F7F7;
    padding: 20px;
}
.personal-break-container .woocommerce {
	max-width:1320px;
	margin: 0 auto;
}
.page-id-128572 #content .col-full {
	max-width:100%;
	padding: 0;
}
.pb-sort-links{
	width:40%;
	display: flex;
	flex-direction: column;
	height: 96px;
	justify-content: space-between;
}
.pb-sort-links .row {
	display: flex;
}
.pb-sort-links .item {
	flex: 1;
}



.pb-sort-links a.sortlink {
	color: black;
}

.pb-sort-links a.highlight {
	color: #15CCAD;
}

.pb-hr {
	background-color: #15CCAD;
	height: 5px;
	width: 100%;
}
.woocommerce-loop-product__title {
	text-align: left;
	margin-left:20px;
	margin-right:20px;
	color: black !important;
	line-height: 1.3rem;
    height: 4em;
    overflow: hidden;
}
.product-type-auction .woocommerce-loop-product__title {
    height: 4em;
}
.csb-stock {
	color: #15CCAD;
	font-weight: 700;
	text-align: left;
	margin-left:20px;
	margin-right:20px;
	letter-spacing: 1px;
    text-transform: uppercase;
}
.auction-ongoing .csb-stock{
	text-align: center;
	font-size: 22px;
}
.auction-ongoing .hasCountdown{
	font-size: 22px;
	padding: 0;
}
ul.products.columns-1 li.product {
	margin-bottom: 0;
}

ul.products li.product .price {
	text-align: left;
	margin-left:20px;
	margin-right:20px;
	font-weight: 700;
	letter-spacing: 1px;
	color: black;
}

.auction-mini .button,
.product .button,
.button.product_type_auction,
.add_to_cart_button,
.button.product_type_variable,
.future-msg {
	width: calc(100% - 20px);
	padding: 14px 18px;
	border-radius: 12px;
	background-color: #FFC82E !important;
	color: black !important;
    text-transform: uppercase;
	font-weight: 700;
	font-size: 12px;
	/*height: 46px;*/
	letter-spacing: 1px;
	margin: 0 auto;
	margin-bottom: 10px !important;
	text-align: center;
	display: block;
}
.single-product .product .button {
    margin: inherit;
    margin-bottom: 10px !important;
}
.auction-mini .button:hover,
.product .button:hover,
.button.product_type_auction:hover,
.add_to_cart_button:hover,
.button.product_type_variable:hover,
.future-msg:hover {
	background-color: #ffe290 !important;
} 

.auction-mini img { width:100% }

.hasCountdown {
	color: #15ccad;
	font-size: 18px;
	font-weight: bold;
}
.all-auction-link {
	text-align: center;
}
.all-auction-link a {
	color: #FFC82E;
}
.all-auction-link a:hover {
	color: #ffe290 !important;
} 


.future-msg a {
	color: black;
}
.home #colophon {
	background-color: black;
}
#colophon {
	/*background: linear-gradient(90deg, #FFFFFF 5.1%, rgba(255, 255, 255, 0) 105.1%);*/
	background-color: white;
	mix-blend-mode: normal;
	min-height: 400px;
    background-image: 
		linear-gradient(90deg, #FFFFFF 5.1%, rgba(255, 255, 255, 0) 105.1%),
		url(/wp-content/themes/cardsmiths/images/footer-back.png);
	background-position: 100% 50px, 100% 50px;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;

}
.site-footer {
	color: black;
	background-color: inherit;
	padding: 0;
}
.storefront-handheld-footer-bar ul li>a {
	color: #15ccad;
	background-color: black;
}
.storefront-handheld-footer-bar {
	background-color: black;
}

.storefront-handheld-footer-bar ul li.cart .count {
    background-color: #15ccad;
    color: #ffffff;
    border-color: #15ccad;
}

/*
.auction-home-contain.hockey .auction-mini img,
.product-type-auction.hockey img.wp-post-image,
.product-type-auction.hockey a.woocommerce-LoopProduct-link img {
	padding: 10px;
	background-image: url(/wp-content/themes/cardsmiths/images/product-image-hockey.jpg);
	background-size: cover;
}

.auction-home-contain.baseball .auction-mini img,
.product-type-auction.baseball img.wp-post-image,
.product-type-auction.baseball a.woocommerce-LoopProduct-link img {
	padding: 10px;
	background-image: url(/wp-content/themes/cardsmiths/images/product-image-baseball1.jpg);
	background-size: cover;
}

.auction-home-contain.wwe .auction-mini img,
.product-type-auction.wwe img.wp-post-image,
.product-type-auction.wwe a.woocommerce-LoopProduct-link img {
	background-image: url(/wp-content/themes/cardsmiths/images/product-image-wwe1.jpg);
	background-size: cover;
}

.auction-home-contain.soccer .auction-mini img,
.product-type-auction.soccer img.wp-post-image,
.product-type-auction.soccer a.woocommerce-LoopProduct-link img {
	padding: 10px;
	background-image: url(/wp-content/themes/cardsmiths/images/product-image-soccer2.jpg);
	background-size: cover;
}

.auction-home-contain.golf .auction-mini img,
.product-type-auction.golf img.wp-post-image,
.product-type-auction.golf a.woocommerce-LoopProduct-link img {
	padding: 10px;
	background-image: url(/wp-content/themes/cardsmiths/images/product-image-golf.jpg);
	background-size: cover;
}
.auction-home-contain.racing .auction-mini img,
.product-type-auction.racing img.wp-post-image,
.product-type-auction.racing a.woocommerce-LoopProduct-link img {
	background-image: url(/wp-content/themes/cardsmiths/images/product-image-racing.jpg);
	background-size: cover;
}
.auction-home-contain.basketball .auction-mini img,
.product-type-auction.basketball img.wp-post-image,
.product-type-auction.basketball a.woocommerce-LoopProduct-link img {
	padding: 10px;
	background-image: url(/wp-content/themes/cardsmiths/images/product-image-basketball1.jpg);
	background-size: cover;
}

.auction-home-contain.football .auction-mini img,
.product-type-auction.football img.wp-post-image,
.product-type-auction.football a.woocommerce-LoopProduct-link img {
	padding: 10px;
	background-image: url(/wp-content/themes/cardsmiths/images/product-image-football.jpg);
	background-size: cover;
}
*/

.auction-home-contain {
	display: grid;
    grid-template-columns: 33% repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
	margin-bottom: 4.235801032em;
}

.auction-mini {
	background-color: white;
	overflow: hidden;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.auction-mini-price {
	font-weight: bold;
	padding-left: 10px;
	text-align:center;
}
.auction-home-first {
	grid-column-start:1;
	grid-column-end:2;
	grid-row-start:1;
	grid-row-end:3;
}

.auction-mini-team-name{
	margin: 0 10px;
	font-weight: bold;
	text-align: center;
	height: 2em;
    line-height: 1em;
    overflow: hidden;
}
.auction-home-ending {
	font-weight: bold;
	font-size: 18px;
}
.csbauctionsearch {
	list-style: none;
}
.auction-container-container {
	display: grid;
	/*grid-auto-flow: column;
	grid-auto-columns: 1fr;*/
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}
.auction-search{
	max-width: 360px;
}
.auction-search.selected{
	border: 5px solid #15ccad;
	padding: 5px;
}
.auction-player {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 10px;
    font-size: 24px;
    background: rgb(0,0,0,.65);
    color: white;
	z-index: 10;
}
.auction-player.widget {
	font-size: 14px;
	text-align:center;
	gap: 10px;
}
.csb-product-image-wrapper {
    position: relative;
}

#footer-right {
	height: 400px;
    width: 354px;
	float:left;
	padding-top:150px;
	margin-left: 15%;
	background-image: 
       url(/wp-content/themes/cardsmiths/images/mint-rhombus-back.svg),
       url(/wp-content/themes/cardsmiths/images/mint-back.png);
	background-size: contain, contain;
	background-repeat: no-repeat, no-repeat;
}
#footer-left {
	width: 50%;
	float:left;
	display: flex;
	justify-content: space-around;
    align-items: flex-start;
    padding-top: 150px;
}
.mobile-link-images {
	width: 270px;
	margin: 0 auto;
}
.mobile-link-images img {
	height: 40px;
	width: auto;
	display: inline-block;
}
.mobile-link-images.page {
	margin: 0;
} 
.keep-up {
	color: white;
	font-size: 36px;
	line-height: 48px;
    font-weight: bold;
	width: 270px;
	margin: 0 auto;
}

.mobile-app{
	font-weight: bold;
	font-size: 16px;
	line-height: 22px;
	width: 270px;
	margin: 0 auto;
}
.home-pb-sport-select {
    text-align: right;
}
.home-pb-title-outer {
	background-color: white;
}
.home-pb-title-sizer {
	width: 77.5%;
	max-width: 1320px;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 10px;
}
.home-section-contain {
	width:85%;
	max-width: 1320px;
	margin: 0 auto;
}

.csbhomepersonal {
    background-color: #F7F7F7;
}
.csbhomepersonal .homepage-section-header {
	background-color: white;
	padding-left: 7.5%;
}
.pb-cat-contain {
	background-color: white;
}
.home-inner-contain {
	/*width:95%;*/
	margin: 0 auto;
}
ul.products li.product img {
	width: 100%;
	margin-bottom: 1.618em;
}
.bellows .bellows-nav .bellows-target {
	padding: 10px 10px 10px 10px;
}
.widget_nav_menu ul li::before {
    content: '';
}
.widget_nav_menu ul li a {
    text-transform: uppercase;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: 0.16em;
	font-size: 12px;
	line-height: 18px;
}
.widget_nav_menu ul li{
	padding-left: 0;
}
.wpautoterms-footer {
	display:none;
}
ul#menu-footer-menu-legal li,
ul#menu-footer-menu-legal li a {
	text-transform: none;
	font-weight: normal;
	letter-spacing: 0.16em;
	font-size: 12px;
	line-height: 18px;
}
#menu-footer-menu-legal {
    border-top: 4px solid #151619;
    padding-top: 35px;
}
.cta-box {
	position: relative;
    background-image: 
  	    url(/wp-content/themes/cardsmiths/images/csb-memberball.svg),
  	    url(/wp-content/themes/cardsmiths/images/csb-box.svg);
    background-position: 85% top, 50% 50%;
    background-size: 20%, 95%;
    background-repeat: no-repeat, no-repeat;
	max-width: 1440px;
	margin: 0 auto;
}
.cta-box .cta-headline{
	font-size: 86px;
	width:45%;
	height: 100%;
	color: black;
	line-height:86px;
	left: 5%;
    /*padding-top: 30%;*/
    position: absolute;
	font-weight: 600;
	background-image: 
		url(/wp-content/themes/cardsmiths/images/csb-slantbox.svg),
  	    url(/wp-content/themes/cardsmiths/images/csb-slantboximg.png);
	background-repeat: no-repeat, no-repeat;
	background-size: contain, contain;
	background-position: right, right;

}
.cta-box .cta-headline span {
	color: white;
}
.cta-headline-words{
    width: 540px;
    padding-top: 30%;
    padding-left: 10%;
}
.cta-box::before {
float: left;
padding-top: 41.078306%;
content: "";
}

.cta-box::after {
display: block;
content: "";
clear: both;
}

.cta-box .cta-words {
	position: absolute;
	width: 40%;
	top: 20%;
	right: 5%;
}
.cta-box .cta-words .cta-words-title{
	font-size: 48px;
	line-height: 52px;
	font-weight: bold;
}
.cta-box .cta-words .cta-words-list ul{
	font-size: 16px;
	line-height: 22px;
	list-style: inside;
	padding: 0;
	margin: 0;
	margin-top: 15px;
	margin-bottom: 15px;
}
.cta-box .cta-words hr {
	height: 5px;
    background-color: black;
}
.cta-box .cta-words .cta-desc {
	font-size: 12px;
}
a.cta-login {
	color: #15CCAD;
}
.cta-box .cta-button {
	display: inline-block;
	background: #15CCAD;
	color: white;
	border-radius: 12px;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 14px 24px;
	width: 300px;
	text-align: center;
	margin-top: 15px;
}

.single .price .amount {
	font-weight: 700;
}
.single_add_to_cart_button {
	width: 306px;
	padding: 14px 24px;
	border-radius: 12px;
	background-color: #15CCAD !important;
	color: white !important;
    text-transform: uppercase;
	font-weight: 700;
	font-size: 12px;
	height: 46px;
	letter-spacing: 1px;
	margin-bottom: 10px !important;
}

.woocommerce-cart-form .quantity,
.single-product div.product form.cart .quantity {
    float: none;
    margin: 0;
    /*display: inline-block;*/
    display: flex;
    max-width: 250px;
    justify-content: space-between;
}
.woocommerce-cart-form button.plus,
.woocommerce-cart-form button.minus {
    float: none;
	width: 20px;
	display: inline-block;
}

.woocommerce-cart-form button.plus,
.woocommerce-cart-form button.minus,
.single button.plus,
.single button.minus {
	background-color:white;
	border: none;
	box-shadow: none;
	padding: 0;
}
.woocommerce-cart-form button.plus,
.single button.plus {
	margin: 0 5px 0 0;
}
.woocommerce-cart-form button.minus,
.single button.minus{
	margin: 0 0 0 5px;
}
.woocommerce-cart-form .quantity .qty,
.single .quantity .qty {
	box-shadow: none;
	background-color: white;
	font-weight: 700;
	/*width: inherit;*/
	padding: 0;
	padding-left: 16px !important;
}
.woocommerce-cart-form button[name="update_cart"] {
	background-color: #FFC82E;
}
.woocommerce-cart-form .single-qty-contain,
.single .single-qty-contain {
	border: 4px solid black;
	box-sizing: border-box;
	border-radius: 12px;
	display: inline-flex;
	font-size: 24px;
	line-height: 34px;
	font-weight: 700;
	margin-right: 15px;
}
.single .single-qty-buy-contain {
	width:250px;
	display:flex;
	flex-direction: column;
	align-items:center;	
}
.single .product .button {
	width: 250px;
}
.single .product .variation_ajax_add_to_cart,
.single .product .not_logged_in {
	width: revert;
	margin: 5px;
}
.single .product .not_logged_in {
	height: revert;
}
.woocommerce-cart-form .single-qty-contain {
	font-size: 18px;
}
.stock.in-stock {
	color: #15CCAD !important;
}
.product_description {
	font-style: normal;
	font-weight: bold;
	font-size: 24px;
	line-height: 34px;
	background: #FFC82E;
	border-radius: 6px;
	width: 380px;
	padding: 2px 24px;
	letter-spacing: 1px;
    text-align: center;
}

.woocommerce-info, .woocommerce-noreviews, p.no-comments {
	background-color: #FFC82E !important;
	color: black !important;
}
.product-info-box .strong {
	font-weight: bold;
}
.product-info-box {
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-template-rows: repeat(5, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	color: white;
	border: 5px solid black;
	border-radius: 12px;
	overflow:hidden;
}

.div1,.div2,.div5,.div6,.div9,.div10{ background: #000}
.div3,.div4,.div7,.div8{ background: #15ccad}
.product-info-box div {
	padding: 8px;
}

#sb_instagram {
	background: #000 !important;
}

.shop_table .cart_item {
	display: revert;
}

table:not( .has-background ) tbody tr:nth-child(2n) td, fieldset, fieldset legend {
    background-color: #efefef;
}
/*
table:not( .has-background ) tbody td {
    background-color: #15ccad;
}
*/
.page-csb-back-container {
	background-image: url(/wp-content/themes/cardsmiths/images/csb-back.png);
	background-size: contain; 
	background-position: center; 
	background-repeat: no-repeat;
	margin: 100px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 340px;
}
.words {
 	text-align:center;
	width: 600px;
	max-width: 90%;
	margin: 0 auto;

}
.words.large {
	font-weight: bold; 
	font-size: 36px;
	line-height: 40px;
}
.words.small {
	font-size: 18px; 
	line-height: 20px;
}
.words.medium {
	font-size: 24px; 
	line-height: 28px;
	text-transform: uppercase;
	letter-spacing: 2px;
}
.words.medium.nocap {
	text-transform: none;
	font-weight: bold;
}

.line {
 	height: 3px; 
	background-color:#FFC82E;
	margin: 0 auto;
}
.line.mint{
	background-color: #15ccad;
	margin: 25px 0;
}
.line.small {
	width: 200px; 
}
.line.medium {
	width: 400px; 
}
.page-full-container {
	margin-left: -300px;
	margin-right: -300px;
	padding: 100px 0;
}
.page-full-container.black{
	background-color: black;
	color: white;
}
.page-full-container .wordscontainer {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    min-height: 200px;
    margin-bottom: 50px;
}
.wordscontainer .words {
	width: 100%;
}
.page-full-container .limiter{
	width: 900px;
	max-width: 100vw;
	margin: 0 auto;
}
.bubble-container{
	display: grid;
	grid-template-columns: 240px 240px 240px;
    grid-template-rows: 150px 1fr;
    justify-content: space-between;
    grid-row-gap: 25px;
	grid-template-areas: "img1 img2 img3" "words1 words2 words3";
}
.bubble-container img {
	max-height: 100%;
	margin: 0 auto;
}
.bubble-container div {
	text-align: center;
}
.bubble-container .img1 {
	grid-area: img1;
}
.bubble-container .img2 {
	grid-area: img2;
}
.bubble-container .img3 {
	grid-area: img3;
}
.bubble-container .words1 {
	grid-area: words1;
}
.bubble-container .words2 {
	grid-area: words2;
}
.bubble-container .words2 {
	grid-area: words3;
}
.confidence-pool-tips {
    border: 4px solid black;
    padding: 15px;
    font-weight: bold;
	margin-bottom: 20px;
}
.confidence-tip-head {
	font-size: 48px;
    line-height: 50px;
    color: white;
    background: black;
    margin: -15px -15px 15px -15px;
    padding: 30px;
    display: grid;
    grid-template-columns: 1fr 75px;
	align-items: center;
}
.confidence-tip-head span { 
	color: #FFC82E;
	font-size: 96px;
}
.confidence-pool-tips li {
	margin-bottom: 15px;
}
a.button.confidence-pool-button {
    padding: 14px 24px;
    border-radius: 12px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    height: 46px;
    letter-spacing: 1px;
    width: 300px;
    background-color: #15ccad !important;
    color: white !important;
	display: block;
	margin: 0 auto;
	text-align:center;
	margin-top: 20px;
}

#cardsubmissionwrapper.working #cardsubmissionscontain,
#checklist-results-wrapper.working #checklist-results {
	opacity: .25;	
}
.lds-ring {
	display: none;
}
#cardsubmissionwrapper.working .lds-ring,
#checklist-results-wrapper.working .lds-ring {
	display: block;
	position: absolute;
	width: 160px;
	height: 160px;
	left: calc(50% - 80px);
}

.lds-ring div {
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 128px;
	height: 128px;
	margin: 16px;
	border: 16px solid #15ccad;
	border-radius: 50%;
	animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	border-color: #15ccad transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
	animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
	animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
	animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
	transform: rotate(0deg);
}
100% {
	transform: rotate(360deg);
}
}
@media (max-width: 1200px) {
	.cta-box .cta-headline{
		font-size: 48px;
		line-height: 48px;
	}
	.cta-box .cta-headline{
		background-position: unset;
	}
	.cta-box .cta-words {
		top: 5%;
	}
	.cta-box .cta-words .cta-words-title{
		font-size: 28px;
		line-height: 28px;
	}
	.cta-headline-words{
		padding-top: 30%;
		padding-left: 10%;
		width: 440px;
	}
}
@media (max-width: 990px) {
	
	.cta-box::before {
		padding-top: unset;
		content: unset;
	}

	.cta-box {
	    background-image: url(/wp-content/themes/cardsmiths/images/csb-memberball.svg);
		position: relative;
		background-position: 85% 60%;
		background-size: 20%;
		background-repeat: no-repeat;
		margin: 0 auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.cta-box .cta-headline{
		width:100%;
		font-size: 48px;
		line-height: 48px;
		position: unset;
	}
	.cta-box .cta-words {
		position: relative;
		width:100%;
		top: 0;
	}
	.cta-box .cta-headline-words {
		width: 400px;
		padding-left: 10%;
		max-width: 100%;
	}
}
@media (max-width: 890px) {
	.cta-box {
		display: block;
	}
	.cta-box .cta-headline {
		display:block;
		height: 400px;
	}
	.cta-box .cta-words{
		right: unset;
		padding: 2em;
	}
}


h1.product_cat-personal-breaks {
	font-size: 96px;
	line-height: 96px;
	margin-bottom: 0;
	font-weight: 700;
}

@media (max-width: 768px) {
	.bubble-container {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	    grid-template-areas: "img1" "words1" "img2" "words2" "img3" "words3";
	}
	.pb-sort-links{
		width:100%;
	}
	.pb-cat-contain {
		display: block;
	}
	h1.product_cat-personal-breaks {
		font-size: 72px;
		line-height: 72px;
	}

	.woocommerce-cart-form .cart_item {
		display:block;
	}
	.thumbnail img {
		width: 100%;
	}
	.product-details-reserved {
		display: none;
	}
	#colophon {
		background: none;
		background-image: none;
		min-height: 0;
		margin-bottom: 70px;
	}
	#footer-left {
		display: none;
	}
	#footer-right {
		width: 100%;
		margin: 0;
		float: none;
		background: #000;
		padding: 15px;
	}
	.mobile-app {
		color: #FFC82E;
	}
	.mobile-link-images {
		align-content: inherit;
		gap: inherit;
		justify-content: space-around;
	}
	.rsp-countdown-wrapper {
		bottom: 0px;
	}
	.upcoming-order {
		font-size: 18px;
		line-height: 24px;
	}
	.home-break-date {
		font-size: 24px;
		line-height: 32px;
	}
	.site-header {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.upcoming-container {
	    display: grid;
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 1fr;
		gap: 15px;
	}
	.upcoming-entry {
		float: none;
	}
	.livestream-day {
		float: none;
	}
	.livevideo {
	    float: none;
		position: relative;
		
		width: 100%;
		min-height: 625px;
		padding-bottom: 0;
		padding-top: 0;
		height: auto;
	}
	.livestream-slots-contain {
		display: block;
	}
	.slots-entry {
		width: 100%;
		display: block;
	}
	.slots-entry .slots-feat {
		width: 100%;
		height: 200px;
	}
	.slots-entry .slots-feat img {
		width: 100%;
		height: auto;
	}
	#break-name {
		font-size: 18px;
		line-height: 22px;
	}
	.csbfbouter {
		grid-template-columns: 1fr 1fr;
	    grid-row-gap: 15px;
	}
	.community-flex .title {
		font-size: 28px;
		line-height: 32px;
	}
	.home .upcoming-entry {
		margin: 0;
		padding: 0;
	}
	.col-full {
		margin: 0;
	}
	.home .slots-feat {
		height: inherit;
		width: inherit;
	}
	.home .slots-feat img {
		width: 100%;
	}
	.home .livestream-day {
		width: 100%;
		padding-left: 0;
		padding: 5px;
		border-left: none;
	}
	.site-main {
	    padding: 0 10px;
	}

	.entry-title:not(.product_title) {
		font-size: 48px;
		line-height: 48px;
		font-weight: 600;
		text-align: left;
	}

	.auction-mini {
		display: none;
	}
	.auction-home-contain {
		display: revert;
	}
}

ul.products {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
ul.products li {
	float:none !important;
	margin-right: inherit !important;
	margin-left: inherit !important;
}
ul.products::before, ul.products::after {
    content: "";
    display: none;
}

    body.dark-mode {
        background-color: black;
        color: #999;
    }
	.dark-mode .csbauctionpage, .dark-mode .csbhomecontain {
    	background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)), url(/wp-content/themes/cardsmiths/images/csb-back-trans-gray.png);
	}
	.dark-mode .csbhomeupcoming {
    	background: black;
	}
	.dark-mode .site-header {
    	background-color: black;
		border-bottom-color: #999;
	}
	.dark-mode .home-break-date {
		color: #999;
	}
	.dark-mode .main-navigation ul li a, 
	.dark-mode .site-title a, 
	.dark-mode ul.menu li a, 
	.dark-mode .site-branding h1 a, 
	.dark-mode button.menu-toggle, 
	.dark-mode button.menu-toggle:hover, 
	.dark-mode .handheld-navigation .dropdown-toggle {
    	color: #999;
	}
	.dark-mode li.product {
		background-color: black;
	}
	.dark-mode .homepage-section-header span {
		color: #999;
	}
	.dark-mode .woocommerce-loop-product__title {
		color: #999 !important;
	}
	.dark-mode ul.products li.product .price {
		color: #999;
	}
	.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6, .dark-mode .wc-block-grid__product-title {
    	color: #999;
	}
	.dark-mode .product_description {
		color: #000;
	}
	.dark-mode #colophon {
		background-color: #000;
	}
	#darkmodeswitch{position:absolute;top:85px;right:0;width:25px;height:25px;background-color:#FFC82E;}
	#darkmodeswitch:hover{cursor:pointer;}
    .dark-mode .product-details-top .product-name a{
        color: #999;
    }
	.dark-mode table:not( .has-background ) th, .dark-mode table:not( .has-background ) tbody td  {
    	background-color: #111;
	}
	.dark-mode table:not( .has-background ) tbody tr:nth-child(2n) td, .dark-mode fieldset, .dark-mode fieldset .dark-mode legend {
    	background-color: #000;
	}
	.dark-mode .filterbutt img {background-color: #999;}
	.dark-mode #checklist-central-search {background: #999;}
	.dark-mode .ui-widget-content {background: #000;color:#999;}
	.dark-mode input, .dark-mode select, .dark-mode .cardprodinput.sel, .dark-mode textarea { background: #999;}
 	.dark-mode .sgc-type {color:#999;}
	.dark-mode .cardsubmission {background:#111;color:#999;}
	.dark-mode #order_review {background: #000;color:#999;}
	.dark-mode #payment .payment_methods > li:not(.woocommerce-notice) {background-color: #000;color:#999;}
	.dark-mode #payment .payment_methods > li .payment_box, .dark-mode #payment .place-order {background-color:#000;color:#999;}
	.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {background-color:#999;}
	.dark-mode .pick.row:nth-of-type(even) .item {background-color: #163a45 !important;}
    .dark-mode li {color: #999;}
	.ebay-ad-contain.boxes {display:flex;flex-wrap:wrap;flex-direction:row;gap:10px;justify-content:space-around;}
	.ebay-ad-contain.singles {display:flex;flex-wrap:wrap;flex-direction:row;gap:10px;justify-content:space-between;}
	.ebay-item-contain{width:45%;max-width:160px;border-top-left-radius: 8px;border-top-right-radius:8px; overflow: hidden;position:relative;/*border: 1px solid #15CCAD;*/}
	.ebay-item-contain .ebay-item-image {/*width: 100%;height: 100%;*/overflow: hidden;aspect-ratio: 1 / 1;}
	.ebay-item-contain .ebay-item-image img {object-fit: cover;object-position: center;width: 100%;height: 100%;}
	.ebay-item-contain .ebay-item-title.singles {display:block;margin-bottom:5px;}
	.ebay-item-contain .ebay-item-title {padding:0 5px;line-height:1em;height: 3.1em; overflow: hidden;display:none;}
	.ebay-item-contain .ebay-item-title a {}
	.ebay-item-contain .ebay-item-price {padding:0 5px; display:flex;justify-content:space-between;align-items: center;}
	.ebay-item-contain .ebay-item-price a {}
	.ebay-item-contain .ebay-item-price .view {margin-left:auto;}
	.ebay-item-contain .ebay-item-price a.chevron {margin-left:5px;color:#15CCAD !important;font-size: 16px;}
	.ebay-item-contain a:hover{text-decoration:underline !important;color:#15CCAD !important;}
	.ebay-item-contain a {color: black; text-decoration:none !important; font-size:14px;}
	.ebay-ad-disclosure {font-size: 14px;font-style: italic;}
	.ebay-ad-title {font-weight:bold;color:black;}
	.dark-mode .ebay-ad-title {color:white;}
	.ebay-ad-block{width:100%;}
	.dark-mode .ebay-item-contain a {color: white;}
	/* HTML: <div class="ribbon">Your text content</div> */
	.ribbon {
		font-size: 28px;
		font-weight: bold;
		color: #fff;
	}
	.ribbon {
		--f: 2em; /* control the folded part */
		position: absolute;
		top: 0;
		right: 0;
		line-height: 2.6;
		padding-inline: 1lh;
		padding-bottom: var(--f);
		border-image: conic-gradient(#0008 0 0) 51%/var(--f);
		clip-path: polygon(
			100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
		transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
		transform-origin: 0% 100%;
		background-color: #fff; /* the main color  */
	}

	@media (max-width: 435px) {
		.ribbon {
			--f: 1.4em; /* control the folded part */
			line-height: 2;
		}
		.ebay-item-contain.boxes{
			width:30%;
		}
	}
	@media (max-width: 400px) {
		.ribbon {
			--f: 1.4em; /* control the folded part */
			line-height: 2;
		}
	}


	
	
	
	
	
	
	
	
	
	
	
/* =========================================================================
 * BOX CONTENTS INFOGRAPHIC — component stylesheet
 * Extracted from hobby_redesign_mockup_v6.html (values verbatim), plus the
 * .status line from pre_odds_tier_mockup.html for the pre-odds/degraded
 * render of the same block.
 *
 * Scoping: every rule is scoped under .ig so the generic class names
 * (.chip, .tag, .item, .status …) cannot collide with existing site CSS.
 * The generated markup nests everything inside <div class="ig">, so no
 * markup changes are needed.
 *
 * Theming: CSS custom properties are defined on .ig (light values) and
 * overridden by body.dark-mode .ig — body.dark-mode is the one and only
 * dark switch. Nothing is written to :root, so site-wide variables are
 * untouched.
 *
 * Font: intentionally not set here; the block inherits the site's body
 * font ('Source Sans Pro', Helvetica stack in the mockups).
 * ========================================================================= */

/* ---- theme variables + frame ------------------------------------------ */
.ig{
  --teal:#15ccad;
  --ink:#111;
  --paper:#fff;
  --alt:#f0f0f0;
  --line:#ddd;
  --muted:#666;
  color:var(--ink);                 /* self-contained text color (addition) */
  border:2px solid var(--teal);
  border-radius:18px;
  padding:20px;
  margin-bottom:18px;
}
body.dark-mode .ig{
  --ink:#eee;
  --paper:#181818;
  --alt:#2a2a2a;
  --line:#444;
  --muted:#aaa;
}
.ig *{box-sizing:border-box}

/* ---- section labels ---------------------------------------------------- */
.ig .sec-label{
  font-size:14px;font-weight:bold;text-transform:uppercase;
  letter-spacing:1px;color:var(--muted);margin:0 0 10px;
}

/* ---- config chips ------------------------------------------------------ */
.ig .chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.ig .chip{
  flex:1 1 130px;min-width:120px;border:2px solid var(--line);
  border-radius:12px;padding:10px 8px;text-align:center;
}
.ig .chip b{display:block;font-size:26px;line-height:1;color:var(--teal)}
.ig .chip small{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.ig .chip.hit{border-color:var(--teal);background:var(--teal)}
.ig .chip.hit b{color:#fff}
.ig .chip.hit small{color:rgba(255,255,255,.85)}

/* ---- two-column layout -------------------------------------------------- */
.ig .two-col{display:grid;grid-template-columns:1.15fr 1fr;gap:28px}
@media(max-width:760px){
  .ig .two-col{grid-template-columns:1fr}
}

/* ---- "Expect it when" timeline ------------------------------------------ */
.ig .timeline{position:relative;padding-left:22px}
.ig .timeline::before{
  content:"";position:absolute;left:6px;top:8px;bottom:8px;
  width:3px;background:var(--teal);border-radius:2px;opacity:.5;
}
.ig .tier{position:relative;margin-bottom:16px}
.ig .tier::before{
  content:"";position:absolute;left:-21px;top:4px;
  width:13px;height:13px;border-radius:50%;background:var(--teal);
}
.ig .tier h4{
  margin:0 0 5px;font-size:14px;text-transform:uppercase;
  letter-spacing:1px;color:var(--teal);
}
.ig .tier .items{display:flex;flex-wrap:wrap;gap:6px}
.ig .item{background:var(--alt);border-radius:14px;padding:3px 10px;font-size:12.5px}
.ig .item.auto{background:var(--teal);color:#fff}
.ig .tier.faint::before{opacity:.45;width:9px;height:9px;left:-19px}

/* ---- auto decode bar ----------------------------------------------------- */
.ig .autobar{display:flex;height:38px;border-radius:9px;overflow:hidden;margin-bottom:10px}
.ig .autobar div{
  color:#fff;font-size:12px;font-weight:bold;display:flex;
  align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;
}
.ig .autolines{font-size:13.5px;line-height:1.75;margin-bottom:20px}
.ig .autolines i{
  display:inline-block;width:11px;height:11px;border-radius:3px;
  margin-right:6px;vertical-align:-1px;
}

/* ---- per-case minis ------------------------------------------------------- */
.ig .mini-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.ig .mini{border:2px solid var(--line);border-radius:10px;padding:8px 12px;text-align:center;flex:1}
.ig .mini b{display:block;font-size:22px;color:var(--teal)}
.ig .mini small{font-size:11px;color:var(--muted);text-transform:uppercase}

/* ---- exclusives tagrows ---------------------------------------------------- */
.ig .tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.ig .tag{
  border:1.5px solid var(--teal);color:var(--teal);
  border-radius:20px;padding:4px 12px;font-size:13px;font-weight:bold;
}
.ig .tag.mute{border-color:var(--line);color:var(--muted);font-weight:normal}

/* ---- footnote --------------------------------------------------------------- */
.ig .ig-foot{
  font-size:11.5px;color:var(--muted);margin-top:16px;
  border-top:1px solid var(--line);padding-top:10px;
}

/* ---- pre-odds / degraded status line (from pre_odds_tier_mockup.html) ------- */
.ig .status{
  background:var(--alt);border-radius:10px;padding:12px 16px;
  font-size:14px;color:var(--muted);
}

/* =========================================================================
 * PAGEHEAD — entry-header replacement (see cardsmiths_pagehead.php)
 * Values verbatim from hobby_redesign_mockup_v6.html. Colors are literal
 * here (with body.dark-mode overrides) because the theme variables above
 * are scoped to .ig and .pagehead sits outside it.
 * ========================================================================= */
.pagehead{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}
.pagehead img{width:300px;height:auto;border-radius:12px}
.pagehead .entry-title{font-size:44px;line-height:1.05;margin:0 0 4px}
.pagehead .release{color:#666;font-size:15px}
 .hentry .pagehead .wp-post-image {margin-bottom:0;}
body.dark-mode .pagehead .release{color:#aaa}
@media(max-width:600px){
  .pagehead img{width:110px}
  .pagehead .entry-title{font-size:32px}
}

/* =========================================================================
 * PARENT PAGE — "Pick your box" comparison table (.cmp-block)
 * Extracted from parent_redesign_mockup_v1.html (values verbatim), scoped
 * under .cmp-block with its own theme variables + body.dark-mode override,
 * same pattern as .ig above. The sticky first column uses --paper so it
 * stays opaque over horizontal scroll in both modes.
 * ========================================================================= */
.cmp-block{
  --teal:#15ccad;
  --ink:#111;
  --paper:#fff;
  --alt:#f0f0f0;
  --line:#ddd;
  --muted:#666;
  color:var(--ink);                 /* self-contained text color (addition) */
  border:2px solid var(--teal);
  border-radius:18px;
  padding:20px;
  margin-bottom:18px;
  overflow-x:auto;
}
body.dark-mode .cmp-block{
  --ink:#eee;
  --paper:#181818;
  --alt:#2a2a2a;
  --line:#444;
  --muted:#aaa;
}
.cmp-block *{box-sizing:border-box}
.cmp-block h2{font-size:22px;margin:0 0 14px;letter-spacing:-.5px}
.cmp-block h2 span{color:var(--teal)}
.cmp-block table.cmp{border-collapse:collapse;width:100%;min-width:880px;font-size:13.5px;table-layout:fixed}
/* FIX-D3: value cells nowrap so "~1.5 per case" never breaks mid-figure;
   the label column is widened below so long labels such as "Non-numbered
   parallels / box" no longer run under the values. */
.cmp-block .cmp th,.cmp-block .cmp td{padding:8px 10px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
.cmp-block .cmp th:first-child,.cmp-block .cmp td:first-child{text-align:left;font-weight:bold;width:260px;min-width:260px;white-space:normal;position:sticky;left:0;background:var(--paper)}
.cmp-block .cmp thead th{font-size:14px;border-bottom:2px solid var(--teal)}
.cmp-block .cmp thead th b{display:block;font-size:15px}
.cmp-block .cmp .gtd{color:#fff;background:var(--teal);border-radius:6px;font-weight:bold;padding:2px 6px;display:inline-block}
.cmp-block .cmp .sig{font-weight:bold;color:var(--teal)}
.cmp-block .cmp .go a{display:inline-block;background:var(--teal);color:#fff;font-weight:bold;text-decoration:none;border-radius:8px;padding:5px 10px;font-size:12.5px}
.cmp-block .cmp tbody tr:nth-child(2n) td{background:var(--alt)}
.cmp-block .cmp tbody tr:nth-child(2n) td:first-child{background:var(--alt)}
.cmp-block .note{font-size:11.5px;color:var(--muted);margin-top:10px}
.cmp-block td small{display:block;color:#8a939b;text-transform:uppercase;font-size:10px;letter-spacing:.8px;margin-top:4px}
.cmp-block td small:first-child{margin-top:0}


/* ---- composite component colors (c2 lavender, c3 amber, c4 sky) ---- */
.ig{--c2:#b39ddb;--c3:#FFC82E;--c4:#6FB1FF}
.ig .sec-label.c2{color:var(--c2)}.ig .sec-label.c3{color:var(--c3)}.ig .sec-label.c4{color:var(--c4)}
.ig .chip.c2{border-color:var(--c2)}.ig .chip.c2 b{color:var(--c2)}
.ig .chip.c3{border-color:var(--c3)}.ig .chip.c3 b{color:var(--c3)}
.ig .chip.c4{border-color:var(--c4)}.ig .chip.c4 b{color:var(--c4)}
.ig .timeline.c2{border-left-color:rgba(179,157,219,.5)}
.ig .timeline.c3{border-left-color:rgba(255,200,46,.5)}
.ig .timeline.c4{border-left-color:rgba(111,177,255,.5)}
.ig .timeline.c2 .tier h4{color:var(--c2)}.ig .timeline.c2 .tier::before{background:var(--c2)}
.ig .timeline.c3 .tier h4{color:var(--c3)}.ig .timeline.c3 .tier::before{background:var(--c3)}
.ig .timeline.c4 .tier h4{color:var(--c4)}.ig .timeline.c4 .tier::before{background:var(--c4)}
.ig .timeline.c2 .item.auto{background:var(--c2);color:#1d1330}.ig .timeline.c2 .item.auto b{color:#1d1330}
.ig .timeline.c3 .item.auto{background:var(--c3);color:#231a00}.ig .timeline.c3 .item.auto b{color:#231a00}
.ig .timeline.c4 .item.auto{background:var(--c4);color:#04213a}.ig .timeline.c4 .item.auto b{color:#04213a}
.ig .timeline .tier.faint h4{color:var(--muted)}.ig .timeline .tier.faint::before{background:var(--muted)}
.ig .mini-stats.c2 .mini{border-color:var(--c2)}.ig .mini-stats.c2 .mini b{color:var(--c2)}
.ig .mini-stats.c3 .mini{border-color:var(--c3)}.ig .mini-stats.c3 .mini b{color:var(--c3)}
.ig .mini-stats.c4 .mini{border-color:var(--c4)}.ig .mini-stats.c4 .mini b{color:var(--c4)}
/* ---- numbered ladder table ---- */
.ig .ladder{width:100%;border-collapse:collapse;margin-bottom:22px;font-size:13.5px}
.ig .ladder th{text-align:left;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px;font-size:10.5px;padding:4px 8px;border-bottom:1px solid var(--line)}
.ig .ladder td{padding:6px 8px;border-bottom:1px solid var(--line)}
.ig .ladder td:last-child{white-space:nowrap}
.ig .ladder td b{color:var(--teal)}
.ig .ladder.c2 td b{color:var(--c2)}
.ig .ladder.c3 td b{color:var(--c3)}
.ig .ladder.c4 td b{color:var(--c4)}

#checklist-major{--teal:#15ccad;--ink:#111;--line:#ddd}
body.dark-mode #checklist-major{--ink:#eee;--line:#444}
 
#checklist-major .nav{border:1px solid var(--teal);border-radius:16px;padding:12px;display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
#checklist-major .nav a{border:1px solid var(--line);border-radius:12px;padding:12px 16px;color:var(--ink);text-decoration:none;font-size:15px;text-align:center;min-width:96px}
#checklist-major .nav a.on{background:var(--teal);color:#fff;border-color:var(--teal);font-weight:600}
/* Dark mode = the mockup's own palette: active pill text is the mockup's
 * literal dark ink (#06231d on teal), matching Multimaster/Master_Jumbo
 * exactly. Light mode keeps house white-on-teal (.chip.hit pattern). The
 * teal itself stays the site's #15ccad in both modes, as .ig does. */
body.dark-mode #checklist-major .nav a.on{color:#06231d}




/* =========================================================================
 * NUMBERED LADDER WIDGET (.lpw) — from Master_Jumbo_Mockup.html, converted
 * to the house light/dark pattern (mockup is dark-theme; geometry values
 * verbatim, palette mapped to the site's light set, body.dark-mode
 * restores the mockup look). Scoped: every rule under .lpw; variables on
 * .lpw only — :root untouched. Rules for the mockup's format buttons and
 * the "What did you pull" search are deliberately absent (later steps).
 * Append to infographic.css or enqueue standalone; CSS-only, cache-bust.
 * ========================================================================= */
.lpw{
  --teal:#15ccad; --ink:#111; --paper:#fff; --alt:#f0f0f0;
  --line:#ddd; --mut:#666; --hl:#fdf3cf;
  color:var(--ink);
}
body.dark-mode .lpw{
  --ink:#eee; --paper:#181818; --alt:#2a2a2a; --line:#444; --mut:#aaa; --hl:#3a3320;
}
.lpw *{box-sizing:border-box}
.lpw{min-width:0;max-width:100%}
.lpw .wrap{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:18px;min-width:0}

.lpw h2{margin:8px 0 12px;font-size:16px;text-transform:uppercase;letter-spacing:1.6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--ink)}
.lpw select{background:var(--alt);color:var(--teal);border:1px solid var(--teal);border-radius:10px;padding:6px 10px;font-size:15px;font-weight:700;letter-spacing:.5px;max-width:100%}

.lpw .chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.lpw .chips span{font-size:12px;color:var(--mut);padding:4px 10px;border:1px solid var(--line);border-radius:14px;cursor:pointer}
.lpw .chips span:hover{color:var(--ink);border-color:var(--mut)}
.lpw .chips .ladw-lbl{border:none;cursor:default}

.lpw .ladw-scroll{overflow-x:auto;width:0;min-width:100%}
.lpw table{width:100%;border-collapse:collapse}
.lpw th{text-align:left;color:var(--mut);text-transform:uppercase;letter-spacing:1.2px;font-size:10.5px;padding:4px 8px;border-bottom:1px solid var(--line)}
.lpw td{padding:9px 8px;border-bottom:1px solid var(--line);cursor:pointer}
.lpw tr:hover td{background:var(--alt)}
.lpw tr.hl td{background:var(--hl)}
.lpw td.run{color:var(--teal);font-weight:700;white-space:nowrap}
.lpw .na{color:var(--mut)}

.lpw .foot{color:var(--mut);font-size:12.5px;margin-top:12px}

.lpw .card{margin-top:16px;border:1px solid var(--teal);border-radius:14px;padding:16px 18px;display:none}
.lpw .card.on{display:block}
.lpw .card h3{margin:0 0 6px;font-size:18px}
.lpw .card p{margin:4px 0;color:var(--ink)}
.lpw .card .x{color:var(--mut);font-size:13px}

/* union-mode format buttons (multimaster picker) */
.lpw .fmt{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.lpw .fmt button{background:var(--alt);color:var(--ink);border:1px solid var(--line);border-radius:20px;padding:6px 12px;cursor:pointer;font-size:13px}
.lpw .fmt button.on{background:var(--teal);color:#fff;border-color:var(--teal);font-weight:700}
body.dark-mode .lpw .fmt button.on{color:#06231d}

/* All-formats matrix cells: shared centering so ticks/dashes/rates align */
.lpw td.mx{text-align:center}
.lpw td.ok{color:var(--teal);font-weight:700}
.lpw td.rate{white-space:nowrap;font-size:13px}
















/* =========================================================================
 * CHECKLIST PANEL (.panel/.ckl) — from Master_Jumbo_Mockup.html, converted
 * to the house light/dark pattern (geometry verbatim; mockup's dark
 * palette restored under body.dark-mode). Scoped under .ckl-panel — the
 * wrapper csb_checklist_panel() emits — so generic names (.panel, .teams,
 * .tabs …) can't collide with theme CSS. Team chips use teamlu logo
 * images (the mockup's color dots were placeholders); the empty-logo
 * fallback keeps the dot. Append to infographic.css or enqueue;
 * CSS-only, cache-bust.
 * ========================================================================= */
.ckl-panel{
  --teal:#15ccad; --ink:#111; --paper:#fff; --alt:#f0f0f0;
  --line:#ddd; --mut:#666; --shade:#f7f7f7; --tint:#e6faf5;
  color:var(--ink);
  border:1px solid var(--teal);border-radius:16px;padding:20px 22px;margin-bottom:22px;
  width:100%;max-width:none;
  /* The theme column is shrink-to-fit: it sizes from content, so the
   * table's intrinsic width inflated it (and contain:inline-size, which
   * zeroes the contribution, collapsed it). Fix = remove the min-content
   * floor: fixed table layout + the width:0/min-width:100% idiom on the
   * scrollers, which contributes ~nothing during intrinsic sizing but
   * resolves to the full panel width afterward. */
  min-width:0;
}
.ckl{min-width:0;max-width:100%}
body.dark-mode .ckl-panel{
  /* color-hierarchy spec surfaces: lifted blue-greys, not pure black */
  --ink:#eef2f3; --paper:#111418; --alt:#1f242a; --line:#272d34; --mut:#98a4ab;
  --shade:#181c21; --tint:#0e2a22;
}
.ckl-panel *{box-sizing:border-box}
.ckl-panel h2.t{margin:0 0 14px;font-size:22px;font-weight:600}
.ckl-panel h2.t em{color:var(--teal);font-style:normal}
.ckl-panel .ckl-note{color:var(--mut);font-size:13px;margin:0 0 12px}
.ckl-panel .mut{color:var(--mut)}

.ckl .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.ckl .find{position:relative;flex:1;min-width:min(280px,100%)}   /* 280 overflowed the panel on 360px phones */
.ckl .find input{width:100%;background:var(--paper);border:1.5px solid var(--teal);outline:none;color:var(--ink);border-radius:22px;padding:11px 96px 11px 40px;font-size:16px}
.ckl .find input:focus{border-color:var(--teal);box-shadow:none}
.ckl .find::before{content:"⌕";position:absolute;left:14px;top:9px;color:var(--teal);font-size:18px}
.ckl .tabs{display:flex;gap:6px;flex-wrap:wrap}
.ckl .tabs button{background:var(--alt);color:var(--ink);border:1px solid var(--line);border-radius:20px;padding:7px 13px;cursor:pointer;font-size:13.5px}
.ckl .tabs button.on{background:var(--teal);color:#fff;border-color:var(--teal);font-weight:700}
body.dark-mode .ckl .tabs button.on{color:#06231d}
.ckl .tabs button small{opacity:.7;margin-left:4px}
.ckl .ck_lbl{font-size:13.5px;color:var(--mut)}
.ckl select{background:var(--alt);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:14px;max-width:340px}

.ckl .teams{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.ckl .team{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:16px;padding:5px 10px 5px 6px;font-size:13px;cursor:pointer;background:var(--shade);flex:0 0 auto;white-space:nowrap}
.ckl .team img{width:18px;height:18px;object-fit:contain;display:inline-block}
.ckl .team i{width:14px;height:14px;border-radius:50%;display:inline-block;background:var(--line)}
.ckl .team.on{border-color:var(--teal);background:var(--tint)}
.ckl .team small{color:var(--mut)}

.ckl .sum{border:1px solid var(--teal);border-radius:14px;padding:16px 18px;margin:6px 0 16px;display:none}
.ckl .sum.on{display:block}
.ckl .sum h3{margin:0 0 6px;font-size:22px}
.ckl .sum .sub{font-size:15px;font-weight:400}
.ckl .sum .counts{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 4px}
.ckl .sum .counts span{background:var(--alt);border-radius:14px;padding:5px 12px;font-size:13.5px}
.ckl .sum .counts b{color:var(--teal)}
.ckl .ck_playhdr{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;margin-top:8px}
.ckl .ck_ladhint{font-size:13px;margin-top:6px}
.ckl .players{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ckl .players span{border:1px solid var(--line);border-radius:14px;padding:4px 10px;font-size:13px;cursor:pointer}
.ckl .players span:hover{border-color:var(--teal)}
.ckl .players small{color:var(--mut);margin-left:4px}

.ckl table{width:100%;border-collapse:collapse}
.ckl th{text-align:left;color:var(--mut);text-transform:uppercase;letter-spacing:1.2px;font-size:10.5px;padding:6px 8px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none}
.ckl th.s{color:var(--teal)}
.ckl td{padding:7px 8px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
.ckl td.n{color:var(--teal);font-weight:700;white-space:nowrap}
.ckl .rc{background:var(--teal);color:#fff;border-radius:8px;padding:1px 6px;font-size:11px;font-weight:700;margin-left:6px}
body.dark-mode .ckl .rc{color:#06231d}
.ckl .pl{cursor:pointer;border-bottom:1px dotted var(--mut)}
.ckl .pl:hover{color:var(--teal)}
.ckl tr.gh td{background:var(--tint);color:var(--teal);font-weight:700;text-transform:uppercase;letter-spacing:1.6px;font-size:13px;padding:12px 8px 6px;border-bottom:1px solid var(--teal)}
.ckl tr.sh td{background:var(--shade);font-weight:600;padding:8px}
.ckl tr.sh small{color:var(--mut);font-weight:400;margin-left:6px}
.ckl tr.sh .lk{float:right;color:var(--teal);font-weight:400;font-size:12.5px;cursor:pointer}
.ckl tr.lad td{background:var(--shade);padding:8px 8px 10px 24px}
/* rung visuals scoped to BOTH ladder containers (table rows + set-focus
 * summary). Color-hierarchy spec: every chip is a GREY pill carrying one
 * 6px dot in the parallel's color (.pd, colored inline by csbDot at
 * render); print run stays teal; Base gets no special tint — the dot
 * system carries all differentiation. */
.ckl .lad .rung,.ckl .setlad .rung,.pv .chips .rung{cursor:pointer;display:inline-flex;align-items:center;gap:6px;background:var(--alt);border:1px solid var(--line);border-radius:99px;padding:3px 10px 3px 8px;margin:3px 4px 3px 0;font-size:12.5px;color:var(--ink)}
.ckl .lad .rung b,.ckl .setlad .rung b,.pv .chips .rung b{color:var(--teal);margin-left:0;font-weight:700}
.ckl .rung .pd{width:6px;height:6px;border-radius:50%;flex:0 0 6px;display:inline-block}
/* Superfractor: the one special chip — champagne coin dot + gold-etched
 * chip; at most one per ladder so it never Skittles */
.ckl .rung.sfr{border-color:#b8902e;background:linear-gradient(90deg,#2a2210,#1f1a10);color:#f3e2a8}
.ckl .rung.sfr b{color:#f7d878}
.ckl .rung.sfr::before{content:"";width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:radial-gradient(circle at 40% 35%,#fff3c4 0%,#f1d27a 30%,#c99a2e 55%,#f1d27a 70%,#8a6414 100%);box-shadow:0 0 0 1px #6b4f12}
/* light mode keeps the same dots on lighter pills */
body:not(.dark-mode) .ckl .lad .rung,body:not(.dark-mode) .ckl .setlad .rung,body:not(.dark-mode) .pv .chips .rung{background:#f0f2f4;border-color:#d9dee3}
/* suggestion rows: dot inline before the parallel name */
.ckl .cksugg .pd{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:7px;vertical-align:1px}
.ckl .more{color:var(--mut);text-align:center;padding:10px;cursor:pointer}
.ckl .tog{color:var(--teal);cursor:pointer;font-size:12.5px;white-space:nowrap}
/* legacy 640px nth-child(4) hide removed: in the per-view tables that
   position is the eBay/act column */

/* per-view group headers: player/team views group by that entity; team
 * headers carry the teamlu logo */

/* ==== v2 additions (Sam brief): filter chips, parallel suggestions,
 * rung popover, set-view ladder block ==== */
.ckl .rung{cursor:pointer}
.ckl .rung:hover{outline:1px solid var(--teal)}
.ckl .setlad{margin:10px 0 4px}
.ckl .find{position:relative}
.ckl .cksugg{position:absolute;top:48px;left:0;right:0;background:var(--paper);border:1px solid var(--line);border-radius:12px;z-index:40;max-height:340px;overflow:auto;display:none;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.ckl .cksugg>div,.ckl .cksugg>a{display:block;padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink);text-decoration:none}
.ckl .cksugg>div:hover,.ckl .cksugg>a:hover{background:var(--alt)}
.ckl .cksugg small{color:var(--mut);display:block;margin-top:2px}
.ckl .cksugg .odds{color:var(--teal);font-size:12.5px;margin-top:2px}
#ck_pop{position:absolute;z-index:50;background:var(--paper,#fff);border:1px solid #15ccad;border-radius:10px;padding:10px 14px;font-size:13.5px;color:#111;max-width:min(320px,calc(100vw - 24px));display:none;box-shadow:0 6px 24px rgba(0,0,0,.35)}
#ck_pop small{color:#666;display:block;margin-top:4px}
body.dark-mode #ck_pop{background:#151719;color:#e8eaec}
body.dark-mode #ck_pop small{color:#9aa1a8}
/* Tier-LINK line in the odds popover (spec v2 placement 5): divider +
 * teal link, matching odds-tooltip-mockup.html .tip .l4. Link needs its
 * own tap; the chip itself never links off-site. */
#ck_pop .lk{margin-top:8px;padding-top:8px;border-top:1px solid #ddd;font-size:12.5px}
#ck_pop .lk a{color:#15ccad;font-weight:700;text-decoration:underline;text-underline-offset:3px}
#ck_pop .lk small{display:inline;margin-top:0}
body.dark-mode #ck_pop .lk{border-top-color:#2a2f33}
/* zone-3 Tier-LINK companion ("Live examples & current prices"): a slim
 * filter-following bar between the focus card and the table, hidden until
 * a filter is active. The API phase upgrades hot states to inline cards
 * in this same slot. */
.ckl .cpane{display:none}
.ckl .cpane.on{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1px solid var(--teal);background:var(--tint);border-radius:12px;padding:9px 14px;margin:0 0 12px}
.ckl .cpane .cpl{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:1.2px;white-space:nowrap}
.ckl .cpane a{color:var(--teal);font-weight:700;font-size:13.5px;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere;min-width:0}

/* zone-4 Tier-LINK row button (checklist-ad-placement-mockup .pricebtn,
 * on house vars): floats right of the player cell; the label inside <i>
 * collapses ≤640px so mobile shows just "$". Floated markup precedes the
 * player name in the cell so it never wraps below it. */
/* The row's eBay button is eBay BLUE (redesign/README.md: #7fb2ff on eBay
   modules, eBay buttons and eBay links, nowhere else). It was gold from v8
   — the mockup's .ex recipe at the time — which put the money color on a
   link that goes off-site, next to a break module that is also gold. Gold
   is the break module's alone now; this is an ad and reads like one. */
.ckl .ebx{float:right;border:1px solid #7fb2ff;border-radius:8px;background:none;color:#7fb2ff;font-size:11.5px;padding:2px 8px;margin:0 0 2px 6px;text-decoration:none;white-space:nowrap;line-height:1.5}
.ckl .ebx:hover{border-color:#a9cbff;color:#a9cbff;background:rgba(127,178,255,.12)}
/* (0,3,0) to beat Storefront's .hentry .entry-content a, which draws an
   underline through the middle of the pill. (0,2,1) only TIES it, and the
   inlined critical block sits above Storefront's stylesheet in the
   cascade, so a tie loses — same reason the sealed tiles at .csb-sealed
   .csb-sd-cards .csb-sd-card reach for a third class. */
.ckl-panel .ckl .ebx{text-decoration:none}
.ckl .ebx i{font-style:normal}
@media(max-width:640px){.ckl .ebx i{display:none}.ckl .ebx{padding:2px 7px}}

/* ==== small screens: nothing overflows the panel; chip rows become
 * horizontal scroll strips; controls stack; table scrolls in .ckl-scroll
 * (Sam brief: every view legible at 380px, search stays reachable) ==== */
.ckl .ckl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;width:0;min-width:100%}
.ckl .ckl-scroll table{width:100%;table-layout:fixed}
/* legacy th percentage widths removed: each table carries its own colgroup */
.ckl td{overflow-wrap:break-word;word-wrap:break-word}
/* group/ladder rows span all columns; fixed layout keeps them in bounds */
.ckl tr.gh td,.ckl tr.sh td,.ckl tr.lad td{overflow-wrap:anywhere}
/* legacy mobile flex-table block removed (csb-mobile-flex-table era):
   it re-flexed the new tables rows and hid nth-child(3)/(4) - the act
   column. Mobile now works via col-class hiding + zeroed col tracks. */


/* band slot: the relocated find box fills the row (the mode toggle that
 * used to sit beside it is retired — v4 step 2) */
/* min-height = the height of the search field that lands in here. The slot
   is empty in the HTML: the panel script clones the checklist's own find box
   into it (ck_q2) once it runs, and until LIGHTER-HTML that script was
   inline, so the clone arrived before first paint and nobody noticed the
   slot had no size. Now the script is an external file that waits for its
   data, so an unreserved slot grows 50px after paint and shoves the whole
   page down — a measured 0.0104 CLS at 1366x850, from zero. Reserve it.
   58px is the field: B3 made it a fixed height (see the B3 block at the end
   of this file), so the reservation is simply that number and the 52px it
   drops to on phones — it was 50px while the field was 16px text + 11px
   padding + 1.5px border, twice. Change one and change the other. */
.csb-sb-slot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:58px}
@media(max-width:600px){.csb-sb-slot{min-height:52px}}
.csb-sb-slot .find{flex:1 1 240px;min-width:0;margin:0}

/* v4 step-2 dead-CSS cleanup (queued 2026-09-16): .ck_go (the search's
 * submit button — v4 has none), .fchips (replaced by the scope bar) and
 * .clear (replaced by the x + scope bar) removed with their markup. */
/* base-subset merge: sub-filter chip row under a merged Base header */
.ckl tr.mrgc td{padding:6px 10px 10px}
.ckl .mc{display:inline-block;border:1px solid var(--line);border-radius:99px;padding:3px 11px;margin:2px 6px 2px 0;font-size:11.5px;color:var(--mut);cursor:pointer}
.ckl .mc:hover{border-color:#3a434c}
.ckl .mc.on{border-color:var(--teal);color:var(--teal)}
/* v4 header zone (master + multimaster, spec row 1) */
.csb-v4hd{width:100%;max-width:1440px;margin:0 auto 14px}
.csb-crumb{font-size:12px;color:var(--mut,#98a4ab);margin-bottom:8px}
.csb-crumb a{color:inherit;text-decoration:none}
.csb-crumb a.cc{color:var(--teal,#15ccad);font-weight:600}
.csb-crumb a:hover{text-decoration:underline}
.csb-hero{display:flex;gap:20px;align-items:flex-start}
.csb-hero-l{flex:1;min-width:0}
#csb_h1slot h1,#csb_h1slot .entry-title{font-size:28px !important;line-height:1.15 !important;margin:0 0 2px !important;font-weight:800;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.csb-rd{color:var(--mut,#98a4ab);font-size:12.5px;margin-bottom:10px}
.csb-hdart{flex:0 0 132px}
.csb-hdart img{width:132px;height:auto;border-radius:10px}
.csb-hdtabs{display:flex;gap:8px;margin:10px 0 12px;flex-wrap:wrap}
.csb-hdtab{border:1px solid var(--line,#272d34);background:var(--s1,#111418);border-radius:99px;padding:7px 14px;font-size:12.5px;font-weight:700;color:inherit;text-decoration:none}
.csb-hdtab.on{background:var(--teal,#15ccad);color:#04241c;border-color:var(--teal,#15ccad)}
/* beats Storefront's .hentry .entry-content a underline on the chips */
.csb-v4hd .csb-hdtabs .csb-hdtab{text-decoration:none}
.csb-v4hd .csb-hdtabs .csb-hdtab:hover{border-color:var(--teal,#15ccad)}
.csb-hdstats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 16px}
.csb-hdstat{border:1px solid var(--line,#272d34);background:var(--s1,#111418);border-radius:11px;padding:10px 12px}
.csb-hdstat .big{font-size:22px;font-weight:800;color:#fff;line-height:1.1}
.csb-hdstat .lbl{font-size:11px;color:var(--mut,#98a4ab);margin-top:2px;letter-spacing:.03em}
/* FIX-hdr-stats: composite breakdown under the number — "6 Hobby + 3 encased" */
.csb-hdstat .sub{font-size:12px;font-weight:600;color:#1bcdb0;margin-top:1px;line-height:1.25}

/* FIX-hdr-stats: stated guarantee under the decode bar (mockup 2A) */
.ig .gtdline{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.5;margin:10px 0 2px}
.ig .gtdline i{width:13px;height:13px;border-radius:4px;background:var(--teal,#1bcdb0);flex-shrink:0;margin-top:4px}
.ig .gtdline .mut{color:var(--mut,#98a4ab)}
@media(max-width:900px){
 .csb-hdart{display:none}
 #csb_h1slot h1,#csb_h1slot .entry-title{font-size:24px !important}
 .csb-hdstats{grid-template-columns:1fr 1fr}
}
/* fallback: any Storefront breadcrumb variant that survives the
   remove_action stays hidden on checklist pages */
body.csb-ckl-page .storefront-breadcrumb{display:none}
/* the v4 header owns the format tabs — hide the legacy selector if a
   template still prints it */
body.csb-ckl-page #checklist-major{display:none}
/* FIX-views: real tables with fixed colgroups (per-row grids drift) */
.ckl .ckt{width:100%;border-collapse:collapse;table-layout:fixed;margin:0 0 6px}
.ckl .ckt th{font-size:10.5px;letter-spacing:.06em;color:var(--mut,#98a4ab);text-align:left;font-weight:700;padding:6px 10px;border-bottom:1px solid var(--line,#272d34)}
.ckl .ckt td{padding:7px 10px;border-bottom:1px solid var(--line,#272d34);vertical-align:top;overflow:hidden;text-overflow:ellipsis}
.ckl .ckt td.n{color:var(--mut,#98a4ab)}
.ckl .ckt td.act{text-align:right;white-space:nowrap}
.ckl .ckt .np{margin-right:10px;color:var(--mut,#98a4ab)}
.ckl .ckt .msub,.ckl .ckt .mnp,.ckl .ckt .mty{display:none;color:var(--mut,#98a4ab);font-weight:400}
.ckl .ckt .msub i{font-style:normal}
.ckl tr.tapx{cursor:pointer}
.ckl .ckt td.pcell{white-space:normal}
/* ---- LIGHTER-HTML §3: the server-rendered By-card table (.ckt-s) ------
   Its cells carry no class at all. On 2026 Topps Allen & Ginter that saved
   258 KB — 3,051 rows x class="n"/"pcell"/"pl"/"tm colteam"/"act" — which
   the stylesheet can take from the column position instead: the shape is
   fixed by the colgroup, and these rows never move or re-order.
   These are the same declarations the classed rules above give the boot
   render's table, so the swap at boot is invisible. The one thing .ckt-s
   does NOT have is .pl's dotted underline: that advertises a tap target
   which does nothing until the panel is interactive, and the boot render
   draws it the moment it is. */
.ckl .ckt-s td:nth-child(1){font-weight:700;white-space:nowrap}
.ckl .ckt-s td:nth-child(2){white-space:normal}
.ckl .ckt-s td:nth-child(2) small{display:block;color:var(--mut,#98a4ab);font-size:11.5px;line-height:1.3;font-weight:400}
.ckl .ckt-s td:nth-child(2) i{display:inline-block;background:var(--teal,#15ccad);color:#fff;border-radius:8px;padding:1px 6px;font-size:11px;font-weight:700;font-style:normal;margin-left:6px;line-height:1.45}
body.dark-mode .ckl .ckt-s td:nth-child(2) i{color:#06231d}
/* SPEC 34 §2: the CARD's own print run, on the versions Panini numbers per
   player ("Cameron Smith /99"). Styled like a ladder rung's run and not like
   the RC badge beside it: a run is a fact about the card, not a label on it.
   .crun is the boot render's twin, which carries classes; the server table's
   cells do not, so it writes a bare <b> (same rule as the <i> above). */
.ckl .ckt-s td:nth-child(2) b,.ckl .ckt td.pcell .crun{color:var(--teal,#15ccad);font-weight:700;font-size:12px;margin-left:5px;white-space:nowrap}
.ckl .ckt-s:not(.ckt-nt) td:nth-child(3){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ckl .setn{display:block;color:var(--mut,#98a4ab);font-size:11.5px;line-height:1.3}
/* SPEC 32 state 1b: the sell sheet's one sentence about a set, under its
   heading — what the set IS, where the heading says only what it is called
   and how big it is. Muted and narrow so it reads as a caption on the
   heading and not as the first row of the table under it. */
.ckl .setnote{margin:-2px 0 10px;max-width:62ch;color:var(--mut,#98a4ab);font-size:13px;line-height:1.45}
/* SPEC 35 §1: "How to spot it →" under a variation set's heading. Sits where
   .setnote does and follows it when a set has both. Teal and arrowed so it
   reads as a way out of the table rather than another line about the set. */
.ckl .vglink{margin:-2px 0 10px;font-size:13px;line-height:1.45}
.ckl .vglink a{color:var(--teal,#15ccad);font-weight:600;text-decoration:none}
.ckl .vglink a:hover{text-decoration:underline}
.ckl .setnote + .vglink{margin-top:-6px}
/* FIX-notes-player: By player puts the note (the signer) INLINE after the
   card name -- muted and regular weight even on an autograph row, where the
   card name itself is bold. The "with ..." partner line below it is a .setn. */
.ckl .stn .sgn{color:var(--mut,#98a4ab);font-weight:400}
.ckl .setn.m-only{display:none}
/* FIX-notes: mobile-only lead INSIDE a sub-line that also carries a subset
   or note text (team in By card, set in By team). The line itself stays
   visible on desktop; only the lead and its separator hide. */
.setn .tmo{display:none}
/* FIX-setfilter: a set FILTER, not a jump row. Sits under the type chips;
   selecting is identical to picking the set in the search box. */
.setjump{display:none;align-items:center;gap:8px;margin:-2px 0 10px}
.setjump label{color:var(--mut,#98a4ab);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.setjump select{flex:1 1 auto;min-width:0;max-width:420px;background:var(--paper,#fff);color:inherit;border:1px solid var(--line,#ddd);border-radius:8px;padding:6px 10px;font-size:12.5px;cursor:pointer}
.setjump select:hover,.setjump select:focus{border-color:#15ccad;outline:none}
.ckl .ttag{font-size:9.5px;letter-spacing:.05em;color:var(--mut,#98a4ab);font-weight:700;border:1px solid transparent}
.ckl .ttag.au{border-color:#3a434c;border-radius:5px;padding:1px 5px}
.ckl h3.sh{display:flex;align-items:baseline;justify-content:space-between;font-size:14px;margin:14px 0 4px;font-weight:700}
.ckl h3.sh small{color:var(--mut,#98a4ab);font-weight:400;margin-left:8px}
.ckl h3.sh .lk{white-space:nowrap;flex-shrink:0}
.ckl .lad.shl{margin:2px 0 8px}
.ckl .gh.vgh{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px}
.ckl .gh.vgh .gn{text-transform:none;font-size:16px;font-weight:700}
/* MULTI-TEAM PLAYERS (2026-10-01): By player gathers a player's whole run
   under one header, so a player who carries more than one team inside the
   product (Tom Brady: Tampa Bay, Michigan Wolverines, New England) needs the
   team on the ROW as well -- the header can only list them. .tmsep is the
   per-team block head inside the group's table (softer than a group header,
   so it reads as a sub-head); .tmchip is the quiet twin of .ttag and is the
   part that survives a column sort, which dissolves the blocks. */
.ckl .ckt .tmchip{display:inline-block;border:1px solid var(--line,#272d34);border-radius:999px;padding:0 8px;margin-left:8px;font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--mut,#98a4ab);white-space:nowrap;vertical-align:1px}
.ckl .ckt tr.tmsep td{background:var(--shade);padding:6px 10px;font-size:12.5px;white-space:normal}
.ckl .ckt tr.tmsep b{font-weight:800;color:var(--ink,#fff)}
.ckl .ckt tr.tmsep small{color:var(--mut,#98a4ab);font-weight:400;margin-left:8px}
.ckl .ckt tr.tmsep img{display:inline-block;width:18px;height:18px;border-radius:50%;background:#2a323a;object-fit:cover;vertical-align:-4px;margin-right:8px}
.ckl .azrow{display:flex;gap:4px;flex-wrap:wrap;padding:2px 0}
.ckl .az{border:1px solid var(--line,#272d34);border-radius:6px;padding:3px 7px;font-size:11.5px;color:var(--mut,#98a4ab);cursor:pointer}
.ckl .az:hover{color:var(--teal,#15ccad);border-color:var(--teal,#15ccad)}
.ckl .az.dim{opacity:.35;cursor:default;pointer-events:none}
/* "Rookies only" = the SAME chip component as the type chips: grey when
   off, teal outline + teal text when on (v8 .chip recipe) */
.ckl .rcchip{display:inline-block;border-radius:99px;padding:3px 10px;font-size:11px;border:1px solid var(--line,#272d34);background:var(--s1,#111418);color:#c8d2d7;cursor:pointer;user-select:none;line-height:1.5}
.ckl .rcchip:hover{border-color:#3a434c}
.ckl .rcchip.on{border-color:var(--teal,#15ccad);color:var(--teal,#15ccad)}
/* (.ckl #ck_view button.on{border-bottom:none} lived here — the active tab
   of the old segmented strip, which sat flush on the row below it. The
   views are separate bordered cards now and the active one needs all four
   edges, so the rule is gone rather than left to win on its id.) */
/* Team names on one line wherever the TEAM column shows (the complement
   of the ≤900px query below that collapses it). Fixed layout won't widen
   the col for nowrap text, so clip with an ellipsis rather than spill. */
@media(min-width:901px){
 .ckl .ckt td.tm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:900px){
 /* display:none on cells alone leaves the <col> track reserved in fixed
    layout (Chrome/Safari), overflowing the table and pushing .act out of
    view — the col widths must ALSO collapse to zero */
 /* ...and the CELLS stay in the table at zero width, never display:none:
    a display:none cell leaves the row, so every later cell slides one
    track left. Invisible until a full-width row (colspan ladder / missing
    row) makes the last track real — then the card rows stopped ~70%
    across with an empty track on the right (Sam, Instagram 2026-09-24). */
 /* LIGHTER-HTML §1 (2026-10-10): .ckt-c .colteam is NOT in this list any
    more. Collapsing the team column to zero width is what made the By-card
    rows need a phone-only copy of the team under the name, and that copy is
    what Google read as "Bobby Witt Jr.Kansas City Royals | Kansas City
    Royals". The By-card phone layout is now the grid further down: the team
    CELL moves under the name and the row reads once. The other two views
    keep this rule — their collapsed columns have no duplicate. */
 .ckl .ckt .coln,.ckl .ckt-team .colset{padding:0 !important;border-left:0;border-right:0;font-size:0;line-height:0;color:transparent;overflow:hidden;white-space:nowrap}
 .ckl .ckt .coln *,.ckl .ckt-team .colset *{display:none}
 .ckl .ckt col.coln{width:0 !important}
 .ckl .ckt-team col.colset{width:0 !important}
 /* Paid Instagram traffic lands here on phones (Sam 2026-09-24). No
    TYPE or action column in the player/team views: the badge sits above
    the name (.mty); a second line (.msub) carries "#GM-11 · 2 parallels ▸"
    with the eBay pill floated right. Both columns collapse by the
    zero-width rule above (cells stay in the row), which also ends the
    clipped-INSERT "." for good. .ckt.ckt-* outranks the generic
    col:last-child widths that follow. */
 .ckl .ckt.ckt-team col:first-child,.ckl .ckt.ckt-player col:first-child,
 .ckl .ckt.ckt-team col:last-child,.ckl .ckt.ckt-player col:last-child{width:0 !important}
 .ckl .ckt-team td.ty,.ckl .ckt-player td.ty,.ckl .ckt-team td.act,.ckl .ckt-player td.act,
 .ckl .ckt-team th:first-child,.ckl .ckt-player th:first-child,.ckl .ckt-team th:last-child,.ckl .ckt-player th:last-child{padding:0 !important;border-left:0;border-right:0;font-size:0;line-height:0;color:transparent;overflow:hidden}
 .ckl .ckt-team td.ty *,.ckl .ckt-player td.ty *,.ckl .ckt-team td.act *,.ckl .ckt-player td.act *{display:none}
 .ckl .ckt .mty{display:block;margin:0 0 4px;line-height:1}
 .ckl .ckt .msub{display:block;margin:4px 0 0;font-size:12px;line-height:1.6;color:var(--mut,#98a4ab);white-space:nowrap}
 .ckl .ckt .msub .mnp{display:inline;margin:0;font-size:inherit}
 .ckl .ckt .msub .ebx{margin:-1px 0 0 8px}
 /* one column left, so the TYPE/CARD header is just a grey bar; and the
    opened ladder starts at the card name's edge (name cell pads 10px) so
    the rainbow reads as part of that card */
 .ckl .ckt-team thead,.ckl .ckt-player thead{display:none}
 .ckl .ckt-team td.lad,.ckl .ckt-player td.lad{padding-left:10px}
 /* one frame, not two: nested in the multimaster panel, the checklist's
    own box drops its border/padding; the outer panel trims to 12px */
 .csb-v4main .csb-mm-panel{padding-left:12px;padding-right:12px}
 .panel .ckl-panel{border:0;background:none;padding-left:0;padding-right:0}
 .ckl .ckt col:last-child{width:118px !important}
 /* By team / By player only: By card is the grid below, where the
    colgroup does not apply. .setn.m-only is still By team's phone lead
    (the SET name) — that view is never in the server-rendered HTML, so it
    has no duplicate for Google to read. */
 .ckl .setn.m-only{display:block}
 .ckl .setn .tmo{display:inline}
 .ckl .azrow{flex-wrap:nowrap;overflow-x:auto}

 /* ---- LIGHTER-HTML §1: By card on phones — the team, ONCE -----------
    Same layout as before (number left, name, team muted underneath, eBay
    pill right) built from the cells the row already has, instead of from
    a second copy of the team glued to the player name.
    The row becomes a 3x2 grid: the number and the action cell span both
    lines, the name takes the first and the team the second. Cells keep
    their source order, so a reader (and Google) still gets number,
    player, team.
    Only .ckt-c: the two grouped views keep the table layout above. */
 .ckl .ckt-c{display:block}
 .ckl .ckt-c>colgroup{display:none}
 .ckl .ckt-c>thead,.ckl .ckt-c>tbody{display:block}
 /* 96px / 118px are the same two reservations the colgroup made before
    this was a grid, so the row looks the same and the eBay pill lands in
    space that was already held for it instead of shifting the name.
    An `auto` third track does NOT work here: .ckt td is overflow:hidden,
    which makes the pill's min-content contribution zero, and the track
    collapsed to nothing the moment the row was tight (390px). */
 .ckl .ckt-c>thead>tr,.ckl .ckt-c>tbody>tr{display:grid;
  grid-template-columns:96px minmax(0,1fr) 118px;
  grid-template-areas:"ckn ckp cka" "ckn ckt cka"}
 /* NOT align-items:start — the number and action cells span both lines,
    and a start-aligned grid item shrinks to its content, which left the
    zebra stripe with a notch under every number */
 /* one rule per ROW, not per cell: the number spans both lines, so a
    per-cell border would draw straight through the middle of the row */
 .ckl .ckt-c>tbody>tr{border-bottom:1px solid var(--line,#272d34)}
 .ckl .ckt-c>thead>tr{border-bottom:1px solid var(--line,#272d34)}
 .ckl .ckt-c>thead>tr>th,.ckl .ckt-c>tbody>tr>td{border-bottom:0}
 .ckl .ckt-c>thead>tr>th:nth-child(1),.ckl .ckt-c>tbody>tr>td:nth-child(1){grid-area:ckn}
 .ckl .ckt-c>thead>tr>th:nth-child(2),.ckl .ckt-c>tbody>tr>td:nth-child(2){grid-area:ckp;padding-bottom:0}
 /* with a team column the third cell is the team and the fourth is the
    action; .ckt-nt products have no team column, so the third IS the
    action (csb_checklist_ssr / the boot render both set that class) */
 .ckl .ckt-c:not(.ckt-nt)>tbody>tr>td:nth-child(3){grid-area:ckt;padding-top:1px;
  color:var(--mut,#98a4ab);font-size:11.5px;line-height:1.3;white-space:normal}
 .ckl .ckt-c:not(.ckt-nt)>thead>tr>th:nth-child(3){display:none}
 .ckl .ckt-c:not(.ckt-nt)>tbody>tr>td:nth-child(4),
 .ckl .ckt-c.ckt-nt>tbody>tr>td:nth-child(3){grid-area:cka;text-align:right}
 .ckl .ckt-c>thead>tr>th:last-child{grid-area:cka}
 /* full-width rows (an opened ladder, a "missing parallels" note) are one
    cell with a colspan — colspan means nothing to a grid, so they opt out */
 .ckl .ckt-c>tbody>tr.lad,.ckl .ckt-c>tbody>tr.mrgc,.ckl .ckt-c>tbody>tr.tmsep{display:block}
}
/* v8: checklist in a bordered box; control row spans it; chips +
   Expand-all one row; count on the title line */
.ckl-panel{border:1px solid var(--line,#272d34);border-radius:14px;background:var(--s1,#111418);padding:18px 20px 22px}
.ckl-panel .ckt tbody tr:nth-child(odd) td{background:var(--s2,#161b20)}
.ckl-panel .chipsrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ckl-panel .chipsrow .ladall{margin-left:auto;white-space:nowrap}
.ckl-panel h2.t .cnt{color:var(--mut,#98a4ab);font-weight:400;font-size:14px}
#ck_more{display:none}
.ckl .cpane{display:none}   /* retired inline strip pane */
@media(max-width:900px){.ckl-panel{padding:12px 10px 16px;border-radius:10px}}
/* group-header logos: the old rule targeted tr.gh td img and no longer
   matches the div-based headers — resize restored here */
.ckl .gh img,.ckl .gh.vgh img{width:30px;height:30px;border-radius:50%;background:#2a323a;object-fit:cover;flex-shrink:0}
/* (Player View tile rules removed — tiles retired; scoped player
   renders the By player list) */
/* v8 header order: the theme's own title above the header hides at
   first paint (the runtime deletes it from the DOM; our server-rendered
   .csb-h1 in the slot is the page's H1). Product + CC pages alike. */
body.csb-ckl-page h1.entry-title,body.csb-ckl-page h1.product_title{display:none}
/* …but NEVER inside our header slot: a stale shell that still ADOPTS the
   theme title (moving it, entry-title class and all, into the slot) must
   show it — old-shell + new-css combined to hide every H1 (2026-09-18) */
body.csb-ckl-page #csb_h1slot h1.entry-title,body.csb-ckl-page #csb_h1slot h1.product_title{display:block}
/* intro lede (FIX-product B5) — master pages + delegated single-format */
.csb-v4 .csb-lede,body.csb-ckl-page .csb-lede{font-size:15px;line-height:1.65;margin:0 0 18px;color:var(--ink,#eef2f3)}
/* ≤400px (bug 2026-09-18, screenshot at 345px): the 96 + 118 fixed
   reservations left the name column ~90px and words shredded letter-by-
   letter. The eBay pill really needs ~64px and prefixed card numbers
   (BCP-250) fit 56px at 11px — the name column gets the rest (~200px at
   345). Same class-based cols, one tier tighter. */
@media(max-width:400px){
 .ckl .ckt col:last-child{width:64px !important}
 .ckl .ckt-c col:first-child{width:56px !important}
 /* By card is a grid at this width, so its two reservations are tracks,
    not cols — same 56 / 64 as the rules above (LIGHTER-HTML §1) */
 .ckl .ckt-c>thead>tr,.ckl .ckt-c>tbody>tr{grid-template-columns:56px minmax(0,1fr) 64px}
 .ckl .ckt td:first-child{font-size:11px;letter-spacing:-.02em}
 .ckl .ckt th{font-size:10px;letter-spacing:.04em}
 .ckl .ckt td.n{font-size:13px}
 .ckl .ebx{padding:2px 5px;font-size:10.5px}
}
/* C4 — hierarchy by tone, not color: group names lead in pure white,
   rows step back to light grey, numbers dim, and bold white now means
   exactly one thing: an autograph row. */
.ckl .gh{border-bottom:1px solid var(--line,#272d34);padding-bottom:7px}
.ckl .gh .gn{font-size:18px;font-weight:800;color:#fff}
/* FIX-D3: type CHAPTER headers (Base / Inserts / Relics / Autographs). The
   rule above targeted a .gn child the By-card renderer did not emit — the
   header was a bare <div class="gh">Base</div> — so it rendered at 16px /
   weight 400 / no top margin, barely distinguishable from a set header.
   SPEC-25 §4 (2026-10-17): the label IS wrapped in .gn now, because that is
   where the type colour lands, so the rule above applies again. These two
   set the same size and weight, which is why nothing moved.
   Styled directly now, with a real gap above so each chapter reads as one.
   .vgh (By team / By player group rows) keeps its own sticky styling.
   Colour is inherited ink, so light mode doesn't get white-on-white. */
.ckl .gh:not(.vgh){font-size:18px;font-weight:800;margin-top:36px;display:flex;align-items:baseline;gap:10px}
.ckl .gh:not(.vgh):first-child{margin-top:4px}
.ckl .gh .ghn{font-size:12px;font-weight:600;color:var(--mut,#98a4ab);letter-spacing:0}
.ckl .ckt td{color:#c9d1d6}
.ckl .ckt-c td:first-child,.ckl .ckt td.coln,.ckl .ckt .coln{color:#7d8a92}
.ckl .ckt tr.aur td{color:#fff;font-weight:700}
/* C6 — the header is ONE grid (product-header-layout-mockup): text
   column 1fr, art 220x220 top-aligned, 28px gap. Lede fills the text
   column and wraps only at the art. Tabs + tiles full width below.
   Mobile: one column, art first.

   THE ART BOX IS SQUARE AND HAS NO BACKDROP (2026-10-13). It was 220x150
   over a grey gradient plate: the box-art thumbnails are hard-cropped
   squares with an alpha channel, so object-fit:contain letterboxed a
   150x150 image inside a 220px plate and painted grey down both sides.
   Matching the box to the source means the same 220px column draws the
   art at 220px instead of 150, and the plate it was floating on is gone
   rather than framing it. Nothing else here moved.

   If a product ever has non-square art, contain still fits it whole —
   it just leaves the page background showing, not a grey slab. */
.csb-v4hd .csb-hero{display:grid;grid-template-columns:1fr 220px;gap:28px;align-items:start}
.csb-v4hd .csb-hero-l{min-width:0}
.csb-v4hd .csb-hdart{width:220px;aspect-ratio:1/1;height:auto;border:0;background:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* the radius does nothing to the transparent PNGs; it is here for the
   products whose art is an opaque square photo */
.csb-v4hd .csb-hdart img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px}
.csb-v4hd .csb-lede{margin:0}
@media(max-width:700px){
 .csb-v4hd .csb-hero{grid-template-columns:1fr;gap:12px}
 /* CAPPED, not full width: square at 100% of a 412px phone is a 390px
    block sitting above the H1, which would push the title off the first
    screen. 280px is a little larger than the 265px the letterboxed
    version drew, so the art still grows. Keep this in step with the
    `sizes` attribute in csb_checklist_header() — it names this number. */
 .csb-v4hd .csb-hdart{width:min(100%,280px);aspect-ratio:1/1;height:auto;order:-1;margin-bottom:6px}
}
/* tiered base (base-subset-merge-rule): one section, a short ladder
   block per tier; the selected tier highlights, the rest dim */
.ckl .lad .tlad{margin:0 0 12px;padding:8px 10px;border:1px solid transparent;border-radius:9px}
.ckl .lad .tlad .tld{font-weight:800;color:#fff;font-size:12.5px;margin-bottom:5px}
.ckl .lad .tlad.on{border-color:var(--teal,#15ccad)}
.ckl .lad .tlad.dimt{opacity:.45}
/* mobile art bug 2026-09-19: max-width/max-height CAP but never
   upscale, so a small source floated tiny in the full-width stage.
   The img now FILLS the stage; contain keeps proportions both ways.
   Still needed with the square box — a 300x300 source in a 220px box
   would otherwise cap at its own 300px and sit at whatever size it
   liked rather than the box's. */
.csb-v4hd .csb-hdart img{width:100%;height:100%;object-fit:contain}
/*tok:csb-ckl-frame-20*/















/* =========================================================================
 * MASTER SECTION TABS + canvases — Sam brief layout (chips always visible
 * above a sticky tab bar; each tab a full canvas). House light/dark.
 * The hoisted chips strip reuses .ig chip styling via the .ig wrapper —
 * .csb-chipstrip only removes the frame.
 * ========================================================================= */
.ig.csb-chipstrip{border:none;border-radius:0;padding:0;margin-bottom:8px;display:block;width:100%;max-width:none}
.ig.csb-chipstrip .chips{margin-bottom:12px;width:100%}


/* every section always visible and stacked; .on kept harmless for
 * transition-period markup */
.csb-sec,.csb-sec.on{display:block;width:100%;min-width:0;max-width:100%}
/* anchored scrolls land below the sticky bar */
.csb-sec,.csb-desc{scroll-margin-top:66px}

.csb-about{
  --teal:#15ccad;--ink:#111;--line:#ddd;--mut:#666;
  color:var(--ink);border:1px solid var(--teal);border-radius:16px;padding:20px 22px;margin-bottom:22px;
}
body.dark-mode .csb-about{--ink:#eef2f3;--line:#272d34;--mut:#98a4ab}
.csb-about h2{margin:0 0 12px;font-size:22px}
.csb-about .lead{font-size:15px}
.csb-about ul{margin:10px 0 10px 20px}
.csb-about li{margin-bottom:8px}
.csb-about .csb-about-disc{color:var(--mut);font-size:12.5px;border-top:1px solid var(--line);padding-top:10px;margin-top:14px}

/* product description panel: same bordered box + light/dark as .csb-about */
.csb-desc{width:100%;min-width:0;max-width:100%}
.csb-about .csb-desc-body img{max-width:100%;height:auto}
.csb-about .csb-desc-body p{margin:0 0 12px}
.csb-about .csb-desc-body :last-child{margin-bottom:0}

/* Tier-LINK sealed block (spec v2 placement 2, tail products): replaces
 * the API tile strip outside the release window — same slot, zero API.
 * Self-contained (does not reuse theme .ebay-ad-block styles). */
.csb-sealed-link{--teal:#15ccad;--mut:#666;border:1px solid var(--teal);border-radius:16px;padding:16px 20px;margin-bottom:22px;width:100%;max-width:none;min-width:0}
/* the link-only floor of the sealed eBay module — same eBay blue as the
   tile version above, for the same reason (redesign/README.md) */
body.dark-mode .csb-sealed-link{--teal:#7fb2ff;--mut:#8fa3bf}
.csb-sealed-link a{color:var(--teal);font-weight:700;font-size:15px;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.csb-sealed-link .csb-sl-disc{color:var(--mut);font-size:11.5px;margin-top:8px}

/* OWN BREAK MODULE — color-hierarchy spec: the ONLY heavy gold on the
 * page. 1.5px gold border, gold-tinted gradient, faint outer glow;
 * filled gold badge pill + filled gold CTA; gold-tinted slot chips;
 * third row ("N more breaks — see all") is its own line. */
.csb-breakmod{--gold:#fac83d;--goldline:#8a6d1a;--ink:#111;--mut:#666;
 border:1.5px solid var(--gold);border-radius:12px;
 background:linear-gradient(180deg,#fdf6df,#fbf3d8);
 box-shadow:0 0 0 4px rgba(250,200,61,.10);
 padding:14px 16px;margin-bottom:22px;color:var(--ink);width:100%;max-width:none;min-width:0}
body.dark-mode .csb-breakmod{--ink:#eef2f3;--mut:#98a4ab;
 background:linear-gradient(180deg,#221a08,#14110a);
 box-shadow:0 0 0 4px rgba(250,200,61,.06)}
.csb-breakmod .csb-bm-live{background:var(--gold);color:#1f1600;border:none;border-radius:99px;font-size:10.5px;font-weight:800;padding:4px 11px;white-space:nowrap;letter-spacing:.03em}
.csb-breakmod .csb-bm-cta{margin-left:auto;background:var(--gold);color:#1f1600;font-weight:800;border-radius:9px;padding:9px 17px;font-size:13px;white-space:nowrap;text-decoration:none}
.csb-breakmod .csb-bm-more{margin-top:9px;font-size:12px;color:#7a6a2e}
body.dark-mode .csb-breakmod .csb-bm-more{color:#c9b97a}
.csb-breakmod .csb-bm-more a{color:#8a6d1a;text-decoration:underline;text-underline-offset:3px}
body.dark-mode .csb-breakmod .csb-bm-more a{color:var(--gold)}
@media(max-width:640px){.csb-breakmod{padding:12px 14px}.csb-breakmod .csb-bm-cta{margin-left:0;flex:1 1 100%;text-align:center}}

/* sealed live-listings header meta + see-all link (API mode of the strip) */
.csb-sealed-live .csb-sl-meta{color:#666;font-size:11.5px;font-weight:400;margin-left:8px}
body.dark-mode .csb-sealed-live .csb-sl-meta{color:#aaa}
.csb-sealed-live .csb-seeall{color:#15ccad;font-size:12.5px;margin-top:10px;display:inline-block;text-decoration:underline;text-underline-offset:3px}

/* STREET PRICE (spec v2 5b): master one-liner above the pyramid; parent
 * per-format chips under the cmp table. House light/dark; fail-closed
 * variant carries no number, only the tracked link. */
.csb-street{--teal:#15ccad;--ink:#111;--mut:#666;--tint:#e6faf5;--line:#ddd;--paper:#fff;
 display:flex;align-items:center;gap:10px;flex-wrap:wrap;
 border:1px solid var(--teal);background:var(--tint);border-radius:10px;
 padding:11px 16px;margin:0 0 16px;color:var(--ink);width:100%;max-width:none;min-width:0}
body.dark-mode .csb-street{--ink:#eef2f3;--mut:#98a4ab;--tint:#0e2a22;--line:#272d34;--paper:#111418}
.csb-street .csb-st-price{color:var(--teal);font-weight:800;font-size:17px}
.csb-street .csb-st-sub{color:var(--mut);font-size:12.5px}
.csb-street .csb-st-sub small{font-size:11px}
.csb-street .csb-st-link{margin-left:auto;color:var(--teal);font-size:12.5px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.csb-street-multi{margin-top:12px}
.csb-street-multi .csb-st-sub{flex:0 0 auto}
.csb-street-multi .csb-st-chip{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:7px 12px;font-size:12.5px}
.csb-street-multi .csb-st-chip .csb-st-price{font-size:14px}
.csb-street-multi .csb-st-link{margin-left:0}
@media(max-width:640px){.csb-street{padding:10px 12px}.csb-street .csb-st-link{margin-left:0;flex:1 1 100%}}

/* AUCTION STRIP (spec v2 placement 6): content feature above the
 * checklist. House light/dark; horizontal card grid, 2-up on mobile. */
.csb-auction{--teal:#15ccad;--ink:#111;--mut:#666;--line:#ddd;--shade:#f7f7f7;--paper:#fff;
 border:1px solid var(--teal);border-radius:16px;padding:18px 20px;margin-bottom:22px;
 color:var(--ink);width:100%;max-width:none;min-width:0}
body.dark-mode .csb-auction{--ink:#eef2f3;--mut:#98a4ab;--line:#272d34;--shade:#181c21;--paper:#111418}
.csb-auction .csb-au-hd{font-size:16px;font-weight:700;margin-bottom:12px}
.csb-auction .csb-au-meta{color:var(--mut);font-size:11.5px;font-weight:400;margin-left:8px}
.csb-auction .csb-au-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.csb-auction .csb-au-card{display:block;background:var(--shade);border:1px solid var(--line);border-radius:10px;padding:9px;text-decoration:none;color:var(--ink)}
.csb-auction .csb-au-card:hover{border-color:var(--teal)}
.csb-auction .csb-au-thumb{display:flex;align-items:center;justify-content:center;background:var(--paper);border-radius:7px;height:110px;margin-bottom:8px;overflow:hidden}
.csb-auction .csb-au-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.csb-auction .csb-au-t{display:block;font-size:12px;line-height:1.3;min-height:31px}
.csb-auction .csb-au-bid{display:block;color:var(--teal);font-weight:800;font-size:14px;margin-top:5px}
.csb-auction .csb-au-bid small{color:var(--mut);font-weight:400;margin-left:5px}
.csb-auction .csb-au-end{display:block;color:var(--mut);font-size:10.5px;margin-top:2px}
.csb-auction .csb-seeall{color:var(--teal);font-size:12.5px;margin-top:12px;display:inline-block;text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.csb-auction .csb-au-cards{grid-template-columns:1fr 1fr}.csb-auction{padding:14px}}

/* ==== GOLD = MONEY (color-hierarchy spec, supersedes the 2026-09-09
 * gold accents): gold lives ONLY on the break module + "$ examples"
 * buttons, so the break module owns the page's money color. eBay
 * surfaces sit on neutral panel lines. ==== */
.csb-street{border-color:var(--line,#272d34)}
.csb-auction{border-color:var(--line,#272d34)}

/* SEALED MODULE v2 (product-page-top-mockup .sealed/.cards geometry, house
 * light/dark, gold ad-accent border). Replaces the grandfathered
 * ebay-item-contain markup — .csb-sealed-live rules above are retired. */
.csb-sealed{--teal:#15ccad;--ink:#111;--mut:#666;--line:#ddd;--shade:#f7f7f7;--paper:#fff;
 border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:22px;
 color:var(--ink);width:100%;max-width:none;min-width:0}
/* the sealed strip is an eBay ad, so it takes the design system's eBay
   colors whole (redesign/README.md): panel #141b26, tile #1b2433, line
   #2a3a52, link #7fb2ff, and the real eBay mark top left. --teal is
   REDEFINED to the eBay blue rather than every rule being rewritten —
   teal is the site's color and may not appear inside an eBay module, so
   any var(--teal) in here is by definition meant to be the blue. */
body.dark-mode .csb-sealed{--teal:#7fb2ff;--ink:#dbe5f5;--mut:#8fa3bf;--line:#2a3a52;--shade:#1b2433;--paper:#121a26;background:#141b26}
.csb-sealed h4 .eblogo{height:18px;width:auto;display:inline-block;margin-right:9px;vertical-align:-3px}
/* beats Storefront's .hentry .entry-content a underline inside the tiles */
.csb-sealed .csb-sd-cards .csb-sd-card{text-decoration:none}
.csb-sealed .csb-sd-disc{color:var(--mut);font-size:11px;border-top:1px solid var(--line);padding-top:8px;margin-top:12px}
.csb-sealed h4{margin:0 0 2px;font-size:15px}
.csb-sealed .csb-sd-sub{color:var(--mut);font-size:12px;margin-bottom:12px}
.csb-sealed .csb-sd-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.csb-sealed .csb-sd-card{display:block;background:var(--shade);border:1px solid var(--line);border-radius:10px;padding:9px;text-decoration:none;color:var(--ink)}
.csb-sealed .csb-sd-card:hover{border-color:var(--teal)}
.csb-sealed .csb-sd-thumb{display:flex;align-items:center;justify-content:center;background:var(--paper);border-radius:7px;height:78px;margin-bottom:8px;overflow:hidden}
.csb-sealed .csb-sd-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.csb-sealed .csb-sd-t{display:block;font-size:12px;min-height:32px;line-height:1.3}
.csb-sealed .csb-sd-p{display:block;color:var(--ink);font-weight:800;font-size:14px;margin-top:4px}
.csb-sealed .csb-sd-m{display:block;color:var(--mut);font-size:10.5px}
.csb-sealed .csb-seeall{color:var(--teal);font-size:12.5px;margin-top:12px;display:inline-block;text-decoration:underline;text-underline-offset:3px}
.csb-sealed .csb-sd-disc{color:var(--mut);font-size:11.5px;border-top:1px solid var(--line);padding-top:8px;margin-top:12px}
@media(max-width:1023px){.csb-sealed .csb-sd-cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.csb-sealed .csb-sd-cards{grid-template-columns:1fr 1fr}.csb-sealed{padding:14px}}

/* PAGE SURFACE (color-hierarchy spec): lift the page off pure black.
 * Site-wide by necessity (body is theme-owned) — delete this one rule if
 * the theme should keep its own background. */
body.dark-mode{background:#0b0d10}


/* "What did you pull?" CTA on child pages (mirrors the parent's;
 * rules copied from multimaster_sections.css so each shell's stylesheet
 * stays self-sufficient) */
.csb-cta{
  --teal:#15ccad;--ink:#111;--mut:#666;--tint:#e6faf5;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  background:var(--tint);border:1px solid var(--teal);border-radius:16px;
  padding:18px 22px;margin-bottom:22px;color:var(--ink);width:100%;max-width:none;
}
body.dark-mode .csb-cta{--ink:#eef2f3;--mut:#98a4ab;--tint:#0e2a22}
.csb-cta .big{font-size:20px;font-weight:700}
.csb-cta .sub{color:var(--mut);font-size:14px}
.csb-cta .csb-cta-go{margin-left:auto;background:var(--teal);color:#fff;border:none;border-radius:22px;padding:12px 20px;font-size:15px;font-weight:700;cursor:pointer}
body.dark-mode .csb-cta .csb-cta-go{color:#06231d}

/* FILTER STRIP (ebay-modules-spec-v3, state A) — replaces the .csb-auction
 * rules above (kept harmless for rollout). Five cards desktop; mobile =
 * open horizontal swipe row. Link-only variant is the universal floor. */
.csb-strip{--teal:#15ccad;--ink:#111;--mut:#666;--line:#ddd;--shade:#f7f7f7;--paper:#fff;
 border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:18px;
 color:var(--ink);width:100%;max-width:none;min-width:0}
/* the bid-on strip is an eBay ad: same treatment as the sealed strip
   above, including the --teal redefinition */
body.dark-mode .csb-strip{--teal:#7fb2ff;--ink:#dbe5f5;--mut:#8fa3bf;--line:#2a3a52;--shade:#1b2433;--paper:#121a26;background:#141b26}
.csb-strip .csb-fs-hd .eblogo{height:18px;width:auto;display:inline-block;margin-right:9px;vertical-align:-3px}
.csb-strip .csb-fs-cards .csb-fs-card{text-decoration:none}
.csb-strip .csb-fs-disc{color:var(--mut);font-size:11px;border-top:1px solid var(--line);padding-top:8px;margin-top:12px}
.csb-strip .csb-fs-hd{font-size:14.5px;font-weight:700}
.csb-strip .csb-fs-meta{color:var(--mut);font-size:11.5px;font-weight:400;margin-left:8px}
.csb-strip .csb-fs-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}
.csb-strip .csb-fs-card{display:block;background:var(--shade);border:1px solid var(--line);border-radius:9px;padding:8px;text-decoration:none;color:var(--ink)}
.csb-strip .csb-fs-card:hover{border-color:var(--teal)}
.csb-strip .csb-fs-thumb{display:flex;align-items:center;justify-content:center;background:var(--paper);border-radius:6px;height:116px;margin-bottom:7px;overflow:hidden}
.csb-strip .csb-fs-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.csb-strip .csb-fs-t{display:block;font-size:11.5px;line-height:1.3;min-height:30px}
.csb-strip .csb-fs-p{display:block;color:var(--ink);font-weight:700;font-size:13px;margin-top:4px}
.csb-strip .csb-fs-m{display:block;color:var(--mut);font-size:10.5px}
.csb-strip .csb-fs-go{color:var(--teal);font-size:12px;margin-top:10px;display:inline-block;text-decoration:underline;text-underline-offset:3px}
/* link-only floor: one row, heading + exit */
.csb-strip-link{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-color:var(--teal)}
.csb-strip-link .csb-fs-go{margin:0 0 0 auto;white-space:nowrap;font-weight:700}
@media(max-width:760px){
 .csb-strip .csb-fs-cards{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:8px;width:0;min-width:100%;padding-bottom:4px}
 .csb-strip .csb-fs-card{flex:0 0 150px}
 .csb-strip{padding:12px}
}

/* filter strip: path sub-line ("Showing Dodgers → Autographs") */
.csb-strip .csb-fs-sub{color:var(--mut);font-size:12px;margin-top:2px}
.csb-strip .csb-fs-sub b{color:var(--ink);font-weight:700}


/* ==== SINGLE SEARCH BAND + PROMO CARD (S/A specs) ==== */
.csb-searchband{--teal:#15ccad;--ink:#111;--mut:#666;--line:#ddd;--paper:#fff;--alt:#f0f2f4;--shade:#f7f7f7;--tint:#e9f8f4;
 border:1px solid var(--teal);border-radius:14px;padding:16px 18px;margin-bottom:18px;
 background:linear-gradient(135deg,var(--tint),transparent 55%);color:var(--ink);width:100%;max-width:none;min-width:0}
body.dark-mode .csb-searchband{--ink:#eef2f3;--mut:#98a4ab;--line:#272d34;--paper:#111418;--alt:#1f242a;--shade:#181c21;--tint:#0e2a22}
.csb-searchband .big{font-size:19px;font-weight:800;margin-bottom:2px}
.csb-searchband .sub{color:var(--mut);font-size:12.5px;margin-bottom:12px}
.csb-searchband .csb-sb-slot .find{margin:0}

/* ==== LADDER SELECTOR (master S/A spec, Advanced-only, panel-rendered)
 * Print run · Parallel · Per box · Per case. Dots + Superfractor
 * treatment per the color spec; run cell is the tooltip trigger. ==== */
#csb_ladsel{--teal:#15ccad;--ink:#111;--mut:#666;--line:#ddd;--alt:#f0f2f4;color:var(--ink)}
body.dark-mode #csb_ladsel{--ink:#eef2f3;--mut:#98a4ab;--line:#272d34;--alt:#1f242a}
#csb_ladsel .lschips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
#csb_ladsel .lschip{background:var(--alt);border:1px solid var(--line);border-radius:99px;color:var(--ink);font-size:12.5px;padding:6px 13px;cursor:pointer}
#csb_ladsel .lschip small{color:var(--mut);margin-left:5px}
#csb_ladsel .lschip.on{background:var(--teal);border-color:var(--teal);color:#04241c;font-weight:800}
#csb_ladsel .lschip.on small{color:#04241c}
#csb_ladsel .lstbl{border:1px solid var(--line);border-radius:10px;overflow:hidden}
#csb_ladsel .lshead,#csb_ladsel .lsrow{display:grid;grid-template-columns:110px 1fr 170px 150px;align-items:center;padding:9px 13px}
#csb_ladsel .lshead{color:var(--mut);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--line)}
#csb_ladsel .lsrow{border-bottom:1px solid var(--line)}
#csb_ladsel .lsrow:last-child{border-bottom:none}
#csb_ladsel .lsrow:nth-child(odd){background:var(--alt)}
#csb_ladsel .lsrun{color:var(--teal);font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:13px}
#csb_ladsel .lsname{display:flex;align-items:center;gap:7px;font-size:13px}
#csb_ladsel .lsname .pd{width:6px;height:6px;border-radius:50%;flex:0 0 6px}
#csb_ladsel .lsodds{color:var(--ink);font-size:12.5px}
#csb_ladsel .lsrow.sfr{background:linear-gradient(90deg,rgba(184,144,46,.14),transparent 70%)}
#csb_ladsel .lsrow.sfr .lsname{color:#8a6414;font-weight:700}
body.dark-mode #csb_ladsel .lsrow.sfr .lsname{color:#f3e2a8}
#csb_ladsel .lsrow.sfr .lsrun{color:#b8902e}
body.dark-mode #csb_ladsel .lsrow.sfr .lsrun{color:#f7d878}
#csb_ladsel .lsrow.sfr .lssfr{width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:radial-gradient(circle at 40% 35%,#fff3c4 0%,#f1d27a 30%,#c99a2e 55%,#f1d27a 70%,#8a6414 100%);box-shadow:0 0 0 1px #6b4f12}
#csb_ladsel .lshint{color:var(--mut);font-size:11.5px;margin-top:9px}
@media(max-width:700px){
 /* FIX doc §8: one line per row — run (teal, tappable) · dot+name · odds */
 #csb_ladsel .lshead{display:none}
 #csb_ladsel .lsrow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:8px 11px}
 #csb_ladsel .lsrun{flex:0 0 auto}
 #csb_ladsel .lsname{flex:0 1 auto;font-size:12.5px}
 #csb_ladsel .lsodds{font-size:11.5px;color:var(--mut)}
 #csb_ladsel .lsodds::before{content:'· ';color:var(--mut)}}


/* page title on checklist pages, mobile (FIX doc §3): ~28px/800, white
 * in dark mode, clamped to two lines. Scoped by the csb-ckl-page body
 * class (added only on /full-checklist/ and /checklist-central/). */
@media(max-width:760px){
 body.csb-ckl-page h1.entry-title{font-size:28px;font-weight:800;line-height:1.15;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 body.csb-ckl-page.dark-mode h1.entry-title{color:#eef2f3}
}

/* Only-in-this-box (§7): JS strips it; this covers the pre-strip flash */
#breakdown .sec-label + .tagrow{}
/* exclusives tag in the ladder selector */
#csb_ladsel .lstag{color:var(--mut);border:1px solid var(--line);border-radius:6px;
 padding:1px 7px;font-size:10px;font-style:normal;margin-left:7px;white-space:nowrap}
#csb_ladsel .lschip.lsex{margin-left:auto}
#csb_ladsel .lschip.lsex.on{background:var(--teal);border-color:var(--teal);color:#04241c;font-weight:800}

/* ==== FIX doc §6: sealed module cards ==== */
.csb-sd-thumb{background:#181c21;padding:8px;border-radius:6px;border:1px solid #272d34}
.csb-sd-thumb img{object-fit:contain;width:100%;height:100%;background:transparent}
body:not(.dark-mode) .csb-sd-thumb{background:#f0f2f4;border-color:#d9dee3}
.csb-sd-card .csb-sd-t,.csb-sd-card:hover .csb-sd-t{text-decoration:none}
.csb-sd-p{color:var(--ink,#eef2f3)}

/* ==== FIX doc §11: per-case mini-stat numbers white, not teal ==== */
#breakdown .mini-stats .mini b{color:var(--ink,#eef2f3)}

/* ==== V4 SHELL (todd-packet-2026-09-19): two-column layout + cue cards.
 * Replaces the retired Simple/Advanced blocks that lived here (mode
 * toggle, fail-safe rules, advonly doubling, promo card, cache-compat
 * aliases) — v4 has no mode system. ==== */

/* layout: main + 300px sticky rail; one column under 960px (the shared
 * runtime moves rail modules into their mobile slots) */
.csb-v4{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start;width:100%;max-width:none}
.csb-v4main{min-width:0;max-width:100%}
.csb-v4rail{position:sticky;top:12px;align-self:start;min-width:0}
.csb-v4rail .csb-sealed .csb-sd-cards,.csb-v4rail .csb-strip .csb-fs-cards,.csb-v4rail .csb-auction .csb-au-cards{grid-template-columns:1fr 1fr}
.csb-v4rail .csb-au-thumb{height:74px}
.csb-v4rail .csb-sealed,.csb-v4rail .csb-strip,.csb-v4rail .csb-auction,.csb-v4rail .csb-sealed-link,.csb-v4rail .csb-mm-panel{padding:14px;margin-bottom:14px}
@media(max-width:959px){.csb-v4{grid-template-columns:1fr}.csb-v4rail{position:static;top:auto;bottom:auto}}

/* cue card (v4 §Cues): H2 + one-line summary always visible; the body is
 * display:none, NEVER removed — everything stays in the DOM. House
 * light/dark via the same var pattern as the sibling panels. */
.csb-cue{--teal:#15ccad;--ink:#111;--mut:#666;--line:#ddd;--amber:#b97f22;--s1:#fff;
 border:1px solid var(--line);border-radius:12px;background:var(--s1);
 padding:13px 16px;margin-bottom:14px;color:var(--ink);width:100%;max-width:none;min-width:0}
body.dark-mode .csb-cue{--ink:#eef2f3;--mut:#98a4ab;--line:#272d34;--amber:#ffb454;--s1:#111418}
.csb-cue .csb-cue-hd{display:flex;align-items:center;gap:10px}
.csb-cue .csb-cue-hd h2{margin:0;font-size:16.5px;font-weight:800;color:var(--ink)}
.csb-cue .csb-cue-hd h2 b{color:var(--ink)}
.csb-cue .csb-cue-open{margin-left:auto;background:none;border:none;padding:0;cursor:pointer;
 color:var(--teal);font-size:12.5px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.csb-cue .csb-cue-line{color:var(--mut);font-size:12.5px;margin-top:5px;line-height:1.5}
.csb-cue .csb-cue-line b{color:var(--ink)}
.csb-cue .csb-cue-line .lot{color:var(--amber);font-weight:700}
.csb-cue .csb-cue-line a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.csb-cue .csb-cue-gauto{margin-top:9px}
.csb-cue .csb-cue-gauto:empty{display:none}

/* hoisted guaranteed-auto block keeps infographic styling via its .ig
 * wrapper; this modifier strips the .ig frame (same as .csb-chipstrip) */
.ig.csb-gauto-ig{border:none;border-radius:0;padding:0;margin:0;display:block;width:100%;max-width:none}
/* div-repair shim: prepended openers that absorb stray closers from
 * unbalanced stored HTML are layout-transparent */
.csb-igfix{display:contents}
.csb-cue .csb-cue-bd{display:none;border-top:1px dashed var(--line);margin-top:10px;padding-top:10px}
.csb-cue.open .csb-cue-bd{display:block}
/* dots strip in the parallels cue line */
.csb-cue .pdots{display:inline-flex;gap:3px;margin-right:8px;vertical-align:middle}
.csb-cue .pdots .pd{width:6px;height:6px;border-radius:50%;display:inline-block;flex:0 0 6px}
/* about/description bodies reuse the old panel typography without the
 * .csb-about wrapper */
.csb-cue .lead{font-size:15px}
.csb-cue ul{margin:10px 0 10px 20px}
.csb-cue li{margin-bottom:8px}
.csb-cue .csb-about-disc{color:var(--mut);font-size:12.5px;border-top:1px solid var(--line);padding-top:10px;margin-top:14px}
.csb-cue .csb-desc-body img{max-width:100%;height:auto}
.csb-cue .csb-desc-body p{margin:0 0 12px}
.csb-cue .csb-desc-body :last-child{margin-bottom:0}
/* mobile-only sealed cue: hidden until the runtime confirms listing
 * cards (.has); never shows on desktop (the module lives in the rail) */
.csb-cue-sealed{display:none}
@media(max-width:959px){.csb-cue-sealed.has{display:block}}
/* eBay modules keep their own frames inside cue bodies/slots */
.csb-cue .csb-sealed{border:none;padding:0;margin:0}

/* v4 break module: the ONE LINE is the module (the old .csb-bm-full
 * Advanced card is retired with the mode system) */
.csb-breakmod .csb-bm-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.csb-breakmod .csb-bm-linetxt{font-weight:700;font-size:14.5px}
.csb-breakmod .csb-bm-linetxt em{color:#8a6d1a;font-style:normal;font-weight:800}
body.dark-mode .csb-breakmod .csb-bm-linetxt em{color:var(--gold)}
.csb-breakmod .csb-bm-line .csb-bm-cta{margin-left:auto}

/* v8 single-column: rail retired; 1440 frame, matching the homepage */
.csb-v4{display:block !important;max-width:1440px;margin:0 auto;grid-template-columns:none !important}
.csb-v4main{width:100%;max-width:none}
.csb-v4rail{display:none !important}
.csb-cue-sealed{display:none !important}   /* mobile sealed cue retired */
/* C5 — a box or card should be recognizable without squinting:
   listing photo areas go to 116px, contain-fit on the dark inset. */
.csb-auction .csb-au-thumb,.csb-sealed .csb-sd-thumb,.csb-strip .csb-fs-thumb{height:116px}
.csb-auction .csb-au-thumb img,.csb-sealed .csb-sd-thumb img,.csb-strip .csb-fs-thumb img{object-fit:contain;max-height:100%;max-width:100%}
/*tok:csb-ms-1col-2*/





















/* =========================================================================
 * MULTIMASTER SECTIONS — jump bar, CTA, panels (Multimaster_Mockup (2),
 * geometry verbatim, house light/dark). Union-picker format buttons are in
 * ladder_widget.css additions below the fold of this file's siblings.
 * ========================================================================= */

.csb-cta{
  --teal:#15ccad;--ink:#111;--mut:#666;--tint:#e6faf5;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  background:var(--tint);border:1px solid var(--teal);border-radius:16px;
  padding:18px 22px;margin-bottom:22px;color:var(--ink);width:100%;max-width:none;
}
body.dark-mode .csb-cta{--ink:#eef2f3;--mut:#98a4ab;--tint:#0e2a22}
.csb-cta .big{font-size:20px;font-weight:700}
.csb-cta .sub{color:var(--mut);font-size:14px}
.csb-cta .csb-cta-go{margin-left:auto;background:var(--teal);color:#fff;border:none;border-radius:22px;padding:12px 20px;font-size:15px;font-weight:700;cursor:pointer}
body.dark-mode .csb-cta .csb-cta-go{color:#06231d}

.csb-mm-panel{
  --teal:#15ccad;--ink:#111;--line:#ddd;--shade:#f7f7f7;
  color:var(--ink);border:1px solid var(--teal);border-radius:16px;
  padding:20px 22px;margin-bottom:22px;width:100%;max-width:none;
  min-width:0;
}
#ckl,#pick,#ladder,#odds{min-width:0;max-width:100%}
body.dark-mode .csb-mm-panel{--ink:#eef2f3;--line:#272d34;--shade:#181c21}
.csb-mm-panel h2.t{margin:0 0 14px;font-size:22px;font-weight:600}
.csb-mm-panel h2.t em{color:var(--teal);font-style:normal}

/* ==== cmp table responsive containment (scoped to the shell panel so the
 * site's existing .cmp rules are untouched elsewhere) ==== */
.csb-mm-panel .cmp-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  width:0;min-width:100%;
}
.csb-mm-panel .cmp{width:100%;border-collapse:collapse}
.csb-mm-panel .cmp th,.csb-mm-panel .cmp td{min-width:104px}
/* Pick your box, mockup: a sub-line under the heading, and the column
   header is the link to that box's page */
.csb-mm-panel .pyb-sub{color:var(--mut,#98a4ab);font-size:12.5px;margin:-4px 0 12px}
.csb-mm-panel .cmp thead th a{color:inherit;text-decoration:none}
.csb-mm-panel .cmp thead th a:hover{color:var(--teal,#15ccad)}
.csb-mm-panel .cmp td.ex a{color:var(--teal,#15ccad)}
/* sticky row labels: stay put while the columns scroll under them */
.csb-mm-panel .cmp td:first-child,.csb-mm-panel .cmp th:first-child{
  position:sticky;left:0;z-index:2;
  min-width:130px;max-width:170px;text-align:left;
  background:var(--shade,#f7f7f7);
  box-shadow:2px 0 0 var(--line,#ddd);
}
body.dark-mode .csb-mm-panel .cmp td:first-child,
body.dark-mode .csb-mm-panel .cmp th:first-child{background:var(--shade,#121416)}
.csb-mm-panel .cmp .ex{color:var(--teal,#15ccad);font-size:13px}
.csb-mm-panel .cmp .ex a{color:var(--teal,#15ccad)}
@media(max-width:640px){
  .csb-mm-panel .cmp{font-size:13px}
  .csb-mm-panel .cmp th,.csb-mm-panel .cmp td{padding:8px 6px;min-width:92px}
  .csb-mm-panel .cmp td:first-child,.csb-mm-panel .cmp th:first-child{min-width:110px}
}

/* Tier-LINK sealed block (spec v2 placement 2, tail products): replaces
 * the API tile strip outside the release window — same slot, zero API.
 * Self-contained (does not reuse theme .ebay-ad-block styles). */
.csb-sealed-link{--teal:#15ccad;--mut:#666;border:1px solid var(--teal);border-radius:16px;padding:16px 20px;margin-bottom:22px;width:100%;max-width:none;min-width:0}
/* the link-only floor of the sealed eBay module — same eBay blue as the
   tile version above, for the same reason (redesign/README.md) */
body.dark-mode .csb-sealed-link{--teal:#7fb2ff;--mut:#8fa3bf}
.csb-sealed-link a{color:var(--teal);font-weight:700;font-size:15px;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.csb-sealed-link .csb-sl-disc{color:var(--mut);font-size:11.5px;margin-top:8px}

/* OWN BREAK MODULE — color-hierarchy spec: the ONLY heavy gold on the
 * page. 1.5px gold border, gold-tinted gradient, faint outer glow;
 * filled gold badge pill + filled gold CTA; gold-tinted slot chips;
 * third row ("N more breaks — see all") is its own line. */
.csb-breakmod{--gold:#fac83d;--goldline:#8a6d1a;--ink:#111;--mut:#666;
 border:1.5px solid var(--gold);border-radius:12px;
 background:linear-gradient(180deg,#fdf6df,#fbf3d8);
 box-shadow:0 0 0 4px rgba(250,200,61,.10);
 padding:14px 16px;margin-bottom:22px;color:var(--ink);width:100%;max-width:none;min-width:0}
body.dark-mode .csb-breakmod{--ink:#eef2f3;--mut:#98a4ab;
 background:linear-gradient(180deg,#221a08,#14110a);
 box-shadow:0 0 0 4px rgba(250,200,61,.06)}
.csb-breakmod .csb-bm-live{background:var(--gold);color:#1f1600;border:none;border-radius:99px;font-size:10.5px;font-weight:800;padding:4px 11px;white-space:nowrap;letter-spacing:.03em}
.csb-breakmod .csb-bm-cta{margin-left:auto;background:var(--gold);color:#1f1600;font-weight:800;border-radius:9px;padding:9px 17px;font-size:13px;white-space:nowrap;text-decoration:none}
.csb-breakmod .csb-bm-more{margin-top:9px;font-size:12px;color:#7a6a2e}
body.dark-mode .csb-breakmod .csb-bm-more{color:#c9b97a}
.csb-breakmod .csb-bm-more a{color:#8a6d1a;text-decoration:underline;text-underline-offset:3px}
body.dark-mode .csb-breakmod .csb-bm-more a{color:var(--gold)}
@media(max-width:640px){.csb-breakmod{padding:12px 14px}.csb-breakmod .csb-bm-cta{margin-left:0;flex:1 1 100%;text-align:center}}

/* sealed live-listings header meta + see-all link (API mode of the strip) */
.csb-sealed-live .csb-sl-meta{color:#666;font-size:11.5px;font-weight:400;margin-left:8px}
body.dark-mode .csb-sealed-live .csb-sl-meta{color:#aaa}
.csb-sealed-live .csb-seeall{color:#15ccad;font-size:12.5px;margin-top:10px;display:inline-block;text-decoration:underline;text-underline-offset:3px}

/* STREET PRICE (spec v2 5b): master one-liner above the pyramid; parent
 * per-format chips under the cmp table. House light/dark; fail-closed
 * variant carries no number, only the tracked link. */
.csb-street{--teal:#15ccad;--ink:#111;--mut:#666;--tint:#e6faf5;--line:#ddd;--paper:#fff;
 display:flex;align-items:center;gap:10px;flex-wrap:wrap;
 border:1px solid var(--teal);background:var(--tint);border-radius:10px;
 padding:11px 16px;margin:0 0 16px;color:var(--ink);width:100%;max-width:none;min-width:0}
body.dark-mode .csb-street{--ink:#eef2f3;--mut:#98a4ab;--tint:#0e2a22;--line:#272d34;--paper:#111418}
.csb-street .csb-st-price{color:var(--teal);font-weight:800;font-size:17px}
.csb-street .csb-st-sub{color:var(--mut);font-size:12.5px}
.csb-street .csb-st-sub small{font-size:11px}
.csb-street .csb-st-link{margin-left:auto;color:var(--teal);font-size:12.5px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.csb-street-multi{margin-top:12px}
.csb-street-multi .csb-st-sub{flex:0 0 auto}
.csb-street-multi .csb-st-chip{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:7px 12px;font-size:12.5px}
.csb-street-multi .csb-st-chip .csb-st-price{font-size:14px}
.csb-street-multi .csb-st-link{margin-left:0}
@media(max-width:640px){.csb-street{padding:10px 12px}.csb-street .csb-st-link{margin-left:0;flex:1 1 100%}}

/* AUCTION STRIP (spec v2 placement 6): content feature above the
 * checklist. House light/dark; horizontal card grid, 2-up on mobile. */
.csb-auction{--teal:#15ccad;--ink:#111;--mut:#666;--line:#ddd;--shade:#f7f7f7;--paper:#fff;
 border:1px solid var(--teal);border-radius:16px;padding:18px 20px;margin-bottom:22px;
 color:var(--ink);width:100%;max-width:none;min-width:0}
body.dark-mode .csb-auction{--ink:#eef2f3;--mut:#98a4ab;--line:#272d34;--shade:#181c21;--paper:#111418}
.csb-auction .csb-au-hd{font-size:16px;font-weight:700;margin-bottom:12px}
.csb-auction .csb-au-meta{color:var(--mut);font-size:11.5px;font-weight:400;margin-left:8px}
.csb-auction .csb-au-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.csb-auction .csb-au-card{display:block;background:var(--shade);border:1px solid var(--line);border-radius:10px;padding:9px;text-decoration:none;color:var(--ink)}
.csb-auction .csb-au-card:hover{border-color:var(--teal)}
.csb-auction .csb-au-thumb{display:flex;align-items:center;justify-content:center;background:var(--paper);border-radius:7px;height:110px;margin-bottom:8px;overflow:hidden}
.csb-auction .csb-au-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.csb-auction .csb-au-t{display:block;font-size:12px;line-height:1.3;min-height:31px}
.csb-auction .csb-au-bid{display:block;color:var(--teal);font-weight:800;font-size:14px;margin-top:5px}
.csb-auction .csb-au-bid small{color:var(--mut);font-weight:400;margin-left:5px}
.csb-auction .csb-au-end{display:block;color:var(--mut);font-size:10.5px;margin-top:2px}
.csb-auction .csb-seeall{color:var(--teal);font-size:12.5px;margin-top:12px;display:inline-block;text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.csb-auction .csb-au-cards{grid-template-columns:1fr 1fr}.csb-auction{padding:14px}}

/* ==== GOLD = MONEY (color-hierarchy spec, supersedes the 2026-09-09
 * gold accents): gold lives ONLY on the break module + "$ examples"
 * buttons, so the break module owns the page's money color. eBay
 * surfaces sit on neutral panel lines. ==== */
.csb-street{border-color:var(--line,#272d34)}
.csb-auction{border-color:var(--line,#272d34)}

/* SEALED MODULE v2 (product-page-top-mockup .sealed/.cards geometry, house
 * light/dark, gold ad-accent border). Replaces the grandfathered
 * ebay-item-contain markup — .csb-sealed-live rules above are retired. */
.csb-sealed{--teal:#15ccad;--ink:#111;--mut:#666;--line:#ddd;--shade:#f7f7f7;--paper:#fff;
 border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:22px;
 color:var(--ink);width:100%;max-width:none;min-width:0}
/* the sealed strip is an eBay ad, so it takes the design system's eBay
   colors whole (redesign/README.md): panel #141b26, tile #1b2433, line
   #2a3a52, link #7fb2ff, and the real eBay mark top left. --teal is
   REDEFINED to the eBay blue rather than every rule being rewritten —
   teal is the site's color and may not appear inside an eBay module, so
   any var(--teal) in here is by definition meant to be the blue. */
body.dark-mode .csb-sealed{--teal:#7fb2ff;--ink:#dbe5f5;--mut:#8fa3bf;--line:#2a3a52;--shade:#1b2433;--paper:#121a26;background:#141b26}
.csb-sealed h4 .eblogo{height:18px;width:auto;display:inline-block;margin-right:9px;vertical-align:-3px}
/* beats Storefront's .hentry .entry-content a underline inside the tiles */
.csb-sealed .csb-sd-cards .csb-sd-card{text-decoration:none}
.csb-sealed .csb-sd-disc{color:var(--mut);font-size:11px;border-top:1px solid var(--line);padding-top:8px;margin-top:12px}
.csb-sealed h4{margin:0 0 2px;font-size:15px}
.csb-sealed .csb-sd-sub{color:var(--mut);font-size:12px;margin-bottom:12px}
.csb-sealed .csb-sd-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.csb-sealed .csb-sd-card{display:block;background:var(--shade);border:1px solid var(--line);border-radius:10px;padding:9px;text-decoration:none;color:var(--ink)}
.csb-sealed .csb-sd-card:hover{border-color:var(--teal)}
.csb-sealed .csb-sd-thumb{display:flex;align-items:center;justify-content:center;background:var(--paper);border-radius:7px;height:78px;margin-bottom:8px;overflow:hidden}
.csb-sealed .csb-sd-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.csb-sealed .csb-sd-t{display:block;font-size:12px;min-height:32px;line-height:1.3}
.csb-sealed .csb-sd-p{display:block;color:var(--ink);font-weight:800;font-size:14px;margin-top:4px}
.csb-sealed .csb-sd-m{display:block;color:var(--mut);font-size:10.5px}
.csb-sealed .csb-seeall{color:var(--teal);font-size:12.5px;margin-top:12px;display:inline-block;text-decoration:underline;text-underline-offset:3px}
.csb-sealed .csb-sd-disc{color:var(--mut);font-size:11.5px;border-top:1px solid var(--line);padding-top:8px;margin-top:12px}
@media(max-width:1023px){.csb-sealed .csb-sd-cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.csb-sealed .csb-sd-cards{grid-template-columns:1fr 1fr}.csb-sealed{padding:14px}}

/* PAGE SURFACE (color-hierarchy spec): lift the page off pure black.
 * Site-wide by necessity (body is theme-owned) — delete this one rule if
 * the theme should keep its own background. */
body.dark-mode{background:#0b0d10}

/* FILTER STRIP (ebay-modules-spec-v3, state A) — replaces the .csb-auction
 * rules above (kept harmless for rollout). Five cards desktop; mobile =
 * open horizontal swipe row. Link-only variant is the universal floor. */
.csb-strip{--teal:#15ccad;--ink:#111;--mut:#666;--line:#ddd;--shade:#f7f7f7;--paper:#fff;
 border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:18px;
 color:var(--ink);width:100%;max-width:none;min-width:0}
/* the bid-on strip is an eBay ad: same treatment as the sealed strip
   above, including the --teal redefinition */
body.dark-mode .csb-strip{--teal:#7fb2ff;--ink:#dbe5f5;--mut:#8fa3bf;--line:#2a3a52;--shade:#1b2433;--paper:#121a26;background:#141b26}
.csb-strip .csb-fs-hd .eblogo{height:18px;width:auto;display:inline-block;margin-right:9px;vertical-align:-3px}
.csb-strip .csb-fs-cards .csb-fs-card{text-decoration:none}
.csb-strip .csb-fs-disc{color:var(--mut);font-size:11px;border-top:1px solid var(--line);padding-top:8px;margin-top:12px}
.csb-strip .csb-fs-hd{font-size:14.5px;font-weight:700}
.csb-strip .csb-fs-meta{color:var(--mut);font-size:11.5px;font-weight:400;margin-left:8px}
.csb-strip .csb-fs-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}
.csb-strip .csb-fs-card{display:block;background:var(--shade);border:1px solid var(--line);border-radius:9px;padding:8px;text-decoration:none;color:var(--ink)}
.csb-strip .csb-fs-card:hover{border-color:var(--teal)}
.csb-strip .csb-fs-thumb{display:flex;align-items:center;justify-content:center;background:var(--paper);border-radius:6px;height:116px;margin-bottom:7px;overflow:hidden}
.csb-strip .csb-fs-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.csb-strip .csb-fs-t{display:block;font-size:11.5px;line-height:1.3;min-height:30px}
.csb-strip .csb-fs-p{display:block;color:var(--ink);font-weight:700;font-size:13px;margin-top:4px}
.csb-strip .csb-fs-m{display:block;color:var(--mut);font-size:10.5px}
.csb-strip .csb-fs-go{color:var(--teal);font-size:12px;margin-top:10px;display:inline-block;text-decoration:underline;text-underline-offset:3px}
/* link-only floor: one row, heading + exit */
.csb-strip-link{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-color:var(--teal)}
.csb-strip-link .csb-fs-go{margin:0 0 0 auto;white-space:nowrap;font-weight:700}
@media(max-width:760px){
 .csb-strip .csb-fs-cards{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:8px;width:0;min-width:100%;padding-bottom:4px}
 .csb-strip .csb-fs-card{flex:0 0 150px}
 .csb-strip{padding:12px}
}

/* filter strip: path sub-line ("Showing Dodgers → Autographs") */
.csb-strip .csb-fs-sub{color:var(--mut);font-size:12px;margin-top:2px}
.csb-strip .csb-fs-sub b{color:var(--ink);font-weight:700}


/* ==== SINGLE SEARCH BAND + PROMO CARD (S/A specs) ==== */
.csb-searchband{--teal:#15ccad;--ink:#111;--mut:#666;--line:#ddd;--paper:#fff;--alt:#f0f2f4;--shade:#f7f7f7;--tint:#e9f8f4;
 border:1px solid var(--teal);border-radius:14px;padding:16px 18px;margin-bottom:18px;
 background:linear-gradient(135deg,var(--tint),transparent 55%);color:var(--ink);width:100%;max-width:none;min-width:0}
body.dark-mode .csb-searchband{--ink:#eef2f3;--mut:#98a4ab;--line:#272d34;--paper:#111418;--alt:#1f242a;--shade:#181c21;--tint:#0e2a22}
.csb-searchband .big{font-size:19px;font-weight:800;margin-bottom:2px}
.csb-searchband .sub{color:var(--mut);font-size:12.5px;margin-bottom:12px}
.csb-searchband .csb-sb-slot .find{margin:0}


/* page title on checklist pages, mobile (FIX doc §3): ~28px/800, white
 * in dark mode, clamped to two lines. Scoped by the csb-ckl-page body
 * class (added only on /full-checklist/ and /checklist-central/). */
@media(max-width:760px){
 body.csb-ckl-page h1.entry-title{font-size:28px;font-weight:800;line-height:1.15;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 body.csb-ckl-page.dark-mode h1.entry-title{color:#eef2f3}
}

/* ==== FIX doc §6: sealed module cards ==== */
.csb-sd-thumb{background:#181c21;padding:8px;border-radius:6px;border:1px solid #272d34}
.csb-sd-thumb img{object-fit:contain;width:100%;height:100%;background:transparent}
body:not(.dark-mode) .csb-sd-thumb{background:#f0f2f4;border-color:#d9dee3}
.csb-sd-card .csb-sd-t,.csb-sd-card:hover .csb-sd-t{text-decoration:none}
.csb-sd-p{color:var(--ink,#eef2f3)}

/* ==== V4 SHELL (todd-packet-2026-09-19): two-column layout + cue cards.
 * Replaces the retired Simple/Advanced blocks that lived here (mode
 * toggle, fail-safe rules, advonly doubling, promo card, cache-compat
 * aliases) — v4 has no mode system. ==== */

/* layout: main + 300px sticky rail; one column under 960px (the shared
 * runtime moves rail modules into their mobile slots) */
.csb-v4{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start;width:100%;max-width:none}
.csb-v4main{min-width:0;max-width:100%}
.csb-v4rail{position:sticky;top:12px;align-self:start;min-width:0}
.csb-v4rail .csb-sealed .csb-sd-cards,.csb-v4rail .csb-strip .csb-fs-cards,.csb-v4rail .csb-auction .csb-au-cards{grid-template-columns:1fr 1fr}
.csb-v4rail .csb-au-thumb{height:74px}
.csb-v4rail .csb-sealed,.csb-v4rail .csb-strip,.csb-v4rail .csb-auction,.csb-v4rail .csb-sealed-link,.csb-v4rail .csb-mm-panel{padding:14px;margin-bottom:14px}
@media(max-width:959px){.csb-v4{grid-template-columns:1fr}.csb-v4rail{position:static;top:auto;bottom:auto}}

/* cue card (v4 §Cues): H2 + one-line summary always visible; the body is
 * display:none, NEVER removed — everything stays in the DOM. House
 * light/dark via the same var pattern as the sibling panels. */
.csb-cue{--teal:#15ccad;--ink:#111;--mut:#666;--line:#ddd;--amber:#b97f22;--s1:#fff;
 border:1px solid var(--line);border-radius:12px;background:var(--s1);
 padding:13px 16px;margin-bottom:14px;color:var(--ink);width:100%;max-width:none;min-width:0}
body.dark-mode .csb-cue{--ink:#eef2f3;--mut:#98a4ab;--line:#272d34;--amber:#ffb454;--s1:#111418}
.csb-cue .csb-cue-hd{display:flex;align-items:center;gap:10px}
.csb-cue .csb-cue-hd h2{margin:0;font-size:16.5px;font-weight:800;color:var(--ink)}
.csb-cue .csb-cue-hd h2 b{color:var(--ink)}
.csb-cue .csb-cue-open{margin-left:auto;background:none;border:none;padding:0;cursor:pointer;
 color:var(--teal);font-size:12.5px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.csb-cue .csb-cue-line{color:var(--mut);font-size:12.5px;margin-top:5px;line-height:1.5}
.csb-cue .csb-cue-line b{color:var(--ink)}
.csb-cue .csb-cue-line .lot{color:var(--amber);font-weight:700}
.csb-cue .csb-cue-line a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.csb-cue .csb-cue-gauto{margin-top:9px}
.csb-cue .csb-cue-gauto:empty{display:none}

/* hoisted guaranteed-auto block keeps infographic styling via its .ig
 * wrapper; this modifier strips the .ig frame (same as .csb-chipstrip) */
.ig.csb-gauto-ig{border:none;border-radius:0;padding:0;margin:0;display:block;width:100%;max-width:none}
/* div-repair shim: prepended openers that absorb stray closers from
 * unbalanced stored HTML are layout-transparent */
.csb-igfix{display:contents}
.csb-cue .csb-cue-bd{display:none;border-top:1px dashed var(--line);margin-top:10px;padding-top:10px}
.csb-cue.open .csb-cue-bd{display:block}
/* dots strip in the parallels cue line */
.csb-cue .pdots{display:inline-flex;gap:3px;margin-right:8px;vertical-align:middle}
.csb-cue .pdots .pd{width:6px;height:6px;border-radius:50%;display:inline-block;flex:0 0 6px}
/* about/description bodies reuse the old panel typography without the
 * .csb-about wrapper */
.csb-cue .lead{font-size:15px}
.csb-cue ul{margin:10px 0 10px 20px}
.csb-cue li{margin-bottom:8px}
.csb-cue .csb-about-disc{color:var(--mut);font-size:12.5px;border-top:1px solid var(--line);padding-top:10px;margin-top:14px}
.csb-cue .csb-desc-body img{max-width:100%;height:auto}
.csb-cue .csb-desc-body p{margin:0 0 12px}
.csb-cue .csb-desc-body :last-child{margin-bottom:0}
/* mobile-only sealed cue: hidden until the runtime confirms listing
 * cards (.has); never shows on desktop (the module lives in the rail) */
.csb-cue-sealed{display:none}
@media(max-width:959px){.csb-cue-sealed.has{display:block}}
/* eBay modules keep their own frames inside cue bodies/slots */
.csb-cue .csb-sealed{border:none;padding:0;margin:0}

/* v4 break module: the ONE LINE is the module (the old .csb-bm-full
 * Advanced card is retired with the mode system) */
.csb-breakmod .csb-bm-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.csb-breakmod .csb-bm-linetxt{font-weight:700;font-size:14.5px}
.csb-breakmod .csb-bm-linetxt em{color:#8a6d1a;font-style:normal;font-weight:800}
body.dark-mode .csb-breakmod .csb-bm-linetxt em{color:var(--gold)}
.csb-breakmod .csb-bm-line .csb-bm-cta{margin-left:auto}

/* per-format "What to expect in each box" cards (multimaster odds cue) */
.csb-xfmt-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.csb-xfmt-grid{grid-template-columns:1fr}}
.csb-xfmt{border:1px solid var(--line,#272d34);border-radius:10px;padding:12px 14px;min-width:0}
.csb-xfmt .csb-xf-hd{font-size:14px;font-weight:800;margin-bottom:8px}
.csb-xfmt .csb-xf-chips{border:none;border-radius:0;padding:0;margin:0 0 8px;width:100%;max-width:none}
.csb-xfmt .csb-xf-go{color:var(--teal,#15ccad);font-size:12.5px;text-decoration:underline;text-underline-offset:3px}

/* mm pipeline trio (v4 rows 1/10/11) */
.csb-v4main .csb-updline{color:var(--mut,#98a4ab);font-size:12.5px;margin:0 0 6px}
.csb-v4main .csb-lede{font-size:15px;line-height:1.65;margin:0 0 18px;max-width:none}
.csb-qf{margin:0}
.csb-qf dt{font-weight:700;margin:12px 0 3px}
.csb-qf dt:first-child{margin-top:0}
.csb-qf dd{margin:0;color:var(--mut,#98a4ab)}
.csb-qf-foot{margin:14px 0 0;font-size:12.5px;color:var(--mut,#98a4ab)}
.csb-rel{margin:22px 0 6px}
.csb-rel h2.t{font-size:16px;margin:0 0 10px}
.csb-rel-row{display:flex;gap:8px;flex-wrap:wrap}
.csb-rel-chip{display:inline-block;border:1px solid var(--line,#272d34);border-radius:99px;padding:7px 14px;font-size:12.5px;color:inherit;text-decoration:none}
.csb-rel-chip:hover{border-color:var(--teal,#15ccad);color:var(--teal,#15ccad)}
/* v8 single-column: rail retired; 1440 frame, matching the homepage */
.csb-v4{display:block !important;max-width:1440px;margin:0 auto;grid-template-columns:none !important}
.csb-v4main{width:100%;max-width:none}
.csb-v4rail{display:none !important}
.csb-cue-sealed{display:none !important}   /* mobile sealed cue retired */
/* v8 Pick-your-box (pick-your-box-responsive-mockup) */
/* FIX-D3: this #pick rule is what actually sizes the product-page Pick your
   box label column — an ID selector outranks the 260px .csb-mm-panel rule
   further down, which is why that one never took effect (live: 190px).
   Widened here so "Non-numbered parallels / box" stops running under the
   values. */
#pick .cmp-scroll table td:first-child{width:260px;min-width:260px;font-weight:600;white-space:normal}
#pick .cmp-scroll table td{white-space:nowrap;padding:8px 12px}
#pick .cmp-street td{border-top:1px solid var(--line,#272d34)}
#pick .cmp-street .lbl .sub{display:block;font-size:10.5px;color:var(--mut,#98a4ab);font-weight:400}
#pick .cmp-street b{margin-right:6px}
#pick .cmp-street a{white-space:nowrap}
#pick .pyb-cards{display:none}
#pick .pyb-cards .fc{border:1px solid var(--line,#272d34);border-radius:12px;background:var(--s1,#111418);padding:12px 14px;margin:0 0 10px}
#pick .pyb-cards .hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
#pick .pyb-cards .hd b{font-size:15px}
#pick .pyb-cards .pr{font-weight:800}
#pick .pyb-cards .pr small{color:var(--mut,#98a4ab);font-weight:400;margin-left:5px}
#pick .pyb-cards .grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
#pick .pyb-cards .grid div{display:flex;justify-content:space-between;gap:8px;font-size:12.5px}
#pick .pyb-cards .grid span{color:var(--mut,#98a4ab)}
#pick .pyb-cards .ft{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;font-size:12.5px}
#pick .pyb-cards .ft .go{font-weight:700}
@media(max-width:700px){
 #pick .cmp-scroll{display:none}
 #pick .pyb-cards{display:block}
}
/* FIX-product C8: street row must never clip — nowrap the price, wider
   cell, overflow visible (\$479.95 was reading as 9.95) */
.csb-mm-panel .cmp tr.cmp-street td{white-space:nowrap;min-width:150px;overflow:visible}
.csb-mm-panel .cmp tr.cmp-street td b{white-space:nowrap;display:inline-block}
/* C9: format-exclusive tags + filter chip on the parallel table */
.csb-mm-panel .only{display:inline-block;margin-left:8px;padding:1px 7px;border:1px dashed var(--teal,#15ccad);border-radius:99px;color:var(--teal,#15ccad);font-size:10px;letter-spacing:.06em;vertical-align:1px}
.csb-mm-panel .chip.xonly{display:inline-block;border-radius:99px;padding:3px 10px;font-size:11px;border:1px solid var(--line,#272d34);background:var(--s1,#111418);color:#c8d2d7;cursor:pointer;user-select:none;margin:0 0 8px}
.csb-mm-panel .chip.xonly.on{border-color:var(--teal,#15ccad);color:var(--teal,#15ccad)}
/* FIX-product 8b + A3 street + the original C8 — ONE geometry bug:
   .cmp was capped at width:100%, nowrap cells could not shrink, and the
   opaque sticky label column painted OVER the left edge of the value
   cells ($479.95 read as 9.95; $14,999.00 as ,999.00) while long labels
   ran under the Hobby column. The table now grows to its content and
   scrolls; the label column is a real 260px; values stay nowrap. */
.csb-mm-panel .cmp{width:max-content;min-width:100%}
.csb-mm-panel .cmp td:first-child,.csb-mm-panel .cmp th:first-child{width:260px;min-width:260px;white-space:normal}
.csb-mm-panel .cmp td:not(:first-child),.csb-mm-panel .cmp th:not(:first-child){white-space:nowrap;overflow:visible}
@media(max-width:700px){
 .csb-mm-panel .cmp td:first-child,.csb-mm-panel .cmp th:first-child{width:170px;min-width:170px}
}
/* C5 — a box or card should be recognizable without squinting:
   listing photo areas go to 116px, contain-fit on the dark inset. */
.csb-auction .csb-au-thumb,.csb-sealed .csb-sd-thumb,.csb-strip .csb-fs-thumb{height:116px}
.csb-auction .csb-au-thumb img,.csb-sealed .csb-sd-thumb img,.csb-strip .csb-fs-thumb img{object-fit:contain;max-height:100%;max-width:100%}
/*tok:csb-mm-pyb-6*/




















/* ==== THREE-VIEWS SPINE (master v4 §Checklist, round 1a) ====
 * View control + scope bar + chips-row + x + team/player group headers.
 * Companion JS in csb_ajax_checklist.php (same round). Colors per the
 * color-hierarchy spec: teal = interactive, no new gold. Deploy token:
 * csb-three-views-spine */
/* VIEW BUTTONS (redesign/05-checklist-pages.md) — three cards with an icon,
   a 20px label and a hint, under a "HOW DO YOU WANT TO SEE IT?" eyebrow.
   They were a segmented strip of 13px labels, which on a phone was three
   words a visitor had to read as a group to understand was a choice at all.

   FLEX, not the mockup's grid-template-columns:repeat(3,1fr): the team
   button is REMOVED from the DOM for products with no teams (NOTEAM in the
   panel script), and a three-column grid would leave a hole where it was.
   flex:1 1 0 splits whatever buttons are there.

   Resting border is lighter than --line on purpose — at this size the
   unselected buttons need a visible edge, and --line (#272d34) disappears
   against --shade (#181c21). Carried as its own token so light mode keeps
   a light edge.

   The ACTIVE button is teal. The mockup's default palette tints it with the
   product color (--pcact), which needs the stored per-product hex that is
   not built yet — body.nowash in the mockup is this, and is what it calls
   "today's look". */
.ckl .vwe{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
 color:var(--teal);margin:0 0 8px}
.ckl .ckviews{--vwline:#c7ced4;display:flex;gap:10px;width:100%;border:0;border-radius:0;
 background:none;padding:0;margin:0 0 12px;overflow:visible}
body.dark-mode .ckl .ckviews{--vwline:#3a434c}
.ckl .ckviews button{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:12px;
 text-align:left;padding:14px 18px;min-height:72px;border:1.5px solid var(--vwline);
 border-radius:12px;background:var(--shade);color:var(--ink);font:inherit;cursor:pointer}
.ckl .ckviews button svg{width:28px;height:28px;flex:0 0 28px;stroke:currentColor;fill:none;
 stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.ckl .ckviews button .vt{min-width:0}
.ckl .ckviews button b{display:block;font-size:20px;font-weight:800;line-height:1.2}
.ckl .ckviews button small{display:block;font-size:13px;font-weight:500;color:var(--mut);margin-top:2px}
.ckl .ckviews button:hover{border-color:var(--teal)}
.ckl .ckviews button.on{background:var(--teal);border-color:var(--teal);color:#04241c;
 box-shadow:0 0 0 3px rgba(21,204,173,.18)}
.ckl .ckviews button.on small{color:#04241c}
/* phones: the three stay on ONE row — centred, hint dropped, 14.5px labels
   that never wrap (§7.9: no horizontal scrolling, buttons never wrap) */
@media(max-width:600px){
 .ckl .ckviews{gap:6px}
 .ckl .ckviews button{padding:10px 6px;gap:6px;justify-content:center;min-height:50px}
 .ckl .ckviews button b{font-size:14.5px;white-space:nowrap}
 .ckl .ckviews button small{display:none}
 .ckl .ckviews button svg{width:16px;height:16px;flex-basis:16px}
}
@media(max-width:360px){.ckl .ckviews button svg{display:none}}
/* input padding reclaim: the base section reserves 96px on the right
 * for the Search button this round removes; 40px is enough for the x.
 * (.find is already position:relative in the base section — no dupe.) */
.ckl .find input{padding-right:40px}
.ckl .ck_x{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--mut);cursor:pointer;font-size:14px;padding:4px 6px}
.ckl .ck_x:hover{color:var(--ink)}
/* FIX-search-loop: the header field and the band field are one search shown
   twice. Scoped => the value is the scope label, bold, with a teal border
   so it reads as "a filter is active here"; the x is "show everything" and
   the chain copies the link. Right padding leaves room for both icons. */
.find input.scoped{font-weight:700;border-color:var(--teal)}
.ckl .find input{border-color:var(--line,#ddd)}
.ckl .find input.scoped{border-color:var(--teal)}
.find input{padding-right:62px}
.ck_cl{position:absolute;right:34px;top:50%;transform:translateY(-50%);color:var(--mut);cursor:pointer;font-size:13px;padding:4px 6px}
.ck_cl:hover{color:var(--teal)}
.ckl .row.chipsrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ckl .ladall{margin-left:auto;color:var(--teal);font-size:12.5px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
/* SITE_SPEC_5 phase 1: the player CSV. Outlined like the signup module's
   button rather than solid — the one solid control in this panel is the
   search. Disabled is the resting state on most pageviews (no player picked
   yet), so it has to read as waiting rather than broken. Height pinned: it
   sits in a flex row above the fold on a checklist page. */
.ckl .ckdl{height:34px;box-sizing:border-box;padding:0 14px;border-radius:9px;
 border:1.5px solid var(--teal);background:none;color:var(--teal);
 font:inherit;font-size:12.5px;font-weight:800;line-height:1;cursor:pointer;white-space:nowrap}
.ckl .ckdl:hover:not([disabled]){background:var(--teal);color:#04241c}
.ckl .ckdl[disabled]{border-color:var(--line);color:var(--mut);cursor:default}
/* the CSV sits beside the PDF as the quieter second option */
.ckl .ckdl-2{margin-left:-4px;padding:0 11px;font-weight:700}
.ckl .ckl .ckl /* team / player group headers in the shared table */
.ckl tr.gh.vgh td{padding-top:18px;font-size:14.5px}
.ckl tr.gh.vgh img{width:20px;height:20px;object-fit:contain;vertical-align:-4px;margin-right:9px}
.ckl tr.gh.vgh small{color:var(--mut);font-weight:400;margin-left:9px}
/* row bits unique to By team / By player: type tag · set name · bold autos */
.ckl .ttag{display:inline-block;border:1px solid var(--line);background:var(--alt);color:var(--mut);border-radius:6px;padding:0 7px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-right:8px;vertical-align:1px}
.ckl .stn{color:var(--ink)}
.ckl tr.aur .stn,.ckl tr.aur .pl{font-weight:800}
/* pill wall belongs to By team pre-scope only; JS empties it elsewhere */
/* 1b additions: suggestion highlight, set type label, keyboard focus,
 * selected-row flash. Same token: csb-three-views-spine */
.ckl .cksugg .hl{color:var(--teal);font-weight:800}
.ckl .cksugg .stype{color:var(--mut);font-size:12px}
.ckl .cksugg>div.kbon{background:var(--alt)}
.ckl tr.hlrow>td{background:var(--tint)}
.ckl .rung.hl{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}


























/* ========================================================================
   CHECKLIST CENTRAL v2 (Phase A) — checklist-central-redesign-v2-mockup
   Scoped under .csb-cc. Colors per checklist-color-hierarchy-spec: lifted
   surfaces, teal only on the search box + active chips, NO GOLD here.
   ======================================================================== */
.csb-cc{--ccbg:#0b0d10;--ccs1:#111418;--ccs2:#181c21;--ccs3:#1f242a;--ccline:#272d34;
 --ccink:#eef2f3;--ccmut:#98a4ab;--ccdim:#7d8a92;--ccteal:#15ccad;
 color:var(--ccink);font-size:14px;line-height:1.5;max-width:1440px;margin:0 auto}
.csb-cc a{color:inherit;text-decoration:none}

.csb-cc .hero h1,.csb-cc .hero h2{font-size:40px;margin:0;letter-spacing:-.01em;color:var(--ccink,#eef2f3);line-height:1.15}
.csb-cc .hero h1 span,.csb-cc .hero h2 span{color:var(--ccteal,#15ccad) !important}
.csb-cc .hero .sub{color:var(--ccmut);font-size:15px;margin:6px 0 20px}
/* FIX-sugstack: .bigsearch owns the dropdown's containing block, so it needs
 * to out-stack the panels that follow it inside .csb-cc too. */
.csb-cc .bigsearch,.csb-topsearch .bigsearch{position:relative;z-index:60;display:flex;align-items:center;gap:12px;border:1.5px solid var(--ccteal);background:var(--ccs1);border-radius:16px;padding:14px 20px}
.csb-cc .bigsearch svg,.csb-topsearch .bigsearch svg{flex:0 0 22px;width:22px;height:22px;color:var(--ccteal)}
.csb-cc .bigsearch input,.csb-topsearch .bigsearch input{flex:1;background:none;border:0;outline:0;color:var(--ccink);font-size:15.5px;min-width:0}
.csb-cc .bigsearch input::placeholder,.csb-topsearch .bigsearch input::placeholder{color:var(--ccmut)}
.csb-cc .bigsearch .btn,.csb-topsearch .bigsearch .btn{margin-left:auto;background:var(--ccteal);color:#04241c;font-weight:800;border-radius:99px;padding:10px 22px;font-size:14px;cursor:pointer;white-space:nowrap}
.csb-cc .searchhint{color:var(--ccdim);font-size:12px;margin:8px 4px 0}
.csb-cc .ccsug,.csb-topsearch .ccsug{display:none;position:absolute;left:-1.5px;right:-1.5px;top:calc(100% + 8px);z-index:60;background:var(--ccs2);border:1px solid var(--ccline);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.5);max-height:420px;overflow:auto;padding:6px}
.csb-cc .ccsug .cg,.csb-topsearch .ccsug .cg{color:var(--ccdim);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px 4px}
/* FIX-seeall: section header carrying its own "see all N sets" link */
.csb-cc .ccsug .cg.cgh,.csb-topsearch .ccsug .cg.cgh{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.csb-cc .ccsug .cgall,.csb-topsearch .ccsug .cgall{color:var(--ccteal);font-weight:700;letter-spacing:.04em;text-transform:none;font-size:11px;white-space:nowrap;cursor:pointer}
.csb-cc .ccsug .cgall:hover,.csb-topsearch .ccsug .cgall:hover{text-decoration:underline}
.csb-cc .ccsug .ci,.csb-topsearch .ccsug .ci{display:flex;align-items:baseline;gap:10px;justify-content:space-between;padding:8px 12px;border-radius:9px;font-size:13.5px;color:var(--ccink)}
.csb-cc .ccsug .ci b,.csb-topsearch .ccsug .ci b{font-weight:700}
.csb-cc .ccsug .ci span,.csb-topsearch .ccsug .ci span{color:var(--ccmut);font-size:11.5px;text-align:right;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csb-cc .ccsug .ci:hover,.csb-cc .ccsug .ci.on,.csb-topsearch .ccsug .ci:hover,.csb-topsearch .ccsug .ci.on{background:var(--ccs3)}
/* SPEC 10 v2 (Sam, 2026-10-14) — the dropdown's family rows.
   A product row is one FAMILY now, so its formats ride beside the meta line
   as chips (Hobby / Fat Pack / Value / +2). They are <i> spans, not links:
   the row is already an anchor and nesting one inside it is invalid, so the
   typeahead navigates them on mousedown instead. The meta span clips with
   an ellipsis, so the chips must not shrink out of it. <em> is the matched
   run of the name, marked by shi(). */
.csb-cc .ccsug .ci b em,.csb-topsearch .ccsug .ci b em{font-style:normal;color:var(--ccteal)}
.csb-cc .ccsug .ci span,.csb-topsearch .ccsug .ci span{display:flex;align-items:center;justify-content:flex-end;gap:5px}
.csb-cc .ccsug .cfm,.csb-topsearch .ccsug .cfm{flex:0 0 auto;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.02em;color:#c8d2d7;background:var(--ccs3);border:1px solid var(--ccline);border-radius:99px;padding:2px 8px;cursor:pointer;white-space:nowrap}
.csb-cc .ccsug .cfm:hover,.csb-topsearch .ccsug .cfm:hover{background:var(--ccteal);border-color:var(--ccteal);color:#04241c}
.csb-cc .ccsug .cfm.cfmx,.csb-topsearch .ccsug .cfm.cfmx{background:none;border-color:transparent;color:var(--ccdim);cursor:default;padding-left:2px}
.csb-cc .ccsug .cfm.cfmx:hover,.csb-topsearch .ccsug .cfm.cfmx:hover{background:none;border-color:transparent;color:var(--ccdim)}
@media (max-width:600px){.csb-cc .ccsug .cfm,.csb-topsearch .ccsug .cfm{display:none}}

.csb-cc .sports{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 18px}
.csb-cc .sp{display:flex;align-items:center;gap:8px;border:1px solid var(--ccline);background:var(--ccs1);border-radius:99px;padding:9px 16px;font-size:13.5px;font-weight:600;color:#c8d2d7;cursor:pointer}
.csb-cc .sp svg{width:19px;height:19px;color:var(--ccmut)}
.csb-cc .sp small{color:var(--ccmut);font-weight:500;font-size:12px}
.csb-cc .sp.on{background:var(--ccteal);border-color:var(--ccteal);color:#04241c}
.csb-cc .sp.on svg,.csb-cc .sp.on small{color:#04241c}

/* SPEC 04 — the release calendar's two tab rows, where every tab is a real
   link to a view page (/release-calendar/topps/, /baseball/ …) rather than
   a JS toggle. a.sp has to look exactly like span.sp, and beat Storefront's
   .entry-content a underline. */
.csb-cc a.sp{text-decoration:none}
.csb-cc a.sp:hover{border-color:var(--ccteal);color:var(--ccteal)}
.csb-cc a.sp:hover svg,.csb-cc a.sp:hover small{color:var(--ccteal)}
.csb-relcal .sports{margin:12px 0 0;align-items:center}
.csb-relcal .sports.brands{margin:8px 0 18px}
.csb-relcal .rowlbl{color:var(--ccmut);font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;min-width:46px}

/* the generated release-dates FAQ (3 questions + FAQPage schema) */
.csb-cc .ccfaq{margin:30px 0 6px;border-top:1px solid var(--ccline);padding-top:18px}
.csb-cc .ccfaq h2{margin:0 0 12px;font-size:20px;font-weight:800;color:var(--ccink)}
.csb-cc .ccfaq h2 span{color:var(--ccteal)}
.csb-cc .ccfaq .fq{border:1px solid var(--ccline);background:var(--ccs1);border-radius:11px;padding:12px 15px;margin-bottom:9px}
.csb-cc .ccfaq .fq h3{margin:0 0 4px;font-size:14.5px;font-weight:700;color:var(--ccink)}
.csb-cc .ccfaq .fq p{margin:0;color:var(--ccdim);font-size:13.5px}
.csb-cc .ccfaq .fq a{color:var(--ccteal);font-weight:700;text-decoration:none;white-space:nowrap}
.csb-cc .ccfaq .fq a:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:520px){.csb-relcal .rowlbl{min-width:0;width:100%}}

.csb-cc h2.rail{font-size:19px;margin:26px 0 4px;color:var(--ccink)}
.csb-cc h2.rail span{color:var(--ccteal)}
.csb-cc .railsub{color:var(--ccmut);font-size:12.5px;margin-bottom:14px}
/* week blocks: This week / Last week / Coming up headers */
.csb-cc .blockhd{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:30px 0 4px;padding-bottom:8px;border-bottom:1px solid var(--ccline)}
.csb-cc .blockhd h2{margin:0;font-size:22px;font-weight:800;color:var(--ccink)}
.csb-cc .blockhd h2 span{color:var(--ccteal)}
.csb-cc .blockhd .rng{color:var(--ccmut);font-size:13px}
.csb-cc .blockhd .cnt{margin-left:auto;color:var(--ccdim);font-size:12.5px}
.csb-cc .blockhd + .railsub{margin-top:8px}
.csb-cc .ccwk .grid{margin-top:14px}
.csb-cc .ccnothing{border:1px solid var(--ccline);border-radius:12px;background:var(--ccs1);padding:14px 16px;margin-top:22px;font-size:14px;color:var(--ccmut)}
.csb-cc .ccnothing b{color:var(--ccink)}
.csb-cc .ccnothing a{color:var(--ccteal)}

.csb-cc .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.csb-cc .wk{display:flex;align-items:center;gap:10px;margin:16px 0 8px;grid-column:1/-1}
.csb-cc .wk b{font-size:12px;letter-spacing:.08em;color:var(--ccmut)}
.csb-cc .wk .rule{flex:1;height:1px;background:var(--ccline)}

.csb-cc .pcard{border:1px solid var(--ccline);border-radius:13px;background:var(--ccs1);overflow:hidden;display:flex;flex-direction:column;cursor:pointer}
.csb-cc .pcard:hover{border-color:#3a434c}
.csb-cc .art{position:relative;aspect-ratio:4/3;background:radial-gradient(ellipse at 50% 60%,#232a31,#14181c 70%);display:flex;align-items:center;justify-content:center;overflow:hidden}
.csb-cc .art img{max-width:72%;max-height:78%;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,.5))}
.csb-cc .art .ph{width:44%;height:44%;color:#2e363d}
.csb-cc .art .ph svg{width:100%;height:100%}
.csb-cc .badges{position:absolute;top:8px;left:8px;display:flex;gap:5px;flex-wrap:wrap}
.csb-cc .bdg{font-size:10px;font-weight:800;border-radius:99px;padding:3px 8px;letter-spacing:.04em;background:rgba(17,20,24,.85);border:1px solid var(--ccline);color:#d5dde1;backdrop-filter:blur(4px)}
.csb-cc .bdg.ok{color:var(--ccink);border-color:#3a434c}
.csb-cc .bdg.ok::before{content:"\2713";color:var(--ccteal);margin-right:4px}
.csb-cc .bdg.no{color:var(--ccdim);border-color:var(--ccline)}
.csb-cc .art .bigdate{position:absolute;right:10px;bottom:8px;background:rgba(17,20,24,.85);border:1px solid var(--ccline);border-radius:8px;padding:4px 9px;font-size:12px;font-weight:800;color:var(--ccink)}
.csb-cc .body{padding:11px 13px 13px;display:flex;flex-direction:column;gap:5px}
.csb-cc .toprow{display:flex;align-items:center;gap:7px}
.csb-cc .sporttag{display:flex;align-items:center;gap:5px;color:var(--ccmut);font-size:10.5px;font-weight:700;letter-spacing:.06em}
.csb-cc .sporttag svg{width:13px;height:13px}
.csb-cc .name{font-size:14.5px;font-weight:800;line-height:1.3}
.csb-cc .name a{color:var(--ccink)}
.csb-cc .fmts{color:var(--ccdim);font-size:11.5px}
.csb-cc .fmts b{color:var(--ccmut);font-weight:600}
.csb-cc .ask{font-size:12px;color:var(--ccmut);margin-top:2px}
.csb-cc .ask b{color:var(--ccink);font-weight:800}
.csb-cc .ask a{color:var(--ccteal);text-decoration:underline;text-underline-offset:3px;margin-left:6px}

/* This week / Last week rows (homepage redesign): the released checklists
   are full-width rows — square thumb, title, one meta line, the badges,
   the eBay ask, and a full-width Checklist button. Coming up keeps .pcard. */
.csb-cc .wklbl{color:var(--ccteal);font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin:14px 0 8px}
.csb-cc .wklbl span{color:var(--ccteal);opacity:.72;font-weight:700;text-transform:none;letter-spacing:.06em}
.csb-cc .rows{display:flex;flex-direction:column;gap:10px}
/* narrow: art beside the text, badges and ask under it, button full width */
.csb-cc .ccrow{display:grid;grid-template-columns:120px minmax(0,1fr);grid-template-areas:"art body" "art badges" "art ask" "btn btn";align-items:center;column-gap:20px;row-gap:7px;border:1px solid var(--ccline);border-radius:13px;background:var(--ccs1);padding:12px 14px;cursor:pointer}
.csb-cc .ccrow:hover{border-color:#3a434c;background:var(--ccs2)}
.csb-cc .ccrow .rart{grid-area:art;align-self:center;width:120px;height:120px;border-radius:9px;background:radial-gradient(ellipse at 50% 60%,#232a31,#14181c 70%);display:flex;align-items:center;justify-content:center;overflow:hidden}
.csb-cc .ccrow .rart img{max-width:94%;max-height:94%;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}
.csb-cc .ccrow .rart .ph{width:56%;height:56%;color:#2e363d}
.csb-cc .ccrow .rart .ph svg{width:100%;height:100%}
.csb-cc .ccrow .rbody{grid-area:body;display:flex;flex-direction:column;gap:4px;min-width:0}
.csb-cc .ccrow .name{font-size:17px;font-weight:800;line-height:1.25}
.csb-cc .ccrow .name a{color:var(--ccink)}
.csb-cc .ccrow:hover .name a{color:var(--ccteal);text-decoration:underline;text-underline-offset:3px}
.csb-cc .ccrow .rmeta{color:var(--ccdim);font-size:12.5px}
.csb-cc .ccrow .rmeta .sp2{color:var(--ccteal);font-weight:800;letter-spacing:.04em}
.csb-cc .ccrow .badges{grid-area:badges;position:static;display:flex;gap:6px;flex-wrap:wrap}
.csb-cc .ccrow .ask{grid-area:ask;margin:0}
/* "view on eBay →" is an eBay link, and the design system reserves #7fb2ff
   for exactly those. Teal here made it look like one of our own links, and
   it is the one thing in the row that leaves the site. */
.csb-cc .ccrow .ask a{color:#7fb2ff;white-space:nowrap}
/* beats Storefront's .hentry .entry-content a underline */
.csb-cc .ccrow .name a,.csb-cc .ccrow .ckbtn{text-decoration:none}
.csb-cc .ccrow .ckbtn{grid-area:btn;margin-top:4px;text-align:center;border:1px solid var(--ccteal);border-radius:10px;padding:9px 12px;font-size:13.5px;font-weight:800;color:var(--ccteal)}
.csb-cc .ccrow:hover .ckbtn{background:var(--ccteal);color:#04241c}
/* desktop: one line — art, name + meta, then badges, ask and the button
   pinned to the right edge (homepage redesign mockup) */
@media(min-width:1024px){
 .csb-cc .ccrow{display:flex;align-items:center;gap:16px;padding:12px 16px}
 .csb-cc .ccrow .rbody{flex:1 1 auto}
 .csb-cc .ccrow .badges{flex:0 0 auto}
 .csb-cc .ccrow .ask{flex:0 0 auto;white-space:nowrap}
 .csb-cc .ccrow .ask a{margin-left:6px}
 .csb-cc .ccrow .ckbtn{flex:0 0 auto;min-width:122px;margin-top:0;padding:10px 18px}
}
/* ONE PHONE STEP AT 600px, 96px SQUARE (spec 01: "120px box art desktop /
   96px phone", and rule 7.9's floor is 96px in a row). The old 84px/64px
   ladder put 64px art on a 390px phone — under the floor, and small enough
   that the box was a smudge. The Checklist button goes with it: the whole
   row is already the link, so on a phone it was a second tap target for
   the same destination taking a full line. A "›" says the same thing in
   the space the mockup gives it. */
@media(max-width:600px){
 .csb-cc .ccrow{grid-template-columns:96px minmax(0,1fr);
  grid-template-areas:"art body" "art badges" "art ask";
  column-gap:12px;padding:11px 12px;position:relative}
 .csb-cc .ccrow .rart{width:96px;height:96px}
 .csb-cc .ccrow .name{font-size:15px}
 .csb-cc .ccrow .ckbtn{display:none}
 .csb-cc .ccrow::after{content:'\203A';position:absolute;right:12px;top:50%;
  transform:translateY(-50%);color:var(--ccteal);font-size:22px;font-weight:700;line-height:1}
 .csb-cc .ccrow .rbody,.csb-cc .ccrow .badges,.csb-cc .ccrow .ask{padding-right:18px}
}

/* SPEC 04 (release calendar + homepage order) ------------------------------
   "This week" is the whole Mon-Sun week now, so a row has to say whether it
   is out: .st is that word. Filled teal for "Out now" (a state the site is
   reporting), outlined for the Today / Tomorrow tags, which are a hint about
   a date rather than a status. Not yellow: yellow is reserved for buying and
   breaks, and neither of these is a purchase. */
.csb-cc .ccrow .rmeta .st{display:inline-block;border:1px solid var(--ccteal);border-radius:5px;padding:1px 6px;margin-right:5px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ccteal);vertical-align:1px}
.csb-cc .ccrow .rmeta .st.now{background:var(--ccteal);color:#04241c;border-color:var(--ccteal)}

/* Trending checklists — the 7-day most-viewed block at the top of the
   homepage. A compact list on purpose: it sits above "This week", and two
   blocks of big art rows in a row would push the week itself back under the
   fold, which is the whole problem this spec is fixing. */
.csb-cc .trend{border:1px solid var(--ccline);border-radius:12px;background:var(--ccs1);overflow:hidden;margin-top:10px}
.csb-cc .trow{display:grid;grid-template-columns:1fr 104px 118px 112px;gap:12px;align-items:center;padding:11px 14px;font-size:13px;color:var(--ccink);text-decoration:none;border-top:1px solid var(--ccline)}
.csb-cc .trow:first-child{border-top:0}
.csb-cc .trow:hover{background:var(--ccs2)}
.csb-cc .trow .n{font-weight:700;min-width:0}
.csb-cc .trow:hover .n{color:var(--ccteal)}
/* teal, like every other sport tag in Checklist Central — grey made the
   Trending block read as disabled next to the rows under it (mockup
   .trend .sp2, specs/redesign/pages/css/homepage.css:241) */
.csb-cc .trow .sp2{color:var(--ccteal);font-size:11px;font-weight:800;letter-spacing:.08em}
.csb-cc .trow .d{color:var(--ccmut);font-size:12px}
.csb-cc .trow .go{color:var(--ccteal);font-size:12.5px;font-weight:800;text-align:right}
/* the mockup drops the sport and the date on a phone rather than wrapping
   them onto a second line: the name and "Checklist →" are the whole row */
@media(max-width:600px){
 .csb-cc .trow{grid-template-columns:1fr auto;padding:11px 14px}
 .csb-cc .trow .sp2,.csb-cc .trow .d{display:none}
}

/* "Release calendar →" on the homepage's Coming up heading, and the way
   back from the calendar page. .cnt already claims the right edge with
   margin-left:auto; the Coming up heading has no .cnt, so this takes it. */
.csb-cc .blockhd .more{margin-left:auto;color:var(--ccteal);font-size:12.5px;font-weight:800;text-decoration:none;white-space:nowrap}
.csb-cc .blockhd .more:hover{text-decoration:underline;text-underline-offset:3px}
.csb-cc .ccback{margin:26px 0 8px;text-align:center}
.csb-cc .ccback a{color:var(--ccteal);font-size:14px;font-weight:800;text-decoration:none}
.csb-cc .ccback a:hover{text-decoration:underline;text-underline-offset:3px}

/* the eBay strip is an ad, so it takes the design system's eBay colors
   whole (redesign/README.md): panel #141b26, tile #1b2433, line #2a3a52,
   link #7fb2ff, the real eBay mark top left and the EPN disclosure under
   the panel. --ccteal is REDEFINED here rather than every rule inside
   being rewritten — teal is the site's color and may not appear inside an
   eBay module, so any var(--ccteal) in here is meant to be the blue (it is
   what paints "View last week's releases on eBay →"). */
.csb-cc .mod.cchot{--ccs1:#141b26;--ccs2:#1b2433;--ccs3:#22304a;--ccline:#2a3a52;
 --ccteal:#7fb2ff;--ccink:#dbe5f5;--ccmut:#8fa3bf;--ccdim:#6f83a0;
 background:var(--ccs1);border-color:var(--ccline)}
.csb-cc .mod.cchot h3 .eblogo{height:18px;width:auto;display:inline-block;margin-right:9px;vertical-align:-3px}
/* flat, not the house thumb's grey gradient — the tile sits on the blue panel */
.csb-cc .mod.cchot .thumb{background:#22304a}
.csb-cc .mod.cchot .card:hover{border-color:#7fb2ff}
.csb-cc .epndisc.cchot{color:#6f83a0}
.csb-cc .epndisc{color:var(--ccdim);font-size:11px;margin:8px 2px 0}

.csb-cc .mod{border:1px solid var(--ccline);border-radius:12px;background:var(--ccs1);padding:14px 16px;margin-top:14px}
.csb-cc .mod h3{margin:0 0 2px;font-size:14.5px;color:var(--ccink)}
.csb-cc .mod .sub{color:var(--ccmut);font-size:12px;margin-bottom:10px}
.csb-cc .cards{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.csb-cc .card{background:var(--ccs2);border:1px solid var(--ccline);border-radius:9px;padding:8px;display:block}
.csb-cc .card:hover{border-color:#3a434c}
.csb-cc .thumb{background:linear-gradient(145deg,#2a323a,#1c2228);border-radius:6px;height:116px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:7px}
.csb-cc .thumb img{max-width:100%;max-height:100%;object-fit:contain}
/* FIX-cc-spin: archive year loads reuse the site's .lds-ring. The base
   .lds-ring{display:none} already exists; these three rules give it a
   positioning context inside the archive list and dim the rows under it. */
.csb-cc #ccarchive{position:relative;min-height:120px}
.csb-cc #ccarchive.working .lrow{opacity:.25}
.csb-cc #ccarchive.working .lds-ring{display:block;position:absolute;width:160px;height:160px;left:calc(50% - 80px);top:30px;z-index:2}
.csb-cc .card .t{font-size:11.5px;line-height:1.3;min-height:30px;display:block;color:var(--ccink)}
.csb-cc .card .p{font-weight:800;font-size:13px;margin-top:3px;display:block;color:var(--ccink)}
.csb-cc .card .m{color:var(--ccmut);font-size:10.5px;display:block}
.csb-cc .seeall{color:var(--ccteal);font-size:12px;margin-top:9px;display:inline-block;text-decoration:underline;text-underline-offset:3px}
.csb-cc .ccdisc{color:var(--ccdim);font-size:11px;margin:10px 2px 0}

.csb-cc .list{border:1px solid var(--ccline);border-radius:12px;overflow:hidden;margin-top:2px}
.csb-cc .lrow{display:grid;grid-template-columns:90px 1fr 110px 220px;gap:12px;padding:10px 14px;font-size:13px;align-items:center;color:var(--ccink)}
.csb-cc .lrow:nth-child(odd){background:var(--ccs1)}
.csb-cc a.lrow:hover .n{color:var(--ccteal)}
.csb-cc .lrow .d{color:var(--ccmut);font-size:12px}
.csb-cc .lrow .n{font-weight:700}
.csb-cc .lrow .sp2{color:var(--ccmut);font-size:11px;font-weight:700;letter-spacing:.06em}
.csb-cc .lrow .f{color:var(--ccdim);font-size:12px}
.csb-cc #ccarchive .lrow .d{grid-column:auto}
.csb-cc .lrow.more{grid-template-columns:1fr;color:var(--ccteal);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.csb-cc #ccnone{color:var(--ccdim);text-decoration:none;cursor:default}

.csb-cc .years{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px;align-items:center}
.csb-cc .yr{border:1px solid var(--ccline);background:var(--ccs1);border-radius:99px;padding:6px 14px;font-size:12.5px;font-weight:700;color:#c8d2d7;cursor:pointer}
.csb-cc .yr.on{background:var(--ccteal);color:#04241c;border-color:var(--ccteal)}
.csb-cc .years .mf{margin-left:auto;display:flex;gap:6px}
/* the manufacturer and sort chips take the same pill as the year chips
   (spec 01: "chips take the mockup's pill style"). They were 6px
   rectangles at 11px, so one row of controls held two different chip
   shapes. The ON state stays outlined rather than filled: the years are
   the primary filter and two filled teal groups in one row compete. */
.csb-cc .years .mf span{border:1px solid var(--ccline);background:var(--ccs1);border-radius:99px;
 padding:5px 12px;font-size:12px;font-weight:700;color:#c8d2d7;cursor:pointer}
.csb-cc .years .mf span.on{border-color:var(--ccteal);color:var(--ccteal)}
.csb-cc .srt{border:1px solid var(--ccline);background:var(--ccs1);border-radius:99px;
 padding:5px 12px;font-size:12px;font-weight:800;color:var(--ccteal);cursor:pointer;margin-left:8px}

@media(max-width:900px){
 .csb-cc .grid{grid-template-columns:1fr 1fr}
 .csb-cc .cards{grid-template-columns:repeat(3,1fr)}
 .csb-cc .hero h1,.csb-cc .hero h2{font-size:30px}
 .csb-cc .lrow{grid-template-columns:76px 1fr;grid-auto-rows:auto;row-gap:2px}
 .csb-cc .lrow .sp2,.csb-cc .lrow .f{grid-column:2}
 .csb-cc .years .mf{margin-left:0;width:100%}
}
@media(max-width:560px){
 .csb-cc .cards{grid-template-columns:repeat(2,1fr)}
 .csb-cc .bigsearch .btn{display:none}
}
/* ship-today fixes (Sept 18): boxes row header, +N more, swipe rows */
.csb-cc .fmore{color:var(--ccdim);font-size:11px}
.csb-cc .mod .bxhd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.csb-cc .mod .bxhd h3{margin:0}
.csb-cc .mod .bxhd .seeall{margin:0 0 0 auto}
@media(max-width:700px){
 /* image rows swipe sideways on mobile — never folded (mockup) */
 .csb-cc .mod .cards{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
 .csb-cc .mod .cards .card{flex:0 0 46%}
}
/* breadcrumb above the hero (house .csb-crumb styles apply; margin only) */
.csb-cc .ccrumb{margin:0 0 10px}
/* dropdown: the always-last "See all N results" row */
/* .ci.all was the dropdown's single "See all N results" row, removed
 * 2026-09-30 in favour of the per-section links. Rule dropped with it. */
/* results page — /checklist-central/search/ (site-search spec §4) */
.csb-sr{max-width:1440px;margin:0 auto;padding:18px 16px 40px}
.csb-sr .rh{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:10px 0 4px}
.csb-sr .rh h1{margin:0;font-size:26px}
.csb-sr .rh .cnt{color:var(--ccmut);font-size:13.5px}
.csb-sr .rh .cnt b{color:var(--ccink)}
.csb-sr .srempty{color:var(--ccmut)}
.csb-sr .filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 14px}
.csb-sr .filters .sep{width:10px}
.csb-sr .filters .chip{display:inline-block;border-radius:99px;padding:3px 10px;font-size:11px;border:1px solid var(--ccline);background:var(--ccs1,#111418);color:#c8d2d7;cursor:pointer;user-select:none}
.csb-sr .filters .chip b{color:var(--ccmut);font-weight:600}
.csb-sr .filters .chip.on{border-color:var(--ccteal);color:var(--ccteal)}
.csb-sr .filters .chip.on b{color:var(--ccteal)}
.csb-sr .rows .row{display:grid;grid-template-columns:64px 1fr 260px 160px;gap:10px;align-items:center;padding:9px 6px;border-bottom:1px solid var(--ccline)}
.csb-sr .rows .row .d{color:var(--ccdim);font-size:12px}
.csb-sr .rows .row .n{color:var(--ccink)}
.csb-sr .rows .row .n small{display:block;color:var(--ccdim);font-size:11px;margin-top:2px}
.csb-sr .rows .row .c{color:var(--ccmut);font-size:12.5px}
.csb-sr .rows .row .c b{color:var(--ccink)}
/* FIX-teamnote: groupings caveat under a team hit */
.csb-sr .rows .row .c .srnote{display:block;color:var(--ccdim);font-size:11px;line-height:1.35;margin-top:3px}
.csb-sr .rows .row .go a{color:var(--ccteal);text-decoration:none;font-size:12.5px}
.csb-sr .rows .srnone{grid-template-columns:1fr;text-align:center;color:var(--ccdim)}
@media(max-width:700px){
 .csb-sr .rows .row{grid-template-columns:56px 1fr;grid-auto-rows:auto}
 .csb-sr .rows .row .c{grid-column:2}
 .csb-sr .rows .row .go{grid-column:2}
}
/*tok:csb-ccv2-9*/
/* FIX-homepage: CC is the homepage — hard separation from the top band
 * above it: 3px teal rule + eyebrow over the H1 */
.csb-cc .cc-open{border-top:3px solid var(--ccteal);padding-top:14px;margin:8px 0 6px}
.csb-cc .cc-open .eyebrow{color:var(--ccteal);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
/* FIX-homepage: top band above Checklist Central — black like the header,
 * full-bleed via box-shadow (no 100vw scrollbar), 1px #1e2328 bottom edge */
.csb-home{position:relative;--tbline:#272d34;--tbs1:#111418;--tbmut:#98a4ab;--tbteal:#15ccad;--tbyel:#f5c518}
.csb-home-wm{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.csb-home-wm img,.csb-home-wm svg{position:absolute;top:-30px;right:-140px;width:520px;max-width:none;height:auto;opacity:.10}
.csb-topband{background:#000;box-shadow:0 0 0 100vmax #000;clip-path:inset(0 -100vmax);padding:4px 0 22px;margin-bottom:18px;border-bottom:1px solid #1e2328;color:#eef2f3}
.csb-topband .tb-in,.csb-home .csb-cc{position:relative;z-index:2}
.csb-topband .tb-in{display:flex;flex-direction:column;gap:12px;max-width:1440px;margin:0 auto}
/* search first (homepage redesign): the checklist search box leads the
 * page — same black as the header and the band under it, same #ccq input
 * Checklist Central's script binds to. */
/* FIX-sugstack (2026-09-30): the typeahead dropdown was painting UNDER the
 * Checklist Central block below it. Not the dropdown's own z-index (60) —
 * that 60 is scoped inside .ts-in, which is position:relative;z-index:2 and
 * so creates a stacking context the dropdown cannot escape. Outside it the
 * whole bar sat at 2, and `.csb-home .csb-cc` is ALSO 2 — equal z-index, so
 * the later element in DOM order won and the hero covered the list. Raising
 * the bar's own context is the fix; the dropdown's 60 keeps it above the
 * bar's ::before backdrop. */
.csb-topsearch{--ccs1:#111418;--ccs2:#181c21;--ccs3:#1f242a;--ccline:#272d34;--ccink:#eef2f3;--ccmut:#98a4ab;--ccdim:#7d8a92;--ccteal:#15ccad;
 position:relative;z-index:60;padding:16px 0 14px;color:var(--ccink)}
/* full bleed on a PSEUDO, not the band: the band's own clip-path would cut
 * off the typeahead dropdown, which hangs below its bottom edge */
.csb-topsearch::before{content:"";position:absolute;inset:0;background:#000;box-shadow:0 0 0 100vmax #000;clip-path:inset(0 -100vmax);z-index:0}
/* The count has a row to itself — it used to be a flex sibling of
   .bigsearch, so the bar's width was whatever was left after it, and the
   bar visibly moved whenever the number changed width (1,409 -> 999 is a
   whole character). On its own row the bar is always full width and cannot
   be pushed around. B3 (below) keeps that and moves the row ABOVE the bar,
   where it reads as the eyebrow rather than a footnote. */
.csb-topsearch .ts-in{display:flex;flex-wrap:wrap;align-items:center;gap:5px 20px;max-width:1440px;margin:0 auto;position:relative;z-index:2}
.csb-topsearch .bigsearch{flex:1 1 100%;min-width:0}
/* B3 (redesign/01-homepage.md, Sam picked it Sept 26) — the one search
   treatment: a 3px gradient border teal -> eBay blue -> yellow, drawn as a
   DOUBLE background (the fill clipped to padding-box under the gradient
   clipped to border-box, the only way to put a gradient on a border), a
   dark wash inside, a soft teal glow, and a solid YELLOW Search button.
   Yellow is the buy/break color everywhere else on the site; here it is the
   one thing you press, and this bar is the only place the three brand
   colors sit together.

   Scoped to .csb-topsearch, which is this bar on the homepage AND the same
   bar at the top of every checklist page. /checklist-central/'s own box
   (.csb-cc .bigsearch) is deliberately left on the plain teal field — the
   two shared one rule up at FIX-sugstack and no longer share this one. */
.csb-topsearch .bigsearch{height:64px;padding:0 8px 0 20px;gap:14px;
 border:3px solid rgba(0,0,0,0);border-radius:16px;
 background:linear-gradient(90deg,#0f2a27,#101a2b 60%,#1c1a10) padding-box,
            linear-gradient(90deg,#15ccad,#7fb2ff 55%,#f5c518) border-box;
 box-shadow:0 0 0 8px rgba(21,204,173,.10),0 14px 50px rgba(21,204,173,.22)}
.csb-topsearch .bigsearch input{font-size:17px}
/* near-white, not --ccmut: the examples in the placeholder are the point of
   the bar, and grey read as a disabled field against a lit border */
.csb-topsearch .bigsearch input::placeholder{color:#dfe5e8}
.csb-topsearch .bigsearch .btn{background:var(--tbyel,#f5c518);color:#111;font-weight:900;
 border-radius:12px;padding:12px 24px;font-size:15px}
/* the dropdown hangs off a 3px border now, so it lines up 3px out, and it
   takes the eBay blue from the border's middle stop */
.csb-topsearch .ccsug{left:-3px;right:-3px;top:calc(100% + 10px);border:2px solid #7fb2ff}
/* THE COUNT IS THE EYEBROW ABOVE THE BAR, not a line under it: the same
   span, moved with order:-1 and painted with the border's own gradient as
   text. It says what the box is ("SEARCH 1,390 CHECKLISTS"), which is what
   frees the placeholder below it to be nothing but examples. */
.csb-topsearch .ts-count{flex:1 1 100%;order:-1;margin:0;padding:0;
 font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
 background:linear-gradient(90deg,#15ccad,#7fb2ff,#f5c518);
 -webkit-background-clip:text;background-clip:text;
 color:rgba(0,0,0,0);-webkit-text-fill-color:rgba(0,0,0,0)}
@media(max-width:700px){
 .csb-topsearch{padding:12px 0 12px}
 /* the eyebrow STAYS on phones. The old count hid here because it was a
    number fighting the bar for width; one short line above it is not. */
 .csb-topsearch .ts-count{font-size:10.5px;letter-spacing:.12em}
 .csb-topsearch .bigsearch{height:56px;padding-left:14px;gap:10px;
  box-shadow:0 0 0 5px rgba(21,204,173,.10),0 10px 30px rgba(21,204,173,.2)}
 /* 16px, NOT the mockup's 15px: iOS Safari zooms the whole page when a
    focused input is under 16px, and §7.9's first rule is no horizontal
    scrolling on phones. Same call as the signup field below. */
 .csb-topsearch .bigsearch input{font-size:16px}
 .csb-topsearch .bigsearch .btn{padding:10px 16px;font-size:14px}
}
/* 1140 -> 1440 leaves nothing between the content and the window edge on a
 * laptop: gutters from tablet up (phones stay edge to edge, as before) */
@media(min-width:701px){.csb-cc,.csb-topband .tb-in,.csb-topsearch .ts-in{padding-left:16px;padding-right:16px;box-sizing:border-box}}
@media(min-width:701px){.csb-v4,.csb-v4hd{padding-left:16px;padding-right:16px;box-sizing:border-box}}
/* …and the theme wrapper keeps its hands off, as it already does on / */
body.csb-checklist-page #content .col-full{max-width:100%;padding:0}
/* the band butts against the (black) header: drop Storefront's gap on / */
body.home #masthead{margin-bottom:0}
body.home .site-main{padding-top:0}
.csb-topband{padding-top:18px}
.csb-home .csb-topband a{text-decoration:none}   /* beats Storefront's .hentry .entry-content a */
.csb-topband .tb-ico{vertical-align:-3px;margin-right:6px}
.csb-topband .tb-hd{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.csb-topband .tb-hd .when{background:var(--tbyel);color:#111;border-radius:10px;padding:7px 13px;line-height:1.15;font-size:13px;font-weight:700}
.csb-topband .tb-hd .when b{display:block;font-weight:900;font-size:14px}
.csb-topband .tb-hd h2{margin:0;font-size:22px;font-weight:800;color:#eef2f3}
.csb-topband .tb-links{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.csb-topband .tb-links a{color:var(--tbteal);font-weight:700;font-size:13px}
/* Break_Tiles_3_Per_Row: 3 / 2 / 1 per row (≥1024 / 600–1023 / <600).
 * Grid rows stretch, so tiles in a row share a height and the buttons
 * (pinned by .bd flex:1) line up along the bottom. */
.csb-topband .tb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:1023px){.csb-topband .tb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:599px){.csb-topband .tb-grid{grid-template-columns:minmax(0,1fr)}}
.csb-topband .tb-card{border:1px solid var(--tbline);border-radius:12px;background:var(--tbs1);overflow:hidden;display:flex;flex-direction:column}
.csb-topband .tb-card .art{display:block;aspect-ratio:1/1;background:#0b0d10;overflow:hidden}
/* one shape for every tile; the whole box always shows (mixer group shots
 * and single portrait boxes end up the same size, nothing cropped) */
.csb-topband .tb-card .art img{width:100%;height:100%;object-fit:contain;display:block}
.csb-topband .tb-card .bd{padding:10px 11px;flex:1}
.csb-topband .tb-card .nm{font-weight:800;font-size:14.5px;line-height:1.3;color:#eef2f3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.csb-topband .tb-card .spots{color:var(--tbmut);font-size:12px;margin-top:2px}
.csb-topband .tb-card .btn{display:block;margin:0;text-align:center;background:var(--tbyel);color:#111;font-weight:800;border-radius:8px;padding:10px 8px}
/* ==== PHONES (<600px): THE BAND IS ROWS, NOT CARDS ======================
 * Spec 01: "Phones: live and scheduled breaks are the same compact rows
 * (96px art, name, spots/teams line), the scheduled rows ending 'Drops
 * 10:15 AM' instead of a button", and the Lineup becomes "one-line rows
 * with 40px thumbnail". Ported from the mockup's search-first block
 * (specs/redesign/pages/css/homepage.css:186-196 and 145-151).
 *
 * Rule 7.9 is what the shape is for: the square card put a 390px-wide
 * piece of box art above every name, so two breaks filled a screen, and
 * the Lineup was a horizontally scrolling rail on a page that is not
 * allowed to scroll sideways. 96px is the rule's floor for row art.
 * ====================================================================== */
/* THE LINEUP'S DESKTOP RULES SIT HERE, ABOVE THE PHONE QUERY, AND THAT
 * ORDER IS LESS ARBITRARY THAN IT LOOKS (spec 33 H1, Oct 22).
 *
 * They used to come AFTER the <600px block, and a plain .csb-topband .lu
 * rule has the same specificity as the one inside the query — so for every
 * property both set, the later desktop rule won AT PHONE WIDTHS TOO. The
 * Lineup was never the one-line rows spec 01 drew: on a 390px screen the
 * rows kept width:150px, display:block, the 1px card border, text-align
 * centre and an 11.5px name, and only the handful of properties the
 * desktop rule happens not to set (grid-template-columns, the art size)
 * came from the phone block. Moving these twelve lines up is a pure
 * reorder — nothing else in this stylesheet targets .lu — and it is what
 * lets the phone block below actually apply.
 */
.csb-topband .lu-row{display:flex;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.csb-topband .lu{flex:0 0 150px;width:150px;border:1px solid var(--tbline);border-radius:12px;background:var(--tbs1);padding:8px;display:block;text-align:center}
.csb-topband .lu .art{display:block;aspect-ratio:1/1;background:#0b0d10;border-radius:8px;overflow:hidden;margin-bottom:7px}
.csb-topband .lu .art img{width:100%;height:100%;object-fit:contain;display:block}
.csb-topband .lu .lbl{display:block;font-size:12px;font-weight:800;color:var(--tbmut);letter-spacing:.04em}
.csb-topband .lu .nm{display:block;margin-top:3px;font-size:11.5px;line-height:1.25;color:#c9d1d6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.csb-topband .lu.now{border-color:#e5242b}
.csb-topband .lu.now .lbl{color:#ff4d55;text-transform:uppercase}
.csb-topband .lu.now .lbl::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff3b3b;margin-right:6px;vertical-align:1px}
.csb-topband .lu.next{border-color:var(--tbyel);background:var(--tbyel)}
.csb-topband .lu.next .lbl{color:#111;text-transform:uppercase}
.csb-topband .lu.next .nm{color:#1b1b12}

/* AND THE LIVE CARD'S OWN DESKTOP RULES, FOR THE SAME REASON (spec 33
 * H1 follow-up, Oct 22).
 *
 * These thirty lines were below the <600px block too, and .csb-topband
 * .tb-card .buy .btn is four classes either side of the query — so the
 * desktop rule won on a phone wherever both set a property. Rule 7.9
 * asks for the button to size to its text and the stepper to go, and the
 * phone block says exactly that; neither was in effect. Measured at 390px
 * before this move: .buy kept margin:0 11px 12px and gap:10px, .btn kept
 * flex:1 1 0% and stretched to 166px instead of its text, and .qty was
 * still on screen at 89px wide — a stepper the spec had deleted.
 *
 * Nothing between the query and here targets .tb-card, and the base card
 * rules above stay above, so this is the same pure reorder the Lineup
 * rules got. The 600px query on .sched .notify travels with its block; it
 * sets nothing the 599px query sets.
 */
.csb-topband .tb-card .spots .lbl{color:var(--tbyel);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:11px}
.csb-topband .tb-card .spots .n{color:var(--tbyel);font-weight:900}
.csb-topband .tb-card .spots .of{color:var(--tbmut)}
.csb-topband .tb-card .buy{display:flex;align-items:stretch;gap:10px;margin:0 11px 12px}
.csb-topband .tb-card .buy .btn{flex:1}
.csb-topband .tb-card .buy .qty{flex:0 0 auto;display:flex;align-items:center;gap:2px;border:1px solid var(--tbline);border-radius:8px;background:#0b0d10}
.csb-topband .tb-card .buy .qty button{background:none;border:0;color:#eef2f3;font-size:16px;font-weight:800;line-height:1;padding:0 11px;height:100%;cursor:pointer}
.csb-topband .tb-card .buy .qty button:hover{color:var(--tbyel)}
.csb-topband .tb-card .buy .qty .qn{min-width:20px;text-align:center;font-weight:800;font-size:14px}
/* the card after a spot goes in the cart (spec 01: "card flips to
   'Added ✓ · View cart →'"). Teal, not yellow: yellow is the buy. */
.csb-topband .tb-card .added{display:none;flex:1;text-align:center;border:2px solid var(--tbteal);
 color:var(--tbteal);font-weight:900;border-radius:10px;padding:8px;font-size:14px}
.csb-topband .tb-card .added:hover{background:var(--tbteal);color:#04241c}
.csb-topband .tb-card.done .buy .qty,.csb-topband .tb-card.done .buy .btn{display:none}
.csb-topband .tb-card.done .added{display:block}
/* Woo's own bare "View cart" link, which the flip replaces */
.csb-topband .tb-card .added_to_cart{display:none}
/* Scheduled, not on sale yet: the same card, with the drop time where the
   buy button goes. Outlined and not a link — there is nothing to click until
   spots go up — and 2px of border costs 2px of padding so a mixed row of
   cards still has its buttons on one line. "Get a push" is desktop only; on
   a phone the app module right below says the same thing with more room. */
.csb-topband .tb-card.sched .spots em{color:var(--tbmut);font-style:normal;font-weight:600}
.csb-topband .tb-card.sched .buy{flex-direction:column;gap:0}
.csb-topband .tb-card.sched .buy .btn{flex:0 0 auto}
.csb-topband .tb-card.sched .btn.drop{background:none;border:2px solid var(--tbyel);color:var(--tbyel);font-weight:900;padding:8px;cursor:default}
.csb-topband .tb-card.sched .notify{display:block;text-align:center;font-size:12.5px;font-weight:700;margin:8px 0 2px}
.csb-home .csb-topband .tb-card.sched .notify{color:var(--tbteal)}
@media(max-width:600px){.csb-topband .tb-card.sched .notify{display:none}}

@media(max-width:599px){
 .csb-topband .tb-card{display:grid;grid-template-columns:96px 1fr;
  grid-template-areas:"art bd" "art act";gap:6px 12px;padding:8px 10px 8px 8px;align-items:start}
 .csb-topband .tb-card .art{grid-area:art;align-self:center;width:96px;height:96px;border-radius:10px}
 .csb-topband .tb-card .bd{grid-area:bd;padding:0;flex:none;min-width:0}
 .csb-topband .tb-card .nm{font-size:14.5px;-webkit-line-clamp:3}
 .csb-topband .tb-card .spots{font-size:11px;margin-top:3px}
 /* the button sizes to its text and never wraps (7.9); the stepper goes —
    one tap adds one spot and the cart is where a second one belongs */
 .csb-topband .tb-card .buy{grid-area:act;margin:0;justify-self:start;gap:0}
 .csb-topband .tb-card .buy .qty{display:none}
 .csb-topband .tb-card .buy .btn{flex:0 0 auto;width:auto;display:inline-block;
  padding:10px 14px;font-size:14px;white-space:nowrap;border-radius:10px}
 .csb-topband .tb-card.sched .buy{flex-direction:row}

 /* the Lineup: one break each, no sideways scroll.
  *
  * SPEC 33 H1 (Sam, Oct 22: "they are all in a line and the box picture
  * is tiny"). Spec 01 asked for one-line rows with a 40px thumbnail and
  * Todd built exactly that, so this is the design being wrong on a real
  * phone rather than the build. A filled break now takes the same row as
  * a live break above it: the 96px art of rule 7.9, the name at the live
  * row's size, and the tag sitting where the live row puts its button.
  *
  * The art spans both rows, as it does on .tb-card, which is what stops
  * a two-line name from leaving the picture floating against the top.
  *
  * The hairline separators stay instead of giving every row the live
  * card's border: this is still a list under a "Lineup" heading, and a
  * column of bordered cards would compete with the real cards above it.
  * Sam's call if she wants the whole card. Desktop is untouched — every
  * rule here is inside the <600px query. */
 .csb-topband .lu-row{display:flex;flex-direction:column;gap:0;overflow-x:visible;padding-bottom:0}
 .csb-topband .lu{display:grid;grid-template-columns:96px 1fr;
  grid-template-areas:"art nm" "art lbl";gap:6px 12px;align-items:start;
  flex:none;width:auto;border:0;border-top:1px solid var(--tbline);border-radius:0;
  background:none;padding:8px 2px;text-align:left}
 .csb-topband .lu:first-child{border-top:0}
 .csb-topband .lu .art{grid-area:art;align-self:center;width:96px;height:96px;border-radius:10px;margin:0}
 /* the markup is art -> label -> name; the grid areas read name then tag */
 .csb-topband .lu .nm{grid-area:nm;margin-top:0;font-size:14.5px;font-weight:700;-webkit-line-clamp:3;color:#eef2f3}
 .csb-topband .lu .lbl{grid-area:lbl;align-self:end;justify-self:start;
  font-size:10.5px;padding:3px 8px;border-radius:99px;
  background:#1c2126;color:#c8d2d7;white-space:nowrap;letter-spacing:.08em}
 .csb-topband .lu.now{background:rgba(255,77,77,.05);border-top-color:var(--tbline)}
 .csb-topband .lu.now .lbl{background:rgba(255,77,77,.14);color:#ff6b6b}
 .csb-topband .lu.next{background:rgba(245,197,24,.05);border-top-color:var(--tbline)}
 .csb-topband .lu.next .lbl{background:var(--tbyel);color:#111}
 .csb-topband .lu.next .nm{color:#eef2f3}
}

/* "Also coming: Sat 10/18 · 3 breaks →" — every drop day past the next one,
   on one line under the grid (spec 01, "Length limit instead of a rail"). */
.csb-topband .tb-also{display:block;margin:2px 0 14px;color:var(--tbmut);font-size:13px;font-weight:600}
.csb-topband .tb-also:hover{color:var(--tbyel)}

/* breaks band (homepage redesign) — counts in the header, the lineup rail,
   spots left as "6 of 20", and the quantity + add-to-cart row */
.csb-topband .tb-hd .tb-count{color:var(--tbmut);font-size:13px;font-weight:600}
.csb-topband .tb-lineup{margin:0 0 14px}
.csb-topband .tb-lineup .lu-hd{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.csb-topband .tb-lineup .lu-hd small{color:var(--tbyel);font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.csb-topband .tb-lineup .lu-hd span{color:var(--tbmut);font-size:12px}
.csb-topband .tb-app{border:1px solid var(--tbline);border-radius:12px;background:var(--tbs1);padding:12px 16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.csb-topband .tb-app .t{flex:1;min-width:240px}
.csb-topband .tb-app .t b{font-size:14.5px}
.csb-topband .tb-app .t div{color:var(--tbmut);font-size:12.5px;margin-top:2px}
.csb-topband .tb-app .stores{display:flex;gap:8px;align-items:center}
/* the badges are 270x80 files and Storefront's img{height:auto} ignores
   their height attribute — one rule for both panels */
.csb-topband .tb-app .stores img{height:34px;width:auto;display:block}
.csb-topband .tb-app .lnk{color:var(--tbteal);font-weight:700;font-size:13px}
.csb-topband .tb-join{border:1px solid var(--tbline);border-radius:12px;background:var(--tbs1);padding:14px 18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.csb-topband .tb-join .t{flex:1;min-width:240px}
.csb-topband .tb-join .t b{font-size:15px}
.csb-topband .tb-join .t div{color:var(--tbmut);font-size:13px}
.csb-topband .tb-join .btn{background:var(--tbyel);color:#111;font-weight:800;border-radius:9px;padding:10px 16px}
.csb-home .csb-topband .tb-join .lnk{color:var(--tbteal);font-weight:700;text-decoration:underline}
.csb-topband .tb-nobreaks{border:1px solid var(--tbline);border-radius:12px;background:var(--tbs1);padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--tbmut);font-size:13px}
.csb-topband .tb-nobreaks .msg b{color:#eef2f3}
.csb-topband .tb-nobreaks .stores{display:flex;gap:8px}
.csb-topband .tb-nobreaks .stores img{height:34px;width:auto;display:block}
.csb-topband .tb-nobreaks .yt{margin-left:auto;color:var(--tbteal);font-weight:700}
@media(max-width:700px){
 .csb-home-wm img,.csb-home-wm svg{width:340px;right:-110px}
 .csb-topband .tb-links{margin-left:0;width:100%}
 .csb-topband .tb-nobreaks .yt{margin-left:0}
}
/* box prices vs breaks: while any break is posted, release cards link
 * their checklist instead of an eBay box price */
.csb-cc .cklink{font-size:12px;font-weight:700;margin-top:3px}
.csb-cc .cklink a{color:var(--ccteal)}
/* FIX-homepage-live-and-memory: live on Twitch, Shorts strip */
.csb-topband .tb-hd .livepill{background:#e5242b;color:#fff;font-weight:900;font-size:11px;letter-spacing:.1em;border-radius:6px;padding:4px 8px;display:inline-flex;align-items:center;gap:6px}
.csb-topband .tb-hd .livepill::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.csb-home .csb-topband .tb-links a.twbtn{background:#9146FF;color:#fff;border-radius:9px;padding:7px 13px;display:inline-flex;align-items:center}
/* spec 01: "Twitch button (solid when live, outlined when not)". Off air it
   was a bare teal text link, which read as one more nav item rather than
   the same button in its quiet state. */
.csb-home .csb-topband .tb-links a.tw{background:none;border:1px solid #9146ff;color:#bf94ff;
 border-radius:9px;padding:6px 12px;display:inline-flex;align-items:center;font-weight:700;font-size:13px}
.csb-home .csb-topband .tb-links a.tw:hover{border-color:#bf94ff;color:#d5bcff}
.csb-topband .tb-live{display:flex;align-items:center;gap:12px;border:1.5px solid #9146FF;background:linear-gradient(90deg,rgba(145,70,255,.18),rgba(145,70,255,.04));border-radius:12px;padding:10px 16px;flex-wrap:wrap}
.csb-topband .tb-live .dot{width:10px;height:10px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 0 4px rgba(255,59,59,.25);flex:0 0 auto}
.csb-topband .tb-live .tb-ico{margin-right:0}
.csb-topband .tb-live .t{flex:1;min-width:200px}
.csb-topband .tb-live .t b{font-size:15px;margin-right:8px}
.csb-topband .tb-live .t span{color:var(--tbmut);font-size:13px}
.csb-home .csb-topband .tb-live a.w{background:#9146FF;color:#fff;font-weight:800;border-radius:9px;padding:8px 14px}
.csb-topband .tb-shorts .sh-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.csb-topband .tb-shorts .sh-hd small{color:#7d8a92;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.csb-topband .tb-shorts .sh-sub{color:var(--tbmut);font-size:12.5px}
.csb-topband .tb-shorts .sh-sub a b{color:#eef2f3;font-weight:800}
.csb-topband .tb-shorts .sh-hd .sh-all{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--tbteal);white-space:nowrap}
@media(max-width:700px){.csb-topband .tb-shorts .sh-sub{display:none}}
.csb-topband .sh-row{display:grid;grid-template-columns:repeat(auto-fill,100px);gap:0 10px;justify-content:space-between;grid-auto-rows:0;grid-template-rows:auto;overflow:hidden}
.csb-topband .short{display:block;width:100px;color:#c9d1d6;position:relative}
/* SITE_SPEC_1B: .short .chip retired with the markup — every Short in the
   row is ours, and the thumbnail's own overlay already reads CARDSMITHS BREAKS. */
.csb-topband .short img{width:100px;height:178px;object-fit:cover;border-radius:10px;border:1px solid var(--tbline);display:block;background:#161b20}
.csb-topband .short .cap{font-size:10.5px;line-height:1.25;margin-top:5px;color:var(--tbmut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:700px){
 .csb-topband .sh-row{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:10px;padding-bottom:4px}
 .csb-topband .short,.csb-topband .short img{width:96px;flex:0 0 96px}
 .csb-topband .short img{height:171px}
}
/* remembered sport + recently viewed (browser-only, rendered by JS) */
.csb-cc .ccreset{align-self:center;font-size:12px;font-weight:700;color:var(--ccteal) !important;margin-left:4px;text-decoration:underline !important;text-underline-offset:3px;cursor:pointer}
.csb-cc .ccrecent{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 0}
.csb-cc .ccrecent .lbl{color:var(--ccdim);font-size:10.5px;font-weight:800;letter-spacing:.1em;margin-right:4px}
.csb-cc .ccrecent a{border:1px solid var(--ccline);background:var(--ccs1);border-radius:99px;padding:5px 11px;font-size:12px;color:#c9d1d6}
.csb-cc .ccrecent a:hover{border-color:var(--ccteal)}

/* FIX-seeall (2026-09-30): the per-kind term list (?list=terms) */
.csb-sr .srterms{display:grid;gap:6px;margin:14px 0 18px}
.csb-sr .srterm{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:11px 14px;border:1px solid var(--ccline);border-radius:10px;background:var(--ccs1);color:var(--ccink)}
.csb-sr .srterm:hover{background:var(--ccs3)}
.csb-sr .srterm b{font-weight:700}
.csb-sr .srterm span{color:var(--ccmut);font-size:12px;text-align:right;white-space:nowrap}
@media(max-width:700px){.csb-sr .srterm{flex-direction:column;gap:3px}.csb-sr .srterm span{text-align:left}}

/* ==== CHECKLIST EMAIL SIGNUP (spec 02-email-signup.md) ===================
 * Inline box, one line of copy, one field. Light/dark through the same var
 * pattern as the sibling .csb-cue panels it sits among.
 *
 * Every dimension here is pinned on purpose: the input, the button and the
 * row all state their own height, so the box occupies the same space before
 * and after the deferred stylesheet lands. An unsized form field above the
 * fold is exactly the shape of the 0.376 CLS of 2026-10-01 — re-run
 * tools/build-critical-css.py against a page that CONTAINS this box, or
 * these rules miss the inline block and the page jumps. */
.csb-signup{--su-ink:#111;--su-mut:#666;--su-line:#ddd;--su-s1:#fff;--su-teal:#15ccad;
 border:1px solid var(--su-line);border-radius:12px;background:var(--su-s1);
 padding:13px 16px;margin:0 0 14px;color:var(--su-ink);width:100%;max-width:none;min-width:0;
 box-sizing:border-box}
body.dark-mode .csb-signup{--su-ink:#eef2f3;--su-mut:#98a4ab;--su-line:#272d34;--su-s1:#111418}
.csb-signup .csb-su-f{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;margin:0}
.csb-signup .csb-su-t{flex:1 1 270px;min-width:0;font-size:16px;font-weight:800;line-height:1.3}
.csb-signup .csb-su-in{display:flex;align-items:center;gap:8px;flex:1 1 320px;min-width:0}
.csb-signup .csb-su-e{flex:1 1 auto;min-width:0;height:44px;box-sizing:border-box;
 background:var(--su-s1);color:var(--su-ink);border:1.5px solid var(--su-line);border-radius:10px;
 padding:0 12px;font-size:16px;line-height:1.2;margin:0}
.csb-signup .csb-su-e::placeholder{color:var(--su-mut)}
/* :focus RE-STATES background and color, it does not only add a border.
   Storefront has input[type=email]:focus{background-color:#ededed} — (0,2,1),
   which outranks the (0,2,0) base rule above, so in dark mode focusing the
   field painted #eef2f3 text onto a #ededed box: white on white. Matching it
   here at (0,3,1) wins without !important. */
.csb-signup .csb-su-e:focus{outline:0;border-color:var(--su-teal);
 background:var(--su-s1);color:var(--su-ink)}
/* Chrome paints its own box for an autofilled field and ignores `background`.
   An email field is the most autofilled thing there is, so pin it the only
   way that works: an inset shadow for the fill, text-fill-color for the text. */
.csb-signup .csb-su-e:-webkit-autofill,
.csb-signup .csb-su-e:-webkit-autofill:hover,
.csb-signup .csb-su-e:-webkit-autofill:focus{
 -webkit-text-fill-color:var(--su-ink);caret-color:var(--su-ink);
 -webkit-box-shadow:0 0 0 1000px var(--su-s1) inset;box-shadow:0 0 0 1000px var(--su-s1) inset}
.csb-signup .csb-su-b{flex:0 0 auto;height:44px;box-sizing:border-box;padding:0 22px;margin:0;
 background:var(--su-teal);color:#04241c;font-weight:800;font-size:15px;line-height:1;
 border:0;border-radius:99px;cursor:pointer;white-space:nowrap}
.csb-signup .csb-su-b:hover{filter:brightness(1.07)}
.csb-signup .csb-su-b[disabled]{opacity:.6;cursor:default}
.csb-signup .csb-su-msg{flex:1 1 100%;margin:0;font-size:13.5px;line-height:1.4;color:var(--su-mut)}
.csb-signup .csb-su-msg:empty{display:none}
/* off-screen, not display:none — a hidden honeypot bots skip is no honeypot */
.csb-signup .csb-su-hp,.csb-signup .csb-su-sr{position:absolute;left:-9999px;top:auto;
 width:1px;height:1px;overflow:hidden}
@media(max-width:560px){
 .csb-signup{padding:12px 13px}
 .csb-signup .csb-su-t{flex-basis:100%;font-size:15px}
 .csb-signup .csb-su-b{padding:0 16px}
}

/* MODULE VARIANT — the signup inside Checklist Central and on the checklist
 * pages. FILLED PANEL since 2026-10-13 (redesign/01-homepage.md,
 * 05-checklist-pages.md): dark teal -> blue gradient fill, a 1.5px inset
 * teal line instead of a border, a soft teal glow, a 40px solid-teal round
 * envelope badge and a SOLID teal Sign up button. It is the one filled
 * gradient panel on the page, which is the whole point — it has to read as
 * its own thing rather than as another bordered box in a page made of them.
 * Mirrors `.sig` in specs/redesign/pages/css/checklist-box.css.
 *
 * (It replaced a 1px-bordered card with a faint teal wash, whose outlined
 * button was reasoned as "decoration inside a page whose one solid teal call
 * to action is the Checklist button on each row". The panel is now distinct
 * enough from those rows that a solid button does not compete with them.)
 *
 * Layout is unchanged: text left, input + button right, stacking on phones.
 *
 * A FILL, not a card on the page background — so the few colors that must
 * not come from the light token set are written as plain properties, not as
 * token overrides: `body.dark-mode .csb-signup` is (0,2,1) and would outrank
 * a token block on (0,2,0) here. */
.csb-signup.csb-su-mod{padding:16px 20px;margin:14px 0 18px;border:0;border-radius:16px;
 color:#eef2f3;
 background:linear-gradient(135deg,#0f3b33,#10233a);
 box-shadow:inset 0 0 0 1.5px rgba(21,204,173,.45),0 12px 40px rgba(21,204,173,.16)}
.csb-signup.csb-su-mod .csb-su-f{gap:12px 16px}
/* two columns: the badge spans both text rows, the headline and the
   sub-line stack beside it. Pure CSS — the form markup is untouched. */
.csb-signup.csb-su-mod .csb-su-t{display:grid;grid-template-columns:40px 1fr;column-gap:12px;
 align-items:center;flex:1 1 260px;min-width:220px;font-size:inherit;font-weight:400}
.csb-signup.csb-su-mod .csb-su-t::before{content:"\2709";grid-row:1/3;
 width:40px;height:40px;border-radius:50%;background:var(--su-teal);color:#04241c;
 font-size:20px;line-height:1;display:grid;place-items:center}
.csb-signup.csb-su-mod .csb-su-t b{display:block;font-size:18px;font-weight:800;line-height:1.15;
 color:#eef2f3}
.csb-signup.csb-su-mod .csb-su-t span{font-size:13px;color:#9fb3b0}
/* flex-GROW 0: the input group is capped at ~420px rather than splitting the
   row evenly, so the sentence keeps the space it needs on a wide screen */
.csb-signup.csb-su-mod .csb-su-in{flex:0 1 420px;min-width:260px}
/* the field is a hole punched in the fill, not a box laid on it */
.csb-signup.csb-su-mod .csb-su-e{height:46px;font-size:15px;
 background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18);color:#eef2f3}
.csb-signup.csb-su-mod .csb-su-e::placeholder{color:#8a98a0}
.csb-signup.csb-su-mod .csb-su-e:focus{background:rgba(0,0,0,.35);color:#eef2f3;
 border-color:var(--su-teal)}
/* Chrome paints its own opaque box for an autofilled field, so the hole has
   to be restated as a solid: #0a2024 is rgba(0,0,0,.35) over this fill. */
.csb-signup.csb-su-mod .csb-su-e:-webkit-autofill,
.csb-signup.csb-su-mod .csb-su-e:-webkit-autofill:hover,
.csb-signup.csb-su-mod .csb-su-e:-webkit-autofill:focus{
 -webkit-text-fill-color:#eef2f3;caret-color:#eef2f3;
 -webkit-box-shadow:0 0 0 1000px #0a2024 inset;box-shadow:0 0 0 1000px #0a2024 inset}
.csb-signup.csb-su-mod .csb-su-b{height:46px;padding:0 20px;border-radius:10px;font-size:15px;
 background:var(--su-teal);color:#04241c;border:1.5px solid var(--su-teal)}
.csb-signup.csb-su-mod .csb-su-b:hover{background:#2fe0c2;border-color:#2fe0c2;color:#04241c;filter:none}
.csb-signup.csb-su-mod .csb-su-msg{color:#9fb3b0}
@media(max-width:600px){
 .csb-signup.csb-su-mod{padding:16px}
 .csb-signup.csb-su-mod .csb-su-f{gap:12px}
 .csb-signup.csb-su-mod .csb-su-t{flex-basis:100%}
 .csb-signup.csb-su-mod .csb-su-in{flex-basis:100%}
 /* 16px type is NOT the 15px above: iOS Safari zooms the whole page when a
    focused input is under 16px, and §7.9's first rule is no horizontal
    scrolling on phones. 15px survives where it was designed — desktop. */
 .csb-signup.csb-su-mod .csb-su-e{height:46px;font-size:16px}
 .csb-signup.csb-su-mod .csb-su-b{height:46px}
}

/* THE SIGNUP BESIDE THE HEADING (redesign/01-homepage.md, Oct 13) — on the
 * homepage the panel is not a full-width module under the intro line, it is
 * the right half of a flex row whose left half is the Checklist Central
 * heading + sub-line. At ~470px it is too narrow for text-left/field-right,
 * so inside .cc-head the form turns into a column; everywhere else (the
 * checklist pages) it keeps the row. On phones .cc-head wraps and the panel
 * goes full width under the sub-line, which is the same stacked shape.
 *
 * All four selectors are (0,4,0) on purpose: the row rules they override are
 * .csb-signup.csb-su-mod .csb-su-X at (0,3,0), and matching that would make
 * this depend on source order. */
.csb-cc .cc-head{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-bottom:6px}
.csb-cc .cc-head-l{flex:1 1 380px;min-width:0}
.csb-cc .cc-head-l .sub{margin-bottom:0}
.csb-cc .cc-head .csb-signup.csb-su-mod{flex:0 1 470px;min-width:300px;margin:0}
.csb-cc .cc-head .csb-su-mod .csb-su-f{flex-direction:column;align-items:stretch;gap:12px}
.csb-cc .cc-head .csb-su-mod .csb-su-t{flex:none;min-width:0}
.csb-cc .cc-head .csb-su-mod .csb-su-in{flex:none;width:100%}
/* spec 01: "Get email updates" at 19px, in an 18px 20px panel. The shared
   .csb-su-mod rule is the checklist pages' 18px / 16px 20px, which their
   own mockups ask for — so this is a homepage-only step up, not a change
   to the module. Phones keep 18px / 16px (homepage.css:234). */
.csb-cc .cc-head .csb-signup.csb-su-mod{padding:18px 20px}
.csb-cc .cc-head .csb-su-mod .csb-su-t b{font-size:19px}
@media(max-width:600px){
 .csb-cc .cc-head{gap:14px}
 .csb-cc .cc-head .csb-signup.csb-su-mod{flex-basis:100%;min-width:0;margin:2px 0 4px;padding:16px}
 .csb-cc .cc-head .csb-su-mod .csb-su-t b{font-size:18px}
}

/* ==== B3 ON THE "WHAT DID YOU PULL?" FIELD (redesign/05-checklist-pages.md)
 * The same treatment as the homepage bar, on the one search the checklist
 * pages have: 3px gradient border teal -> eBay blue -> yellow as a double
 * background, dark wash inside, teal glow. 58px, 14px radius, 52px on
 * phones — smaller than the homepage's 64px because it sits inside a panel
 * rather than leading the page.
 *
 * The band around it GOES NEUTRAL (plain --paper panel, --line border, no
 * teal wash) so the gradient field is the only colored thing in it —
 * otherwise the band's own teal border competes with the field's.
 *
 * Scoped to the band. The checklist panel's own header field (the same
 * .find markup, cloned) stays the compact pill it is: it lives inside a
 * sticky panel where a 58px field with a 36px glow would not fit.
 *
 * Everything here is at least (0,3,1) because the rules it overrides —
 * .ckl .find input, .ckl .find input.scoped — go up to (0,3,1) themselves
 * several hundred lines below the base block. ==== */
.csb-searchband{border-color:var(--line);background:var(--paper)}
.csb-searchband .csb-sb-slot .find input{box-sizing:border-box;height:58px;
 border:3px solid rgba(0,0,0,0);border-radius:14px;padding:0 62px 0 46px;font-size:16px;
 background:linear-gradient(90deg,#0f2a27,#101a2b 60%,#1c1a10) padding-box,
            linear-gradient(90deg,#15ccad,#7fb2ff 55%,#f5c518) border-box;
 box-shadow:0 0 0 6px rgba(21,204,173,.08),0 10px 36px rgba(21,204,173,.18)}
.csb-searchband .csb-sb-slot .find input::placeholder{color:#dfe5e8}
/* SCOPED keeps the gradient. The base rule answers "a filter is active" with
   a solid teal border, which here would paint over the three colors — so the
   state is carried by the bold value it already sets plus a brighter glow. */
.csb-searchband .csb-sb-slot .find input.scoped{border-color:rgba(0,0,0,0);
 box-shadow:0 0 0 6px rgba(21,204,173,.18),0 10px 36px rgba(21,204,173,.28)}
.csb-searchband .csb-sb-slot .find input:focus{border-color:rgba(0,0,0,0)}
/* the ⌕ is pinned to a 9px top in the base rule, which centred a 44px field
   and not a 58px one */
.csb-searchband .csb-sb-slot .find::before{top:50%;transform:translateY(-50%);
 left:17px;font-size:20px;line-height:1}
/* the suggestion list hung off a hard top:48px — follow the field instead,
   so it stays attached across the phone breakpoint */
.csb-searchband .csb-sb-slot .cksugg{top:calc(100% + 4px)}
@media(max-width:600px){
 .csb-searchband .csb-sb-slot .find input{height:52px;padding-left:40px}
 .csb-searchband .csb-sb-slot .find::before{left:14px;font-size:18px}
}

/* ==== PRODUCT COLOR (redesign/05-checklist-pages.md, Sam's pick Oct 13)
 * One hex per master, sampled from its box art and stored by
 * includes/class-cardsmiths-product-color.php, which prints five variables
 * on body.csb-checklist-page. The page keeps its dark base: teal is still
 * the interactive color and yellow is still the break color, and the
 * product's own color only TINTS — a 22% wash, a line, and the one active
 * fill per control group. Never a replacement palette.
 *
 * Everything is scoped :not(.csb-nowash). The server adds that class when a
 * product has no usable color — white and silver boxes, and anything whose
 * art has not been sampled — and it means literally "the page as it was
 * before this feature", so no rule below may touch it. Every var() also
 * carries today's value as its fallback, so a missing variable can never
 * repaint anything on its own.
 *
 * NOT tinted, against the mockup: the hero box-art tile. The mockup puts
 * the art back on a #0e1216 plate at 120px inside this card; it is a 220px
 * square on open background here (Todd, Oct 13) and the card's own border
 * and wash are what carry the color in that corner.
 * ==== */
body.csb-checklist-page:not(.csb-nowash) .csb-v4hd .csb-hero{
 background:linear-gradient(180deg,var(--pcsoft,transparent),transparent 85%);
 border:1px solid var(--pcline,transparent);border-radius:14px;padding:16px 18px;margin:0 0 14px}
body.csb-checklist-page:not(.csb-nowash) .csb-hdstat{
 background:var(--pcsoft,var(--s1,#111418));border-color:var(--pcline,var(--line,#272d34))}
/* the ONE filled control in each group takes the product color; --pcact is
   darkened until white clears 4.5:1 on it, which is why #fff is safe here
   on every product (see vars() in the PHP) */
body.csb-checklist-page:not(.csb-nowash) .csb-hdtab.on{
 background:var(--pcact,var(--teal,#15ccad));border-color:var(--pcact,var(--teal,#15ccad));color:#fff}
body.csb-checklist-page:not(.csb-nowash) .ckl .ckviews button.on{
 background:var(--pcact,var(--teal,#15ccad));border-color:var(--pcact,var(--teal,#15ccad));color:#fff;
 box-shadow:0 0 0 3px var(--pcsoft,rgba(21,204,173,.18))}
body.csb-checklist-page:not(.csb-nowash) .ckl .ckviews button.on small{color:#e6eefb}
/* type chips go OUTLINED in the product state (mockup .chip.on, and the
   "chips smaller and outlined underneath" line in the spec): a second
   filled control next to the view buttons read as a second answer to the
   same question. --pcchip is the light rung, for text on the dark page. */
body.csb-checklist-page:not(.csb-nowash) .ckl .tabs button.on{
 background:none;border-color:var(--pcchip,var(--teal,#15ccad));color:var(--pcchip,var(--teal,#15ccad))}
body.dark-mode.csb-checklist-page:not(.csb-nowash) .ckl .tabs button.on{
 color:var(--pcchip,var(--teal,#15ccad))}
/* TYPE-GROUP HEADERS. These were written as `tr.gh td` on the assumption
   that the group header is a table row. It is not, on either checklist
   page type — it is `<div class="gh">` with the label and the count inside
   it — so that selector matched nothing and this was the one surface in
   this block that never painted, while the variables had been shipping
   for days (found 20 Oct).
   As a block it can take the mockup's own treatment: the 3px left bar and
   the same left-to-right wash. The label stays teal — it is a heading on
   the page, not part of the product's own furniture.
   :not(.vgh) because the By team / By player group rows are sticky and
   keep their own styling, which is the convention a few rules above. */
body.csb-checklist-page:not(.csb-nowash) .ckl .gh:not(.vgh){
 border-left:3px solid var(--pcline,transparent);
 border-bottom-color:var(--pcline,var(--line,#272d34));
 background:linear-gradient(90deg,var(--pcsoft,transparent),transparent 60%);
 border-radius:0 8px 8px 0;padding-left:10px}

/* ==== SPEC-25 — CHECKLIST PAGES: PHONE LAYOUT, TYPE COLOURS, ODDS HINT
 * (specs/25-mobile-checklist-layout.md, Sam Oct 17, from working prototypes;
 * reference CSS in specs/mockups/mobile-layout/)
 *
 * Most visitors arrive from Google on a phone with one question: is my guy in
 * this, and what are the odds. The first card was about 5.5 screens down the
 * multi-master and 5 down a box page. The checklist rows are also where the
 * money is — the per-row eBay button is 65% of EPN earnings and the ladder
 * tooltips another 15%, so everything above the checklist earns its place by
 * height. Nothing is removed; the order changes and two blocks shrink.
 *
 * Everything inside the 860px query is phone/tablet only. The rules outside
 * it apply at every width and are listed first.
 * ==== */

/* ---- §4 TYPE COLOURS: one palette, three places --------------------------
 * Base / Insert / Autograph / Relic each get ONE colour, on the row chip, on
 * the filter tab and on the By-card chapter header. They differ in lightness
 * as well as hue, and Base is deliberately the quietest — it is most of the
 * rows. The filter tabs double as the legend, which is why the tab and the
 * chip must be the same colour and not two shades of nearly.
 *
 * Keyed off data-ty, written by the renderer (and by the server emitter, so
 * the HTML Google reads matches the one the panel re-renders). Nothing here
 * reads the chip's TEXT: "AUTO" would have to be matched back to
 * "Autograph", and a label change would silently drop the colour. */
.ckl .ttag[data-ty=base]{background:#262d35;color:#aab5c0;border-color:#323c47}
.ckl .ttag[data-ty=insert]{background:#143252;color:#8fd0ff;border-color:#1f4a75}
.ckl .ttag[data-ty=autograph]{background:#4a3906;color:#ffd466;border-color:#6b5410}
.ckl .ttag[data-ty=relic]{background:#33224f;color:#cfaeff;border-color:#4b3473}
/* the ACTIVE tab is left alone: it belongs to the product colour (the one
   filled control per group, redesign/05-checklist-pages.md), and §4 says so */
#ck_tabs button[data-t]:not(.on){border:1px solid transparent}
#ck_tabs button[data-t="Base"]:not(.on){color:#aab5c0;border-color:#323c47}
#ck_tabs button[data-t="Insert"]:not(.on){color:#8fd0ff;border-color:#1f4a75}
#ck_tabs button[data-t="Autograph"]:not(.on){color:#ffd466;border-color:#6b5410}
#ck_tabs button[data-t="Relic"]:not(.on){color:#cfaeff;border-color:#4b3473}
/* chapter headers. (0,4,0) so the colour beats .ckl .gh .gn's pure white —
   which, now that the By-card header HAS a .gn, would otherwise apply. */
.ckl .gh .gn[data-ty=base]{color:#aab5c0}
.ckl .gh .gn[data-ty=insert]{color:#8fd0ff}
.ckl .gh .gn[data-ty=autograph]{color:#ffd466}
.ckl .gh .gn[data-ty=relic]{color:#cfaeff}

/* ---- §3 a ladder that is open says what to do with it --------------------
 * The rungs look like chips, and a chip that is also the only route to the
 * odds needs to say so once. .lad.shl is a set header's ladder, tr.lad
 * td.lad a row's; the missing-parallels row shares tr.lad but has no
 * td.lad, so it stays out of this. */
.ckl .lad.shl::after,.ckl tr.lad td.lad::after{content:"tap a parallel for its odds";
 display:block;font-size:11.5px;color:#8a97a3;margin-top:6px;font-style:italic}

/* ---- §9 the checklist's own search field takes the B3 treatment ----------
 * Both search boxes stay (redesign/05 said "the search field is the B3 field
 * above"; §9 supersedes it). The lower one is how anyone clears or re-runs a
 * search without scrolling a thousand rows back up, so it gets the same
 * gradient border and glow as "What did you pull?" rather than looking like
 * the lesser of the two. input#ck_q is (1,0,1) — enough to beat .ckl .find
 * input without !important. */
input#ck_q{box-sizing:border-box;height:52px;border:3px solid rgba(0,0,0,0);border-radius:14px;font-size:16px;
 background:linear-gradient(90deg,#0f2a27,#101a2b 60%,#1c1a10) padding-box,
  linear-gradient(90deg,#15ccad,#7fb2ff 55%,#f5c518) border-box;
 box-shadow:rgba(21,204,173,.08) 0 0 0 6px,rgba(21,204,173,.18) 0 10px 36px}
input#ck_q:focus{border-color:rgba(0,0,0,0);outline:0}
input#ck_q::placeholder{color:#dfe5e8}
/* the ⌕ was positioned against the old 44px field; centre it on the new one
   exactly as the band copy already does.
   .row in the selector is NOT decoration. The generated critical block is
   inlined AFTER this stylesheet, so any rule it keeps is re-stated last and
   wins every same-specificity fight. `.ckl .find::before` is kept — the
   search BAND's slot carries class ckl and sits above the fold — while
   anything naming .ckl-panel is below the fold and is not. At (0,2,0) this
   rule therefore lost to the 44px positioning it was written to replace, and
   the glyph sat in the field's top-left corner. (0,3,0) does not care about
   order. Same trap for any future override of an above-fold rule. */
.ckl-panel .row .find::before{top:50%;transform:translateY(-50%);left:17px;font-size:20px;line-height:1}

/* ---- §9 desktop Pick-your-box: nine boxes without sideways scroll --------
 * The table was width:max-content with a 260px label column and nowrap
 * cells, so a nine-box product scrolled horizontally inside its own panel.
 * Let the cells wrap and cap the labels at 170px. Street price keeps nowrap:
 * "$14,999.00 on eBay" broken over two lines reads as two prices.
 * #pick-scoped because #pick .cmp-scroll table td (1,1,1) outranks the
 * .csb-mm-panel .cmp rules it would otherwise fight. */
#pick .cmp-scroll table.cmp{width:100%;min-width:0;table-layout:auto}
#pick .cmp-scroll table.cmp td:first-child,#pick .cmp-scroll table.cmp th:first-child{width:170px;min-width:170px}
#pick .cmp-scroll table.cmp td:not(:first-child),#pick .cmp-scroll table.cmp th:not(:first-child){
 min-width:112px;font-size:13.5px;white-space:normal}
/* the street row wraps too, or its nowrap cells set the whole table's
   min-content width and nine columns never fit however narrow the labels
   are. The FIGURE still never breaks — "$14,999.00" split over two lines
   reads as two prices — so nowrap moves onto the <b> and the "on eBay" that
   follows it wraps underneath. */
#pick .cmp-scroll table.cmp tr.cmp-street td{min-width:118px;white-space:normal}
#pick .cmp-scroll table.cmp tr.cmp-street td b{white-space:nowrap}
#pick .cmp-scroll table.cmp tr.cmp-street td a{white-space:normal}

/* ---- §1.4 THE CARD GALLERY, now the fourth block on the page -------------
 * It used to sit at the foot, under About the odds. It is the one thing above
 * the checklist that answers "what do these cards look like", so it moved to
 * directly under the hero (get_product_image_gallery). The layout lives here
 * rather than in an inline style attribute, so the phone rules can change the
 * height without !important-ing past it. */
.csb-gal{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;width:100%;gap:10px;
 height:180px;justify-content:flex-start;padding:6px 0 14px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.csb-gal:empty{display:none}
/* height fixed, width auto: the width/height ATTRIBUTES give the browser the
   aspect ratio, so each box is reserved before the file lands and CLS is 0 */
.csb-gal img{height:166px;width:auto;border-radius:6px}

/* ---- §1 the two phone-only controls, hidden everywhere else -------------- */
.csb-lede-more,.csb-su-open{display:none}
.csb-lede-more{font:600 15px/1 inherit;color:var(--teal,#15ccad);background:none;border:0;
 padding:12px 12px 12px 0;margin:0;min-height:44px;box-shadow:none;text-transform:none;letter-spacing:0;
 cursor:pointer;-webkit-tap-highlight-color:rgba(255,255,255,.15)}
.csb-signup.csb-su-mod .csb-su-open{flex:none;background:none;border:0;padding:6px 0;margin:0;
 color:var(--su-teal,#15ccad);font:700 13px/1 inherit;min-height:0;box-shadow:none;
 text-transform:none;letter-spacing:0;cursor:pointer;white-space:nowrap}

/* ======== PHONE / TABLET (≤860px) ======================================== */
@media (max-width:860px){
 /* ---- §1 the page order. Nothing is removed; the checklist climbs from
    about 5.5 screens down to 2, and every block below it keeps its place
    relative to the others. Unlisted children fall to 20, i.e. the foot —
    which is why every block either renderer can emit is named. ---- */
 .csb-v4main{display:flex;flex-direction:column}
 .csb-v4main > *{order:20}
 .csb-v4main > .csb-v4hd{order:1}
 .csb-v4main > .csb-chipstrip{order:2}
 /* a live break is the product's own money and the spec calls it the first
    child of main — it stays directly under the hero rather than dropping to
    the foot with the unlisted blocks */
 .csb-v4main > .csb-breakmod{order:3}
 .csb-v4main > .csb-gal{order:4}
 .csb-v4main > #csb_searchband{order:5}
 /* sealed row BEFORE the email line (the DOM has them the other way round) */
 .csb-v4main > #csb_sealed{order:6}
 .csb-v4main > .csb-signup{order:7}
 /* multi-master: Pick your box and everything under it lives inside #pick */
 .csb-v4main > #pick{order:8}
 /* single box: the same blocks, flat. The three cue headers share an order
    so they keep their DOM sequence (expect → parallels → numbered ladder). */
 .csb-v4main > #breakdown,.csb-v4main > #everypar,.csb-v4main > #ladder{order:8}
 .csb-v4main > #ckl{order:9}
 .csb-v4main > #quickfacts{order:11}
 .csb-v4main > #csb_strip{order:12}
 .csb-v4main > #related{order:13}
 .csb-v4main > #odds{order:14}
 .csb-v4main > #desc{order:15}

 /* ---- §1 hero: 22px H1 on one block, lede clamped to two lines, box art
    120px BESIDE the title instead of 280px above it ---- */
 .csb-v4hd .csb-hero{display:grid;grid-template-columns:1fr 120px;gap:12px;align-items:start}
 .csb-v4hd .csb-hero-l{min-width:0}
 /* order:0 undoes the ≤700px rule that put the art first (and so on top) */
 .csb-v4hd .csb-hdart{display:flex;width:120px;aspect-ratio:1/1;height:auto;order:0;margin:0}
 .csb-v4hd .csb-hdart img{width:120px;height:120px;object-fit:contain}
 #csb_h1slot h1,#csb_h1slot .entry-title{font-size:22px !important;line-height:1.2 !important;
  display:block;-webkit-line-clamp:unset;overflow:visible;max-height:none}
 /* the clamp is a clamp on the PAINT: the whole paragraph is still in the
    HTML, which is what Google reads */
 .csb-v4hd .csb-lede.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin-bottom:4px}
 .csb-lede-more{display:inline-block}

 /* ---- §1 sealed boxes: one swipe row instead of a two-column grid ---- */
 #csb_sealed h4{font-size:14px;line-height:1.35}
 .csb-sealed .csb-sd-cards{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:10px;grid-template-columns:none;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px}
 .csb-sealed .csb-sd-cards::-webkit-scrollbar{display:none}
 .csb-sealed .csb-sd-card{flex:0 0 132px;min-width:0}

 /* ---- §1 email signup: one line, ✉ "Get email updates" … "Sign up ›",
    and the real form opens in place on tap. Desktop keeps the full panel. ---- */
 .csb-signup.csb-su-mod{padding:10px 12px;margin:0 0 10px}
 .csb-signup.csb-su-mod .csb-su-f{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
 /* the module's title is a 40px grid (badge + two text rows); on one line it
    becomes a flex row with a 26px badge and no sub-line */
 .csb-signup.csb-su-mod .csb-su-t{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;
  font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .csb-signup.csb-su-mod .csb-su-t::before{flex:0 0 26px;width:26px;height:26px;font-size:14px;grid-row:auto}
 .csb-signup.csb-su-mod .csb-su-t b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .csb-signup.csb-su-mod .csb-su-t span{display:none}
 .csb-signup.csb-su-mod .csb-su-f:not(.open) .csb-su-in,
 .csb-signup.csb-su-mod .csb-su-f:not(.open) .csb-su-msg{display:none}
 .csb-signup.csb-su-mod .csb-su-f.open{flex-wrap:wrap}
 .csb-signup.csb-su-mod .csb-su-f.open .csb-su-in{flex:1 1 100%}
 .csb-signup.csb-su-mod .csb-su-f:not(.open) .csb-su-open{display:inline-block}

 /* ...but NOT on the homepage. Everything above is the checklist pages'
    compact treatment: the module collapses to one line and opens on a tap,
    because there it is a strip between two blocks of checklist. In
    .cc-head it is the spec-01 panel, where "on phones it stacks full-width
    under the sub-line" — the whole point of which is that the field and
    the Sign up button are on screen. Unscoped, these four rules took the
    input, the button, the status line AND "Unsubscribe any time." off
    every phone and tablet, leaving a one-line panel with no form in it. */
 .csb-cc .cc-head .csb-signup.csb-su-mod .csb-su-t{display:grid;grid-template-columns:40px 1fr;
  white-space:normal;overflow:visible;font-size:inherit;font-weight:400}
 .csb-cc .cc-head .csb-signup.csb-su-mod .csb-su-t::before{flex:none;width:40px;height:40px;font-size:20px;grid-row:1/3}
 .csb-cc .cc-head .csb-signup.csb-su-mod .csb-su-t b{font-size:18px;white-space:normal;overflow:visible}
 .csb-cc .cc-head .csb-signup.csb-su-mod .csb-su-t span{display:block}
 .csb-cc .cc-head .csb-signup.csb-su-mod .csb-su-f:not(.open) .csb-su-in{display:block}
 .csb-cc .cc-head .csb-signup.csb-su-mod .csb-su-f:not(.open) .csb-su-msg{display:block}
 .csb-cc .cc-head .csb-signup.csb-su-mod .csb-su-f:not(.open) .csb-su-open{display:none}

 /* ---- §1 the stack above the checklist goes quiet: the two cue cards read
    as header lines, no preview line and no box. On a phone this IS Pick your
    box — the table is already hidden under 700px and the stacked per-format
    cards live inside "What to expect". ---- */
 .csb-cue:not(.open){background:none;border:0;box-shadow:none;padding-left:4px;padding-right:4px}
 .csb-cue:not(.open) .csb-cue-hd{margin:0}
 #expect:not(.open) .csb-cue-line,#ladder:not(.open) .csb-cue-line,
 #breakdown:not(.open) .csb-cue-line,#everypar:not(.open) .csb-cue-line,
 #breakdown:not(.open) .csb-cue-gauto,#everypar:not(.open) .csb-cue-gauto{display:none}
 .csb-v4main > #breakdown,.csb-v4main > #everypar,.csb-v4main > #ladder,
 #pick > #expect,#pick > #ladder{margin:0 0 8px}

 /* ---- §1.4/§7.3 the gallery, 150px and swipeable ---- */
 .csb-gal{height:150px;gap:8px;padding:4px 0 10px;scrollbar-width:none}
 .csb-gal::-webkit-scrollbar{display:none}
 .csb-gal img{height:140px}

 /* ---- §2 the most bid-on strip. Below the checklist with nothing scoped;
    directly after the player's cards once one is (body.csb-scoped, written
    from the scope state by the panel). ---- */
 .csb-strip .csb-fs-cards{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:10px;grid-template-columns:none;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px}
 .csb-strip .csb-fs-card{flex:0 0 150px;min-width:0}
 body.csb-scoped .csb-v4main > #csb_strip{order:10;margin-top:8px}

 /* ---- §1 merged Base group: the chapter header above it says "Base" and
    the set header right under it says "Base Cards". One of them is enough,
    and it is not the one that carries the card range. Scoped by data-ty so a
    product whose first chapter is Inserts keeps its heading. ---- */
 #ck_rows > .gh:first-child:has(.gn[data-ty=base]){display:none}

 /* ---- §1 A–Z: a letter FILTERS (rule 7.9 — a selection filters). The
    filtering is in the renderer; this is just the lit letter. ---- */
 .ckl .az.azon{background:var(--teal,#15ccad);border-color:var(--teal,#15ccad);color:#0b0d10;
  border-radius:6px;font-weight:800}
}

/* ---- MULTI-MASTER: the order INSIDE #pick (the panel that holds Pick your
 * box and everything below it). Same sequence as the single-box page above:
 * cue headers, checklist, scoped strip, FAQ, strip, related, odds, desc. ---- */
@media (max-width:860px){
 #pick{display:flex;flex-direction:column}
 #pick > *{order:20}
 #pick > #expect,#pick > #ladder{order:1}
 #pick > #ckl{order:2}
 body.csb-scoped #pick > #csb_strip{order:3;margin-top:8px}
 /* the Pick-your-box table group: below the checklist, above the strip, and
    hidden entirely under 700px where the table itself already is */
 #pick > h2.t,#pick > .pyb-sub,#pick > .cmp-scroll,#pick > .note,#pick > .pyb-cards{order:4}
 #pick > #quickfacts{order:4}
 #pick > #csb_strip{order:5}
 #pick > #related{order:6}
 #pick > #odds{order:7}
 #pick > #desc{order:8}
}
/* §1.12: the table is hidden under 700px, so its heading, its sub-line and
 * its footnote go with it — today the heading renders over nothing. */
@media (max-width:700px){
 #pick > h2.t,#pick > .pyb-sub,#pick > .note{display:none}
}

/* =========================================================================
 * CART · CHECKOUT · ORDER RECEIVED · LOG IN
 * specs/redesign/04-cart-checkout.md
 *
 * THESE PAGES' OWN STYLESHEET IS css/redesign/cart-checkout.css — the
 * mockup's pages/css/cart-checkout.css, scoped to .csb-ck, enqueued by the
 * plugin. Nothing here restyles them. What is left is the bridge: the
 * frame Storefront puts them in, and the places where WooCommerce emits
 * real markup (a <table>, a radio, a <select>) where the mockup drew a
 * picture of one.
 * ========================================================================= */

/* THE SAME 1440 BOX AS EVERYTHING ELSE, the same way the break pages get
 * it — one element owns the gutter, at every width. */
body.csb-ck-page #content .col-full{max-width:1440px;width:auto;
 padding-left:16px;padding-right:16px;box-sizing:border-box;margin:0 auto}
body.csb-ck-page .site-main{padding-left:0;padding-right:0}
body.csb-ck-page .csb-ck .page{padding-left:0;padding-right:0}
body.csb-ck-page .csb-ck .wrap{max-width:none}

/* THE THEME ALREADY OWNED SOME OF THESE NAMES.
 * Shipping the mockup's class names into a theme that has its own is the
 * one cost the README's "prefix mechanically" clause is about, and
 * .coupon is where it bit: this sheet has carried .coupon{text-align:
 * right} and a 165px .button since long before the redesign. The legacy
 * cart rules are left alone — other pages may still want them — and
 * undone inside .csb-ck, which is the only place the mockup's versions
 * apply. .cart_item carries !important, so this has to as well. */
body.csb-ck-page .csb-ck .woocommerce-cart-form .cart_item.li{display:grid!important;margin-bottom:0}
body.csb-ck-page .csb-ck .woocommerce-cart-form button{float:none;clear:none;width:auto;margin:0}
body.csb-ck-page .csb-ck .coupon{text-align:left}
body.csb-ck-page .csb-ck .coupon .input-text,
body.csb-ck-page .csb-ck .coupon .button{margin:0;width:auto;border-radius:9px}

/* THE MOCKUP NEVER HAD TO BEAT SITE CHROME.
 * Its sheet says a{color:var(--teal)} and nothing about underlines,
 * because its page had no Storefront. Here .hentry .entry-content a wins
 * on specificity and underlines every link in the cart, and the child
 * theme's own h1 paints the heading grey. These put the mockup's own
 * values back at a weight that holds. */
body.csb-ck-page .csb-ck a{text-decoration:none}
body.csb-ck-page .csb-ck a:hover{text-decoration:underline}
body.csb-ck-page .csb-ck h1{color:var(--ink);font-size:28px;font-weight:900;
 line-height:1.15;margin:0;letter-spacing:-.01em}
body.csb-ck-page .csb-ck h1 small{color:var(--mut);font-size:14px;font-weight:600;margin-left:10px}
/* A break's name in a group header is the heading of that group, not a
 * teal link in a list of links — it is a link, so it says so on hover. */
body.csb-ck-page .csb-ck .grp-hd .nm a{color:var(--ink)}
body.csb-ck-page .csb-ck .li .who a{color:var(--ink)}
/* Storefront hangs an arrow off .wc-forward; the mockup's CTA has its own
 * second line and does not want one. */
body.csb-ck-page .csb-ck .cta:after,
body.csb-ck-page .csb-ck .wc-forward:after{display:none}
/* The shipping row: Woo's radio list, flattened into the mockup's line. */
body.csb-ck-page .csb-ck .row.shipping ul#shipping_method{list-style:none;margin:0;padding:0;text-align:right}
body.csb-ck-page .csb-ck .row.shipping li{margin:0;line-height:1.5;display:flex;
 align-items:center;gap:7px;justify-content:flex-end}
body.csb-ck-page .csb-ck .row.shipping label{color:var(--ink);font-weight:700;margin:0}
body.csb-ck-page .csb-ck .row.shipping input[type=radio]{appearance:none;-webkit-appearance:none;
 width:15px;height:15px;border-radius:50%;border:2px solid var(--dim);flex:0 0 15px;margin:0}
body.csb-ck-page .csb-ck .row.shipping input[type=radio]:checked{border:5px solid var(--yel)}
body.csb-ck-page .csb-ck .row.shipping .shipto{display:block;color:var(--dim);
 font-size:11.5px;font-weight:500;margin-top:3px}
body.csb-ck-page .csb-ck .row.shipping .shipping-calculator-button{font-size:11.5px;font-weight:700}

/* Storefront furniture the mockup assumes is not there: its own page
 * title above our h1, and the floated totals/review columns, which are
 * grid children here. */
body.csb-ck-page .entry-header,
body.csb-ck-page .woocommerce-breadcrumb + .woocommerce-notices-wrapper:empty{display:none}
body.csb-ck-page .csb-ck .cart_totals,
body.csb-ck-page .csb-ck #order_review,
body.csb-ck-page .csb-ck #order_review_heading{width:auto;float:none;clear:none;margin:0}
body.csb-ck-page .csb-ck .col2-set,
body.csb-ck-page .csb-ck .col2-set .col-1,
body.csb-ck-page .csb-ck .col2-set .col-2{width:auto;float:none;margin:0}

/* THE REVIEW TABLE IS A REAL <table>, because that element and its class
 * are what update_order_review's AJAX swaps — so it has to stay one. The
 * mockup's .row is a flex div; a <tr> can be the same flex row. */
body.csb-ck-page .csb-ck .woocommerce-checkout-review-order-table{
 width:100%;border:0;margin:8px 0 0;border-collapse:collapse;background:none}
body.csb-ck-page .csb-ck .woocommerce-checkout-review-order-table tbody,
body.csb-ck-page .csb-ck .woocommerce-checkout-review-order-table tr,
body.csb-ck-page .csb-ck .woocommerce-checkout-review-order-table th,
body.csb-ck-page .csb-ck .woocommerce-checkout-review-order-table td{
 background:none!important;border-left:0;border-right:0;display:revert}
body.csb-ck-page .csb-ck .woocommerce-checkout-review-order-table tr{
 display:flex;justify-content:space-between;gap:12px;padding:7px 0;
 border-top:1px solid #1c2126;font-size:14px;color:var(--mut)}
body.csb-ck-page .csb-ck .woocommerce-checkout-review-order-table tr:first-child{border-top:0}
body.csb-ck-page .csb-ck .woocommerce-checkout-review-order-table th,
body.csb-ck-page .csb-ck .woocommerce-checkout-review-order-table td{
 padding:0;font-weight:inherit;text-align:left;border-top:0}
body.csb-ck-page .csb-ck .woocommerce-checkout-review-order-table td{text-align:right}
body.csb-ck-page .csb-ck .woocommerce-checkout-review-order-table b{color:var(--ink)}
body.csb-ck-page .csb-ck .woocommerce-checkout-review-order-table tr.tot{
 font-size:18px;color:var(--ink);border-top:2px solid var(--line);margin-top:4px;padding-top:12px}
body.p--on .csb-ck .woocommerce-checkout-review-order-table tr.tot b{color:var(--yel)}
/* Woo prints the shipping choice as its own <tr> with a <ul>; the mockup
 * draws one line. */
body.csb-ck-page .csb-ck .woocommerce-shipping-totals ul#shipping_method{
 list-style:none;margin:0;padding:0;text-align:right}
body.csb-ck-page .csb-ck ul#shipping_method li{margin:0;line-height:1.6}
body.csb-ck-page .csb-ck ul#shipping_method label{color:var(--ink);font-weight:700}

/* WOO'S FORM FIELDS, GIVEN THE MOCKUP'S .f / .in LOOK. The mockup draws a
 * <div class="in"> where a real form has an <input>. */
body.csb-ck-page .csb-ck .form-row{display:flex;flex-direction:column;gap:4px;margin:0 0 10px;padding:0}
body.csb-ck-page .csb-ck .form-row label{font-size:11.5px;color:var(--dim);font-weight:700}
body.csb-ck-page .csb-ck .form-row .required{color:var(--yel);text-decoration:none}
body.csb-ck-page .csb-ck .form-row input.input-text,
body.csb-ck-page .csb-ck .form-row textarea,
body.csb-ck-page .csb-ck .form-row select,
body.csb-ck-page .csb-ck .form-row .select2-selection--single{
 background:var(--s2);border:1px solid var(--line);border-radius:9px;padding:9px 12px;
 color:var(--ink);font:inherit;font-size:14px;width:100%;height:auto;box-sizing:border-box}
body.csb-ck-page .csb-ck .form-row input.input-text::placeholder{color:var(--dim)}
body.csb-ck-page .csb-ck .form-row input.input-text:focus,
body.csb-ck-page .csb-ck .form-row textarea:focus,
body.csb-ck-page .csb-ck .form-row select:focus{outline:2px solid var(--teal);outline-offset:-2px}
body.csb-ck-page .csb-ck .fields{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
body.csb-ck-page .csb-ck .fields .form-row-wide,
body.csb-ck-page .csb-ck .fields .one,
body.csb-ck-page .csb-ck .fields.one .form-row{grid-column:1/-1}
@media(max-width:600px){body.csb-ck-page .csb-ck .fields{grid-template-columns:1fr}}

/* THE PAYMENT LIST IS WOO'S <ul class="payment_methods">, restyled into
 * the mockup's .po rows — the gateways' own markup and scripts untouched,
 * which is the only way the Authorize.net CIM and PayPal fields keep
 * working. The radio is drawn rather than hidden, so it stays focusable. */
body.csb-ck-page .csb-ck ul.payment_methods{list-style:none;margin:0;padding:0;
 display:flex;flex-direction:column;gap:8px;border:0}
body.csb-ck-page .csb-ck ul.payment_methods > li{
 border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--s2);margin:0}
body.csb-ck-page .csb-ck ul.payment_methods > li > label{
 display:flex;align-items:center;gap:12px;font-weight:800;color:var(--ink);cursor:pointer;margin:0}
body.csb-ck-page .csb-ck ul.payment_methods > li input[type=radio]{
 appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
 border:2px solid var(--dim);flex:0 0 18px;margin:0;background:none}
body.csb-ck-page .csb-ck ul.payment_methods > li input[type=radio]:checked{border:5px solid var(--yel)}
/* SPEC 33 C9 (Sam, Oct 22: "this is so weird looking"). Only the GATEWAY
 * radio marks its row: Authorize.net's saved-card radios inside the row
 * stay checked when another gateway is picked, which outlined two rows.
 *
 * THE CHILD PATH WAS WRONG AND THIS MATCHED NOTHING (found verifying C9
 * on dev, Oct 22, which is what its "verify on staging" note asked for).
 * Woo puts the radio and the label side by side — li > input, li > label,
 * li > div.payment_box — not the li > label > input this assumed, so no
 * row was ever outlined and the selected gateway had no mark at all. The
 * "> " still does the job it was added for: a direct child only, so the
 * saved-card radios nested inside .payment_box cannot reach it. */
body.csb-ck-page .csb-ck ul.payment_methods > li:has(> input[name="payment_method"]:checked){
 border-color:var(--yel);box-shadow:0 0 0 2px rgba(245,197,24,.25)}
/* The saved-card list inside Authorize.net's box: the theme's input{width:100%}
 * stretched its radios into ovals. Rows, a real radio, the brand mark. */
body.csb-ck-page .csb-ck .payment_box .woocommerce-SavedPaymentMethods{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--line)}
body.csb-ck-page .csb-ck .payment_box .woocommerce-SavedPaymentMethods li{margin:0;padding:10px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
body.csb-ck-page .csb-ck .payment_box .woocommerce-SavedPaymentMethods input[type=radio]{
 appearance:none;-webkit-appearance:none;width:18px!important;height:18px!important;min-width:18px;border-radius:50%;
 border:2px solid var(--dim);flex:0 0 18px;margin:0;padding:0;background:none}
body.csb-ck-page .csb-ck .payment_box .woocommerce-SavedPaymentMethods input[type=radio]:checked{border:5px solid var(--yel)}
body.csb-ck-page .csb-ck .payment_box .woocommerce-SavedPaymentMethods label{display:flex;align-items:center;gap:8px;margin:0;color:var(--ink);font-weight:700;font-size:14px}
body.csb-ck-page .csb-ck .payment_box .woocommerce-SavedPaymentMethods label img{max-height:20px;margin:0}
/* "Manage Payment Methods" is a link, not a grey bar */
body.csb-ck-page .csb-ck .payment_box a.button,body.csb-ck-page .csb-ck .payment_box .button{
 background:none!important;border:0;padding:0;margin:6px 0 0;color:var(--teal);font-weight:700;font-size:13px;display:inline-block;width:auto;text-align:left}
/* PayPal's smart buttons render after the row's box; keep them inside the row */
body.csb-ck-page .csb-ck ul.payment_methods > li .ppc-button-wrapper,
body.csb-ck-page .csb-ck ul.payment_methods > li [id^="ppc-button"],
body.csb-ck-page .csb-ck #payment [id^="ppc-button"]{margin:10px 0 0;max-width:100%;position:static}
body.csb-ck-page .csb-ck .payment_box{color:var(--mut);font-size:12.5px;background:none;
 margin:8px 0 0;padding:0;border-radius:0}
body.csb-ck-page .csb-ck .payment_box:before{display:none}
body.csb-ck-page .csb-ck .payment_methods img{max-height:24px;width:auto;margin-left:auto}
/* SPEC 33 C10 (Sam, Oct 22: "how do you get buyers to feel more secure
 * about saving a credit card? the info isn't saved on our website").
 * A lock on the row header and one sentence under the save checkbox, and
 * nothing else — no Verified Merchant Seal (Sam: it looks terrible, and
 * Authorize.net's terms don't allow redrawing it), no PCI badges, no
 * "encryption" copy. The row label is already a flex with a 12px gap and
 * the brand marks carry margin-left:auto, so the lock lands beside them
 * without any margin of its own. */
body.csb-ck-page .csb-ck .payment_methods .csb-secure{
 display:inline-flex;align-items:center;gap:4px;color:var(--mut);
 font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
body.csb-ck-page .csb-ck .payment_methods .csb-secure svg{display:block;opacity:.85}
/* SPEC 33 C10 follow-up (Todd, Oct 22) — the save-card checkbox was as wide
   as the form.

   NOT a missing style. The rule below already dresses every checkbox in
   this scope at 18px with its own tick, and this one was obeying it — its
   height was 18px. The gateway writes style="width:auto" ON THE ELEMENT,
   and an inline declaration outranks a stylesheet one, so width was the
   single property that escaped. .form-row is a COLUMN flex — this sheet's
   own rule at 5147, not Woo's (nothing in woocommerce.css flexes it) — where
   "auto" means "stretch to the cross size", and that is how a checkbox
   came out 961px wide while keeping the right height.

   !important is the only thing that beats an inline style, so it is used
   on exactly the one property that needs it and nothing else — the look
   still comes from the single checkbox rule this page already has, rather
   than a second one that could drift away from it.

   The row is turned back into a row while we are here: a column flex also
   stacked the label underneath instead of beside. */
body.csb-ck-page .csb-ck .payment_box .form-row input[type=checkbox]{width:18px !important}
body.csb-ck-page .csb-ck .payment_box .form-row:has(> input[type=checkbox]){
	flex-direction:row; align-items:center; gap:8px;
}
body.csb-ck-page .csb-ck .payment_box .form-row input[type=checkbox] + label{
	width:auto; margin:0; cursor:pointer;
}
body.csb-ck-page .csb-ck .payment_box p.csb-card-trust{
 margin:6px 0 0;color:var(--mut);font-size:12px;line-height:1.45;max-width:46em}

/* THE SAVED-CARD RADIOS — THE SAME INLINE width:auto AS THE CHECKBOX ABOVE
   (Todd, Oct 24, from a checkout with a card on file: the radios are "a
   weird wide oval", taking the whole width).

   THE RULE MEANT FOR THEM HAS NEVER MATCHED ANYTHING. The block above is
   aimed at ul.woocommerce-SavedPaymentMethods, which is WooCommerce CORE's
   saved-card list. Authorize.net does not render it. SkyVerge writes ONE
   <p class="form-row form-row-wide"> holding the Manage link, then
   input + label + <br> per stored card, then the "use a new card" pair
   (class-sv-wc-payment-gateway-payment-form.php:597, :675, :775). So those
   rules — width:18px!important and all — have never been evaluated once.

   WHAT DOES REACH THEM is the gateway-row rule at 5176: the combinator
   after the li is a DESCENDANT, so a radio three levels down inside
   .payment_box collects its appearance:none, and that takes away the
   native 13px box. Width then falls through to the gateway's own
   style="width:auto", which no stylesheet declaration outranks.

   And .form-row here is a COLUMN flex — THIS sheet's rule at 5147, not
   Woo's; the note at 5233 has that backwards, nothing in woocommerce.css
   flexes a .form-row. A flex item whose cross size is auto stretches to
   the container, so: 18px tall, as wide as the card, radius 50%. A lens.
   The column is also why each label sat on its own line under its dot.
   Measured on dev before this fix: container 185px, radio 179px.

   Same remedy as the save-card checkbox at 5244 — !important on the ONE
   property the inline style took, and nothing else, so the look still
   comes from the rules this page already has. That includes the :checked
   ring at 5179, which is already matching and simply becomes visible
   again once the dot is a dot.

   KEYED ON THE GROUP NAME, not on either id. The token id is per stored
   card, and name="wc-<gateway>-payment-token" is what both radios must
   share to BE one radio group — so one line covers the eCheck gateway and
   anything else SkyVerge adds later. */
body.csb-ck-page .csb-ck .payment_box input[type=radio][name$="-payment-token"]{
 width:18px!important;vertical-align:middle}

/* ORDINARY FLOW, NOT flex-direction:row. The checkbox above could take a
   row because its <p> holds one checkbox and one label; this one holds the
   Manage link, every radio, every label and the <br>s between them, and a
   row would put all of them on a single line. Blocks the <p> instead, so
   SkyVerge's <br>s do the job they are in the markup to do.

   This rule does NOT ship without the width above it: out of flex context
   the radio is an inline-block, appearance:none leaves it no intrinsic
   size, and width:auto would shrink-to-fit to nothing — an invisible,
   unclickable radio instead of an oval. */
body.csb-ck-page .csb-ck .payment_box .form-row:has(> input[type=radio][name$="-payment-token"]){
 display:block}

/* The Manage link is an <a class="button"> with no <br> after it (:643),
   so in ordinary flow it would share the first card's line. */
body.csb-ck-page .csb-ck .payment_box a.sv-wc-payment-gateway-payment-form-manage-payment-methods{
 display:block;margin:0 0 8px}

/* BOTH labels, not just the saved-card one. 5148 dresses every label in a
   .form-row at 11.5px dim, and the "use a new card" label carries no class
   at all (:781) — so a selector keyed on .sv-wc-...-saved-payment-method
   would catch one and leave the other small and grey under a white 14px
   card. The adjacent sibling covers the pair and says it once.

   AND IT SETS NO display. Both labels are already laid out by the
   gateway and we would only lose: the saved-card one is inline-block
   from the gateway's OWN stylesheet,
     .woocommerce-checkout #payment div.payment_box
     .sv-wc-payment-gateway-payment-form-saved-payment-method
   (sv-wc-payment-gateway-payment-form.min.css), which is (1,3,1) — an id,
   so it beats this selector's (0,7,3) however many classes we pile on,
   and only !important would take it. The "use a new card" label carries
   no class, so that rule misses it, but SkyVerge writes style="display:
   inline" on it (:781) and an inline declaration beats us too. Both are
   fine where they are; what they needed was the type, which 5148 was
   printing at 11.5px dim under a white 14px card. */
body.csb-ck-page .csb-ck .payment_box .form-row > input[type=radio][name$="-payment-token"] + label{
 vertical-align:middle;
 width:auto;margin:0;cursor:pointer;color:var(--ink);font-weight:700;font-size:14px}
body.csb-ck-page .csb-ck .payment_box .form-row > input[type=radio][name$="-payment-token"] + label img{
 max-height:20px;width:auto;margin:0 6px 0 0;vertical-align:middle}

/* THE PAYMENT PANEL IS WOO'S #payment, which this sheet paints black in
 * dark mode and Storefront paints grey otherwise. Inside .csb-ck the .card
 * around it is the surface, so the panel is nothing. */
body.csb-ck-page .csb-ck #payment,
body.csb-ck-page.dark-mode .csb-ck #payment,
body.csb-ck-page .csb-ck #payment .place-order,
body.csb-ck-page.dark-mode .csb-ck #payment .place-order,
body.csb-ck-page.dark-mode .csb-ck #payment .payment_methods > li:not(.woocommerce-notice),
body.csb-ck-page.dark-mode .csb-ck #payment .payment_box{
 background:none!important;background-color:transparent!important;border-radius:0;padding:0;color:inherit}
body.csb-ck-page.dark-mode .csb-ck #payment .payment_methods > li:not(.woocommerce-notice){
 background:var(--s2)!important;padding:10px 12px;color:var(--ink)}
body.csb-ck-page .csb-ck #payment .place-order{margin:0}
/* Woo prints its own privacy sentence inside #payment; .fine below the
 * cards is the mockup's, and says the same thing plus the terms line. */
body.csb-ck-page .csb-ck .woocommerce-privacy-policy-text{display:none}
/* A real checkbox where the mockup drew a square. */
body.csb-ck-page .csb-ck input[type=checkbox]{appearance:none;-webkit-appearance:none;
 width:18px;height:18px;border:1px solid var(--line);border-radius:5px;background:var(--s2);
 flex:0 0 18px;margin:0;vertical-align:-4px;cursor:pointer;position:relative}
body.csb-ck-page .csb-ck input[type=checkbox]:checked{background:var(--yel);border-color:var(--yel)}
body.csb-ck-page .csb-ck input[type=checkbox]:checked:after{content:"";position:absolute;
 left:5px;top:1px;width:5px;height:10px;border:solid #111;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
/* Group art is an <img> here, a background in the mockup. */
body.csb-ck-page .csb-ck .grp-hd .art img{width:100%;height:100%;object-fit:contain;display:block;border-radius:8px}
body.csb-ck-page .csb-ck .grp-hd .art a{display:block;width:100%;height:100%}
body.csb-ck-page .csb-ck .mini .grp-hd .art{width:40px;height:40px;flex:0 0 40px}
/* "Ship to a different address" repeats the address card; its Change is
 * the same link, not a grey button. */
body.csb-ck-page .csb-ck .csb-diff-card .chg,
body.csb-ck-page .csb-ck .addr button{background:none;border:0;color:var(--teal);
 font:inherit;font-weight:700;cursor:pointer;padding:0}

/* PLACE ORDER — the mockup's .cta, and .stick on a phone (rule 7.9). */
body.csb-ck-page .csb-ck #place_order,
body.csb-ck-page .csb-ck .cta,
body.csb-ck-page .csb-ck button.cta{
 display:block;width:100%;margin-top:14px;background:#f5c518!important;background-image:none!important;
 color:#111!important;font-weight:900;border:0!important;border-radius:12px;padding:16px;
 text-align:center;font-size:17px;text-decoration:none;text-shadow:none!important;box-shadow:none!important}
body.csb-ck-page .csb-ck #place_order:hover,
body.csb-ck-page .csb-ck .cta:hover{background:#ffd438!important;color:#111!important}
body.csb-ck-page .csb-ck .cta small{display:block;font-size:12px;font-weight:700;color:#5b4a00}
body.csb-ck-page .csb-ck .woocommerce-terms-and-conditions-wrapper{color:var(--dim);font-size:11.5px}
@media(max-width:900px){
 body.v--checkout .csb-ck #place_order{position:fixed;left:10px;right:10px;bottom:10px;z-index:5;width:auto}
 body.v--checkout .site-main{padding-bottom:84px}
 body.v--checkout .storefront-handheld-footer-bar{display:none}
}

/* THE POINTS SWITCH, WITH A REAL BALANCE IN IT.
 * The mockup's sample is 66,500 — six characters — and its phone rule
 * only tightens the gap. A live balance can be 1,000,275, and at 358px
 * that squeezed the sentence beside it into a four-line column. The row
 * wraps instead: number, label and switch on one line, the sentence
 * under them. */
@media(max-width:600px){
 body.csb-ck-page .csb-ck .points{flex-wrap:wrap}
 body.csb-ck-page .csb-ck .points .pt{order:1}
 body.csb-ck-page .csb-ck .points .lbl{order:2;margin-left:auto}
 body.csb-ck-page .csb-ck .points .sw,
 body.csb-ck-page .csb-ck .points form{order:3}
 body.csb-ck-page .csb-ck .points .t{order:4;flex:1 0 100%}
}

/* WHAT THE MOCKUP DREW WITH AN INLINE STYLE, given a name.
 * cart-checkout.js writes these two straight onto the element. */
body.csb-ck-page .csb-ck .sb-left{color:var(--dim);font-size:11.5px;margin-left:24px}
body.csb-ck-page .csb-ck .grp.empty{padding:22px;text-align:center;color:var(--mut)}
body.csb-ck-page .csb-ck .grp.empty b{color:var(--ink);font-size:16px;display:block}
body.csb-ck-page .csb-ck .grp.empty a{display:inline-block;margin-top:12px;font-weight:800}
/* "Ships from Sam", only on a cart that spans more than one breaker. */
body.csb-ck-page .csb-ck .sb-hd.bkr{margin:14px 0 2px}

/* A QUANTITY STEPPER ON THE ROWS THAT HAVE ONE.
 * The mockup's .li is a four-column grid and draws no stepper — its own
 * note says "quantities … stock Woo", so the control is meant to exist;
 * it just was not drawn. .has-qty adds the fifth column rather than
 * wrapping a fifth child onto a new row. */
body.csb-ck-page .csb-ck .li.has-qty{grid-template-columns:34px 1fr auto auto auto}
body.csb-ck-page .csb-ck .li .qty{display:flex;align-items:center;border:1px solid var(--line);
 border-radius:9px;background:var(--s2);overflow:hidden}
body.csb-ck-page .csb-ck .li .qty button{background:none;border:0;color:var(--mut);
 font:inherit;font-weight:800;padding:6px 10px;cursor:pointer;line-height:1}
body.csb-ck-page .csb-ck .li .qty button:hover{color:var(--ink)}
body.csb-ck-page .csb-ck .li .qty input.qty{width:40px;background:none;border:0;color:var(--ink);
 text-align:center;font:inherit;font-weight:700;-moz-appearance:textfield;padding:0}
body.csb-ck-page .csb-ck .li .qty input.qty::-webkit-outer-spin-button,
body.csb-ck-page .csb-ck .li .qty input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
body.csb-ck-page .csb-ck .cart-actions{margin-top:12px}
body.csb-ck-page .csb-ck .cart-actions .upd{background:none;border:1px solid var(--line);
 color:#c9d1d6;border-radius:9px;padding:9px 14px;font:inherit;font-weight:700}

/* THE ADDRESS FOLD. The mockup shows the saved address with a "Change"
 * link beside it; the form behind it is Woo's, posted in full either way
 * (see form-billing.php). A class toggle, not a re-render. */
body.csb-ck-page .csb-ck .addr .chg{background:none;border:0;color:var(--teal);
 font:inherit;font-weight:700;cursor:pointer;padding:0}
body.csb-ck-page .csb-ck .csb-addr-form.folded{display:none}
body.csb-ck-page .csb-ck .csb-diff-card .addr{margin-top:10px}
body.csb-ck-page .csb-ck .csb-ship-form.folded{display:none}

/* THE SIGN-IN SCREEN — specs/redesign/04 §"Log-in page: passwordless".
 *
 * The Log in / Create account tab pair is gone: the spec folds account
 * creation into the one email field, so there is nothing to toggle
 * between. What is left is the two steps (ask for the email, then take
 * the code) and the password kept one tap down. */
body.csb-ck-page .csb-ck .login .card{max-width:460px;margin:24px auto}
body.csb-ck-page .csb-ck .login h1{font-size:22px;margin:0 0 4px}

/* The notices this screen raises itself — wrong code, expired link, sent. */
body.csb-ck-page .csb-ck .csb-note{border-radius:10px;padding:10px 12px;margin:10px 0 2px;
 font-size:13px;line-height:1.45;border:1px solid var(--line);background:var(--s2);color:var(--ink)}
body.csb-ck-page .csb-ck .csb-note.err{border-color:#8a3a3a;background:rgba(255,90,90,.08)}
body.csb-ck-page .csb-ck .csb-note.ok{border-color:var(--teal);background:rgba(21,204,173,.08)}

/* Six digits, spaced out, big enough to read off a notification. The
 * extra .f in the selector is there to outrank Storefront's own
 * `.woocommerce form .form-row input.input-text`, which carries the same
 * weight and loads later. */
body.csb-ck-page .csb-ck .f input.input-text.csb-code{font-size:26px;font-weight:900;
 letter-spacing:.34em;text-align:center;padding:12px 10px}

/* The two ways out, on one line and left-aligned like everything else. */
body.csb-ck-page .csb-ck .csb-resend{margin:0;display:inline}
body.csb-ck-page .csb-ck .csb-resend .alt,
body.csb-ck-page .csb-ck .v-login a.alt{background:none;border:0;padding:0;cursor:pointer;
 font:inherit;font-weight:700;color:var(--teal);display:inline;margin:0;text-align:left}
body.csb-ck-page .csb-ck .csb-resend + a.alt::before{content:" · ";color:var(--dim);font-weight:400}

/* "or" between the email field and the social buttons. */
body.csb-ck-page .csb-ck .csb-or{display:flex;align-items:center;gap:10px;margin:16px 0 12px;
 color:var(--dim);font-size:12px;text-transform:uppercase;letter-spacing:.1em}
body.csb-ck-page .csb-ck .csb-or::before,
body.csb-ck-page .csb-ck .csb-or::after{content:"";flex:1;height:1px;background:var(--line)}
body.csb-ck-page .csb-ck .csb-social{margin-bottom:4px}

/* The password, one tap down. A <details> so it works with no script. */
body.csb-ck-page .csb-ck .csb-pw{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
body.csb-ck-page .csb-ck .csb-pw > summary{cursor:pointer;color:var(--mut);font-size:13px;
 font-weight:700;list-style:none}
body.csb-ck-page .csb-ck .csb-pw > summary::-webkit-details-marker{display:none}
body.csb-ck-page .csb-ck .csb-pw > summary::after{content:" ⌄"}
body.csb-ck-page .csb-ck .csb-pw[open] > summary::after{content:" ⌃"}
body.csb-ck-page .csb-ck .csb-pw > summary:hover{color:var(--teal)}
/* Woo's password reveal is a white chip on a dark field. */
body.csb-ck-page .csb-ck .woocommerce-form__input-password-wrapper,
body.csb-ck-page .csb-ck .password-input{position:relative;display:block}
body.csb-ck-page .csb-ck .show-password-input{position:absolute;right:10px;top:50%;
 transform:translateY(-50%);background:none;border:0;opacity:.6;filter:invert(1)}
body.csb-ck-page .csb-ck .show-password-input:hover{opacity:1}

/* ORDER RECEIVED.
 * The mockup has no h2 on this page — its sample receipt is one block —
 * but a real order gets a grouped list and Woo's own order table under
 * it, and both need naming. h1's treatment, one step down. */
body.csb-ck-page .csb-ck h2{color:var(--ink);font-size:20px;font-weight:900;
 margin:22px 0 0;letter-spacing:-.01em}
/* WOO'S ORDER DETAILS TABLE stays — it is the itemised receipt, and the
 * mockup's own note calls this "a stock receipt". It only needs the same
 * un-painting the checkout review table gets. */
body.csb-ck-page .csb-ck .woocommerce-table--order-details,
body.csb-ck-page .csb-ck .woocommerce-table--order-details tbody,
body.csb-ck-page .csb-ck .woocommerce-table--order-details tfoot,
body.csb-ck-page .csb-ck .woocommerce-table--order-details tr,
body.csb-ck-page .csb-ck .woocommerce-table--order-details th,
body.csb-ck-page .csb-ck .woocommerce-table--order-details td,
body.csb-ck-page .csb-ck .woocommerce-customer-details address{
 background:none!important;color:var(--mut);border-color:#1c2126}
body.csb-ck-page .csb-ck .woocommerce-table--order-details{width:100%;margin-top:10px;
 border:1px solid var(--line);border-radius:14px;overflow:hidden;border-collapse:collapse}
body.csb-ck-page .csb-ck .woocommerce-table--order-details th,
body.csb-ck-page .csb-ck .woocommerce-table--order-details td{padding:9px 14px;font-size:13.5px}
body.csb-ck-page .csb-ck .woocommerce-table--order-details tfoot th,
body.csb-ck-page .csb-ck .woocommerce-table--order-details thead th{color:var(--ink)}
body.csb-ck-page .csb-ck .woocommerce-customer-details address{border:1px solid var(--line);
 border-radius:10px;padding:10px 12px;font-style:normal}
body.csb-ck-page .csb-ck .woocommerce-order-details__title,
body.csb-ck-page .csb-ck .woocommerce-column__title{color:var(--ink);font-size:20px;font-weight:900}

/* ORDER RECEIVED: the grouped list is the cart's .grp, full cards. */
body.csb-ck-page .csb-ck #donegroups{margin-top:14px}
body.csb-ck-page .csb-ck .next{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
@media(max-width:900px){body.csb-ck-page .csb-ck .next{grid-template-columns:1fr}}
body.csb-ck-page .csb-ck .receipt{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
@media(max-width:700px){body.csb-ck-page .csb-ck .receipt{grid-template-columns:1fr 1fr}}
body.csb-ck-page .csb-ck .hero-done{display:flex;align-items:center;gap:16px;margin-top:14px}
body.csb-ck-page .csb-ck .nx .b{display:inline-block;margin-top:10px;background:var(--yel);color:#111;
 font-weight:900;border-radius:9px;padding:9px 14px;text-decoration:none}
body.csb-ck-page .csb-ck .nx .b.tw{background:var(--tw);color:#fff}
body.csb-ck-page .csb-ck .nx .l{display:inline-block;margin-top:10px;font-weight:700}
/* =========================================================================
 * BREAK PAGES — specs/redesign/02-break-pages.md
 *
 * THE PAGE'S OWN STYLESHEET IS css/redesign/break-pages.css — the mockup's
 * pages/css/break-pages.css, scoped to .csb-bp, enqueued by the plugin.
 * Nothing here restyles the break page; what is left is the Storefront
 * furniture the mockup assumes is not there.
 * ========================================================================= */
/* Storefront floats .summary right at 48% beside the gallery column. The
 * gallery is gone on a break page, so without this the whole page sat in
 * the right-hand half with an empty column beside it. Its own selector is
 * .single-product div.product .summary, which ties the short form on
 * specificity and wins on source order — hence the long one. */
/* THE SAME 1440 BOX AS EVERYTHING ELSE (Todd, 18 Oct).
 *
 * Storefront gives a product page a 1320px content-box .col-full with
 * 2.6em padding, so a break page's content started at x=250 while the
 * header logo started at x=80. The site's own frame — the homepage
 * bands, the checklist page, the search results, #masthead — is
 * max-width:1440 + 16px gutters, border-box. This is that, spelled out
 * the same way #masthead .col-full spells it out, and it carries the
 * product description below the break page with it.
 *
 * At every width, not just desktop: one element owning the gutter is
 * the whole point, and leaving phones on Storefront's padding would
 * mean the break page's margin changed if Storefront ever did. */
body.csb-break-page #content .col-full,
body.csb-breaks-list #content .col-full{max-width:1440px;width:auto;
 padding-left:16px;padding-right:16px;box-sizing:border-box;margin:0 auto}
body.csb-breaks-list .site-main{padding-left:0;padding-right:0}
/* functions.php wraps the loop in .csbhomecontain > .home-section-contain,
 * and that second one is width:85% + max-width:1320 — a homepage-era box
 * that left the grid 1154 wide inside a 1440 frame. Those wrappers are
 * emitted in half a dozen places, so this unpicks them only here. */
body.csb-breaks-list .csbhomecontain{padding-left:0;padding-right:0}
body.csb-breaks-list .home-section-contain{width:100%;max-width:none;margin:0}
/* .page supplies the dark panel and the vertical rhythm; the gutters are
 * .col-full's now, or the three would stack — .site-main adds its own
 * 10px a side below 768 (line ~1905), which put the phone gutter at 26px
 * against the mockup's 12. */
body.csb-break-page .site-main{padding-left:0;padding-right:0}

/* ---- RULE 7.9: the bottom bar has to actually stick --------------------
 *
 * The mockup's .cartbar and .jump are position:sticky, which on the real
 * page NEVER STICKS: three ancestors clip — div#product-<id> and div#page
 * from Storefront's `.single-product div.product{overflow:hidden}` and
 * `.site{overflow-x:hidden}`, plus body — and a sticky element inside a
 * clipping ancestor sticks to that box, which scrolls away with the page.
 * Measured in headless Chrome at 390x844: after scrolling 2000px the bar's
 * top was 0 and it was off screen.
 *
 * FIXED, NOT UN-CLIPPED. Removing Storefront's overflow-x:hidden would
 * make it stick, and would also hand back the horizontal scrolling rule
 * 7.9 forbids — the same measurement shows scrollWidth === clientWidth
 * today, i.e. that guard is doing real work. position:fixed is immune to
 * the clipping ancestors (the .ov overlay on this page already proves it)
 * and touches nothing of Storefront's.
 *
 * Only ever ONE of these is in the markup — csb_break_page_jump() is not
 * emitted when the cart bar drew — so they cannot stack. */
body.csb-break-page .csb-bp .cartbar,
body.csb-break-page .csb-bp .jump{
 position:fixed;left:50%;transform:translateX(-50%);
 width:min(1100px,calc(100% - 24px));margin-top:0;z-index:40}
body.csb-break-page .csb-bp .cartbar{bottom:12px}
body.csb-break-page .csb-bp .jump{bottom:12px}
/* The scheduled bar (Sam, Oct 16 — there is no scheduled state in the
   mockup, so the chip takes the homepage card's outlined-yellow drop
   treatment). Not a link: nothing is clickable until the drop. */
body.csb-break-page .csb-bp .jump.sched{justify-content:space-between}
body.csb-break-page .csb-bp .jump .drop{
 background:none;border:2px solid var(--yel,#f5c518);color:var(--yel,#f5c518);
 font-weight:900;border-radius:9px;padding:6px 13px;white-space:nowrap;cursor:default}
/* the page needs room under it, or the bar covers the last row */
body.csb-break-page .csb-bp .wrap{padding-bottom:84px}

/* Woo drops its own "View cart" link in beside the button after an ajax
   add; the toast and the "In cart ✓" flip say it better and in one place. */
body.csb-break-page .csb-bp .added_to_cart{display:none}

/* ---- the cart toast (spec 02: "Added Boston Red Sox · View cart →") ----
 * The mockup injects this from JS as an inline <style>, so it never
 * reached pages/css/break-pages.css and cannot come through the scoper.
 * It lives here instead of being written into the generated stylesheet,
 * which says DO NOT HAND-EDIT. Above the bars at z-index 60, as the
 * mockup has it. */
body.csb-break-page .csb-bp .tst{
 position:fixed;left:50%;transform:translateX(-50%) translateY(10px);
 bottom:22px;z-index:60;display:flex;align-items:center;gap:12px;
 /* max-content so a two-word team name does not wrap onto three lines in
    a 190px box; the max-width is what keeps it on a 390px screen */
 width:max-content;max-width:calc(100% - 24px);
 background:var(--s2,#181c21);border:1px solid var(--teal,#15ccad);border-radius:12px;
 padding:11px 16px;color:var(--ink,#eef2f3);font-weight:700;font-size:14px;
 box-shadow:0 14px 44px rgba(0,0,0,.6);
 opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
body.csb-break-page .csb-bp .tst.on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
/* clear the bottom bar when there is one, rather than landing on top of
   it — rule 7.9 is about one bar, and a toast covering the bar is the
   same problem wearing a different hat */
body.csb-break-page .csb-bp .tst.above{bottom:84px}
body.csb-break-page .csb-bp .tst b{color:var(--teal,#15ccad)}
body.csb-break-page .csb-bp .tst > span{min-width:0}
body.csb-break-page .csb-bp .tst a{color:var(--teal,#15ccad);font-weight:800;white-space:nowrap}
@media (prefers-reduced-motion:reduce){
 body.csb-break-page .csb-bp .tst{transition:none;transform:translateX(-50%)}
 body.csb-break-page .csb-bp .tst.on{transform:translateX(-50%)}
}
body.csb-break-page .csb-bp .page{padding-left:0;padding-right:0}
/* SPEC 33 B1 (Sam, Oct 22: "why is the left side all crunched"). The
 * break page went full-width here while the title and lede kept the
 * mockup's caps, so on a wide monitor the text huddles left of a void
 * before the art column. Every other redesigned page (.col-full on the
 * homepage, checklists, Break Room, My Account) is capped at 1440px and
 * centred; the break page now matches them. */
body.csb-break-page .csb-bp .wrap{max-width:1200px;padding-left:18px;padding-right:18px}
/* SPEC 33 B3 (Sam, Oct 22: "the text isn't right within the color" —
 * and, shown the checklist page, "like here's how the color gradient looks
 * on checklists"). The break hero takes the checklist hero's treatment
 * (.csb-v4hd .csb-hero above): a bordered 14px card with 16/18px padding
 * and a wash that fades from the top down inside it, in the break type's
 * own colour (--washrgb, break-pages.css). The old page-wide radial glow,
 * centred in the corner of a 1408px box the text never lined up with,
 * goes. */
body.csb-break-page.w--on .csb-bp .bt .page{background:var(--bg)}
body.csb-break-page .csb-bp .bt .hero{background:linear-gradient(180deg,rgba(var(--washrgb,57,80,137),.22),transparent 85%);
 border:1px solid rgba(var(--washrgb,57,80,137),.55);border-radius:14px;padding:16px 18px;margin-top:10px}
/* SPEC 33 B8 (Sam, Oct 22): the buy box meter carries its own caption —
 * spots left on the left, sold on the right — instead of an unlabelled bar
 * under a heading that repeated the number. */
body.csb-break-page .csb-bp .buybox .meterline{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 6px;font-size:13px;color:var(--mut)}
body.csb-break-page .csb-bp .buybox .meterline b{color:var(--ink);font-size:15px}
/* SPEC 33 B6 (Sam, Oct 22: "the break picture and description under it
 * is too small"). The art column was 240px (mockup 300); it is 360px on
 * desktop, and the shipping note under it reads at 14px instead of 12.5. */
@media (min-width:1024px){body.csb-break-page .csb-bp .bt .hero{grid-template-columns:1fr 360px;gap:32px}}
body.csb-break-page .csb-bp .bt .hero .ship{font-size:14px;line-height:1.45;padding:14px 16px}
/* The lede was drawn against an 804px column. At 1408 it stretches to
 * 1144 — about 130 characters a line, well past readable, and it loses a
 * line, which is most of the gap that opens under the hero text. A
 * measure cap puts the line length back where the mockup had it. */
/* spec 33 B1: with the page capped at 1200px the lede's column is the mockup's 804px again, so it runs the column as drawn */
body.csb-break-page .csb-bp .bt .lede{max-width:none}
body.csb-break-page .woocommerce-product-gallery{display:none}
body.csb-break-page.single-product div.product{display:block}
body.csb-break-page.single-product div.product .summary.entry-summary,
body.csb-break-page.single-product div.product .summary,
body.csb-break-page .summary.entry-summary{width:100%;float:none;margin:0;clear:both}
/* RULE 7.9 — one bottom bar at a time. The mockup's .jump is sticky to the
 * bottom on phones, so Storefront's handheld bar cannot also be there. */
@media (max-width:900px){body.csb-break-page .storefront-handheld-footer-bar{display:none}}

/* THE MOCKUP'S PLACEHOLDERS, GIVEN REAL IMAGES.
 * .boxart, .bcard .art and .gal .ph are grey panels in the mockup with a
 * word in the middle. With a photograph behind them they have to be told
 * to fit it — the mockup never had to say so. */
body.csb-break-page .csb-bp .boxart.im,
body.csb-break-page .csb-bp .bcard .art.im,
body.csb-break-page .csb-bp .gal .ph.im{
 background-position:center;background-size:contain;background-repeat:no-repeat;
 background-color:#131a20}
/* SPEC 02 (Oct 18): the gallery shows six tiles, four on a phone. */
@media (max-width:600px){body.csb-break-page .csb-bp .gal .g.csb-lg{display:none}}
/* THE PER-ENTRY CHECKLIST LINK ON A DRAFTED BREAK (Todd, 18 Oct).
 * .rankol is a read-only list in the mockup, so it has no link to style;
 * these two match .team .ck and .team .cnt, which do. */
body.csb-break-page .csb-bp .rankol .ck{margin-left:auto;white-space:nowrap;text-decoration:none;
 color:var(--teal);font-weight:700;font-size:12px}
body.csb-break-page .csb-bp .rankol .ck:hover{text-decoration:underline}
body.csb-break-page .csb-bp .rankol .meta{color:var(--mut);font-size:12px;white-space:nowrap}
body.csb-break-page .csb-bp .rankol .t{min-width:0}
/* Storefront's .site-header is z-index:999; the mockup's overlay is 50,
 * which it never had to beat because the mockup has no site chrome. The
 * header painted over the modal's own header. */
body.csb-break-page .csb-bp .ov{z-index:1000}
/* Storefront's .site-header is z-index:999; the mockup's overlay is 50,
 * which it never had to beat because the mockup has no site chrome. The
 * header painted over the modal's own header. */
body.csb-break-page .csb-bp .ov{z-index:1000}
/* PLAYER TILES ARE TEAM TILES (Todd, 18 Oct).
 *
 * The mockup draws the player picker as .pl rows — a 34px logo, a 1fr
 * middle and the buy button, three to a line. That works for its own
 * twenty-four short names; with 232 real players and a team name on every
 * row the middle column lands at 137px and every single row wraps, so the
 * tiles come out ragged, 69px here and 83px there. They are the same
 * thing a team tile is, so they are drawn as one: .teams > .team, and the
 * whole logo-first treatment comes with it.
 *
 * The tail past the first batch is hidden until "Show all" — the mockup's
 * own .showmore. Pre-JS it is hidden here so 232 cards never flash. */
body.csb-break-page .csb-bp .team.csb-rest{display:none}
body.csb-break-page .csb-bp .showmore a{color:var(--teal);text-decoration:none}
body.csb-break-page .csb-bp .showmore a:hover{text-decoration:underline}
/* A player's name takes two lines more often than a team's. Reserve the
 * second line so the counts below it start level across a row — and keep
 * .nm plain text, not a flex row, or "Munetaka Murakami" breaks into one
 * flex item per word and drops the RC badge onto a third line. */
body.csb-break-page .csb-bp .plist-cards .nm{min-height:34px}
body.csb-break-page .csb-bp .plist-cards .who{min-height:16px}
/* The player picker's search box is an <input>; the mockup drew it as a
 * span, so it has no input styling of its own. */
body.csb-break-page .csb-bp .psearch input{flex:1;min-width:0;background:none;border:0;outline:0;
 color:var(--ink);font:inherit;font-size:14px;padding:0}
body.csb-break-page .csb-bp .psearch input::placeholder{color:var(--dim)}

/* =========================================================================
 * LIVE BREAKS (/current-breaks/) — the existing WooCommerce loop, restyled
 * into the redesign's language. No mockup exists for this page (README:
 * "Not designed yet"), so nothing here is a new layout.
 * ========================================================================= */
.csb-lb-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:6px 0 4px}
.csb-lb-meta .pill{border-radius:99px;padding:3px 9px;font-size:10px;font-weight:800;letter-spacing:.07em;
 border:1px solid #272d34;background:#181c21;color:#98a4ab}
.csb-lb-meta .pill:first-child{background:rgba(245,197,24,.14);border-color:#f5c518;color:#f5c518}
.csb-lb-meta .pill.live{background:#9146ff;border-color:#9146ff;color:#fff}
.csb-lb-meta .pill.full{background:#1f242a;color:#7d8a92}
.csb-lb-meta .date{font-size:11.5px;font-weight:800;color:#f5c518;letter-spacing:.03em}
.csb-lb-meta .date.soon{color:#7d8a92;font-weight:600}
.csb-lb-meta .date.drop{color:#f5c518}
.csb-lb-left{font-size:12.5px;color:#98a4ab;margin-bottom:4px}
.csb-lb-left b{color:#eef2f3;font-size:15px;font-weight:800}
/* the loop card itself */
.woocommerce ul.products li.product{background:#111418;border:1px solid #272d34;border-radius:14px;
 padding:12px;overflow:hidden}
.woocommerce ul.products li.product .csb-product-image-wrapper img,
.woocommerce ul.products li.product img{border-radius:10px;margin-bottom:8px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:15px;font-weight:800;
 line-height:1.25;color:#eef2f3;padding:0}
.woocommerce ul.products li.product .price{color:#eef2f3;font-weight:800}
.woocommerce ul.products li.product .button{background:#f5c518;color:#111;font-weight:900;border-radius:10px}
.woocommerce ul.products li.product .button:hover{background:#ffd438;color:#111}
/* the older "7 teams left" line, where the redesign has printed its own */
.woocommerce ul.products li.product.csb-lb-has-left .csb-stock:first-of-type{display:none}
.csb-ship-form.folded{display:none}
.csb-diff-card .csb-addr{margin-top:10px}

/* =========================================================================
 * BREAK ROOM — moved to css/redesign/break-room-bridge.css
 *
 * The room's bridge rules used to live here. They are the same rules,
 * unchanged, in a file of their own so the admin Current Break screen can
 * load them WITHOUT loading this whole stylesheet into wp-admin — see the
 * note at the top of that file.
 *
 * Both template-livestream.php and CardSmiths_Admin_Current enqueue it
 * after css/redesign/break-room.css, and it is in
 * csb_perf_critical_sources() so the critical blocks still see it.
 * ========================================================================= */

/* =========================================================================
 * RANKING PAGE (/my-account/open-drafts/) — specs/redesign/02
 * The drag list, move-to-top/bottom and Lock are the existing ones; these
 * are the redesign's status box, quick orders, row counts and sticky bar.
 * ========================================================================= */
#single-draft-left{--cink:#eef2f3;--cmut:#98a4ab;--cdim:#7d8a92;--cline:#272d34;
 --cs1:#111418;--cs2:#181c21;--cs3:#1f242a;--cteal:#15ccad;--cyel:#f5c518}
.csb-rk-status{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 14px;
 border:1px solid var(--cline);border-radius:12px;background:var(--cs1);padding:11px 14px}
.csb-rk-status .pill{border-radius:99px;padding:4px 11px;font-size:10.5px;font-weight:800;
 letter-spacing:.09em;white-space:nowrap}
.csb-rk-open .pill{background:rgba(245,197,24,.16);border:1px solid var(--cyel);color:var(--cyel)}
.csb-rk-locked .pill{background:var(--cteal);color:#04241c}
.csb-rk-closed .pill{background:var(--cs3);color:var(--cdim)}
.csb-rk-status .say{color:var(--cmut);font-size:13px;flex:1 1 240px}
.csb-rk-open{border-color:var(--cyel)}

.csb-rk-tools{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:0 0 10px}
.csb-rk-tools .lbl{color:var(--cdim);font-size:11px;font-weight:800;letter-spacing:.08em;
 text-transform:uppercase;margin-right:6px}
.csb-rk-tools button{border:1px solid var(--cline);background:var(--cs2);color:var(--cmut);
 border-radius:99px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer}
.csb-rk-tools button.on{background:var(--cteal);border-color:var(--cteal);color:#04241c}

#sortable{list-style:none;margin:0;padding:0}
li.csb-rk-row{display:flex;align-items:center;gap:10px;border:1px solid var(--cline);
 border-radius:10px;background:var(--cs1);padding:8px 12px;margin:0 0 6px;list-style:none}
li.csb-rk-row .csb-rk-grip{color:var(--cdim);cursor:grab;flex:0 0 auto}
li.csb-rk-row .csb-rk-no{color:var(--cdim);font-weight:800;font-size:12.5px;min-width:22px;
 text-align:right;flex:0 0 auto}
li.csb-rk-row .csb-rk-logo{width:34px;height:34px;object-fit:contain;flex:0 0 34px;margin:0}
li.csb-rk-row .csb-rk-who{min-width:0;flex:1}
li.csb-rk-row .csb-rk-who b{display:block;color:var(--cink);font-weight:800;font-size:14.5px;line-height:1.25}
li.csb-rk-row .csb-rk-who small{display:block;color:var(--cmut);font-size:11.5px}
li.csb-rk-row .csb-rk-who small em{color:var(--cdim);font-style:normal}
li.csb-rk-row .csb-rk-moves{margin-left:auto;display:flex;gap:4px;flex:0 0 auto}
li.csb-rk-row .csb-rk-moves a{color:var(--cdim);cursor:pointer;padding:5px 7px;border:1px solid var(--cline);
 border-radius:7px;line-height:1}
li.csb-rk-row .csb-rk-moves a:hover{color:var(--cteal);border-color:var(--cteal)}
.sortable-placeholder{border:1px dashed var(--cteal);border-radius:10px;height:52px;margin:0 0 6px}

.csb-rk-bar{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:12px;
 flex-wrap:wrap;background:rgba(11,13,16,.97);border-top:1px solid var(--cline);
 padding:11px 2px;margin-top:10px}
.csb-rk-bar .top3{color:var(--cmut);font-size:13px;flex:1 1 220px;min-width:0;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.woocommerce .csb-rk-bar .csb-rk-lock,.csb-rk-bar .csb-rk-lock{background:#f5c518!important;
 background-image:none!important;color:#111!important;border:0!important;font-weight:900;
 border-radius:10px;padding:12px 22px;font-size:15px;white-space:nowrap}
.csb-rk-tpl{color:var(--cmut);font-size:12.5px;margin:8px 0 0}
.csb-rk-tpl b{color:var(--cink)}

@media (max-width:600px){
 li.csb-rk-row{gap:8px;padding:7px 10px}
 li.csb-rk-row .csb-rk-logo{width:28px;height:28px;flex-basis:28px}
 .csb-rk-bar .top3{flex-basis:100%}
}

/* =========================================================================
 * MY ACCOUNT — specs/redesign/07, built from pages/my-account.html.
 *
 * The design is in css/redesign/my-account.css, which is the mockup's own
 * stylesheet scoped to .csb-ma and otherwise untouched. Nothing here
 * restyles it. What is left is the bridge: the frame Storefront puts the
 * page in, and the places where WooCommerce emits a real control where the
 * mockup drew a picture of one.
 * ========================================================================= */

/* THE SAME 1440 BOX AS EVERY OTHER PAGE — one element owns the gutter. */
/* SPEC 33 A5 — THE RESULTS TABLE FITS, AND NEVER SCROLLS SIDEWAYS.
 *
 * Sam, Oct 24: "rounds #7-#8 are off screen — they will never see
 * those." Eleven columns were Pick · Got it · #1-#8 · Final, with "Got
 * it" and "Final" printing the same value; the duplicate is gone in
 * view-random.php and Final moved second, which leaves ten.
 *
 * THE FIRST TWO COLUMNS ARE WHAT PEOPLE READ — which team, who got it —
 * and the eight rounds behind them are the audit, so the rounds are the
 * ones that give up room: 12px, a fixed ~95px each, ellipsed with the
 * full name on the title. Team and Final take what is left.
 *
 * In style.css rather than css/redesign/my-account.css for the same
 * reason the Break Room's rules are: that sheet is the mockup scoped,
 * and this is the theme's bridge over it. */
body.csb-ma-page .csb-ma .rtab table{table-layout:fixed}
body.csb-ma-page .csb-ma .rtab th.r,
body.csb-ma-page .csb-ma .rtab td.r{width:95px;font-size:12px;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.csb-ma-page .csb-ma .rtab th.fin,
body.csb-ma-page .csb-ma .rtab td.fin{width:150px;white-space:nowrap;
 overflow:hidden;text-overflow:ellipsis}
body.csb-ma-page .csb-ma .rtab td.fin b{color:var(--ink)}
body.csb-ma-page .csb-ma .rtab td.tm{overflow:hidden;text-overflow:ellipsis}
/* The second line per row is the phone's; a desktop has the columns. */
body.csb-ma-page .csb-ma .rtab tr.dr{display:none}
/* And the toggle that reveals it belongs to the phone too. */
body.csb-ma-page .csb-ma .rtools .btn.draws{display:none}

@media (max-width:860px){
 /* PHONE: Team and Final only. The rounds come back as a wrapped line
  * of chips under each row, behind the toggle — never as eight columns
  * the thumb has to drag sideways to reach. */
 body.csb-ma-page .csb-ma .rtab th.r,
 body.csb-ma-page .csb-ma .rtab tr:not(.dr) td.r{display:none}
 /* AND THE FLOOR UNDER THEM. css/redesign/my-account.css sets
  * `.rtab table{min-width:760px}` with an `overflow-x:auto` wrap and
  * only frees it at 600px. Hiding the columns at 860px without this
  * leaves the table 760px wide inside a 356px wrap — the sideways
  * scroll Sam reported, still there, just with nothing in it. */
 body.csb-ma-page .csb-ma .rtab table{min-width:0}
 body.csb-ma-page .csb-ma .rtab th.fin,
 body.csb-ma-page .csb-ma .rtab td.fin{width:auto}
 body.csb-ma-page .csb-ma .rtools .btn.draws{display:inline-block}
 body.csb-ma-page .csb-ma .rtab.draws tr.dr{display:table-row}
 body.csb-ma-page .csb-ma .rtab tr.dr td{padding:0 12px 9px;border-top:0;
  white-space:normal}
 body.csb-ma-page .csb-ma .rtab tr.dr .c{display:inline-block;font-size:11.5px;
  color:var(--dim);background:var(--s2);border-radius:999px;
  padding:2px 8px;margin:0 4px 4px 0;white-space:nowrap}
 body.csb-ma-page .csb-ma .rtab tr.dr .c b{color:var(--mut);font-weight:800}
 /* a row and its draws read as one block */
 body.csb-ma-page .csb-ma .rtab tr.dr + tr td{border-top:1px solid var(--line)}
}

/* SPEC 33 A2 — the two tables a draft gets.
 *
 * Sam, Oct 24: "on a draft nobody drew a letter in round 3." The draws
 * only ordered the picks, so the order table carries the rounds (and
 * A5's whole treatment with them) and the picks table carries none.
 *
 * Spot and Pick are counters, not names: narrow, dim, and they stay on
 * a phone because they are what the row IS. */
body.csb-ma-page .csb-ma .rtab th.sp,
body.csb-ma-page .csb-ma .rtab td.sp{width:58px;color:var(--dim);white-space:nowrap}
body.csb-ma-page .csb-ma .rtab td.sp b{color:var(--mut);font-weight:800}
/* Final order is a name like any other, and gets the same clipping. */
body.csb-ma-page .csb-ma .rtab td.fin b{display:inline}
/* The picks table's third column is the answer, so it takes the room
 * the rounds would have: no fixed width, and the teams can wrap. */
body.csb-ma-page .csb-ma .rtab.picks table{table-layout:auto}
body.csb-ma-page .csb-ma .rtab.picks td.tm{white-space:normal;overflow:visible}

@media (max-width:860px){
 /* The order table is A5's table under another name — Spot, Final
  * order, and the rounds behind the toggle. Nothing to add. */
 body.csb-ma-page .csb-ma .rtab th.sp,
 body.csb-ma-page .csb-ma .rtab td.sp{width:44px}
}

/* THE MOCKUP SHEET HIDES EVERYTHING PAST COLUMN TWO AT 600px.
 * `.csb-ma .rtab th:nth-child(n+3)` was right for the one table that
 * sheet knew about, where columns 3+ are rounds. On A2's picks table
 * column 3 is what they picked — the only column anybody opened the
 * page for — so it is put back, and only there. */
@media (max-width:600px){
 body.csb-ma-page .csb-ma .rtab.picks th:nth-child(3),
 body.csb-ma-page .csb-ma .rtab.picks td:nth-child(3){display:table-cell}
 body.csb-ma-page .csb-ma .rtab.picks td.tm i{display:none}
}

body.csb-ma-page #content .col-full{max-width:1440px;width:auto;
 padding-left:16px;padding-right:16px;box-sizing:border-box;margin:0 auto}
body.csb-ma-page .site-main{padding-left:0;padding-right:0}
body.csb-ma-page .csb-ma .page{padding-left:0;padding-right:0}
body.csb-ma-page .csb-ma .wrap{max-width:none}
/* Woo's own two-column account layout is a float pair with percentage
 * widths at >=768px. The width and float go, and so does the MARGIN: its
 * `margin-right:4.34783%` outlived this reset, so the content column
 * stopped ~32px short of the breadcrumb and the header above it at every
 * width from 768px up, desktop included. */
body.csb-ma-page .woocommerce-MyAccount-content{width:auto;float:none;min-width:0;margin:0}
body.csb-ma-page .woocommerce-MyAccount-navigation{width:auto;float:none;margin:0}
body.csb-ma-page .woocommerce{margin:0}

/* Storefront gives .entry-title and the account headings their own sizes;
 * spec 07: "no page-level H1 bigger than 26px". */
body.csb-ma-page .entry-title,
body.csb-ma-page .page-title{display:none}

/* Storefront furniture the mockup assumes is not there — the same two the
 * Break Room drops (break-room-bridge.css). Storefront's breadcrumb printed
 * "Home » My Account" and then `.csb-ma .crumb` printed it again 120px
 * lower, so the phone read the same line twice before anything else. */
body.csb-ma-page .entry-header,
body.csb-ma-page .storefront-breadcrumb{display:none}
body.csb-ma-page .csb-ma a{text-decoration:none}
body.csb-ma-page .csb-ma a:hover{text-decoration:underline}
body.csb-ma-page .csb-ma .ord:hover{border-color:var(--teal)}

/* WOO'S MESSAGES, in the page's own voice rather than Storefront's blue. */
body.csb-ma-page .woocommerce-message,
body.csb-ma-page .woocommerce-error,
body.csb-ma-page .woocommerce-info{background:#171c22;border-top:3px solid #15ccad;
 color:#eef2f3;border-radius:10px;margin:0 0 14px;padding:12px 16px}
body.csb-ma-page .woocommerce-error{border-top-color:#ff5a5a}
body.csb-ma-page .woocommerce-message::before,
body.csb-ma-page .woocommerce-error::before,
body.csb-ma-page .woocommerce-info::before{display:none}
body.csb-ma-page .woocommerce-message a,
body.csb-ma-page .woocommerce-error a,
body.csb-ma-page .woocommerce-info a{color:#15ccad}

/* THE MOCKUP'S .f/.in IS A PICTURE OF A FIELD.
 * Woo emits <p class="form-row"><label><input class="input-text">, and it
 * has to stay that way: the country/state linkage, the per-country address
 * rules and every validation class hang off those names. So .form-row is
 * dressed as .f and the real controls as .in. */
body.csb-ma-page .csb-ma .form .form-row,
body.csb-ma-page .csb-ma .form .f{display:flex;flex-direction:column;gap:5px;margin:0;padding:0}
body.csb-ma-page .csb-ma .form .form-row-wide,
body.csb-ma-page .csb-ma .form .form-row-first,
body.csb-ma-page .csb-ma .form .form-row-last{width:auto;float:none}
body.csb-ma-page .csb-ma .form .form-row-wide{grid-column:1 / -1}
body.csb-ma-page .csb-ma .form label{font-size:11.5px;color:var(--dim);font-weight:700;
 margin:0;text-transform:uppercase;letter-spacing:.04em}
/* The asterisk was the same dim grey as the label it sits in, at the same
 * 11.5px, so on the address form — six of eight fields required — nothing
 * looked required until a submit came back. Yellow, as the checkout's is. */
body.csb-ma-page .csb-ma .form label .required{color:var(--yel);text-decoration:none;border:0}
body.csb-ma-page .csb-ma .form .input-text,
body.csb-ma-page .csb-ma .form input[type=text],
body.csb-ma-page .csb-ma .form input[type=email],
body.csb-ma-page .csb-ma .form input[type=tel],
body.csb-ma-page .csb-ma .form input[type=password],
body.csb-ma-page .csb-ma .form select,
body.csb-ma-page .csb-ma .form .select2-selection{background:var(--s2);border:1px solid #3a434c;
 border-radius:9px;padding:9px 12px;color:#c9d1d6;font-size:14px;min-height:40px;
 box-shadow:none;width:100%;margin:0;line-height:1.4}
/* Address line 2 carries a screen-reader-only label and nothing else, so
 * its placeholder IS its label — it has to be readable. (The field's own
 * border is lifted above for the same reason: #272d34 on the card it sits
 * on was 1.33:1, and a control nobody can see gets skipped.) */
body.csb-ma-page .csb-ma .form .input-text::placeholder{color:var(--dim);opacity:1}
/* A 1px border changing colour is not a focus indicator on a dark form.
 * The checkout's identical fields keep a real ring; so do these. */
body.csb-ma-page .csb-ma .form .input-text:focus,
body.csb-ma-page .csb-ma .form select:focus{border-color:var(--teal);
 outline:2px solid var(--teal);outline-offset:-2px}
body.csb-ma-page .csb-ma .form .select2-container{width:100%!important}
body.csb-ma-page .csb-ma .form .select2-selection__rendered{color:#c9d1d6!important;line-height:22px!important;padding:0!important}
body.csb-ma-page .csb-ma .form .select2-selection__arrow{top:8px}
body.csb-ma-page .csb-ma .form .woocommerce-input-wrapper{width:100%}
body.csb-ma-page .csb-ma .form em,
body.csb-ma-page .csb-ma .form .description{color:var(--dim);font-size:11.5px;font-style:normal}

/* The switches are real checkboxes wearing the mockup's .sw. */
body.csb-ma-page .csb-ma .tog{cursor:pointer}
body.csb-ma-page .csb-ma .tog .csb-swin{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
body.csb-ma-page .csb-ma .tog .csb-swin:focus-visible ~ .sw{outline:2px solid var(--teal);outline-offset:2px}

/* Buttons: the sheet styles .btn, Storefront styles button/.button. A
 * submit that carries .btn should look like the .btn next to it. */
body.csb-ma-page .csb-ma button.btn,
body.csb-ma-page .csb-ma .woocommerce button.btn,
body.csb-ma-page .csb-ma a.btn{background-image:none;text-decoration:none;cursor:pointer;
 font-family:inherit;line-height:1.2}
body.csb-ma-page .csb-ma button.btn:hover{opacity:.92}

/* THE PHONE NAV. Under 900px the sheet hides .nav and shows .navsel; this
 * is the "opens the same list" half — one list, revealed, never a copy.
 *
 * It used to do that with `display:flex` and an order pair, which was two
 * bugs at once. `order` only sorts SIBLINGS, and the bar was a child of
 * the content column it was ordering the nav after — so the opened list
 * landed below the whole view (378px down on Your breaks, 1,939px on
 * Account details) and tapping Menu looked like it did nothing. And
 * `align-items:start` from the sheet's desktop grid rule carries into a
 * flex container as flex-start on the CROSS axis, so nothing stretched:
 * the opened nav came out 186px wide and the Orders column 322px inside a
 * 343px page.
 *
 * Both go away by staying a grid. my-account.css already collapses it to
 * `grid-template-columns:1fr` at this width, grid items stretch on their
 * own, and my-account.php now prints the bar as the nav's own previous
 * sibling — so source order is navsel, nav, content with nothing to
 * reorder. All that is left here is the gaps and the disclosure itself. */
body.csb-ma-page .csb-ma .navsel{cursor:pointer}
/* The two groups are real <ul>s so a screen reader counts them. The theme
 * paints a glyph in front of every <li> inside .entry-content, which is
 * where this nav lives — so the list loses its markers and its indent and
 * goes back to being the column the mockup drew. */
body.csb-ma-page .csb-ma .nav ul,
body.csb-ma-page .csb-ma .nav li{list-style:none;margin:0;padding:0;border:0;background:none}
body.csb-ma-page .csb-ma .nav li::before,
body.csb-ma-page .csb-ma .nav li::marker{content:none;display:none}
/* css/csb-icons.css paints a Font Awesome glyph on
 * `.woocommerce-MyAccount-navigation ul li a::before` for Storefront's own
 * account nav. It had never matched, because this nav had no <li> to match;
 * wrapping the links for screen readers brought it to life and put a second
 * grey icon in front of the mockup's own. The mockup's is the one. */
body.csb-ma-page .csb-ma .nav li a::before{content:none;display:none}

/* A real <button> now, not a div wearing role="button". Storefront paints
 * every button; this is the bar the sheet drew, with the button reset. */
body.csb-ma-page .csb-ma button.navsel{width:100%;font:inherit;font-weight:800;
 color:var(--ink);text-align:left;background-image:none;line-height:1.2;
 -webkit-appearance:none;appearance:none;text-shadow:none;box-shadow:none}
body.csb-ma-page .csb-ma button.navsel:hover{background:var(--s2)}
body.csb-ma-page .csb-ma button.navsel:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media (max-width:900px){
 /* `gap` is the desktop grid's 22px column gutter; stacked, the bar wants
  * to sit on the thing it opens, so the spacing is per-row margin. */
 body.csb-ma-page .csb-ma .layout{display:grid;grid-template-columns:1fr;gap:0;align-items:start}
 body.csb-ma-page .csb-ma .navsel{margin:0 0 4px}
 body.csb-ma-page .csb-ma .nav{position:static;margin:0 0 12px}

 /* NO SCRIPT, NO DISCLOSURE — the list is simply there.
  * The sheet's phone default was `.nav{display:none}` with only a scripted
  * class to bring it back, so a script that never ran left a phone with no
  * route to Orders, Addresses or Log out at all. The flag on <html> is
  * written in the head by CardSmiths_Account_View::js_flag(). */
 body.csb-ma-page .csb-ma .navsel{display:none}
 body.csb-ma-page .csb-ma .nav{display:block}
 html.csb-js body.csb-ma-page .csb-ma .navsel{display:flex}
 html.csb-js body.csb-ma-page .csb-ma .nav{display:none}
 html.csb-js body.csb-ma-page .csb-ma .nav.csb-open{display:block}
}

/* The order screen's header actions — "Download receipt" and "Problem with
 * this order?". Was an inline style, which no media query can reach. */
body.csb-ma-page .csb-ma .ordacts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* Clear of the DEFAULT badge on a saved card. Also was an inline style. */
body.csb-ma-page .csb-ma .pm .acts.after-def{margin-left:10px}

/* Woo's add-payment-method gateway list, inside the mockup's card. */
body.csb-ma-page .csb-ma .payment_methods{list-style:none;margin:0;padding:0}
body.csb-ma-page .csb-ma .payment_methods li{margin:0 0 8px;list-style:none}
body.csb-ma-page .csb-ma .payment_methods label{font-weight:700;color:var(--ink);margin-left:6px}
body.csb-ma-page .csb-ma .payment_box{background:var(--s2);border:1px solid var(--line);
 border-radius:10px;padding:12px 14px;margin:8px 0 0}

/* The sheet's .tog .t b{display:block} is meant for the switch's title.
 * The Shipping copy has a <b>Monday</b> mid-sentence, which that rule
 * breaks onto its own line — visible in the mockup too. Scoped to the
 * direct child, which is what it was for. */
body.csb-ma-page .csb-ma .tog .t span b,
body.csb-ma-page .csb-ma .fine b,
body.csb-ma-page .csb-ma .sub b{display:inline}

/* .help is styled as `.f .help`; the real form uses Woo's .form-row. */
body.csb-ma-page .csb-ma .form .help{color:var(--dim);font-size:11.5px;display:block}

/* Woo's show/hide-password button is a white chip on a dark field. It was
 * also a 22x22 target — under WCAG 2.5.8's 24px floor, and a thumb aiming
 * at it landed in the password instead. 40x40 with the glyph centred, and
 * the field's own padding opened up so a long password does not run
 * underneath it. */
body.csb-ma-page .csb-ma .form .password-input{display:block;position:relative;width:100%}
body.csb-ma-page .csb-ma .form .password-input .input-text{padding-right:48px}
body.csb-ma-page .csb-ma .form .show-password-input{position:absolute;right:4px;top:50%;
 transform:translateY(-50%);background:none;border:0;color:var(--dim);padding:0;
 width:40px;height:40px;filter:none;display:flex;align-items:center;justify-content:center}
body.csb-ma-page .csb-ma .form .show-password-input::after{color:var(--dim)}
body.csb-ma-page .csb-ma .form .show-password-input.display-password::after{color:var(--teal)}
body.csb-ma-page .csb-ma .form .show-password-input:focus-visible{outline:2px solid var(--teal);
 outline-offset:-2px;border-radius:8px}

/* An account page the redesign has not reached keeps the shell and loses
 * nothing else: no .v class (so nothing hides it), and enough of the
 * sheet's type to not look like a different site. */
body.csb-ma-page .csb-ma .csb-ma-other h2,
body.csb-ma-page .csb-ma .csb-ma-other h3{color:var(--ink);font-weight:800;margin:0 0 8px}
body.csb-ma-page .csb-ma .csb-ma-other h2{font-size:19px}
body.csb-ma-page .csb-ma .csb-ma-other table{width:100%;border-collapse:collapse;font-size:13.5px}
body.csb-ma-page .csb-ma .csb-ma-other th,
body.csb-ma-page .csb-ma .csb-ma-other td{border-color:#272d34;padding:8px 10px}

/* AND IT KEEPS ITS COLUMN HEADINGS ON A PHONE.
 * Under 768px Storefront stacks `shop_table_responsive` — thead hidden,
 * every cell on its own right-aligned line — and relies on a `data-title`
 * attribute it paints as a ::before label. Ultimate WooCommerce Auction's
 * bid table has no data-title, so /my-account/uwa-auctions/ came out as an
 * unlabelled stack: "$25.00 / $30.00 / Closed", with no way to tell your
 * own bid from the current high bid, which is the only thing that screen
 * exists to answer. Keep the table a table and let it scroll sideways —
 * the same answer `.rtab` gives. */
body.csb-ma-page .csb-ma .csb-ma-other{overflow-x:auto}
@media (max-width:768px){
 body.csb-ma-page .csb-ma .csb-ma-other table.shop_table_responsive thead{display:table-header-group}
 body.csb-ma-page .csb-ma .csb-ma-other table.shop_table_responsive tr{display:table-row}
 body.csb-ma-page .csb-ma .csb-ma-other table.shop_table_responsive th,
 body.csb-ma-page .csb-ma .csb-ma-other table.shop_table_responsive td{display:table-cell;
  text-align:left;white-space:nowrap}
 body.csb-ma-page .csb-ma .csb-ma-other table.shop_table_responsive td::before{display:none}
 body.csb-ma-page .csb-ma .csb-ma-other table.shop_table_responsive img{max-width:46px;height:auto}
}

/* Country and State are select2, which paints its own white control and
 * outranks a plain .select2-selection rule. These are the three pieces it
 * draws: the closed control, the text in it, and the open dropdown. */
body.csb-ma-page .csb-ma .form .select2-container--default .select2-selection--single{
 background:var(--s2);border:1px solid var(--line);border-radius:9px;height:auto;
 min-height:40px;padding:8px 12px;box-shadow:none}
body.csb-ma-page .csb-ma .form .select2-container--default .select2-selection--single
 .select2-selection__rendered{color:#c9d1d6;line-height:22px;padding:0}
body.csb-ma-page .csb-ma .form .select2-container--default .select2-selection--single
 .select2-selection__arrow{height:38px;right:8px}
body.csb-ma-page .csb-ma .form .select2-container--default .select2-selection--single
 .select2-selection__arrow b{border-top-color:#7d8a92}
body.csb-ma-page .csb-ma .form .select2-container--default.select2-container--open
 .select2-selection--single{border-color:var(--teal)}
/* The dropdown is appended to <body>, so it cannot be scoped to .csb-ma. */
body.csb-ma-page .select2-dropdown{background:#181c21;border-color:#272d34;color:#c9d1d6}
body.csb-ma-page .select2-search--dropdown .select2-search__field{background:#111418;
 border:1px solid #272d34;border-radius:7px;color:#c9d1d6;padding:7px 9px}
body.csb-ma-page .select2-results__option{color:#c9d1d6}
body.csb-ma-page .select2-container--default .select2-results__option--highlighted[aria-selected],
body.csb-ma-page .select2-container--default .select2-results__option[data-selected=true]{
 background:rgba(21,204,173,.14);color:#15ccad}

/* The theme's dark-mode block paints .select2-selection__rendered #999 —
 * a grey bar across the Country and State controls. Cleared inside the
 * account page only; the legacy rule is left alone for every other page
 * that may still want it. */
body.csb-ma-page.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered,
body.csb-ck-page.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered,
body.csb-ma-page .csb-ma .form .select2-selection__rendered,
body.csb-ck-page .csb-ck .select2-selection__rendered{background-color:transparent}

/* Same treatment on checkout, which a guest now reaches — Country and
 * State are the first two fields they meet. */
body.csb-ck-page .csb-ck .select2-container--default .select2-selection--single{
 background:var(--s2);border:1px solid var(--line);border-radius:9px;height:auto;
 min-height:44px;padding:10px 12px;box-shadow:none}
body.csb-ck-page .csb-ck .select2-container--default .select2-selection--single
 .select2-selection__rendered{color:#c9d1d6;line-height:22px;padding:0}
body.csb-ck-page .csb-ck .select2-container--default .select2-selection--single
 .select2-selection__arrow{height:42px;right:8px}
body.csb-ck-page .csb-ck .select2-container--default .select2-selection--single
 .select2-selection__arrow b{border-top-color:#7d8a92}
body.csb-ck-page .select2-dropdown{background:#181c21;border-color:#272d34;color:#c9d1d6}
body.csb-ck-page .select2-search--dropdown .select2-search__field{background:#111418;
 border:1px solid #272d34;border-radius:7px;color:#c9d1d6;padding:7px 9px}
body.csb-ck-page .select2-results__option{color:#c9d1d6}
body.csb-ck-page .select2-container--default .select2-results__option--highlighted[aria-selected],
body.csb-ck-page .select2-container--default .select2-results__option[data-selected=true]{
 background:rgba(21,204,173,.14);color:#15ccad}

/* The one-time "pick a name for the board" ask (spec 04). Reuses the
 * mockup's .alert panel; the field and the two buttons are the only
 * additions. */
body.csb-ma-page .csb-ma .csb-name-ask{flex-wrap:wrap}
body.csb-ma-page .csb-ma .csb-name-ask .input-text{flex:1 1 180px;min-width:150px;background:var(--s2);
 border:1px solid var(--line);border-radius:9px;padding:9px 12px;color:#c9d1d6;font-size:14px;min-height:40px}
body.csb-ma-page .csb-ma .csb-name-ask .input-text:focus{border-color:var(--yel);
 outline:2px solid var(--yel);outline-offset:-2px}
body.csb-ma-page .csb-ma .csb-name-ask button{cursor:pointer;font-family:inherit;background-image:none}
body.csb-ma-page .csb-ma .csb-name-ask .btn.y{background:var(--yel);border-color:var(--yel);color:#111}

/* THE THEME AND PLUGIN ALREADY OWNED `.mine`.
 * css/breaks.css carries an unscoped `.mine{width:100px;float:left}` from
 * the old break pages, and the mockup's rule sets neither property — so
 * every team pill row on the dashboard was squeezed into a 100px float
 * with the logos crushed to 14px. Undone inside .csb-ma only; the legacy
 * rule is left alone for whatever still wants it. Same family as the
 * .coupon and .page collisions on the cart and Break Room. */
body.csb-ma-page .csb-ma .mine{width:auto;float:none}
body.csb-ma-page .csb-ma .mine span{flex:0 0 auto}
body.csb-ma-page .csb-ma .mine span i{flex:0 0 22px}

/* MY TEAMS (specs/redesign/07 §"Added Oct 18"). The mockup's `.tt` is a
 * <span>; starring is an action, so it ships as a <button> and needs the
 * browser's button chrome taken off to look like the mockup's tile. */
body.csb-ma-page .csb-ma .tt{appearance:none;-webkit-appearance:none;width:100%;
 text-align:left;font-family:inherit;color:#c9d1d6}
body.csb-ma-page .csb-ma .tt:hover{border-color:var(--mut)}
body.csb-ma-page .csb-ma .tt:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
body.csb-ma-page .csb-ma .tt.on{color:var(--ink)}
/* The mockup's sport switcher is one `a.more`; here it is a span holding a
 * real link per sport, so the `a.more` rule never lands on it. Same paint. */
body.csb-ma-page .csb-ma .sec .more{margin-left:auto;font-size:13px;
 font-weight:700;white-space:nowrap;color:var(--mut)}
body.csb-ma-page .csb-ma .sec .more a{color:var(--teal)}
@media(max-width:600px){body.csb-ma-page .csb-ma .sec .more{margin-left:0;
 width:100%;text-align:center;white-space:normal}}

/* "Your teams tonight", the strip at the top of Your breaks. */
body.csb-ma-page .csb-ma .mt .mt-r .btn.y{background:var(--yel);border-color:var(--yel);color:#111}

/* "Every break page marks your team" (spec 07 §"Added Oct 18"). A yellow
 * edge and a star — the same yellow the rest of the site uses for buying
 * and breaks, which is what a starred team is about. */
body.csb-break-page .csb-bp .team.csb-mine{border-color:var(--yel);
 box-shadow:inset 0 0 0 1px rgba(245,197,24,.35)}
body.csb-break-page .csb-bp .team .minetag{position:absolute;top:8px;left:8px;
 color:var(--yel);font-size:13px;line-height:1}
body.csb-break-page .csb-bp .team{position:relative}

/* WATCH THE REPLAY (specs/redesign/07 §"Added Oct 18"). The break page
 * already had a replay link wearing `.tw` — the Twitch chip, purple
 * bordered and solid purple on a live break. A YouTube link that looks
 * like a Twitch button tells the customer the wrong thing, so it gets
 * its own colour on all three surfaces it appears on. */
body.csb-break-page .csb-bp .when .yt{border:1px solid #c33;color:#ff6b6b;
 border-radius:999px;padding:4px 10px;font-weight:800;font-size:12.5px;
 white-space:nowrap}
body.csb-break-page .csb-bp .when .yt:hover{background:rgba(204,51,51,.12)}

/* `.rs` is an <a>, so the replay is a sibling under the row, lined up
 * with the row's text rather than its art. */
body.csb-ma-page .csb-ma .rs-x{margin:-2px 0 14px 84px}
body.csb-ma-page .csb-ma .yt{display:inline-block;color:#ff6b6b;
 font-weight:800;font-size:12.5px}
body.csb-ma-page .csb-ma .card .yt{margin-top:2px}
@media(max-width:600px){body.csb-ma-page .csb-ma .rs-x{margin-left:68px}}

/* VIEW RANDOM (specs/redesign/07, `.v-random`). The RANDOM.ORG proof is
 * a stored <form> that POSTs to api.random.org/verify, so the mockup's
 * "open the signed result →" link is a submit button wearing the link's
 * clothes. */
body.csb-ma-page .csb-ma .verify form{display:inline}
body.csb-ma-page .csb-ma .verify input[type=submit]{appearance:none;
 -webkit-appearance:none;background:none;border:0;padding:0;cursor:pointer;
 font:inherit;font-weight:700;color:var(--teal);text-decoration:underline}
body.csb-ma-page .csb-ma .rtools .btn{cursor:pointer}
/* A drafted break hands one spot many picks, so the first cell carries a
 * number as well as a name. */
body.csb-ma-page .csb-ma .rtab .tm b{color:var(--mut);margin-right:2px}

/* "Your data" (specs/redesign/07). A REQUESTED chip in place of the
 * button once a request is open — `.pm .def` is the same look but is
 * scoped to the payment-methods list, so it cannot be borrowed. */
body.csb-ma-page .csb-ma .tog .req{font-size:11px;font-weight:800;
 letter-spacing:.06em;color:var(--teal);border:1px solid var(--teal);
 border-radius:999px;padding:3px 9px;white-space:nowrap}
body.csb-ma-page .csb-ma form.tog{margin:0}

/* CSB POINTS on a phone. The mockup's `.ph` is a 110px / 1fr / auto grid
 * and its 600px block says nothing about it — fine for the five short
 * rows it draws, but a real line is "Earned on order #881764 — 2026 Topps
 * Allen & Ginter Baseball Hobby Box 4 Box Break #13", which wraps to four
 * lines in a squeezed middle column. The date and the amount share the
 * top line and the sentence gets the full width under them. */
@media(max-width:600px){
 body.csb-ma-page .csb-ma .ph{grid-template-columns:1fr auto;row-gap:2px}
 body.csb-ma-page .csb-ma .ph .d{order:1}
 body.csb-ma-page .csb-ma .ph .a{order:2}
 body.csb-ma-page .csb-ma .ph>span:not(.d):not(.a){order:3;grid-column:1/-1}
}

/* RESULTS FILTER CHIPS (spec 07: "sport/year filter chips when there are
 * more than 20"). The My Account mockup draws none, so the paint is the
 * break pages' own `.pfilters` / `.chip` — the place this site already
 * filters a list — scoped here because neither class is in the My
 * Account stylesheet. */
body.csb-ma-page .csb-ma .pfilters{display:flex;align-items:center;gap:6px;
 flex-wrap:wrap;margin:10px 0 2px}
body.csb-ma-page .csb-ma .pfilters .chip{border-radius:99px;padding:4px 11px;
 font-size:11.5px;font-weight:700;border:1px solid var(--line);
 background:var(--s1);color:#c8d2d7;text-decoration:none;white-space:nowrap}
body.csb-ma-page .csb-ma .pfilters .chip:hover{border-color:var(--mut)}
body.csb-ma-page .csb-ma .pfilters .chip.on{border-color:var(--teal);color:var(--teal)}
body.csb-ma-page .csb-ma .pfilters .chip b{color:var(--mut);font-weight:600;margin-left:4px}

/* VENDOR INVOICE (specs/redesign/07, "Vendor Invoice"). Sam: "works fine,
 * not a big deal" — so this is a restyle and nothing else. The flow, the
 * field ids and the JS are untouched; what changes is that the screen
 * now wears the same inputs, buttons and cards as the rest of My
 * Account instead of browser defaults on a dark page.
 *
 * The yellow box around the "from Topps invoice" fields is KEPT, as the
 * spec asks — just in the redesign's gold rather than the old #FFC82E. */
/* THE CONTENT COLUMN MUST BE ABLE TO SHRINK. `.layout` is a grid and a
 * grid item defaults to min-width:auto, so anything wide inside —
 * here a seven-column invoice grid — pushes the whole column past the
 * viewport instead of scrolling inside it. Measured: the column sat at
 * 766px on a 390px screen. This is the general fix, not a vendor-invoice
 * one; every other view is already narrow enough not to have shown it. */
/* min-width:0 is already set (my-account.css:247) but it only governs a
 * flex item's MAIN axis. On phones `.layout` is a column flex, so the
 * column's width is the cross axis and an over-wide child simply stays
 * over-wide. A definite cap is what makes it resolve against the layout
 * instead of against its own content. */
body.csb-ma-page .csb-ma .layout > *{max-width:100%}
body.csb-ma-page .csb-ma .csb-ma-other{max-width:100%}

body.csb-ma-page .csb-ma .csb-vi{max-width:100%;min-width:0}

/* The shell already says "Hey, {name}" at 26px; a 48px H1 under it is
 * the one thing spec 07 calls out by number. */
body.csb-ma-page .csb-ma .csb-vi h1{font-size:19px;font-weight:800;
 color:var(--ink);margin:0 0 10px;line-height:1.25}
body.csb-ma-page .csb-ma .csb-vi h2{font-size:17px;font-weight:800;
 color:var(--ink);margin:26px 0 8px}

/* The labels are bare divs in the markup, so they are styled by position
 * rather than by class — the same small-caps label the account form uses. */
body.csb-ma-page .csb-ma .csb-vi .invoiceformcontain > div:not([id]):not([class]),
body.csb-ma-page .csb-ma .csb-vi .invoiceformcontain > div[style*="border"] > div:not([id]):not([class]){
 font-size:11px;font-weight:800;color:var(--mut);text-transform:uppercase;
 letter-spacing:.04em;margin:6px 0 -4px}

body.csb-ma-page .csb-ma .csb-vi input[type=text],
body.csb-ma-page .csb-ma .csb-vi select{background:var(--s2);
 border:1px solid var(--line);border-radius:9px;padding:9px 12px;
 color:#c9d1d6;font-size:14px;min-height:40px;box-shadow:none;
 width:100%;margin:0;line-height:1.4;font-family:inherit}
body.csb-ma-page .csb-ma .csb-vi input[type=text]:focus,
body.csb-ma-page .csb-ma .csb-vi select:focus{border-color:var(--teal);
 outline:2px solid var(--teal);outline-offset:-2px}
body.csb-ma-page .csb-ma .csb-vi input[type=text]::placeholder{color:var(--dim)}

body.csb-ma-page .csb-ma .csb-vi button,
body.csb-ma-page .csb-ma .csb-vi .button{display:inline-block;text-align:center;
 border-radius:10px;padding:10px 14px;font-weight:800;font-size:13.5px;
 text-decoration:none;white-space:nowrap;border:1px solid var(--line);
 color:#c9d1d6;background:var(--s2);cursor:pointer;font-family:inherit}
body.csb-ma-page .csb-ma .csb-vi button:hover,
body.csb-ma-page .csb-ma .csb-vi .button:hover{border-color:var(--mut)}
/* Save Invoice is the one yellow button on the screen. */
/* The form is a flex column, so a plain button stretches edge to edge —
 * the redesign's buttons size to their text. */
body.csb-ma-page .csb-ma .csb-vi .invoiceformcontain > button,
body.csb-ma-page .csb-ma .csb-vi .invoiceformcontain > .button{align-self:flex-start}
body.csb-ma-page .csb-ma .csb-vi #invoicesubmit{background:var(--yel);
 color:#111;border-color:var(--yel);font-weight:900;margin-top:4px}
body.csb-ma-page .csb-ma .csb-vi #submissionreset{background:#c33;
 border-color:#c33;color:#fff}

/* KEPT, per the spec — the gold box around the Topps fields. */
body.csb-ma-page .csb-ma .csb-vi .invoiceformcontain > div[style*="border"]{
 border:1px solid var(--goldline)!important;border-radius:14px!important;
 background:rgba(245,197,24,.06);padding:14px 16px!important;
 display:flex;flex-direction:column;gap:10px}

/* The invoice lists: the same card and table the other "other" views get. */
body.csb-ma-page .csb-ma .csb-vi [style*="grid-template-columns: 1fr 1fr 1fr"],
body.csb-ma-page .csb-ma .csb-vi .invoice{border:1px solid var(--line);
 border-radius:14px;background:var(--s1);padding:14px 16px;font-size:13.5px}
body.csb-ma-page .csb-ma .csb-vi .invoice{border-color:var(--goldline)!important}
body.csb-ma-page .csb-ma .csb-vi #msg{background:rgba(21,204,173,.12);
 border:1px solid var(--teal);color:var(--teal);border-radius:10px}
body.csb-ma-page .csb-ma .csb-vi #err{background:rgba(204,51,51,.12);
 border:1px solid #c33;color:#ff8b8b;border-radius:10px}

/* The actions sit in a narrow column; the full-size button wraps each
 * one onto its own line. */
body.csb-ma-page .csb-ma .csb-vi [style*="grid-template-columns: 1fr 1fr 1fr"] .button{
 padding:5px 9px;font-size:12px}

/* A seven-column grid cannot collapse: its headers are the first seven
 * cells, so at two columns "Actions" ends up beside a date and the table
 * stops meaning anything. The columns keep a floor and the grid scrolls
 * sideways instead — the same answer `.rtab` gives the random board. */
@media(max-width:700px){
 body.csb-ma-page .csb-ma .csb-vi [style*="grid-template-columns: 1fr 1fr 1fr"]{
  grid-template-columns:repeat(7,minmax(96px,1fr))!important;
  overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%}
 body.csb-ma-page .csb-ma .csb-vi .invoice{grid-template-columns:minmax(96px,1fr) 1fr!important}
}

/* =========================================================================
 * THE PHONE, past the nav — specs/redesign/07, measured at 390px.
 *
 * The mockup sheet has a <=600px block of its own; these are the rows and
 * controls it did not reach, in the bridge rather than in that sheet for
 * the reason given at the top of this section: that sheet is the mockup
 * scoped, this is the theme's bridge over it.
 * ========================================================================= */
@media (max-width:600px){

 /* iOS SAFARI ZOOMS A FOCUSED FIELD UNDER 16px. Every control on Account
  * details and Addresses was 14px, so tapping one scaled the page up and
  * the 343px column stopped fitting the screen — once per field, and the
  * address form has eight. 16px only at phone width; the desktop form
  * keeps the mockup's 14px. */
 body.csb-ma-page .csb-ma .form .input-text,
 body.csb-ma-page .csb-ma .form input[type=text],
 body.csb-ma-page .csb-ma .form input[type=email],
 body.csb-ma-page .csb-ma .form input[type=tel],
 body.csb-ma-page .csb-ma .form input[type=password],
 body.csb-ma-page .csb-ma .form select,
 body.csb-ma-page .csb-ma .form textarea,
 body.csb-ma-page .csb-ma .csb-name-ask .input-text,
 body.csb-ma-page .csb-ma .csb-vi input[type=text],
 body.csb-ma-page .csb-ma .csb-vi select{font-size:16px}
 body.csb-ma-page .csb-ma .form .select2-container--default
  .select2-selection--single .select2-selection__rendered{font-size:16px}

 /* THE ONE-TIME NAME ASK. `.alert .t` is `flex:1` with no basis, so beside
  * a field claiming 180px it collapsed to its longest word — about 55px —
  * and the sentence came down the page one word at a time. The copy gets
  * the full width; the field and buttons take the line below. */
 body.csb-ma-page .csb-ma .csb-name-ask .t{flex:1 1 100%}
 body.csb-ma-page .csb-ma .csb-name-ask .input-text{flex:1 1 100%}

 /* A RESULTS ROW is art + text + "See the random →", and the link is
  * nowrap, so at 390px the title and the teams were left about 127px to
  * wrap in. Same shape as `.yb`: the link drops to its own line. */
 body.csb-ma-page .csb-ma .rs{grid-template-columns:56px 1fr;
  grid-template-areas:"art main" "go go";row-gap:8px}
 body.csb-ma-page .csb-ma .rs .art{grid-area:art}
 body.csb-ma-page .csb-ma .rs .art + *{grid-area:main;min-width:0}
 body.csb-ma-page .csb-ma .rs .go{grid-area:go;text-align:center}

 /* THE ORDER TIMELINE divided a 309px card into five fixed columns, so
  * "Sorted & packed" broke mid-phrase and the dates under it rendered at
  * 9.6px. Two rows of flexible cells, at the page's own type sizes. */
 body.csb-ma-page .csb-ma .tl{flex-wrap:wrap;row-gap:10px}
 body.csb-ma-page .csb-ma .tl div{flex:1 0 33.333%;font-size:11.5px}
 body.csb-ma-page .csb-ma .tl div small{font-size:11px}
 /* The connector runs from one dot to the next (`right:-50%`). Three to a
  * row, so the third one has nothing on its right but the edge of the card
  * — it drew a line out past it. */
 body.csb-ma-page .csb-ma .tl div:nth-child(3n)::after{display:none}

 /* A SAVED CARD ROW fits a 46px brand tile, the card name and two nowrap
  * buttons into 313px, which squeezed "Visa ending 4242" onto two lines
  * and left Delete a 31px target 6px from Make default. The actions take
  * their own row. */
 body.csb-ma-page .csb-ma .pm{flex-wrap:wrap}
 body.csb-ma-page .csb-ma .pm .brand{flex:0 0 46px}
 body.csb-ma-page .csb-ma .pm > div:not(.acts){flex:1 1 auto;min-width:0}
 body.csb-ma-page .csb-ma .pm .acts,
 body.csb-ma-page .csb-ma .pm .acts.after-def{margin-left:0;width:100%;gap:8px}
 body.csb-ma-page .csb-ma .pm .acts .btn{flex:1;padding:10px 14px;font-size:13.5px}

 /* .btn.sm IS 31px TALL. On Addresses and Your data it is the row's only
  * control, and 31px is under every touch floor there is. */
 body.csb-ma-page .csb-ma .btn.sm{padding:10px 14px;font-size:13px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center}

 /* THE RANDOM BOARD ellipsed long team names with only a `title` to
  * recover them — which a touch screen never shows — and the YOURS badge
  * sat past the cut, so the reader's own row never said it was theirs.
  * The picks table already gets this at the top of the section. */
 body.csb-ma-page .csb-ma .rtab td.tm{white-space:normal;overflow:visible;text-overflow:clip}

 /* The order screen's two header buttons are both nowrap and together
  * wider than the column; they stack rather than run off the edge. */
 body.csb-ma-page .csb-ma .ordacts{margin-left:0;width:100%}
 body.csb-ma-page .csb-ma .ordacts .btn{flex:1 1 100%}
}