/* Printbed theme styles.
   Black and white like the logo. The accent marks only things you click. */

:root {
	--printbed-black: #000000;
	--printbed-white: #ffffff;
	--printbed-bed: #f0f0ee;
	--printbed-nozzle: #5c5c5c;
	--printbed-line: #dededb;
	--printbed-input: #858581;
	--printbed-error: #b3261e;
	--printbed-accent: #ffd100;
	--printbed-on-accent: #000000;

	--printbed-font-head: "Chakra Petch", "IBM Plex Sans", system-ui, sans-serif;
	--printbed-font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	--printbed-max: 1200px;
	--printbed-pad: clamp(16px, 4vw, 40px);
	--printbed-chamfer: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* Base */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--printbed-white);
	color: var(--printbed-black);
	font-family: var(--printbed-font-body);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-underline-offset: 0.2em;
}

a:hover {
	color: var(--printbed-nozzle);
}

:focus-visible {
	outline: 2px solid var(--printbed-black);
	outline-offset: 3px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--printbed-font-head);
	font-weight: 600;
	line-height: 1.1;
	margin: 0 0 0.5em;
}

.printbed-main {
	display: block;
}

/* The footer sits at the bottom of the screen even on short pages.
   The admin bar's height is taken off when you're logged in. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.printbed-main {
	flex: 1 0 auto;
}

.printbed-header,
.printbed-footer {
	flex-shrink: 0;
}

.printbed-main:focus {
	outline: none;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.printbed-skip-link {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 100;
	padding: 12px 16px;
	background: var(--printbed-black);
	color: var(--printbed-white);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-200%);
}

.printbed-skip-link:focus {
	transform: none;
	color: var(--printbed-white);
}

.printbed-container {
	width: 100%;
	max-width: var(--printbed-max);
	margin-inline: auto;
	padding-inline: var(--printbed-pad);
}

/* Header */

.printbed-header {
	background: var(--printbed-white);
	border-bottom: 1px solid var(--printbed-line);
}

.printbed-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 40px;
	padding-block: 14px;
}

.printbed-header__brand {
	display: flex;
	align-items: center;
	min-height: 44px;
}

.printbed-header__brand a {
	display: flex;
	align-items: center;
}

.printbed-header__brand img,
.printbed-logo {
	display: block;
	height: 32px;
	width: auto;
}

/* Without a logo file, the site name is the logo. */
.printbed-logo-text {
	color: var(--printbed-black);
	font-family: var(--printbed-font-head);
	font-size: 26px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.printbed-logo-text--footer {
	color: var(--printbed-white);
	font-size: 22px;
}

.printbed-header__nav {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 28px;
}

.printbed-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 28px;
}

.printbed-menu a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

.printbed-menu .current-menu-item > a,
.printbed-menu .current-menu-ancestor > a,
.printbed-menu a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 6px;
}

.printbed-header__icons {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 4px;
}

.printbed-icon-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--printbed-black);
}

.printbed-cart-count {
	position: absolute;
	top: 5px;
	right: 3px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--printbed-accent);
	color: var(--printbed-on-accent);
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
}

.printbed-cart-count[data-count="0"] {
	display: none;
}

/* Below desktop width the menus get their own row, so the account and cart icons stay next to the logo. */
@media (max-width: 1023px) {
	.printbed-header__nav {
		order: 3;
		flex-basis: 100%;
	}
}

@media (max-width: 760px) {
	.printbed-header__nav {
		justify-content: flex-start;
	}
}

