/* --------------------------------------------------------------------------
   Paterakis — theme styles
   Hand-written. No framework, no builder output, no vendor CSS.
   Tokens come from theme.json as --wp--preset--* custom properties.
   -------------------------------------------------------------------------- */

:root {
	--pk-transition: 200ms ease;
	--pk-radius: 6px;
	--pk-card-pad: 2rem;
}

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

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;overflow-x:clip; }

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

:where(a):focus-visible,
:where(button):focus-visible,
:where(.wp-element-button):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 2px;
}

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

/* ---------- Header ---------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--wp--preset--color--border);
	/* No translucency here: parts/header.html sets backgroundColor "base", and
	   WordPress emits .has-base-background-color{...!important}, which wins.
	   Live's header is opaque white anyway. */
}

.site-header__right { gap: clamp(1rem, 3vw, 2.5rem); }

/* No account, no cart: functions.php stops both blocks from rendering at all.
   This only covers a page still served from cache with the old markup. */
.site-header .wp-block-woocommerce-customer-account,
.site-header .wp-block-woocommerce-mini-cart { display: none !important; }

.site-nav a {
	color: red;
	font-size: 18px; /* medium preset is 16px; menu reads 2px larger */
	font-weight: 500;
	text-decoration: none;
	padding-block: 0.25rem;
	border-bottom: 2px solid transparent;
	transition: color var(--pk-transition), border-color var(--pk-transition);
}

.site-nav a:hover,
.site-nav .current-menu-item > a {
	color: var(--wp--preset--color--primary);
	border-bottom-color: var(--wp--preset--color--primary);
	text-decoration: none;
}

@media (max-width: 781px) {
	.site-header__cta { display: none; }
}

/* ---------- Section rhythm -------------------------------------------- */

.pk-section { padding-block: clamp(3rem, 8vw, 6rem); }
.pk-section--tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
.pk-section--dark {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}
.pk-section--dark :is(h1, h2, h3, h4) { color: var(--wp--preset--color--base); }
.pk-section--surface { background-color: var(--wp--preset--color--surface); }

/* ---------- Two-tone heading (replaces wgl-double-heading) ------------- */

.pk-dh { margin: 0; }
.pk-dh__a { color: var(--wp--preset--color--secondary); }
.pk-dh__b { color: var(--wp--preset--color--primary); }
.pk-section--dark .pk-dh__a { color: var(--wp--preset--color--base); }

.pk-eyebrow {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.75rem;
}

/* ---------- Info card (replaces wgl-info-box) ------------------------- */

.pk-cards {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.pk-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--pk-radius);
	padding: var(--pk-card-pad);
	box-shadow: var(--wp--preset--shadow--card);
	transition: transform var(--pk-transition), box-shadow var(--pk-transition);
}

.pk-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--lift);
}

.pk-card__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--secondary);
	margin: 0 0 0.75rem;
}

.pk-card__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--wp--preset--color--text);
}

.pk-card__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem; height: 2.75rem;
	margin-bottom: 1.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 700;
	font-size: 0.9375rem;
}

/* ---------- Counters (replaces wgl-counter) --------------------------- */

.pk-counters {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	text-align: center;
}

.pk-counter__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--wp--preset--color--primary);
	font-variant-numeric: tabular-nums;
}

.pk-counter__label {
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.pk-section--dark .pk-counter__label { color: var(--wp--preset--color--footer-text); }

/* ---------- Hero image layers (replaces wgl-image-layers) ------------- */

.pk-layers {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 320px;
}

.pk-layers img {
	display: block;
	position: relative;
	z-index: 1;
	border-radius: var(--pk-radius);
}

.pk-layers__float {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
	/* Driven by assets/js/effects.js; -0.1 factor matches the original. */
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.pk-layers__float { transform: none !important; }
}

/* ---------- Accordion (replaces wgl-toggle-accordion) ----------------- */

.pk-accordion { border-top: 1px solid var(--wp--preset--color--border); }

.pk-accordion details {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.pk-accordion summary {
	cursor: pointer;
	list-style: none;
	padding: 1.25rem 2.5rem 1.25rem 0;
	position: relative;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--secondary);
	transition: color var(--pk-transition);
}

.pk-accordion summary::-webkit-details-marker { display: none; }
.pk-accordion summary:hover { color: var(--wp--preset--color--primary); }

.pk-accordion summary::after {
	content: "";
	position: absolute;
	right: 0.5rem; top: 50%;
	width: 0.625rem; height: 0.625rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-65%) rotate(45deg);
	transition: transform var(--pk-transition);
}

.pk-accordion details[open] summary::after { transform: translateY(-35%) rotate(-135deg); }

.pk-accordion__body {
	padding: 0 0 1.5rem;
	color: var(--wp--preset--color--text);
	font-size: 0.9375rem;
	line-height: 1.8;
}

/* ---------- Quote / testimonial --------------------------------------- */

.pk-quote {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	border-radius: var(--pk-radius);
	padding: clamp(2rem, 5vw, 3.5rem);
}

.pk-quote__text {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.125rem, 2.4vw, 1.5rem);
	line-height: 1.6;
	margin: 0 0 1.5rem;
}

.pk-quote__who { font-size: 0.9375rem; color: var(--wp--preset--color--footer-text); margin: 0; }
.pk-quote__who strong { color: var(--wp--preset--color--base); display: block; }

