/* ==========================================================================
   Kapow Comics — layout
   Structure only. Every colour is a --kp-* token owned by the Kapow Theme
   Switcher plugin, so the same layout renders both approved looks.

   The block below is a FALLBACK, and applies only when no data-kapow-theme
   attribute is present — that is, only when the switcher plugin is not running.
   The site then degrades to the light look rather than to unstyled. Scoping it
   this way means the palette cannot be affected by stylesheet load order.
   Do not treat it as the palette — edit that in
   kapow-theme-switcher/assets/css/kapow-themes.css.
   ========================================================================== */

:root:not([data-kapow-theme]) {
	--kp-page: #fffdf7;
	--kp-surface: #ffffff;
	--kp-surface-2: #f6f2e6;
	--kp-surface-3: #efe9d8;
	--kp-border: #e6e1d3;
	--kp-text: #2c2d33;
	--kp-muted: #6f6e73;
	--kp-header-bg: #2c2d33;
	--kp-header-text: #ffffff;
	--kp-header-muted: #b9bdc4;
	--kp-nav-bg: #3a3b42;
	--kp-nav-text: #ffffff;
	--kp-usp-bg: #f5c400;
	--kp-usp-text: #2c2d33;
	--kp-accent: #f5c400;
	--kp-accent-hover: #dcb000;
	--kp-accent-text: #2c2d33;
	--kp-accent-2: #d6302b;
	--kp-accent-2-hover: #b62622;
	--kp-accent-2-text: #ffffff;
	--kp-link: #2f6fd6;
	--kp-link-hover: #1f57b0;
	--kp-price: #2c2d33;
	--kp-save: #d6302b;
	--kp-instock: #1a7a42;
	--kp-hero-bg: #2f6fd6;
	--kp-hero-text: #ffffff;
	--kp-footer-bg: #2c2d33;
	--kp-footer-text: #cfd0d6;
	--kp-footer-head: #f5c400;
	--kp-input-bg: #ffffff;
	--kp-input-border: #d9d4c6;
	--kp-input-text: #2c2d33;
	--kp-shadow: 0 1px 2px rgba(44, 45, 51, 0.08);
	--kp-radius: 4px;
	--kp-font-head: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
	--kp-head-transform: none;
	--kp-head-weight: 700;
	--kp-head-spacing: -0.01em;
}

/* Layout scale, independent of palette — always applies. */
:root {
	--kp-container: 1200px;
	--kp-gutter: 20px;
	--kp-section-gap: 56px;
	--kp-card-gap: 20px;
}

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */

.col-full {
	max-width: var(--kp-container);
	padding-inline: var(--kp-gutter);
	box-sizing: border-box;
}

.kapow-section {
	margin-block-end: var(--kp-section-gap);
}

.kapow-section:last-child {
	margin-block-end: 0;
}

/* Storefront pads the homepage container; the design sets its own rhythm. */
.kapow-home .site-main {
	padding-block-start: 32px;
}

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */

.kapow-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	margin-block-end: 16px;
}

.kapow-section-title {
	margin: 0;
	font-family: var(--kp-font-head);
	font-weight: var(--kp-head-weight);
	text-transform: var(--kp-head-transform);
	letter-spacing: var(--kp-head-spacing);
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--kp-text);
}

.kapow-section-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--kp-link);
	text-decoration: none;
}

.kapow-section-link:hover,
.kapow-section-link:focus {
	color: var(--kp-link-hover);
	text-decoration: underline;
}

.kapow-kicker {
	margin: 0 0 6px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kp-accent);
}

/* --------------------------------------------------------------------------
   USP strip
   -------------------------------------------------------------------------- */

.kapow-usp {
	background: var(--kp-usp-bg);
	color: var(--kp-usp-text);
}

.kapow-usp-inner {
	max-width: var(--kp-container);
	margin-inline: auto;
	padding: 8px var(--kp-gutter);
	box-sizing: border-box;
	display: grid;
	/* Columns follow the number of items, not a fixed four: the fourth slot is
	   empty until there is something true to put in it, and a hard-coded
	   repeat(4, 1fr) would leave a gap where it used to be. */
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 8px 20px;
}

.kapow-usp-item {
	display: flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
	min-width: 0;
}

.kapow-usp-item .kapow-icon {
	flex: 0 0 auto;
}

.kapow-usp-text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
}

.kapow-usp-text strong {
	font-size: 0.78rem;
	font-weight: 700;
}

.kapow-usp-text span {
	font-size: 0.72rem;
	opacity: 0.8;
}

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

.site-header {
	background-color: var(--kp-header-bg);
	color: var(--kp-header-text);
	padding-block: 0;
	border-block-end: 0;
}

.kapow-header-row {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-block: 8px;
}

.kapow-header-brand .custom-logo-link,
.kapow-header-brand .site-logo-anchor {
	display: block;
	margin: 0;
	line-height: 0;
}

/* The focus ring shows for keyboard users, not after a mouse click on the logo. */
html[data-kapow-theme] .kapow-header-brand .custom-logo-link:focus:not(:focus-visible) {
	outline: none;
}

.kapow-header-brand {
	flex: 0 0 auto;
}

.kapow-header-brand .site-logo-anchor img,
.kapow-header-brand .custom-logo-link img {
	/* Storefront ships `.custom-logo-link img { width:100%; max-width:210px }`,
	   which caps the logo by width. The file is 4:3, so that cap alone pins it to
	   about 157px tall however large max-height is set. Both have to be released
	   for height to drive the size. */
	max-height: 248px;
	max-width: none;
	width: auto;
}

.kapow-header-brand .site-title a,
.kapow-header-brand .site-description {
	color: var(--kp-header-text);
}

.kapow-header-search {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 620px;
}

.kapow-header-search .site-search,
.kapow-header-search .widget {
	margin: 0;
	padding: 0;
	border: 0;
}

.kapow-header-search form {
	position: relative;
	margin: 0;
}

.kapow-header-search .search-field {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px 11px 40px;
	border: 1px solid var(--kp-input-border);
	border-radius: var(--kp-radius);
	background-color: var(--kp-input-bg);
	color: var(--kp-input-text);
	font-size: 0.9rem;
}

/* Magnifier drawn with a mask so it takes its colour from the palette. */
.kapow-header-search form::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 13px;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	background-color: var(--kp-muted);
	-webkit-mask: var(--kp-search-icon) center / contain no-repeat;
	mask: var(--kp-search-icon) center / contain no-repeat;
	pointer-events: none;
}

:root {
	--kp-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
}