/* Menu button: phones only, and only once the theme script runs. Without the script the menus stay visible. */
.printbed-menu-toggle {
	display: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.printbed-menu-toggle > span {
	display: flex;
}

.printbed-menu-toggle > .printbed-menu-toggle__close,
.printbed-menu-toggle[aria-expanded="true"] > .printbed-menu-toggle__open {
	display: none;
}

.printbed-menu-toggle[aria-expanded="true"] > .printbed-menu-toggle__close {
	display: flex;
}

@media (max-width: 760px) {
	.printbed-header--js .printbed-menu-toggle {
		display: inline-flex;
	}

	/* Closed, the header is one row: logo, account, cart and the menu button. */
	.printbed-header--js .printbed-header__nav {
		display: none;
	}

	/* Open, the menus list under that row, one link per line. */
	.printbed-header--js.is-open .printbed-header__nav {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin-top: 10px;
		border-top: 1px solid var(--printbed-line);
	}

	.printbed-header--js .printbed-menu {
		flex-direction: column;
		gap: 0;
	}

	.printbed-header--js .printbed-menu a {
		display: flex;
		min-height: 52px;
		border-bottom: 1px solid var(--printbed-line);
		font-size: 17px;
	}

	.printbed-header--js .printbed-menu--pages li:last-child a {
		border-bottom: 0;
	}
}

/* Buttons and links */

.printbed-button,
.print-requests-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 26px;
	border: 0;
	border-radius: 0;
	background: var(--printbed-accent);
	color: var(--printbed-on-accent);
	font-family: var(--printbed-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	clip-path: var(--printbed-chamfer);
}

.printbed-button:hover,
.print-requests-button:hover {
	background: var(--printbed-black);
	color: var(--printbed-white);
}

.printbed-button--dark {
	background: var(--printbed-black);
	color: var(--printbed-white);
}

.printbed-button--dark:hover {
	background: var(--printbed-nozzle);
	color: var(--printbed-white);
}

.printbed-button:focus-visible,
.print-requests-button:focus-visible {
	clip-path: none;
}

.printbed-textlink,
.print-requests-textlink {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	font-size: 16px;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 5px;
}

.printbed-backlink {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	margin-bottom: 16px;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

/* Home: hero */

.printbed-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 56px 64px;
	padding-block: 88px 104px;
}

.printbed-hero__text {
	flex: 1 1 420px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.printbed-hero__title {
	margin: 0;
	max-width: 14ch;
	font-size: clamp(44px, 5.2vw, 72px);
	line-height: 1.02;
	letter-spacing: -0.01em;
}

.printbed-hero__lead {
	margin: 0;
	max-width: 30em;
	color: var(--printbed-nozzle);
	font-size: 19px;
	line-height: 1.55;
}

.printbed-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	margin-top: 12px;
}

.printbed-hero__figure {
	flex: 0 1 480px;
	min-width: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* The square from the logo, framing the hero product. */
.printbed-frame {
	display: flex;
	aspect-ratio: 1 / 1;
	padding: clamp(16px, 4vw, 28px);
	border: clamp(14px, 3.4vw, 24px) solid var(--printbed-black);
	border-radius: 8px;
	background: var(--printbed-white);
}

.printbed-frame__inner {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	border-radius: 3px;
	background: var(--printbed-bed);
	display: flex;
}

.printbed-frame__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.printbed-frame__placeholder {
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 24px;
	color: var(--printbed-nozzle);
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}

.printbed-hero__caption {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	font-size: 15px;
	line-height: 1.4;
}

.printbed-hero__caption a {
	font-weight: 500;
	text-decoration: none;
}

.printbed-hero__price {
	color: var(--printbed-nozzle);
	white-space: nowrap;
}

.printbed-hero__price del {
	margin-right: 6px;
}

.printbed-hero__price ins {
	text-decoration: none;
	color: var(--printbed-black);
}

/* Sections */

.printbed-section-title {
	margin: 0 0 32px;
	font-size: 32px;
	line-height: 1.15;
}

.printbed-featured {
	padding-bottom: 104px;
}

.printbed-story {
	border-top: 1px solid var(--printbed-line);
}

.printbed-story__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding-block: 80px 96px;
}

.printbed-story__text {
	margin: 0;
	max-width: 34em;
	font-size: 24px;
	line-height: 1.45;
}

.printbed-section {
	padding-bottom: 96px;
}

.printbed-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 32px;
}

.printbed-section__head .printbed-section-title {
	margin: 0;
}

/* Pages */

.printbed-page {
	padding-block: 64px 104px;
}

.printbed-page__header {
	margin-bottom: 40px;
}

.printbed-page__title {
	margin: 0;
	font-size: clamp(36px, 4vw, 52px);
	line-height: 1.05;
	letter-spacing: -0.005em;
}

.printbed-page__lead {
	margin: 16px 0 0;
	max-width: 36em;
	color: var(--printbed-nozzle);
	font-size: 19px;
	line-height: 1.55;
}