/* ---------- Contact details: white icon badge, label, value -------------
   Live renders each detail as a white rounded badge with a soft shadow, the
   label above and the value beneath (email and phone as links).            */

.pk-contact-grid {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: 1fr;
}

.pk-contact-item {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	border: 0;
	padding: 0;
}

.pk-contact-item__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--card);
	color: var(--wp--preset--color--primary);
}

.pk-contact-item__icon svg { width: 24px; height: 24px; }

.pk-contact-item h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wp--preset--color--secondary);
	margin: 0 0 .25rem;
}

.pk-contact-item p { margin: 0; font-size: .9375rem; color: var(--wp--preset--color--text); }
.pk-contact-item a { color: var(--wp--preset--color--primary); }

/* ---------- Footer ----------------------------------------------------- */

.site-footer a { color: var(--wp--preset--color--footer-text); text-decoration: none; }
.site-footer a:hover { color: var(--wp--preset--color--base); text-decoration: underline; }
.site-footer__links { list-style: none; padding: 0; margin: 0; }
.site-footer__rule { margin-block: clamp(2rem, 5vw, 3rem) 1.5rem; opacity: 0.18; border: 0; height: 1px; }
/* The logo is a JPEG on its own light ground, so the usual
   brightness(0) invert(1) trick turns it into a solid block.
   Give it a light chip instead. */
.site-footer__logo img,
.site-footer .wp-block-site-logo img {
	background: #fff;
	border-radius: 4px;
	padding: 6px;
}

/* ---------- WooCommerce (catalog mode) ---------------------------------
   Modern WooCommerce renders the shop with its block Product Collection
   (li.wc-block-product tiles), not the classic ul.products loop, so both
   markups are covered here.                                             */

/* WooCommerce's block template brings its own responsive grid; leave that
   alone and only set the gap, or the two fight and tiles end up oversized. */
.wc-block-product-template,
.wp-block-woocommerce-product-template {
	gap: 2.5rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* the classic loop, used only if the block template is replaced */
.woocommerce ul.products {
	display: grid;
	gap: 2.5rem 2rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	margin: 0; padding: 0; list-style: none;
}

.woocommerce ul.products li.product,
li.wc-block-product {
	margin: 0 !important;
	width: auto !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	text-align: left;
	list-style: none;
}

.woocommerce ul.products li.product img,
li.wc-block-product .wc-block-components-product-image img {
	border-radius: var(--pk-radius);
	background: var(--wp--preset--color--surface);
	width: 100%;
	height: auto;
	display: block;
}

li.wc-block-product .wc-block-components-product-image { margin: 0 0 1rem; }

/* product title uses the body face, not the display serif */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
li.wc-block-product .wp-block-post-title {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 18px !important;        /* live: .woocommerce-loop-product__title { font-size: 18px } */
	font-weight: 600 !important;
	line-height: 1.45;
	margin: 0 0 .75rem;
	padding: 0 !important;
}

li.wc-block-product .wp-block-post-title a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

li.wc-block-product .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }

/* push the button down so tiles align */
li.wc-block-product .wp-block-woocommerce-product-button,
li.wc-block-product .wc-block-components-product-button { margin-top: auto; }

li.wc-block-product .wc-block-components-product-button .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--primary);
	font-size: .875rem;
}

li.wc-block-product .wc-block-components-product-button .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

.paterakis-enquire { display: inline-block; margin-top: 1rem; }

/* Catalog mode: nothing should hint at a cart or a price. */
.woocommerce .cart, .woocommerce-cart-form,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.wp-block-woocommerce-product-price,
.wc-block-components-product-price,
.wc-block-components-product-sale-badge { display: none !important; }

/* ---------- Single product summary --------------------------------------
   Reading order is title → SKU → categories → description → enquiry button
   (the meta is hoisted under the title in functions.php). The meta spans are
   inline by default, so give each its own line.                            */

.woocommerce div.product .product_meta {
	margin: .25rem 0 1.5rem;
	font-size: .9375rem;
	color: var(--wp--preset--color--text-muted);
}

.woocommerce div.product .product_meta > span {
	display: block;
	margin-bottom: .35rem;
}

.woocommerce div.product .product_meta > span:last-child { margin-bottom: 0; }

/* No tab bar: the description is the only panel worth showing. Without the
   bar the panel sat right under the gallery, so it gets its own space and a
   divider above it. */
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs { display: none; }

.woocommerce div.product .woocommerce-tabs {
	clear: both;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--wp--preset--color--border);
}

/* ---------- Motion preferences ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Decorative section backgrounds ----------------------------
   Carried over from the original homepage (sections 1 and 5).
   Paths are site-relative; the files ship in build/media/.              */

.pk-bg-1,
.pk-bg-2 {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.pk-bg-1 { background-image: url("/wp-content/uploads/2022/09/homepage-1_bg-1.jpg"); }
.pk-bg-2 { background-image: url("/wp-content/uploads/2022/09/homepage-1_bg-2.jpg"); }

/* ---------- Forms (Contact Form 7) ------------------------------------- */

.wpcf7 { max-width: 640px; }

.wpcf7 label {
	display: block;
	font-size: .875rem;
	font-weight: 600;
	color: var(--wp--preset--color--secondary);
	margin-bottom: 1.25rem;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
	display: block;
	width: 100%;
	margin-top: .375rem;
	padding: .9rem 1.375rem;
	font: inherit;
	font-weight: 400;
	color: var(--wp--preset--color--text);
	background: #F5F5F5;               /* live: grey fill, no border */
	border: 1px solid transparent;
	border-radius: 30px;
	transition: border-color var(--pk-transition), box-shadow var(--pk-transition);
}

.wpcf7 textarea { min-height: 9rem; resize: vertical; border-radius: 18px; }

.wpcf7 :is(input, select, textarea):focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(48, 120, 96, 0.15);
}

