/*
 * SKC base — reset, layout primitives, notice styles and component atoms
 * shared by header, footer, archive and forthcoming sections.
 *
 * Rules use token CSS variables defined in skc-tokens.css.
 */

html,
body {
	background-color: var(--skc-background);
	color: var(--skc-on-background);
	margin: 0;
	overflow-x: hidden;
}

/* Box-sizing reset (Paul Irish pattern) — border-box globally so any element
   with width + padding doesn't blow past its parent. Without this, the cart
   at width:100% + padding 8/8/80/8 was 16px wider than the viewport on
   mobile (content-box adds padding on top of width). */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		'Helvetica Neue', Arial, sans-serif;
	font-size: var(--skc-body-md);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.skc-container {
	width: 100%;
	max-width: var(--skc-max-width);
	margin: 0 auto;
	padding-left: var(--skc-margin-mobile);
	padding-right: var(--skc-margin-mobile);
}

@media (min-width: 768px) {
	.skc-container {
		padding-left: var(--skc-margin-desktop);
		padding-right: var(--skc-margin-desktop);
	}
}

.skc-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/*
 * With the blank `tobi-skatechop` parent we own the layout fully — no
 * `.site-main` / `.content-area` overrides are needed.
 */

.skc-page__body {
	display: flex;
	flex: 1;
	min-height: calc(100vh - var(--skc-header-height));
}

.skc-main {
	flex: 1;
	padding: 0;
}

@media (min-width: 768px) {
	.skc-main {
		padding: var(--skc-lg) var(--skc-margin-desktop);
	}
}

.skc-display,
.skc-headline,
.skc-body-lg,
.skc-body-md,
.skc-label-md {
	font-family: inherit;
	margin: 0;
}

.skc-display {
	font-size: var(--skc-display-lg);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 700;
}

.skc-headline {
	font-size: var(--skc-headline-lg);
	line-height: 1.2;
	letter-spacing: -0.01em;
	font-weight: 600;
}

.skc-label-md {
	font-size: var(--skc-label-md);
	line-height: 1;
	letter-spacing: 0.05em;
	font-weight: 600;
	text-transform: uppercase;
}

.skc-body-lg {
	font-size: var(--skc-body-lg);
	line-height: 1.5;
	color: var(--skc-secondary);
}

.skc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--skc-xs);
	padding: var(--skc-sm) var(--skc-md);
	font-family: inherit;
	font-size: var(--skc-label-md);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border: 1px solid var(--skc-primary);
	background: var(--skc-primary);
	color: var(--skc-on-primary);
	cursor: pointer;
	transition: background var(--skc-transition), color var(--skc-transition);
}

.skc-btn:hover,
.skc-btn:focus-visible {
	background: var(--skc-on-primary);
	color: var(--skc-primary);
}

.skc-btn:focus-visible {
	outline: 2px solid var(--skc-primary);
	outline-offset: 2px;
}

.skc-btn--ghost {
	background: transparent;
	color: var(--skc-primary);
}

.skc-btn--ghost:hover,
.skc-btn--ghost:focus-visible {
	background: var(--skc-primary);
	color: var(--skc-on-primary);
}

.skc-input,
.skc-select,
.skc-textarea {
	width: 100%;
	padding: var(--skc-sm);
	font-family: inherit;
	font-size: var(--skc-body-md);
	color: var(--skc-on-background);
	background: var(--skc-surface);
	border: 1px solid var(--skc-primary);
	box-sizing: border-box;
}

.skc-input:focus-visible,
.skc-select:focus-visible,
.skc-textarea:focus-visible {
	outline: 2px solid var(--skc-primary);
	outline-offset: 1px;
}

/* Quantity stepper — shared atom used by cart and single-product add-to-cart.
   Markup is emitted by the woocommerce/global/quantity-input.php template override
   (see <div class="quantity skc-quantity"> with ± buttons + input). */
