/* PrintKit Storefront: the header search and the mega menu (stage 11 plan, sections 3 and 4). Colours come from the
   theme's palette (navy = accent-1, teal = accent-2), so they follow the brand set in Appearance > Editor > Styles. */
:root {
	--pk-navy: var(--wp--preset--color--accent-1, #304e6d);
	--pk-teal: var(--wp--preset--color--accent-2, #42b0bf);
	--pk-dark: var(--wp--preset--color--accent-3, #22384f);
	--pk-text: var(--wp--preset--color--contrast, #1f2a33);
	--pk-muted: var(--wp--preset--color--accent-4, #56636e);
	--pk-light: var(--wp--preset--color--accent-5, #f3f7f9);
	--pk-line: var(--wp--preset--color--accent-6, #dce3e8);
	--pk-tint: var(--wp--preset--color--accent-7, #e6f5f7);
}

/* Search */
.pk-search { position: relative; flex: 1 1 auto; max-width: 34rem; margin: 0 1.5rem; display: flex; }
.pk-search__input { flex: 1; min-width: 0; height: 2.75rem; padding: 0 3rem 0 1rem; border: 2px solid var(--pk-line); border-radius: 999px; background: var(--pk-light); color: var(--pk-text); font: inherit; font-size: 1rem; }
.pk-search__input::placeholder { color: var(--pk-muted); }
.pk-search__input:focus { outline: none; border-color: var(--pk-teal); background: #fff; }
.pk-search__input::-webkit-search-cancel-button { margin-right: 0.25rem; }
.pk-search__button { position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: var(--pk-navy); color: #fff; cursor: pointer; }
.pk-search__button:hover, .pk-search__button:focus-visible { background: var(--pk-teal); }
.pk-search__list { position: absolute; z-index: 60; top: calc(100% + 0.4rem); left: 0; right: 0; max-height: min(70vh, 32rem); overflow: auto; padding: 0.4rem; border: 1px solid var(--pk-line); border-radius: 12px; background: #fff; box-shadow: 0 14px 40px rgba(16, 32, 48, 0.18); }
.pk-search__list[hidden] { display: none; }
.pk-search__option { display: flex; align-items: center; gap: 0.75rem; padding: 0.45rem 0.6rem; border-radius: 8px; color: var(--pk-text); text-decoration: none; }
.pk-search__option[aria-selected="true"], .pk-search__option:hover { background: var(--pk-tint); }
.pk-search__image { flex: none; width: 48px; height: 48px; border-radius: 6px; overflow: hidden; background: var(--pk-light); }
.pk-search__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pk-search__words { display: flex; flex-direction: column; min-width: 0; }
.pk-search__name { font-weight: 700; line-height: 1.3; }
.pk-search__from { color: var(--pk-muted); font-size: 0.875rem; }
.pk-search__heading { margin: 0.5rem 0.6rem 0.2rem; color: var(--pk-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pk-search__category { font-weight: 600; }
.pk-search__all { justify-content: center; margin-top: 0.3rem; border-top: 1px solid var(--pk-line); border-radius: 0 0 8px 8px; color: var(--pk-navy); font-weight: 700; }
.pk-search__none { margin: 0.6rem; color: var(--pk-muted); }

/* Mega menu */
.pk-menu { position: relative; max-width: var(--wp--style--global--wide-size, 1280px); margin-inline: auto !important; width: 100%; }
.pk-menu__top { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.pk-menu__item { display: flex; align-items: center; gap: 0.4rem; padding: 0.85rem 1.1rem; color: inherit; font-weight: 700; text-decoration: none; white-space: nowrap; }
.pk-menu__entry:first-child .pk-menu__item { padding-left: 0; }
.pk-menu__item:hover, .pk-menu__entry.is-open > .pk-menu__item { color: var(--pk-teal); }
.pk-menu__item:focus-visible { outline: 2px solid var(--pk-teal); outline-offset: -4px; border-radius: 4px; }
.pk-menu__caret { width: 0.45em; height: 0.45em; margin-top: -0.2em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.15s; }
.pk-menu__entry.is-open .pk-menu__caret { transform: rotate(-135deg); margin-top: 0.2em; }
.pk-menu__panel { display: none; position: absolute; z-index: 50; left: 0; right: 0; top: 100%; border-top: 3px solid var(--pk-teal); border-radius: 0 0 12px 12px; background: #fff; color: var(--pk-text); box-shadow: 0 18px 40px rgba(16, 32, 48, 0.18); }
.pk-menu__entry.is-open > .pk-menu__panel { display: block; }
.pk-menu__inner { padding: 1.4rem 1.6rem 1.2rem; }
/* Like the old site's: each sub-category a block (heading, a line, its products), in up to four columns */
.pk-menu__groups { columns: var(--pk-cols, 4) 12rem; column-gap: 2rem; margin: 0; padding: 0; list-style: none; }
.pk-menu__group { break-inside: avoid; margin-bottom: 1rem; }
.pk-menu__heading { display: block; padding: 0.2rem 0 0.35rem; margin-bottom: 0.3rem; border-bottom: 1px solid var(--pk-line); color: var(--pk-navy); font-size: 1.05rem; font-weight: 800; line-height: 1.3; text-decoration: none; }
.pk-menu__heading:hover, .pk-menu__heading:focus-visible { color: var(--pk-teal); }
.pk-menu__products, .pk-menu__products li { margin: 0; padding: 0; list-style: none; }
.pk-menu__products a { display: block; padding: 0.15rem 0.5rem; margin: 0 -0.5rem; border-radius: 6px; color: var(--pk-text); font-size: 0.95rem; line-height: 1.35; text-decoration: none; }
.pk-menu__products a:hover, .pk-menu__products a:focus-visible { background: var(--pk-tint); color: var(--pk-navy); }
.pk-menu__products .pk-menu__more { color: var(--pk-navy); font-weight: 700; }
.pk-menu__all { display: inline-block; margin-top: 1rem; color: var(--pk-navy); font-weight: 800; text-decoration: none; }
.pk-menu__all:hover { color: var(--pk-teal); }
.pk-menu__toggle { display: none; }
/* Empty paragraphs WordPress adds round the shortcodes' HTML in the header (one left a white strip under the menu bar on phones) */
.pk-menu > p:empty, .pk-search > p:empty { display: none; }
.pk-menu__fold { display: none; }

@media (max-width: 781px) {
	.pk-search { order: 3; flex-basis: 100%; max-width: none; margin: 0.75rem 0 0; }
	.pk-menu__toggle { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.8rem 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 800; cursor: pointer; }
	.pk-menu__bars, .pk-menu__bars::before, .pk-menu__bars::after { display: block; width: 1.2rem; height: 2px; background: currentColor; position: relative; content: ""; }
	.pk-menu__bars::before { position: absolute; top: -6px; }
	.pk-menu__bars::after { position: absolute; top: 6px; }
	.pk-menu__top { display: none; flex-direction: column; padding-bottom: 0.6rem; }
	.pk-menu.is-open .pk-menu__top { display: flex; }
	.pk-menu__item, .pk-menu__entry:first-child .pk-menu__item { justify-content: space-between; padding: 0.75rem 0; border-top: 1px solid rgba(255, 255, 255, 0.15); }
	.pk-menu__panel { position: static; border: 0; border-radius: 8px; box-shadow: none; margin-bottom: 0.6rem; }
	.pk-menu__inner { padding: 0.6rem 1rem 0.8rem; }
	/* On a phone: the sub-categories one under another; the + beside one folds its products open under it */
	.pk-menu__groups { columns: 1; }
	.pk-menu__group { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 0; border-bottom: 1px solid var(--pk-line); }
	.pk-menu__group:last-child { border-bottom: 0; }
	.pk-menu__heading { flex: 1; padding: 0.6rem 0; margin-bottom: 0; border-bottom: 0; color: var(--pk-text); font-size: 1rem; font-weight: 600; }
	.pk-menu__fold { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-right: -0.6rem; border: 0; background: none; color: var(--pk-navy); cursor: pointer; }
	.pk-menu__fold::before, .pk-menu__fold::after { content: ""; position: absolute; width: 0.85rem; height: 2px; background: currentColor; }
	.pk-menu__fold::after { transform: rotate(90deg); transition: transform 0.15s; }
	.pk-menu__fold { position: relative; }
	.pk-menu__group.is-open .pk-menu__fold::after { transform: rotate(0deg); }
	.pk-menu__products { display: none; flex-basis: 100%; padding: 0 0 0.5rem 0.75rem; }
	.pk-menu__group.is-open .pk-menu__products { display: block; }
	.pk-menu__products a { padding: 0.45rem 0.5rem; }
}

/* The price bar on product pages: top on a computer, bottom on a phone */
.pk-sticky { position: fixed; z-index: 999; left: 0; right: 0; top: var(--wp-admin--admin-bar--height, 0px); background: #fff; border-bottom: 1px solid var(--pk-line); box-shadow: 0 6px 20px rgba(16, 32, 48, 0.12); animation: pk-sticky-in 0.18s ease-out; }
.pk-sticky[hidden] { display: none; }
.pk-sticky__inner { display: flex; align-items: center; gap: 1.25rem; max-width: var(--wp--style--global--wide-size, 1280px); margin: 0 auto; padding: 0.6rem var(--wp--preset--spacing--50, 1.25rem); }
.pk-sticky__name { flex: 1; min-width: 0; overflow: hidden; color: var(--pk-navy); font-weight: 800; font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }
.pk-sticky__price { color: var(--pk-navy); font-weight: 800; font-size: 1.15rem; white-space: nowrap; }
.pk-sticky__price small, .pk-sticky__price .pk-price__inc { display: block; color: var(--pk-muted); font-size: 0.8rem; font-weight: 600; }
.pk-sticky.is-working .pk-sticky__price { opacity: 0.5; }
/* The estimated dates from the countdown (PrintKit Orders): one muted line between the name and the price */
.pk-sticky__dates { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--pk-muted); font-size: 0.9rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pk-sticky__dates[hidden] { display: none; }
.pk-sticky__dates > span + span::before { content: "·"; margin: 0 0.45em; }
.pk-sticky__go { flex: none; padding: 0.6rem 1.3rem !important; }
@keyframes pk-sticky-in { from { transform: translateY(-100%); } to { transform: none; } }
@media (max-width: 781px) {
	.pk-sticky { top: auto; bottom: 0; border-top: 1px solid var(--pk-line); border-bottom: 0; box-shadow: 0 -6px 20px rgba(16, 32, 48, 0.12); padding-bottom: env(safe-area-inset-bottom); animation-name: pk-sticky-up; }
	.pk-sticky__inner { flex-wrap: wrap; gap: 0.3rem 0.75rem; padding: 0.6rem 1rem; }
	.pk-sticky__name { display: none; }
	.pk-sticky__dates { order: -1; flex-basis: 100%; font-size: 0.8rem; line-height: 1.3; white-space: normal; }
	.pk-sticky__price { flex: 1; }
	@keyframes pk-sticky-up { from { transform: translateY(100%); } to { transform: none; } }
}
/* A narrow phone: the delivery date only */
@media (max-width: 420px) {
	.pk-sticky__ready--spare { display: none; }
	.pk-sticky__ready--spare + span::before { content: none; }
}

/* Tabs on a page (About us; Front\PageTabs): sections that fold open on a phone, tabs on a computer */
.pk-tabs details.wp-block-details { border-top: 1px solid #d5dde4; padding: 0.9rem 0; }
.pk-tabs details.wp-block-details > summary { font-weight: 700; color: var(--wp--preset--color--contrast, #304e6d); cursor: pointer; font-size: 1.15rem; }
.pk-tabs details.wp-block-details[open] > summary { margin-bottom: 1rem; }
.pk-tabs__list { display: none; }
.pk-tabs--on .pk-tabs__list { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 2px solid #d5dde4; margin-bottom: 1.5rem; }
.pk-tabs--on details.wp-block-details { border-top: 0; padding: 0; }
.pk-tabs--on details.wp-block-details > summary { display: none; }
.pk-tabs__tab { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 0.7rem 1.1rem; font: inherit; font-weight: 700; color: #304e6d; cursor: pointer; }
.pk-tabs__tab:hover { color: #42b0bf; }
.pk-tabs__tab[aria-selected="true"] { border-bottom-color: #42b0bf; color: #1f3347; }
.pk-tabs__tab:focus-visible { outline: 2px solid #42b0bf; outline-offset: 2px; }
.pk-tabs .wp-block-image img { border-radius: 6px; }

/* The home page's banners ([printkit_banners], Front\Banners). A fixed height, whatever is in them and before their
   pictures arrive, so nothing below moves. The banners lie on top of each other and fade from one to the next. */
.pk-banners { --pk-banner-h: 440px; position: relative; overflow: hidden; background: var(--pk-dark); color: #fff; margin-block: 0 !important; }
.pk-banners__slides { display: grid; height: var(--pk-banner-h); }
.pk-banner { grid-area: 1 / 1; position: relative; min-width: 0; height: var(--pk-banner-h); overflow: hidden; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s; }
.pk-banner.is-active { opacity: 1; visibility: visible; transition: opacity 0.6s ease, visibility 0s; z-index: 1; }
.pk-banner__inner { position: relative; z-index: 1; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3rem; height: 100%; max-width: var(--wp--style--global--wide-size, 1280px); margin: 0 auto; padding: 2.25rem var(--wp--preset--spacing--50, 1.5rem); }
.has-controls .pk-banner__inner { padding-bottom: 4.25rem; }
.pk-banner__words { max-width: 40rem; }
.pk-banner__headline { margin: 0 0 0.75rem; padding-bottom: 0.08em; color: inherit; font-size: clamp(1.9rem, 3.2vw, 2.75rem); font-weight: 800; line-height: 1.15; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.pk-banner__text { margin: 0 0 1.5rem; font-size: 1.15rem; line-height: 1.5; opacity: 0.95; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.pk-banner__from { white-space: nowrap; font-weight: 800; }
.pk-banner__buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; }
.pk-banner__button { display: inline-block; padding: 0.75rem 1.5rem; border: 2px solid #fff; border-radius: 8px; background: #fff; color: var(--pk-navy); font-weight: 800; line-height: 1.3; text-decoration: none; }
.pk-banner__button:hover { background: var(--pk-tint); border-color: var(--pk-tint); }
.pk-banner__button.is-secondary { background: transparent; color: #fff; }
.pk-banner__button.is-secondary:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.pk-banner__button:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
/* Backgrounds from the theme's palette */
.pk-banner--gradient { background: linear-gradient(135deg, var(--pk-dark) 0%, var(--pk-navy) 55%, var(--pk-teal) 100%); }
.pk-banner--navy { background: var(--pk-navy); }
.pk-banner--dark { background: var(--pk-dark); }
.pk-banner--teal { background: var(--pk-teal); color: var(--pk-text); }
.pk-banner--light { background: var(--pk-light); color: var(--pk-text); }
.pk-banner--light .pk-banner__headline { color: var(--pk-navy); }
.pk-banner--teal .pk-banner__button, .pk-banner--light .pk-banner__button { border-color: var(--pk-navy); background: var(--pk-navy); color: #fff; }
.pk-banner--teal .pk-banner__button:hover, .pk-banner--light .pk-banner__button:hover { border-color: var(--pk-dark); background: var(--pk-dark); }
.pk-banner--teal .pk-banner__button.is-secondary, .pk-banner--light .pk-banner__button.is-secondary { background: transparent; color: var(--pk-navy); }
.pk-banner--teal .pk-banner__button.is-secondary:hover, .pk-banner--light .pk-banner__button.is-secondary:hover { background: rgba(255, 255, 255, 0.35); }
.pk-banner__picture img { display: block; }
/* Picture beside the words: the product photo on the right */
.pk-banner--beside .pk-banner__picture { width: min(380px, 34vw); aspect-ratio: 1; }
.pk-banner--beside .pk-banner__picture img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; box-shadow: 0 18px 40px rgba(10, 20, 32, 0.3); }
.pk-banner--beside.pk-banner--no-picture .pk-banner__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.pk-banner--beside.pk-banner--no-picture .pk-banner__buttons { justify-content: center; }
/* Picture behind the words: the photo fills the banner, darkened under the words so they read */
.pk-banner--behind { background: var(--pk-dark); color: #fff; }
.pk-banner--behind > .pk-banner__picture { position: absolute; inset: 0; }
.pk-banner--behind > .pk-banner__picture img { width: 100%; height: 100%; object-fit: cover; }
.pk-banner--behind::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(14, 26, 38, 0.9) 0%, rgba(14, 26, 38, 0.72) 42%, rgba(14, 26, 38, 0.15) 78%); }
.pk-banner--behind .pk-banner__inner { z-index: 2; grid-template-columns: minmax(0, 1fr); }
.pk-banner--behind .pk-banner__words { max-width: 34rem; }
.pk-banner--behind .pk-banner__headline { color: #fff; }
.pk-banner--behind .pk-banner__button { border-color: #fff; background: #fff; color: var(--pk-navy); }
.pk-banner--behind .pk-banner__button.is-secondary { background: transparent; color: #fff; }
.pk-banner--focal-left .pk-banner__picture img { object-position: left center; }
.pk-banner--focal-right .pk-banner__picture img { object-position: right center; }
/* The controls: one dark strip at the bottom, readable on every background */
.pk-banners__controls { position: absolute; z-index: 3; left: 50%; bottom: 0.9rem; transform: translateX(-50%); display: flex; align-items: center; gap: 0.15rem; padding: 0.2rem 0.35rem; border-radius: 999px; background: rgba(14, 26, 38, 0.62); }
.pk-banners__controls button { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.pk-banners__controls button:hover { background: rgba(255, 255, 255, 0.16); }
.pk-banners__controls button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.pk-banners__prev span, .pk-banners__next span { width: 0.6rem; height: 0.6rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.pk-banners__prev span { transform: translateX(0.12rem) rotate(-135deg); }
.pk-banners__next span { transform: translateX(-0.12rem) rotate(45deg); }
/* Pause: two bars while turning; play: a triangle once stopped */
.pk-banners__pause span { width: 0; height: 0; border-style: solid; border-width: 0.45rem 0 0.45rem 0.75rem; border-color: transparent transparent transparent currentColor; margin-left: 0.15rem; }
.pk-banners.is-playing .pk-banners__pause span { width: 0.7rem; height: 0.85rem; border-width: 0 0.22rem; border-color: currentColor; margin: 0; }
.pk-banners__dots { display: flex; align-items: center; }
.pk-banners__controls .pk-banners__dot { width: 1.5rem; border-radius: 6px; }
.pk-banners__dot::before { content: ""; display: block; width: 0.6rem; height: 0.6rem; border-radius: 999px; background: rgba(255, 255, 255, 0.55); transition: width 0.2s; }
.pk-banners__dot[aria-current="true"]::before { width: 1.2rem; background: #fff; }
.pk-banners:not(.is-ready) .pk-banners__controls { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
	.pk-banner, .pk-banner.is-active, .pk-banners__dot::before { transition: none; }
}
@media (max-width: 781px) {
	.pk-banners { --pk-banner-h: 560px; }
	.pk-banner__inner { grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; gap: 1.1rem; padding: 1.4rem 1rem; }
	.has-controls .pk-banner__inner { padding-bottom: 4.6rem; }
	.pk-banner__headline { font-size: 1.65rem; }
	.pk-banner__text { margin-bottom: 1.1rem; font-size: 1.02rem; -webkit-line-clamp: 4; }
	.pk-banner__button { padding: 0.65rem 1.1rem; }
	.pk-banner--beside .pk-banner__picture { order: -1; width: 220px; }
	.pk-banner--beside.pk-banner--no-picture .pk-banner__inner { align-content: center; }
	.pk-banner--behind .pk-banner__inner { align-content: end; }
	.pk-banner--behind::before { background: linear-gradient(0deg, rgba(14, 26, 38, 0.92) 0%, rgba(14, 26, 38, 0.75) 48%, rgba(14, 26, 38, 0.1) 85%); }
}
/* Words only for screen readers and search engines (the home page's title, above the banners) */
.pk-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Category pages: the sorting list, styled like the search box */
.wc-block-catalog-sorting select.orderby, .woocommerce-ordering select.orderby { appearance: none; height: 2.5rem; padding: 0 2.4rem 0 1rem; border: 2px solid var(--pk-line); border-radius: 999px; background: var(--pk-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23304e6d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.8rem center / 1rem; color: var(--pk-text); font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
.wc-block-catalog-sorting select.orderby:hover, .woocommerce-ordering select.orderby:hover { border-color: var(--pk-teal); }
.wc-block-catalog-sorting select.orderby:focus-visible, .woocommerce-ordering select.orderby:focus-visible { outline: none; border-color: var(--pk-teal); background-color: #fff; box-shadow: 0 0 0 3px var(--pk-tint); }