/**
 * Palace Shoes — estilos base, cabecera, pie y componentes compartidos.
 * Los estilos de catálogo y ficha de producto viven en woocommerce.css.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--ps-brand: #e0131a;
	--ps-brand-dark: #b30f15;
	/* El rojo de marca da 4.47:1 sobre blanco: se queda a un pelo del mínimo
	   para texto pequeño. Esta variante apenas más oscura llega a 5.7:1 y es
	   indistinguible a tamaños de 11-13 px. Los fondos y áreas grandes siguen
	   usando --ps-brand. */
	--ps-brand-text: #cc1119;
	--ps-ink: #111111;
	--ps-ink-soft: #3f3f46;
	/* Gris mínimo para texto: 5.3:1 sobre blanco y 4.8:1 sobre --ps-surface,
	   que es donde se queda corto un gris más claro. */
	--ps-muted: #6b6b73;
	/* Sólo para bordes, iconos decorativos y separadores: 2.56:1 no basta para
	   texto, así que nunca debe usarse en algo que haya que leer. */
	--ps-muted-light: #a1a1aa;
	--ps-border: #e4e4e7;
	--ps-border-strong: #d4d4d8;
	--ps-surface: #f4f4f5;
	--ps-base: #ffffff;
	--ps-success: #15803d;
	/* Verde de WhatsApp oscurecido: el #25d366 de marca sólo da 1.96:1 con
	   texto blanco, insuficiente incluso para elementos gráficos. */
	--ps-whatsapp: #0c7a4d;
	--ps-whatsapp-dark: #0a6440;

	--ps-max: 1440px;
	--ps-gutter: clamp(1rem, 4vw, 2.5rem);
	--ps-adminbar: 0px;

	--ps-topbar-h: 32px;
	--ps-header-h: 68px;
	--ps-nav-h: 44px;

	--ps-radius: 0px;
	--ps-radius-pill: 999px;

	--ps-shadow-sm: 0 1px 2px rgba(17, 17, 17, .06);
	--ps-shadow-card: 0 4px 20px rgba(17, 17, 17, .08);
	--ps-shadow-pop: 0 12px 40px rgba(17, 17, 17, .14);

	--ps-ease: cubic-bezier(.4, 0, .2, 1);
	--ps-t: .22s var(--ps-ease);

	--ps-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   2. Reset
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--ps-base);
	color: var(--ps-ink);
	font-family: var(--ps-font);
	/* 14 px, la medida que usan las dos tiendas de referencia. */
	font-size: .875rem;
	line-height: 1.6;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

body.ps-no-scroll { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ps-brand); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1em; padding-left: 1.25rem; }

hr { border: 0; border-top: 1px solid var(--ps-border); margin: 2rem 0; }

table { border-collapse: collapse; width: 100%; }

:focus-visible {
	outline: 2px solid var(--ps-brand);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	background: var(--ps-ink);
	color: #fff;
	padding: .75rem 1.25rem;
	font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ==========================================================================
   3. Layout
   ========================================================================== */

.ps-container {
	width: 100%;
	max-width: var(--ps-max);
	margin-inline: auto;
	padding-inline: var(--ps-gutter);
}

.ps-container--narrow { max-width: 860px; }

/* Ritmo medido: suficiente para separar bloques, sin los huecos enormes que
   dejan la portada con aspecto de maqueta a medio llenar. */
.ps-section { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }
.ps-section--tight { padding-block: clamp(1.75rem, 3.5vw, 2.5rem); }
.ps-section--surface { background: var(--ps-surface); }

/* Para las tiras a sangre: el titular va en el contenedor, la tira no. */
.ps-section--flush { padding-inline: 0; }
.ps-section--flush > .ps-container { padding-inline: var(--ps-gutter); }

.ps-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.ps-section__head--center {
	justify-content: center;
	text-align: center;
}

/* Tracking casi nulo: el espaciado amplio entre letras es lo que delata una
   plantilla. Las tiendas de referencia usan 0 en todos sus rótulos. */
.ps-section__title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .01em;
}

.ps-section__link {
	font-size: .8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .025em;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	white-space: nowrap;
}

.ps-section__tools {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex: 0 0 auto;
}

@media (max-width: 560px) {
	.ps-section__tools .ps-carousel__nav { display: none; }
}

