/*
 * Phakarin: shared styles.
 * Design by Da | Das Awesome Co., Ltd.
 */

/* ==========================================================================
   Fallback fonts
   Arial, sized to take the same room as the web font, so the text does not jump when the font arrives.
   The web fonts themselves are declared in theme.json.
   ========================================================================== */
@font-face {
	font-family: "Barlow Semi Condensed Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 600 700;
	size-adjust: 77.37%;
	ascent-override: 129.26%;
	descent-override: 25.85%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Heebo Fallback";
	src: local("Arial"), local("ArialMT");
	font-weight: 100 500;
	size-adjust: 100.63%;
	ascent-override: 104.15%;
	descent-override: 41.84%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Heebo Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 600 900;
	size-adjust: 94.31%;
	ascent-override: 111.12%;
	descent-override: 44.64%;
	line-gap-override: 0%;
}

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
	--accent: var(--wp--preset--color--accent);
	--ink: var(--wp--preset--color--ink);
	--grey: var(--wp--preset--color--grey);
	--light: var(--wp--preset--color--light);
	--white: var(--wp--preset--color--white);
	--muted: color-mix(in srgb, currentColor 60%, transparent);
	--gutter: var(--wp--preset--spacing--gutter);
	/* Top and bottom padding of every section: 80px from the design, 48px up to 1099px. */
	--sec: 80px;
	/* Header and footer keep their content inside the 1160px column on wide screens. */
	--bar-pad: max(var(--gutter), calc((100% - 1160px) / 2));
	/* Same column for a section that pads itself. The page content has a gutter on each side, so a percentage
	   there counts from the screen minus those two gutters; the rule under "Sections in a page" adds them back. */
	--page-pad: var(--bar-pad);
	/* Height of the sticky header: 96px, 88px up to 1099px, 72px up to 767px. The top bar above it scrolls away. */
	--header-h: 96px;
	--topbar-h: 44px;

	--i-arrow-right: url("../icons/arrow-right.svg");
	--i-chevron: url("../icons/chevron-down.svg");
	--i-close: url("../icons/close.svg");
	--i-search: url("../icons/search.svg");
	--i-facebook: url("../icons/facebook.svg");
	--i-instagram: url("../icons/instagram.svg");
	--i-line: url("../icons/line.svg");
	--i-youtube: url("../icons/youtube.svg");
	--i-x: url("../icons/x.svg");
	--i-share-facebook: url("../icons/share-facebook.svg");
	--i-share-x: url("../icons/share-x.svg");
	--i-share-whatsapp: url("../icons/share-whatsapp.svg");
	--i-share-line: url("../icons/share-line.svg");
	--i-share-link: url("../icons/share-link.svg");
	--i-phone: url("../icons/phone.svg");
	--i-mail: url("../icons/mail.svg");
	--i-map-pin: url("../icons/map-pin.svg");
	--i-printer: url("../icons/printer.svg");
	--i-tiktok: url("../icons/tiktok.svg");
	--i-chevron-left: url("../icons/chevron-left.svg");
	--i-chevron-right: url("../icons/chevron-right.svg");
	--i-chevron-up: url("../icons/chevron-up.svg");
	--i-play-outline: url("../icons/play-outline.svg");
	--i-calendar: url("../icons/calendar.svg");
	--i-download: url("../icons/download.svg");
	--i-quote: url("../icons/quote.svg");
	--i-social: url("../icons/social.svg");
	--i-share-linkedin: url("../icons/share-linkedin.svg");
}

@media (max-width: 1099px) {
	:root {
		--sec: 48px;
		--header-h: 88px;
	}
}

@media (max-width: 767px) {
	:root {
		--header-h: 72px;
	}
}

/* In-page links glide, and a target stops right below the sticky header; below it too when the admin bar is
   fixed (the header sticks under it, and up to 600px the bar scrolls away). The page editor keeps its own scrolling. */
:root:not(:has(.editor-styles-wrapper)) {
	scroll-padding-top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 0px));
}

@media (max-width: 600px) {
	:root:not(:has(.editor-styles-wrapper)) {
		scroll-padding-top: var(--header-h);
	}
}

@media (prefers-reduced-motion: no-preference) {
	:root:not(:has(.editor-styles-wrapper)) {
		scroll-behavior: smooth;
	}
}

/* Icon painted with the current text colour. */
.phakarin-icon-before::before {
	content: "";
	display: inline-block;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

/* Same, as an element of its own: phakarin_icon() in inc/components.php. */
.phakarin-icon {
	display: inline-block;
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.phakarin-icon--arrow-right {
	--icon: var(--i-arrow-right);
}

.phakarin-icon--close {
	--icon: var(--i-close);
}

.phakarin-icon--phone {
	--icon: var(--i-phone);
}

.phakarin-icon--mail {
	--icon: var(--i-mail);
}

.phakarin-icon--line {
	--icon: var(--i-line);
}

.phakarin-icon--map-pin {
	--icon: var(--i-map-pin);
}

.phakarin-icon--printer {
	--icon: var(--i-printer);
}

.phakarin-icon--chevron-left {
	--icon: var(--i-chevron-left);
}

.phakarin-icon--chevron-right {
	--icon: var(--i-chevron-right);
}

.phakarin-icon--chevron-up {
	--icon: var(--i-chevron-up);
}

.phakarin-icon--play-outline {
	--icon: var(--i-play-outline);
}

.phakarin-icon--calendar {
	--icon: var(--i-calendar);
}

.phakarin-icon--download {
	--icon: var(--i-download);
}

.phakarin-icon--quote {
	--icon: var(--i-quote);
}

.phakarin-icon--social {
	--icon: var(--i-social);
}

.phakarin-icon--search {
	--icon: var(--i-search);
}

/* Text link with an arrow: phakarin_arrow_link(). */
.phakarin-arrow-link {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 8px;
	color: var(--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--16);
	font-weight: 600;
	letter-spacing: .5px;
	line-height: 21px;
	text-decoration: none;
	text-transform: uppercase;
	transition: color .2s;
}

.phakarin-arrow-link .phakarin-icon {
	color: var(--accent);
}

@media (hover: hover) {
	.phakarin-arrow-link:hover {
		color: var(--accent);
	}
}

.phakarin-arrow-link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* ==========================================================================
   Base
   ========================================================================== */
.wp-site-blocks > * {
	margin-block-start: 0;
}

body {
	-webkit-font-smoothing: antialiased;
}

.wp-site-blocks {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

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

/* Line breaks for one screen size ([desktop-br] and [mobile-br], see phakarin_breaks()): desktop is 1440px and wider,
   where every column has its fixed width, and phones are below 768px. The class decides, over a section's own
   rule that hides its line breaks. */
:root br.desktop-br,
:root br.mobile-br {
	display: none;
}

@media (min-width: 1440px) {
	:root br.desktop-br {
		display: inline;
	}
}

@media (max-width: 767px) {
	:root br.mobile-br {
		display: inline;
	}
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Every box of the theme sections counts its padding and border inside its width. */
[class*="phakarin-"],
[class*="phakarin-"] > * {
	box-sizing: border-box;
}

/* Eyebrow: a dot and a small bold label in the accent colour. */
p.is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: var(--wp--preset--font-size--12);
	font-weight: 700;
	line-height: 1.5;
	color: var(--accent);
}

p.is-style-eyebrow::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
}

p.is-style-eyebrow.has-text-align-center {
	justify-content: center;
}

/* Counter: the number rolls up like an odometer when it scrolls into view (assets/js/counter.js). */
p.is-style-counter {
	margin: 0;
	font-size: var(--wp--preset--font-size--40);
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}

.phakarin-counter__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.phakarin-counter__roll,
.phakarin-counter__digit {
	display: inline-block;
	height: 1.5em;
	vertical-align: top;
}

.phakarin-counter__digit {
	overflow-x: visible;
	overflow-y: clip;
}

.phakarin-counter__track {
	display: block;
	transform: translateY(0);
	transition: transform 2.4s cubic-bezier(.16, 1, .3, 1);
}

.phakarin-counter__track > span {
	display: block;
	height: 1.5em;
}

.is-counting .phakarin-counter__track {
	transform: translateY(calc(var(--to) * -1.5em));
}

@media (prefers-reduced-motion: reduce) {
	.phakarin-counter__track {
		transition: none;
	}
}

/* Editor placeholder of a block that has nothing to show there. */
.phakarin-editor-note {
	padding: 24px var(--gutter);
	background: var(--light);
	color: var(--ink);
	font-size: var(--wp--preset--font-size--14);
}

/* ==========================================================================
   Buttons
   No effects: on hover the button fades a little, keyboard focus gets an outline.
   ========================================================================== */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
}

:is(.wp-block-button__link, .phakarin-nav-cta > .wp-block-navigation-item__content) {
	transition: opacity .2s;
}

@media (hover: hover) {
	:is(.wp-block-button__link, .phakarin-nav-cta > .wp-block-navigation-item__content):hover {
		opacity: .85;
	}
}

:is(.wp-block-button__link, .phakarin-nav-cta > .wp-block-navigation-item__content):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* Outline: no fill, a 1px border in the text colour. */
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button {
	padding: 11px 35px;
	border: 1px solid currentColor;
	background: transparent;
	color: var(--ink);
}

/* ==========================================================================
   Header
   ========================================================================== */
/* The header stays at the top while scrolling, below the admin bar when it is fixed. The top bar above it is part of
   the same template part, so the part sticks with the bar pushed out of view. */
.wp-site-blocks > .wp-block-template-part:has(> .phakarin-header) {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--topbar-h));
	z-index: 30;
}

@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .phakarin-header) {
		top: calc(var(--topbar-h) * -1);
	}
}

.phakarin-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	height: var(--topbar-h);
	padding: 0 var(--bar-pad);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--footer-link);
	font-size: var(--wp--preset--font-size--13);
	letter-spacing: .2px;
	line-height: 20px;
}

.phakarin-topbar__list {
	display: flex;
	align-items: center;
	gap: 28px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.phakarin-topbar__list li,
.phakarin-topbar__list a {
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}

.phakarin-topbar a {
	color: inherit;
	text-decoration: none;
	transition: color .2s;
}

.phakarin-topbar .phakarin-icon {
	color: var(--wp--preset--color--grey-text);
}

@media (hover: hover) {
	.phakarin-topbar__list a:hover {
		color: var(--white);
	}
}

.phakarin-topbar__list a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.phakarin-topbar .phakarin-social {
	gap: 16px;
}

@media (max-width: 1099px) {
	.phakarin-topbar__list {
		gap: 16px;
	}
}

@media (max-width: 767px) {
	.phakarin-topbar__list .phakarin-topbar__extra {
		display: none;
	}
}

@media (max-width: 413px) {
	.phakarin-topbar__list .phakarin-topbar__email {
		display: none;
	}
}

.phakarin-header {
	position: relative;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: var(--header-h);
	padding: 16px var(--bar-pad);
	border-bottom: 1px solid var(--grey);
	background: var(--white);
	color: var(--ink);
	line-height: 1.5;
}

.phakarin-header > *,
.phakarin-header__end > * {
	margin: 0;
}

.phakarin-header a {
	text-decoration: none;
}

.phakarin-logo {
	flex: none;
	margin: 0;
}

.phakarin-logo a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.phakarin-header :is(.phakarin-logo a, .phakarin-nav .wp-block-navigation-item__content, .phakarin-nav-search__button):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.wp-block-image.phakarin-logo img {
	display: block;
	width: auto;
	height: 46px;
}

/* No logo in Settings: the site name. */
.phakarin-logo--text {
	font-size: var(--wp--preset--font-size--20);
	font-weight: 700;
	line-height: 42px;
}

.phakarin-header .phakarin-nav {
	flex: 1 1 auto;
	color: inherit;
}

.phakarin-nav .wp-block-navigation__container {
	gap: 0;
}

.phakarin-nav .wp-block-navigation-item__content {
	padding: 0;
	color: inherit;
	line-height: inherit;
}

/* Chevron after a parent item. */
.phakarin-nav .wp-block-navigation__submenu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 10px;
	height: 10px;
	margin: 0 0 0 6px;
	padding: 0;
}

.phakarin-nav .wp-block-navigation__submenu-icon svg {
	display: none;
}

