/* ===================================================================
   LUSH BOLD - the look layer.

   Loaded LAST, after every other sheet, because it restyles classes the
   older sheets also set. Nothing here changes markup or template logic.
   =================================================================== */


body{background:var(--cream);color:var(--ink);font-family:var(--body)}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);letter-spacing:-.02em}

/* ---- surfaces ---------------------------------------------------- */
.card,.hub-card,.bo-card,.bo-tile,.bo-relcard,.rcard,.rankcard__shot,.step,
.pcbox,.side-card,.rvx-shot,.bo-table,.g-table,.rail,.catlink__shot,
.bo-sources,.bo-faq,.rvx-faq,.faq,.promo,.signup,.answer,.verdict,
.bottomline,.sources,.an-block,.hw-step,.ru-item,.rcp-note{
	background:var(--paper);
	border:var(--border);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
}
a.card:hover,a.hub-card:hover,a.bo-card:hover,a.bo-relcard:hover,a.rcard:hover{
	transform:translate(2px,2px);
	box-shadow:var(--shadow-sm);
}
.card,.hub-card,.bo-card,.bo-relcard,.rcard{transition:transform .12s ease,box-shadow .12s ease}

/* ---- labels and pills -------------------------------------------- */
.pill,.badge,.chip,.rcard__tag,.rh__pill,.bo-card__badge,.hub-card__kick,
.step__time,.rvx-by i,.bo-trust b{
	border-radius:var(--pill);
	font-weight:700;
	letter-spacing:.09em;
	text-transform:uppercase;
}
.pill,.badge,.chip,.rcard__tag{
	border:var(--border);
	padding:6px 14px;
	font-size:var(--t-2xs);
	background:var(--marigold);
	color:var(--ink);
}
.badge--orange,.badge--red{background:var(--tomato);color:#fff}
.badge--green{background:var(--basil);color:#fff}
.badge--amber{background:var(--marigold);color:var(--ink)}
.badge--brown{background:var(--plum);color:#fff}

/* ---- buttons ------------------------------------------------------ */
.btn{
	border:var(--border);
	border-radius:var(--radius-sm);
	font-family:var(--body);
	font-weight:700;
	box-shadow:var(--shadow);
	transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover{transform:translate(2px,2px);box-shadow:var(--shadow-sm)}
.btn--green,.btn--leaf,.btn--orange,.rvx-cta,.bo-cta{background:var(--tomato);color:#fff;border-color:var(--ink)}
.btn--green:hover,.btn--leaf:hover,.btn--orange:hover,.rvx-cta:hover,.bo-cta:hover{background:var(--tomato-bright);color:#fff}
.btn--cream,.btn--ghost-w{background:var(--paper);color:var(--ink)}

/* ---- bands -------------------------------------------------------- */
.band--pale,.bo-band{background:var(--cream)}
.rcp-band,.band--dark{background:var(--ink);color:var(--cream)}
.rcp-band__q,.rcp-band .btn--cream{color:var(--ink)}
.rh,.rvx-verdict,.card--tips{background:var(--marigold);color:var(--ink);border:var(--border);box-shadow:var(--shadow)}
.rh h1,.rh__dek,.rh__lede,.rh__meta,.rh__kick{color:var(--ink)}
.rh__meta .ic,.rvx-verdict>.ic{color:var(--tomato)}

/* ---- tables ------------------------------------------------------- */
.bo-table th,.g-table th,.rvx-foot thead th{
	background:var(--ink);color:var(--cream);
	text-transform:uppercase;letter-spacing:.08em;
}
.bo-table td,.g-table td{border-top:2px solid var(--ink)}
.bo-table,.g-table{overflow:hidden}

/* ---- a marigold underline behind an emphasised phrase ------------- */
.hl,.bo-title em,.g-title em,h1 em{
	font-style:normal;
	box-shadow:inset 0 -.28em 0 var(--marigold);
}

/* ---- fixes for rules the older sheets set later ------------------- */
.bo-table th,.g-table th,.rvx-foot thead th,.spec-table th{
	background:var(--ink)!important;color:var(--cream)!important;
	text-transform:uppercase;letter-spacing:.08em;
}
.bo-table,.g-table{border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}

/* The hero photo bleeds behind the copy. With the display face the
   headline runs wider, so the overlay moves out of its way and the fade
   uses the new cream rather than the old literal. */
.bo-hero__shot::after{background:linear-gradient(90deg,var(--cream) 0%,rgba(251,241,224,.92) 30%,rgba(251,241,224,0) 78%)}
.bo-hero__script{right:20px;top:auto;bottom:18px;max-width:11ch;text-align:right;
	font-family:var(--display);font-weight:700;font-size:var(--t-lg);color:var(--tomato);line-height:1.15}
@media (max-width:900px){
	.bo-hero__shot::after{background:linear-gradient(0deg,var(--cream) 0%,rgba(251,241,224,0) 60%)}
	.bo-hero__script{display:none}
}

/* Header and footer join the palette. */
.site-head,.head-navbar{background:var(--paper);border-bottom:var(--border)}
.site-foot{background:var(--ink);color:var(--cream)}

/* The photo occupies the right 52% of the hero, so the copy has to stop
   before it. Without this the headline runs under the picture and
   collides with the overlay sitting on top of it. */
.bo-hero__in{max-width:min(1368px,100%)}
.bo-title,.bo-sub,.bo-dek,.bo-trust{max-width:46%}
@media (max-width:900px){
	.bo-title,.bo-sub,.bo-dek,.bo-trust{max-width:100%}
}

/* ---- plain hero ---------------------------------------------------
   With the photo gone the copy takes the full width and the section
   needs its own ground, since the picture used to provide it. */
.bo-hero--plain{background:var(--cream);border-bottom:var(--border)}
.bo-hero--plain .bo-hero__in{padding-top:30px;padding-bottom:34px}
.bo-hero--plain .bo-title,
.bo-hero--plain .bo-sub,
.bo-hero--plain .bo-dek,
.bo-hero--plain .bo-trust{max-width:min(62ch,100%)}
.bo-hero--plain .bo-trust{display:flex;flex-wrap:wrap;gap:14px 30px}

/* ---- top pick in the hero ------------------------------------------
   Fills the space the stock photo used to take, with something that is
   actually about this page: the number one pick and a way to act on it. */
.bo-hero--split .bo-hero__in{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:34px;align-items:start}
.bo-hero--split .bo-title,.bo-hero--split .bo-sub,
.bo-hero--split .bo-dek,.bo-hero--split .bo-trust{max-width:100%}
.bo-hero--split .pill,.bo-hero--split .bo-title,.bo-hero--split .bo-sub,
.bo-hero--split .bo-trust,.bo-hero--split .bo-dek{grid-column:1}
/* a grid item stretches to its column unless told otherwise; the pill must
   stay the width of its own text. */
.bo-hero--split .pill{justify-self:start}

.bo-toppick{grid-column:2;grid-row:1 / span 6;align-self:start;
	background:var(--paper);border:var(--border);border-radius:var(--radius);
	box-shadow:var(--shadow);padding:18px 18px 20px;text-align:center}
/* Marigold here whatever the pick's tone: the only red in this card should
   be the button, so the eye lands on the one thing to click. */
.bo-toppick .badge{position:static;display:inline-block;margin:0 0 14px;
	background:var(--marigold);color:var(--ink);white-space:normal;line-height:1.3}
.bo-toppick__shot{aspect-ratio:1/1;display:grid;place-items:center;margin-bottom:12px}
.bo-toppick__shot .l-media,.bo-toppick__shot img{max-height:190px;width:auto;object-fit:contain}
.bo-toppick__name{font-size:var(--t-lg);line-height:1.25;margin:0}
.bo-toppick__why{margin-top:8px;font-size:var(--t-sm);line-height:1.5;color:var(--ink-soft)}
.bo-toppick__specs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 16px;margin-top:12px;
	font-size:var(--t-xs);color:var(--ink-soft)}
.bo-toppick__specs li{display:flex;align-items:center;gap:6px}
.bo-toppick__specs .ic{width:15px;height:15px;color:var(--tomato)}
.bo-toppick__cta{display:flex;justify-content:center;margin-top:16px;width:100%}

@media (max-width:980px){
	.bo-hero--split .bo-hero__in{grid-template-columns:minmax(0,1fr)}
	/* Stacked, the pick belongs straight after the sub-heading rather than
	   below the trust list, where a phone reader would never reach it. */
	.bo-toppick{grid-column:1;grid-row:auto;order:1;max-width:420px;margin-top:6px}
	.bo-hero--split .bo-trust{order:2}
	.bo-hero--split .bo-dek{order:3}
}