.skc-quantity {
	display: inline-flex;
	align-items: stretch;
	height: 40px;
	border: 2px solid var(--skc-primary);
	background: var(--skc-on-primary);
}

.skc-quantity__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	border: 0;
	background: transparent;
	color: var(--skc-primary);
	font: 600 var(--skc-body-md) 'Inter', sans-serif;
	cursor: pointer;
	transition: background-color var(--skc-transition), color var(--skc-transition);
}

.skc-quantity__btn:hover,
.skc-quantity__btn:focus-visible {
	background: var(--skc-secondary-container);
	color: var(--skc-primary);
	outline: none;
}

.skc-quantity__btn:active {
	transform: scale(0.95);
}

.skc-quantity__input {
	width: 40px;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--skc-primary);
	font: 600 var(--skc-body-md) 'Inter', sans-serif;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

.skc-quantity__input::-webkit-outer-spin-button,
.skc-quantity__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.skc-notice {
	padding: var(--skc-sm) var(--skc-md);
	border: 1px solid var(--skc-primary);
	background: var(--skc-on-primary);
	color: var(--skc-primary);
	margin-bottom: var(--skc-md);
}

.skc-notice--error {
	border-color: var(--skc-error);
	color: var(--skc-error);
}

.skc-notice--success {
	border-color: var(--skc-primary);
	background: var(--skc-primary);
	color: var(--skc-on-primary);
}

.skc-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--skc-md);
	padding: var(--skc-xl) var(--skc-margin-mobile);
	text-align: center;
}

.skc-sidebar {
	width: 100%;
	flex-shrink: 0;
	background: var(--skc-surface);
	color: var(--skc-primary);
	border-bottom: 1px solid var(--skc-primary);
	padding: var(--skc-md) 0;
	text-transform: uppercase;
	font-size: var(--skc-label-md);
	font-weight: 600;
}

@media (min-width: 768px) {
	.skc-sidebar {
		width: var(--skc-sidebar-width);
		border-bottom: 0;
		border-right: 1px solid var(--skc-primary);
		padding: var(--skc-md) 0;
		display: flex;
		flex-direction: column;
	}
}

.skc-card {
	background: var(--skc-on-primary);
	border: var(--skc-border);
	padding: var(--skc-md);
}

.skc-link {
	color: inherit;
	text-decoration: none;
}

.skc-link:hover,
.skc-link:focus-visible {
	text-decoration: underline;
}

/* Form field — label + input wrapper used by checkout, account forms, etc.
   Modifier --half takes 50% of the parent grid; --wide takes 100%. */
.skc-field {
	display: flex;
	flex-direction: column;
	gap: var(--skc-xs);
	min-width: 0;
}

.skc-field__label {
	font-family: 'Inter', sans-serif;
	font-size: var(--skc-label-md);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--skc-secondary);
}

.skc-field__label--required::after {
	content: ' *';
	color: var(--skc-error);
}

.skc-field__input,
.skc-field__select,
.skc-field__textarea {
	width: 100%;
	padding: var(--skc-sm);
	border: var(--skc-border);
	background: var(--skc-on-primary);
	color: var(--skc-on-background);
	font-family: inherit;
	font-size: var(--skc-body-md);
	box-sizing: border-box;
}

.skc-field__input:focus-visible,
.skc-field__select:focus-visible,
.skc-field__textarea:focus-visible {
	outline: 2px solid var(--skc-primary);
	outline-offset: 1px;
	border-color: var(--skc-primary);
}

.skc-field--half { grid-column: span 6; }
.skc-field--wide { grid-column: span 12; }
.skc-field--error .skc-field__input,
.skc-field--error .skc-field__select,
.skc-field--error .skc-field__textarea {
	border-color: var(--skc-error);
}

/* Section head — h2 with border-bottom used to title form sections. */
.skc-section-head {
	display: flex;
	flex-direction: column;
	gap: var(--skc-sm);
	padding-bottom: var(--skc-sm);
	margin-bottom: var(--skc-md);
	border-bottom: var(--skc-border-subtle);
}