.phakarin-nav .wp-block-navigation__submenu-icon::before,
.phakarin-nav .phakarin-nav-expand::before {
	content: "";
	width: 8px;
	height: 5px;
	background: currentColor;
	-webkit-mask: var(--i-chevron) center / contain no-repeat;
	mask: var(--i-chevron) center / contain no-repeat;
}

/* The expand/collapse button of the mobile menu (inc/navigation.php); it only shows inside the overlay. */
.phakarin-nav .phakarin-nav-expand {
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.phakarin-header .phakarin-nav .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container {
	background-color: var(--white);
	color: var(--ink);
}

.phakarin-header .phakarin-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: inherit;
}

.phakarin-header .phakarin-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--accent);
}

.phakarin-header__end {
	display: flex;
	flex: none;
	align-items: center;
	gap: 14px;
}

.phakarin-header .wp-block-buttons {
	display: flex;
	margin: 0;
}

.phakarin-header__end .wp-block-button__link {
	padding: 9px 14px;
	font-size: var(--wp--preset--font-size--14);
	line-height: 11px;
	white-space: nowrap;
}

/* Language switch. */
.phakarin-lang {
	display: flex;
	align-items: center;
	gap: 8px;
}

.phakarin-lang a {
	color: inherit;
}

.phakarin-lang a:hover {
	color: var(--accent);
}

.phakarin-lang a[aria-current] {
	opacity: .5;
}

.phakarin-lang__sep {
	width: 1px;
	height: 16px;
	background: currentColor;
	opacity: .3;
}

/* The panel's title and product are for the full menu; in the overlay the categories list alone. */
@media (max-width: 1099px) {
	.phakarin-nav .phakarin-mega :is(.phakarin-mega__heading, .phakarin-mega__feature) {
		display: none;
	}

	.phakarin-nav .phakarin-mega a.wp-block-navigation-item__content {
		display: flex;
		width: 100%;
	}

	.phakarin-nav .phakarin-mega .phakarin-mega__count {
		font-weight: 400;
	}
}

.phakarin-mega .wp-block-navigation-item__label:has(> .phakarin-mega__count) {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	min-width: 0;
}

.phakarin-mega__count {
	flex: none;
	color: var(--wp--preset--color--ink-2);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--13);
	letter-spacing: 0;
	line-height: 19.5px;
}

.phakarin-mega__count:empty {
	display: none;
}

/* Full menu from 1100px; below that the core overlay menu takes over. */
@media (min-width: 1100px) {
	.phakarin-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: block;
		position: static;
		width: auto;
		background: none;
	}

	.phakarin-nav .wp-block-navigation__responsive-container-open {
		display: none;
	}

	.phakarin-nav :is(.phakarin-nav-logo, .phakarin-nav-lang, .phakarin-nav-cta) {
		display: none;
	}

	/* The design has no chevron on the full menu. The panel opens on hover and on keyboard focus. */
	.phakarin-nav .wp-block-navigation__submenu-icon {
		display: none;
	}

	/* Menu links are red; the page you are on, and the one under the pointer, are dark. */
	.phakarin-header .phakarin-nav .wp-block-navigation-item__content {
		padding: 0 14px;
		color: var(--accent);
		transition: color .2s;
	}

	.phakarin-header .phakarin-nav .wp-block-navigation-item__content:hover,
	.phakarin-header .phakarin-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
		color: var(--ink);
	}

	/* The Products panel: a full-width sheet under the header, the categories beside one product. */
	.phakarin-header .phakarin-nav,
	.phakarin-header .phakarin-nav .wp-block-navigation__container,
	.phakarin-header .phakarin-nav .wp-block-navigation-item.has-child.phakarin-mega {
		position: static;
	}

	.phakarin-header .phakarin-nav .wp-block-navigation-item.has-child.phakarin-mega:not(.open-on-click) > ul.wp-block-navigation__submenu-container {
		position: absolute;
		top: calc(100% + 1px); /* below the header's own bottom line */
		right: 0;
		left: 0;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr)) 308px;
		grid-auto-rows: min-content;
		column-gap: 40px;
		box-sizing: border-box;
		padding: 36px var(--bar-pad) 44px;
		border: 0;
		border-top: 2px solid var(--accent);
		background: var(--white);
		color: var(--ink);
		filter: drop-shadow(0 16px 16px rgb(0 0 0 / 12%));
	}

	/* Keeps the pointer on the panel while it crosses the gap under the menu link. */
	.phakarin-header .phakarin-nav .wp-block-navigation-item.has-child.phakarin-mega:not(.open-on-click) > ul.wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: 40px;
	}

	.phakarin-header .phakarin-nav .phakarin-mega > ul > .phakarin-mega__heading {
		grid-column: 1 / 4;
		grid-row: 1;
		display: block;
		padding-bottom: 12px;
		color: var(--ink);
		font-family: var(--wp--preset--font-family--heading);
		font-size: var(--wp--preset--font-size--17);
		font-weight: 600;
		letter-spacing: .5px;
		line-height: 1.2;
		text-transform: uppercase;
	}

	.phakarin-header .phakarin-nav .phakarin-mega > ul > .wp-block-navigation-item {
		display: flex;
		width: auto;
		min-width: 0;
		border-bottom: 1px solid var(--grey);
	}

	.phakarin-header .phakarin-nav .phakarin-mega > ul > .wp-block-navigation-item > a.wp-block-navigation-item__content {
		display: flex;
		flex: 1;
		align-items: center;
		min-width: 0;
		padding: 11px 0;
		background: none;
		color: var(--accent);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--15);
		font-weight: 400;
		letter-spacing: 0;
		line-height: 22.5px;
		text-transform: none;
	}

	.phakarin-header .phakarin-nav .phakarin-mega > ul > .wp-block-navigation-item > a.wp-block-navigation-item__content:hover {
		color: var(--ink);
	}

	.phakarin-header .phakarin-nav .phakarin-mega > ul > .wp-block-navigation-item > a.phakarin-mega__link--all,
	.phakarin-header .phakarin-nav .phakarin-mega > ul > .wp-block-navigation-item.phakarin-mega__link--all > a.wp-block-navigation-item__content {
		color: var(--ink);
		font-weight: 500;
	}

	.phakarin-header .phakarin-nav .phakarin-mega > ul > .phakarin-mega__feature {
		grid-column: 4;
		grid-row: 1 / span 8;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		box-sizing: border-box;
		padding-left: 8px;
	}

	.phakarin-mega__well {
		width: 100%;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		background: var(--light);
	}

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

	.phakarin-mega__name {
		margin: 0;
		color: var(--ink);
		font-family: var(--wp--preset--font-family--heading);
		font-size: var(--wp--preset--font-size--24);
		font-weight: 600;
		letter-spacing: .3px;
		line-height: 1.2;
		text-transform: none;
	}

	.phakarin-mega__feature .wp-block-buttons {
		margin: 0;
	}

	.phakarin-mega__feature .wp-block-button__link {
		padding: 9px 14px;
		font-size: var(--wp--preset--font-size--14);
		line-height: 11px;
	}

	/* A short line, then the search box. */
	.phakarin-nav-search {
		display: flex;
		align-items: center;
	}

	.phakarin-nav-search::before {
		content: "";
		flex: none;
		width: 1px;
		height: 30px;
		margin: 0 12px 0 6px;
		background: var(--grey);
	}

	.phakarin-header .phakarin-nav-search__button {
		justify-content: center;
		width: 36px;
		height: 36px;
		margin: 0;
		padding: 0;
		color: var(--wp--preset--color--icon);
	}

	.phakarin-header .phakarin-nav-search__icon {
		width: 21px;
		height: 21px;
	}

	/* Mega panel: the submenu is a panel under the header bar, floating over the page, with the links in three
	   columns. Nothing between the header and the list is positioned (core makes the nav, the dialog and the parent
	   item so), so the panel is placed against the header itself and var(--bar-pad) keeps its links in the page column. */
	.phakarin-header .phakarin-nav,
	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-dialog,
	.phakarin-header .phakarin-nav .wp-block-navigation-item.has-child {
		position: static;
	}

	.phakarin-header .phakarin-nav .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container {
		inset: 100% 0 auto;
		display: block;
		width: auto;
		min-width: 0;
		padding: 24px var(--bar-pad) 32px;
		border: 0;
		border-top: 1px solid var(--light);
		box-shadow: 0 24px 40px rgb(0 0 0 / 8%);
		columns: 3;
		column-gap: 48px;
	}

	.phakarin-header .phakarin-nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
		break-inside: avoid;
	}

	/* One more class than core's own padding for these links, so their text starts exactly at the column edge. */
	.phakarin-header .phakarin-nav .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content {
		padding: 8px 0;
	}

	/* The parent link and its chevron reach down to the bottom edge of the header, so the pointer is still on the
	   menu when it crosses the header on its way to the panel. The negative margins keep the row the same size. */
	.phakarin-header .phakarin-nav .wp-block-navigation-item.has-child > :is(.wp-block-navigation-item__content, .wp-block-navigation-submenu__toggle) {
		padding-block: 30px;
		margin-block: -30px;
	}

	/* The chevron keeps its 10px square and gets 8px of tap area on each side; the margins keep it in place. */
	.phakarin-header .phakarin-nav .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle {
		box-sizing: content-box;
		padding-inline: 8px;
		margin-inline: -2px -8px;
	}
}

@keyframes phakarin-menu-in {
	from {
		transform: translateX(100%);
	}

	to {
		transform: translateX(0);
	}
}

@keyframes phakarin-submenu-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Mobile and tablet: logo left, menu button right. The language switch and the button sit inside the menu. */
@media (max-width: 1099px) {
	.phakarin-header .phakarin-nav {
		flex: none;
	}

	.phakarin-header__end {
		display: none;
	}

	.phakarin-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.phakarin-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	@media (prefers-reduced-motion: no-preference) {
		.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open {
			animation: phakarin-menu-in .15s ease-in-out forwards;
		}
	}

	/* Overlay: the selectors repeat core's own chain so these win on specificity. */
	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open {
		top: var(--wp-admin--admin-bar--height, 0px);
		padding: 0 var(--gutter) var(--gutter);
		background-color: var(--white);
		color: var(--ink);
		font-size: var(--wp--preset--font-size--16);
		line-height: 1.5;
	}

	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: flex-start;
		padding-top: calc(var(--header-h) + 24px);
	}

	/* The menu starts below the admin bar, so the close button lines up with the menu button. */
	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		margin-top: 0;
	}

	/* Top row of the open menu, the same height as the header: logo left, close right. */
	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		position: static;
		flex-flow: row wrap;
		align-items: center;
		justify-content: flex-start;
		gap: 24px 8px;
		width: 100%;
		text-align: left;
	}

	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		top: 25px;
		right: 0;
	}

	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li {
		flex: 0 0 100%;
		align-items: flex-start;
	}

	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.phakarin-nav-logo {
		position: absolute;
		top: 16px;
		left: 0;
		flex: none;
	}

	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .phakarin-nav-logo .wp-block-navigation-item__content {
		font-size: var(--wp--preset--font-size--20);
		font-weight: 700;
		line-height: 42px;
	}

	/* With a logo in Settings the item shows it (--phakarin-logo, inc/setup.php) and keeps the site name for screen readers. */
	.has-logo .phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .phakarin-nav-logo .wp-block-navigation-item__content {
		display: block;
		width: 160px;
		height: 42px;
		background: var(--phakarin-logo) left center / contain no-repeat;
	}

	.has-logo .phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .phakarin-nav-logo .wp-block-navigation-item__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open a {
		color: inherit;
	}

	/* A parent item is a row (label and chevron) with its submenu below it. The submenu stays closed until the
	   chevron button, or a tap on the label, sets its aria-expanded (assets/js/menu.js). */
	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
		flex-flow: row wrap;
		align-items: center;
	}

	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container {
		display: none;
		align-items: flex-start;
		gap: 16px;
		width: 100%;
		min-width: 0;
		padding: 16px 0 0 16px;
		border: 0;
		background: none;
		color: inherit;
	}

	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child .phakarin-nav-expand[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		display: flex;
	}

	@media (prefers-reduced-motion: no-preference) {
		.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child .phakarin-nav-expand[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
			animation: phakarin-submenu-in .2s ease-out;
		}

		.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .phakarin-nav-expand::before {
			transition: transform .2s ease;
		}
	}

	/* The chevron is a 40px tap target placed where the 10px chevron sits on desktop; the margins give the row back
	   the space. Core's own toggle stays hidden in the overlay. */
	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .phakarin-nav-expand {
		display: inline-flex;
		width: 40px;
		height: 40px;
		margin: -12px 0 -12px -10px;
	}

	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .phakarin-nav-expand[aria-expanded="true"]::before {
		transform: rotate(180deg);
	}

	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item,
	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		width: 100%;
		white-space: normal;
	}

	/* Languages side by side, a line between them. */
	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.phakarin-nav-lang {
		flex: 0 0 auto;
		flex-direction: row;
		align-items: center;
		gap: 8px;
	}

	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .phakarin-nav-lang + .phakarin-nav-lang::before {
		content: "";
		width: 1px;
		height: 16px;
		background: currentColor;
		opacity: .3;
	}

	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .phakarin-nav-lang--current a {
		opacity: .5;
	}

	/* The button, full width of the menu. */
	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .phakarin-nav-cta .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 12px 24px;
		background: var(--accent);
		color: var(--white);
		font-weight: 700;
	}
}