.kapow-header-search .search-submit,
.kapow-header-search [type="submit"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.kapow-header-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 22px;
}

.kapow-account,
.kapow-basket {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--kp-header-text);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1;
}

/* Storefront sizes its own cart link with `.site-header-cart .cart-contents`,
   two classes against the one above, so it wins: display:block plus 1.618em of
   vertical padding, which stacks the icon, the label and the count instead of
   sitting them in a row. Re-assert the row at matching weight. */
.site-header-cart .cart-contents.kapow-basket {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0;
}

/* The light/dark switch in the header, beside Account and Basket: an outlined pill in the
   header's own colours, so it reads as part of the header in both looks. */
.kapow-header-actions .kapow-toggle--header,
html[data-kapow-theme] .kapow-header-actions .kapow-toggle--header {
	min-height: 36px;
	padding: 0 12px;
	gap: 6px;
	border: 1px solid currentColor;
	background: transparent;
	color: var(--kp-header-text);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1;
	box-shadow: none;
}

.kapow-header-actions .kapow-toggle--header:hover,
html[data-kapow-theme] .kapow-header-actions .kapow-toggle--header:hover {
	border-color: var(--kp-accent);
	background: transparent;
	color: var(--kp-accent);
}

@media (max-width: 560px) {
	/* Phones: the icon alone, so Account and Basket keep their room. */
	.kapow-header-actions .kapow-toggle--header .kapow-toggle__text {
		display: none;
	}

	.kapow-header-actions .kapow-toggle--header {
		padding: 0 9px;
	}
}

.kapow-account:hover,
.kapow-basket:hover,
.kapow-account:focus,
.kapow-basket:focus {
	color: var(--kp-accent);
}

.kapow-basket-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding-inline: 5px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--kp-accent);
	color: var(--kp-accent-text);
	font-size: 0.72rem;
	font-weight: 700;
}

/* Storefront's icons.css hangs a Font Awesome basket glyph off
   .cart-contents::after and floats it right. That puts a second, different
   basket beside the one the design asks for, and the float breaks the flex row
   onto two lines -- which is what made the header look broken. The icon this
   design wants is drawn inline in storefront_cart_link(). */
.site-header-cart .cart-contents.kapow-basket::after,
.kapow-basket::after {
	content: none;
}

/* ...and Storefront fades any `.count` inside the cart link to opacity .5,
   three classes deep. That washes the badge out to a grey blob on the dark
   header and leaves the number barely readable. The badge carries its own
   contrast in both looks; it does not need dimming. */
.site-header-cart .cart-contents .kapow-basket-count {
	opacity: 1;
	font-size: 0.72rem;
	font-weight: 700;
}

.kapow-basket-count.is-empty {
	background: var(--kp-surface-3);
	color: var(--kp-text);
}

/* Storefront renders the mini-cart dropdown as a sibling list item. */
.site-header-cart {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}

.site-header-cart .widget_shopping_cart {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: 100%;
	z-index: 20;
	min-width: 280px;
}

/* --------------------------------------------------------------------------
   Primary navigation bar
   -------------------------------------------------------------------------- */

.storefront-primary-navigation {
	background-color: var(--kp-nav-bg);
}

.storefront-primary-navigation .col-full {
	padding-inline: var(--kp-gutter);
}

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
	color: var(--kp-nav-text);
	font-size: 0.85rem;
	font-weight: 600;
	padding-block: 14px;
}

.main-navigation ul.menu > li > a:hover,
.main-navigation ul.nav-menu > li > a:hover {
	color: var(--kp-accent);
}

/* The departments sit in a thin box of their own, apart from the site links above. Storefront
   sizes the bar for a cart beside it (.woocommerce-active .site-header .main-navigation:
   73.9%, floated), hence the long selector. */
@media (min-width: 768px) {
	.woocommerce-active .site-header .storefront-primary-navigation .main-navigation,
	.site-header .storefront-primary-navigation .main-navigation {
		float: none;
		width: 100%;
		margin-inline-end: 0;
		box-sizing: border-box;
		border: 1px solid var(--kp-border);
		border-radius: var(--kp-radius);
		padding-inline: 14px;
		margin-block: 4px 12px;
	}
}

/* The site's own pages: a slim row under search and account. */
.kapow-header-links {
	display: flex;
	justify-content: flex-end;
	padding-block: 0 6px;
}

.kapow-header-links-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kapow-header-links-list a {
	color: var(--kp-header-muted, var(--kp-header-text));
	font-size: 0.85rem;
	text-decoration: none;
}

.kapow-header-links-list a:hover,
.kapow-header-links-list .current-menu-item > a {
	color: var(--kp-accent);
}

@media (max-width: 767px) {
	.kapow-header-links {
		justify-content: flex-start;
	}
}

@media (min-width: 768px) {
	.main-navigation ul.menu,
	.main-navigation ul.nav-menu {
		display: flex;
		justify-content: space-between;
		gap: 4px;
		width: 100%;
	}

	.main-navigation ul.menu > li,
	.main-navigation ul.nav-menu > li {
		float: none;
	}
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.kapow-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	border-radius: var(--kp-radius);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
}

.kapow-btn--primary {
	background: var(--kp-accent);
	color: var(--kp-accent-text);
}

.kapow-btn--primary:hover,
.kapow-btn--primary:focus {
	background: var(--kp-accent-hover);
	color: var(--kp-accent-text);
}

.kapow-btn--ghost {
	background: transparent;
	color: var(--kp-hero-text);
	border-color: currentColor;
}

.kapow-btn--ghost:hover,
.kapow-btn--ghost:focus {
	background: var(--kp-hero-text);
	color: var(--kp-hero-bg);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.kapow-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	padding: 44px;
	border-radius: var(--kp-radius);
	background: var(--kp-hero-bg);
	color: var(--kp-hero-text);
}

.kapow-hero .kapow-kicker {
	color: var(--kp-accent);
}

.kapow-hero-heading {
	margin: 0 0 14px;
	font-family: var(--kp-font-head);
	font-weight: var(--kp-head-weight);
	text-transform: var(--kp-head-transform);
	letter-spacing: var(--kp-head-spacing);
	font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem);
	line-height: 1.08;
	color: inherit;
}

.kapow-hero-copy {
	margin: 0 0 22px;
	max-width: 46ch;
	font-size: 0.95rem;
	line-height: 1.55;
	opacity: 0.94;
}

.kapow-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.kapow-hero-media {
	border-radius: var(--kp-radius);
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.kapow-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


/* --------------------------------------------------------------------------
   Category tiles
   -------------------------------------------------------------------------- */

.kapow-tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--kp-card-gap);
}

