/*
 * WordPress-specific overrides and replacements for behavior that
 * Adobe Portfolio's runtime JS used to provide.
 */

/* Bebas Kai, self-hosted. The compiled Adobe CSS references the Typekit
   alias "shzc"; keeping that family name means zero edits to the ported CSS. */
@font-face {
	font-family: shzc;
	src: url('../fonts/bebas-kai.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Images are served eagerly (no Adobe lazy-loader), so clear the
   placeholder aspect-ratio padding hack and let images size naturally. */
.project-module.module.image img,
.project-cover .cover .cover__img {
	background: none;
}
.project-module.module.image img {
	display: block;
	height: auto !important;
	max-width: 100%;
	padding-bottom: 0 !important;
	width: 100%;
}

/* Native <button> replaces Adobe's div-based submit control. */
.contact-form button.submit-button {
	border: 0;
	font: inherit;
	width: auto;
}

/* Honeypot field — hidden from humans. */
.megosa-hp {
	position: absolute !important;
	left: -9999px !important;
	height: 1px;
	overflow: hidden;
}

.contact-form-error {
	color: #c00;
	margin-bottom: 20px;
}

/* Simple lightbox (replaces Adobe's). White backdrop like the original config. */
.megosa-lightbox {
	align-items: center;
	background: rgba(255, 255, 255, 0.94);
	cursor: zoom-out;
	display: none;
	inset: 0;
	justify-content: center;
	position: fixed;
	z-index: 1001;
}
.megosa-lightbox.open {
	display: flex;
}
.megosa-lightbox img {
	max-height: 96vh;
	max-width: 96vw;
	object-fit: contain;
}
.js-lightbox {
	cursor: zoom-in;
}

/* Image grids (media_collection): Adobe ships them visibility:hidden and
   reveals them via JS after computing the justified layout. The layout data
   (item widths / flex-grow / aspect fillers) is already inline in the HTML,
   so we can simply reveal the grid. */
.grid--main {
	visibility: visible;
}
.grid__item-image {
	object-fit: cover;
}

/* Scroll-reveal: assets fade up as they enter the viewport.
   The .megosa-reveal class is added by JS, so browsers without JS
   (or without IntersectionObserver) simply show everything. */
@media (prefers-reduced-motion: no-preference) {
	/* Apple-style reveal: long ease-out-expo curve, generous travel,
	   media settles from a barely-perceptible zoom. */
	.megosa-reveal {
		opacity: 0;
		transform: translateY(44px) scale(0.985);
		transition:
			opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
			transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
		transition-delay: var(--reveal-delay, 0ms);
		will-change: opacity, transform;
	}
	.megosa-reveal.in-view {
		opacity: 1;
		transform: none;
	}

	/* Parallax drift on gallery covers: the image pans gently inside its
	   crop as you scroll. Extra height keeps edges from showing. */
	.project-cover .cover .cover__img {
		height: calc(100% + 34px);
		transition: none;
	}
}

/* Back-to-top fixed button: hidden until scrolled (Adobe JS behavior). */
.back-to-top-fixed {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.back-to-top-fixed.show {
	opacity: 1;
	pointer-events: auto;
}

/* ---------- Blog ---------- */

.megosa-blog-list {
	margin: 0 auto;
	max-width: 760px;
}
.megosa-blog-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	padding: 48px 0;
}
.megosa-blog-item:first-child {
	padding-top: 8px;
}
.megosa-blog-link {
	color: inherit;
	display: block;
	text-decoration: none;
}
.megosa-blog-thumb img {
	display: block;
	height: auto;
	margin-bottom: 24px;
	width: 100%;
}
.megosa-blog-meta {
	color: #999999;
	font-family: shzc;
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.megosa-blog-title {
	color: #ffffff;
	font-family: shzc;
	font-size: 42px;
	letter-spacing: 0.02em;
	line-height: 1.05;
	margin: 10px 0 14px;
	text-transform: uppercase;
	transition: opacity 0.2s ease;
}
.megosa-blog-link:hover .megosa-blog-title {
	opacity: 0.65;
}
.megosa-blog-excerpt {
	color: #aeaeae;
	font-size: 16px;
	line-height: 1.65;
	max-width: 640px;
}
.megosa-blog-more {
	color: #ffffff;
	display: inline-block;
	font-family: shzc;
	font-size: 14px;
	letter-spacing: 0.12em;
	margin-top: 18px;
	text-transform: uppercase;
}
.megosa-blog-empty {
	color: #999999;
	text-align: center;
	padding: 60px 0;
}
.megosa-blog-pagination {
	margin: 40px auto 0;
	max-width: 760px;
	text-align: center;
}
.megosa-blog-pagination .nav-links {
	color: #999999;
	display: flex;
	font-family: shzc;
	gap: 18px;
	justify-content: center;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.megosa-blog-pagination a {
	color: #ffffff;
}

/* Single post */
.megosa-post-hero img {
	display: block;
	height: auto;
	margin: 0 auto 48px;
	max-width: 100%;
}
.megosa-prose {
	color: #dddddd;
	font-size: 18px;
	line-height: 1.75;
	margin: 0 auto;
	max-width: 720px;
}
.megosa-prose p,
.megosa-prose ul,
.megosa-prose ol,
.megosa-prose blockquote,
.megosa-prose figure {
	margin-bottom: 1.5em;
}
.megosa-prose h2,
.megosa-prose h3 {
	color: #ffffff;
	font-family: shzc;
	letter-spacing: 0.02em;
	line-height: 1.1;
	margin: 1.8em 0 0.6em;
	text-transform: uppercase;
}
.megosa-prose h2 { font-size: 34px; }
.megosa-prose h3 { font-size: 26px; }
.megosa-prose a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.megosa-prose img {
	display: block;
	height: auto;
	max-width: 100%;
}
.megosa-prose blockquote {
	border-left: 2px solid #ffffff;
	color: #ffffff;
	font-style: italic;
	padding-left: 24px;
}
.megosa-prose li {
	margin-bottom: 0.4em;
	margin-left: 1.2em;
}
.megosa-post-nav {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	font-family: shzc;
	gap: 24px;
	justify-content: space-between;
	letter-spacing: 0.06em;
	margin: 64px auto 0;
	max-width: 720px;
	padding-top: 28px;
	text-transform: uppercase;
}
.megosa-post-nav a {
	color: #ffffff;
}
.megosa-post-nav-next {
	text-align: right;
}

/* ---------- Toys ("I got annoyed, so I built this") ---------- */

/* Two-line nav item: tighter leading so it sits inline with the others. */
nav .nav-two-line a {
	display: inline-block;
	line-height: 1.05;
	text-align: left;
	vertical-align: middle;
}

/* Header layout: logo left, nav in ONE line right beside it.
   Desktop only — mobile keeps the hamburger layout. */
@media (min-width: 933px) {
	.site-header {
		justify-content: flex-start;
	}
	.site-header .logo-wrap {
		flex: 0 0 auto;
		margin: 0;
		order: 1;
		width: auto;
	}
	.site-header .nav-container {
		align-items: center;
		display: flex;
		flex-wrap: nowrap;
		gap: 30px;
		margin-left: 44px;
		max-width: none;
		order: 2;
		text-align: left;
		white-space: nowrap;
		width: auto;
	}
	.site-header .nav-container .page-title,
	.site-header .nav-container .gallery-title {
		margin-left: 0;
	}
	.site-header .pf-nav-social {
		display: none;
	}
}
@media (min-width: 933px) and (max-width: 1250px) {
	nav .page-title a,
	nav .gallery-title a,
	nav .page-title a.active,
	nav .gallery-title a.active,
	nav .page-title a:hover,
	nav .gallery-title a:hover {
		font-size: 25px;
	}
	nav .nav-two-line a,
	nav .nav-two-line a:hover,
	nav .nav-two-line a.active {
		font-size: 22px;
	}
	.site-header .nav-container {
		gap: 22px;
		margin-left: 30px;
	}
}

/* ---------- Scrawl quote (About page) ---------- */

@font-face {
	font-family: 'megosa-chalk';
	src: url('../fonts/chalk.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
.megosa-quote {
	filter: url('#megosa-dust-quote');
	margin: 30px auto 80px;
	max-width: 900px;
	text-align: center;
}
.megosa-quote > span {
	display: block;
	line-height: 1.05;
}
.q-box {
	background: #ffffff;
	color: #111111 !important;
	display: inline-block;
	font-family: 'megosa-chalk', cursive;
	font-size: clamp(18px, 2.4vw, 30px);
	letter-spacing: 0.14em;
	margin-bottom: 14px;
	padding: 6px 18px;
	text-transform: uppercase;
	transform: rotate(-1.6deg);
}
.q-thin {
	color: #ffffff;
	font-family: 'megosa-hand', cursive;
	font-size: clamp(56px, 9vw, 116px);
	transform: rotate(0.8deg);
}
.q-chalk {
	color: #ffffff;
	font-family: 'megosa-chalk', cursive;
	font-size: clamp(44px, 7vw, 92px);
	transform: rotate(-1deg);
}
.q-chalk.q-underline {
	border-bottom: 5px solid #ffffff;
	display: inline-block;
	padding-bottom: 10px;
}
.q-small {
	color: #cccccc;
	font-family: 'megosa-hand', cursive;
	font-size: clamp(26px, 3.6vw, 44px);
	margin: 10px 0 6px;
	transform: rotate(1.4deg);
}
.q-credit {
	color: #777777;
	display: block;
	font-family: 'megosa-hand', cursive;
	font-size: 22px;
	margin-top: 34px;
	transform: rotate(-0.6deg);
}

/* ---------- Supermarket work grid: trays, cling film, labels ---------- */

.project-covers {
	gap: 34px;
	padding: 34px 4% 10px;
}
.project-covers .project-cover.tray {
	margin: 0 !important;
	width: calc(50% - 17px);
}

/* ---------- Basket collage (front page): stacked, not gridded ---------- */

.project-covers.basket {
	align-items: flex-start;
	background-image:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 46px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 46px);
	gap: 0;
	justify-content: center;
	padding: 60px 3% 170px;
}
.project-covers.basket .project-cover.tray {
	position: relative;
}
/* Each tray tossed at its own angle/offset; transforms don't affect layout,
   so the overlaps are safe. Pattern repeats every 8 covers. */
/* Deep pile: cards bury each other — drag them aside to rummage.
   --dx/--dy are the drag offsets written by site.js. */
.basket .tray { cursor: grab; }
.basket .tray.dragging { cursor: grabbing; z-index: 40 !important; }
.basket .tray.dragging,
.basket .tray.dragging .cover-content-container { transition: none !important; }
.basket .tray:nth-child(8n+1) { width: 54%; transform: translate(calc(9% + var(--dx, 0px)), calc(2% + var(--dy, 0px)))     rotate(-6deg);   z-index: 1; }
.basket .tray:nth-child(8n+2) { width: 44%; transform: translate(calc(-8% + var(--dx, 0px)), calc(14% + var(--dy, 0px)))    rotate(4deg);    z-index: 2; }
.basket .tray:nth-child(8n+3) { width: 52%; transform: translate(calc(11% + var(--dx, 0px)), calc(-62% + var(--dy, 0px)))   rotate(-3deg);   z-index: 3; }
.basket .tray:nth-child(8n+4) { width: 46%; transform: translate(calc(-13% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)))  rotate(5deg);    z-index: 4; }
.basket .tray:nth-child(8n+5) { width: 56%; transform: translate(calc(-6% + var(--dx, 0px)), calc(-108% + var(--dy, 0px)))  rotate(-2deg);   z-index: 7; }
.basket .tray:nth-child(8n+6) { width: 42%; transform: translate(calc(9% + var(--dx, 0px)), calc(-96% + var(--dy, 0px)))    rotate(2deg);    z-index: 8; }
.basket .tray:nth-child(8n+7) { width: 52%; transform: translate(calc(7% + var(--dx, 0px)), calc(-150% + var(--dy, 0px)))   rotate(-4.5deg); z-index: 5; }
.basket .tray:nth-child(8n+8) { width: 46%; transform: translate(calc(-10% + var(--dx, 0px)), calc(-138% + var(--dy, 0px))) rotate(3.5deg);  z-index: 6; }
.basket .tray:hover {
	z-index: 10;
}
@media (max-width: 540px) {
	.basket .tray:nth-child(n) {
		transform: rotate(0deg);
		width: 100%;
		z-index: auto;
	}
	.basket .tray:nth-child(odd)  { transform: rotate(-1.6deg) translateY(-6px); }
	.basket .tray:nth-child(even) { transform: rotate(1.4deg) translateY(-14px); }
}

/* The receipt poking out of the basket. */
.megosa-receipt {
	/* Crumpled: wrinkle shading bands + torn zigzag edges. drop-shadow
	   (not box-shadow) so the shadow follows the clipped shape. */
	background:
		repeating-linear-gradient(104deg, rgba(0, 0, 0, 0) 0 34px, rgba(0, 0, 0, 0.055) 34px 43px, rgba(0, 0, 0, 0) 43px 82px),
		repeating-linear-gradient(63deg, rgba(0, 0, 0, 0) 0 27px, rgba(0, 0, 0, 0.045) 27px 33px, rgba(0, 0, 0, 0) 33px 64px),
		linear-gradient(180deg, #faf8f3, #f0ede5);
	clip-path: polygon(0 1.2%, 4% 0, 9% 1.4%, 15% 0.3%, 22% 1.6%, 30% 0.4%, 38% 1.5%, 47% 0.2%, 55% 1.4%, 63% 0.3%, 71% 1.6%, 79% 0.4%, 86% 1.5%, 93% 0.2%, 100% 1.3%, 100% 98.8%, 95% 100%, 88% 98.6%, 80% 99.8%, 72% 98.5%, 63% 99.7%, 54% 98.4%, 45% 99.8%, 36% 98.5%, 27% 99.7%, 19% 98.4%, 11% 99.8%, 5% 98.6%, 0 99.6%);
	color: #1a1a1a;
	cursor: grab;
	display: block;
	filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55));
	font-family: 'Courier New', Courier, monospace;
	margin: clamp(-900px, -56vw, -220px) auto 0;
	max-width: 385px;
	padding: 32px 24px 36px;
	position: relative;
	transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(-7deg);
	width: 90%;
	/* Always the top layer of the pile — cards never cover the bill. */
	z-index: 9999;
}
.megosa-receipt.dragging {
	cursor: grabbing;
}
.megosa-receipt .r-head {
	display: block;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
}
.megosa-receipt .r-sub {
	display: block;
	font-size: 12.5px;
	letter-spacing: 0.18em;
	margin-top: 2px;
	text-align: center;
	text-transform: uppercase;
}
.megosa-receipt .r-rule {
	border-top: 1px dashed #1a1a1a;
	display: block;
	margin: 12px 0;
}
.megosa-receipt .r-line {
	color: inherit;
	display: flex;
	font-size: 13px;
	gap: 12px;
	justify-content: space-between;
	letter-spacing: 0.03em;
	line-height: 1.5;
	padding: 2px 0;
	text-decoration: none;
}
.megosa-receipt .r-line:hover .r-item {
	background: #111111;
	color: #ffffff;
}
.megosa-receipt .r-item {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.megosa-receipt .r-price {
	flex: 0 0 auto;
}
.megosa-receipt .r-total {
	display: flex;
	font-size: 15px;
	font-weight: 700;
	justify-content: space-between;
}
.megosa-receipt .r-thanks {
	display: block;
	font-size: 11.5px;
	letter-spacing: 0.14em;
	margin-top: 14px;
	text-align: center;
}
.megosa-receipt .tray-barcode {
	margin: 12px auto 0;
}

/* Bare artwork card: no tray frame, 20px rounded corners. */
.tray .cover-content-container {
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
	overflow: visible;
	transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.tray .cover-image-wrap {
	border-radius: 20px;
}
.tray:hover {
	z-index: 3;
}

/* Cling-film sheen: static highlights + a glint that sweeps on hover. */
.tray-sheen {
	background:
		linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 22%),
		linear-gradient(295deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 30%),
		radial-gradient(ellipse at 18% 8%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 42%);
	border-radius: 20px;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}
.tray-sheen::after {
	background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.30) 50%, rgba(255, 255, 255, 0) 62%);
	content: '';
	inset: 0;
	position: absolute;
	transform: translateX(-120%) skewX(-8deg);
}
.tray:hover .tray-sheen::after {
	transition: transform 0.9s ease;
	transform: translateX(120%) skewX(-8deg);
}

/* Packaging label. */
.tray-label {
	background: #ffffff;
	bottom: 26px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
	color: #111111;
	font-family: 'Courier New', Courier, monospace;
	left: 50%;
	max-width: 78%;
	min-width: 55%;
	padding: 12px 16px 10px;
	position: absolute;
	text-align: left;
	transform: translateX(-50%) rotate(-2deg);
	z-index: 2;
}
.tray-sku {
	display: block;
	font-size: 11px;
	letter-spacing: 0.2em;
	opacity: 0.65;
}
.tray-title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	margin: 3px 0 6px;
	text-transform: uppercase;
}
.tray-meta {
	border-top: 1px dashed #111111;
	display: block;
	font-size: 9px;
	letter-spacing: 0.08em;
	padding-top: 6px;
}
.tray-barcode {
	background: repeating-linear-gradient(
		90deg,
		#111111 0 2px, transparent 2px 4px,
		#111111 4px 5px, transparent 5px 8px,
		#111111 8px 11px, transparent 11px 13px,
		#111111 13px 14px, transparent 14px 18px
	);
	display: block;
	height: 22px;
	margin-top: 8px;
	width: 96px;
}
.tray-stamp {
	align-items: center;
	background: #d5281f;
	border-radius: 50%;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
	color: #ffffff;
	display: flex;
	flex-direction: column;
	font-family: 'megosa-hand', cursive;
	font-size: 21px;
	height: 74px;
	justify-content: center;
	line-height: 0.9;
	position: absolute;
	right: -26px;
	text-align: center;
	top: -30px;
	transform: rotate(9deg);
	width: 92px;
}
.tray-stamp em {
	font-size: 15px;
	font-style: normal;
	opacity: 0.85;
}

@media (max-width: 540px) {
	.project-covers .project-cover.tray {
		width: 100%;
	}
	.tray-label {
		max-width: 88%;
	}
}

/* ---------- "clicker thingy" cursor trail ---------- */

.megosa-cursor,
.megosa-cursor-ghost {
	font-family: 'megosa-hand', cursive;
	font-size: 24px;
	left: 0;
	line-height: 0.85;
	pointer-events: none;
	position: fixed;
	text-align: center;
	top: 0;
	white-space: pre;
	z-index: 2000;
}
.megosa-cursor {
	color: #cfc9ff;
}
.megosa-cursor-ghost {
	animation: megosa-ghost-fade 1.5s ease-out forwards;
	background: linear-gradient(115deg, #7df9ff 0%, #ff71ce 45%, #ffa14a 80%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
@keyframes megosa-ghost-fade {
	from {
		filter: blur(0) var(--ghost-hue, hue-rotate(0deg));
		opacity: 0.85;
		transform: translate(0, 0) scale(1);
	}
	to {
		filter: blur(3px) var(--ghost-hue, hue-rotate(0deg));
		opacity: 0;
		transform: translate(0, 36px) scale(0.88);
	}
}

/* Dust dissolve on page titles (filter defs live in footer.php,
   scale is animated by site.js). */
.megosa-dusty {
	cursor: default;
	filter: url('#megosa-dust');
	transition: text-shadow 0.45s ease;
}
.megosa-dusty:hover {
	text-shadow:
		14px 2px 10px rgba(255, 255, 255, 0.22),
		-20px -2px 12px rgba(255, 255, 255, 0.14),
		30px 4px 18px rgba(255, 255, 255, 0.08);
}

/* Handwritten nav: "Just Me Again Down Here" — thin scratchy pen scrawl
   (self-hosted). Lowercase, no tracking — hand lettering doesn't shout. */
@font-face {
	font-family: 'megosa-hand';
	src: url('../fonts/scrawl.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
nav .page-title a,
nav .gallery-title a,
nav .page-title a.active,
nav .gallery-title a.active,
nav .page-title a:hover,
nav .gallery-title a:hover {
	font-family: 'megosa-hand', cursive;
	font-size: 31px;
	/* the scrawl font has no bold; a synthesized bold widens the text and
	   reflows the nav on hover, so pin the weight in every state */
	font-weight: 400 !important;
	letter-spacing: 0.02em;
	text-transform: none;
}
/* Active/hover distinction comes from brightness instead of weight. */
nav .page-title a.active,
nav .gallery-title a.active,
nav .page-title a:hover,
nav .gallery-title a:hover {
	color: #ffffff;
}
/* Wider gaps between nav items. */
.site-header nav .page-title,
.site-header nav .gallery-title {
	margin-left: 34px;
}
/* :hover repeated so the generic 31px hover rule above can't inflate
   this smaller two-line item and reflow the nav. */
nav .nav-two-line a,
nav .nav-two-line a:hover,
nav .nav-two-line a.active {
	font-size: 27px;
	line-height: 0.85;
}
.responsive-nav .page-title a,
.responsive-nav .gallery-title a {
	font-size: 40px;
}


.megosa-toys-intro {
	color: #aeaeae;
	font-size: 17px;
	line-height: 1.65;
	margin: 0 auto 56px;
	max-width: 620px;
	text-align: center;
}
.megosa-toy {
	border: 1px solid rgba(255, 255, 255, 0.16);
	margin: 0 auto 48px;
	max-width: 820px;
	padding: 40px 44px 44px;
	position: relative;
}
.megosa-toy-exhibit {
	background: #111111;
	color: #999999;
	font-family: shzc;
	font-size: 13px;
	letter-spacing: 0.25em;
	left: 32px;
	padding: 0 12px;
	position: absolute;
	text-transform: uppercase;
	top: -9px;
}
.megosa-toy-name {
	color: #ffffff;
	font-family: shzc;
	font-size: 44px;
	letter-spacing: 0.02em;
	line-height: 1;
	margin: 6px 0 26px;
	text-transform: uppercase;
}
.megosa-toy-row {
	margin-bottom: 20px;
}
.megosa-toy-label {
	color: #ffffff;
	display: inline-block;
	font-family: shzc;
	font-size: 14px;
	letter-spacing: 0.15em;
	margin-bottom: 6px;
	text-transform: uppercase;
}
.megosa-toy-label.annoyed {
	background: #ffffff;
	color: #111111;
	padding: 2px 10px;
	transform: rotate(-1.2deg);
}
.megosa-toy-row p {
	color: #cccccc;
	font-size: 16px;
	line-height: 1.65;
	margin: 4px 0 0;
	max-width: 640px;
}
.megosa-toy-cta {
	border: 1px solid #ffffff;
	color: #ffffff;
	display: inline-block;
	font-family: shzc;
	font-size: 15px;
	letter-spacing: 0.15em;
	margin-top: 10px;
	padding: 10px 22px;
	text-transform: uppercase;
	transition: background 0.2s ease, color 0.2s ease;
}
.megosa-toy-cta:hover {
	background: #ffffff;
	color: #111111;
}
.megosa-toy-tags {
	color: #777777;
	font-size: 13px;
	letter-spacing: 0.06em;
	margin-top: 22px;
	text-transform: uppercase;
}
.megosa-toys-pending {
	color: #777777;
	font-family: shzc;
	font-size: 15px;
	letter-spacing: 0.2em;
	padding: 24px 0 40px;
	text-align: center;
	text-transform: uppercase;
}

/* WordPress admin bar offset for the fixed header. */
body.admin-bar .site-header {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}