/* ==========================================================================
   Header search
   ========================================================================== */
/* Desktop: a small icon after the last menu link. The padding gives it a 32px tap area, the margin takes it back. */
.phakarin-nav-search__button {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: -6px;
	padding: 6px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	cursor: pointer;
}

.phakarin-nav-search__icon,
.phakarin-search__icon {
	flex: none;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: var(--i-search) center / contain no-repeat;
	mask: var(--i-search) center / contain no-repeat;
}

.phakarin-nav-search__text {
	display: none;
}

@media (min-width: 1100px) {
	.phakarin-header .phakarin-nav-search__button:hover {
		color: var(--accent);
	}
}

/* Mobile and tablet: a full-width bar in the open menu that looks like the field of the pop-up and opens it. */
@media (max-width: 1099px) {
	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .phakarin-nav-search__button {
		width: 100%;
		height: 48px;
		margin: 0;
		padding: 0 16px;
		border: 1px solid var(--grey);
		color: var(--muted);
		text-align: left;
	}

	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .phakarin-nav-search__button:is(:hover, :focus-visible) {
		border-color: currentColor;
		color: inherit;
		outline: 0;
	}

	.phakarin-header .phakarin-nav .wp-block-navigation__responsive-container.is-menu-open .phakarin-nav-search__text {
		display: block;
	}
}

/* The pop-up: the field on top, the results under it, over the dimmed page. */
.phakarin-search {
	width: min(640px, calc(100vw - 2 * var(--gutter)));
	max-width: none;
	max-height: calc(100dvh - 12vh - var(--gutter));
	margin: 12vh auto auto;
	padding: 8px;
	border: 0;
	border-radius: 8px;
	background: var(--white);
	color: var(--ink);
	box-shadow: 0 24px 60px rgb(0 0 0 / 20%);
}

.phakarin-search[open] {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.phakarin-search::backdrop {
	background: rgb(17 17 17 / 50%);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

html:has(.phakarin-search[open]) {
	overflow: hidden;
}

@keyframes phakarin-search-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes phakarin-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.phakarin-search[open] {
		animation: phakarin-search-in .18s ease-out;
	}

	.phakarin-search[open]::backdrop {
		animation: phakarin-fade .18s ease-out;
	}
}

.phakarin-search__bar {
	display: flex;
	flex: none;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0 4px 0 16px;
	border: 1px solid var(--grey);
	border-radius: 6px;
}

.phakarin-search__bar:focus-within {
	border-color: var(--accent);
}

.phakarin-search__field {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.phakarin-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	outline: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.phakarin-search__input::placeholder {
	color: var(--muted);
	opacity: 1;
}

.phakarin-search__input::-webkit-search-cancel-button,
.phakarin-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.phakarin-search__close {
	position: relative;
	flex: none;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.phakarin-search__close::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	background: currentColor;
	-webkit-mask: var(--i-close) center / contain no-repeat;
	mask: var(--i-close) center / contain no-repeat;
	transition: background-color .2s;
}

.phakarin-search__close:is(:hover, :focus-visible)::before {
	background: var(--accent);
}

.phakarin-search__results {
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.phakarin-search__results:empty {
	display: none;
}

.phakarin-search__label {
	margin: 0;
	padding: 12px 12px 4px;
	color: var(--muted);
	font-size: var(--wp--preset--font-size--14);
}

.phakarin-search__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.phakarin-search__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 6px;
	color: inherit;
	text-decoration: none;
}

.phakarin-search__item:is(:hover, :focus-visible) {
	background: var(--light);
	color: inherit;
	outline: 0;
}

.phakarin-search__item:focus-visible {
	box-shadow: inset 2px 0 0 var(--accent);
}

.phakarin-search__name {
	flex: 1 1 auto;
	min-width: 0;
}

.phakarin-search__meta {
	flex: 0 1 auto;
	max-width: 45%;
	color: var(--muted);
	font-size: var(--wp--preset--font-size--14);
	text-align: right;
}

.phakarin-search__arrow {
	flex: none;
	width: 16px;
	height: 16px;
	background: var(--accent);
	-webkit-mask: var(--i-arrow-right) center / contain no-repeat;
	mask: var(--i-arrow-right) center / contain no-repeat;
}

.phakarin-search__status {
	margin: 0;
	padding: 12px;
	color: var(--muted);
}

.phakarin-search__status:empty {
	display: none;
}

/* Phone: the pop-up covers the same area as the open menu, and its top row is the menu's top row, so the X sits
   exactly where the menu's X is. */
@media (max-width: 767px) {
	.phakarin-search {
		width: 100%;
		max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
		margin: var(--wp-admin--admin-bar--height, 0px) auto auto;
		padding: 0 var(--gutter);
		border-radius: 0;
	}

	.phakarin-search__bar {
		gap: 4px;
		height: var(--header-h);
		padding: 0;
		border: 0;
	}

	.phakarin-search__field {
		height: 48px;
		padding-left: 16px;
		border: 1px solid var(--grey);
		border-radius: 6px;
	}

	.phakarin-search__field:focus-within {
		border-color: var(--accent);
	}

	.phakarin-search__close {
		margin-right: -8px;
	}

	/* The rows reach into the gutter so their text starts on it, like the rest of the page. */
	.phakarin-search__results,
	.phakarin-search__status {
		margin-inline: -12px;
	}

	/* The meta goes under the name instead of squeezing it, and the arrow stays centred beside both. */
	.phakarin-search__item {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		row-gap: 2px;
	}

	.phakarin-search__name,
	.phakarin-search__meta {
		grid-column: 1;
	}

	.phakarin-search__meta {
		max-width: none;
		text-align: left;
	}

	.phakarin-search__arrow {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.phakarin-footer {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--grey-text);
	font-size: var(--wp--preset--font-size--15);
	line-height: 22.5px;
}

.phakarin-footer :is(div, p, ul) {
	margin: 0;
}

.phakarin-footer a {
	color: inherit;
	text-decoration: none;
	transition: color .2s;
}

@media (hover: hover) {
	.phakarin-footer a:hover {
		color: var(--white);
	}
}

.phakarin-footer a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.phakarin-footer__main {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
	padding: 60px var(--bar-pad) 56px;
}

.phakarin-footer .wp-block-image.phakarin-logo {
	margin: -4px 0 20px;
}

.phakarin-footer .wp-block-image.phakarin-logo img {
	display: block;
	height: 40px;
}

.phakarin-footer .phakarin-logo a {
	display: block;
	width: fit-content;
}

.phakarin-footer__tagline {
	padding-top: 16px;
	color: var(--white);
}

.phakarin-footer__title {
	color: var(--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--18);
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.2;
	text-transform: uppercase;
}

.phakarin-footer__list,
.phakarin-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0;
	list-style: none;
}

.phakarin-footer__list {
	gap: 0;
	padding-top: 20px;
	color: var(--wp--preset--color--footer-link);
	line-height: 23px;
}

.phakarin-footer__address {
	display: flex;
	gap: 10px;
	padding-top: 20px;
}

.phakarin-footer__address .phakarin-icon {
	margin-top: 2px;
}

.phakarin-footer__contact {
	padding-top: 12px;
	color: var(--wp--preset--color--footer-link);
}

.phakarin-footer__contact li,
.phakarin-footer__contact a {
	display: flex;
	align-items: center;
	gap: 10px;
}

.phakarin-footer__contact li.phakarin-footer__fax {
	color: var(--wp--preset--color--grey-text);
}

.phakarin-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 40px;
	padding: 15px var(--bar-pad) 13px;
	background: var(--wp--preset--color--black);
}

/* Keeps the social links clear of the floating button, which sits over this bar at the foot of the page. */
@media (min-width: 481px) and (max-width: 1415px) {
	.phakarin-footer__bar {
		padding-right: 136px;
	}
}

.phakarin-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0 12px;
	line-height: 23px;
}

.phakarin-footer__legal a {
	color: var(--wp--preset--color--footer-link);
}

.phakarin-social {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The anchor stays unmasked so its focus outline shows; the icon is painted on ::before. */
.phakarin-social__link {
	display: block;
	width: 20px;
	height: 20px;
	color: var(--wp--preset--color--grey-text);
	transition: color .2s;
}

.phakarin-social__link::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

@media (hover: hover) {
	.phakarin-social__link:hover {
		color: var(--white);
	}
}

.phakarin-social__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.phakarin-social__link--facebook {
	--icon: var(--i-facebook);
}

.phakarin-social__link--youtube {
	--icon: var(--i-youtube);
}

.phakarin-social__link--tiktok {
	--icon: var(--i-tiktok);
}

.phakarin-social__link--x {
	--icon: var(--i-x);
}

@media (max-width: 1099px) {
	.phakarin-footer__main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 40px;
	}
}

@media (max-width: 640px) {
	.phakarin-footer__main {
		grid-template-columns: minmax(0, 1fr);
		padding-block: 48px;
	}
}

/* ==========================================================================
   Floating contact button
   ========================================================================== */
.phakarin-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 25;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 8px;
}

.phakarin-float__panel {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.phakarin-float__panel[hidden] {
	display: none;
}

.phakarin-float__pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	height: 42px;
	padding: 0 16px;
	background: var(--white);
	box-shadow: 0 4px 7px rgb(0 0 0 / 18%);
	color: var(--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--16);
	font-weight: 600;
	letter-spacing: .5px;
	line-height: 21px;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color .2s;
}

.phakarin-float__pill .phakarin-icon {
	color: var(--accent);
}

@media (hover: hover) {
	.phakarin-float__pill:hover {
		color: var(--accent);
	}
}

.phakarin-float__toggle,
.phakarin-float__top {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	color: var(--white);
	cursor: pointer;
	transition: opacity .2s;
}

.phakarin-float__toggle {
	width: 52px;
	height: 52px;
	background: var(--accent);
	box-shadow: 0 4px 7px rgb(0 0 0 / 20%);
}

.phakarin-float__toggle .phakarin-icon {
	width: 24px;
	height: 24px;
}

.phakarin-float__toggle[aria-expanded="true"] .phakarin-icon--phone,
.phakarin-float__toggle[aria-expanded="false"] .phakarin-icon--close {
	display: none;
}

.phakarin-float__top {
	justify-self: end;
	width: 40px;
	height: 40px;
	background: var(--wp--preset--color--navy);
	text-decoration: none;
}

@media (hover: hover) {
	:is(.phakarin-float__toggle, .phakarin-float__top):hover {
		opacity: .85;
	}
}

:is(.phakarin-float__pill, .phakarin-float__toggle, .phakarin-float__top):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.phakarin-float {
		right: 16px;
		bottom: 16px;
	}
}

/* ==========================================================================
   Section head: eyebrow and heading, a button beside them
   ========================================================================== */
.phakarin-sechead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--24) var(--wp--preset--spacing--64);
}

.phakarin-sechead > *,
.phakarin-sechead__text > * {
	margin: 0;
}