.ps-main { min-height: 45vh; }

/* ==========================================================================
   4. Botones
   ========================================================================== */

.ps-btn,
.ps-main .button,
.ps-main button[type="submit"]:not(.ps-plain) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .875rem 1.75rem;
	background: var(--ps-ink);
	color: #fff;
	border: 1px solid var(--ps-ink);
	border-radius: var(--ps-radius);
	font-size: .8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .025em;
	line-height: 1.2;
	text-align: center;
	transition: background var(--ps-t), color var(--ps-t), border-color var(--ps-t);
}

.ps-btn:hover,
.ps-main .button:hover,
.ps-main button[type="submit"]:not(.ps-plain):hover {
	background: var(--ps-brand);
	border-color: var(--ps-brand);
	color: #fff;
}

.ps-btn--brand { background: var(--ps-brand); border-color: var(--ps-brand); }
.ps-btn--brand:hover { background: var(--ps-brand-dark); border-color: var(--ps-brand-dark); }

.ps-btn--ghost {
	background: transparent;
	color: var(--ps-ink);
}
.ps-btn--ghost:hover { background: var(--ps-ink); color: #fff; }

/* Sobre foto: contorno en vez de bloque blanco, que tapa la imagen. */
.ps-btn--light {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .85);
	backdrop-filter: blur(2px);
}
.ps-btn--light:hover { background: #fff; border-color: #fff; color: var(--ps-ink); }

.ps-btn--block { width: 100%; }
.ps-btn--sm { padding: .625rem 1.125rem; font-size: .75rem; }

.ps-btn[disabled],
.ps-btn.is-disabled {
	opacity: .45;
	pointer-events: none;
}

/* ==========================================================================
   5. Formularios
   ========================================================================== */

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"], input[type="date"],
textarea, select {
	width: 100%;
	padding: .75rem 1rem;
	background: #fff;
	border: 1px solid var(--ps-border-strong);
	border-radius: var(--ps-radius);
	font-size: .9375rem;
	transition: border-color var(--ps-t);
}

input:focus, textarea:focus, select:focus {
	border-color: var(--ps-ink);
	outline: none;
}

select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23111' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 12px;
	padding-right: 2.5rem;
}

label { font-size: .8125rem; font-weight: 600; }

/* ==========================================================================
   6. Topbar
   ========================================================================== */

.ps-topbar {
	background: var(--ps-ink);
	color: #fff;
	font-size: .75rem;
	letter-spacing: .04em;
}

.ps-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--ps-topbar-h);
}

.ps-topbar__message {
	flex: 1;
	text-align: center;
	font-weight: 500;
	text-transform: uppercase;
}

