/* =========================================================================
   Pawmily — Componentes
   ========================================================================= */

/* -------------------------------------------------------------------------
   Botones
   ------------------------------------------------------------------------- */

.pw-btn {
	--btn-bg: var(--pw-ink-brand);
	--btn-fg: var(--pw-surface);
	--btn-bg-hover: var(--pw-ink);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pw-2);
	padding: var(--pw-3) var(--pw-6);
	min-height: 48px;               /* Objetivo táctil cómodo en móvil. */
	background: var(--btn-bg);
	color: var(--btn-fg);
	border: 2px solid transparent;
	border-radius: var(--pw-r-full);
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-base);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--pw-fast) var(--pw-ease),
	            color var(--pw-fast) var(--pw-ease),
	            transform var(--pw-fast) var(--pw-ease),
	            box-shadow var(--pw-fast) var(--pw-ease);
}

.pw-btn:hover {
	background: var(--btn-bg-hover);
	color: var(--btn-fg);
	transform: translateY(-1px);
	box-shadow: var(--pw-shadow);
}

.pw-btn:active { transform: translateY(0); box-shadow: var(--pw-shadow-sm); }

.pw-btn[disabled],
.pw-btn[aria-disabled="true"],
.pw-btn.pw-is-disabled {
	background: var(--pw-line);
	color: var(--pw-ink-soft);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
	opacity: 1;   /* El estado se lee por color, no por transparencia. */
}

/* Secundario: contorno sobre el fondo cálido. */
.pw-btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--pw-ink);
	border-color: var(--pw-line-strong);
}
.pw-btn--ghost:hover {
	background: var(--pw-surface);
	color: var(--pw-ink-deep);
	border-color: var(--pw-ink-brand);
}

/* Sobre fondos oscuros (footer, banda de marca). */
.pw-btn--onDark {
	--btn-bg: var(--pw-surface);
	--btn-fg: var(--pw-ink-deep);
	--btn-bg-hover: #fff;
}

.pw-btn--lg { padding: var(--pw-4) var(--pw-8); font-size: var(--pw-text-lg); min-height: 56px; }
.pw-btn--sm { padding: var(--pw-2) var(--pw-4); font-size: var(--pw-text-sm); min-height: 40px; }
.pw-btn--block { display: flex; width: 100%; }

/* Estado de carga: el rótulo permanece, como pide una interfaz honesta. */
.pw-btn.pw-is-loading { pointer-events: none; position: relative; color: transparent; }
.pw-btn.pw-is-loading::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: 20px; height: 20px;
	margin: -10px 0 0 -10px;
	border: 2.5px solid color-mix(in srgb, var(--btn-fg) 35%, transparent);
	border-top-color: var(--btn-fg);
	border-radius: 50%;
	animation: pw-spin 700ms linear infinite;
}

@keyframes pw-spin { to { transform: rotate(360deg); } }

/* Icono circular: carrito, buscador, cerrar. */
.pw-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	padding: 0;
	background: transparent;
	color: var(--pw-ink);
	border: 0;
	border-radius: var(--pw-r-full);
	cursor: pointer;
	position: relative;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--pw-fast) var(--pw-ease),
	            color var(--pw-fast) var(--pw-ease);
}
.pw-iconbtn:hover { background: var(--pw-surface); color: var(--pw-ink-deep); }
.pw-iconbtn svg { width: 22px; height: 22px; }

/* Contador del carrito. */
.pw-cart-count {
	position: absolute;
	top: 2px; right: 0;
	min-width: 20px; height: 20px;
	padding: 0 5px;
	display: grid;
	place-items: center;
	background: var(--pw-ink-deep);
	color: var(--pw-surface);
	border: 2px solid var(--pw-bg);
	border-radius: var(--pw-r-full);
	font-family: var(--pw-font-display);
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.pw-cart-count[data-count="0"] { display: none; }

/* -------------------------------------------------------------------------
   Iconos — trazo único de 1.75, sin relleno. Dibujados, no emoji.
   ------------------------------------------------------------------------- */
.pw-icon {
	width: 24px; height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}
.pw-icon--lg { width: 32px; height: 32px; stroke-width: 1.6; }

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

.pw-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--pw-1);
	padding: var(--pw-1) var(--pw-3);
	background: var(--pw-line);
	color: var(--pw-ink-deep);
	border-radius: var(--pw-r-full);
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-xs);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

/* El badge de ahorro es el argumento del negocio: máximo contraste.
   El marrón de marca no puede llevar texto, así que la autoridad la da
   el oscuro. */
.pw-badge--save {
	background: var(--pw-ink-deep);
	color: var(--pw-surface);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pw-badge--new { background: var(--pw-success-bg); color: #2f5c2b; }
.pw-badge--out { background: var(--pw-line); color: var(--pw-ink-soft); }

/* -------------------------------------------------------------------------
   Precios
   ------------------------------------------------------------------------- */

.pw-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--pw-2);
	font-family: var(--pw-font-display);
}

.pw-price__now {
	font-size: var(--pw-text-xl);
	font-weight: 700;
	color: var(--pw-ink-brand);
	font-variant-numeric: tabular-nums;
}