.phakarin-sechead__text {
	display: grid;
	flex: 1 1 350px;
	gap: 12px;
	min-width: 0;
}

.phakarin-sechead .wp-block-buttons {
	flex: none;
}

/* ==========================================================================
   Breadcrumb: a line on white under the page header
   ========================================================================== */
.phakarin-crumbs {
	padding: 18px var(--bar-pad);
	border-bottom: 1px solid var(--grey);
}

.phakarin-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ink);
	font-size: var(--wp--preset--font-size--14);
	line-height: 21px;
}

.phakarin-crumbs li {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.phakarin-crumbs li + li::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background: var(--wp--preset--color--ink-2);
	-webkit-mask: var(--i-chevron-right) center / contain no-repeat;
	mask: var(--i-chevron-right) center / contain no-repeat;
}

.phakarin-crumbs a {
	color: var(--wp--preset--color--ink-2);
	text-decoration: underline;
}

.phakarin-crumbs a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

@media (hover: hover) {
	.phakarin-crumbs a:hover {
		color: var(--accent);
	}
}

/* ==========================================================================
   Page banner: the title on a dimmed photo, the breadcrumb under it. Without a photo, on grey.
   ========================================================================== */
.phakarin-banner {
	color: var(--ink);
}

.phakarin-banner__head {
	position: relative;
	overflow: hidden;
	background: var(--light);
}

.phakarin-banner--photo .phakarin-banner__head {
	background: var(--wp--preset--color--photo-dark);
	color: var(--white);
}

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

.phakarin-banner--photo .phakarin-banner__head::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgb(0 0 0 / 72%), rgb(0 0 0 / 30%) 70%);
	pointer-events: none;
}

.phakarin-banner__text {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 8px;
	padding: 92px var(--bar-pad) 82px;
}

.phakarin-banner--photo .is-style-eyebrow {
	color: inherit;
}

.phakarin-banner__text > * {
	margin: 0;
}

.phakarin-banner__title {
	color: inherit;
	font-size: var(--wp--preset--font-size--52);
	font-weight: 700;
	letter-spacing: .5px;
	line-height: 1.1;
}

/* A title a little wider than the column stays on one line, as in the design. */
@media (min-width: 1300px) {
	.phakarin-banner__title {
		margin-inline-end: -40px;
	}
}

@media (max-width: 1099px) {
	.phakarin-banner__text {
		padding-block: 64px 56px;
	}

	.phakarin-banner__title {
		font-size: var(--wp--preset--font-size--40);
	}
}

@media (max-width: 767px) {
	.phakarin-banner__text {
		padding-block: 48px 40px;
	}

	.phakarin-banner__title {
		font-size: var(--wp--preset--font-size--32);
	}

	.phakarin-banner__title br {
		display: none;
	}
}

/* ==========================================================================
   Posts: latest and related posts in a sideways strip
   ========================================================================== */
.phakarin-posts {
	display: grid;
	gap: var(--wp--preset--spacing--36);
	padding: var(--sec) var(--page-pad);
	background: var(--wp--preset--color--alt);
	color: var(--ink);
}

.phakarin-posts > * {
	margin: 0;
}

.phakarin-posts--white {
	background: var(--white);
}

.phakarin-posts .phakarin-sechead {
	align-items: flex-end;
}

:is(.phakarin-posts, .phakarin-listing__head) .phakarin-arrow-link {
	min-height: 44px;
}

.phakarin-posts__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--32);
	font-weight: 700;
	line-height: 1.5;
}

.phakarin-slider {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.phakarin-slider::-webkit-scrollbar {
	display: none;
}

.phakarin-slider:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.phakarin-slider.is-draggable {
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
}

.phakarin-slider.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

/* One card on a phone, two on a tablet, three on a desktop. */
.phakarin-slider > * {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
}

@media (min-width: 640px) {
	.phakarin-slider > * {
		flex-basis: calc((100% - 24px) / 2);
	}
}

@media (min-width: 1000px) {
	.phakarin-slider > * {
		flex-basis: calc((100% - 48px) / 3);
	}
}

/* Dots: one for every place the strip can stop. The script adds them. */
.phakarin-slider__dots {
	display: flex;
	justify-content: center;
	margin-top: calc(var(--wp--preset--spacing--16) * -1);
}

.phakarin-slider__dots[hidden] {
	display: none;
}

.phakarin-slider__dot {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 8px;
	border: 0;
	border-radius: 50%;
	background: var(--ink);
	background-clip: content-box;
	opacity: .2;
	cursor: pointer;
	transition: opacity .2s, background-color .2s;
}

.phakarin-slider__dot:hover {
	opacity: .5;
}

.phakarin-slider__dot[aria-current="true"] {
	background-color: var(--accent);
	opacity: 1;
}

.phakarin-slider__dot:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 0;
}

/* Post card. The whole card is the link. */
.phakarin-post {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--white);
	color: var(--ink);
}

.phakarin-post__media {
	position: relative;
	flex: none;
	aspect-ratio: 16 / 10;
	background: var(--light);
}

/* The customer's logo on a white tile, top right of the photo. */
.phakarin-post__logo {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 96px;
	height: 64px;
	padding: 10px 12px;
	background: var(--white);
}

.phakarin-post__logo img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	mix-blend-mode: multiply;
}

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

/* A product on a plain ground, whole, instead of a photo. */
.phakarin-post--cutout .phakarin-post__media {
	background: var(--white);
}

/* On white the well is grey, so the picture still reads as a tile. */
:is(.phakarin-postgrid, .phakarin-posts--white) .phakarin-post--cutout .phakarin-post__media {
	background: var(--light);
}

.phakarin-post--cutout .phakarin-post__img {
	inset: 29.64px;
	width: calc(100% - 59.28px);
	height: calc(100% - 59.28px);
	object-fit: contain;
	mix-blend-mode: multiply;
}

.phakarin-post__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px 24px;
}

/* On white the card has a line round its text. On a grey section it needs none. */
:is(.phakarin-postgrid, .phakarin-posts--white) .phakarin-post__body {
	border: 1px solid var(--grey);
	border-top: 0;
}

.phakarin-post__text {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--15);
	line-height: 22.5px;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.phakarin-post__meta {
	margin: 0;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--14);
	line-height: 21px;
}

.phakarin-post__dot {
	display: inline-block;
	width: 20px;
	text-align: center;
}

.phakarin-post__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--21);
	font-weight: 600;
	letter-spacing: .3px;
	line-height: 1.2;
	text-transform: none;
}

.phakarin-post__title a {
	color: inherit;
	text-decoration: none;
}

.phakarin-post__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.phakarin-post:hover .phakarin-post__title a {
	color: var(--accent);
}

.phakarin-post__title a:focus-visible {
	outline: 0;
}

.phakarin-post__title a:focus-visible::after {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

/* ==========================================================================
   News and Knowledge: chips, a large item on the first page of News, cards and page numbers
   ========================================================================== */
.phakarin-postgrid {
	padding: 40px var(--page-pad) var(--sec);
}

.phakarin-postgrid__empty {
	margin: 36px 0 0;
	font-size: var(--wp--preset--font-size--15);
	line-height: 22.5px;
}

.phakarin-postgrid__list,
.phakarin-posts__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

.phakarin-postgrid__list {
	margin-top: 36px;
}

.phakarin-postgrid__list:first-child {
	margin-top: 0;
}

.phakarin-featured + .phakarin-postgrid__list {
	margin-top: 72px;
}

@media (min-width: 640px) {
	.phakarin-postgrid__list,
	.phakarin-posts__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.phakarin-postgrid__list,
	.phakarin-posts__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.phakarin-featured {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin-top: 36px;
	background: var(--light);
	color: var(--ink);
	text-decoration: none;
}

.phakarin-featured:first-child {
	margin-top: 0;
}

.phakarin-featured:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.phakarin-featured__media {
	position: relative;
	min-width: 0;
	aspect-ratio: 16 / 9;
}

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

.phakarin-featured__media--cutout .phakarin-featured__img {
	inset: 32px;
	width: calc(100% - 64px);
	height: calc(100% - 64px);
	object-fit: contain;
	mix-blend-mode: multiply;
}

.phakarin-featured__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	min-width: 0;
	padding: 40px;
}

.phakarin-featured__text > * {
	margin: 0;
}

.phakarin-featured__meta {
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--14);
	line-height: 21px;
}

.phakarin-featured__title {
	color: var(--ink);
	font-size: var(--wp--preset--font-size--32);
	font-weight: 700;
	letter-spacing: .5px;
	line-height: 1.15;
}

.phakarin-featured__excerpt {
	color: var(--ink);
	font-size: var(--wp--preset--font-size--15);
	line-height: 22.5px;
}

.phakarin-featured__more {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--17);
	font-weight: 600;
	letter-spacing: .5px;
	line-height: 22.5px;
	text-transform: uppercase;
}

.phakarin-featured__more .phakarin-icon {
	width: 16px;
	height: 16px;
}

@media (hover: hover) {
	.phakarin-featured:hover .phakarin-featured__title {
		color: var(--accent);
	}
}

@media (min-width: 1000px) {
	.phakarin-featured {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		min-height: 435px;
	}

	.phakarin-featured__media {
		aspect-ratio: auto;
	}
}

@media (max-width: 767px) {
	.phakarin-featured__text {
		padding: 24px var(--gutter) 32px;
	}

	.phakarin-featured__title {
		font-size: var(--wp--preset--font-size--24);
	}
}

.phakarin-pager {
	margin-top: 48px;
}

.phakarin-pager ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.phakarin-pager li > .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--wp--preset--color--field);
	color: var(--ink);
	font-size: var(--wp--preset--font-size--15);
	line-height: 22.5px;
	text-decoration: none;
	transition: border-color .2s;
}

.phakarin-pager a.page-numbers:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

@media (hover: hover) {
	.phakarin-pager a.page-numbers:hover {
		border-color: var(--ink);
	}
}

.phakarin-pager li > .page-numbers.current {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--white);
}

.phakarin-pager li > .page-numbers.dots {
	border: 0;
}

.phakarin-pager li:has(> .next) {
	padding-left: 8px;
}

.phakarin-pager li > .page-numbers.next {
	gap: 8px;
	padding: 0 16px;
	font-weight: 500;
}

.phakarin-pager .next .phakarin-icon {
	width: 16px;
	height: 16px;
	color: var(--accent);
}

.phakarin-pager .prev::before {
	content: "";
	width: 16px;
	height: 16px;
	background: var(--accent);
	-webkit-mask: var(--i-chevron-left) center / contain no-repeat;
	mask: var(--i-chevron-left) center / contain no-repeat;
}

/* ==========================================================================
   An article: the text with a panel beside it
   ========================================================================== */
.phakarin-article {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--48);
	padding: var(--sec) var(--page-pad);
}

.phakarin-article__main {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.phakarin-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 8px;
	margin: 0;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--14);
	line-height: 23.1px;
}

.phakarin-article__meta a {
	color: var(--accent);
	text-decoration: none;
}

.phakarin-article__meta a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

@media (hover: hover) {
	.phakarin-article__meta a:hover {
		text-decoration: underline;
	}
}

.phakarin-article__meta .phakarin-icon {
	width: 18px;
	height: 18px;
}

.phakarin-article__dot {
	flex: none;
	width: 20px;
	text-align: center;
}

/* The text the client writes: the first paragraph larger, a gap between blocks. */
.phakarin-article__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--17);
	line-height: 28.05px;
	overflow-wrap: break-word;
}

.phakarin-article__body > * {
	margin: 0;
}

.phakarin-article__body > p:first-of-type {
	padding-bottom: 6px;
	font-size: var(--wp--preset--font-size--19);
	line-height: 1.5;
}

.phakarin-article__body :is(h2, h3) {
	padding-top: 12px;
	color: var(--ink);
	font-size: var(--wp--preset--font-size--24);
	font-weight: 600;
	letter-spacing: .3px;
	line-height: 1.2;
	text-transform: none;
}

.phakarin-article__body :is(ol, ul) {
	padding-inline-start: 24px;
}

.phakarin-article__body :is(ol, ul) :is(ol, ul) {
	margin-block: 0;
}