.kapow-tile a {
	display: block;
	height: 100%;
	box-sizing: border-box;
	padding: 10px 10px 14px;
	border: 1px solid var(--kp-border);
	border-radius: var(--kp-radius);
	background: var(--kp-surface);
	text-decoration: none;
	color: var(--kp-text);
	box-shadow: var(--kp-shadow);
}

.kapow-tile a:hover,
.kapow-tile a:focus {
	border-color: var(--kp-accent);
}

.kapow-tile-media {
	display: block;
	aspect-ratio: 4 / 3;
	margin-block-end: 10px;
	border-radius: var(--kp-radius);
	background: var(--kp-surface-3);
	overflow: hidden;
}

.kapow-tile-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kapow-tile-name {
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.25;
}

.kapow-tile-count {
	display: block;
	margin-block-start: 2px;
	font-size: 0.72rem;
	color: var(--kp-muted);
}

/* --------------------------------------------------------------------------
   Product grid and cards
   -------------------------------------------------------------------------- */

.kapow-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--kp-card-gap);
}

.kapow-grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

/* WooCommerce archives reuse the same card inside ul.products. */
ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--kp-card-gap);
}

ul.products::before,
ul.products::after {
	content: none;
}

ul.products li.product,
.kapow-card {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
	display: flex;
	flex-direction: column;
	background: var(--kp-surface);
	border: 1px solid var(--kp-border);
	border-radius: var(--kp-radius);
	overflow: hidden;
	box-shadow: var(--kp-shadow);
}

.kapow-card-media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--kp-surface-3);
}

.kapow-card-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	margin: 0;
}

.kapow-flash {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 2;
	padding: 4px 9px;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	background: var(--kp-accent-2);
	color: var(--kp-accent-2-text);
}

.kapow-flash--sale {
	background: var(--kp-accent);
	color: var(--kp-accent-text);
}

.kapow-card-body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1 1 auto;
	padding: 12px 14px 16px;
}

.kapow-card-brand {
	margin: 0;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--kp-muted);
}

.kapow-card-title {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.3;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	font-family: inherit;
}

.kapow-card-title a {
	color: var(--kp-text);
	text-decoration: none;
}

.kapow-card-title a:hover,
.kapow-card-title a:focus {
	color: var(--kp-link);
}

.kapow-card-status {
	margin: 0;
	font-size: 0.75rem;
	color: var(--kp-muted);
}

.kapow-card-status--instock {
	color: var(--kp-instock);
}

.kapow-card-status--lowstock,
.kapow-card-status--outofstock {
	color: var(--kp-save);
}

.kapow-price-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 2px 0 0;
}

.kapow-price {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--kp-price);
}

.kapow-rrp {
	font-size: 0.72rem;
	color: var(--kp-muted);
}

.kapow-save {
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--kp-save);
}

.kapow-card-cta {
	margin-block-start: auto;
	padding-block-start: 12px;
}

.kapow-card-cta .button,
.kapow-card-cta .added_to_cart {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 11px 12px;
	border-radius: var(--kp-radius);
	font-size: 0.85rem;
	font-weight: 700;
	background: var(--kp-accent);
	color: var(--kp-accent-text);
}

.kapow-card-cta .button:hover,
.kapow-card-cta .button:focus {
	background: var(--kp-accent-hover);
	color: var(--kp-accent-text);
}

.kapow-card--preorder .kapow-card-cta .button {
	background: var(--kp-accent-2);
	color: var(--kp-accent-2-text);
}

.kapow-card--preorder .kapow-card-cta .button:hover,
.kapow-card--preorder .kapow-card-cta .button:focus {
	background: var(--kp-accent-2-hover);
	color: var(--kp-accent-2-text);
}

.kapow-card-cta .added_to_cart {
	margin-block-start: 8px;
	background: transparent;
	color: var(--kp-link);
	text-decoration: underline;
}

.kapow-preorder-notice {
	display: inline-block;
	margin: 0 0 10px;
	padding: 5px 10px;
	border-radius: var(--kp-radius);
	background: var(--kp-accent-2);
	color: var(--kp-accent-2-text);
	font-size: 0.78rem;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Promo pair
   -------------------------------------------------------------------------- */

.kapow-promos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--kp-card-gap);
}

.kapow-promo {
	padding: 28px;
	border-radius: var(--kp-radius);
	background: var(--kp-surface-2);
	color: var(--kp-text);
}

.kapow-promo--a .kapow-kicker {
	color: var(--kp-muted);
}

.kapow-promo--b {
	background: var(--kp-accent-2);
	color: var(--kp-accent-2-text);
}

.kapow-promo--b .kapow-kicker {
	color: var(--kp-accent);
}

.kapow-promo-head {
	margin: 0 0 10px;
	font-family: var(--kp-font-head);
	font-weight: var(--kp-head-weight);
	text-transform: var(--kp-head-transform);
	letter-spacing: var(--kp-head-spacing);
	font-size: 1.35rem;
	line-height: 1.15;
	color: inherit;
}

.kapow-promo-text {
	margin: 0 0 14px;
	font-size: 0.88rem;
	line-height: 1.55;
	max-width: 52ch;
}

.kapow-promo-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--kp-link);
}

.kapow-promo--b .kapow-promo-link {
	color: var(--kp-accent);
}

.kapow-promo-link:hover,
.kapow-promo-link:focus {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Brand chips
   -------------------------------------------------------------------------- */

.kapow-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 10px;
}

.kapow-chips a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 44px;
	padding: 8px 6px;
	box-sizing: border-box;
	border: 1px solid var(--kp-border);
	border-radius: var(--kp-radius);
	background: var(--kp-surface);
	color: var(--kp-text);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
}

.kapow-chips a:hover,
.kapow-chips a:focus {
	border-color: var(--kp-accent);
	color: var(--kp-link);
}

/* --------------------------------------------------------------------------
   Visit the shop + social wall
   -------------------------------------------------------------------------- */

.kapow-visit {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 28px;
	align-items: start;
}

.kapow-visit-card {
	padding: 20px;
	border: 1px solid var(--kp-border);
	border-radius: var(--kp-radius);
	background: var(--kp-surface);
	box-shadow: var(--kp-shadow);
}

.kapow-visit-card .kapow-section-title {
	margin-block-end: 14px;
	font-size: 1.25rem;
}

.kapow-visit-media {
	aspect-ratio: 4 / 3;
	margin-block-end: 14px;
	border-radius: var(--kp-radius);
	background: var(--kp-surface-3);
	overflow: hidden;
}

