/* SmartwatchCrunch Product Blocks
   The accent colour is set from the plugin settings screen,
   so you should not need to edit anything in here. */

.swc-pick{
	--pick-accent:#5a4fe0;
	--pick-flag-ink:#ffffff;
	--pick-ink:#16181d;
	--pick-body:#4a5160;
	--pick-btn:#101114;
	--pick-btn-ink:#ffffff;

	position:relative;
	font-family:inherit;
	background:#fff;
	border:3px solid var(--pick-accent);
	margin:3rem 0 2.5rem;
}

.swc-pick__flag{
	position:absolute;
	top:-16px;
	left:-3px;
	max-width:calc(100% - 1rem);
	box-sizing:border-box;
	background:var(--pick-accent);
	color:var(--pick-flag-ink);
	font-size:.95rem;
	font-weight:700;
	letter-spacing:-.005em;
	line-height:1;
	padding:.55rem 1.6rem .55rem .9rem;
	clip-path:polygon(0 0, 100% 0, calc(100% - 11px) 50%, 100% 100%, 0 100%);
}

.swc-pick__body{
	display:flex;
	align-items:center;
	gap:1.75rem;
	padding:2.5rem 2rem 2rem;
}

.swc-pick__media{
	flex:0 0 38%;
	display:flex;
	align-items:center;
	justify-content:center;
}

.swc-pick__media img{
	display:block;
	max-width:100%;
	height:auto;
	margin:0;
}

.swc-pick__content{
	flex:1 1 auto;
	min-width:0;
}

.swc-pick__headline{
	font-size:1.45rem;
	line-height:1.2;
	font-weight:720;
	letter-spacing:-.02em;
	color:var(--pick-ink);
	margin:0 0 .55rem;
}

.swc-pick__product{
	display:inline-block;
	font-size:1.02rem;
	line-height:1.4;
	color:var(--pick-ink);
	text-decoration:underline;
	text-underline-offset:3px;
	margin:0 0 .7rem;
}

.swc-pick__product:hover{
	color:var(--pick-accent);
}

.swc-pick__desc{
	font-size:1rem;
	line-height:1.55;
	color:var(--pick-body);
	margin:0 0 1.4rem;
}

.swc-pick__cta{
	display:block;
	width:100%;
	box-sizing:border-box;
	background:var(--pick-btn);
	color:var(--pick-btn-ink);
	text-align:center;
	text-decoration:none;
	font-size:1rem;
	font-weight:700;
	padding:1rem 1.25rem;
	border-radius:3px;
	transition:background .15s ease;
}

.swc-pick__cta:hover,
.swc-pick__cta:focus{
	background:var(--pick-accent);
	color:var(--pick-btn-ink);
	text-decoration:none;
}

.swc-pick__cta:focus-visible{
	outline:3px solid var(--pick-ink);
	outline-offset:3px;
}

@media (max-width:640px){
	.swc-pick__body{
		flex-direction:column;
		align-items:stretch;
		gap:1.25rem;
		padding:2.25rem 1.25rem 1.5rem;
	}
	.swc-pick__media{ flex:0 0 auto; }
	.swc-pick__media img{ max-width:230px; }
	.swc-pick__headline{ font-size:1.3rem; }
}