.skc-section-head__title {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--skc-secondary);
}

/* Radio card — payment method wrapper. The native radio is hidden; the
   card itself becomes the clickable target. MP and BACS render their UI
   inside the label. */
.skc-radio-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--skc-xs);
	padding: var(--skc-md);
	border: 2px solid var(--skc-surface-container-highest);
	cursor: pointer;
	transition: border-color var(--skc-transition);
}

.skc-radio-card:hover {
	border-color: var(--skc-primary);
}

.skc-radio-card:has(.skc-radio-card__input:checked),
.skc-radio-card--selected {
	border-color: var(--skc-primary);
}

.skc-radio-card__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 1px;
	height: 1px;
}

.skc-radio-card__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--skc-xs);
	width: 100%;
}

/* Coupon form — input + ghost button row. Used by both cart totals and
   the checkout form-coupon. */
.skc-coupon-form {
	display: flex;
	gap: var(--skc-xs);
}

.skc-coupon-form__input {
	flex: 1 1 auto;
	min-width: 0;
}

.skc-coupon-form__button {
	flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
	.skc-btn,
	.product-card-image,
	.product-card .product-card-image img {
		transition: none;
	}

	.skc-quantity__btn {
		transition: none;
	}

	.skc-quantity__btn:active {
		transform: none;
	}
}

/* ====================================================================
 * Toast region (shared)
 * --------------------------------------------------------------------
 * Converts WP / WooCommerce inline notices (`.woocommerce-message`,
 * `.woocommerce-error`, `.woocommerce-info`, generic `[role="alert"]`,
 * plus the bundle wizard's `.skc-bundle__notice`) into a fixed,
 * full-width stack pinned to the top of the viewport that auto-hides
 * after 5 s with a progress bar that drains to zero (visual countdown).
 *
 * Each source notice stays in the DOM but is hidden — the JS sets
 * `data-skc-toast="1"` and the global rule below (`[data-skc-toast="1"]
 * { display: none }`) collapses it. That way WC core continues to manage
 * its notice wrappers without surprises, and the visitor only ever sees
 * the toast.
 *
 * Atom: `.skc-toast` is the body of a single notification,
 * `.skc-toast-region` is the stack container pinned to the top.
 * ==================================================================== */

.skc-toast-region {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	pointer-events: none;
}

.skc-toast {
	position: relative;
	pointer-events: auto;
	width: 100%;
	background: var(--skc-primary);
	color: var(--skc-on-primary);
	padding: var(--skc-md) var(--skc-lg);
	font-family: 'Inter', sans-serif;
	font-size: var(--skc-label-md);
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	opacity: 0;
	transform: translateY(-100%);
	transition: opacity var(--skc-transition), transform var(--skc-transition);
	overflow: hidden;
}

.skc-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.skc-toast.is-error {
	background: var(--skc-error, #b3261e);
}

.skc-toast.is-info {
	background: var(--skc-secondary, #4a4a4a);
}

.skc-toast a {
	color: inherit;
	text-decoration: underline;
}

.skc-toast a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/*
 * Batched list view — when multiple notices of the same kind arrive
 * within COALESCE_MS (see js/main.js), the toast renders them as a
 * single `<ul>` instead of stacking three separate bars. Keeps the
 * countdown bar to one row.
 */
.skc-toast__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-block;
	text-align: left;
}

.skc-toast__list > li + li {
	margin-top: 2px;
}

.skc-toast__more {
	color: inherit;
	opacity: 0.8;
}

/*
 * Progress bar — drains from full-width to zero over 5 s. Anchored to
 * the top of the toast so it doesn't compete with the text line-height.
 * `transform: scaleX` is GPU-cheap and avoids layout thrashing on every
 * frame. `forwards` keeps the final state (scaleX(0)) after the
 * animation finishes.
 */
.skc-toast::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: currentColor;
	opacity: 0.5;
	transform-origin: left center;
	transform: scaleX(1);
	animation: skc-toast-progress 5s linear forwards;
}