.kapow-visit-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kapow-visit-details {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.kapow-visit-details li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 0.85rem;
	line-height: 1.4;
}

.kapow-visit-details .kapow-icon {
	flex: 0 0 auto;
	margin-block-start: 1px;
	color: var(--kp-muted);
}

.kapow-visit-details a {
	color: var(--kp-link);
}

/* --------------------------------------------------------------------------
   Newsletter
   -------------------------------------------------------------------------- */

.kapow-newsletter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
	padding: 26px 28px;
	border-radius: var(--kp-radius);
	background: var(--kp-surface-2);
}

.kapow-newsletter-text {
	flex: 1 1 300px;
}

.kapow-newsletter-text .kapow-section-title {
	margin-block-end: 6px;
	font-size: 1.25rem;
}

.kapow-newsletter-text p {
	margin: 0;
	font-size: 0.85rem;
	color: var(--kp-muted);
}

.kapow-newsletter-form {
	flex: 1 1 340px;
	max-width: 480px;
}

.kapow-newsletter-form form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.kapow-newsletter-form input[type="email"],
.kapow-newsletter-form input[type="text"] {
	flex: 1 1 200px;
	min-width: 0;
	box-sizing: border-box;
	padding: 11px 14px;
	border: 1px solid var(--kp-input-border);
	border-radius: var(--kp-radius);
	background: var(--kp-input-bg);
	color: var(--kp-input-text);
	font-size: 0.88rem;
}

.kapow-newsletter-form button,
.kapow-newsletter-form input[type="submit"] {
	flex: 0 0 auto;
	padding: 11px 22px;
	border: 0;
	border-radius: var(--kp-radius);
	background: var(--kp-accent-2);
	color: var(--kp-accent-2-text);
	font-size: 0.88rem;
	font-weight: 700;
	cursor: pointer;
}

.kapow-newsletter-form button:hover,
.kapow-newsletter-form input[type="submit"]:hover {
	background: var(--kp-accent-2-hover);
}

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

.site-footer {
	background-color: var(--kp-footer-bg);
	color: var(--kp-footer-text);
	padding-block: 44px 24px;
}

.kapow-footer-columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.kapow-footer-title {
	margin: 0 0 12px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--kp-footer-head);
}

.kapow-footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.kapow-footer-menu a,
.kapow-footer-col a {
	color: var(--kp-footer-text);
	font-size: 0.84rem;
	text-decoration: none;
}

.kapow-footer-menu a:hover,
.kapow-footer-col a:hover,
.kapow-footer-menu a:focus,
.kapow-footer-col a:focus {
	color: var(--kp-accent);
	text-decoration: underline;
}

.kapow-footer-line {
	margin: 0 0 10px;
	font-size: 0.84rem;
	line-height: 1.5;
}

.kapow-social {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	gap: 10px;
}

.kapow-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: var(--kp-footer-text);
}

.kapow-social a:hover,
.kapow-social a:focus {
	color: var(--kp-accent);
}

.kapow-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin-block-start: 32px;
	padding-block-start: 20px;
	border-block-start: 1px solid rgba(255, 255, 255, 0.14);
}

.kapow-copyright {
	margin: 0;
	font-size: 0.78rem;
	color: var(--kp-footer-text);
}

.kapow-credit {
	margin: 0;
	font-size: 0.8rem;
}

.kapow-credit a {
	color: inherit;
}

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

.kapow-payments li {
	padding: 4px 9px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 3px;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--kp-footer-text);
}

/* --------------------------------------------------------------------------
   Shop archives
   -------------------------------------------------------------------------- */

.kapow-no-sidebar .content-area {
	width: 100%;
	float: none;
	margin-inline-end: 0;
}

.kapow-no-sidebar .widget-area {
	display: none;
}

/*
 * One slim row: each widget is its label and control side by side, and the
 * stock switch sits at the far end. Wraps to one control per line on phones.
 */
.kapow-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 28px;
	margin-block-end: 20px;
	padding: 8px 14px;
	border: 1px solid var(--kp-border);
	border-radius: var(--kp-radius);
	background: var(--kp-surface-2);
}

.kapow-filter-bar .widget,
html[data-kapow-theme] .kapow-filter-bar .widget {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 1 auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.kapow-filter-bar .widget-title {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 0.72rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--kp-muted);
}

.kapow-filter-bar .widget_product_categories select,
.kapow-filter-bar .widget_product_categories .select2-container {
	width: 240px !important; /* selectWoo writes an inline width */
	max-width: 100%;
}

.kapow-filter-bar .widget_price_filter form,
.kapow-filter-bar .price_slider_wrapper {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
}

/* Flatten the amount box so its label and button can sit either side of the slider. */
.kapow-filter-bar .price_slider_amount {
	display: contents;
}

.kapow-filter-bar .price_slider_amount .price_label {
	order: 1;
	font-size: 0.85rem;
	white-space: nowrap;
}

.kapow-filter-bar .widget_price_filter .price_slider {
	order: 2;
	flex: 0 0 160px;
	margin: 0 6px;
}

.kapow-filter-bar .price_slider_amount .button {
	order: 3;
	float: none;
	padding: 6px 12px;
	font-size: 0.8rem;
}

.kapow-filter-bar .price_slider_amount .clear {
	display: none;
}

.kapow-stock-toggle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-inline-start: auto;
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	color: var(--kp-text);
}

html[data-kapow-theme] .kapow-stock-toggle {
	color: var(--kp-text);
	text-decoration: none;
}

.kapow-stock-toggle-track {
	position: relative;
	flex: 0 0 34px;
	height: 20px;
	border-radius: 10px;
	background: var(--kp-surface-3, var(--kp-border));
	box-shadow: inset 0 0 0 1px var(--kp-border);
	transition: background-color 0.15s ease;
}

.kapow-stock-toggle-track::after {
	content: "";
	position: absolute;
	inset-block-start: 3px;
	inset-inline-start: 3px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--kp-surface);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
	transition: transform 0.15s ease;
}

.kapow-stock-toggle.is-active .kapow-stock-toggle-track {
	background: var(--kp-accent);
	box-shadow: none;
}

.kapow-stock-toggle.is-active .kapow-stock-toggle-track::after {
	transform: translateX(14px);
}

.kapow-stock-toggle:focus-visible {
	outline: 2px solid var(--kp-accent);
	outline-offset: 3px;
}

.kapow-stock-empty a {
	font-weight: 600;
}