.pw-price__was {
	font-size: var(--pw-text-sm);
	font-weight: 500;
	color: var(--pw-ink-soft);
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
	font-variant-numeric: tabular-nums;
}

.pw-price__save {
	font-size: var(--pw-text-sm);
	font-weight: 700;
	color: #2f5c2b;
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   Tarjeta de producto
   ------------------------------------------------------------------------- */

.pw-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--pw-surface);
	border: 1px solid var(--pw-line);
	border-radius: var(--pw-r-lg);
	overflow: hidden;
	transition: transform var(--pw-base) var(--pw-ease),
	            box-shadow var(--pw-base) var(--pw-ease),
	            border-color var(--pw-base) var(--pw-ease);
}

.pw-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--pw-shadow-lg);
	border-color: var(--pw-line-strong);
}

.pw-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--pw-bg);
	overflow: hidden;
}
.pw-card__media img,
.pw-card__media svg {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform var(--pw-slow) var(--pw-ease);
}
.pw-card:hover .pw-card__media img { transform: scale(1.04); }

.pw-card__flags {
	position: absolute;
	top: var(--pw-3); left: var(--pw-3);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pw-2);
	z-index: 2;
}

.pw-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--pw-2);
	padding: var(--pw-4);
	flex: 1;
}

.pw-card__cat {
	font-size: var(--pw-text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pw-ink-soft);
}

.pw-card__title {
	margin: 0;
	font-size: var(--pw-text-base);
	font-weight: 600;
	line-height: var(--pw-leading-snug);
	color: var(--pw-ink-deep);
}
.pw-card__title a { color: inherit; text-decoration: none; }
/* El enlace cubre la tarjeta: toda ella es el objetivo táctil. */
.pw-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pw-card__title a:hover { color: var(--pw-ink-brand); }

.pw-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pw-3);
	margin-top: auto;
	padding-top: var(--pw-3);
}

/* El botón debe quedar por encima del enlace que cubre la tarjeta. */
.pw-card__foot .pw-btn,
.pw-card__add { position: relative; z-index: 2; }

.pw-card__add {
	width: 44px; height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	background: var(--pw-ink-brand);
	color: var(--pw-surface);
	border: 0;
	border-radius: var(--pw-r-full);
	cursor: pointer;
	touch-action: manipulation;
	transition: background-color var(--pw-fast) var(--pw-ease),
	            transform var(--pw-fast) var(--pw-ease);
}
.pw-card__add:hover { background: var(--pw-ink); transform: scale(1.06); }
.pw-card__add svg { width: 20px; height: 20px; }

/* Valoración */
.pw-rating { display: inline-flex; align-items: center; gap: var(--pw-1); }
.pw-rating__stars { display: inline-flex; gap: 1px; color: var(--pw-brand); }
.pw-rating__stars svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.pw-rating__count { font-size: var(--pw-text-xs); color: var(--pw-ink-soft); }

/* -------------------------------------------------------------------------
   Rejilla de productos
   ------------------------------------------------------------------------- */

.pw-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pw-4);
}

@media (min-width: 700px)  { .pw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pw-5); } }
@media (min-width: 1000px) { .pw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pw-6); } }

.pw-grid--3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 700px) { .pw-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* -------------------------------------------------------------------------
   Formularios
   ------------------------------------------------------------------------- */

.pw-field { display: flex; flex-direction: column; gap: var(--pw-2); margin-bottom: var(--pw-4); }

.pw-label,
label {
	font-size: var(--pw-text-sm);
	font-weight: 600;
	color: var(--pw-ink-deep);
}
.pw-label .required,
label .required { color: var(--pw-danger); text-decoration: none; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"], input[type="date"],
select, textarea, .input-text {
	width: 100%;
	padding: var(--pw-3) var(--pw-4);
	min-height: 48px;
	background: var(--pw-surface);
	color: var(--pw-ink-deep);
	border: 1.5px solid var(--pw-line-strong);
	border-radius: var(--pw-r);
	font-family: var(--pw-font-body);
	font-size: 16px;   /* Evita el zoom automático de iOS Safari al enfocar. */
	line-height: 1.5;
	transition: border-color var(--pw-fast) var(--pw-ease),
	            box-shadow var(--pw-fast) var(--pw-ease);
}

input::placeholder, textarea::placeholder {
	color: var(--pw-ink-soft);   /* 4,72:1 — los placeholders también se leen. */
	opacity: 1;
}

input:hover, select:hover, textarea:hover { border-color: var(--pw-brand); }

input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--pw-ink-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pw-brand) 28%, transparent);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 3px solid var(--pw-focus);
	outline-offset: 1px;
}

input[disabled], select[disabled], textarea[disabled] {
	background: var(--pw-line);
	color: var(--pw-ink-soft);
	cursor: not-allowed;
}

input[aria-invalid="true"], .pw-field--error input, .woocommerce-invalid input.input-text {
	border-color: var(--pw-danger);
	background: var(--pw-danger-bg);
}

.pw-field__error {
	display: flex;
	align-items: flex-start;
	gap: var(--pw-2);
	font-size: var(--pw-text-sm);
	font-weight: 600;
	color: var(--pw-danger);
}

