/*
Theme Name: Blocksy Child
Theme URI: https://kingmaph1.com
Description: Mobile-first homepage for Kingmap (homepage carousel, category strip, 2-up product grid, fixed bottom navigation). All layout is plain CSS. The Blocksy parent theme is never modified.
Author: CC
Author URI: https://kingmaph1.com
Template: blocksy
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blocksy-child
*/

/* ==========================================================================
   0. Design tokens
   --------------------------------------------------------------------------
   Task 2B paints the storefront with the approved red palette. The values are
   fixed here (not read from the parent palette) so the homepage looks the same
   even when the Blocksy customizer is reset.

   The html:root selector intentionally outranks the parent theme's inline
   :root block, which is printed after this stylesheet. It only recolours the
   Blocksy palette; no layout from the parent theme is changed.
   ========================================================================== */

html:root {
	--theme-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--theme-palette-color-1: #E2231A;
	--theme-palette-color-2: #C1121F;
	--theme-palette-color-3: #6B7280;
	--theme-palette-color-4: #111111;
	--theme-palette-color-5: #E5E7EB;
	--theme-palette-color-6: #F5F6F7;
	--theme-palette-color-7: #FFFFFF;
	--theme-palette-color-8: #FFFFFF;
}

:root {
	--km-red: #E2231A;
	--km-red-dark: #C1121F;
	--km-pink: #FDECEC;
	--km-card: #F5F6F7;
	--km-ink: #111111;
	--km-body: #6B7280;
	--km-line: #E5E7EB;
	--km-white: #FFFFFF;
	--km-gray-400: #9CA3AF;
	--km-gray-300: #D1D5DB;
	--km-radius: 16px;
	--km-gutter: 16px;
	--km-nav-h: 56px;
	--km-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   1. Layout shell
   --------------------------------------------------------------------------
   Mobile first: every rule below is written for a phone. The desktop rules
   live in one media query at the bottom of this file.
   ========================================================================== */

/* Scoped border-box reset: the layout must not depend on the parent theme's
   global reset. */
.km-home,
.km-home *,
.km-home *::before,
.km-home *::after {
	box-sizing: border-box;
}

/* The approved design uses the native system stack, not a webfont. The
   front-page Google Fonts stylesheet is dequeued in functions.php; this rule
   also covers the Blocksy header and any core block that inherits body text. */
html body {
	font-family: var(--km-font);
}

.km-home {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--km-ink);
	font-family: var(--km-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}

/* Core group layouts add a block gap via margin; the flex gap is enough.
   The !important is required because the parent theme prints its block-gap
   rule inline, with a higher cascade position than this stylesheet. */
.km-home > * {
	margin-block: 0 !important;
}

.km-home p {
	margin: 0;
}

.km-home img {
	max-width: 100%;
}

.km-home a {
	-webkit-tap-highlight-color: transparent;
}

/* The static front page brings its own hero, so Blocksy's "Home" title bar
   would only add an empty band above it. */
body.home .hero-section,
body.home .entry-header,
body.home .page-title {
	display: none;
}

/* Full-bleed helper. Only used below 1024px: the sections escape the theme
   container, then add their own gutters. On desktop the sections simply stay
   inside the Blocksy container. */
@media (max-width: 1023px) {
	.km-bleed {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	/* The fixed bottom bar covers the last 56px of the page: reserve it. */
	body.km-has-bottom-nav {
		padding-bottom: calc(var(--km-nav-h) + env(safe-area-inset-bottom));
	}
}

/* ==========================================================================
   2. Hero carousel — 33vh, pure CSS scroll-snap, zero JavaScript
   ========================================================================== */

.km-hero {
	position: relative;
	background: var(--km-white);
}

.km-hero__track {
	display: flex;
	height: 33vh;
	min-height: 220px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.km-hero__track::-webkit-scrollbar {
	display: none;
}

.km-hero__slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(135deg, #FFFFFF 0%, #FFF5F5 100%);
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

/* Copy on the left, product cut-out on the right. */
.km-hero__caption {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px 22px;
	color: var(--km-ink);
	background: none;
	text-shadow: none;
}

.km-hero__copy {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
}

.km-hero__title {
	margin: 0;
	color: var(--km-ink);
	font-size: clamp(24px, 6.4vw, 34px);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.km-hero__line {
	display: block;
}

.km-hero__line--red {
	color: var(--km-red);
}

.km-hero__text {
	margin: 0;
	color: #374151;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.35;
}

.km-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	padding: 10px 22px;
	border-radius: 24px;
	background: var(--km-red);
	color: var(--km-white);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.km-hero__cta:hover,
.km-hero__cta:focus {
	background: var(--km-red-dark);
	color: var(--km-white);
}

.km-hero__cta:active {
	background: var(--km-red-dark);
}

.km-hero__cta-arrow {
	font-size: 15px;
	line-height: 1;
}

.km-hero__media {
	display: flex;
	flex: 0 0 40%;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	max-width: 40%;
	min-width: 0;
}

.km-hero__product {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.km-hero__dots {
	position: absolute;
	right: 0;
	bottom: 8px;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	pointer-events: auto;
}

.km-hero__dot {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--km-gray-300);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.km-hero__dot.is-active {
	background: var(--km-red);
}

/* ==========================================================================
   3. Category strip — four 88px circles on a pale pink base
   ========================================================================== */

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

.km-cats__list {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 14px 8px 12px;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.km-cats__list::-webkit-scrollbar {
	display: none;
}

/* Equal columns. The 88px circle is wider than the 80.75px column at 375px,
   so it is allowed to bleed into the 12px gap; the visual gap stays ~5px and
   the strip never leaves the viewport. */
.km-cats__item {
	box-sizing: border-box;
	flex: 1 1 0;
	min-width: 0;
}

.km-cats__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: var(--km-ink);
	text-align: center;
	text-decoration: none;
}

.km-cats__icon {
	display: flex;
	flex: 0 0 88px;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border: 0;
	border-radius: 50%;
	background: var(--km-pink);
	color: var(--km-red);
	transition: background-color 0.2s ease;
}

.km-cats__icon svg {
	display: block;
	width: 56px;
	height: 56px;
}

.km-cats__link:hover .km-cats__icon,
.km-cats__link:focus .km-cats__icon {
	background: #FADDDD;
}

.km-cats__label {
	display: block;
	max-width: 100%;
	color: var(--km-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	overflow-wrap: break-word;
}

/* ==========================================================================
   4. Product grid — 2 columns × 2 rows on mobile, 10px gutters
   ========================================================================== */

.km-products {
	padding: 0 var(--km-gutter);
}

.km-products__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.km-product {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: 14px;
	overflow: hidden;
	border: 0;
	border-radius: var(--km-radius);
	background: var(--km-card);
	box-shadow: none;
}

.km-product__title {
	display: -webkit-box;
	overflow: hidden;
	color: var(--km-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

a.km-product__title:hover,
a.km-product__title:focus {
	color: var(--km-red);
}

.km-product__subtitle {
	display: -webkit-box;
	overflow: hidden;
	color: var(--km-body);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.35;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.km-product__price {
	padding-right: 44px;
	color: var(--km-red);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}

.km-product__price .amount,
.km-product__price ins {
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}

.km-product__price del {
	margin-right: 4px;
	color: var(--km-body);
	font-size: 12px;
	font-weight: 400;
	text-decoration: line-through;
}

.km-product__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0 0 10px;
	overflow: hidden;
	border-radius: 10px;
	background: var(--km-white);
	text-decoration: none;
}

.km-product__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

/* White arrow in the red disc, pinned to the bottom-right corner. */
.km-product__arrow {
	position: absolute;
	z-index: 1;
	right: 14px;
	bottom: 14px;
	left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--km-red);
	color: var(--km-white);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
}

.km-product__arrow:hover,
.km-product__arrow:focus {
	background: var(--km-red-dark);
	color: var(--km-white);
}

.km-product__arrow.is-disabled {
	background: var(--km-gray-300);
	pointer-events: none;
}

/* Placeholder card shown when the category has no products yet. */
.km-product--placeholder .km-product__title {
	color: var(--km-body);
}

/* ==========================================================================
   5. Trust strip and promo bar
   ========================================================================== */

.km-trust {
	padding: 14px 8px 12px;
	border-top: 1px solid var(--km-line);
	background: var(--km-white);
}

.km-trust__list {
	display: flex;
	align-items: flex-start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.km-trust__item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 0;
	padding: 0 6px;
	text-align: center;
}

.km-trust__item + .km-trust__item {
	border-left: 1px solid var(--km-line);
}

.km-trust__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--km-red);
}

.km-trust__icon svg {
	display: block;
	width: 28px;
	height: 28px;
}

.km-trust__title {
	color: var(--km-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
}

.km-trust__text {
	color: var(--km-body);
	font-size: 10px;
	font-weight: 400;
	line-height: 1.25;
}

.km-promo {
	padding: 10px 12px;
	background: var(--km-pink);
	color: var(--km-red);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
}

.km-promo p {
	margin: 0;
	color: inherit;
}

.km-promo strong {
	font-weight: 800;
}

/* ==========================================================================
   6. Fixed bottom navigation (mobile only)
   ========================================================================== */

.km-bottom-nav {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9999;
	display: flex;
	box-sizing: border-box;
	height: calc(var(--km-nav-h) + env(safe-area-inset-bottom));
	padding-bottom: env(safe-area-inset-bottom);
	border-top: 1px solid var(--km-line);
	background: var(--km-white);
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
}

.km-nav__item {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 0;
	padding: 0 2px;
	color: var(--km-gray-400);
	font-family: var(--km-font);
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	text-decoration: none;
}

.km-nav__item svg {
	display: block;
	width: 24px;
	height: 24px;
}

.km-nav__item.is-active {
	color: var(--km-red);
	font-weight: 700;
}

.km-nav__label {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Cart quantity badge. It is always printed so WooCommerce cart fragments
   can replace it; an empty cart simply hides it. */
.km-nav__badge {
	position: absolute;
	top: 6px;
	left: calc(50% + 5px);
	box-sizing: border-box;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--km-red);
	color: var(--km-white);
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

.km-nav__badge.is-empty {
	display: none;
}

/* ==========================================================================
   7. Accessibility
   ========================================================================== */

.km-hero__dot:focus-visible,
.km-hero__cta:focus-visible,
.km-cats__link:focus-visible,
.km-product__arrow:focus-visible,
.km-nav__item:focus-visible {
	outline: 2px solid var(--km-red);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.km-hero__track {
		scroll-behavior: auto;
	}

	.km-hero__dot,
	.km-cats__icon {
		transition: none;
	}
}

@media print {
	.km-bottom-nav {
		display: none;
	}
}

/* ==========================================================================
   8. Desktop (≥1024px) — compatibility only
   ========================================================================== */

@media (min-width: 1024px) {
	.km-home {
		gap: 20px;
	}

	/* Carousel: fixed 420px instead of 33vh. */
	.km-hero__track {
		height: 420px;
		min-height: 420px;
	}

	.km-hero__caption {
		padding: 40px 48px 48px;
	}

	.km-hero__title {
		font-size: 34px;
	}

	.km-hero__text {
		font-size: 15px;
	}

	.km-hero__media {
		flex-basis: 45%;
		max-width: 45%;
	}

	.km-hero__dots {
		bottom: 14px;
	}

	/* Categories: centred and evenly spaced. */
	.km-cats__list {
		justify-content: center;
		gap: 28px;
		padding: 20px 16px;
		overflow: visible;
	}

	.km-cats__item {
		flex: 0 0 128px;
	}

	/* Products: four columns inside a centred container. */
	.km-products {
		width: 100%;
		max-width: 1120px;
		margin: 0 auto;
		padding: 0 16px;
	}

	.km-products__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
	}

	.km-product {
		padding: 16px;
	}

	.km-product__title {
		font-size: 17px;
	}

	.km-trust {
		padding: 16px;
	}

	.km-trust__title {
		font-size: 13px;
	}

	.km-trust__text {
		font-size: 11px;
	}

	.km-promo {
		font-size: 13px;
	}

	/* Bottom navigation is a mobile-only pattern. */
	.km-bottom-nav {
		display: none;
	}

	body.km-has-bottom-nav {
		padding-bottom: 0;
	}
}


/* ==========================================================================
   Footer simplification — 去掉 demo 社交图标与页脚菜单，只留一行版权
   ========================================================================== */
.ct-footer .ct-footer-socials,
.ct-footer .footer-menu-inline,
.ct-footer .ct-footer-menu,
.ct-footer [data-row="middle"] {
	display: none !important;
}

.ct-footer {
	padding: 14px 0 !important;
	border-top: 1px solid #E5E7EB;
	background: #ffffff !important;
}

.ct-footer-copyright {
	padding: 0 16px;
	color: #6B7280 !important;
	font-size: 12px !important;
	line-height: 1.5;
	text-align: center;
}


/* ==========================================================================
   Footer 版权行强制白底 — 覆盖 Blocksy 动态 CSS 变量
   ========================================================================== */
.ct-footer,
.ct-footer [data-row],
.ct-footer [data-row] > div,
.ct-footer .ct-container,
.ct-footer .ct-container-full,
.ct-footer .ct-footer-copyright {
	background-color: #ffffff !important;
	background-image: none !important;
}

.ct-footer {
	--theme-footer-background: #ffffff;
	--theme-footer-row-background: #ffffff;
	padding: 14px 0 18px !important;
	border-top: 1px solid #E5E7EB;
}

.ct-footer [data-row="bottom"] {
	padding: 0 !important;
}

.ct-footer .ct-footer-copyright,
.ct-footer .ct-footer-copyright * {
	color: #6B7280 !important;
	font-size: 12px !important;
	line-height: 1.5;
	text-align: center;
}