.ps-topbar__message strong { color: #fff; }

.ps-topbar__links {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ps-topbar a { color: rgba(255, 255, 255, .82); }
.ps-topbar a:hover { color: #fff; }

@media (max-width: 900px) {
	.ps-topbar__links { display: none; }
}

/* En móvil el mensaje se parte en dos líneas: se compacta para que la barra no
   se coma la primera pantalla. */
@media (max-width: 640px) {
	.ps-topbar {
		font-size: .6875rem;
		letter-spacing: .02em;
	}

	.ps-topbar__inner {
		min-height: 0;
		padding-block: .375rem;
	}

	.ps-topbar__message { line-height: 1.35; }
	.ps-topbar__phone { display: none; }
}

/* ==========================================================================
   7. Header
   ========================================================================== */

.ps-header {
	position: sticky;
	top: var(--ps-adminbar);
	z-index: 200;
	background: #fff;
	border-bottom: 1px solid var(--ps-border);
}

.ps-header__bar {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	min-height: var(--ps-header-h);
	transition: min-height .25s var(--ps-ease);
}

/* El burger y el logo comparten esta celda. Sin flex son dos bloques, y en
   cuanto aparece el burger (≤1024 px) el logo cae a una segunda línea: la
   cabecera pasa de 68 a 85 px justo en las pantallas donde menos alto sobra. */
.ps-header__left {
	display: flex;
	align-items: center;
	gap: .625rem;
}

/* Al bajar, la cabecera se contrae y deja la pantalla para el catálogo. */
.ps-header.is-stuck .ps-header__bar { min-height: 56px; }
.ps-header.is-stuck .ps-brand img,
.ps-header.is-stuck .ps-brand .custom-logo { max-height: 34px; }
.ps-header.is-stuck .ps-nav__list > li > a { min-height: 38px; }
.ps-header.is-stuck .ps-search__form { background: #fff; border-color: var(--ps-border); }

.ps-brand img,
.ps-brand .custom-logo,
.ps-nav__list > li > a { transition: max-height .25s var(--ps-ease), min-height .25s var(--ps-ease); }

.ps-brand { display: flex; align-items: center; }

.ps-brand img,
.ps-brand .custom-logo {
	max-height: 44px;
	width: auto;
}

.ps-brand__text {
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: var(--ps-brand);
}

/* --- Buscador --- */

.ps-search {
	position: relative;
	/* A ancho completo el campo domina la cabecera y aplasta logo y acciones. */
	max-width: 520px;
	width: 100%;
	justify-self: center;
}

.ps-search__form {
	display: flex;
	align-items: center;
	background: var(--ps-surface);
	border: 1px solid transparent;
	transition: border-color var(--ps-t), background var(--ps-t);
}

.ps-search__form:focus-within {
	background: #fff;
	border-color: var(--ps-ink);
}

.ps-search__input {
	flex: 1;
	border: 0;
	background: transparent;
	padding: .75rem 1rem;
	font-size: .875rem;
}
.ps-search__input:focus { outline: none; }

.ps-search__submit {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--ps-ink);
	flex: 0 0 44px;
}
.ps-search__submit:hover { color: var(--ps-brand); }

.ps-search__results {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + .5rem);
	background: #fff;
	border: 1px solid var(--ps-border);
	box-shadow: var(--ps-shadow-pop);
	max-height: 70vh;
	overflow-y: auto;
	z-index: 60;
	display: none;
}
.ps-search__results.is-open { display: block; }

.ps-search__item {
	display: flex;
	align-items: center;
	gap: .875rem;
	padding: .625rem .875rem;
	border-bottom: 1px solid var(--ps-border);
}
.ps-search__item:last-child { border-bottom: 0; }
.ps-search__item:hover { background: var(--ps-surface); }

.ps-search__thumb {
	width: 52px;
	height: 52px;
	flex: 0 0 52px;
	object-fit: cover;
	background: var(--ps-surface);
}

.ps-search__name { font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.ps-search__brand { font-size: .6875rem; color: var(--ps-muted); text-transform: uppercase; letter-spacing: .025em; }
.ps-search__price { margin-left: auto; font-size: .8125rem; font-weight: 700; white-space: nowrap; }
.ps-search__price del { color: var(--ps-muted); font-weight: 400; margin-right: .375rem; }

.ps-search__empty,
.ps-search__loading {
	padding: 1.25rem;
	text-align: center;
	font-size: .8125rem;
	color: var(--ps-muted);
}

.ps-search__all {
	display: block;
	padding: .875rem;
	text-align: center;
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	background: var(--ps-surface);
}

/* --- Acciones --- */

.ps-actions {
	display: flex;
	align-items: center;
	gap: clamp(.5rem, 1.5vw, 1.25rem);
	/* Entre 768 y 1024 px el buscador está oculto y el logo centrado también,
	   así que sólo quedan dos hijos y los iconos caen en la columna del medio:
	   sin esto se quedan a media pantalla en vez de pegados a la derecha. */
	justify-self: end;
}

.ps-action {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--ps-ink);
}
.ps-action:hover { color: var(--ps-brand); }
.ps-action svg { width: 22px; height: 22px; }

.ps-action__count {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	display: grid;
	place-items: center;
	background: var(--ps-brand);
	color: #fff;
	border-radius: var(--ps-radius-pill);
	font-size: .625rem;
	font-weight: 700;
	line-height: 1;
}

.ps-action__count:empty,
.ps-action__count[data-count="0"] { display: none; }

.ps-burger { display: none; }

/* ==========================================================================
   8. Navegación principal
   ========================================================================== */

.ps-nav {
	border-top: 1px solid var(--ps-border);
	background: #fff;
}

.ps-nav__list {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: clamp(1rem, 2.5vw, 2.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ps-nav__list > li { position: relative; }

.ps-nav__list > li > a {
	display: flex;
	align-items: center;
	min-height: var(--ps-nav-h);
	font-size: .8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	white-space: nowrap;
	position: relative;
}

.ps-nav__list > li > a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--ps-brand);
	transform: scaleX(0);
	transition: transform var(--ps-t);
}

.ps-nav__list > li:hover > a::after,
.ps-nav__list > li.current-menu-item > a::after,
.ps-nav__list > li.current-menu-parent > a::after { transform: scaleX(1); }

.ps-nav__list > li.menu-sale > a { color: var(--ps-brand); }

/* --- Submenú simple --- */

.ps-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	min-width: 220px;
	background: #fff;
	border: 1px solid var(--ps-border);
	box-shadow: var(--ps-shadow-pop);
	list-style: none;
	margin: 0;
	padding: .5rem 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ps-t), transform var(--ps-t), visibility var(--ps-t);
	z-index: 50;
}