.phakarin-article__body img {
	max-width: 100%;
	height: auto;
}

.phakarin-article__body p > img:only-child {
	display: block;
}

.phakarin-article__body iframe {
	display: block;
	max-width: 100%;
	border: 0;
}

/* Embedded video: the saved size is a fixed 500px, so it fills the column on a 16:9 frame instead. */
.phakarin-article__body iframe:is([src*="youtube"], [src*="youtu.be"], [src*="vimeo"]) {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.phakarin-article__body hr {
	width: 100%;
	border: 0;
	border-top: 1px solid var(--grey);
}

/* A table pasted straight into the text (from Word) carries a fixed width, height, float and cell sizes in its
   style attribute. It takes the column width instead; one that still cannot fit scrolls inside its own box. */
.phakarin-article__body > table {
	display: block;
	float: none;
	width: 100% !important;
	height: auto !important;
	margin-inline: 0 !important;
	overflow-x: auto;
}

.phakarin-article__body > table > tbody {
	display: table;
	width: 100%;
}

.phakarin-article__body > table :is(td, th) {
	width: auto !important;
	height: auto !important;
}

.phakarin-article__product {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	color: var(--accent);
	font-size: var(--wp--preset--font-size--17);
	font-weight: 500;
	line-height: 28.05px;
	text-decoration: none;
}

.phakarin-article__product .phakarin-icon {
	width: 16px;
	height: 16px;
}

.phakarin-article__product:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

@media (hover: hover) {
	.phakarin-article__product:hover {
		text-decoration: underline;
	}
}

.phakarin-article__aside {
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-sizing: border-box;
	min-width: 0;
	padding: 28px;
	background: var(--light);
}

.phakarin-article__aside:empty {
	display: none;
}

.phakarin-article__aside-title {
	margin: 0;
	color: var(--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--19);
	font-weight: 600;
	letter-spacing: .5px;
	line-height: 1.2;
	text-transform: uppercase;
}

.phakarin-article__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 96px;
	padding: 16px 32px;
	background: var(--white);
}

.phakarin-article__logo img {
	display: block;
	width: auto;
	max-width: 160px;
	height: auto;
	max-height: 55px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.phakarin-article__aside .wp-block-buttons {
	margin: 0;
}

.phakarin-article__aside :is(.wp-block-button, .wp-block-button__link) {
	box-sizing: border-box;
	width: 100%;
}

@media (min-width: 1100px) {
	.phakarin-article {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--64);
	}

	.phakarin-article__aside {
		flex: 0 0 340px;
	}
}

/* Photos from site. */
.phakarin-photos {
	display: grid;
	gap: 36px;
	padding: var(--sec) var(--page-pad);
	background: var(--wp--preset--color--alt);
	color: var(--ink);
}

.phakarin-photos__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.phakarin-photos__list figure {
	min-width: 0;
	margin: 0;
}

.phakarin-photos__list a {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--light);
}

.phakarin-photos__list a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

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

.phakarin-photos__list figcaption {
	padding-top: 10px;
	color: var(--ink);
	font-size: var(--wp--preset--font-size--14);
	line-height: 20.3px;
}

@media (min-width: 768px) {
	.phakarin-photos__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.phakarin-photos__list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Parts of the Product, listing and article pages
   ========================================================================== */
/* Section titles on these pages. */
:is(.phakarin-product__heading, .phakarin-related__title, .phakarin-listing__head h2, .phakarin-others__title, .phakarin-quote__title, .phakarin-photos__title, .phakarin-office__title, .phakarin-posts__title) {
	margin: 0;
	color: var(--ink);
	font-size: var(--wp--preset--font-size--32);
	font-weight: 700;
	letter-spacing: .5px;
	line-height: 1.15;
}

/* Icon inside a button. */
/* The icon reaches past the 13px line, so a button with one is as tall as a button without. */
.wp-block-button__link .phakarin-icon {
	width: 16px;
	height: 16px;
	margin-block: -2px;
}

/* The outline button on these pages: a 2px black border, the same size as the red one beside it. */
:is(.phakarin-product, .phakarin-article) .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button {
	padding: 15px 25px;
	border: 2px solid var(--wp--preset--color--black);
	color: var(--wp--preset--color--black);
}

/* Label and value rows: Brand and Category, customer details, telephone and email. */
.phakarin-list {
	margin: 0;
	border-bottom: 1px solid var(--grey);
}

.phakarin-list__row {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 16px;
	padding: 12px 0;
	border-top: 1px solid var(--grey);
}

.phakarin-list dt {
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--14);
	line-height: 22px;
}

.phakarin-list dd {
	display: grid;
	gap: 2px;
	justify-items: start;
	margin: 0;
	min-width: 0;
	color: var(--ink);
	font-size: var(--wp--preset--font-size--15);
	line-height: 22.5px;
	overflow-wrap: anywhere;
}

.phakarin-list a {
	color: var(--accent);
	text-decoration: none;
}

.phakarin-list a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

@media (hover: hover) {
	.phakarin-list a:hover {
		text-decoration: underline;
	}
}

.phakarin-list--narrow .phakarin-list__row {
	grid-template-columns: 88px minmax(0, 1fr);
}

.phakarin-list--contact dt {
	display: flex;
	gap: 10px;
}

.phakarin-list--contact dt .phakarin-icon {
	width: 20px;
	height: 20px;
	margin-top: 1px;
	color: var(--accent);
}

/* Share row. */
.phakarin-share-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.phakarin-share-row__label {
	margin: 0;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--14);
	line-height: 21px;
}

.phakarin-share-row__list {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.phakarin-share {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--grey);
	background: none;
	color: var(--wp--preset--color--ink-2);
	cursor: pointer;
	transition: color .2s, border-color .2s;
}

.phakarin-share::before {
	width: 16px;
	height: 16px;
}

/* A bigger target for a finger than the 34px box. */
.phakarin-share::after {
	content: "";
	position: absolute;
	inset: -4px;
}

.phakarin-share.is-copied {
	border-color: var(--accent);
	color: var(--accent);
}

.phakarin-share:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

@media (hover: hover) {
	.phakarin-share:hover {
		border-color: var(--accent);
		color: var(--accent);
	}
}

.phakarin-share--linkedin {
	--icon: var(--i-share-linkedin);
}

.phakarin-share--facebook {
	--icon: var(--i-share-facebook);
}

.phakarin-share--x {
	--icon: var(--i-share-x);
}

.phakarin-share--whatsapp {
	--icon: var(--i-share-whatsapp);
}

.phakarin-share--line {
	--icon: var(--i-share-line);
}

.phakarin-share--link {
	--icon: var(--i-share-link);
}

/* Product tile: one link, the picture above a grey bar. Tiles in a row are the same height. */
.phakarin-tiles {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

@media (min-width: 640px) {
	.phakarin-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.phakarin-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.phakarin-tiles--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.phakarin-tile {
	display: flex;
	flex-direction: column;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.phakarin-tile:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.phakarin-tile__media {
	flex: none;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--light);
}

.phakarin-tile__media--contain {
	padding: 21.75px;
}

.phakarin-tile__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.phakarin-tile__media--contain .phakarin-tile__img {
	object-fit: contain;
	mix-blend-mode: multiply;
}

.phakarin-tile__bar {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	padding: 14px 18px 16px;
	background: var(--wp--preset--color--bar);
	color: var(--wp--preset--color--on-dark);
}

.phakarin-tile__name {
	margin: 0;
	color: var(--white);
	font-size: var(--wp--preset--font-size--17);
	font-weight: 600;
	letter-spacing: .5px;
	line-height: 1.2;
}

.phakarin-tile__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--14);
	line-height: 21px;
}

.phakarin-tile__foot {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: auto 0 0;
	padding-top: 4px;
	font-size: var(--wp--preset--font-size--14);
	line-height: 21px;
}

.phakarin-tile__foot .phakarin-icon {
	width: 16px;
	height: 16px;
}

@media (hover: hover) {
	.phakarin-tile:hover .phakarin-tile__name {
		text-decoration: underline;
	}
}

/* Chips: a category and its count; the one you are on is dark. */
.phakarin-chips ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.phakarin-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid var(--wp--preset--color--field);
	color: var(--ink);
	text-decoration: none;
	transition: border-color .2s;
}

.phakarin-chip__name {
	font-size: var(--wp--preset--font-size--14);
	line-height: 21px;
}

.phakarin-chip__count {
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--13);
	line-height: 19.5px;
}

.phakarin-chip:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

@media (hover: hover) {
	.phakarin-chip:hover {
		border-color: var(--ink);
	}
}

.phakarin-chip.is-active {
	border-color: var(--ink);
	background: var(--ink);
}

.phakarin-chip.is-active .phakarin-chip__name {
	color: var(--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--16);
	font-weight: 600;
	letter-spacing: .5px;
	text-transform: uppercase;
}

.phakarin-chip.is-active .phakarin-chip__count {
	color: var(--wp--preset--color--field);
}

/* ==========================================================================
   Product page
   ========================================================================== */
.phakarin-product-head__text {
	display: grid;
	gap: 10px;
	padding: 48px var(--bar-pad) 44px;
	background: var(--light);
}

.phakarin-product-head__title {
	margin: 0;
	color: var(--ink);
	font-size: var(--wp--preset--font-size--42);
	font-weight: 700;
	letter-spacing: .5px;
	line-height: 1.1;
}

.phakarin-product-head__lead {
	max-width: 640px;
	margin: 0;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--17);
	line-height: 25.5px;
}

@media (max-width: 767px) {
	.phakarin-product-head__title {
		font-size: var(--wp--preset--font-size--32);
	}
}

.phakarin-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	padding: var(--sec) var(--page-pad);
}

@media (min-width: 1100px) {
	.phakarin-product {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}

.phakarin-product__main {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.phakarin-product__body {
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--15);
	line-height: 22.5px;
	overflow-wrap: break-word;
}

.phakarin-product__body > * {
	margin-block: 0 12px;
}

.phakarin-product__body > :last-child {
	margin-block-end: 0;
}

.phakarin-product__body :is(ol, ul) {
	padding-inline-start: 20px;
}

.phakarin-product__body :is(h2, h3, h4) {
	padding-top: 8px;
	color: var(--ink);
	font-size: var(--wp--preset--font-size--21);
	font-weight: 600;
	letter-spacing: .3px;
	line-height: 1.2;
	text-transform: none;
}

.phakarin-product__body img {
	max-width: 100%;
	height: auto;
}

.phakarin-product__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 10px;
}

.phakarin-product__actions .wp-block-buttons {
	margin: 0;
}

.phakarin-product__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin: 0;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--15);
	line-height: 22.5px;
}

.phakarin-product__contact a {
	color: var(--accent);
	text-decoration: underline;
}

.phakarin-product__contact a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

:is(.phakarin-product__main, .phakarin-article__main) .phakarin-share-row {
	padding-top: 16px;
	border-top: 1px solid var(--grey);
}

.phakarin-product__side {
	display: grid;
	gap: 12px;
	min-width: 0;
}

.phakarin-product__well {
	aspect-ratio: 8 / 5;
	overflow: hidden;
	background: var(--light);
}

.phakarin-product__well--contain {
	padding: 32px;
}

.phakarin-product__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.phakarin-product__well--contain .phakarin-product__photo {
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* Only when the Product has more photos. A click opens the lightbox. */
.phakarin-product__thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.phakarin-product__thumbs a {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--light);
}

.phakarin-product__thumbs a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

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

.phakarin-product-videos {
	display: grid;
	justify-items: center;
	gap: 24px;
	padding: var(--sec) var(--page-pad);
	background: var(--wp--preset--color--alt);
	color: var(--ink);
}

.phakarin-product-videos > * {
	width: 100%;
	max-width: 860px;
	margin: 0;
}

.phakarin-product-videos > :is(h2, h3) {
	font-size: var(--wp--preset--font-size--24);
	font-weight: 600;
	letter-spacing: .3px;
	line-height: 1.2;
	text-transform: none;
}

.phakarin-product-videos > p {
	font-size: var(--wp--preset--font-size--15);
	line-height: 22.5px;
}

/* Quote form. */
.phakarin-quote {
	padding: var(--sec) var(--page-pad);
}