.printbed-page__meta {
	margin: 12px 0 0;
	color: var(--printbed-nozzle);
	font-size: 15px;
}

.printbed-page__image {
	margin-bottom: 40px;
}

.printbed-page__image img {
	display: block;
	border-radius: 4px;
}

/* Text written in the editor */

.printbed-prose {
	max-width: 720px;
}

.printbed-prose--wide {
	max-width: none;
}

.printbed-prose > :first-child {
	margin-top: 0;
}

.printbed-prose p,
.printbed-prose ul,
.printbed-prose ol,
.printbed-prose figure,
.printbed-prose table,
.printbed-prose blockquote {
	margin: 0 0 1.1em;
}

.printbed-prose h2 {
	margin: 1.6em 0 0.5em;
	font-size: 28px;
}

.printbed-prose h3 {
	margin: 1.4em 0 0.4em;
	font-size: 21px;
}

.printbed-prose ul,
.printbed-prose ol {
	padding-left: 1.2em;
}

.printbed-prose li + li {
	margin-top: 0.3em;
}

.printbed-prose a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.printbed-prose blockquote {
	padding-left: 20px;
	border-left: 3px solid var(--printbed-black);
	font-size: 19px;
}

.printbed-prose table {
	width: 100%;
	border-collapse: collapse;
}

.printbed-prose th,
.printbed-prose td {
	padding: 10px 12px 10px 0;
	border-bottom: 1px solid var(--printbed-line);
	text-align: left;
	vertical-align: top;
}

.printbed-prose img {
	border-radius: 4px;
}

.printbed-prose .alignwide {
	max-width: var(--printbed-max);
}

.wp-block-button__link:not(.has-background) {
	background: var(--printbed-accent);
	color: var(--printbed-on-accent);
}

.wp-block-button__link {
	border-radius: 0;
	min-height: 48px;
	padding: 12px 26px;
	font-weight: 600;
	clip-path: var(--printbed-chamfer);
}

/* Posts (Guides) */

.printbed-post-list {
	display: grid;
	gap: 40px;
	max-width: 720px;
}

.printbed-post-card__title {
	margin: 0;
	font-size: 26px;
}

.printbed-post-card__title a {
	text-decoration: none;
}

.printbed-post-card__meta {
	margin: 6px 0 10px;
	color: var(--printbed-nozzle);
	font-size: 14px;
}

.printbed-post-card__excerpt p {
	margin: 0;
}

.navigation.pagination,
.printbed-materials .pagination,
.filament-materials .pagination {
	margin-top: 48px;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--printbed-line);
	text-decoration: none;
}

.nav-links .page-numbers.current {
	background: var(--printbed-black);
	border-color: var(--printbed-black);
	color: var(--printbed-white);
}

/* Custom printing */

.printbed-custom__header {
	padding-top: 64px;
	margin-bottom: 64px;
}

.printbed-custom__intro {
	margin-top: 20px;
	color: var(--printbed-nozzle);
	font-size: 19px;
	line-height: 1.55;
}

.printbed-slider__controls,
.filament-slider__controls {
	display: flex;
	gap: 8px;
}

.printbed-slider__btn,
.filament-slider__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--printbed-black);
	border-radius: 4px;
	background: var(--printbed-white);
	color: var(--printbed-black);
	cursor: pointer;
}

.printbed-slider__btn:hover,
.filament-slider__btn:hover {
	background: var(--printbed-black);
	color: var(--printbed-white);
}

.printbed-slider__btn:disabled,
.filament-slider__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.printbed-slider__btn:disabled:hover,
.filament-slider__btn:disabled:hover {
	background: var(--printbed-white);
	color: var(--printbed-black);
}