.ps-nav__list > li:hover > .sub-menu,
.ps-nav__list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.ps-nav .sub-menu a {
	display: block;
	padding: .5rem 1.25rem;
	font-size: .875rem;
	white-space: nowrap;
}
.ps-nav .sub-menu a:hover { background: var(--ps-surface); color: var(--ps-brand); }

/* --- Mega menú de marcas --- */

.ps-nav .menu-mega { position: static; }

.ps-nav .menu-mega > .sub-menu {
	left: 0;
	right: 0;
	transform: translateY(6px);
	width: 100%;
	max-width: var(--ps-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: .25rem 1.5rem;
	padding: 2rem var(--ps-gutter);
}

.ps-nav .menu-mega:hover > .sub-menu,
.ps-nav .menu-mega:focus-within > .sub-menu { transform: translateY(0); }

.ps-nav .menu-mega > .sub-menu a {
	padding: .5rem 0;
	font-size: .875rem;
	font-weight: 500;
	border-bottom: 1px solid var(--ps-border);
}
.ps-nav .menu-mega > .sub-menu a:hover { background: none; padding-left: .375rem; }

/* ==========================================================================
   9. Menú móvil
   ========================================================================== */

.ps-drawer {
	position: fixed;
	inset: 0;
	z-index: 400;
	visibility: hidden;
	pointer-events: none;
}
.ps-drawer.is-open { visibility: visible; pointer-events: auto; }

.ps-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, .5);
	opacity: 0;
	transition: opacity var(--ps-t);
}
.ps-drawer.is-open .ps-drawer__scrim { opacity: 1; }

.ps-drawer__panel {
	position: absolute;
	inset-block: 0;
	left: 0;
	width: min(88vw, 380px);
	background: #fff;
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform .28s var(--ps-ease);
}
.ps-drawer.is-open .ps-drawer__panel { transform: translateX(0); }

.ps-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--ps-border);
}

.ps-drawer__close {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	margin-right: -.5rem;
}

.ps-drawer__body { flex: 1; overflow-y: auto; padding-bottom: 2rem; }

.ps-drawer__menu,
.ps-drawer__menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ps-drawer__menu li { border-bottom: 1px solid var(--ps-border); }