.phakarin-quote__card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	box-sizing: border-box;
	width: 100%;
	max-width: 880px;
	margin-inline: auto;
	padding: 36px 40px 40px;
	background: var(--light);
}

.phakarin-quote__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
}

/* At the right edge, on its own line when the title is too long to share one. */
.phakarin-quote__required {
	flex: none;
	margin: 0 0 0 auto;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--13);
	line-height: 19.5px;
}

.phakarin-quote__required span {
	color: var(--accent);
}

.phakarin-quote__notice {
	margin: 0;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--15);
	line-height: 22.5px;
}

.phakarin-quote__talk {
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--field);
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--15);
	line-height: 22.5px;
}

.phakarin-quote__talk > * {
	margin: 0;
}

.phakarin-quote__talk h3 {
	margin-bottom: 8px;
	color: var(--ink);
	font-size: var(--wp--preset--font-size--24);
	font-weight: 600;
	letter-spacing: .3px;
	line-height: 26px;
	text-transform: none;
}

.phakarin-quote__talk a {
	color: var(--accent);
	text-decoration: underline;
}

.phakarin-quote__talk a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.phakarin-quote__card {
		padding: 28px var(--gutter) 32px;
	}
}

/* The fields of the Quote form, as Fluent Forms prints them. */
.phakarin-quote__form :is(.fluentform, form) {
	margin: 0;
}

.phakarin-quote__form fieldset {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 16px;
	margin: 0;
	padding: 0;
	border: 0;
}

.phakarin-quote__form fieldset > * {
	min-width: 0;
}

.phakarin-quote__form .ff-el-group {
	display: block;
	margin: 0;
}

.phakarin-quote__form .phakarin-field--wide,
.phakarin-quote__form .ff_submit_btn_wrapper,
.phakarin-quote__form .ff-message-success {
	grid-column: 1 / -1;
}

.phakarin-quote__form .ff-el-input--label {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	line-height: 22.5px;
}

.phakarin-quote__form .ff-el-input--label label {
	display: block;
	margin: 0;
	color: var(--ink);
	font-size: var(--wp--preset--font-size--15);
	font-weight: 500;
	line-height: 22.5px;
}

.phakarin-quote__form .fluentform .ff-el-is-required.asterisk-right label::after {
	content: " *";
	margin: 0;
	color: var(--accent);
}

.phakarin-quote__form .ff-el-form-control {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--field);
	border-radius: 0;
	background: var(--white);
	box-shadow: none;
	color: var(--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--15);
	line-height: 22.5px;
}

.phakarin-quote__form textarea.ff-el-form-control {
	height: 120px;
	min-height: 120px;
	padding-block: 10px;
	resize: vertical;
}

.phakarin-quote__form .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--placeholder);
	opacity: 1;
}

.phakarin-quote__form .ff-el-form-control:focus {
	border-color: var(--ink);
	outline: 2px solid var(--accent);
	outline-offset: -1px;
	box-shadow: none;
}

.phakarin-quote__form .ff-el-is-error .ff-el-form-control {
	border-color: var(--accent);
}

.phakarin-quote__form .error,
.phakarin-quote__form .text-danger {
	margin-top: 4px;
	color: var(--accent);
	font-size: var(--wp--preset--font-size--13);
	line-height: 19.5px;
}

.phakarin-quote__form .ff_submit_btn_wrapper {
	margin: 0;
	padding-top: 4px;
}

.phakarin-quote__form .ff-btn-submit.ff_btn_style {
	width: auto;
	margin: 0;
	padding: 15px 25px;
	border: 2px solid var(--accent);
	border-radius: 0;
	background: var(--accent);
	color: var(--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--15);
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 13px;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity .2s;
}

.phakarin-quote__form .ff-btn-submit.ff_btn_style:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

@media (hover: hover) {
	.phakarin-quote__form .ff-btn-submit.ff_btn_style:hover {
		opacity: .85;
	}
}

.phakarin-quote__form .ff-message-success {
	margin: 0;
	padding: 16px;
	border: 1px solid var(--wp--preset--color--field);
	background: var(--white);
	box-shadow: none;
	color: var(--ink);
	font-size: var(--wp--preset--font-size--15);
	line-height: 22.5px;
}

@media (max-width: 639px) {
	.phakarin-quote__form fieldset {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Related products. */
.phakarin-related {
	display: grid;
	gap: 36px;
	padding: var(--sec) var(--page-pad);
	background: var(--wp--preset--color--alt);
	color: var(--ink);
}

.phakarin-related .wp-block-buttons {
	margin: 0;
}

/* ==========================================================================
   Product Category page
   ========================================================================== */
.phakarin-listing {
	display: grid;
	gap: 36px;
	padding: var(--sec) var(--page-pad);
}

.phakarin-listing__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px 24px;
}

.phakarin-others {
	display: grid;
	gap: 36px;
	padding: 0 var(--page-pad) var(--sec);
}

/* ==========================================================================
   Products page
   ========================================================================== */
.phakarin-catalog {
	padding: 48px var(--page-pad) var(--sec);
}

.phakarin-catalog__filters {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px 200px auto;
	gap: 10px;
	padding-bottom: 8px;
}

.phakarin-catalog__search,
.phakarin-catalog__select select {
	box-sizing: border-box;
	height: 44px;
	border: 1px solid var(--wp--preset--color--field);
	background: var(--white);
	color: var(--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--15);
	line-height: 22.5px;
}

.phakarin-catalog__search {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
}

.phakarin-catalog__search:focus-within {
	outline: 2px solid var(--accent);
	outline-offset: -1px;
}

.phakarin-catalog__search .phakarin-icon {
	color: var(--wp--preset--color--icon);
}

.phakarin-catalog__search input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: none;
	color: inherit;
	font: inherit;
	appearance: none;
}

.phakarin-catalog__search input::placeholder {
	color: var(--wp--preset--color--placeholder);
	opacity: 1;
}

.phakarin-catalog__select {
	position: relative;
	min-width: 0;
}

.phakarin-catalog__select select {
	display: block;
	width: 100%;
	padding: 0 40px 0 14px;
	border-radius: 0;
	appearance: none;
	cursor: pointer;
}

.phakarin-catalog__select select:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -1px;
}

.phakarin-catalog__select::after {
	content: "";
	position: absolute;
	top: 13px;
	right: 14px;
	width: 18px;
	height: 18px;
	background: var(--wp--preset--color--ink-2);
	-webkit-mask: var(--i-chevron) center / 10.3px auto no-repeat;
	mask: var(--i-chevron) center / 10.3px auto no-repeat;
	pointer-events: none;
}

.phakarin-catalog__filters .wp-block-button__link {
	height: 44px;
	padding: 12px 24px;
	cursor: pointer;
}

.phakarin-catalog .phakarin-chips {
	padding-top: 16px;
}

.phakarin-catalog__empty {
	margin: 40px 0 0;
	font-size: var(--wp--preset--font-size--15);
	line-height: 22.5px;
}

.phakarin-catalog__group {
	padding-top: 56px;
}

.phakarin-catalog__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin-bottom: 24px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--accent);
}

.phakarin-catalog__head h2 {
	margin: 0;
	color: var(--ink);
	font-size: var(--wp--preset--font-size--26);
	font-weight: 700;
	letter-spacing: .5px;
	line-height: 1.15;
}

.phakarin-catalog__head h2 a {
	color: inherit;
	text-decoration: none;
}

.phakarin-catalog__head h2 a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

@media (hover: hover) {
	.phakarin-catalog__head h2 a:hover {
		color: var(--accent);
	}
}

.phakarin-catalog__head p {
	margin: 0;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--14);
	line-height: 21px;
}

@media (max-width: 1099px) {
	.phakarin-catalog__filters {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.phakarin-catalog__search {
		grid-column: 1 / -1;
	}

	.phakarin-catalog__filters .wp-block-button__link {
		grid-column: 1 / -1;
	}
}

@media (max-width: 639px) {
	.phakarin-catalog__filters {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.phakarin-office {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px 40px;
	padding: 56px var(--page-pad) var(--sec);
}

@media (min-width: 1100px) {
	.phakarin-office {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto 300px;
	}

	.phakarin-office__map {
		grid-column: 1;
		grid-row: 2;
	}

	.phakarin-office__form {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

.phakarin-office__details {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.phakarin-office__address {
	display: flex;
	gap: 12px;
}

.phakarin-office__address .phakarin-icon {
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: var(--accent);
}

.phakarin-office__address p {
	margin: 0;
	color: var(--ink);
	font-size: var(--wp--preset--font-size--16);
	line-height: 24px;
}

.phakarin-office__address strong {
	font-weight: 500;
}

.phakarin-office__map {
	min-height: 300px;
	background: var(--wp--preset--color--map);
}

.phakarin-office__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 300px;
	border: 0;
}

.phakarin-office__form {
	max-width: none;
	margin: 0;
}

/* ==========================================================================
   Video
   ========================================================================== */
/* Play on click: a 16:9 frame in the middle of a grey or white section. */
.phakarin-video--grey,
.phakarin-video--white {
	display: flex;
	justify-content: center;
	padding: var(--sec) var(--page-pad);
}

.phakarin-video--grey {
	background: var(--light);
}

.phakarin-video--white {
	background: var(--white);
}

:is(.phakarin-video--grey, .phakarin-video--white) .phakarin-video__frame {
	position: relative;
	width: 100%;
	max-width: 900px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
}

/* In a Product page's video section and in the text of an article the section is already there. */
:is(.phakarin-product-videos, .phakarin-article__body) .phakarin-video {
	display: block;
	padding: 0;
	background: none;
}

:is(.phakarin-product-videos, .phakarin-article__body) .phakarin-video .phakarin-video__frame {
	max-width: none;
}

.phakarin-article__body .phakarin-video {
	padding-block: 4px 8px;
}

.phakarin-video__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.phakarin-video__play .phakarin-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.phakarin-video__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 48px;
	border-radius: 12px;
	background: var(--accent);
	color: var(--white);
	transition: opacity .2s;
}

.phakarin-video__icon .phakarin-icon {
	width: 22px;
	height: 22px;
}

@media (hover: hover) {
	.phakarin-video__play:hover .phakarin-video__icon {
		opacity: .85;
	}
}

.phakarin-video__play:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

:is(.phakarin-video--grey, .phakarin-video--white) .phakarin-video__frame > :is(iframe, video) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

/* Background: muted and looped behind the section, an optional button opens it with sound in a pop-up. */
.phakarin-video--background {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	min-height: clamp(360px, 48.611vw, 700px);
	padding: var(--sec) var(--page-pad);
	overflow: hidden;
	background: var(--ink);
}

.phakarin-video--background .phakarin-video__frame {
	position: absolute;
	inset: 0;
	container-type: size;
}

.phakarin-video--background .phakarin-video__poster,
.phakarin-video--background video.phakarin-video__player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A YouTube player cannot crop itself, so it is sized to cover the frame. */
.phakarin-video--background iframe.phakarin-video__player {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100cqw, 177.78cqh);
	height: max(100cqh, 56.25cqw);
	border: 0;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.phakarin-video--background .phakarin-video__player {
	opacity: 0;
	transition: opacity .6s;
}

.phakarin-video--background .is-playing .phakarin-video__player {
	opacity: 1;
}

.phakarin-video__actions {
	position: relative;
	z-index: 1;
	margin: 0;
}

.phakarin-video__dialog {
	width: min(1160px, calc(100vw - 2 * var(--gutter)));
	max-width: none;
	max-height: none;
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--white);
	overflow: visible;
}

.phakarin-video__dialog::backdrop {
	background: rgb(17 17 17 / 90%);
}

html:has(.phakarin-video__dialog[open]) {
	overflow: hidden;
}

.phakarin-video__close {
	position: relative;
	display: block;
	width: 40px;
	height: 40px;
	margin: 0 0 8px auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.phakarin-video__close::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	background: currentColor;
	-webkit-mask: var(--i-close) center / contain no-repeat;
	mask: var(--i-close) center / contain no-repeat;
	transition: background-color .2s;
}

.phakarin-video__close:is(:hover, :focus-visible)::before {
	background: var(--accent);
}

.phakarin-video__stage {
	background: #000;
}

.phakarin-video__stage iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.phakarin-video__stage video {
	display: block;
	width: 100%;
	height: auto;
	max-height: calc(100vh - 2 * var(--gutter) - 48px);
}

/* ==========================================================================
   Lightbox: a gallery picture large over the dimmed page (assets/js/lightbox.js)
   ========================================================================== */
.phakarin-lightbox {
	width: 100vw;
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 64px var(--gutter) 24px;
	border: 0;
	background: transparent;
	color: var(--white);
	overflow: hidden;
	touch-action: pan-y pinch-zoom;
}

.phakarin-lightbox[open] {
	display: grid;
	grid-template: "prev stage next" minmax(0, 1fr) "count count count" auto / 48px minmax(0, 1fr) 48px;
	align-items: center;
	gap: 16px;
}

.phakarin-lightbox::backdrop {
	background: rgb(17 17 17 / 92%);
}

html:has(.phakarin-lightbox[open]) {
	overflow: hidden;
}

.phakarin-lightbox__stage {
	grid-area: stage;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 0;
	margin: 0;
}

.phakarin-lightbox__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	-webkit-user-select: none;
	user-select: none;
}

.phakarin-lightbox__count {
	grid-area: count;
	min-height: 24px;
	margin: 0;
	text-align: center;
	color: var(--muted);
}

.phakarin-lightbox__btn {
	position: relative;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.phakarin-lightbox__btn[hidden] {
	display: none;
}

.phakarin-lightbox__btn::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	background: currentColor;
	-webkit-mask: var(--i-chevron) center / contain no-repeat;
	mask: var(--i-chevron) center / contain no-repeat;
	transition: background-color .2s;
}

.phakarin-lightbox__btn:is(:hover, :focus-visible)::before {
	background: var(--accent);
}

.phakarin-lightbox__prev {
	grid-area: prev;
}

.phakarin-lightbox__prev::before {
	transform: rotate(90deg);
}

.phakarin-lightbox__next {
	grid-area: next;
}

.phakarin-lightbox__next::before {
	transform: rotate(-90deg);
}

.phakarin-lightbox__close {
	position: absolute;
	top: 8px;
	right: var(--gutter);
}

.phakarin-lightbox__close::before {
	-webkit-mask-image: var(--i-close);
	mask-image: var(--i-close);
}

/* Phones: the arrows sit under the picture, either side of the count. */
@media (max-width: 767px) {
	.phakarin-lightbox[open] {
		grid-template: "stage stage stage" minmax(0, 1fr) "prev count next" auto / 48px minmax(0, 1fr) 48px;
	}
}

/* ==========================================================================
   Home hero: the photo runs under the title and the About band
   ========================================================================== */
.phakarin-home-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	isolation: isolate;
	min-height: 832px;
	overflow: hidden;
	background: var(--wp--preset--color--photo-dark);
	color: var(--white);
}

.phakarin-home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to right, rgb(0 0 0 / 74%), rgb(0 0 0 / 30%) 75%);
}

