:root {
	--color-pink: #e15561;
	--color-red: #ea002a;
	--color-ct-red: #a40606 ; 
	--color-dark-red: #860505 ; 
	--color-janky-red: #b20016 ; /* ugly non-brand red */
    --color-popup-pink: #f4a6a6;
    --color-popup-background: #c21313;
	--color-janky-yellow: #fbc131;
	--color-janky-highlight: #ffd671;
	--color-mystery: #ebd3c2;
	--border-weight: min(0.2rem, calc(0.1rem + 0.5vw));
	--font-size-pbobs: min(1.25rem, calc(0.5em + 2.15vw));
	--circle-deco-size:75em;
}

@media (min-width:48em) {
	:root {
		--font-size-pbobs: min(1.25rem, calc(0.2em + 1.25vw));
	}
}

main .cmp-container > .hero,
main .cmp-container > .text {
	font-size: var(--font-size-pbobs);
}
main .cmp-container > .text {
	border-top: var(--border-weight) solid #fff;
}
main .content_wrapper {
	max-width: 75rem;
	width: calc(100% - 2rem);
}

.pbobs-hero {
	background:var(--color-janky-red);
	height:32em;
	position:relative;
	overflow: hidden;
	text-align:center;
	color:#fff;
	font-size:min(1.25rem, 4vw);
}
.pbobs-hero::before {
	content:'';
	background:var(--color-pink);
	border-radius:100%;
	position:absolute; 
	left:50%; bottom:35%;
	width:calc(60% + 18em);
	height:36em;
	transform:translate(-50%,0);
	border:var(--border-weight) solid #fff;
	z-index:auto;
}
.pbobs-hero section {
	height:100%;
}
.pbobs-hero .content_wrapper,
.pbobs-hero .rich-text {
	position:static;
	height:100%;
}
.pbobs-hero .content_wrapper::before {
	display:none;
}

.eyebrow {
	color:#f6d178;
	font-family:Pinup;
	margin:0 0 0.5em;
	text-shadow:0.1em 0.1em 0.4em #0009;
	text-transform:uppercase;
}
.eyebrow-sorry {
	display:block;
	text-align:left;
	position:relative;
}
.pbobs-hero-title {
	position:absolute;
	left:50%;
	top: 1em;
	transform:translate(-85%, 0);
}
.pbobs-hero h1 {
	background: url(oyp-lockup.svg) 0 0 / auto 7.2em no-repeat;
	color: #fff0;
	text-align:left;
	padding: 0.05em 2em 1em 0.1em;
	font-size: 1em;
	margin: 0.25em 0 0.25em -0.1em;
	line-height: 1;
	text-shadow:none;
}
.pbobs-hero h1 span {
	display:block;
}
.pbobs-hero h1 span:nth-child(2) {
	font-size: 459%;
	letter-spacing: 0.06em;
	margin: -0.05em -0.05em;
}
.pbobs-hero h1 span:nth-child(3) {
	font-size: 127%;
	margin: -0.4em 0 0 0.2em;
}
.pbobs-hero span.pbobs-h1-soldout {
	font-size: 150%;
	color: #f6d178;
	font-family: Pinup;
	margin: 1em 0 -0.5em;
	text-shadow:0.1em 0.1em 0.4em #0009;
	text-transform:uppercase;
}
.pbobs-hero p {
	margin: 0.5em auto;
	text-shadow: 0.1em 0.1em 0.4em #0009;
	font-weight:bold;
}
.pbobs-hero-img {
	height: 13em;
	top: 4.5em;
	position:absolute;
	width: 23em;
	max-width:none;
	left:50%;
	transform: translate(-50%, 0);
}
.pbobs-hero-img img {
	height:100%;
	position: absolute;
	left: 0;
	object-fit: contain;
	top: 0;
}
.pbobs-hero-desktop-img {
	display:none;
}
.pbobs-hero-mobile-img {
	display:block;
}
.pbobs-hero-msg {
	position:absolute; 
	top:83%;
	left:50%;
	transform:translate(-50%, -50%);
	width:21em;
}


@media (min-width:48em) {
	.pbobs-hero {
		height: 24em;
		text-align:left;
		font-size: var(--font-size-pbobs);
	}
	.pbobs-hero::before {
		width:200em;
		height:100em;
		left:auto;
		top:50%;
		right:50%;
		margin-right: -3em;
		transform:translate(0, -50%);
		z-index: 2;
	}
	.pbobs-hero .rich-text {
		height:100%;
		display:flex;
		align-items:center;
	}
	
	.pbobs-hero-title {
		position:static;
		transform:none;
	}
	.pbobs-hero h1 {
		font-size:1.42em;
	}
	.pbobs-hero-intro {
		font-size: 107%;
		padding-left: 7.5em;
		position: relative;
		z-index: 3;
	}
	.pbobs-hero .decoration {
		z-index: 3;
	}
	.pbobs-hero-soldout .pbobs-hero-intro {
		font-size: 100%;
	}
	.pbobs-hero-msg {
		position:static;
		transform:none;
	}
	.pbobs-hero-img {
		transform:none;
		height: 100%;
		width: 50%;
		max-width: 33em;
		top: 0;
		z-index: 1;
	}
	.pbobs-hero-desktop-img {
		display:block;
	}
	.pbobs-hero-mobile-img {
		display:none;
	}
}

/* decorative sprites, desktop elements */
.decoration {
	position:absolute;
	font-size:min(1rem, 3.5vw);
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
	width:5em;
	height:5em;
	margin:-2.5em;
	pointer-events:none;
}
.desktop-only { 
	display:none;
}
.decoration-crisps {
	top: 66%;
	left: calc(50% - 11em);
	background-image:url(./small-svgs/crisps.svg);
	transform:rotate(45deg);
}
.decoration-question {
	background-image:url(./small-svgs/question.svg);
	top: 65%;
	left: calc(50% + 12em);
}
.decoration-interrobang {
	top: 8%;
	left: calc(50% + 12em);
	background-image:url(./small-svgs/interrobang.svg);
	background-size:80% auto;
	transform:rotate(20deg);
}

@media (min-width:48em) {
	.mobile-only { 
		display:none;
	}
	.desktop-only { 
		display:initial;
	}
	.decoration {
		font-size: min(1.15rem, 1.5vw);
	}
	.decoration-stache {
		background-image:url(./small-svgs/stache.svg);
		transform:rotate(-45deg);
		top:15%;
		left: calc(50% - 29em);
	}
	.decoration-question {
		top: 57%;
		left: calc(50% - 2em);
	}
	.decoration-interrobang {
		top:15%;
		left: calc(50% - 6em);
	}
	.decoration-crisps {
		top:70%;
		left: calc(50% - 29em);
	}
	.pbobs-show-countdown .decoration-question {
		top: 50%;
		left: calc(50% - 1em);
	}
}


.pbobs-hero .button-cta {
	color:var(--color-dark-red);
	background:var(--color-janky-yellow);
	border:0.25em solid ;
	box-shadow:0 0.25em 0.1em #0004;
	padding: 0.75em 1.5em;
	min-width:0;
	border-radius:2em;
	line-height: 0.9em;
	font-size:1em;
}
.pbobs-hero .button-cta:hover,
.pbobs-hero a:hover .button-cta {
	transform:none;
	background:var(--color-janky-highlight);
	box-shadow:0 0.4em 0.2em #0003;
}
.pbobs-hero .button-cta::after {
	display:none;
}