.ps-drawer__menu a {
	display: block;
	padding: .9375rem 1.25rem;
	font-size: .9375rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.ps-drawer__menu .menu-sale > a { color: var(--ps-brand); }

.ps-drawer__menu .sub-menu {
	display: none;
	background: var(--ps-surface);
}
.ps-drawer__menu li.is-open > .sub-menu { display: block; }

.ps-drawer__menu .sub-menu a {
	padding-left: 2.25rem;
	font-size: .875rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.ps-drawer__menu li.menu-item-has-children > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ps-drawer__toggle {
	flex: 0 0 auto;
	width: 32px; height: 32px;
	display: grid;
	place-items: center;
	margin: -.5rem -.5rem -.5rem 0;
	transition: transform var(--ps-t);
}
.ps-drawer__menu li.is-open > a .ps-drawer__toggle { transform: rotate(180deg); }

.ps-drawer__foot {
	border-top: 1px solid var(--ps-border);
	padding: 1.25rem;
	display: grid;
	gap: .625rem;
}

@media (max-width: 1024px) {
	.ps-nav { display: none; }
	.ps-burger {
		display: grid;
		place-items: center;
		width: 40px; height: 40px;
	}
	.ps-header__bar {
		grid-template-columns: auto 1fr auto;
		gap: .75rem;
	}
	.ps-header__search { display: none; }
	.ps-header__search.is-mobile-open {
		display: block;
		grid-column: 1 / -1;
		padding-bottom: .875rem;
	}
	.ps-brand { justify-content: center; }
}

/* Monitores y televisores antiguos (768–1024 px): ni buscador ni logo centrado,
   así que la barra sólo tiene dos celdas. Con la tercera columna los iconos
   quedaban separados del borde por el gap sobrante. */
@media (min-width: 768px) and (max-width: 1024px) {
	.ps-header__bar { grid-template-columns: auto minmax(0, 1fr); }
}

@media (min-width: 1025px) {
	.ps-search-toggle { display: none; }
}

/* ==========================================================================
   10. Footer
   ========================================================================== */

.ps-footer {
	background: var(--ps-ink);
	color: rgba(255, 255, 255, .72);
	font-size: .875rem;
	margin-top: clamp(3rem, 8vw, 5rem);
}

.ps-footer a { color: rgba(255, 255, 255, .72); }
.ps-footer a:hover { color: #fff; }

.ps-footer__top {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

.ps-footer__heading,
.ps-footer .ps-widget__title {
	color: #fff;
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .035em;
	margin-bottom: 1.125rem;
}

.ps-footer ul { list-style: none; margin: 0; padding: 0; }
.ps-footer li { margin-bottom: .625rem; }

.ps-footer__brand img { max-height: 44px; width: auto; margin-bottom: 1.125rem; }

/* Sin versión clara subida, el logo de cabecera se pasa a blanco: el rojo de
   marca sobre el pie negro no alcanza contraste suficiente. */
.ps-footer__logo--invert { filter: brightness(0) invert(1); opacity: .92; }
.ps-footer__about { max-width: 34ch; line-height: 1.7; }

.ps-footer__contact { margin-top: 1.25rem; display: grid; gap: .5rem; }
.ps-footer__contact li { display: flex; align-items: flex-start; gap: .625rem; margin: 0; }
.ps-footer__contact svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: .2rem; opacity: .7; }

.ps-social { display: flex; gap: .625rem; margin-top: 1.5rem; }
.ps-social a {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border: 1px solid rgba(255, 255, 255, .2);
	transition: background var(--ps-t), border-color var(--ps-t);
}
.ps-social a:hover { background: var(--ps-brand); border-color: var(--ps-brand); }
.ps-social svg { width: 17px; height: 17px; }

.ps-newsletter__form {
	display: flex;
	margin-top: 1rem;
	border: 1px solid rgba(255, 255, 255, .25);
}
.ps-newsletter__form input {
	flex: 1;
	background: transparent;
	border: 0;
	color: #fff;
	padding: .75rem .875rem;
	font-size: .8125rem;
}
.ps-newsletter__form input::placeholder { color: rgba(255, 255, 255, .45); }
.ps-newsletter__form input:focus { outline: none; }
.ps-newsletter__form button {
	background: var(--ps-brand);
	color: #fff;
	padding: 0 1.25rem;
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	transition: background var(--ps-t);
}
.ps-newsletter__form button:hover { background: #fff; color: var(--ps-ink); }

.ps-footer__pay {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 1.25rem;
}
.ps-footer__pay span {
	display: grid;
	place-items: center;
	height: 30px;
	padding: 0 .625rem;
	background: rgba(255, 255, 255, .1);
	border-radius: 3px;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: #fff;
}

.ps-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-block: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: .75rem;
}

.ps-footer__legal {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ps-footer__legal li { margin: 0; }

/* El Libro de Reclamaciones es obligatorio para comercios en Perú. */
.ps-book {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	border: 1px solid rgba(255, 255, 255, .28);
	padding: .5rem .75rem;
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .025em;
	font-weight: 600;
}
.ps-book:hover { border-color: #fff; }
.ps-book svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
	.ps-footer__top { grid-template-columns: repeat(2, 1fr); }
	.ps-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
	.ps-footer__top { grid-template-columns: 1fr; }
	.ps-footer__bottom { justify-content: center; text-align: center; }
}

/* ==========================================================================
   11. WhatsApp flotante
   ========================================================================== */

.ps-wa {
	position: fixed;
	right: clamp(1rem, 3vw, 1.75rem);
	bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: 300;
	display: flex;
	align-items: center;
	gap: .625rem;
	min-height: 52px;
	padding: .75rem 1.25rem .75rem 1rem;
	background: var(--ps-whatsapp);
	color: #fff;
	border-radius: var(--ps-radius-pill);
	box-shadow: var(--ps-shadow-pop);
	font-size: .8125rem;
	font-weight: 600;
	transition: transform var(--ps-t), background var(--ps-t);
}
.ps-wa:hover { background: var(--ps-whatsapp-dark); color: #fff; transform: translateY(-2px); }
.ps-wa svg { width: 22px; height: 22px; flex: 0 0 22px; }

@media (max-width: 560px) {
	.ps-wa {
		width: 54px;
		padding: 0;
		justify-content: center;
	}
	.ps-wa__label { display: none; }
}

/* Aviso «Instala la tienda» (assets/js/install.js) ------------------------ */

.ps-install {
	position: fixed;
	left: .75rem;
	right: .75rem;
	bottom: calc(.75rem + env(safe-area-inset-bottom));
	z-index: 350;
	display: grid;
	grid-template-columns: auto 1fr auto;
	column-gap: .75rem;
	row-gap: .625rem;
	align-items: start;
	padding: .875rem .5rem .875rem .875rem;
	background: var(--ps-base);
	border: 1px solid var(--ps-border);
	border-radius: var(--ps-radius);
	box-shadow: var(--ps-shadow-pop);
	opacity: 0;
	transform: translateY(calc(100% + 1.5rem));
	transition: transform .32s var(--ps-ease), opacity .32s var(--ps-ease);
}
.ps-install.is-visible { opacity: 1; transform: none; }

.ps-install__icon {
	grid-row: 1 / span 2;
	width: 48px;
	height: 48px;
	border-radius: 11px;
}

.ps-install__body { grid-column: 2; grid-row: 1; min-width: 0; }
.ps-install__title { margin: 0 0 .125rem; font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.ps-install__text { margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--ps-ink-soft); }

/* El icono de Compartir de iOS, en azul como en Safari para que se reconozca. */
.ps-install__share { display: inline-block; vertical-align: -3px; color: #007aff; }

.ps-install__action {
	grid-column: 2 / span 2;
	grid-row: 2;
	justify-self: start;
	min-height: 40px;
}

.ps-install__close {
	grid-column: 3;
	grid-row: 1;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: -.375rem 0 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--ps-muted);
	cursor: pointer;
}
.ps-install__close:hover { color: var(--ps-ink); }

/*
 * En móvil el aviso ocupa el ancho y cae sobre el carril de los flotantes
 * (ver «Carriles de la esquina inferior derecha» en woocommerce.css): se
 * suben WhatsApp y el Libro de Reclamaciones lo que mida el aviso. El libro
 * es obligatorio en Perú y no puede quedar tapado. `html` delante gana a las
 * reglas de woocommerce.css, que cargan después y llevan el mismo peso.
 */
@media (max-width: 767px) {
	.ps-wa { transition: bottom .32s var(--ps-ease), transform var(--ps-t), background var(--ps-t); }

	body.ps-install-on .ps-wa { bottom: calc(var(--ps-install-h) + 1.5rem + env(safe-area-inset-bottom)); }
	html body.ps-install-on #lrpp-floating-icon { bottom: calc(var(--ps-install-h) + 1.5rem + 70px) !important; }
	html body.ps-install-on:not(:has(.ps-wa)) #lrpp-floating-icon { bottom: calc(var(--ps-install-h) + 1.5rem) !important; }
}

/* Tableta: tarjeta en la esquina izquierda, lejos de los flotantes. */
@media (min-width: 768px) {
	.ps-install {
		right: auto;
		left: 1.5rem;
		bottom: 1.5rem;
		width: min(420px, calc(100% - 7rem));
	}
}

@media (prefers-reduced-motion: reduce) {
	.ps-install { transition: opacity .2s linear; transform: none; }
}

/* ==========================================================================
   12. Modal
   ========================================================================== */

.ps-modal {
	position: fixed;
	inset: 0;
	z-index: 500;
	display: grid;
	place-items: center;
	padding: 1rem;
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--ps-t), visibility var(--ps-t);
}
.ps-modal.is-open { visibility: visible; opacity: 1; }

.ps-modal__scrim { position: absolute; inset: 0; background: rgba(17, 17, 17, .6); }

.ps-modal__box {
	position: relative;
	background: #fff;
	width: min(100%, 720px);
	max-height: 86vh;
	overflow-y: auto;
	box-shadow: var(--ps-shadow-pop);
	transform: translateY(12px);
	transition: transform .25s var(--ps-ease);
}
.ps-modal.is-open .ps-modal__box { transform: translateY(0); }

.ps-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--ps-border);
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 2;
}

.ps-modal__title { margin: 0; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: .02em; }

.ps-modal__close {
	display: grid;
	place-items: center;
	width: 36px; height: 36px;
	margin: -.5rem -.5rem -.5rem 0;
}
.ps-modal__close:hover { color: var(--ps-brand); }

.ps-modal__body { padding: 1.5rem; }

/* ==========================================================================
   13. Contenido editorial (blog, páginas)
   ========================================================================== */

.ps-page { padding-block: clamp(2rem, 5vw, 3.5rem); }

.ps-page__header { margin-bottom: 2rem; }
.ps-page__title { font-size: clamp(1.75rem, 4vw, 2.75rem); margin-bottom: .375rem; }
.ps-page__meta { font-size: .8125rem; color: var(--ps-muted); }

.ps-prose { max-width: 72ch; }
.ps-prose h2 { font-size: 1.5rem; margin-top: 2rem; }
.ps-prose h3 { font-size: 1.1875rem; margin-top: 1.5rem; }
.ps-prose img { margin-block: 1.5rem; }
.ps-prose blockquote {
	margin: 1.5rem 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--ps-brand);
	font-size: 1.0625rem;
	color: var(--ps-ink-soft);
}
.ps-prose table { margin-block: 1.5rem; font-size: .875rem; }
.ps-prose th, .ps-prose td { padding: .625rem .875rem; border: 1px solid var(--ps-border); text-align: left; }
.ps-prose th { background: var(--ps-surface); font-weight: 600; }

.ps-posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
}

