/*
Theme Name: Hola Tiendas
Author: Apptistic Labs
Description: Comparador de precios. El ticket es la pieza; el resto se calla.
Version: 0.1.0
Text Domain: holatiendas
*/

:root {
	--ink: #15171c;
	--muted: #5c6370;
	--paper: #eef0ea;
	--sheet: #f7f8f4;
	--line: #c9cdc4;
	--cobalt: #2040d6;
	--cobalt-ink: #fff;
	--sticker: #ffe14a;
	--sticker-ink: #15171c;
	--gone: #8b909a;
	--max: 72rem;
	--sans: "Bricolage Grotesque", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { font-size: 18px; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-optical-sizing: auto;
	line-height: 1.45;
}
a { color: var(--cobalt); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
img { max-width: 100%; height: auto; }

.ht-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: var(--max);
	margin: 0 auto;
	padding: 1.1rem 1.25rem;
}
.ht-mark {
	font-weight: 800;
	font-size: 1.35rem;
	letter-spacing: -0.04em;
	color: var(--ink);
	text-decoration: none;
}
.ht-mark span { font-weight: 500; }
body.home .ht-bar .ht-find { display: none; }
.ht-find {
	display: flex;
	flex: 1;
	max-width: 28rem;
	border: 1.5px solid var(--ink);
	background: var(--sheet);
}
.ht-find input {
	flex: 1;
	border: 0;
	background: transparent;
	padding: 0.55rem 0.8rem;
	font: inherit;
	min-width: 0;
}
.ht-find button {
	border: 0;
	background: var(--cobalt);
	color: var(--cobalt-ink);
	font: inherit;
	font-weight: 700;
	padding: 0.55rem 1rem;
	cursor: pointer;
}
.ht-nav { display: flex; gap: 1.25rem; font-weight: 600; }
.ht-nav a { color: var(--ink); text-decoration: none; }

.ht-hero {
	max-width: var(--max);
	margin: 0 auto;
	padding: 3.5rem 1.25rem 2.5rem;
}
.ht-hero h1 {
	font-size: clamp(2.2rem, 6vw, 4.4rem);
	line-height: 0.95;
	letter-spacing: -0.05em;
	font-weight: 800;
	margin: 0 0 0.75rem;
	max-width: 14ch;
}
.ht-hero p {
	margin: 0;
	color: var(--muted);
	max-width: 36ch;
	font-size: 1.05rem;
}
.ht-hero .ht-find { margin-top: 1.75rem; max-width: 36rem; }

.ht-main { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem 4rem; }
.ht-kicker { font-weight: 700; margin: 0 0 1rem; }

.ht-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
	gap: 1rem;
}
.ht-card {
	background: var(--sheet);
	border: 1px solid var(--line);
	padding: 0;
	color: inherit;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	min-height: 16rem;
}
.ht-card img { width: 100%; height: 10rem; object-fit: contain; background: #fff; border-bottom: 1px solid var(--line); }
.ht-card .pad { padding: 0.9rem 1rem 1.1rem; }
.ht-card h2 { font-size: 1.05rem; margin: 0 0 0.35rem; letter-spacing: -0.03em; }
.ht-card .from { font-weight: 800; font-variant-numeric: tabular-nums; }
.ht-card .meta { color: var(--muted); font-size: 0.88rem; }

.ht-product { display: grid; grid-template-columns: 1fr minmax(0, 22rem); gap: 2.5rem; align-items: start; }
.ht-product h1 {
	font-size: clamp(1.8rem, 4vw, 3rem);
	letter-spacing: -0.045em;
	line-height: 1;
	margin: 0 0 0.4rem;
}
.ht-sub { color: var(--muted); margin: 0 0 1.5rem; }
.ht-photo { background: #fff; border: 1px solid var(--line); padding: 1.5rem; }
.ht-photo img { width: 100%; max-height: 22rem; object-fit: contain; }

.ht-ticket {
	background: var(--sheet);
	border: 1px solid var(--ink);
	position: relative;
	padding: 0.35rem 0 0.6rem;
}
.ht-ticket:before,
.ht-ticket:after {
	content: "";
	display: block;
	height: 10px;
	background:
		radial-gradient(circle at 8px 0, transparent 7px, var(--paper) 8px) left top / 16px 10px repeat-x;
}
.ht-ticket table { width: 100%; border-collapse: collapse; }
.ht-ticket th {
	text-align: left;
	font-weight: 600;
	font-size: 0.78rem;
	color: var(--muted);
	padding: 0.35rem 1rem;
}
.ht-ticket td { padding: 0.7rem 1rem; border-top: 1px dashed var(--line); vertical-align: middle; }
.ht-ticket tr.is-best td { background: var(--sticker); color: var(--sticker-ink); }
.ht-ticket .shop { font-weight: 800; display: block; }
.ht-ticket .gone { color: var(--gone); text-decoration: line-through; }
.ht-ticket .num { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.15rem; white-space: nowrap; }
.ht-go {
	display: inline-block;
	background: var(--cobalt);
	color: var(--cobalt-ink);
	font-weight: 700;
	padding: 0.35rem 0.7rem;
	text-decoration: none;
}
.ht-ticket tr.is-best .ht-go { background: var(--ink); color: #fff; }
.ht-empty { padding: 1.5rem; color: var(--muted); }

.ht-foot {
	border-top: 1px solid var(--line);
	padding: 1.5rem 1.25rem 2.5rem;
	max-width: var(--max);
	margin: 0 auto;
	color: var(--muted);
	font-size: 0.9rem;
}

@media (max-width: 800px) {
	.ht-bar { flex-wrap: wrap; }
	.ht-find { order: 3; flex-basis: 100%; max-width: none; }
	.ht-product { grid-template-columns: 1fr; }
	.ht-hero { padding-top: 2rem; }
	.ht-ticket th:last-child,
	.ht-ticket td:last-child { width: 1%; }
	.ht-ticket td { padding: 0.7rem 0.7rem; }
	.ht-go { white-space: nowrap; }
}