/* ==========================================================================
   Kidoclassic Mall, global design system
   --------------------------------------------------------------------------
   The brand runs on five colours from the logo. They work as a system, not a
   palette dumped on a page:
     Magenta  is the working colour. Buttons, links, focus. It does the work.
     Hot pink is the signature. Reserved for brand and decoration, never an
              action, because a candy pink button reads as a toy, not a store.
     Maroon   is the ink. Text and the footer.
     Blush    and a faint pink tint are surfaces and washes.
     Crimson  is held back for urgency only: sale, low stock, errors.
   ========================================================================== */

/* Fonts, self-hosted. Zero external requests. ----------------------------- */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/playfair-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('../fonts/playfair-900.woff2') format('woff2');
}

/* Design tokens ----------------------------------------------------------- */

:root {
	/* Magenta, the working interactive colour */
	--kido-magenta: #C4186C;
	--kido-magenta-deep: #A8125B;
	--kido-magenta-deeper: #7E1450;
	--kido-magenta-wash: #FBE2EE;   /* blush surface for chips and washes */
	--kido-magenta-tint: #FDF1F6;   /* faintest tint, hover backgrounds */

	/* Hot pink, the signature. Brand and decoration only. */
	--kido-pink: #FF6EB4;
	--kido-pink-soft: #FFE6F1;
	--kido-pink-bright: #F24D9E;

	/* Maroon and blush, straight from the logo */
	--kido-maroon: #2B1A20;
	--kido-blush: #F7DCE8;

	/* Crimson, urgency only */
	--kido-crimson: #8B0038;
	--kido-crimson-soft: #F7DAE4;

	/* Neutrals, warmed with a maroon and pink undertone */
	--kido-bg: #FDF8FA;        /* warm white page, faint pink cast */
	--kido-surface: #FFFFFF;   /* cards */
	--kido-surface-2: #F8EEF3; /* soft pink-grey surface */
	--kido-surface-3: #F0E2E9;
	--kido-ink: #2B1A20;       /* maroon near-black, the brand ink */
	--kido-ink-2: #5A464E;
	--kido-muted: #8C7B83;
	--kido-border: #F0E2E9;
	--kido-border-strong: #E2CFD8;

	/* Success and info, used sparingly (stock, confirmations) */
	--kido-green: #1F7A4D;
	--kido-green-soft: #E3F3EA;

	/* Type */
	--kido-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--kido-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* Radii */
	--kido-r-xs: 6px;
	--kido-r-sm: 10px;
	--kido-r-md: 16px;
	--kido-r-lg: 24px;
	--kido-r-pill: 999px;

	/* Shadows, soft and warm, tinted with the maroon ink */
	--kido-shadow-xs: 0 1px 2px rgba(43, 26, 32, 0.06);
	--kido-shadow-sm: 0 2px 10px rgba(43, 26, 32, 0.08);
	--kido-shadow-md: 0 10px 28px rgba(43, 26, 32, 0.10);
	--kido-shadow-lg: 0 20px 52px rgba(43, 26, 32, 0.14);

	/* Motion */
	--kido-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--kido-t-fast: 0.16s var(--kido-ease);
	--kido-t: 0.26s var(--kido-ease);

	/* Layout */
	--kido-container: 1240px;
	--kido-gutter: 24px;
}

/* Resets ------------------------------------------------------------------ */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--kido-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--kido-ink);
	background-color: var(--kido-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg {
	max-width: 100%;
	display: block;
}
img { height: auto; }

a {
	color: var(--kido-magenta);
	text-decoration: none;
	transition: color var(--kido-t-fast);
}
a:hover { color: var(--kido-magenta-deeper); }

button { font-family: inherit; }

ul, ol { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.4em;
	font-family: var(--kido-display);
	font-weight: 700;
	line-height: 1.15;
	color: var(--kido-ink);
	letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }

:focus-visible {
	outline: 2px solid var(--kido-magenta);
	outline-offset: 2px;
	border-radius: 4px;
}

::selection {
	background: var(--kido-magenta);
	color: #fff;
}

/* Layout primitives ------------------------------------------------------- */

.kido-container {
	width: 100%;
	max-width: var(--kido-container);
	margin: 0 auto;
	padding: 0 var(--kido-gutter);
}
.kido-container--wide { max-width: 1440px; }

.kido-main { min-height: 50vh; }

.kido-section { padding: 72px 0; }
.kido-section-sm { padding: 48px 0; }

/* Eyebrow, the small label above a heading */
.kido-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--kido-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kido-magenta);
	margin: 0 0 12px;
}
.kido-eyebrow::before {
	content: "";
	width: 18px;
	height: 2px;
	background: var(--kido-magenta);
	border-radius: 2px;
}