.ps-post__thumb { background: var(--ps-surface); aspect-ratio: 3/2; overflow: hidden; margin-bottom: .875rem; }
.ps-post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ps-ease); }
.ps-post:hover .ps-post__thumb img { transform: scale(1.04); }
.ps-post__title { font-size: 1.0625rem; margin-bottom: .375rem; }
.ps-post__meta { font-size: .75rem; color: var(--ps-muted); text-transform: uppercase; letter-spacing: .025em; }

.ps-pagination {
	display: flex;
	justify-content: center;
	gap: .375rem;
	margin-top: 3rem;
}
.ps-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 .625rem;
	border: 1px solid var(--ps-border);
	font-size: .875rem;
	font-weight: 600;
}
.ps-pagination .page-numbers:hover { border-color: var(--ps-ink); }
.ps-pagination .page-numbers.current {
	background: var(--ps-ink);
	border-color: var(--ps-ink);
	color: #fff;
}

/*
 * Paginación de WooCommerce (tienda, categoría, marca...). Usa su propia
 * plantilla (loop/pagination.php) con la clase "woocommerce-pagination", no
 * "ps-pagination", así que no hereda el flex de arriba: sin esto se ve como
 * una lista con viñetas, una debajo de otra.
 */
.woocommerce-pagination { margin-top: 3rem; }
.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .375rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-pagination ul.page-numbers li { list-style: none; }
.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 .625rem;
	border: 1px solid var(--ps-border);
	font-size: .875rem;
	font-weight: 600;
}
.woocommerce-pagination a.page-numbers:hover { border-color: var(--ps-ink); }
.woocommerce-pagination span.page-numbers.current {
	background: var(--ps-ink);
	border-color: var(--ps-ink);
	color: #fff;
}
.woocommerce-pagination span.page-numbers.dots { border-color: transparent; }

