/*
 * CB ShopMy Shelf
 *
 * The Plate, inverted: white ground, black keyline. Every value here was
 * measured off the blog's own sidebar so the shelf is the same object as the
 * blocks above and below it, only turned the other way up.
 *
 * ONE RULE, USED EVERYWHERE
 * -------------------------
 * Every structural line in this block is --cb-sms-rule. Before 1.7.0 there
 * were three different ones - the panel hairline at 14%, the product tiles at
 * 7% and the ShopMy rule at 18% - which is what made the inside of the block
 * look like it had been assembled from parts. The only line that is allowed
 * to be heavier is the CTA underline, because that one is a link and has to
 * look like it.
 */

:root {
	--cb-sms-rule: rgba(0, 0, 0, .14);
}

/*
 * Paper inside a hairline.
 *
 * The block sits directly under the blog's black category plate. A second
 * plate there - which is what a white card with a solid black keyline is -
 * made the rail two heavy objects in a row. So the shelf stops being a
 * plate and becomes a ground: a warm paper panel, with a hairline set in
 * from its edge rather than drawn on it.
 */
/*
 * The inset is PADDING on the panel, not margin on the inner - and that is
 * the whole bug fix in 1.7.0.
 *
 * 1.6.0 put `margin: 10px` on .cb-sms-inner. The panel has no padding and no
 * border, so the inner's top and bottom margins collapsed straight through
 * it: the hairline sat 10px in at the sides and flush against the paper top
 * and bottom. It read as a mistake because it was one. Padding cannot
 * collapse, so the frame is now even on all four sides.
 */
.cb-sms {
	width: 100%;
	background: #F4F2EE;
	padding: 10px;
	box-sizing: border-box;
}