.wpcf7 input[type="submit"] {
	display: inline-block;
	width: auto;
	margin-top: .5rem;
	padding: .9rem 2rem;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: var(--wp--preset--color--primary);
	border: 0;
	cursor: pointer;
	transition: background var(--pk-transition);
}

.wpcf7 input[type="submit"]:hover { background: var(--wp--preset--color--primary-dark); }

/* restore a visible focus indicator (the :is(input,…) rule above removes it) */
.wpcf7 input[type="submit"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--secondary);
	outline-offset: 3px;
	box-shadow: none;
}

.wpcf7-not-valid-tip { color: #b3261e; font-size: .8125rem; font-weight: 400; }
.wpcf7 .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: .875rem 1rem;
	border-radius: var(--pk-radius);
	border-width: 1px;
	font-size: .9375rem;
}

/* ---------- Map embed ---------------------------------------------------- */

.pk-map {
	position: relative;
	width: 100%;
	aspect-ratio: 21 / 9;
	min-height: 320px;
	border-radius: var(--pk-radius);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
}

.pk-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 781px) { .pk-map { aspect-ratio: 4 / 3; } }

/* ---------- Corrections from inspecting the live site --------------------
   The Elementor global kit declared Libre Baskerville, but the live site
   never applies it: every heading computes to Roboto 700. Headings, the
   pill button and the hero metrics below match what live actually renders. */

.pk-dh { font-family: var(--wp--preset--font-family--heading); font-weight: 700; line-height: 1.27; }
.pk-card__title { font-weight: 600; }
.pk-quote__text { font-family: var(--wp--preset--font-family--heading); font-weight: 500; }
.pk-counter__value { font-family: var(--wp--preset--font-family--heading); font-weight: 700; }

.wp-element-button,
.wp-block-button__link,
.wpcf7 input[type="submit"],
.paterakis-enquire {
	border-radius: 60px;
	font-weight: 500;
	padding: 13px 28px;
}

li.wc-block-product .wc-block-components-product-button .wp-block-button__link {
	border-radius: 60px;
	padding: 10px 22px;
}

/* ---------- Layout corrections from the live render -----------------------
   Verified against the live site rendered with its own JS in an isolated
   local mirror. Live uses no cards: the feature blocks are plain text that
   mirrors inward toward the centre image, section headings are centred, and
   the counters are oversized ghosted numerals sitting behind their labels. */

/* Live centres some section headings and left-aligns others, so this is
   opt-in per section rather than global. Centred on live: the homepage intro
   and categories headings, and Εταιρεία's "6 Λόγοι". Left on live: THC-P and
   Επικοινωνία. */
.pk-section--surface > .pk-dh,
.pk-section--surface > .wp-block-heading,
.pk-section--centered > .pk-dh,
.pk-section--centered > .wp-block-heading { text-align: center; }
.pk-section--surface > p,
.pk-section--centered > p { text-align: center; }

/* live's two-tone order on section headings is green then dark */
.pk-section--surface .pk-dh__a { color: var(--wp--preset--color--primary); }
.pk-section--surface .pk-dh__b { color: var(--wp--preset--color--secondary); }

/* the feature blocks are not cards */
.pk-section .wp-block-columns .pk-card {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}
.pk-section .wp-block-columns .pk-card:hover { transform: none; box-shadow: none; }
.pk-section .wp-block-columns .pk-cards { gap: 2.5rem; }

/* and they mirror inward toward the centre image */
.pk-section .wp-block-columns > .wp-block-column:first-child .pk-cards { text-align: right; }
.pk-section .wp-block-columns > .wp-block-column:last-child  .pk-cards { text-align: left; }

@media (max-width: 781px) {
	.pk-section .wp-block-columns > .wp-block-column .pk-cards { text-align: left; }
}

/* ---------- Counters, as live draws them --------------------------------- */

.pk-counters-section { background: var(--wp--preset--color--base); }

.pk-counters-section .pk-counters {
	gap: 1rem;
	align-items: center;
}

.pk-counters-section .pk-counters > div {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 150px;
}

.pk-counters-section .pk-counter__value {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: clamp(4.5rem, 9vw, 8.5rem);
	font-weight: 700;
	line-height: 1;
	/* live uses 16% alpha = 1.24:1, a WCAG 1.4.3 failure on real content.
	   #6c9f8e is the lightest tint of the brand green that still clears
	   3:1 for large text, so the ghost effect survives and stays readable. */
	color: #6c9f8e;
	pointer-events: none;
	user-select: none;
}

.pk-counters-section .pk-counter__label {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}

/* ==========================================================================
   Layout values read from the live site's own Elementor CSS.
   Each figure below is what paterakisstratos.com actually computes.
   ========================================================================== */

/* ---------- Home hero: section padding 0 101px 147px 0, image flush right */
.pk-section.pk-bg-1 { padding-bottom: clamp(3rem, 10vw, 147px); }
.pk-section.pk-bg-1 .wp-block-columns > .wp-block-column:last-child {
	align-items: flex-end;
	text-align: right;
}
.pk-section.pk-bg-1 .wp-block-image { margin-left: auto; }