/* Section header with a title and a trailing link */
.kido-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}
.kido-section-head__title {
	font-family: var(--kido-display);
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 700;
	margin: 0;
}
.kido-section-head__sub {
	color: var(--kido-muted);
	margin: 6px 0 0;
	max-width: 46ch;
	font-size: 15px;
}

/* Type scale -------------------------------------------------------------- */

.kido-display {
	font-family: var(--kido-display);
	font-weight: 900;
	font-size: clamp(40px, 6vw, 68px);
	line-height: 1.03;
	letter-spacing: -0.02em;
}
.kido-heading-lg { font-family: var(--kido-display); font-weight: 700; font-size: clamp(28px, 4vw, 42px); line-height: 1.12; }
.kido-heading-md { font-family: var(--kido-display); font-weight: 700; font-size: clamp(24px, 3vw, 32px); line-height: 1.18; }
.kido-lede { font-size: 18px; line-height: 1.65; color: var(--kido-ink-2); }
.kido-muted { color: var(--kido-muted); }

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

.kido-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--kido-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	padding: 14px 26px;
	border-radius: var(--kido-r-pill);
	border: 1.5px solid transparent;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	transition: background var(--kido-t-fast), color var(--kido-t-fast),
		border-color var(--kido-t-fast), transform var(--kido-t-fast),
		box-shadow var(--kido-t-fast);
}
.kido-btn:active { transform: translateY(1px); }

.kido-btn--primary {
	background: var(--kido-magenta);
	color: #fff;
	border-color: var(--kido-magenta);
	box-shadow: var(--kido-shadow-sm);
}
.kido-btn--primary:hover {
	background: var(--kido-magenta-deep);
	border-color: var(--kido-magenta-deep);
	color: #fff;
	box-shadow: var(--kido-shadow-md);
}

.kido-btn--ghost {
	background: transparent;
	color: var(--kido-magenta);
	border-color: var(--kido-border-strong);
}
.kido-btn--ghost:hover {
	border-color: var(--kido-magenta);
	background: var(--kido-magenta-wash);
	color: var(--kido-magenta-deeper);
}

.kido-btn--light {
	background: #fff;
	color: var(--kido-ink);
	border-color: transparent;
	box-shadow: var(--kido-shadow-sm);
}
.kido-btn--light:hover { color: var(--kido-magenta); box-shadow: var(--kido-shadow-md); }

.kido-btn--block { display: flex; width: 100%; }

/* Inline link with a sliding arrow */
.kido-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--kido-magenta);
	font-size: 15px;
}
.kido-link-arrow svg { transition: transform var(--kido-t-fast); }
.kido-link-arrow:hover svg { transform: translateX(3px); }

/* Badges ------------------------------------------------------------------ */

.kido-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 5px 11px;
	border-radius: var(--kido-r-pill);
	background: var(--kido-magenta-wash);
	color: var(--kido-magenta-deeper);
}
.kido-badge--sale { background: var(--kido-crimson-soft); color: var(--kido-crimson); }
.kido-badge--new { background: var(--kido-pink-soft); color: var(--kido-magenta-deeper); }

/* Grid helpers ------------------------------------------------------------ */

.kido-grid { display: grid; gap: 24px; }
.kido-grid-2 { grid-template-columns: repeat(2, 1fr); }
.kido-grid-3 { grid-template-columns: repeat(3, 1fr); }
.kido-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ==========================================================================
   WooCommerce product card, themed once and shared across the whole store
   so the homepage shelves, the shop archive and related products all match.
   ========================================================================== */

ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 22px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: both !important;
	width: 100% !important;
}