@media (max-width: 600px) {
	.kapow-filter-bar {
		padding: 10px 12px;
	}

	.kapow-filter-bar .widget,
	html[data-kapow-theme] .kapow-filter-bar .widget {
		flex: 1 1 100%;
	}

	.kapow-filter-bar .widget-title {
		flex: 0 0 52px;
	}

	.kapow-filter-bar .widget_product_categories .select2-container,
	.kapow-filter-bar .widget_product_categories select {
		flex: 1 1 auto;
		width: auto !important;
	}

	.kapow-filter-bar .widget_price_filter form,
	.kapow-filter-bar .price_slider_wrapper {
		flex: 1 1 auto;
	}

	.kapow-filter-bar .widget_price_filter .price_slider {
		flex: 1 1 auto;
	}

	.kapow-stock-toggle {
		margin-inline-start: 0;
	}
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.kapow-tiles {
		grid-template-columns: repeat(3, 1fr);
	}

	.kapow-chips {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 980px) {
	.kapow-header-row {
		flex-wrap: wrap;
		gap: 14px 20px;
	}

	.kapow-header-search {
		order: 3;
		flex-basis: 100%;
		max-width: none;
	}

	.kapow-header-actions {
		margin-inline-start: auto;
	}

	.kapow-hero {
		grid-template-columns: 1fr;
		padding: 32px;
	}

	.kapow-hero-media {
		order: -1;
	}

	.kapow-visit {
		grid-template-columns: 1fr;
	}

	.kapow-grid--4,
	ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	:root {
		--kp-section-gap: 40px;
		--kp-card-gap: 14px;
	}

	.kapow-usp-inner {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, 1fr);
	}

	.kapow-promos {
		grid-template-columns: 1fr;
	}

	.kapow-footer-columns {
		grid-template-columns: repeat(2, 1fr);
	}

	.kapow-grid--4,
	ul.products {
		grid-template-columns: repeat(2, 1fr);
	}

	.kapow-tiles {
		grid-template-columns: repeat(2, 1fr);
	}

	.kapow-newsletter {
		padding: 22px;
	}
}

@media (max-width: 560px) {
	.kapow-usp-text span {
		display: none;
	}

	.kapow-chips {
		grid-template-columns: repeat(2, 1fr);
	}

	.kapow-hero {
		padding: 24px 20px;
	}

	.kapow-hero-actions .kapow-btn {
		flex: 1 1 100%;
	}

	.kapow-account span {
		display: none;
	}

	.kapow-footer-columns {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.kapow-section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
}

@media (max-width: 400px) {
	:root {
		--kp-gutter: 16px;
	}
}

/* ==========================================================================
   Specificity guard

   The switcher plugin colours generic elements with an html[data-kapow-theme]
   prefix, e.g. `html[data-kapow-theme] a` and `html[data-kapow-theme] h1..h6`.
   Those outrank a plain component class, so any component that sets its own
   colour on a link or a heading has to be re-asserted here at matching weight.

   Colours are still tokens — this block changes which rule wins, never what the
   colour is. If a component's colour looks wrong in one look but not the other,
   this is the first place to check.
   ========================================================================== */

html[data-kapow-theme] .kapow-hero-heading,
html[data-kapow-theme] .kapow-promo-head,
html[data-kapow-theme] .kapow-promo--b .kapow-section-title {
	color: inherit;
}

html[data-kapow-theme] .kapow-section-title,
html[data-kapow-theme] .kapow-footer-title {
	color: var(--kp-text);
}

html[data-kapow-theme] .kapow-footer-title {
	color: var(--kp-footer-head);
}

html[data-kapow-theme] .kapow-btn--primary {
	color: var(--kp-accent-text);
}

/* The switcher's `a:hover` (link colour, underline) outranks .kapow-btn--primary:hover, which
   turned a button's words the colour of the button itself on hover. */
html[data-kapow-theme] .kapow-btn--primary:hover,
html[data-kapow-theme] .kapow-btn--primary:focus {
	color: var(--kp-accent-text);
	text-decoration: none;
}

html[data-kapow-theme] .kapow-btn--ghost:hover,
html[data-kapow-theme] .kapow-btn--ghost:focus {
	text-decoration: none;
}

html[data-kapow-theme] .kapow-btn--ghost {
	color: var(--kp-hero-text);
}

html[data-kapow-theme] .kapow-btn--ghost:hover,
html[data-kapow-theme] .kapow-btn--ghost:focus {
	color: var(--kp-hero-bg);
}

html[data-kapow-theme] .kapow-section-link,
html[data-kapow-theme] .kapow-promo-link {
	color: var(--kp-link);
}

html[data-kapow-theme] .kapow-promo--b .kapow-promo-link {
	color: var(--kp-accent);
}

html[data-kapow-theme] .kapow-tile a,
html[data-kapow-theme] .kapow-chips a {
	color: var(--kp-text);
}

html[data-kapow-theme] .kapow-usp-item {
	color: var(--kp-usp-text);
}

html[data-kapow-theme] .kapow-account,
html[data-kapow-theme] .kapow-basket,
html[data-kapow-theme] a.cart-contents.kapow-basket {
	color: var(--kp-header-text);
}

html[data-kapow-theme] .kapow-account:hover,
html[data-kapow-theme] .kapow-basket:hover,
html[data-kapow-theme] a.cart-contents.kapow-basket:hover {
	color: var(--kp-accent);
}

html[data-kapow-theme] .kapow-footer-menu a,
html[data-kapow-theme] .kapow-footer-col a,
html[data-kapow-theme] .kapow-social a {
	color: var(--kp-footer-text);
}

html[data-kapow-theme] .kapow-footer-menu a:hover,
html[data-kapow-theme] .kapow-footer-col a:hover,
html[data-kapow-theme] .kapow-social a:hover {
	color: var(--kp-accent);
}

html[data-kapow-theme] ul.products li.product .kapow-card-title a {
	color: var(--kp-text);
}

html[data-kapow-theme] ul.products li.product .kapow-card-title a:hover,
html[data-kapow-theme] ul.products li.product .kapow-card-title a:focus {
	color: var(--kp-link);
}

/* Prices: the plugin styles every .woocommerce-Price-amount as a headline price,
   which is wrong for the struck RRP and the saving inside a card. */
html[data-kapow-theme] .kapow-card .kapow-price .woocommerce-Price-amount {
	color: var(--kp-price);
	font-weight: 700;
}

html[data-kapow-theme] .kapow-card .kapow-rrp,
html[data-kapow-theme] .kapow-card .kapow-rrp .woocommerce-Price-amount {
	color: var(--kp-muted);
	font-weight: 400;
}

html[data-kapow-theme] .kapow-card .kapow-save,
html[data-kapow-theme] .kapow-card .kapow-save .woocommerce-Price-amount {
	color: var(--kp-save);
	font-weight: 700;
}

html[data-kapow-theme] .kapow-card .kapow-card-cta .button {
	color: var(--kp-accent-text);
}

html[data-kapow-theme] .kapow-card--preorder .kapow-card-cta .button {
	color: var(--kp-accent-2-text);
}

/* ==========================================================================
   Layout guard

   WooCommerce and Storefront lay ul.products out with floats and a clearfix.
   Under display:grid the clearfix pseudo-elements become grid items, which
   pushes every card one cell to the right, so they are removed outright.
   ========================================================================== */

ul.products::before,
ul.products::after,
.site-main ul.products::before,
.site-main ul.products::after {
	display: none !important;
	content: none !important;
}

ul.products li.product.first,
ul.products li.product.last {
	clear: none !important;
}

/* The search field must fill the header row; Storefront's widget wrapper has
   its own width rules. */
.kapow-header-search .site-search,
.kapow-header-search .widget_product_search,
.kapow-header-search form,
.kapow-header-search .woocommerce-product-search {
	width: 100%;
	max-width: none;
	float: none;
}

/* The mini-cart is a sibling list item; keep the trigger and panel on one line. */
.site-header-cart {
	display: flex;
	align-items: center;
}

.site-header-cart > li {
	list-style: none;
	margin: 0;
}

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
	white-space: nowrap;
}