.printbed-slider,
.filament-slider {
	list-style: none;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(220px, 280px);
	gap: 24px;
	margin: 0 0 32px;
	padding: 0 0 12px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.printbed-slider > li,
.filament-slider > li {
	scroll-snap-align: start;
}

/* Phones and tablets: the slider becomes a grid, so every material shows without scrolling sideways. */
@media (max-width: 1023px) {
	.printbed-slider,
	.filament-slider {
		grid-auto-flow: row;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		padding-bottom: 0;
		overflow-x: visible;
		scroll-snap-type: none;
	}

	.printbed-slider-wrap > .printbed-slider__controls,
	.filament-slider-wrap > .filament-slider__controls {
		display: none;
	}
}

@media (max-width: 560px) {
	.printbed-slider,
	.filament-slider {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 16px;
	}
}

.printbed-steps {
	list-style: none;
	counter-reset: printbed-step;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 32px 24px;
	margin: 0 0 40px;
	padding: 0;
}

.printbed-step {
	counter-increment: printbed-step;
	padding-top: 16px;
	border-top: 1px solid var(--printbed-black);
}

.printbed-step::before {
	content: counter(printbed-step);
	display: block;
	margin-bottom: 16px;
	font-family: var(--printbed-font-head);
	font-size: 32px;
	font-weight: 600;
	line-height: 1;
}

.printbed-step__title {
	margin: 0 0 8px;
	font-size: 20px;
}

.printbed-step__text {
	margin: 0;
	color: var(--printbed-nozzle);
	font-size: 16px;
	line-height: 1.5;
}

/* Materials */

.printbed-material-grid {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(150px, calc((100% - 72px) / 4)), 1fr));
	gap: 40px clamp(16px, 2.5vw, 24px);
	margin: 0;
	padding: 0;
}

.printbed-material-card > a,
.filament-material-card > a {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}

.printbed-material-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-bottom: 6px;
	border-radius: 4px;
	background: var(--printbed-bed);
}

.printbed-material-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.printbed-material-card__name {
	margin: 0;
	font-size: 20px;
	line-height: 1.2;
}

.printbed-material-card__meta,
.printbed-material-card__price {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
}

.printbed-material-card__meta {
	color: var(--printbed-nozzle);
}

.printbed-material-card__price {
	font-weight: 600;
}

.printbed-swatches {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 4px 0 0;
	padding: 0;
}

.printbed-swatch {
	display: inline-block;
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--printbed-swatch, var(--printbed-line));
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.printbed-swatch--lg {
	width: 28px;
	height: 28px;
}

.printbed-materials__cta {
	margin-top: 56px;
}

.printbed-material__layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 48px 64px;
}

.printbed-material__media {
	position: relative;
	flex: 1 1 360px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 4px;
	background: var(--printbed-bed);
}

.printbed-material__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.printbed-material__info {
	flex: 1 1 360px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.printbed-material__info .printbed-prose {
	width: 100%;
}

.printbed-material__price {
	margin: 0;
	font-family: var(--printbed-font-head);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
}

.printbed-material__note,
.printbed-material__uses {
	margin: 0;
	font-size: 15px;
}

.printbed-material__note {
	margin-top: -12px;
	color: var(--printbed-nozzle);
}

.printbed-material__subtitle {
	margin: 12px 0 0;
	font-size: 24px;
}

.printbed-color-list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px 24px;
	width: 100%;
	margin: 0;
	padding: 0;
}

.printbed-color {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
}

.printbed-color__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-width: 0;
	line-height: 1.3;
}

.printbed-color__name {
	font-weight: 500;
}

.printbed-color__price {
	color: var(--printbed-nozzle);
	font-size: 14px;
}

/* Under the color name, on one line. Plain text and the yellow tag are the same height. */
.printbed-color__stock {
	padding: 3px 0;
	color: var(--printbed-nozzle);
	font-size: 13px;
	line-height: 1.3;
	white-space: nowrap;
}

.printbed-color.is-out .printbed-swatch {
	opacity: 0.35;
}

/* In-stock colors get a yellow tag; out of stock stays plain text. */
.printbed-color:not(.is-out) .printbed-color__stock {
	padding: 3px 8px;
	background: var(--printbed-accent);
	color: var(--printbed-on-accent);
	font-weight: 600;
	white-space: nowrap;
	clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

/* Materials page: out-of-stock dots are faded like on the material page, and
   the dot whose photo the card is showing has a ring (and full color). */
.printbed-swatch.is-out {
	opacity: 0.35;
}

.printbed-swatch.is-showing {
	opacity: 1;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 0 2px var(--printbed-white), 0 0 0 3px var(--printbed-black);
}

.printbed-color.is-out .printbed-color__name {
	color: var(--printbed-nozzle);
}

/* Forms (from the Print Requests plugin) */

.printbed-form-page {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 720px;
}

.print-requests-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.print-requests-form__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
}