/* ---------- Home feature columns: live insets them 0% 14% 0% 4% / 0% 4% 0% 14% */
.pk-section .wp-block-columns > .wp-block-column:first-child .pk-cards { padding: 0 14% 0 4%; }
.pk-section .wp-block-columns > .wp-block-column:last-child  .pk-cards { padding: 0 4% 0 14%; }

@media (max-width: 781px) {
	.pk-section .wp-block-columns > .wp-block-column .pk-cards { padding: 0; }
	.pk-section.pk-bg-1 .wp-block-columns > .wp-block-column:last-child { text-align: left; }
}

/* ---------- Εταιρεία "6 reasons": cream circle badge, centred title -------
   Live puts #FAF4EC on a round icon badge (27px padding, 34px glyph), with the
   title centred underneath. There is no card and no body copy.              */

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

.pk-cards--badges { gap: 3.5rem 2rem; }

.pk-cards--badges .pk-card {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	text-align: center;
}

.pk-cards--badges .pk-card:hover { transform: none; box-shadow: none; }

.pk-cards--badges .pk-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	margin-bottom: 1.5rem;
	border-radius: 50%;
	background: #FAF4EC;
	color: var(--wp--preset--color--primary);
}

.pk-cards--badges .pk-badge svg { width: 34px; height: 34px; }

.pk-cards--badges .pk-card__title {
	font-size: 1.0625rem;
	font-weight: 400;
	color: var(--wp--preset--color--secondary);
	margin: 0;
}

@media (max-width: 781px) {
	.pk-cards--3 { grid-template-columns: 1fr; }
}

/* ---------- Testimonial band: live column background #36443C, 0 90px ----- */

.pk-quote {
	background: #36443C;
	padding: clamp(2rem, 6vw, 64px) clamp(1.5rem, 8vw, 90px);
	text-align: center;
}

.pk-quote__text {
	font-size: clamp(1.375rem, 3.4vw, 2.25rem);
	line-height: 1.45;
	font-weight: 400;
}

/* ---------- THC-P accordion ---------------------------------------------
   Live tints only the summary bar: #F7F7F7 when closed, brand green with
   white text when open. The body copy sits on the page, not inside a box. */

.pk-accordion { border-top: 0; }

.pk-accordion details {
	background: none;
	border: 0;
	border-radius: 0;
	margin-bottom: .5rem;
}

.pk-accordion summary {
	padding: 18px 56px 19px 30px;
	background: #F7F7F7;
	border-radius: var(--pk-radius);
	color: var(--wp--preset--color--secondary);
	font-size: 1.0625rem;
	font-weight: 600;
	transition: background var(--pk-transition), color var(--pk-transition);
}