/* The social wall is a third-party component with its own scale; cap the media
   so one post cannot dominate the section the way the feed's own layout does. */
.kapow-social-wall img,
.kapow-social-wall video {
	max-height: 260px;
	width: auto;
	object-fit: cover;
}

.kapow-social-wall {
	--lt-sw-gap: 12px;
}

/* Newsletter form */
.kapow-newsletter-form-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.kapow-newsletter-form-inner input[type="email"] {
	flex: 1 1 200px;
	min-width: 0;
	box-sizing: border-box;
	padding: 11px 14px;
	border: 1px solid var(--kp-input-border);
	border-radius: var(--kp-radius);
	background: var(--kp-input-bg);
	color: var(--kp-input-text);
	font-size: 0.88rem;
}

.kapow-newsletter-form-inner button {
	flex: 0 0 auto;
	padding: 11px 24px;
	border: 0;
	border-radius: var(--kp-radius);
	background: var(--kp-accent-2);
	color: var(--kp-accent-2-text);
	font-size: 0.88rem;
	font-weight: 700;
	cursor: pointer;
}

.kapow-newsletter-form-inner button:hover,
.kapow-newsletter-form-inner button:focus {
	background: var(--kp-accent-2-hover);
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.kapow-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kapow-newsletter-status {
	flex-basis: 100%;
	margin: 10px 0 0;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--kp-instock);
}

.kapow-newsletter-status--invalid,
.kapow-newsletter-status--error {
	color: var(--kp-save);
}

/* Storefront's fixed prev/next product thumbnails are removed in PHP; this
   covers any that a plugin re-adds. */
.storefront-product-pagination {
	display: none !important;
}

/* Shop landing page lists categories rather than products (a merchandising
   setting, not a theme one). Give those cards the same treatment as the
   homepage tiles so the two do not read as different sites. */
ul.products li.product-category {
	display: flex;
	flex-direction: column;
	background: var(--kp-surface);
	border: 1px solid var(--kp-border);
	border-radius: var(--kp-radius);
	box-shadow: var(--kp-shadow);
	overflow: hidden;
}

ul.products li.product-category > a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 10px 10px 14px;
	text-decoration: none;
}

ul.products li.product-category img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin: 0 0 10px;
	border-radius: var(--kp-radius);
	background: var(--kp-surface-3);
}

ul.products li.product-category h2,
ul.products li.product-category .woocommerce-loop-category__title {
	margin: auto 0 0;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	font-family: inherit;
	letter-spacing: 0;
	text-transform: none;
}

ul.products li.product-category .count {
	display: block;
	margin-block-start: 2px;
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--kp-muted);
	background: none;
	padding: 0;
}

/* --------------------------------------------------------------------------
   Cart and checkout tables

   Storefront sizes these columns for its own narrower container. At the
   design's width the product column collapses to one word per line.
   -------------------------------------------------------------------------- */

.woocommerce-checkout-review-order-table,
.woocommerce-cart-form__contents,
.shop_table.cart {
	width: 100%;
	table-layout: auto;
}

.woocommerce-checkout-review-order-table th.product-name,
.woocommerce-checkout-review-order-table td.product-name {
	width: 62%;
	text-align: left;
}

.woocommerce-checkout-review-order-table th.product-total,
.woocommerce-checkout-review-order-table td.product-total {
	width: 38%;
	text-align: right;
	white-space: nowrap;
}

.woocommerce-checkout-review-order-table tfoot th {
	width: 38%;
	text-align: left;
}

.shop_table.cart td.product-name {
	min-width: 220px;
}

.shop_table.cart td.product-thumbnail img {
	max-width: 72px;
	height: auto;
}

/* Quantity steppers are controls, not calls to action. */
.quantity .qty {
	background: var(--kp-input-bg);
	color: var(--kp-input-text);
	border: 1px solid var(--kp-input-border);
	border-radius: var(--kp-radius);
}

/* Hero kicker uses its own token: the brand yellow fails WCAG AA on both hero
   colours at this size. See the note in kapow-themes.css. */
.kapow-hero .kapow-kicker,
html[data-kapow-theme] .kapow-hero .kapow-kicker {
	color: var(--kp-hero-kicker, var(--kp-hero-text));
	opacity: 0.92;
}

/* --------------------------------------------------------------------------
   Focus visibility

   Neither mockup shows a focus state. Keyboard users need one, and the ring is
   drawn from tokens so it stays visible in both looks.
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--kp-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* On the yellow strip and yellow buttons the accent ring would vanish. */
.kapow-usp :where(a):focus-visible,
.kapow-btn--primary:focus-visible,
.kapow-card-cta .button:focus-visible {
	outline-color: var(--kp-text);
}

.site-header :where(a, button, input):focus-visible,
.site-footer :where(a, button):focus-visible,
.main-navigation :where(a, button):focus-visible {
	outline-color: var(--kp-accent);
}

.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;
}

/* The plugin styles every button with the accent; the design's Subscribe button
   is the secondary accent. */
html[data-kapow-theme] .kapow-newsletter-form-inner button,
html[data-kapow-theme] .kapow-newsletter-form button,
html[data-kapow-theme] .kapow-newsletter-form input[type="submit"] {
	background: var(--kp-accent-2);
	color: var(--kp-accent-2-text);
	border-color: var(--kp-accent-2);
}