.print-requests-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.print-requests-field label,
.printbed-field__label {
	font-size: 15px;
	font-weight: 500;
}

.print-requests-field__hint {
	margin: 0;
	color: var(--printbed-nozzle);
	font-size: 14px;
}

.print-requests-field input[type="text"],
.print-requests-field input[type="email"],
.print-requests-field input[type="tel"],
.print-requests-field input[type="number"],
.print-requests-field select,
.print-requests-field textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--printbed-input);
	border-radius: 0;
	background: var(--printbed-white);
	color: var(--printbed-black);
	font: inherit;
	font-size: 16px;
}

.print-requests-field textarea {
	min-height: 160px;
	resize: vertical;
}

.print-requests-field input:focus,
.print-requests-field select:focus,
.print-requests-field textarea:focus {
	border-color: var(--printbed-black);
	outline: 2px solid var(--printbed-black);
	outline-offset: 0;
}

.print-requests-field input[type="file"] {
	padding: 12px;
	border: 1px dashed var(--printbed-input);
	background: var(--printbed-bed);
	font: inherit;
	font-size: 15px;
}

.print-requests-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
}

.print-requests-check input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--printbed-black);
}

.print-requests-form .printbed-button,
.print-requests-form .print-requests-button {
	align-self: flex-start;
}

.printbed-notice,
.print-requests-notice {
	margin: 0;
	padding: 16px 20px;
	border: 1px solid var(--printbed-black);
	background: var(--printbed-white);
	font-size: 16px;
}

.print-requests-notice--success {
	background: var(--printbed-bed);
}

.print-requests-notice--error {
	border-color: var(--printbed-error);
	color: var(--printbed-error);
}

/* Comments */

.printbed-comments {
	margin-top: 64px;
}

.printbed-comments__list {
	padding-left: 1.2em;
}

/* Footer */

.printbed-footer {
	background: var(--printbed-black);
	color: var(--printbed-white);
}

.printbed-footer a {
	color: var(--printbed-white);
}

.printbed-footer a:hover {
	color: #b5b5b5;
}

.printbed-footer :focus-visible {
	outline-color: var(--printbed-white);
}

.printbed-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding-block: 56px 40px;
}

.printbed-footer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 48px;
}

.printbed-footer__logo {
	display: inline-flex;
}

.printbed-footer__logo img,
.printbed-logo--footer {
	display: block;
	height: 28px;
	width: auto;
}

.printbed-menu--footer a {
	font-weight: 400;
}

.printbed-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 32px;
	padding-top: 24px;
	border-top: 1px solid #333333;
	color: #b5b5b5;
	font-size: 14px;
	line-height: 1.5;
}

.printbed-footer__details {
	margin: 0;
}

.printbed-social {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
	margin: 0;
	padding: 0;
}

.printbed-social a {
	color: #b5b5b5;
	text-decoration: none;
}

.printbed-social a:hover {
	color: var(--printbed-white);
}

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
	}
}

/* Pages made of blocks (Home, Custom Printing) */

.printbed-blocks {
	padding-block: 64px 104px;
}

.printbed-blocks--home {
	padding-top: 88px;
}

.printbed-blocks > * {
	margin-top: 0;
	margin-bottom: 0;
}

.printbed-blocks > * + * {
	margin-top: 24px;
}

.printbed-blocks > h1 {
	font-size: clamp(36px, 4vw, 52px);
	line-height: 1.05;
	letter-spacing: -0.005em;
}

.printbed-blocks > p,
.printbed-blocks > ul,
.printbed-blocks > ol {
	max-width: 40em;
}

.printbed-blocks .printbed-section-heading {
	margin-top: 96px;
	margin-bottom: 32px;
	font-size: 32px;
	line-height: 1.15;
}

.printbed-blocks > .printbed-section-heading + * {
	margin-top: 0;
}

.printbed-blocks .wp-block-buttons {
	gap: 12px 28px;
	align-items: center;
}

.printbed-blocks > .wp-block-buttons {
	margin-top: 32px;
}