/* 404 y estados vacíos */

.ps-empty {
	text-align: center;
	padding-block: clamp(3rem, 10vw, 6rem);
	max-width: 44ch;
	margin-inline: auto;
}
.ps-empty__code {
	font-size: clamp(4rem, 16vw, 8rem);
	font-weight: 800;
	line-height: 1;
	color: var(--ps-brand);
	letter-spacing: -.04em;
}
.ps-empty__title { font-size: clamp(1.25rem, 3vw, 1.75rem); margin-top: 1rem; }
.ps-empty p { color: var(--ps-muted); margin-bottom: 1.75rem; }

/* Widgets */

.ps-widget { margin-bottom: 2rem; }
.ps-widget__title {
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .035em;
	margin-bottom: .875rem;
}
.ps-widget ul { list-style: none; margin: 0; padding: 0; }
.ps-widget li { padding: .375rem 0; font-size: .875rem; }

/* Utilidades */

.ps-hide { display: none !important; }
.ps-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ==========================================================================
   14. Ajustes táctiles y de lectura
   Los enlaces de texto miden lo que mide su texto: en un dedo eso son objetivos
   de 15-20 px de alto. Aquí se les da área sin alterar la composición, usando
   un pseudo-elemento cuando agrandar la caja rompería el diseño.
   ========================================================================== */