html[data-kapow-theme] .kapow-newsletter-form-inner button:hover,
html[data-kapow-theme] .kapow-newsletter-form-inner button:focus {
	background: var(--kp-accent-2-hover);
	color: var(--kp-accent-2-text);
}

/* The logo is 4:3, so height drives its footprint. Full size on desktop; scaled
   back on small screens so it does not eat the header. */
@media (max-width: 980px) {
	.kapow-header-brand .site-logo-anchor img,
	.kapow-header-brand .custom-logo-link img {
		max-height: 176px;
	}
}

@media (max-width: 560px) {
	.kapow-header-brand .site-logo-anchor img,
	.kapow-header-brand .custom-logo-link img {
		max-height: 128px;
	}
}

/* --------------------------------------------------------------------------
   Category refinement chips
   -------------------------------------------------------------------------- */

.kapow-facets {
	margin-block-end: 24px;
}

.kapow-facets-title {
	margin: 0 0 10px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--kp-muted);
	font-family: inherit;
}

.kapow-chips--facets {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	grid-template-columns: none;
}

.kapow-chips--facets a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 0;
	padding: 7px 13px;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.8rem;
}

.kapow-chips--facets a.is-active {
	background: var(--kp-accent);
	border-color: var(--kp-accent);
	color: var(--kp-accent-text);
}

html[data-kapow-theme] .kapow-chips--facets a.is-active {
	color: var(--kp-accent-text);
}

.kapow-chip-count {
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--kp-muted);
}

html[data-kapow-theme] .kapow-chips--facets a.is-active .kapow-chip-count {
	color: var(--kp-accent-text);
	opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Subscriptions — homepage hero card and the Subscriptions page

   The hero shows the three steps in a comic-panel card until a hero photo is
   set. The steps, the League of Comic Geeks link and the page copy all come
   from Kapow → Subscriptions (inc/subscriptions.php).
   -------------------------------------------------------------------------- */

.kapow-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* Halftone dots, fading in from the left — print texture, not decoration
   that competes with the copy. */
.kapow-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.2) 1.4px, transparent 1.9px);
	background-size: 14px 14px;
	-webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 90%);
	mask-image: linear-gradient(100deg, transparent 30%, #000 90%);
}

.kapow-btn {
	gap: 8px;
}

.kapow-btn .kapow-icon {
	flex: none;
}

.kapow-hero-note {
	margin: 14px 0 0;
	font-size: 0.8rem;
	opacity: 0.85;
}

.kapow-hero-card {
	justify-self: end;
	width: 100%;
	max-width: 440px;
	box-sizing: border-box;
	padding: 26px 28px 28px;
	border: 3px solid var(--kp-header-bg);
	border-radius: calc(var(--kp-radius) * 2);
	background: var(--kp-surface);
	color: var(--kp-text);
	box-shadow: 8px 8px 0 var(--kp-accent);
	transform: rotate(-1deg);
}

.kapow-hero-card-title {
	margin: 0 0 20px;
	font-family: var(--kp-font-head);
	font-weight: var(--kp-head-weight);
	text-transform: var(--kp-head-transform);
	letter-spacing: var(--kp-head-spacing);
	font-size: 1.35rem;
	line-height: 1.15;
	color: var(--kp-text);
}

/* Numbered steps. Used in the hero card (stacked, joined by a line) and on the
   Subscriptions page (as three cards). */
.kapow-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: kapow-step;
	display: grid;
	gap: 18px;
}

.kapow-step {
	position: relative;
	counter-increment: kapow-step;
	display: grid;
	grid-template-columns: 40px 1fr;
	column-gap: 14px;
	row-gap: 2px;
	margin: 0;
}

.kapow-step::before {
	content: counter(kapow-step);
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--kp-accent);
	color: var(--kp-accent-text);
	font-family: var(--kp-font-head);
	font-weight: 800;
	font-size: 1.15rem;
	line-height: 1;
}

.kapow-steps:not(.kapow-steps--cards) .kapow-step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 19px;
	top: 44px;
	bottom: -16px;
	border-left: 2px dotted var(--kp-border);
}

.kapow-step-title {
	padding-top: 2px;
	font-weight: 700;
	line-height: 1.3;
}

.kapow-step-text {
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--kp-muted);
}

.kapow-steps--cards {
	grid-template-columns: repeat(3, 1fr);
	gap: var(--kp-card-gap);
}

.kapow-steps--cards .kapow-step {
	grid-template-columns: 1fr;
	align-content: start;
	row-gap: 6px;
	padding: 24px;
	border: 1px solid var(--kp-border);
	border-radius: var(--kp-radius);
	background: var(--kp-surface);
	box-shadow: var(--kp-shadow);
}

.kapow-steps--cards .kapow-step::before {
	grid-row: auto;
	margin-block-end: 10px;
	width: 48px;
	height: 48px;
	font-size: 1.4rem;
}

.kapow-steps--cards .kapow-step-title {
	font-size: 1.05rem;
}

.kapow-ticks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.kapow-ticks li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0;
	font-weight: 600;
	line-height: 1.4;
}

.kapow-ticks .kapow-icon {
	flex: none;
	margin-top: 1px;
	padding: 3px;
	border-radius: 50%;
	background: var(--kp-accent);
	color: var(--kp-accent-text);
}

/* The booking pages (template-booking.php): the hero, then LT Booking Form's form in a panel
   with opening hours and contact beside it. The plugin draws its own card; inside the panel it
   is flattened so the shop's panel is the only box. */

.kapow-book.site-main {
	padding-block-start: 8px;
}

.kapow-book-hero {
	padding-block: 48px;
}

.kapow-book-hero--plain {
	grid-template-columns: 1fr;
	padding-block: 32px;
}

.kapow-book-split {
	display: grid;
	grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
	gap: var(--kp-card-gap);
	align-items: start;
}

.kapow-book-panel {
	padding: 28px;
	border: 1px solid var(--kp-border);
	border-radius: var(--kp-radius);
	background: var(--kp-surface);
	scroll-margin-top: 24px;
}

.kapow-book-side {
	display: grid;
	gap: var(--kp-card-gap);
}