/* Storefront adds clearfix pseudo-elements (display:table) to ul.products. In a
   grid container they become phantom grid items that steal cells and push the
   last card onto its own row. Remove them. */
ul.products::before,
ul.products::after {
	content: none !important;
	display: none !important;
}

/* Whatever column class WooCommerce stamps on, we hold a 4-up grid. */
ul.products.columns-1,
ul.products.columns-2,
ul.products.columns-3,
ul.products.columns-4,
ul.products.columns-5,
ul.products.columns-6 {
	grid-template-columns: repeat(4, 1fr) !important;
}

ul.products li.product,
ul.products li.product.first,
ul.products li.product.last {
	position: relative;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	display: flex;
	flex-direction: column;
	background: var(--kido-surface);
	border: 1px solid var(--kido-border);
	border-radius: var(--kido-r-md);
	overflow: hidden;
	box-shadow: var(--kido-shadow-xs);
	transition: box-shadow var(--kido-t), transform var(--kido-t), border-color var(--kido-t);
}
ul.products li.product:hover {
	box-shadow: var(--kido-shadow-md);
	transform: translateY(-4px);
	border-color: var(--kido-border-strong);
}

ul.products li.product a img,
ul.products li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	margin: 0 !important;
	background: var(--kido-surface-2);
	transition: transform 0.5s var(--kido-ease);
}
ul.products li.product:hover img { transform: scale(1.04); }

ul.products li.product .woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1;
}

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--kido-body) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.4;
	color: var(--kido-ink) !important;
	padding: 14px 16px 2px !important;
	margin: 0 !important;
	text-align: left;
}

ul.products li.product .star-rating {
	margin: 4px 16px 0 !important;
	color: var(--kido-pink);
	font-size: 13px;
}

ul.products li.product .price {
	display: block;
	padding: 4px 16px 0 !important;
	margin: 0 !important;
	color: var(--kido-magenta-deeper) !important;
	font-family: var(--kido-body);
	font-weight: 700 !important;
	font-size: 17px !important;
	text-align: left;
}
ul.products li.product .price del {
	color: var(--kido-muted) !important;
	font-weight: 400;
	font-size: 14px;
	opacity: 1;
	margin-right: 6px;
}
ul.products li.product .price ins {
	text-decoration: none;
	background: none;
}

ul.products li.product .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 5px 11px;
	border-radius: var(--kido-r-pill);
	background: var(--kido-crimson);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1;
	z-index: 2;
}

ul.products li.product .button,
ul.products li.product .added_to_cart {
	display: block;
	margin: 12px 16px 16px !important;
	padding: 11px 18px !important;
	background: var(--kido-magenta) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--kido-r-pill) !important;
	font-family: var(--kido-body) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-align: center !important;
	line-height: 1.1 !important;
	transition: background var(--kido-t-fast) !important;
}
ul.products li.product .button { margin-top: auto !important; }
ul.products li.product .button:hover,
ul.products li.product .added_to_cart:hover { background: var(--kido-magenta-deep) !important; }
ul.products li.product .added_to_cart {
	background: var(--kido-surface-2) !important;
	color: var(--kido-magenta-deeper) !important;
}

/* ==========================================================================
   Hide Storefront defaults. Our header and footer fully replace them.
   ========================================================================== */

.site-header,
.site-footer,
.storefront-handheld-footer-bar,
.storefront-breadcrumb {
	display: none !important;
}

.storefront-primary-sidebar,
#secondary,
.widget-area,
#comments {
	display: none !important;
}

.site-content .col-full,
.col-full {
	max-width: 100% !important;
	width: 100% !important;
	padding: 0 !important;
}

.site,
.site-content,
.content-area,
#primary,
#page,
body.woocommerce,
body.woocommerce-page {
	background: var(--kido-bg) !important;
}

