/* Empty category page. Mobile first; desktop at 64rem. */
.shop-none { display: grid; gap: 1.25rem; padding-block: 1rem 3rem; }
.shop-none__panel { display: grid; justify-items: center; gap: 0.75rem; margin-block-end: 1.25rem; padding: 2.5rem 1.25rem; border-radius: var(--radius-lg); background: var(--surface-soft); text-align: center; }
.shop-none__icon { display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; border-radius: var(--radius-pill); background: var(--surface-mint); color: var(--pine); }
.shop-none__title { margin: 0.25rem 0 0; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.shop-none__text { margin: 0; max-inline-size: 45ch; color: var(--ink-muted); line-height: 1.55; text-wrap: pretty; }
.shop-none__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-block-start: 0.75rem; }
.shop .shop-none__cta, .shop .shop-none__ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-block-size: 3rem; padding-inline: 1.5rem; border-radius: var(--radius-pill); font-size: 0.9375rem; font-weight: 600; transition: transform 0.2s var(--ease); }
.shop .shop-none__cta { background: var(--whatsapp); color: var(--on-whatsapp); }
.shop .shop-none__ghost { border: 1px solid var(--control-border); }
.shop .shop-none__cta:active, .shop .shop-none__ghost:active { transform: scale(0.97); }
.shop-none__heading { margin: 0; font-size: 1.375rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }

.shop-none__chips { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-block-end: 2rem; }
.shop .shop-chip { display: flex; align-items: center; gap: 0.75rem; min-block-size: 3.5rem; padding: 0.375rem 0.875rem 0.375rem 0.375rem; border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: var(--surface); font-size: 0.9375rem; font-weight: 600; transition: transform 0.2s var(--ease), background-color 0.2s; }
.shop-chip:active { transform: scale(0.97); }
.shop-chip svg { flex: none; color: var(--ink-muted); }
.shop-chip__photo { flex: none; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-mint); }
.shop-chip__photo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.shop-none .shop-grid { padding-block: 0; }
@media (hover: hover) { .shop .shop-chip:hover { background: var(--surface-soft); } }

/* search with no results */
.shop-none__suggest { display: grid; justify-items: center; gap: 0.625rem; margin-block-start: 0.75rem; }
.shop-none__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.shop .shop-tag { display: inline-flex; align-items: center; min-block-size: 2.5rem; padding-inline: 1rem; border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: var(--surface); font-size: 0.9375rem; font-weight: 600; text-transform: capitalize; transition: transform 0.2s var(--ease), background-color 0.2s; }
.shop-tag:active { transform: scale(0.96); }
@media (hover: hover) { .shop .shop-tag:hover { background: var(--surface-mint); } }
.shop-none__tip { margin: 0; color: var(--ink-muted); font-size: 0.875rem; }
.shop-none__query { overflow-wrap: anywhere; }

@media (min-width: 64rem) {
	.shop-none { gap: 1.5rem; padding-block: 1.5rem 5rem; }
	.shop-none__panel { padding: 4rem 2rem; border-radius: 1.75rem; }
	.shop-none__heading { font-size: 1.75rem; }
	.shop-none .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .shop .shop-chip, .shop .shop-none__cta, .shop .shop-none__ghost, .shop .shop-tag { transition: none; } }