.kapow-book-panel .booking-form-wrapper,
.kapow-book-panel .booking-my-bookings,
.kapow-book-panel .booking-confirmation-container {
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.kapow-book-panel .booking-form-step h3 {
	font-family: var(--kp-font-head);
	font-weight: var(--kp-head-weight);
	text-transform: var(--kp-head-transform);
	letter-spacing: var(--kp-head-spacing);
	font-size: 1.15rem;
}

@media (max-width: 900px) {
	.kapow-book-split {
		grid-template-columns: 1fr;
	}

	.kapow-book-hero {
		padding-block: 32px;
	}
}

/* The About page (template-about.php): the Booking page's layout, with the page's questions
   and answers as cards. Each is a Group block with the class "kapow-qa". */

.kapow-about-body {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kp-card-gap);
	align-content: start;
}

.kapow-about-body > :not(.kapow-qa) {
	grid-column: 1 / -1;
	margin: 0;
}

.kapow-about-body .kapow-qa {
	margin: 0;
	padding: 24px;
	border: 1px solid var(--kp-border);
	border-radius: var(--kp-radius);
	background: var(--kp-surface);
}

.kapow-about-body .kapow-qa > * {
	margin-block: 0;
}

.kapow-about-body .kapow-qa > * + * {
	margin-block-start: 0.6em;
}

.kapow-about-body .kapow-qa h2 {
	font-family: var(--kp-font-head);
	font-weight: var(--kp-head-weight);
	text-transform: var(--kp-head-transform);
	letter-spacing: var(--kp-head-spacing);
	font-size: 1.15rem;
	line-height: 1.25;
}

.kapow-about-body .kapow-qa p {
	line-height: 1.6;
}

/* The first card, who the shop is, runs the full width. */
.kapow-about-body .kapow-qa:first-child {
	grid-column: 1 / -1;
	border-inline-start: 4px solid var(--kp-accent);
}

.kapow-page-map {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.kapow-page-map img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 640px) {
	.kapow-about-body {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Ordinary pages (page.php): a title band, then the content in a panel. */

.kapow-page-hero {
	padding-block: 36px;
}

.kapow-page-hero .kapow-hero-heading {
	margin: 0;
}

.kapow-page-panel {
	padding: 32px 36px;
	border: 1px solid var(--kp-border);
	border-radius: var(--kp-radius);
	background: var(--kp-surface);
}

/* Reading width for text only: a social wall, gallery or table keeps the panel's full width. */
.kapow-page-panel .entry-content > :is(p, h2, h3, h4, ul, ol, blockquote) {
	max-width: 78ch;
}

.kapow-page-panel .entry-content > :first-child {
	margin-block-start: 0;
}

.kapow-page-panel .entry-content > :last-child {
	margin-block-end: 0;
}

.kapow-page-panel .entry-content :is(h2, h3, h4) {
	font-family: var(--kp-font-head);
	font-weight: var(--kp-head-weight);
	text-transform: var(--kp-head-transform);
	letter-spacing: var(--kp-head-spacing);
	line-height: 1.2;
	margin-block: 1.6em 0.5em;
}

.kapow-page-panel .entry-content h2 {
	font-size: 1.5rem;
}

.kapow-page-panel .entry-content h3 {
	font-size: 1.2rem;
}

.kapow-page-panel .entry-content p {
	line-height: 1.65;
}

.kapow-page-woo {
	margin-block-start: 8px;
}

/* Page not found: the product search inside the band. */
.kapow-404-search {
	max-width: 520px;
	margin-block: 18px 6px;
}

.kapow-404-search form {
	display: flex;
	gap: 8px;
}

.kapow-404-search input[type="search"] {
	flex: 1;
	min-width: 0;
}

.kapow-404 .kapow-hero-heading {
	margin-block-end: 8px;
}

/* Logged out, My Account is a login form: a panel of reading width, not the whole page. */
.kapow-page-woo .woocommerce-form-login,
.kapow-page-woo .woocommerce-form-register,
.kapow-page-woo .woocommerce-ResetPassword {
	max-width: 560px;
	margin: 0;
	padding: 28px;
	border: 1px solid var(--kp-border);
	border-radius: var(--kp-radius);
	background: var(--kp-surface);
}

.kapow-page-woo .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 560px));
	gap: var(--kp-card-gap);
}

.kapow-page-woo .u-columns.col2-set > .u-column1,
.kapow-page-woo .u-columns.col2-set > .u-column2 {
	float: none;
	width: auto;
	margin: 0;
}

@media (max-width: 640px) {
	.kapow-page-panel {
		padding: 22px 18px;
	}

	.kapow-page-hero {
		padding-block: 26px;
	}
}

/* The Subscriptions page */

.kapow-subs.site-main {
	padding-block-start: 8px;
}

.kapow-subs-page .content-area {
	width: 100%;
	float: none;
	margin-inline: 0;
}

.kapow-subs-hero {
	padding-block: 56px;
}

.kapow-subs-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
	gap: var(--kp-card-gap);
	align-items: start;
}

.kapow-subs-panel {
	padding: 28px;
	border: 1px solid var(--kp-border);
	border-radius: var(--kp-radius);
	background: var(--kp-surface);
}

.kapow-subs-contact {
	background: var(--kp-surface-2);
	scroll-margin-top: 24px;
}

.kapow-subs-panel .kapow-section-title {
	margin-block-end: 10px;
}

.kapow-subs-panel p {
	margin: 0;
	line-height: 1.55;
}

.kapow-contact-list {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.kapow-contact-list li {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.kapow-contact-list .kapow-icon {
	flex: none;
	color: var(--kp-link);
}

.kapow-prose {
	font-size: 0.95rem;
	line-height: 1.6;
}

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

.kapow-prose h3 {
	margin: 1.4em 0 0.35em;
	font-size: 1.05rem;
	line-height: 1.3;
}

.kapow-prose p,
.kapow-prose ul {
	margin: 0 0 0.9em;
}

.kapow-prose ul {
	padding-inline-start: 1.2em;
}

.kapow-prose li {
	margin-block-end: 0.3em;
}

@media (max-width: 980px) {
	.kapow-hero-card {
		justify-self: stretch;
		max-width: none;
		transform: none;
	}

	.kapow-hero::before {
		-webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 100%);
		mask-image: linear-gradient(180deg, transparent 40%, #000 100%);
	}

	.kapow-steps--cards,
	.kapow-subs-split {
		grid-template-columns: 1fr;
	}

	.kapow-subs-hero {
		padding-block: 36px;
	}
}

@media (max-width: 560px) {
	.kapow-hero-card {
		padding: 22px 20px;
		box-shadow: 5px 5px 0 var(--kp-accent);
	}

	.kapow-subs-panel {
		padding: 22px 20px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.kapow-btn .kapow-icon--external {
		transition: transform 0.15s ease;
	}

	.kapow-btn:hover .kapow-icon--external {
		transform: translate(2px, -2px);
	}
}