/* Keep WP layouts from collapsing the footer or floating columns. */
.kido-main,
.site-main,
#main,
.woocommerce-page .content-area,
#primary {
	display: block !important;
	width: 100% !important;
	float: none !important;
	clear: both !important;
	min-height: 50vh;
}

/* Keep a fixed navbar clear of the WP admin bar. */
.admin-bar .kido-navbar { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .kido-navbar { top: 46px; }
}

/* ==========================================================================
   Generic WooCommerce notices and account pages, themed to the brand
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	border-top: none !important;
	border-radius: var(--kido-r-sm);
	font-family: var(--kido-body);
	font-size: 14.5px;
	padding: 14px 18px 14px 46px !important;
	box-shadow: var(--kido-shadow-xs);
}
.woocommerce-message { background: var(--kido-green-soft) !important; color: #14532d !important; }
.woocommerce-message::before { color: var(--kido-green) !important; }
.woocommerce-info { background: var(--kido-magenta-tint) !important; color: var(--kido-magenta-deeper) !important; }
.woocommerce-info::before { color: var(--kido-magenta) !important; }
.woocommerce-error { background: var(--kido-crimson-soft) !important; color: var(--kido-crimson) !important; }
.woocommerce-error::before { color: var(--kido-crimson) !important; }

.woocommerce-message .button,
.woocommerce-info .button {
	background: var(--kido-magenta) !important;
	color: #fff !important;
	border-radius: var(--kido-r-pill) !important;
	padding: 8px 18px !important;
}

/* --------------------------------------------------------------------------
   Container width, the global fix
   --------------------------------------------------------------------------
   The rules above flatten Storefront's .col-full to full width with zero
   padding so our own full-bleed sections can breathe. The side effect was that
   every page rendered through Storefront (Cart, Checkout, My Account, the order
   confirmation, and any plain content page) lost its gutters and ran flush to
   the viewport edge. We give that content the store's container width back
   here, in one place, so no interior page is ever edge to edge again. Each
   page's own stylesheet keeps only its vertical rhythm.
   -------------------------------------------------------------------------- */

/* WooCommerce shortcode pages and the order confirmation. */
.woocommerce-account .woocommerce,
.woocommerce-page:not(.woocommerce-cart):not(.woocommerce-checkout) .woocommerce,
.woocommerce-cart .kido-cart,
.woocommerce-checkout .kido-checkout,
.woocommerce-order-received .kido-order {
	max-width: var(--kido-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--kido-gutter);
	padding-right: var(--kido-gutter);
}
.woocommerce-account .woocommerce,
.woocommerce-page:not(.woocommerce-cart):not(.woocommerce-checkout) .woocommerce {
	padding-top: 40px;
	padding-bottom: 64px;
}

/* Plain content pages (a Privacy, Shipping or Returns page the client adds with
   no custom template) keep their Storefront title, now padded to the container
   instead of sitting flush left. Scoped to Storefront's article so our own
   .kido-main templates, which never use .site-main, are untouched. */
.site-main > article.page .entry-header,
.site-main > article.page .entry-content,
.site-main > article.page .page-content {
	max-width: var(--kido-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--kido-gutter);
	padding-right: var(--kido-gutter);
}
.site-main > article.page .entry-header {
	padding-top: 44px;
}
.site-main > article.page .entry-title {
	font-family: var(--kido-display);
	font-weight: 900;
	font-size: clamp(30px, 4.4vw, 48px);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	border-bottom: 1px solid var(--kido-border);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	color: var(--kido-magenta);
	font-weight: 600;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

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

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.kido-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	:root { --kido-gutter: 18px; }

	.kido-section { padding: 52px 0; }
	.kido-section-sm { padding: 36px 0; }

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

	.kido-grid-2,
	.kido-grid-3,
	.kido-grid-4 { grid-template-columns: 1fr; }

	ul.products,
	ul.products.columns-1,
	ul.products.columns-2,
	ul.products.columns-3,
	ul.products.columns-4 {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 14px !important;
	}
}

@media (max-width: 420px) {
	ul.products li.product .woocommerce-loop-product__title { font-size: 14px !important; }
	ul.products li.product .price { font-size: 15px !important; }
}