.cb-sms-inner {
	border: 1px solid var(--cb-sms-rule);
	margin: 0;
	padding: 24px 20px 26px;
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.cb-sms-kicker {
	font-family: "Lexend Deca", var(--wlc-font-label, sans-serif);
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 2px;
	text-transform: uppercase;
	line-height: 15px;
	color: rgba(0, 0, 0, .6);
}

/*
 * Scoped to .cb-sms on purpose, and it matters.
 *
 * The blog's own stylesheet carries `.wlc-section h2` - Playfair Display,
 * 30px, weight 700, -0.5px tracking. At (0,1,1) that beat a bare
 * `.cb-sms-title` at (0,1,0), so the live shelf was wearing the blog's
 * display serif instead of this, wrapping to two lines and standing 90px
 * taller than it should. `.cb-sms .cb-sms-title` is (0,2,0) and wins
 * without a single !important.
 *
 * 15px at 2.6px tracking, not 17 at 4: "CURRENT OBSESSIONS" measured 261px
 * inside a 262px column, which is a wrap waiting to happen on the next
 * title she writes.
 */
.cb-sms .cb-sms-title {
	margin: 0;
	font-family: "Lexend Deca", var(--wlc-font-label, sans-serif);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 2.6px;
	text-transform: uppercase;
	line-height: 21px;
	color: #0A0A0A;
}

.cb-sms-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

/* Three products should not leave a hole: one row of three, slightly smaller. */
.cb-sms-grid:has(> .cb-sms-tile:nth-child(3):last-child) {
	grid-template-columns: repeat(3, 1fr);
}

/* One product is a feature, not a quarter-empty grid. */
.cb-sms-grid:has(> .cb-sms-tile:only-child) {
	grid-template-columns: 1fr;
}

.cb-sms-tile {
	display: block;
	text-decoration: none;
}

.cb-sms-img {
	display: block;
	width: 100%;
	height: 118px;
	object-fit: cover;
	/*
	 * Inverted from 1.5.0, and for the same reason. Now that the block's
	 * ground is the warm paper, the product tiles go white so the cut-out
	 * shots lift off the panel instead of dissolving into it.
	 */
	background: #fff;
	border: 1px solid var(--cb-sms-rule);
	box-sizing: border-box;
}

.cb-sms-grid:has(> .cb-sms-tile:only-child) .cb-sms-img {
	height: 200px;
}

.cb-sms-name {
	display: block;
	margin-top: 7px;
	font-family: "Lexend Deca", var(--wlc-font-label, sans-serif);
	font-size: 10px;
	font-weight: 300;
	letter-spacing: .4px;
	line-height: 15px;
	color: rgba(0, 0, 0, .82);
}

.cb-sms-brand {
	display: block;
	font-family: "Lexend Deca", var(--wlc-font-label, sans-serif);
	font-size: 9px;
	font-weight: 300;
	letter-spacing: .4px;
	line-height: 14px;
	color: rgba(0, 0, 0, .55);
}

.cb-sms-cta {
	align-self: flex-start;
	margin-top: 2px;
	padding-bottom: 7px;
	font-family: "Lexend Deca", var(--wlc-font-label, sans-serif);
	font-size: 11px;
	font-weight: 300;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	line-height: 16px;
	color: #0A0A0A;
	text-decoration: none;
	border-bottom: 1px solid #0A0A0A;
	/*
	 * !important because the blog carries `.wlc-section * { transition: none
	 * !important }` - every transition inside it is off at the root, and
	 * without matching that weight this would snap instead of moving.
	 */
	transition: padding-right .28s cubic-bezier(.2, .7, .3, 1) !important;
}

/*
 * The arrow is its own element so it can move on its own. The link's
 * padding-right grows at the same time, which widens the box - and because
 * the rule is the box's bottom border, the line follows the arrow out.
 * That is the motion: the arrow steps forward and the line goes with it.
 */
.cb-sms-cta-arrow {
	display: inline-block;
	transition: transform .28s cubic-bezier(.2, .7, .3, 1) !important;
}

.cb-sms .cb-sms-cta:hover,
.cb-sms .cb-sms-cta:focus-visible {
	padding-right: 10px;
	color: #0A0A0A;
	border-bottom-color: #0A0A0A;
}

.cb-sms .cb-sms-cta:hover .cb-sms-cta-arrow,
.cb-sms .cb-sms-cta:focus-visible .cb-sms-cta-arrow {
	transform: translateX(6px);
}

@media ( prefers-reduced-motion: reduce ) {

	.cb-sms-cta,
	.cb-sms-cta-arrow {
		transition: none !important;
	}

	.cb-sms .cb-sms-cta:hover,
	.cb-sms .cb-sms-cta:focus-visible {
		padding-right: 0;
	}

	.cb-sms .cb-sms-cta:hover .cb-sms-cta-arrow,
	.cb-sms .cb-sms-cta:focus-visible .cb-sms-cta-arrow {
		transform: none;
	}
}

.cb-sms-mark {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 3px;
	padding-top: 13px;
	border-top: 1px solid var(--cb-sms-rule);
}

.cb-sms-mark-label {
	font-family: "Lexend Deca", var(--wlc-font-label, sans-serif);
	font-size: 9px;
	font-weight: 300;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: rgba(0, 0, 0, .5);
	white-space: nowrap;
}

/* Their mark at its true 3.719:1. Height auto so it is never squashed. */
.cb-sms-logo {
	width: 76px;
	height: auto;
	display: block;
}

.cb-sms-note {
	margin: 0;
	font-family: "Lexend Deca", var(--wlc-font-label, sans-serif);
	font-size: 10px;
	font-weight: 300;
	letter-spacing: .5px;
	line-height: 16px;
	color: rgba(0, 0, 0, .62);
}

.cb-sms-note a { color: inherit; }

.cb-sms-tile:focus-visible,
.cb-sms-cta:focus-visible,
.cb-sms-note a:focus-visible {
	outline: 2px solid #0A0A0A;
	outline-offset: 2px;
}

@media (max-width: 900px) {
	.cb-sms-img { height: 132px; }
}