.pw-field__hint { font-size: var(--pw-text-sm); color: var(--pw-ink-soft); }

textarea { min-height: 140px; resize: vertical; }

select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b4933' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--pw-4) center;
	background-size: 18px;
	padding-right: var(--pw-10);
}

/* Casillas y radios con el pigmento de marca. */
input[type="checkbox"], input[type="radio"] {
	width: 20px; height: 20px;
	accent-color: var(--pw-ink-brand);
	cursor: pointer;
	flex: none;
}

/* Selector de cantidad */
.pw-qty {
	display: inline-flex;
	align-items: center;
	background: var(--pw-surface);
	border: 1.5px solid var(--pw-line-strong);
	border-radius: var(--pw-r-full);
	overflow: hidden;
}
.pw-qty button {
	width: 44px; height: 44px;
	display: grid;
	place-items: center;
	background: transparent;
	color: var(--pw-ink-deep);
	border: 0;
	cursor: pointer;
	font-size: 1.2rem;
	touch-action: manipulation;
	transition: background-color var(--pw-fast) var(--pw-ease);
}
.pw-qty button:hover { background: var(--pw-bg); }
.pw-qty button[disabled] { color: var(--pw-line-strong); cursor: not-allowed; }
.pw-qty input {
	width: 48px;
	min-height: 44px;
	padding: 0;
	text-align: center;
	border: 0;
	background: transparent;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}
.pw-qty input::-webkit-outer-spin-button,
.pw-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* -------------------------------------------------------------------------
   Avisos
   ------------------------------------------------------------------------- */

.pw-note {
	display: flex;
	align-items: flex-start;
	gap: var(--pw-3);
	padding: var(--pw-4) var(--pw-5);
	background: var(--pw-surface);
	border: 1px solid var(--pw-line);
	border-radius: var(--pw-r-md);
	font-size: var(--pw-text-sm);
}
.pw-note svg { flex: none; margin-top: 1px; }
.pw-note--success { background: var(--pw-success-bg); border-color: #c3dcbb; color: #2f5c2b; }
.pw-note--error   { background: var(--pw-danger-bg);  border-color: #eec4b8; color: #7d2f22; }

/* -------------------------------------------------------------------------
   Estado vacío
   ------------------------------------------------------------------------- */

.pw-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--pw-4);
	padding: var(--pw-16) var(--pw-6);
	background: var(--pw-surface);
	border-radius: var(--pw-r-xl);
}
/* Solo la ilustración, no los iconos de los botones que van dentro. */
.pw-empty > svg,
.pw-empty > .pw-illu { width: 100%; max-width: 200px; height: auto; color: var(--pw-brand); }
.pw-empty .pw-btn svg { width: 20px; height: 20px; }
.pw-empty h2 { margin: 0; }
.pw-empty p { max-width: 46ch; color: var(--pw-ink-soft); }

/* -------------------------------------------------------------------------
   Acordeón (FAQ)
   ------------------------------------------------------------------------- */

.pw-accordion { display: flex; flex-direction: column; gap: var(--pw-3); }

.pw-accordion details {
	background: var(--pw-surface);
	border: 1px solid var(--pw-line);
	border-radius: var(--pw-r-md);
	overflow: hidden;
	transition: border-color var(--pw-fast) var(--pw-ease);
}
.pw-accordion details[open] { border-color: var(--pw-line-strong); }

.pw-accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pw-4);
	padding: var(--pw-4) var(--pw-5);
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-lg);
	font-weight: 600;
	color: var(--pw-ink-deep);
	cursor: pointer;
	list-style: none;
	touch-action: manipulation;
}
.pw-accordion summary::-webkit-details-marker { display: none; }
.pw-accordion summary:hover { color: var(--pw-ink-brand); }

.pw-accordion summary::after {
	content: "";
	flex: none;
	width: 20px; height: 20px;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--pw-base) var(--pw-ease);
}
.pw-accordion details[open] summary::after { transform: rotate(180deg); }

.pw-accordion__body { padding: 0 var(--pw-5) var(--pw-5); max-width: var(--pw-max-text); }
.pw-accordion__body > :first-child { margin-top: 0; }

/* -------------------------------------------------------------------------
   Migas de pan
   ------------------------------------------------------------------------- */

.pw-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pw-2);
	padding-block: var(--pw-4);
	font-size: var(--pw-text-sm);
	color: var(--pw-ink-soft);
}
.pw-breadcrumb a { color: var(--pw-ink-soft); text-decoration: none; }
.pw-breadcrumb a:hover { color: var(--pw-ink-brand); text-decoration: underline; }
.pw-breadcrumb .sep { color: var(--pw-line-strong); }

/* -------------------------------------------------------------------------
   Ilustraciones

   Un SVG con viewBox pero sin ancho declarado colapsa cuando su contenedor
   no le impone uno. Se fija aquí para todas de una vez.
   ------------------------------------------------------------------------- */

.pw-illu {
	display: block;
	width: 100%;
	height: auto;
}

.pw-illu--product { aspect-ratio: 1 / 1; object-fit: cover; }