@keyframes skc-toast-progress {
	from { transform: scaleX(1); }
	to   { transform: scaleX(0); }
}

/*
 * Source notices that the JS has already turned into a toast get hidden
 * from the layout entirely. The `!important` overrides any WC rule that
 * would otherwise force the inline notice visible (e.g. `.alert` rules
 * from WC core). The JS also sets `aria-hidden="true"` on these for
 * assistive tech.
 */
[data-skc-toast="1"] {
	display: none !important;
}

/*
 * Stacking: newer toasts push older ones down instead of stacking on
 * top, so the latest event always sits at the top edge of the viewport.
 */
.skc-toast + .skc-toast {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ====================================================================
 * WhatsApp floating button
 * --------------------------------------------------------------------
 * Los estilos viven en `css/whatsapp.css` (mirror del patrón de
 * `css/wishlist.css`). La única concesión acá es el override por
 * prefers-reduced-motion que skc-base.css centraliza para todo
 * el site.
 * ==================================================================== */

@media (prefers-reduced-motion: reduce) {
	.skc-whatsapp-button {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.skc-toast {
		transition: none;
		transform: none;
	}
	.skc-toast::before {
		animation: none;
		transform: scaleX(0);
	}
}

/* ====================================================================
 * Contact form (shared)
 * --------------------------------------------------------------------
 * Originally lived in `home.css` scoped to `.skc-home__contact*` — now
 * neutral `.skc-contact*` so the same form renders identically on the
 * home, the nosotros page, and any future page that wants one. See
 * `tobi_skatechop_child_render_contact_form()` in functions.php.
 *
 * The wrapping section (e.g. `.skc-home__section`,
 * `.skc-about__section`) gives the rhythm / max-width of each page and
 * supplies the dark background; this rule just paints the actual form
 * surface.
 * ==================================================================== */

.skc-contact {
	background-color: var(--skc-primary);
	color: var(--skc-on-primary);
}

.skc-contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--skc-xl);
	max-width: var(--skc-max-width);
	margin: 0 auto;
	padding: 0 var(--skc-margin-mobile);
}

@media (min-width: 768px) {
	.skc-contact-grid {
		grid-template-columns: 1fr 1.4fr;
		padding: 0 var(--skc-margin-desktop);
	}
}

.skc-contact-title {
	margin: 0 0 var(--skc-lg);
	font-family: 'Inter', sans-serif;
	font-size: var(--skc-display-lg);
	line-height: 1.05;
	font-weight: 900;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--skc-on-primary);
}

.skc-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--skc-sm);
}

.skc-contact-list li {
	display: flex;
	align-items: center;
	gap: var(--skc-sm);
	font-family: 'Inter', sans-serif;
	font-size: var(--skc-label-md);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--skc-on-primary);
}

.skc-contact-list .material-symbols-outlined {
	color: rgba(255, 255, 255, 0.5);
	font-size: 20px;
}

.skc-contact-list a {
	color: var(--skc-on-primary);
	text-decoration: none;
}

.skc-contact-list a:hover,
.skc-contact-list a:focus-visible {
	text-decoration: underline;
}

.skc-contact-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--skc-md);
}

/*
 * `--wide` override on mobile.
 *
 * El base CSS de `.skc-field--wide` aplica `grid-column: span 12` en
 * *todos* los contexts. En el form mobile (1 columna) eso crea 11
 * columnas implícitas de 0px para acomodar el span 12, exprimiendo
 * la columna explícita `1fr` a ~112px y dejando los campos sin
 * `--wide` (Nombre, Email) en columnas de 0px con un layout roto.
 *
 * Override mobile: en 1 columna, "wide" significa "ocupá la única
 * columna que hay". En >=600px se sobreescribe a `1 / -1` para
 * abarcarla toda fila de 2 columnas.
 */
.skc-contact-form .skc-field--wide {
	grid-column: 1;
}