.phakarin-home-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.phakarin-home-hero__top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	box-sizing: border-box;
	min-height: 476px;
	padding: 112px var(--bar-pad) 48px;
}

.phakarin-home-hero__top > * {
	margin: 0;
}

.phakarin-home-hero h1 {
	max-width: 1080px;
	margin-bottom: 5.6px;
	color: inherit;
}

.phakarin-home-hero__lead {
	max-width: 640px;
	margin-bottom: 3.8px;
	font-size: var(--wp--preset--font-size--20);
	line-height: 1.5;
}

.phakarin-home-hero .wp-block-buttons {
	display: flex;
	padding-top: 12px;
}

.phakarin-home-hero__about {
	display: grid;
	grid-template-columns: minmax(0, 560fr) minmax(0, 520fr);
	gap: 80px;
	margin-top: auto;
	padding: 48px var(--bar-pad) 52px;
	background: color-mix(in srgb, var(--wp--preset--color--photo-dark) 65%, transparent);
}

.phakarin-home-hero__story h2 {
	margin: 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--28);
}

.phakarin-home-hero__story p {
	margin: 16px 0 0;
	color: var(--wp--preset--color--on-dark);
	font-size: var(--wp--preset--font-size--16);
	line-height: 26px;
}

.phakarin-home-hero__industries h3 {
	margin: 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--17);
	font-weight: 600;
	line-height: 1.2;
}

.phakarin-home-hero__industries ul {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px 0;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.phakarin-home-hero__industries li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-size: var(--wp--preset--font-size--15);
	line-height: 20.8px;
	text-align: center;
}

.phakarin-home-hero__industries img {
	display: block;
	box-sizing: border-box;
	width: 64px;
	height: 64px;
	border: 2px solid var(--white);
	border-radius: 50%;
	object-fit: cover;
}

@media (max-width: 1099px) {
	.phakarin-home-hero {
		min-height: 0;
	}

	.phakarin-home-hero__top {
		min-height: 0;
		padding-block: 64px;
	}

	.phakarin-home-hero__about {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}
}

@media (max-width: 767px) {
	.phakarin-home-hero h1 {
		font-size: var(--wp--preset--font-size--40);
	}

	.phakarin-home-hero h1 br {
		display: none;
	}

	.phakarin-home-hero__lead {
		font-size: var(--wp--preset--font-size--16);
	}

	.phakarin-home-hero__industries ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Red band
   ========================================================================== */
.phakarin-cta-band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px 48px;
	padding: 26px var(--page-pad);
	background: var(--accent);
	color: var(--white);
}

.phakarin-cta-band__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--28);
	font-weight: 600;
	letter-spacing: .3px;
	line-height: 1.2;
}

.phakarin-cta-band .wp-block-buttons {
	display: flex;
	flex: none;
	margin: 0;
}

.phakarin-cta-band .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button {
	padding: 12px 20px;
	border: 2px solid var(--white);
	color: var(--white);
}

.phakarin-cta-band .wp-block-button__link:focus-visible {
	outline-color: var(--white);
}

@media (max-width: 767px) {
	.phakarin-cta-band {
		flex-direction: column;
		align-items: flex-start;
	}

	.phakarin-cta-band__text {
		font-size: var(--wp--preset--font-size--24);
	}
}

/* ==========================================================================
   Brand grid
   ========================================================================== */
.phakarin-brand-grid,
.phakarin-logo-wall {
	padding: var(--sec) var(--page-pad);
	background: var(--white);
	color: var(--ink);
}

.phakarin-brand-grid h2,
.phakarin-category-grid h2,
.phakarin-logo-wall h2 {
	margin: 0;
}

/* The lines are shadows of the tiles, so a row that is not full leaves no grey block. */
.phakarin-brand-grid__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 120px;
	gap: 1px;
	margin: 36px 0 0;
	padding: 1px;
	list-style: none;
}

.phakarin-brand-grid__list > li {
	box-shadow: 0 0 0 1px var(--grey);
}

.phakarin-brand-grid__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 100%;
	padding: 0 16px;
	color: inherit;
	text-decoration: none;
	transition: background-color .2s;
}

.phakarin-brand-grid__tile.phakarin-arrow-link {
	display: flex;
}

.phakarin-brand-grid__tile img {
	display: block;
	max-width: 100%;
	height: auto;
}

@media (hover: hover) {
	a.phakarin-brand-grid__tile:hover {
		background: var(--light);
	}
}

a.phakarin-brand-grid__tile:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

.phakarin-brand-grid__name {
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--17);
	font-weight: 700;
	letter-spacing: .34px;
	line-height: 25.5px;
}

@media (max-width: 1099px) {
	.phakarin-brand-grid__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.phakarin-brand-grid__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 96px;
	}
}

/* ==========================================================================
   Category grid
   ========================================================================== */
.phakarin-category-grid {
	container-type: inline-size;
	padding: var(--sec) var(--page-pad);
	background: var(--wp--preset--color--alt);
	color: var(--ink);
}

.phakarin-category-grid__list {
	--tile-w: calc((100cqw - 72px) / 4);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
}

.phakarin-category-grid__list > li {
	display: flex;
	min-width: 0;
}

.phakarin-category-grid__wide {
	grid-column: span 2;
}

.phakarin-category-grid__tile {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.phakarin-category-grid__tile:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.phakarin-category-grid__media {
	flex: none;
	box-sizing: border-box;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--light);
}

.phakarin-category-grid__media--contain {
	padding: 21.75px;
	background: var(--white);
}

.phakarin-category-grid__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.phakarin-category-grid__media--contain img {
	object-fit: contain;
}

.phakarin-category-grid__bar {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	padding: 14px 18px 16px;
	background: var(--wp--preset--color--bar);
	color: var(--white);
}

.phakarin-category-grid__name {
	margin: 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--17);
	font-weight: 600;
	line-height: 21.6px;
}

@media (hover: hover) {
	.phakarin-category-grid__tile:hover .phakarin-category-grid__name {
		text-decoration: underline;
	}
}

.phakarin-category-grid__count {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: auto 0 0;
	padding-top: 4px;
	color: var(--wp--preset--color--on-dark);
	font-size: var(--wp--preset--font-size--14);
	line-height: 21px;
}

.phakarin-category-grid__count .phakarin-icon {
	width: 16px;
	height: 16px;
}

.phakarin-category-grid__panel {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: calc(var(--tile-w) * 2 / 3);
	background: var(--wp--preset--color--navy);
	text-align: center;
}

.phakarin-category-grid__total {
	margin: 0;
	color: var(--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--60);
	font-weight: 700;
	letter-spacing: .5px;
	line-height: 1.1;
}

.phakarin-category-grid__unit {
	margin: -2px 0 0;
	color: var(--wp--preset--color--grey-text);
	font-size: var(--wp--preset--font-size--14);
	letter-spacing: 1px;
	line-height: 21px;
	text-transform: uppercase;
}

.phakarin-category-grid__tile--all .phakarin-category-grid__bar {
	background: var(--accent);
}

@media (max-width: 1099px) {
	.phakarin-category-grid__list {
		--tile-w: calc((100cqw - 48px) / 3);
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.phakarin-category-grid__wide {
		grid-column: span 2;
	}
}

@media (max-width: 767px) {
	.phakarin-category-grid__list {
		--tile-w: calc((100cqw - 16px) / 2);
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.phakarin-category-grid__bar {
		padding-inline: 12px;
	}
}

/* ==========================================================================
   Video slider: from 1100px the slides lie on top of each other and fade; below that they stack as picture and card.
   ========================================================================== */
.phakarin-video-slider {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--wp--preset--color--photo-dark);
	color: var(--white);
}

.phakarin-video-slider__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to right, rgb(10 9 9 / 72%), rgb(10 9 9 / 35%) 60%, rgb(10 9 9 / 25%));
}

.phakarin-video-slider__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.phakarin-video-slider__play {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0;
	border: 2px solid var(--white);
	border-radius: 50%;
	background: rgb(10 9 9 / 35%);
	color: var(--white);
	cursor: pointer;
	transition: background-color .2s;
}

.phakarin-video-slider__play .phakarin-icon {
	width: 40px;
	height: 40px;
}

@media (hover: hover) {
	.phakarin-video-slider__play:hover {
		background: rgb(10 9 9 / 60%);
	}
}

.phakarin-video-slider__play:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 3px;
}

.phakarin-video-slider__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	box-sizing: border-box;
	background: var(--white);
	color: var(--ink);
}

.phakarin-video-slider__card > * {
	margin: 0;
}

.phakarin-video-slider__count {
	color: var(--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--15);
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.2;
}

.phakarin-video-slider__title {
	color: inherit;
}

.phakarin-video-slider__text {
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--15);
	line-height: 22.5px;
}

.phakarin-video-slider__items {
	padding: 0;
	color: var(--wp--preset--color--ink-2);
	columns: 2;
	column-gap: 32px;
	font-size: var(--wp--preset--font-size--14);
	line-height: 20px;
	list-style: none;
}

.phakarin-video-slider__items li {
	padding-bottom: 6px;
	break-inside: avoid;
}

.phakarin-video-slider .wp-block-buttons {
	display: flex;
	padding-top: 8px;
}

.phakarin-video-slider__tabs {
	display: grid;
	gap: 24px;
}