.wp-block-columns.printbed-hero-columns {
	gap: 56px 64px;
	margin-bottom: 0;
}

.printbed-hero-columns .wp-block-column > * {
	margin-top: 0;
	margin-bottom: 0;
}

.printbed-hero-columns .wp-block-column > * + * {
	margin-top: 24px;
}

.printbed-hero-columns .wp-block-buttons {
	margin-top: 36px;
}

.printbed-blocks .printbed-story-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	margin-top: 96px;
	padding-top: 80px;
	border-top: 1px solid var(--printbed-line);
}

.printbed-story-group > * {
	margin: 0;
}

.printbed-slider-wrap .printbed-slider__controls,
.filament-slider-wrap .filament-slider__controls {
	justify-content: flex-end;
	margin-bottom: 16px;
}

.printbed-slider-wrap .printbed-slider,
.filament-slider-wrap .filament-slider {
	margin-bottom: 0;
}

/* Under a section heading, the slider arrows sit on the heading's line. */
.printbed-blocks > .printbed-section-heading + .filament-slider-wrap {
	position: relative;
}

.printbed-blocks > .printbed-section-heading + .filament-slider-wrap > .filament-slider__controls {
	position: absolute;
	right: 0;
	bottom: calc(100% + 28px);
	margin: 0;
}

.printbed-elementor-page__header {
	padding-top: 64px;
}

/* Printbed block styles (Styles panel in the block editor) */

.wp-block-heading.is-style-printbed-display {
	max-width: 14ch;
	font-size: clamp(44px, 5.2vw, 72px);
	line-height: 1.02;
	letter-spacing: -0.01em;
}

p.is-style-printbed-lead {
	max-width: 30em;
	color: var(--printbed-nozzle);
	font-size: 19px;
	line-height: 1.55;
	text-wrap: balance;
}

p.is-style-printbed-statement {
	max-width: 34em;
	font-size: 24px;
	line-height: 1.45;
	text-wrap: pretty;
}

.wp-block-image.is-style-printbed-frame {
	margin-left: 0;
	margin-right: 0;
}

.wp-block-image.is-style-printbed-frame img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	padding: clamp(16px, 4vw, 28px);
	border: clamp(14px, 3.4vw, 24px) solid var(--printbed-black);
	border-radius: 8px;
	background: var(--printbed-white);
}

.wp-block-image.is-style-printbed-frame figcaption,
.wp-block-image.is-style-printbed-frame .wp-element-caption {
	margin: 16px 0 0;
	color: var(--printbed-nozzle);
	font-size: 15px;
	text-align: left;
}

/* A plain photo the width of its column, cropped to the block's aspect ratio. */
.wp-block-image.is-style-printbed-photo {
	margin-left: 0;
	margin-right: 0;
}

.wp-block-image.is-style-printbed-photo img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	background: var(--printbed-bed);
}

.wp-block-image.is-style-printbed-photo figcaption,
.wp-block-image.is-style-printbed-photo .wp-element-caption {
	margin: 12px 0 0;
	color: var(--printbed-nozzle);
	font-size: 15px;
	text-align: left;
}

.printbed-blocks > .is-style-printbed-lead + .wp-block-image {
	margin-top: 40px;
}

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wp-block-button__link:not(.has-background):hover {
	background: var(--printbed-black);
	color: var(--printbed-white);
}

.wp-block-button.is-style-printbed-dark .wp-block-button__link {
	background: var(--printbed-black);
	color: var(--printbed-white);
}

.wp-block-button.is-style-printbed-dark .wp-block-button__link:hover {
	background: var(--printbed-nozzle);
	color: var(--printbed-white);
}

.wp-block-button.is-style-printbed-text .wp-block-button__link {
	min-height: 48px;
	padding: 0;
	background: none;
	color: var(--printbed-black);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 5px;
	clip-path: none;
}

.wp-block-button.is-style-printbed-text .wp-block-button__link:hover {
	background: none;
	color: var(--printbed-nozzle);
}

.wp-block-group.is-style-printbed-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 32px 24px;
	counter-reset: printbed-step;
}

.wp-block-group.is-style-printbed-steps > * {
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--printbed-black);
	counter-increment: printbed-step;
}