@media (min-width: 600px) {
	.skc-contact-form {
		grid-template-columns: 1fr 1fr;
	}

	.skc-contact-form .skc-field--wide {
		grid-column: 1 / -1;
	}
}

.skc-contact-form .skc-field__label {
	color: rgba(255, 255, 255, 0.6);
}

.skc-contact-form .skc-field__input,
.skc-contact-form .skc-field__textarea {
	background-color: transparent;
	border: 0;
	border-bottom: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 0;
	color: var(--skc-on-primary);
	/*
	 * Padding horizontal 4px: el texto no toca el borde inferior (que
	 * es el único indicador visible). 14px vertical mantiene la línea
	 * de base con la versión original.
	 */
	padding: 14px 4px;
	font-family: 'Inter', sans-serif;
	/*
	 * 16px es el umbral mínimo de iOS para no auto-zoomear al focus
	 * (Mobile Safari escala la página cuando el input tiene <16px).
	 * En desktop no causa zoom — sólo es legible. Sin esto el form
	 * funciona pero la UX mobile queda rota.
	 */
	font-size: 16px;
	font-weight: 600;
	/*
	 * letter-spacing más chico (0.02em) que el original (0.05em).
	 * El alto letter-spacing en inputs causa problemas de posición del
	 * cursor en mobile — el browser no siempre coincide la posición
	 * del tap con el carácter, especialmente en iOS Safari.
	 */
	letter-spacing: 0.02em;
	/*
	 * Sin text-transform: el usuario escribe su nombre/email tal cual.
	 * El label (que está en su propio elemento) sí queda uppercase via
	 * .skc-field__label. La mezcla anterior (label uppercase + input
	 * uppercase) confundía: el usuario escribía "juan" y veía "JUAN",
	 * y el autocompletar del navegador renderizaba más raro todavía.
	 */
}

.skc-contact-form .skc-field__input::placeholder,
.skc-contact-form .skc-field__textarea::placeholder {
	color: rgba(255, 255, 255, 0.3);
}

.skc-contact-form .skc-field__input:focus-visible,
.skc-contact-form .skc-field__textarea:focus-visible {
	outline: none;
	border-bottom-color: var(--skc-on-primary);
}

/*
 * Textarea —補足.
 * Con rows=5 + font-size 16px el alto natural es ~108px; debajo de
 * eso el textarea se vuelve incómodo para tipear en mobile porque
 * el dedo tapa la línea que estás escribiendo. min-height 120px
 * garantiza un área usable aún con contenido corto. resize: vertical
 * deja que el usuario expanda el área si necesita más espacio.
 */
.skc-contact-form .skc-field__textarea {
	min-height: 120px;
	resize: vertical;
}

.skc-contact-form .skc-field--error .skc-field__input,
.skc-contact-form .skc-field--error .skc-field__textarea {
	border-bottom-color: var(--skc-error);
}

/* Honeypot — hidden visually and from assistive tech. */
.skc-contact-honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.skc-contact-actions {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: var(--skc-md);
	flex-wrap: wrap;
}

.skc-contact-status {
	font-family: 'Inter', sans-serif;
	font-size: var(--skc-body-md);
	color: var(--skc-on-primary);
}

.skc-contact-status[data-state="error"] {
	color: #ffb4ab;
}

.skc-contact-status[data-state="success"] {
	color: #b4ffb4;
}

/* The submit button reuses .skc-btn--primary; it sits on dark bg, so we
 * make it solid black-on-white per the design. */
.skc-contact .skc-btn--primary {
	background-color: var(--skc-on-primary);
	color: var(--skc-primary);
}

.skc-contact .skc-btn--primary:hover,
.skc-contact .skc-btn--primary:focus-visible {
	background-color: rgba(255, 255, 255, 0.9);
}

.skc-contact .skc-btn--primary:focus-visible {
	outline: 2px solid var(--skc-on-primary);
	outline-offset: 3px;
}