/*
Theme Name: Printcart Apparel Store
Theme URI: https://www.printcart.com/
Author: Printcart
Author URI: https://www.printcart.com/
Description: Child theme of Printcart Stores for a consolidated apparel and streetwear print-on-demand shop: bold hero, shop-by-category grid, designer showcase, how-it-works and value props, built for the Printcart Store plugin.
Template: printcart-stores
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
Version: 0.1.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: printcart-store-apparel
Tags: e-commerce, block-patterns, custom-colors, custom-menu, editor-style, translation-ready
*/

/* Tokens live in theme.json; this file holds only what theme.json cannot express. */

:root {
	--ap-ink: #17171a;
	--ap-paper: #ffffff;
	--ap-mist: #f5f3f0;
	--ap-line: #e2e0dc;
	--ap-muted: #5c5a57;
	--ap-signal: #ff5a1f;
	--ap-signal-dark: #c43d0f;
	--ap-section-y: clamp(56px, 7vw, 104px);
	--cs-r-xs: 3px;
	--cs-r-sm: 4px;
	--cs-r-md: 8px;
	--cs-r-lg: 12px;
	--cs-shadow-1: 0 1px 2px rgba(23, 23, 26, 0.08), 0 2px 8px rgba(23, 23, 26, 0.06);
	--cs-shadow-2: 0 2px 4px rgba(23, 23, 26, 0.08), 0 14px 30px rgba(23, 23, 26, 0.16);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- header and top bar ---------- */
.ap-topbar { font-size: 0.8125rem; letter-spacing: 0.04em; }
.ap-topbar a { color: #f3c9b4; text-decoration: none; }
.ap-topbar a:hover { text-decoration: underline; }
.ap-topbar p { margin: 0; }
.printcart-header .wp-block-site-title { margin: 0; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.02em; }
.printcart-header .wp-block-navigation { font-size: 0.9375rem; }
.printcart-header .wp-block-navigation__container > .wp-block-navigation-item > a,
.printcart-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.04em;
	font-size: 0.8125rem;
}

/* ---------- shared home section scaffolding ---------- */
.ap-section { padding-block: var(--ap-section-y); }
.ap-section--mist { background: var(--ap-mist); }
.ap-kicker {
	margin: 0 0 12px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ap-signal-dark);
}
.ap-section__head { max-width: 640px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
.ap-section__head h2 { margin: 0 0 12px; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); text-transform: uppercase; letter-spacing: 0.01em; }
.ap-section__head p { color: var(--ap-muted); margin: 0; }

/* ---------- hero ---------- */
.ap-hero { position: relative; }
.ap-hero .wp-block-cover__inner-container { max-width: 720px; }
.ap-hero__kicker { letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }
.ap-hero h1 { font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem); letter-spacing: -0.01em; text-transform: uppercase; margin: 0 0 18px; }
.ap-hero__lead { font-size: 1.1875rem; max-width: 36em; margin: 0 0 28px; }
.ap-hero__facts { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.875rem; }
.ap-hero__facts li { position: relative; padding-left: 16px; }
.ap-hero__facts li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 2px; background: var(--ap-signal); }

/* ---------- grids ---------- */
.ap-grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.ap-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ap-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ap-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 781px) { .ap-grid--3 { grid-template-columns: minmax(0, 1fr); } .ap-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ap-grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* category cards: image on top (if any), name and link beneath; whole card is clickable */
.ap-cat-card { position: relative; margin: 0; display: flex; flex-direction: column; gap: 10px; background: var(--ap-paper); border: 1px solid var(--ap-line); border-radius: var(--cs-r-md); overflow: hidden; }
.ap-cat-card__media { margin: 0; aspect-ratio: 4 / 3; background: var(--ap-mist); overflow: hidden; }
.ap-cat-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.ap-cat-card:hover .ap-cat-card__media img { transform: scale(1.04); }
.ap-cat-card__body { padding: 0 16px 16px; }
.ap-cat-card h3 { margin: 0; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: 0.01em; }
.ap-cat-card__link a { color: var(--ap-ink); text-decoration: none; }
.ap-cat-card__link a::after { content: ""; position: absolute; inset: 0; }
.ap-cat-card:focus-within { outline: 2px solid var(--ap-signal); outline-offset: 2px; }

/* designer showcase product cards */
.ap-product-card { position: relative; margin: 0; background: var(--ap-paper); border: 1px solid var(--ap-line); border-radius: var(--cs-r-md); overflow: hidden; display: flex; flex-direction: column; }
.ap-product-card__media { margin: 0; aspect-ratio: 1; background: var(--ap-mist); overflow: hidden; }
.ap-product-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-product-card__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.ap-product-card h3 { margin: 0; font-size: 1.0625rem; }
.ap-product-card__price { font-weight: 600; color: var(--ap-ink); }
.ap-product-card .wp-block-buttons { margin-top: 8px; }

/* how it works steps */
.ap-step { margin: 0; padding: 28px; background: var(--ap-paper); border-radius: var(--cs-r-md); border: 1px solid var(--ap-line); }
.ap-step__n { margin: 0 0 10px; font-size: 2rem; line-height: 1; font-weight: 700; color: var(--ap-signal); }
.ap-step h3 { margin: 0 0 8px; font-size: 1.1875rem; text-transform: uppercase; }
.ap-step p:last-child { margin: 0; color: var(--ap-muted); }

/* value props */
.ap-value { margin: 0; padding: 4px 0; }
.ap-value h3 { margin: 0 0 8px; font-size: 1.125rem; }
.ap-value p { margin: 0; color: var(--ap-muted); }

/* footer */
.ap-footer .wp-block-site-title { font-size: 1.375rem; margin: 0 0 12px; text-transform: uppercase; }
.ap-footer .wp-block-site-title a { color: #fbfaf8; }
.ap-footer p { margin: 0 0 10px; }
.ap-footer h4 { letter-spacing: 0.12em; font-size: 0.8125rem; }

/* never overflow on phones */
img, svg, video { max-width: 100%; }
@media (max-width: 600px) {
	.ap-step { padding: 20px; }
	.ap-hero__facts { gap: 6px 16px; }
}