.wp-block-group.is-style-printbed-steps > *::before {
	content: counter(printbed-step);
	display: block;
	margin-bottom: 16px;
	font-family: var(--printbed-font-head);
	font-size: 32px;
	font-weight: 600;
	line-height: 1;
}

.wp-block-group.is-style-printbed-steps h3 {
	margin: 0 0 8px;
	font-size: 20px;
}

.wp-block-group.is-style-printbed-steps p {
	margin: 0;
	color: var(--printbed-nozzle);
	font-size: 16px;
	line-height: 1.5;
}

/* Cards: a photo, a title, a line of text and a link, side by side. */
.wp-block-group.is-style-printbed-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 48px 32px;
}

.wp-block-group.is-style-printbed-cards > * {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
}

.wp-block-group.is-style-printbed-cards > * > * {
	margin: 0;
}

.wp-block-group.is-style-printbed-cards .wp-block-image {
	align-self: stretch;
	margin-bottom: 20px;
}

.wp-block-group.is-style-printbed-cards h3 {
	margin-bottom: 8px;
	font-size: 20px;
}

.wp-block-group.is-style-printbed-cards p {
	color: var(--printbed-nozzle);
	font-size: 16px;
	line-height: 1.5;
}

.wp-block-group.is-style-printbed-cards .wp-block-buttons {
	margin-top: 4px;
}

/* Availability label on material photos */

.printbed-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	padding: 6px 12px;
	background: var(--printbed-black);
	color: var(--printbed-white);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

/* Material photos and "Good for" tags */

.printbed-material__gallery {
	flex: 1 1 360px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.printbed-material__gallery .printbed-material__media {
	flex: none;
	width: 100%;
}

.printbed-material__thumbs {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
}

.printbed-material__thumb {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 4px;
	background: var(--printbed-bed);
}

.printbed-material__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.printbed-material__thumb.is-active {
	outline: 2px solid var(--printbed-black);
	outline-offset: 2px;
}

.printbed-material__label {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
}

.printbed-chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.printbed-chips li {
	padding: 6px 12px;
	border: 1px solid var(--printbed-black);
	border-radius: 999px;
	font-size: 14px;
	line-height: 1.2;
}

/* Colors that switch the material photos */

.printbed-material__thumbs:empty {
	display: none;
}

.printbed-material__hint {
	margin: -4px 0 0;
	color: var(--printbed-nozzle);
	font-size: 14px;
}

.printbed-color-list--buttons > li {
	display: block;
	min-height: 0;
}

.printbed-color--button {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.printbed-color--button:hover {
	background: var(--printbed-bed);
}

.printbed-color--button[aria-pressed="true"] {
	border-color: var(--printbed-black);
	background: var(--printbed-white);
}

/* Material properties: a spec list on the material page and a comparison
   table on the Materials page. Scores are five slanted bars, cut at the same
   angle as the buttons. */

.printbed-props {
	width: 100%;
}

.printbed-props__list {
	margin: 0;
	border-top: 1px solid var(--printbed-black);
}

.printbed-props__row {
	display: grid;
	grid-template-columns: minmax(9.5em, 42%) minmax(0, 1fr);
	align-items: center;
	gap: 4px 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--printbed-line);
}

.printbed-props__row dt {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
}

.printbed-props__row dd {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 0;
}

.printbed-props__value {
	font-family: var(--printbed-font-head);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
}

.printbed-props__word {
	color: var(--printbed-nozzle);
	font-size: 14px;
	line-height: 1.3;
}

.printbed-props__note {
	margin: 16px 0 0;
	font-size: 15px;
	line-height: 1.5;
}

.printbed-props__scale {
	margin: 10px 0 0;
	color: var(--printbed-nozzle);
	font-size: 13px;
	line-height: 1.5;
}

.printbed-meter {
	display: inline-flex;
	flex: none;
	gap: 3px;
}

.printbed-meter__bar {
	width: 20px;
	height: 10px;
	background: var(--printbed-line);
	clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}

.printbed-meter__bar.is-on {
	background: var(--printbed-black);
}

/* A text link inside a sentence, like "Compare all materials". */
.printbed-props__scale .printbed-textlink,
.printbed-props__scale .print-requests-textlink,
.print-requests-field__hint .printbed-textlink,
.print-requests-field__hint .print-requests-textlink {
	display: inline;
	min-height: 0;
	color: var(--printbed-black);
	font-size: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.printbed-props__scale .printbed-textlink:hover,
.printbed-props__scale .print-requests-textlink:hover,
.print-requests-field__hint .printbed-textlink:hover,
.print-requests-field__hint .print-requests-textlink:hover {
	color: var(--printbed-nozzle);
}

.printbed-compare {
	margin-top: 88px;
}

.printbed-compare__title {
	margin: 0 0 8px;
	font-size: 32px;
	line-height: 1.15;
}

.printbed-compare__lead {
	max-width: 40em;
	margin: 0 0 28px;
	color: var(--printbed-nozzle);
	font-size: 16px;
	line-height: 1.5;
}

.printbed-compare__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.printbed-compare__scroll:focus-visible {
	outline: 2px solid var(--printbed-black);
	outline-offset: 4px;
}

.printbed-compare__table {
	width: 100%;
	min-width: 760px;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.35;
}

.printbed-compare__table th,
.printbed-compare__table td {
	padding: 14px 20px 14px 0;
	border-bottom: 1px solid var(--printbed-line);
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
}

.printbed-compare__table thead th {
	padding-top: 0;
	padding-bottom: 12px;
	border-bottom-color: var(--printbed-black);
	color: var(--printbed-nozzle);
	font-size: 14px;
	font-weight: 500;
}

.printbed-compare__table tbody th,
.printbed-compare__table thead th:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	padding-right: 24px;
	background: var(--printbed-white);
}

.printbed-compare__table tbody th {
	font-family: var(--printbed-font-head);
	font-size: 18px;
	font-weight: 600;
}

.printbed-compare__table tbody th a {
	text-decoration: none;
}

.printbed-compare__table tbody th a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.printbed-compare__table tbody tr:hover > * {
	background: var(--printbed-bed);
}

.printbed-compare__none {
	color: var(--printbed-nozzle);
}

/* Where the table doesn't fit, each property gets a block that lists every
   material, so the values to compare sit under each other. */
.printbed-compare__blocks {
	display: none;
}

@media (max-width: 960px) {
	.printbed-compare__scroll {
		display: none;
	}

	.printbed-compare__blocks {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
		gap: 32px;
	}
}

.printbed-compare__block-title {
	margin: 0 0 8px;
	font-size: 19px;
	line-height: 1.25;
}

.printbed-compare__list {
	margin: 0;
	border-top: 1px solid var(--printbed-black);
}

.printbed-compare__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 52px;
	border-bottom: 1px solid var(--printbed-line);
}