@media (hover: none), (max-width: 767px) {

	/* Donde cabe, se agranda la caja de verdad: es más fiable que un
	   pseudo-elemento y se puede comprobar midiendo. */
	.ps-footer li a,
	.ps-footer__legal a {
		display: inline-block;
		padding-block: .875rem;
		line-height: 1.2;
	}

	.ps-footer__contact a {
		display: inline-block;
		padding-block: .5rem;
	}

	.ps-crumbs a,
	.ps-crumbs span {
		display: inline-block;
		padding-block: .625rem;
	}

	.ps-footer li { margin-bottom: .125rem; }
	.ps-footer__contact li { margin-bottom: .25rem; }

	/* Los puntos del hero son barras de 3 px: agrandarlas los afea, así que se
	   amplía sólo la zona sensible con un pseudo-elemento. */
	.ps-hero__dots button { position: relative; }

	.ps-hero__dots button::after {
		content: "";
		position: absolute;
		left: -8px;
		right: -8px;
		top: 50%;
		height: 44px;
		transform: translateY(-50%);
	}

	.ps-section__link {
		display: inline-block;
		padding-block: .5rem;
	}

	/* Controles con caja propia: se les da alto real. */
	.ps-carousel__nav button {
		width: 44px;
		height: 44px;
	}

	.ps-topbar__message { font-size: .6875rem; }
}

@media (max-width: 767px) {
	.ps-hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
	.ps-hide-desktop { display: none !important; }
}

/* Móvil: cabecera y zonas táctiles --------------------------------------- */

@media (max-width: 767px) {
	/*
	 * Sin logo subido, la cabecera cae al nombre en texto, y «PALACE SHOES» no
	 * entra en una línea a 375 px: se parte en dos y descuadra la cabecera.
	 * Al subir el logo esto deja de aplicarse solo, porque ya no se pinta el
	 * texto.
	 */
	.ps-brand__text {
		font-size: 1.125rem;
		letter-spacing: -.04em;
		white-space: nowrap;
	}

	/*
	 * Los iconos de cabecera miden 40 px. Se les amplía el área sensible a 44
	 * sin tocar el tamaño visible, que está calculado para que quepan los
	 * cuatro junto a la marca.
	 */
	.ps-action::after,
	.ps-burger::after {
		content: "";
		position: absolute;
		inset: -2px;
	}
	.ps-burger { position: relative; }
}

/* --- Panel visual del mega menú --- */

/*
 * Una columna de las del mega menú, pero con foto. Es lo que separa un
 * desplegable de un escaparate, y no cuesta mantenimiento: la imagen sale de
 * la categoría o, si no tiene, del catálogo.
 */
.ps-nav .menu-mega > .sub-menu .ps-mega__feature {
	grid-row: span 4;
	align-self: start;
}

.ps-mega__feature a {
	display: grid;
	gap: .5rem;
	padding: 0;
	border-bottom: 0;
}

.ps-mega__feature img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	background: var(--ps-surface);
}

.ps-mega__feature span {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	border-bottom: 1px solid currentColor;
	justify-self: start;
	padding-bottom: 2px;
}

.ps-mega__feature a:hover { padding-left: 0; }
.ps-mega__feature a:hover span { color: var(--ps-brand); }