.phakarin-video-slider__tab {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 0 0;
	border: 0;
	border-top: 1px solid var(--white);
	background: none;
	color: var(--wp--preset--color--on-dark);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: color .2s;
}

.phakarin-video-slider__tab[aria-selected="true"] {
	border-top: 3px solid var(--accent);
	color: var(--white);
}

@media (hover: hover) {
	.phakarin-video-slider__tab:hover {
		color: var(--white);
	}
}

.phakarin-video-slider__tab:focus-visible,
.phakarin-video-slider__arrow:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 3px;
}

.phakarin-video-slider__number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--15);
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.2;
}

.phakarin-video-slider__tab[aria-selected="true"] .phakarin-video-slider__number {
	color: var(--accent);
}

.phakarin-video-slider__label {
	font-size: var(--wp--preset--font-size--15);
	line-height: 22px;
}

.phakarin-video-slider__tab[aria-selected="true"] .phakarin-video-slider__label {
	font-weight: 500;
}

.phakarin-video-slider__arrows {
	display: flex;
	gap: 8px;
}

.phakarin-video-slider__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1px solid var(--white);
	background: none;
	color: var(--white);
	cursor: pointer;
	transition: opacity .2s;
}

.phakarin-video-slider__arrow .phakarin-icon {
	width: 24px;
	height: 24px;
}

.phakarin-video-slider__arrow--next {
	border-color: var(--accent);
	background: var(--accent);
}

@media (hover: hover) {
	.phakarin-video-slider__arrow:hover {
		opacity: .85;
	}
}

@media (min-width: 1100px) {
	.phakarin-video-slider {
		height: 680px;
	}

	.phakarin-video-slider__slide {
		position: absolute;
		inset: 0;
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s, visibility .3s;
	}

	.phakarin-video-slider__slide.is-active {
		opacity: 1;
		visibility: visible;
	}

	.phakarin-video-slider__media {
		position: absolute;
		inset: 0;
	}

	.phakarin-video-slider__media::after {
		content: "";
		position: absolute;
		inset: auto 0 0;
		z-index: 1;
		height: 260px;
		background: linear-gradient(to bottom, rgb(10 9 9 / 0%), rgb(10 9 9 / 78%));
	}

	.phakarin-video-slider__play {
		top: 72px;
		left: calc(50% + 240px);
		width: 104px;
		height: 104px;
	}

	.phakarin-video-slider__card {
		position: absolute;
		top: 96px;
		left: var(--bar-pad);
		z-index: 2;
		width: 540px;
		padding: 44px;
	}

	.phakarin-video-slider__card--list {
		width: 920px;
	}

	.phakarin-video-slider__card--list .phakarin-video-slider__items {
		columns: 3;
	}

	.phakarin-video-slider__nav {
		position: absolute;
		top: 557px;
		right: 0;
		left: 0;
		z-index: 3;
		padding: 0 var(--bar-pad);
	}

	.phakarin-video-slider__tabs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.phakarin-video-slider__arrows {
		position: absolute;
		right: var(--bar-pad);
		bottom: calc(100% + 32px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.phakarin-video-slider__slide {
		transition: none;
	}
}

@media (max-width: 1099px) {
	.phakarin-video-slider__slide {
		display: none;
	}

	.phakarin-video-slider__slide.is-active {
		display: block;
	}

	.phakarin-video-slider__media {
		position: relative;
		aspect-ratio: 16 / 9;
	}

	.phakarin-video-slider__play {
		top: 50%;
		left: 50%;
		width: 72px;
		height: 72px;
		transform: translate(-50%, -50%);
	}

	.phakarin-video-slider__play .phakarin-icon {
		width: 32px;
		height: 32px;
	}

	.phakarin-video-slider__card {
		padding: 32px var(--bar-pad);
	}

	.phakarin-video-slider__nav {
		display: flex;
		flex-direction: column;
		gap: 24px;
		padding: 24px var(--bar-pad) 32px;
	}

	.phakarin-video-slider__tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 16px;
	}
}

@media (max-width: 640px) {
	.phakarin-video-slider__items {
		columns: 1;
	}
}

/* ==========================================================================
   Logo wall
   ========================================================================== */
.phakarin-logo-wall__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 36px 40px;
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
}

.phakarin-logo-wall__list > li {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.phakarin-logo-wall__list img {
	display: block;
	max-width: 100%;
	height: auto;
	opacity: .8;
}

@media (max-width: 1099px) {
	.phakarin-logo-wall__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.phakarin-logo-wall__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 24px;
	}
}

/* ==========================================================================
   Contact band
   ========================================================================== */
.phakarin-contact-band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px 48px;
	padding: var(--sec) var(--page-pad);
	background: var(--wp--preset--color--alt);
	color: var(--ink);
}

.phakarin-contact-band__text {
	display: grid;
	gap: 12px;
	max-width: 640px;
}

.phakarin-contact-band__text > * {
	margin: 0;
}

.phakarin-contact-band__text p {
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--15);
	line-height: 22.5px;
}

.phakarin-contact-band__action {
	display: flex;
	flex: none;
	flex-direction: column;
	width: 350px;
	gap: 14px;
}

.phakarin-contact-band__action .wp-block-buttons {
	display: flex;
}

.phakarin-contact-band__line {
	margin: 0;
	font-size: var(--wp--preset--font-size--14);
	line-height: 21px;
}

.phakarin-contact-band__line a {
	color: inherit;
	text-decoration: underline;
}

.phakarin-contact-band__line a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

@media (hover: hover) {
	.phakarin-contact-band__line a:hover {
		color: var(--accent);
	}
}

@media (max-width: 767px) {
	.phakarin-contact-band {
		flex-direction: column;
		align-items: flex-start;
	}

	.phakarin-contact-band__action {
		flex: 0 1 auto;
		width: auto;
	}
}

/* ==========================================================================
   Sections in a page: no gap between them (the page editor canvas follows the same rules)
   ========================================================================== */
.phakarin-main > [class*="wp-block-phakarin-"],
:is(.phakarin-main .wp-block-post-content, .editor-styles-wrapper .is-root-container) > [class*="wp-block-phakarin-"] {
	margin-block: 0;
}

/* A native block next to a section keeps the section spacing, so text never touches a section edge. */
:is(.phakarin-main .wp-block-post-content, .editor-styles-wrapper .is-root-container) > [class*="wp-block-phakarin-"] + :not([class*="wp-block-phakarin-"]) {
	margin-block-start: var(--sec);
}

:is(.phakarin-main .wp-block-post-content, .editor-styles-wrapper .is-root-container) > :not([class*="wp-block-phakarin-"]):has(+ [class*="wp-block-phakarin-"]) {
	margin-block-end: var(--sec);
}

:is(.phakarin-main .wp-block-post-content, .editor-styles-wrapper .is-root-container) > :not([class*="wp-block-phakarin-"]):first-child {
	margin-block-start: var(--sec);
}

/* Text in native blocks breaks a run that cannot fit (a line of dashes, a long address) instead of pushing the page
   sideways on phones. */
:is(.phakarin-main .wp-block-post-content, .editor-styles-wrapper .is-root-container) > :not([class*="wp-block-phakarin-"]) {
	overflow-wrap: break-word;
}

/* On the site a section is a direct child of the page content: as wide as the screen, but a percentage padding counts
   from the page column (the screen minus the two gutters). --page-pad gives the gutters back, so every section's content
   lines up with the header and footer on wide screens. The editor wraps each section in a full-width block, so it needs
   no correction. */
.phakarin-main .wp-block-post-content > [class*="wp-block-phakarin-"] {
	--page-pad: max(var(--gutter), calc((100% + var(--wp--style--root--padding-left, var(--gutter)) + var(--wp--style--root--padding-right, var(--gutter)) - 1160px) / 2));
}

/* ==========================================================================
   Text a page is written in (native blocks, or a page saved before the block editor): the text of an article in the
   1160px column, under the page banner of the page template. Nothing inside a theme section changes. The page editor
   shows the same, a Classic block included.
   ========================================================================== */
:is(body.page .phakarin-main .wp-block-post-content, .editor-styles-wrapper.post-type-page :is(.wp-block-post-content, .wp-block-freeform > div:not(.block-library-classic__toolbar))) > :not([class*="wp-block-phakarin-"], h1, h2, h3, h4, h5, h6) {
	line-height: 30px;
}

:is(body.page .phakarin-main .wp-block-post-content, .editor-styles-wrapper.post-type-page :is(.wp-block-post-content, .wp-block-freeform > div:not(.block-library-classic__toolbar))) > :not([class*="wp-block-phakarin-"]) + :not([class*="wp-block-phakarin-"]) {
	margin-block-start: 30px;
}

/* Under the banner of the page template, and above the footer when the page ends in text. */
.phakarin-main > .wp-block-phakarin-page-banner + .wp-block-post-content {
	margin-block-start: 0;
}

body.page .phakarin-main .wp-block-post-content:not(:has(> [class*="wp-block-phakarin-"]:last-child)) {
	padding-block-end: var(--sec);
}

/* An empty heading or paragraph left in old text adds no gap. */
body.page .phakarin-main .wp-block-post-content > :is(h1, h2, h3, h4, h5, h6, p):empty {
	display: none;
}

/* The site has one font: a font named in pasted text gives way to it. */
:is(body.page .phakarin-main .wp-block-post-content, .editor-styles-wrapper.post-type-page .wp-block-post-content) [style*="font-family"]:not([class*="wp-block-phakarin-"] *) {
	font-family: inherit !important;
}

:is(body.page .phakarin-main .wp-block-post-content, .editor-styles-wrapper.post-type-page .wp-block-post-content) :is(ol, ul):not([class*="wp-block-phakarin-"] *) {
	padding-inline-start: 24px;
}

:is(body.page .phakarin-main .wp-block-post-content, .editor-styles-wrapper.post-type-page .wp-block-post-content) :is(ol, ul) :is(ol, ul):not([class*="wp-block-phakarin-"] *) {
	margin-block: 0;
}

:is(body.page .phakarin-main .wp-block-post-content, .editor-styles-wrapper.post-type-page .wp-block-post-content) img:not([class*="wp-block-phakarin-"] *) {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

:is(body.page .phakarin-main .wp-block-post-content, .editor-styles-wrapper.post-type-page .wp-block-post-content) iframe:is([src*="youtube"], [src*="youtu.be"], [src*="vimeo"]):not([class*="wp-block-phakarin-"] *) {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 8px;
}

:is(body.page .phakarin-main .wp-block-post-content, .editor-styles-wrapper.post-type-page .wp-block-post-content) hr:not([class*="wp-block-phakarin-"] *) {
	height: 0;
	border: 0;
	border-top: 1px solid var(--grey);
	background: none;
	opacity: 1;
}

/* Tables: an accent header row when the table has one, then rows that alternate white and light grey. */
:is(body.page .phakarin-main .wp-block-post-content, .editor-styles-wrapper.post-type-page .wp-block-post-content) table:not([class*="wp-block-phakarin-"] *) {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	line-height: 1.5;
}

:is(body.page .phakarin-main .wp-block-post-content, .editor-styles-wrapper.post-type-page .wp-block-post-content) :is(th, td):not([class*="wp-block-phakarin-"] *) {
	padding: 8px 12px;
	border: 0;
	font-weight: 400;
	text-align: left;
	vertical-align: top;
}

:is(body.page .phakarin-main .wp-block-post-content, .editor-styles-wrapper.post-type-page .wp-block-post-content) :is(thead, tfoot):not([class*="wp-block-phakarin-"] *) {
	border: 0;
}

:is(body.page .phakarin-main .wp-block-post-content, .editor-styles-wrapper.post-type-page .wp-block-post-content) thead tr:not([class*="wp-block-phakarin-"] *) {
	background: var(--accent);
	color: var(--white);
}

:is(body.page .phakarin-main .wp-block-post-content, .editor-styles-wrapper.post-type-page .wp-block-post-content) thead :is(th, td):not([class*="wp-block-phakarin-"] *) {
	font-weight: 700;
}

:is(body.page .phakarin-main .wp-block-post-content, .editor-styles-wrapper.post-type-page .wp-block-post-content) tbody tr:nth-child(even):not([class*="wp-block-phakarin-"] *) {
	background: var(--light);
}