.printbed-compare__row dt {
	min-width: 0;
	font-family: var(--printbed-font-head);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
}

.printbed-compare__row dt a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
}

.printbed-compare__row dd {
	display: flex;
	flex: none;
	align-items: center;
	gap: 10px;
	margin: 0;
	text-align: right;
}

@media (max-width: 760px) {
	.printbed-compare {
		margin-top: 64px;
	}

	.printbed-compare__title {
		font-size: 26px;
	}
}

/* Phones and tablets: bigger tap targets and grids sized for the screen. */

.printbed-logo-link,
.printbed-footer__logo {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* The taller tap area doesn't push the footer down. */
.printbed-footer__logo {
	margin-block: -8px;
}

/* The material name fills the height of its table row, so it's easy to tap. The cell padding shrinks to keep the row height. */
.printbed-compare__table tbody th {
	padding-top: 4px;
	padding-bottom: 4px;
}

.printbed-compare__table tbody th a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

@media (max-width: 1023px) {
	/* Three materials per row on tablets instead of four narrow ones. */
	.printbed-material-grid {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}
}

@media (max-width: 560px) {
	.printbed-material-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 16px;
	}

	/* Two colors per row, so the list isn't one long column. */
	.printbed-color-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px 16px;
	}

	.printbed-color__name {
		overflow-wrap: anywhere;
	}

	/* Form buttons span the width, within easy reach of a thumb. */
	.print-requests-form .printbed-button,
	.print-requests-form .print-requests-button {
		align-self: stretch;
		width: 100%;
	}

	.print-requests-field input[type="file"] {
		font-size: 16px;
	}
}