.pk-accordion summary:hover { background: #eceeed; color: var(--wp--preset--color--secondary); }

.pk-accordion details[open] > summary {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

.pk-accordion details[open] > summary:hover { background: var(--wp--preset--color--primary-dark); color: #fff; }

.pk-accordion summary::after { right: 26px; }

.pk-accordion__body {
	padding: 1.5rem 30px 1.75rem;
	background: none;
}

/* ---------- Contact form card: live is white, padding 48px 50px --------- */

.pk-formcard {
	background: var(--wp--preset--color--base);
	border-radius: var(--pk-radius);
	padding: clamp(1.75rem, 4vw, 48px) clamp(1.5rem, 4vw, 50px);
	box-shadow: var(--wp--preset--shadow--card);
}

.pk-formcard .wpcf7 { max-width: none; }
.pk-formcard > .pk-dh, .pk-formcard > .wp-block-heading { text-align: left; }

/* the contact page sits on a tinted ground so the white card reads as a card */
body .pk-section--tight:has(.pk-formcard) { background: var(--wp--preset--color--surface); }

/* accordion bodies carry live's bulleted sub-headings */
.pk-accordion__body ul { margin: 0 0 .5rem; padding-left: 1.25rem; }
.pk-accordion__body li { margin: 0; }
.pk-accordion__body li strong { color: var(--wp--preset--color--secondary); }
.pk-accordion__body p { margin: 0 0 1rem; }
.pk-accordion__body p:last-child { margin-bottom: 0; }


/* ---------- Shop: sidebar + results bar, as live lays it out -------------
   Live shows a category sidebar with a product search, a "Showing 1–30 of N"
   count and a sorting select, with the grid three across beside it.        */

.pk-shop__layout { gap: 3rem; }

.pk-shop__side { font-size: .9375rem; }

.pk-shop__sidetitle {
	color: var(--wp--preset--color--primary);
	margin: 0 0 1rem;
}

/* Core wraps a button-inside search in a white box with a #949494 border
   (:where(...), so zero specificity). The field itself is the grey pill. */
.pk-shop__search .wp-block-search__inside-wrapper {
	background: none;
	border: 0;
	padding: 0;
}

.pk-shop__search .wp-block-search__input {
	border: 0;
	background: #F5F5F5;
	border-radius: 30px;
	padding: .8rem 1.25rem;
	font: inherit;
}

.pk-shop__search .wp-block-search__button {
	background: var(--wp--preset--color--primary);
	border: 0;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	padding: 0;
	color: #fff;
	margin: 0 4px 0 0;
}

.pk-shop__cats ul { list-style: none; margin: 0; padding: 0; }

/* The count is a sibling of the link and the child <ul> is a sibling too, so
   the row is a wrapping flex container: link grows, count sits right, any
   nested list drops to its own full-width line. */
.pk-shop__cats li.wc-block-product-categories-list-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem .75rem;
	margin: 0;
	padding: .35rem 0;
}

.pk-shop__cats li.wc-block-product-categories-list-item > a {
	flex: 1 1 auto;
	min-width: 0;                 /* without this the label wraps per letter */
	overflow-wrap: anywhere;
}

.pk-shop__cats li.wc-block-product-categories-list-item > ul {
	flex: 0 0 100%;
	width: 100%;
	padding-left: 1rem;
	margin: .25rem 0 0;
}

.pk-shop__cats a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .02em;
	font-size: .875rem;
	line-height: 1.4;
}

.pk-shop__cats a:hover { color: var(--wp--preset--color--primary); text-decoration: none; }

/* the category being viewed (aria-current is set in functions.php) */
.pk-shop__cats li.wc-block-product-categories-list-item:has(> a[aria-current="page"]) {
	margin-left: -.85rem;
	padding-left: .6rem;
	border-left: 3px solid var(--wp--preset--color--primary);
}

.pk-shop__cats a[aria-current="page"],
.pk-shop__cats li:has(> a[aria-current="page"]) > .wc-block-product-categories-list-item-count {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/* BRAND / TYPE / Κατηγορία: group labels, not links (see functions.php) */
.pk-shop__cats-group {
	flex: 1 1 auto;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}

.pk-shop__cats .wc-block-product-categories-list-item-count {
	flex: 0 0 auto;
	color: var(--wp--preset--color--text-muted);
	font-size: .8125rem;
	white-space: nowrap;
}

.pk-shop__side { min-width: 0; }

.pk-shop__bar {
	margin-bottom: 2rem;
	gap: 1rem;
	font-size: .9375rem;
	color: var(--wp--preset--color--text);
}

.pk-shop__bar .woocommerce-ordering select,
.pk-shop__bar select {
	border: 0;
	background: #F5F5F5;
	border-radius: 30px;
	padding: .7rem 1.25rem;
	font: inherit;
}

@media (max-width: 781px) {
	.pk-shop__layout { gap: 2rem; }
}


/* the sidebar narrows the grid, so pin the product columns at three */
.pk-shop__main .wc-block-product-template.columns-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 1100px) {
	.pk-shop__main .wc-block-product-template.columns-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* two across on phones: one tile per screen made 72 products an endless scroll */
@media (max-width: 600px) {
	.pk-shop__main .wc-block-product-template.columns-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* ---------- Shop spacing -------------------------------------------------
   The template's spacers sit on the spacing presets, which render far smaller
   than theme.json asks, so the shop ran tight everywhere. Real values here,
   scoped to the shop template (.pk-shop) only.                             */

.pk-shop { padding-bottom: clamp(3rem, 7vw, 6rem); }

.pk-shop__layout { gap: clamp(2rem, 4vw, 4rem); }

/* sidebar: search, then the category groups with room between them */
.pk-shop__search { margin-bottom: 1.75rem; }
.pk-shop__sidetitle { margin-bottom: 1.25rem; }

.pk-shop__cats a { font-size: .9375rem; }

.pk-shop__cats li.wc-block-product-categories-list-item { padding: .5rem 0; }

.pk-shop__cats li.wc-block-product-categories-list-item > ul {
	padding-left: 1.25rem;
	margin-top: .35rem;
}

/* BRAND / TYPE / Κατηγορία read as separate groups */
.pk-shop__cats > ul > li + li {
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: .5rem;
	padding-top: 1rem;
}

/* results count + sorting: a clear bar above the grid */
.pk-shop__bar {
	margin-bottom: 2.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.pk-shop__bar .woocommerce-result-count { margin: 0; }

/* product grid */
.pk-shop .wc-block-product-template { gap: 3.5rem 2.5rem; }

.pk-shop li.wc-block-product .wc-block-components-product-image { margin-bottom: 1.25rem; }
.pk-shop li.wc-block-product .wp-block-post-title { margin-bottom: 1rem; }

/* pagination: "1 2 3 Next Page" ran together as plain text */
.pk-shop .wp-block-query-pagination {
	margin-top: 3rem;
	gap: .75rem;
	align-items: center;
}

.pk-shop .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.pk-shop .wp-block-query-pagination .page-numbers,
.pk-shop .wp-block-query-pagination-previous,
.pk-shop .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	color: var(--wp--preset--color--secondary);
	font-size: .9375rem;
	text-decoration: none;
	transition: border-color var(--pk-transition), color var(--pk-transition);
}

.pk-shop .wp-block-query-pagination a:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.pk-shop .wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
}

/* ---------- Full-bleed sections -----------------------------------------
   Live runs every band edge to edge and constrains the content inside.
   The blocks carry align:full; this keeps the inner content at 1200px and
   makes the WooCommerce templates behave the same way.                    */

/* Do NOT reset the margins here: WordPress gives .alignfull negative inline
   margins equal to the root padding, which is what pulls it to the edges. */
.pk-section.alignfull { max-width: none; }

.pk-section > :where(:not(.alignfull):not(.alignwide)) {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* WooCommerce archive/single templates use <main class="pk-section"> directly */
main.pk-section { width: 100%; max-width: none; }

/* Επικοινωνία only (templates/page-contacts.html). The wrapper is a flow layout
   so the page's bands can bleed to the viewport like they do on the home page;
   the bands carry their own vertical rhythm, so the wrapper adds none. */
.pk-main { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }
.pk-main:has(> .entry-content > .pk-section) { padding-block: 0; }

/* live stacks the two-tone hero heading on separate lines */
.pk-dh.has-display-font-size .pk-dh__a,
.pk-dh.has-display-font-size .pk-dh__b { display: block; }

/* ---------- Final type sizes measured against live ----------------------
   live: hero body 16px · product-line card titles 22px                    */

.pk-section .wp-block-columns .pk-card__title { font-size: 22px; font-weight: 600; }

/* these beat WordPress's .has-*-font-size{...!important} preset classes */
.pk-section.pk-bg-1 p.has-large-font-size,
.pk-section.pk-bg-1 p { font-size: 16px !important; }

.pk-counters-section .pk-counter__label { font-size: 13px; }

/* ---------- "Herbal Blends: Οι κατηγορίες μας" ---------------------------
   Live stacks these six as full-width horizontal rows: icon on the left in
   an 84px column, title and copy filling the rest. Not a grid of cards.   */

.pk-cards--rows {
	grid-template-columns: 1fr;
	gap: 32px;          /* live row gap */
}

.pk-cards--rows .pk-card {
	/* grid, not flex: the badge occupies a fixed 84px column and the title and
	   copy stack in the second column, matching live's icon + content_wrapper */
	display: grid;
	grid-template-columns: 60px 1fr;  /* 60px circle + the gap = live's 84px media column */
	align-items: start;
	column-gap: 24px;
	row-gap: .5rem;
	padding-block: 16px;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	text-align: left;
}

.pk-cards--rows .pk-card:hover { transform: none; box-shadow: none; }

.pk-cards--rows .pk-badge {
	flex: 0 0 60px;
	display: inline-flex;
	align-items: flex-start;
	justify-content: flex-start;
	width: 60px;
	height: auto;
	/* No background here: the cream circle is drawn on the svg below. A second
	   background on this box painted a cream block that ran into the copy. */
	background: none;
	border-radius: 0;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.pk-cards--rows .pk-badge { grid-row: 1 / span 2; grid-column: 1; }
.pk-cards--rows .pk-card__title { grid-column: 2; }
.pk-cards--rows .pk-card__text  { grid-column: 2; }

.pk-cards--rows .pk-badge svg {
	width: 34px; height: 34px;
	padding: 13px;
	box-sizing: content-box;
	border-radius: 50%;
	background: #FAF4EC;
}

.pk-cards--rows .pk-card__title {
	font-size: 22px;
	font-weight: 600;
	color: var(--wp--preset--color--secondary);
	margin: 0 0 .5rem;
}

.pk-cards--rows .pk-card__text { margin: 0; }

@media (max-width: 600px) {
	.pk-cards--rows .pk-card { flex-direction: column; gap: 1rem; }
}

/* ---------- Εταιρεία: founder attribution and badge titles --------------
   live: name 16px bold, role beneath in #717376; badge titles 22px       */

/* The guarantee badge floating over the photo: small, tucked into the photo's
   top-left corner instead of centred across it. Home keeps the centred float. */
body.pk-banner-about-us .pk-layers__float {
	place-items: start;
	padding: clamp(.75rem, 2vw, 1.25rem);
	z-index: 1;
}

body.pk-banner-about-us .pk-layers__float img {
	width: clamp(80px, 12vw, 110px);
	height: auto;
}

.pk-founder { margin: 1rem 0 0; font-size: 16px; }
.pk-founder strong { display: block; color: var(--wp--preset--color--secondary); font-weight: 600; }
.pk-founder__role { display: block; color: #717376; font-weight: 400; }

.pk-cards--badges .pk-card__title { font-size: 22px; }

/* THC-P intro headings carry live's own sizes (live uses h3 36px / h6 24px;
   we keep a valid h2 -> h3 ladder and match the sizes here) */
.pk-h36 { font-size: 36px !important; }
.pk-h24 { font-size: 24px !important; }

/* ---------- Page-title banner -------------------------------------------
   Live puts a 400px full-bleed banner above the content on every inner
   page: background photo, centred white 52px title, white breadcrumbs.    */

.pk-banner {
	min-height: 400px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	position: relative;
	background: #161C27 center / cover no-repeat;
	text-align: center;
}

.pk-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(22, 28, 39, 0.35);   /* keeps white text legible over any photo */
}

.pk-banner > * { position: relative; z-index: 1; }

.pk-banner__title {
	margin: 0;
	color: #fff !important;
}

.pk-crumbs { font-size: 16px; color: #fff; }
.pk-crumbs a { color: #fff; text-decoration: none; }
.pk-crumbs a:hover { text-decoration: underline; }
.pk-crumbs__sep { margin: 0 .5rem; opacity: .7; }
.pk-crumbs__current { opacity: .85; }

/* per-page banner photo, matching what live serves */
body.pk-banner-about-us .pk-banner,
body.pk-banner-thc-p   .pk-banner { background-image: url("/wp-content/uploads/2022/09/pt-about.jpg"); }
body.pk-banner-contacts .pk-banner { background-image: url("/wp-content/uploads/2022/09/pt-contacts.jpg"); }
body.pk-banner-shop .pk-banner,
body.woocommerce-shop .pk-banner  { background-image: url("/wp-content/uploads/2022/09/pt-shop.jpg"); }

@media (max-width: 781px) {
	.pk-banner { min-height: 260px; }
}

/* Επικοινωνία: live's form-card title is 30px, detail labels 22px */
.pk-h30 { font-size: 30px !important; }
.pk-contact-item h3 { font-size: 22px; }

/* ---------- Επικοινωνία ---------------------------------------------------
   A tinted band holding the details and the form card, then the map on white.
   Both bands own their vertical space; the page wrapper adds none.          */

body.pk-banner-contacts .pk-section--tight {
	padding-block: clamp(3rem, 6vw, 5rem);
	/* the tinted band runs edge to edge; its content stays off the edges */
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* the details column and the form card need real separation */
body.pk-banner-contacts .pk-section--tight > .wp-block-columns {
	gap: clamp(2rem, 5vw, 4.5rem);
	margin-bottom: 0;
}

body.pk-banner-contacts .pk-formcard {
	padding: 34px 38px;
}

body.pk-banner-contacts .wpcf7 label { margin-bottom: .875rem; }

body.pk-banner-contacts .wpcf7 :is(input[type="text"], input[type="email"], select) {
	padding: .7rem 1.25rem;
}

/* CF7 prints rows="10"; that made the card far taller than the details column */
body.pk-banner-contacts .wpcf7 textarea { min-height: 6.5rem; height: 9rem; resize: vertical; }

body.pk-banner-contacts .pk-contact-grid { gap: 1.25rem; }

/* 450px map, inside the content width like the form card and styled the same */
body.pk-banner-contacts .pk-map {
	aspect-ratio: auto;
	height: 450px;
	min-height: 0;
	border: 0;
	border-radius: var(--pk-radius);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--card);
}

/* ---------- Header and footer, measured against live ---------------------
   live: header 100px with a 70px logo; footer 475px in two bands —
   main #181B21 (62px / 85px padding) then a legal bar #272A32 (21 / 19).  */

.site-header { padding-block: 15px; }   /* 70px logo + 30px = live's 100px header */
.site-header .wp-block-site-logo img { height: 70px; width: auto; max-width: none; }

.site-footer { padding: 0 !important; background: none; }

.site-footer__main {
	background: #181B21;
	/* live's footer band is 405px; our columns run a little shorter, so the
	   padding carries the difference */
	padding-top: 106px;
	padding-bottom: 129px;
}

.site-footer__legal {
	background: #272A32;
	padding-top: 24px;
	padding-bottom: 22px;
}

.site-footer__legal-inner {
	max-width: 1200px;
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem 1.5rem;
}

.site-footer__legal-inner p { margin: 0; }

@media (max-width: 781px) {
	.site-footer__main { padding-top: 48px; padding-bottom: 56px; }
	.site-footer__legal-inner { justify-content: center; text-align: center; }
}

/* ==========================================================================
   Mobile
   Everything below is inside a media query: desktop is untouched.
   ========================================================================== */

@media (max-width: 781px) {

	/* Side gutter. WordPress renders the root padding at spacing--30, which
	   comes out at 0.67rem (~11px), so text ran almost to the screen edge.
	   Alignfull bands use the same variables, so they still bleed correctly. */
	body {
		--wp--style--root--padding-left: 1.25rem;
		--wp--style--root--padding-right: 1.25rem;
	}

	/* Header: a 70px logo made a 100px sticky bar, a sixth of a phone screen */
	.site-header { padding-block: 10px; }
	.site-header .wp-block-site-logo img { height: 48px; }

	/* Nothing may push the page sideways. clip, not hidden: hidden would make
	   body a scroll container and break the sticky header. */
	body { overflow-x: clip; }

	/* Open menu. Core right-justifies the items to match the desktop bar, and
	   they ran off the right edge with the close button flush against it.
	   A full-width, left-aligned list with dividers cannot overflow. */
	.wp-block-navigation__responsive-container.is-menu-open {
		padding: 1rem 1.5rem 2rem !important;
		width: 100%;
		max-width: 100vw;
		box-sizing: border-box;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: stretch !important;
		padding-top: 3.5rem !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: stretch !important;
		width: 100%;
		gap: 0 !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 1rem 0 !important;
		border-bottom: 0;
		font-size: 1.25rem;
		text-align: left;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		top: 0;
		right: 0;
	}

	/* Fixed desktop heading sizes scaled down */
	.pk-h36 { font-size: 28px !important; }
	.pk-h30 { font-size: 24px !important; }
	.pk-h24 { font-size: 20px !important; }
	.pk-section .wp-block-columns .pk-card__title,
	.pk-cards--rows .pk-card__title,
	.pk-contact-item h3 { font-size: 19px; }

	/* Banner */
	.pk-banner { min-height: 220px; padding-block: 2.5rem; }
	.pk-crumbs { font-size: 14px; }

	/* Home: stacked columns need space between them, but not WordPress's extra
	   1.75em under every columns block on top of the section padding */
	.pk-section .wp-block-columns { gap: 2.5rem; margin-bottom: 0; }

	/* Home feature cards. On desktop the left column mirrors toward the centre
	   image (right-aligned, 14% inset). The old mobile reset lost on
	   specificity to those :first-child rules, so on phones the cards stayed
	   right-aligned and squeezed. Match the specificity to win. */
	.pk-section .wp-block-columns > .wp-block-column:first-child .pk-cards,
	.pk-section .wp-block-columns > .wp-block-column:last-child .pk-cards {
		text-align: left;
		padding: 0;
	}

	/* The image-layers block reserved 320px even when the image is shorter,
	   leaving empty bands around it */
	.pk-layers { min-height: 0; }

	/* Home counters: two by two, and the number sits above its label instead
	   of behind it. The desktop ghost numeral collides with the text at this
	   width. */
	.pk-counters-section .pk-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
	.pk-counters-section .pk-counters > div { min-height: 0; gap: .35rem; align-content: start; }
	.pk-counters-section .pk-counter__value {
		position: static;
		inset: auto;
		font-size: 3rem;
	}
	.pk-counters-section .pk-counter__label { font-size: 12px; text-align: center; }

	/* Εταιρεία quote: desktop type size and padding made a tall, cramped box */
	.pk-quote { padding: 2rem 1.5rem; margin-inline: 0; }
	.pk-quote__text { font-size: 1.125rem; line-height: 1.6; margin-bottom: 1.25rem; }
	.pk-quote__who { font-size: .875rem; }

	/* Home "Οι κατηγορίες μας" rows: smaller circle, more room for the copy */
	.pk-cards--rows .pk-card { grid-template-columns: 48px 1fr; column-gap: 16px; }
	.pk-cards--rows .pk-badge { width: 48px; flex-basis: 48px; }
	.pk-cards--rows .pk-badge svg { width: 24px; height: 24px; padding: 12px; }

	/* Εταιρεία "6 λόγοι": two across, not six stacked 96px badges */
	.pk-cards--3.pk-cards--badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1rem; }
	.pk-cards--badges .pk-badge { width: 72px; height: 72px; margin-bottom: 1rem; }
	.pk-cards--badges .pk-badge svg { width: 28px; height: 28px; }
	.pk-cards--badges .pk-card__title { font-size: 16px; }

	/* THC-P accordion: desktop side padding squeezed the text */
	.pk-accordion summary { padding: 16px 48px 16px 18px; font-size: 1rem; }
	.pk-accordion summary::after { right: 20px; }
	.pk-accordion__body { padding: 1.25rem 18px 1.5rem; }

	/* Επικοινωνία */
	body.pk-banner-contacts .pk-formcard { padding: 26px 20px; }
	body.pk-banner-contacts .pk-map { height: 320px; }
	.pk-contact-item__icon { width: 50px; height: 50px; }
	.pk-contact-item p { overflow-wrap: anywhere; }   /* the long email address */

	/* Shop: category groups become wrapping chips, so the products are not
	   pushed below a 13-row list */
	.pk-shop__cats li.wc-block-product-categories-list-item > ul {
		display: flex;
		flex-wrap: wrap;
		gap: .6rem;
		padding-left: 0;
		margin-top: .9rem;
	}

	/* each group (BRAND / TYPE / ΚΑΤΗΓΟΡΙΑ) needs air around it */
	.pk-shop__cats > ul > li.wc-block-product-categories-list-item { padding-block: .25rem 1.25rem; }
	.pk-shop__cats > ul > li.wc-block-product-categories-list-item + li.wc-block-product-categories-list-item {
		margin-top: 0;
		padding-top: 1.5rem;
	}
	.pk-shop__side { margin-bottom: 1rem; }
	.pk-shop__cats li li.wc-block-product-categories-list-item {
		flex: 0 0 auto;
		gap: .4rem;
		padding: .35rem .85rem;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: 999px;
	}
	.pk-shop__cats li li.wc-block-product-categories-list-item > a { flex: 0 0 auto; font-size: .8125rem; }

	/* the current category's chip, filled */
	.pk-shop__cats li li.wc-block-product-categories-list-item:has(> a[aria-current="page"]) {
		margin-left: 0;
		padding: .35rem .85rem;
		border: 1px solid var(--wp--preset--color--primary);
		background: var(--wp--preset--color--primary);
	}
	.pk-shop__cats li li:has(> a[aria-current="page"]) > a,
	.pk-shop__cats li li:has(> a[aria-current="page"]) > .wc-block-product-categories-list-item-count {
		color: #fff;
	}
	.pk-shop__bar { margin-bottom: 1.75rem; }

	/* Single product: summary sits under the gallery */
	.woocommerce div.product .summary { margin-top: 1.5rem; }

	/* Footer: stacked columns were 1rem apart */
	.site-footer__main .wp-block-columns { gap: 2.5rem !important; }

	/* Footer text sat on the screen edge. The footer's own padding is zeroed
	   (.site-footer { padding: 0 !important }), yet WordPress still pulls its
	   full-width bands outward by the side padding, so the bands' inner padding
	   only brought the text back to the edge. Cancel the pull. */
	.site-footer > .alignfull { margin-left: 0 !important; margin-right: 0 !important; }
	.site-footer__legal-inner {
		padding-left: var(--wp--style--root--padding-left);
		padding-right: var(--wp--style--root--padding-right);
	}

	/* the block gap between the two footer bands showed as a white strip */
	.site-footer__legal { margin-top: 0 !important; }
}

@media (max-width: 600px) {
	/* Shop tiles at two across */
	.pk-shop .wc-block-product-template { gap: 2rem 1rem; }
	.pk-shop li.wc-block-product .wp-block-post-title { font-size: 15px !important; }
	.pk-shop li.wc-block-product .wc-block-components-product-button .wp-block-button__link {
		padding: 8px 16px;
		font-size: .8125rem;
	}
	.pk-shop .wp-block-query-pagination { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 991px){
	.wp-block-button.call-head-btn {
    display: none;
}
}