/**
 * Hupin — sistema visual.
 *
 * Portado do storefront Next.js aprovado (../storefront), que segue sendo a
 * referência oficial. Papel e tinta são as únicas cores do tema: todo o resto
 * vem do catálogo — a tinta, a embalagem, as peças, a fotografia.
 *
 * Tokens de cor, tipografia e espaçamento vivem em theme.json. Aqui ficam a
 * composição, o ritmo responsivo e o comportamento.
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	--hupin-paper: #f4f2ee;
	--hupin-paper-dim: #eae7e0;
	--hupin-ink: #0e0e0e;
	--hupin-ink-soft: #4a4a48;
	--hupin-ink-mute: #6b6963;
	--hupin-line: #dbd7cf;
	--hupin-line-strong: #c3beb4;
	--hupin-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--hupin-header-h: 5rem;
	/* A barra da vitrine gruda logo abaixo do cabeçalho recolhido. Token para os
	   dois não poderem divergir. */
	--hupin-header-h-min: 3.5rem;
}

@media (min-width: 48rem) {
	:root {
		--hupin-header-h: 6rem;
		--hupin-header-h-min: 4rem;
	}
}

/* ==========================================================================
   Base
   ========================================================================== */

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

body {
	background: var(--hupin-paper);
	color: var(--hupin-ink);
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* O raio de borda está deliberadamente ausente deste design. */
*,
*::before,
*::after {
	border-radius: 0;
}

::selection {
	background: var(--hupin-ink);
	color: var(--hupin-paper);
}

:focus-visible {
	outline: 2px solid var(--hupin-ink);
	outline-offset: 3px;
}

img {
	max-width: 100%;
	height: auto;
	color: transparent;
}

.hupin-main {
	display: block;
}

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

/* ==========================================================================
   Utilitários
   ========================================================================== */

/* Margem lateral da página. Telas largas ganham mais ar, nunca um max-width duro. */
.hupin-gutter {
	box-sizing: border-box;
	padding-inline: 1.25rem;
}

@media (min-width: 48rem) {
	.hupin-gutter {
		padding-inline: 2rem;
	}
}

@media (min-width: 64rem) {
	.hupin-gutter {
		padding-inline: 3rem;
	}
}

@media (min-width: 100rem) {
	.hupin-gutter {
		padding-inline: 4.5rem;
	}
}

.hupin-label,
.hupin-label-sm {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
}

.hupin-label {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
}

.hupin-label-sm {
	font-size: 0.625rem;
	letter-spacing: 0.18em;
}

.hupin-display {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 0.88;
	text-transform: uppercase;
}

.hupin-section {
	padding-block: 5rem;
}

@media (min-width: 48rem) {
	.hupin-section {
		padding-block: 7rem;
	}
}

.hupin-icon {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}

/* Sublinhado que entra pela esquerda no hover. */
.hupin-link-underline {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	transition: background-size 320ms var(--hupin-ease);
}

.hupin-link-underline:hover,
.hupin-link-underline:focus-visible {
	background-size: 100% 1px;
}

/* A única forma de CTA do site: rótulo, fio e uma seta que anda. */
.hupin-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding-bottom: 0.375rem;
	border-bottom: 1px solid var(--hupin-ink);
	color: inherit;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
	transition: border-color 160ms ease;
}

.hupin-arrow-link:hover {
	border-color: var(--hupin-ink-mute);
}

.hupin-arrow-link--sm {
	font-size: 0.625rem;
	letter-spacing: 0.18em;
}

.hupin-arrow-link--lg {
	font-size: 0.75rem;
	letter-spacing: 0.16em;
}

.hupin-arrow-link--sm .hupin-icon {
	width: 0.875rem;
	height: 0.875rem;
}

.hupin-arrow-link--lg .hupin-icon {
	width: 1rem;
	height: 1rem;
}

.hupin-arrow-link__icon {
	transition: transform 300ms var(--hupin-ease);
}

.hupin-arrow-link:hover .hupin-arrow-link__icon {
	transform: translateX(0.375rem);
}

.hupin-arrow-link--inverse {
	border-color: rgb(244 242 238 / 0.6);
	color: var(--hupin-paper);
}

.hupin-arrow-link--inverse:hover {
	border-color: var(--hupin-paper);
}

/* Swatch de tinta. Cor desconhecida pela cartela renderiza neutra. */
.hupin-swatch {
	display: inline-block;
	flex: 0 0 auto;
	border-radius: 9999px;
	box-shadow: inset 0 0 0 1px rgb(14 14 14 / 0.15);
}

.hupin-swatch--unknown {
	background: var(--hupin-paper-dim);
}

/* Entrada única do site: fade curto com um leve levantar, uma vez por elemento. */
.hupin-js .hupin-reveal {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition: opacity 550ms var(--hupin-ease), transform 550ms var(--hupin-ease);
}

.hupin-js .hupin-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   Cabeçalho de seção
   ========================================================================== */

.hupin-heading {
	padding-top: 1.25rem;
	border-top: 1px solid var(--hupin-line);
}

@media (min-width: 48rem) {
	.hupin-heading {
		padding-top: 1.5rem;
	}
}

.hupin-heading__row {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

@media (min-width: 48rem) {
	.hupin-heading__row {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 3rem;
	}
}

.hupin-heading__text {
	max-width: 48rem;
	min-width: 0;
}

.hupin-heading__eyebrow {
	margin: 0 0 1.25rem;
	color: var(--hupin-ink-mute);
}

@media (min-width: 48rem) {
	.hupin-heading__eyebrow {
		margin-bottom: 1.75rem;
	}
}

.hupin-heading__title {
	margin: 0;
	font-size: clamp(2.25rem, 7vw, 5.5rem);
}

.hupin-heading__description {
	max-width: 36rem;
	margin: 1.25rem 0 0;
	color: var(--hupin-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.625;
}

.hupin-heading__action {
	flex-shrink: 0;
}

@media (min-width: 48rem) {
	.hupin-heading__action {
		padding-bottom: 0.5rem;
	}
}

/* ==========================================================================
   Cabeçalho
   ========================================================================== */

.hupin-header {
	position: sticky;
	top: 0;
	z-index: 40;
	/* O fio de baixo entra na altura declarada: sem isso o cabeçalho mede 1 px a
	   mais que no storefront e empurra a página inteira para baixo. */
	box-sizing: border-box;
	background: var(--hupin-paper);
	border-bottom: 1px solid transparent;
	transition: height 500ms var(--hupin-ease), border-color 500ms var(--hupin-ease);
	height: var(--hupin-header-h);
}

.hupin-header.is-condensed {
	height: var(--hupin-header-h-min);
	border-bottom-color: var(--hupin-line);
}


/*
 * O layout de bloco do core imprime `.is-layout-flex > * { margin: 0 }` com
 * especificidade maior que a de uma classe só, então as margens automáticas que
 * organizam a fileira precisam de seletores mais específicos.
 */
.hupin-header .hupin-header__inner {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	height: 100%;
	margin: 0;
}

.hupin-header .hupin-header__inner > .hupin-header__actions {
	margin-left: auto;
}

.hupin-header .hupin-header__inner > .hupin-nav {
	margin-left: 0.25rem;
}

@media (min-width: 64rem) {
	.hupin-header .hupin-header__inner > .hupin-nav {
		margin-left: 0;
	}
}

.hupin-wordmark {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1;
	text-transform: uppercase;
	transition: font-size 500ms var(--hupin-ease);
}

@media (min-width: 48rem) {
	.hupin-wordmark {
		font-size: 1.875rem;
	}
}

.hupin-header.is-condensed .hupin-wordmark {
	font-size: 1.25rem;
}

@media (min-width: 48rem) {
	.hupin-header.is-condensed .hupin-wordmark {
		font-size: 1.5rem;
	}
}

/*
 * Com uma logo configurada no WordPress, o mesmo bloco troca o texto pela arte
 * e mantém a âncora para a home. A altura é a única medida declarada — largura
 * automática, para a proporção original nunca ser forçada — e fica sempre
 * abaixo da altura do cabeçalho, nos dois estados: 3,25rem dentro dos 5rem do
 * mobile, 4rem dentro dos 6rem do desktop, 2,25rem e 2,75rem dentro dos 3,5rem
 * e 4rem do recolhido. Assim a marca não empurra a barra para baixo.
 */
.hupin-wordmark--logo {
	display: flex;
	align-items: center;
}

.hupin-wordmark--logo .custom-logo-link {
	display: block;
	/* Sem isto a linha de base da <img> sobra abaixo do link e desalinha a
	   fileira em alguns pixels. */
	line-height: 0;
}

.hupin-wordmark--logo .custom-logo {
	display: block;
	width: auto;
	height: 3.25rem;
	/* Trava para uma logo futura de proporção mais larga: em vez de espremer a
	   fileira, a arte se encaixa no limite — `contain` preserva o desenho. */
	max-width: min(12rem, 40vw);
	object-fit: contain;
	object-position: left center;
	transition: height 500ms var(--hupin-ease);
}

@media (min-width: 48rem) {
	.hupin-wordmark--logo .custom-logo {
		height: 4rem;
	}
}

.hupin-header.is-condensed .hupin-wordmark--logo .custom-logo {
	height: 2.25rem;
}

@media (min-width: 48rem) {
	.hupin-header.is-condensed .hupin-wordmark--logo .custom-logo {
		height: 2.75rem;
	}
}

.hupin-header__actions {
	display: flex;
	order: 2;
	align-items: center;
	gap: 0.25rem;
	flex: 0 0 auto;
	margin-left: auto;
}

@media (min-width: 48rem) {
	.hupin-header__actions {
		gap: 0.5rem;
	}
}

.hupin-header__button {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: color 160ms ease;
}

.hupin-header__button:hover {
	color: var(--hupin-ink-soft);
}

.hupin-header__button--account {
	display: none;
}

@media (min-width: 48rem) {
	.hupin-header__button--account {
		display: grid;
	}
}

.hupin-header__cart {
	position: relative;
}

.hupin-header__cart-count {
	position: absolute;
	top: 0.375rem;
	right: 0.25rem;
	min-width: 1rem;
	padding-inline: 0.25rem;
	background: var(--hupin-ink);
	color: var(--hupin-paper);
	font-size: 0.625rem;
	font-weight: 500;
	line-height: 1rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.hupin-header__cart-count.is-empty {
	display: none;
}

/* -------------------------------------------------------------- navegação */

.hupin-wordmark {
	flex: 0 0 auto;
}

.hupin-nav {
	/* No mobile sobra só o botão do menu, e ele fecha a fileira de utilitários
	   à direita — como no storefront. No desktop a lista senta ao lado do
	   wordmark. */
	order: 3;
	flex: 0 0 auto;
}

@media (min-width: 64rem) {
	.hupin-nav {
		order: 1;
		flex: 1 1 auto;
		padding-left: 3.5rem;
	}
}

.hupin-nav .wp-block-navigation__container {
	gap: 1.75rem;
	align-items: center;
}

@media (min-width: 80rem) {
	.hupin-nav .wp-block-navigation__container {
		gap: 2.25rem;
	}
}

.hupin-nav .wp-block-navigation-item__content {
	padding: 0.25rem 0;
	color: var(--hupin-ink-soft);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	transition: background-size 320ms var(--hupin-ease), color 160ms ease;
}

.hupin-nav .wp-block-navigation-item__content:hover,
.hupin-nav .wp-block-navigation-item__content:focus-visible,
.hupin-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--hupin-ink);
	background-size: 100% 1px;
}

/* Menu de tela cheia — um menu, não uma barra espremida. */
.hupin-nav .wp-block-navigation__responsive-container-open,
.hupin-nav .wp-block-navigation__responsive-container-close {
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	color: inherit;
}

.hupin-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
	display: grid;
}

@media (min-width: 64rem) {
	/* Acima de lg a lista aparece inline; o botão só existe no mobile. */
	.hupin-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}

.hupin-nav .wp-block-navigation__responsive-container-close {
	display: grid;
}

/* Posição do botão de fechar dentro do menu de tela cheia. */
.hupin-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 1.25rem;
	right: 1.25rem;
}

.hupin-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--hupin-paper);
	color: var(--hupin-ink);
	padding: 1.25rem;
}

.hupin-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3.5rem;
}

.hupin-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	align-items: stretch;
	width: 100%;
}

.hupin-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--hupin-line);
}

.hupin-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding-block: 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1;
	color: var(--hupin-ink);
	background-image: none;
}

/* Botão do menu mobile, desenhado à mão para casar com os demais utilitários. */
.hupin-menu-toggle {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

@media (min-width: 64rem) {
	.hupin-menu-toggle {
		display: none;
	}
}

/* ==========================================================================
   Sobreposição de busca
   ========================================================================== */

.hupin-overlay {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	background: var(--hupin-paper);
	animation: hupin-fade 240ms var(--hupin-ease);
}

.hupin-overlay[hidden] {
	display: none;
}

.hupin-overlay__bar {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	height: 5rem;
}

@media (min-width: 48rem) {
	.hupin-overlay__bar {
		height: 6rem;
	}
}

.hupin-overlay__label {
	color: var(--hupin-ink-mute);
}

.hupin-overlay__body {
	padding-bottom: 6rem;
}

.hupin-search__form {
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--hupin-ink);
}

.hupin-search__input {
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: clamp(1.75rem, 6.5vw, 5rem);
}

.hupin-search__input:focus {
	outline: none;
}

.hupin-search__input::placeholder {
	color: rgb(14 14 14 / 0.2);
}

.hupin-search__grid {
	display: grid;
	gap: 3rem;
	margin-top: 2.5rem;
}

@media (min-width: 64rem) {
	.hupin-search__grid {
		grid-template-columns: minmax(0, 1fr) 16rem;
		gap: 5rem;
	}
}

.hupin-search__heading {
	margin: 0;
	color: var(--hupin-ink-mute);
}

.hupin-search__suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 1.125rem;
}

.hupin-search__categories ul {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 1.125rem;
}

@media (min-width: 64rem) {
	.hupin-search__categories {
		padding-left: 2.5rem;
		border-left: 1px solid var(--hupin-line);
	}
}

@keyframes hupin-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hupin-hero {
	position: relative;
	/* As peças da composição são rotacionadas e a caixa da rotação empurra
	   alguns px de rolagem horizontal em 375px sem nada aparecer fora da tela. */
	overflow-x: clip;
	border-bottom: 1px solid var(--hupin-line);
}

.hupin-hero__grid {
	display: grid;
}

@media (min-width: 64rem) {
	.hupin-hero__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}
}

.hupin-hero__paper {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	order: 2;
	padding-top: 3rem;
	padding-bottom: 4rem;
}

@media (min-width: 64rem) {
	.hupin-hero__paper {
		order: 1;
		min-height: calc(100vh - var(--hupin-header-h));
		padding-top: 4rem;
		padding-bottom: 5rem;
	}
}

.hupin-hero__meta {
	display: flex;
	align-items: baseline;
	gap: 1rem;
}

.hupin-hero__meta p {
	margin: 0;
}

.hupin-hero__location {
	color: var(--hupin-ink-mute);
}

.hupin-hero__rule {
	flex: 1;
	height: 1px;
	background: var(--hupin-line);
}

.hupin-hero__headline {
	margin: 2.5rem 0 0;
	font-size: clamp(2.25rem, 7vw, 5.25rem);
}

@media (min-width: 64rem) {
	.hupin-hero__headline {
		margin-top: 3rem;
	}
}

.hupin-hero__headline span {
	display: block;
	white-space: nowrap;
}

.hupin-hero__lede {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	margin-top: 2rem;
}

@media (min-width: 40rem) {
	.hupin-hero__lede {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 3rem;
	}
}

.hupin-hero__lede .hupin-arrow-link {
	flex-shrink: 0;
}

.hupin-hero__paragraph {
	max-width: 24rem;
	margin: 0;
	color: var(--hupin-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.625;
}

.hupin-hero__composition {
	position: relative;
	width: 100%;
	margin-top: 3.5rem;
	aspect-ratio: 4 / 3;
}

@media (min-width: 64rem) {
	.hupin-hero__composition {
		margin-top: 2rem;
		aspect-ratio: 16 / 9;
	}
}

.hupin-hero__piece {
	position: absolute;
}

.hupin-hero__piece-frame {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	transition: transform 600ms var(--hupin-ease);
}

.hupin-hero__piece-link:hover .hupin-hero__piece-frame {
	transform: translateY(-0.375rem);
}

.hupin-hero__piece-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hupin-hero__piece-name {
	display: block;
	margin-top: 0.5rem;
	color: var(--hupin-ink-mute);
	opacity: 0;
	transition: opacity 300ms ease;
}

.hupin-hero__piece-link:hover .hupin-hero__piece-name,
.hupin-hero__piece-link:focus-visible .hupin-hero__piece-name {
	opacity: 1;
}

.hupin-hero__photo {
	position: relative;
	order: 1;
	aspect-ratio: 3 / 4;
}

@media (min-width: 64rem) {
	.hupin-hero__photo {
		order: 2;
		aspect-ratio: auto;
		min-height: calc(100vh - var(--hupin-header-h));
	}
}

.hupin-hero__photo-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Faixa editorial
   ========================================================================== */

.hupin-marquee {
	overflow: hidden;
	padding-block: 1.5rem;
	border-bottom: 1px solid var(--hupin-line);
}

@media (min-width: 48rem) {
	.hupin-marquee {
		padding-block: 2rem;
	}
}

.hupin-marquee__viewport {
	width: 100%;
	overflow: hidden;
}

.hupin-marquee__track {
	display: flex;
	width: max-content;
	animation: hupin-marquee var(--hupin-marquee-duration, 64s) linear infinite;
}

.hupin-marquee__run {
	display: flex;
	flex-shrink: 0;
}

.hupin-marquee__item {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 5vw, 4rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 0.88;
	text-transform: uppercase;
}

.hupin-marquee__sep {
	padding-inline: 0.6em;
	color: var(--hupin-ink-mute);
}

@keyframes hupin-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   Shop by category
   ========================================================================== */

.hupin-categories__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.5rem 1rem;
	margin-top: 3rem;
}

@media (min-width: 48rem) {
	.hupin-categories__grid {
		gap: 2.5rem 1.5rem;
	}
}

@media (min-width: 64rem) {
	.hupin-categories__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 3.5rem 2rem;
		margin-top: 4rem;
	}
}

.hupin-tile {
	min-width: 0;
}

@media (min-width: 64rem) {
	.hupin-tile[data-span="3"] { grid-column: span 3; }
	.hupin-tile[data-span="4"] { grid-column: span 4; }
	.hupin-tile[data-span="6"] { grid-column: span 6; }
}

.hupin-tile__link {
	display: block;
}

.hupin-tile__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
}

@media (min-width: 64rem) {
	.hupin-tile[data-span="6"] .hupin-tile__frame {
		aspect-ratio: 4 / 3;
	}
}

.hupin-tile__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--hupin-ease);
}

.hupin-tile__link:hover .hupin-tile__image {
	transform: scale(1.02);
}

.hupin-tile__body {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 1rem;
	min-width: 0;
}

.hupin-tile__text {
	min-width: 0;
}

.hupin-tile__title {
	margin: 0;
	font-size: clamp(1.0625rem, 2.4vw, 2.25rem);
	transition: opacity 200ms ease;
}

@media (min-width: 64rem) {
	.hupin-tile[data-span="6"] .hupin-tile__title {
		font-size: clamp(2rem, 3.6vw, 3.75rem);
	}
}

.hupin-tile__link:hover .hupin-tile__title {
	opacity: 0.7;
}

.hupin-tile__meta {
	margin: 0.5rem 0 0;
	color: var(--hupin-ink-mute);
}

.hupin-tile__arrow {
	flex-shrink: 0;
	margin-top: 0.5rem;
	transition: transform 300ms var(--hupin-ease);
}

.hupin-tile__link:hover .hupin-tile__arrow {
	transform: translateX(0.375rem);
}

/* ==========================================================================
   Card de produto
   ========================================================================== */

.hupin-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.hupin-card__media {
	position: relative;
}

.hupin-card__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
}

.hupin-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 600ms var(--hupin-ease), transform 600ms var(--hupin-ease);
}

.hupin-card__image--alt {
	opacity: 0;
}

.hupin-card:hover .hupin-card__frame.has-alt .hupin-card__image {
	opacity: 0;
}

.hupin-card:hover .hupin-card__frame.has-alt .hupin-card__image--alt {
	opacity: 1;
}

.hupin-card:hover .hupin-card__frame:not(.has-alt) .hupin-card__image {
	transform: scale(1.03);
}

.hupin-card.is-sold-out .hupin-card__image {
	opacity: 0.45;
	filter: grayscale(1);
}

/* Marcas de estado ficam sobre o papel, nunca dentro de uma pílula. */
.hupin-card__status {
	position: absolute;
	top: 0;
	left: 0;
	color: var(--hupin-ink-mute);
	pointer-events: none;
}

.hupin-card__action {
	position: absolute;
	right: 0;
	bottom: 0;
}

.hupin-card__button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
	background: var(--hupin-ink);
	color: var(--hupin-paper);
	opacity: 0;
	transition: opacity 300ms ease;
}

.hupin-card:hover .hupin-card__button,
.hupin-card__button:focus-visible {
	opacity: 1;
}

@media (max-width: 47.9375rem) {
	.hupin-card__button {
		opacity: 1;
	}
}

.hupin-card__button-icon {
	width: 0.875rem;
	height: 0.875rem;
}

.hupin-card__button.loading {
	opacity: 0.6;
}

.hupin-card__button.added::after {
	content: "";
}

.hupin-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-top: 1rem;
}

.hupin-card__brand {
	margin: 0;
	color: var(--hupin-ink-mute);
}

.hupin-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: -0.005em;
	line-height: 1.375;
	text-transform: none;
}

.hupin-card__colors {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.5rem;
}

.hupin-card__more {
	color: var(--hupin-ink-mute);
}

/* --------------------------------------------------------------- preço */

.hupin-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.5rem;
	/* 1.5 e não a entrelinha do corpo: com 1.6 a linha do preço fica 1,6 px mais
	   alta que no storefront e o desvio acumula em cada card do grid. */
	line-height: 1.5;
	margin-top: 0.125rem;
}

.hupin-price .woocommerce-Price-amount {
	white-space: nowrap;
}

.hupin-price__now {
	font-size: 0.9375rem;
}

.hupin-price__was {
	color: var(--hupin-ink-mute);
	font-size: 0.8125rem;
	text-decoration: line-through;
}

.hupin-price__pix {
	color: var(--hupin-ink-mute);
	font-size: 0.8125rem;
}

.hupin-price__from {
	color: var(--hupin-ink-mute);
	font-size: 0.75rem;
}

.hupin-price--detail {
	display: block;
}

.hupin-price--detail .hupin-price__line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
}

.hupin-price--detail .hupin-price__now {
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: -0.02em;
}

@media (min-width: 48rem) {
	.hupin-price--detail .hupin-price__now {
		font-size: 1.75rem;
	}
}

.hupin-price--detail .hupin-price__was {
	font-size: 1rem;
}

.hupin-price--detail .hupin-price__pix {
	margin: 0.375rem 0 0;
	color: var(--hupin-ink-soft);
	font-size: 0.875rem;
}

.hupin-price--detail .hupin-price__pix strong {
	color: var(--hupin-ink);
	font-weight: 500;
}

/* ==========================================================================
   New arrivals
   ========================================================================== */

.hupin-arrivals__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3.5rem 1rem;
	margin-top: 3rem;
}

@media (min-width: 48rem) {
	.hupin-arrivals__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 3.5rem 1.5rem;
	}
}

@media (min-width: 64rem) {
	.hupin-arrivals__grid {
		gap: 6rem 2rem;
		margin-top: 4rem;
	}
}

.hupin-arrivals__break {
	display: flex;
	flex-direction: column;
	grid-column: span 2;
	margin: 0;
}

@media (min-width: 48rem) {
	.hupin-arrivals__break {
		grid-row: span 2;
	}
}

.hupin-arrivals__break-frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
}

@media (min-width: 48rem) {
	.hupin-arrivals__break-frame {
		flex: 1;
		aspect-ratio: auto;
		min-height: 24rem;
	}
}

.hupin-arrivals__break-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hupin-arrivals__break-caption {
	margin-top: 1rem;
	color: var(--hupin-ink-mute);
}

/* ==========================================================================
   Encontre sua cor
   ========================================================================== */

.hupin-colorwall {
	border-block: 1px solid var(--hupin-line);
}

.hupin-colorwall__body {
	margin-top: 3rem;
}

@media (min-width: 64rem) {
	.hupin-colorwall__body {
		margin-top: 4rem;
	}
}

/* Sem fundo no grid: a célula vazia precisa ler como papel, não como tile quebrado. */
.hupin-colorwall__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40rem) {
	.hupin-colorwall__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.hupin-colorwall__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.hupin-colorwall__link {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	aspect-ratio: 1;
	padding: 1rem;
}

@media (min-width: 48rem) {
	.hupin-colorwall__link {
		padding: 1.25rem;
	}
}

.hupin-colorwall__count {
	transform: translateY(0.5rem);
	opacity: 0;
	transition: transform 300ms var(--hupin-ease), opacity 300ms var(--hupin-ease);
}

.hupin-colorwall__link:hover .hupin-colorwall__count,
.hupin-colorwall__link:focus-visible .hupin-colorwall__count {
	transform: none;
	opacity: 1;
}

/* ==========================================================================
   On the shelf
   ========================================================================== */

.hupin-shelf__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3.5rem 1rem;
	margin: 3.5rem 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48rem) {
	.hupin-shelf__row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.hupin-shelf__row {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 3.5rem 1.5rem;
		margin-top: 5rem;
	}
}

.hupin-shelf__item {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.hupin-shelf__frame {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	aspect-ratio: 4 / 5;
}

.hupin-shelf__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom;
	transition: transform 600ms var(--hupin-ease);
}

.hupin-shelf__item:hover .hupin-shelf__image {
	transform: translateY(-0.5rem) scale(1.02);
}

.hupin-shelf__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	margin-top: 1.5rem;
}

.hupin-shelf__brand {
	margin: 0;
	color: var(--hupin-ink-mute);
}

.hupin-shelf__title {
	margin: 0.375rem 0 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: -0.005em;
	line-height: 1.375;
	text-transform: none;
}

.hupin-shelf__color {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0.25rem 0 0;
	color: var(--hupin-ink-soft);
	font-size: 0.8125rem;
}

.hupin-shelf__price {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
}

.hupin-shelf__palette {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-top: 1rem;
}

.hupin-shelf__chip {
	width: 0.875rem;
	height: 0.875rem;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	box-shadow: inset 0 0 0 1px rgb(14 14 14 / 0.15);
	cursor: pointer;
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.hupin-shelf__chip:hover {
	transform: scale(1.15);
}

.hupin-shelf__chip.is-active {
	box-shadow: 0 0 0 1px var(--hupin-ink);
}

.hupin-shelf__chip--unknown {
	background: var(--hupin-paper-dim);
}

/* ==========================================================================
   More than a store
   ========================================================================== */

.hupin-culture__stage {
	position: relative;
	overflow: hidden;
	min-height: 80vh;
}

@media (min-width: 48rem) {
	.hupin-culture__stage {
		min-height: 88vh;
	}
}

.hupin-culture__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hupin-culture__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(14 14 14 / 0.85), rgb(14 14 14 / 0.25) 50%, rgb(14 14 14 / 0.05));
}

.hupin-culture__content {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding-bottom: 3.5rem;
}

@media (min-width: 48rem) {
	.hupin-culture__content {
		padding-bottom: 5rem;
	}
}

.hupin-culture__inner {
	max-width: 56rem;
	color: var(--hupin-paper);
}

.hupin-culture__eyebrow {
	margin: 0;
	color: rgb(244 242 238 / 0.65);
}

.hupin-culture__headline {
	margin: 1.5rem 0 0;
	font-size: clamp(2.5rem, 9vw, 7rem);
}

.hupin-culture__headline span {
	display: block;
}

.hupin-culture__foot {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-top: 2rem;
}

@media (min-width: 48rem) {
	.hupin-culture__foot {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 4rem;
	}
}

.hupin-culture__body {
	max-width: 36rem;
	margin: 0;
	color: rgb(244 242 238 / 0.8);
	font-size: 0.9375rem;
	line-height: 1.625;
}

.hupin-culture__foot .hupin-arrow-link {
	flex-shrink: 0;
}

/* ==========================================================================
   Streetwear
   ========================================================================== */

.hupin-street__grid {
	display: grid;
	align-items: stretch;
	gap: 2.5rem;
}

@media (min-width: 64rem) {
	.hupin-street__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
	}
}

.hupin-street__stage {
	position: relative;
	min-height: 26rem;
}

@media (min-width: 64rem) {
	.hupin-street__stage {
		min-height: 46rem;
	}
}

.hupin-street__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hupin-street__caption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 1.5rem;
}

@media (min-width: 48rem) {
	.hupin-street__caption {
		padding: 2.5rem;
	}
}

.hupin-street__eyebrow {
	margin: 0;
	color: rgb(244 242 238 / 0.7);
}

.hupin-street__headline {
	margin: 1rem 0 0;
	color: var(--hupin-paper);
	font-size: clamp(2.25rem, 5vw, 4.5rem);
}

.hupin-street__headline span {
	display: block;
}

.hupin-street__panel {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

@media (min-width: 64rem) {
	.hupin-street__panel {
		padding-left: 3rem;
	}
}

@media (min-width: 80rem) {
	.hupin-street__panel {
		padding-left: 5rem;
	}
}

.hupin-street__body {
	display: none;
	max-width: 28rem;
	margin: 0;
	color: var(--hupin-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.625;
}

@media (min-width: 64rem) {
	.hupin-street__body {
		display: block;
	}
}

.hupin-street__products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3rem 1rem;
}

@media (min-width: 48rem) {
	.hupin-street__products {
		gap: 3rem 2rem;
	}
}

@media (min-width: 64rem) {
	.hupin-street__products {
		margin-top: 3rem;
	}
}

.hupin-street__cta {
	margin-top: 3rem;
}

/* ==========================================================================
   Marcas
   ========================================================================== */

.hupin-brands {
	padding-block: 3.5rem;
	border-block: 1px solid var(--hupin-line);
}

@media (min-width: 48rem) {
	.hupin-brands {
		padding-block: 5rem;
	}
}

.hupin-brands__row {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

@media (min-width: 64rem) {
	.hupin-brands__row {
		flex-direction: row;
		align-items: baseline;
		gap: 5rem;
	}
}

.hupin-brands__title {
	flex-shrink: 0;
	margin: 0;
	color: var(--hupin-ink-mute);
}

@media (min-width: 64rem) {
	.hupin-brands__title {
		width: 12rem;
	}
}

.hupin-brands__list {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 1.5rem 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48rem) {
	.hupin-brands__list {
		gap: 1.5rem 4rem;
	}
}

.hupin-brands__name {
	display: block;
	font-size: clamp(1.5rem, 3.6vw, 2.75rem);
	transition: opacity 300ms ease;
}

.hupin-brands__link:hover .hupin-brands__name {
	opacity: 0.45;
}

.hupin-brands__note {
	display: block;
	margin-top: 0.375rem;
	color: var(--hupin-ink-mute);
}

/* ==========================================================================
   Loja física
   ========================================================================== */

.hupin-store__grid {
	display: grid;
	gap: 3rem;
}

@media (min-width: 64rem) {
	.hupin-store__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		gap: 5rem;
	}
}

.hupin-store__text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.hupin-store__eyebrow {
	margin: 0;
	color: var(--hupin-ink-mute);
}

.hupin-store__headline {
	margin: 1.5rem 0 0;
	font-size: clamp(2.5rem, 7vw, 5.5rem);
}

.hupin-store__body {
	max-width: 28rem;
	margin: 2rem 0 0;
	color: var(--hupin-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.625;
}

.hupin-store__facts {
	display: grid;
	gap: 2.5rem;
	margin-top: 3rem;
}

@media (min-width: 40rem) {
	.hupin-store__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.hupin-store__fact-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--hupin-ink-mute);
}

.hupin-store__fact-title .hupin-icon {
	width: 1rem;
	height: 1rem;
}

.hupin-store__address {
	margin: 1rem 0 0;
	font-size: 0.9375rem;
	font-style: normal;
	line-height: 1.625;
}

.hupin-store__fact .hupin-arrow-link {
	margin-top: 1.25rem;
}

.hupin-store__phone,
.hupin-store__whatsapp {
	display: inline-block;
	margin-top: 1rem;
	font-size: 0.9375rem;
}

.hupin-store__whatsapp {
	margin-left: 1.25rem;
}

.hupin-store__hours {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	color: var(--hupin-ink-soft);
	font-size: 0.8125rem;
}

.hupin-store__hours li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.hupin-store__photos {
	display: grid;
	gap: 1rem;
}

@media (min-width: 40rem) {
	.hupin-store__photos {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.hupin-store__photo {
	position: relative;
	aspect-ratio: 4 / 3;
}

@media (min-width: 40rem) {
	.hupin-store__photo {
		aspect-ratio: 3 / 4;
	}

	.hupin-store__photo--1 {
		grid-column: span 3;
	}

	.hupin-store__photo--2 {
		grid-column: span 2;
		margin-top: 4rem;
	}
}

.hupin-store__photo-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Comunidade
   ========================================================================== */

.hupin-community__head {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

@media (min-width: 48rem) {
	.hupin-community__head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
}

.hupin-community__handle {
	margin: 0;
	font-size: clamp(2rem, 6vw, 4.5rem);
}

.hupin-community__follow {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.75rem;
	padding-bottom: 0.375rem;
	border-bottom: 1px solid var(--hupin-ink);
	font-size: 0.75rem;
}

.hupin-community__follow .hupin-icon {
	width: 1rem;
	height: 1rem;
	transition: transform 300ms var(--hupin-ease);
}

.hupin-community__follow:hover .hupin-icon {
	transform: translateX(0.375rem);
}

.hupin-community__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40rem) {
	.hupin-community__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 48rem) {
	.hupin-community__grid {
		gap: 0.75rem;
		margin-top: 3.5rem;
	}
}

.hupin-community__cell {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
}

.hupin-community__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--hupin-ease);
}

.hupin-community__cell:hover .hupin-community__image {
	transform: scale(1.04);
}

/* ==========================================================================
   Newsletter
   ========================================================================== */

.hupin-newsletter {
	border-top: 1px solid var(--hupin-line);
}

.hupin-newsletter__grid {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 64rem) {
	.hupin-newsletter__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 5rem;
	}
}

.hupin-newsletter__title {
	margin: 0;
	font-size: clamp(2.25rem, 7vw, 5rem);
}

@media (min-width: 64rem) {
	.hupin-newsletter__panel {
		padding-top: 0.75rem;
	}
}

.hupin-newsletter__field {
	display: flex;
	align-items: flex-end;
	gap: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--hupin-ink);
}

.hupin-newsletter__input-wrap {
	flex: 1;
}

.hupin-newsletter__label {
	display: block;
	color: var(--hupin-ink-mute);
}

.hupin-newsletter__input {
	width: 100%;
	margin-top: 0.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: 1.125rem;
}

@media (min-width: 48rem) {
	.hupin-newsletter__input {
		font-size: 1.25rem;
	}
}

.hupin-newsletter__input:focus {
	outline: none;
}

.hupin-newsletter__input::placeholder {
	color: rgb(14 14 14 / 0.25);
}

.hupin-newsletter__submit {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.625rem;
	padding: 0 0 0.25rem;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	font-size: 0.75rem;
}

.hupin-newsletter__submit .hupin-icon {
	width: 1rem;
	height: 1rem;
	transition: transform 300ms var(--hupin-ease);
}

.hupin-newsletter__submit:hover .hupin-icon {
	transform: translateX(0.375rem);
}

.hupin-newsletter__fallback {
	max-width: 28rem;
	margin: 0 0 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.625;
}

.hupin-newsletter__note {
	max-width: 24rem;
	margin: 1.25rem 0 0;
	color: var(--hupin-ink-mute);
	font-size: 0.8125rem;
	line-height: 1.625;
}

/* ==========================================================================
   Rodapé
   ========================================================================== */

.hupin-footer {
	background: var(--hupin-ink);
	color: var(--hupin-paper);
}

.hupin-footer__inner {
	padding-top: 5rem;
	padding-bottom: 2.5rem;
}

@media (min-width: 48rem) {
	.hupin-footer__inner {
		padding-top: 7rem;
	}
}

.hupin-footer__columns {
	display: grid;
	gap: 3rem;
}

@media (min-width: 48rem) {
	.hupin-footer__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.hupin-footer__columns {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2rem;
	}
}

.hupin-footer__title {
	margin: 0;
	color: rgb(244 242 238 / 0.6);
}

.hupin-footer__list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.hupin-footer__list a {
	color: rgb(244 242 238 / 0.85);
	font-size: 0.875rem;
}

.hupin-footer__list a:hover {
	color: var(--hupin-paper);
}

.hupin-footer__social {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.hupin-footer__social .hupin-icon {
	width: 1rem;
	height: 1rem;
}

.hupin-footer__address {
	margin: 1.5rem 0 0;
	color: rgb(244 242 238 / 0.85);
	font-size: 0.875rem;
	font-style: normal;
	line-height: 1.625;
}

.hupin-footer__phone {
	display: inline-block;
	margin-top: 1rem;
	color: rgb(244 242 238 / 0.85);
	font-size: 0.875rem;
}

.hupin-footer__maps {
	margin-top: 1.5rem;
}

.hupin-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 5rem;
	padding-top: 2rem;
	border-top: 1px solid rgb(244 242 238 / 0.15);
}

@media (min-width: 48rem) {
	.hupin-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.hupin-footer__bottom p {
	margin: 0;
	color: rgb(244 242 238 / 0.6);
}

/* Wordmark grande demais, cortado de propósito pela borda da tela. */
.hupin-footer__mark {
	overflow: hidden;
}

.hupin-footer__mark p {
	width: 100%;
	margin: 0 0 -0.18em;
	transform: translateX(-2%);
	color: rgb(244 242 238 / 0.95);
	font-family: var(--wp--preset--font-family--display);
	font-size: 26vw;
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 0.75;
	text-transform: uppercase;
	white-space: nowrap;
	user-select: none;
}

/* ==========================================================================
   Templates do WooCommerce
   --------------------------------------------------------------------------
   Loja, categoria, produto, carrinho e conta ainda usam os templates de bloco
   do plugin; a composição editorial deles é a próxima etapa do porte. Até lá
   herdam os tokens do tema e precisam da margem lateral da página, senão o
   conteúdo alinhado à borda encosta na lateral da tela.
   ========================================================================== */

.wp-site-blocks > main:not(.hupin-main),
.wp-site-blocks > .wp-block-group:not(.hupin-main):not(.hupin-header) {
	box-sizing: border-box;
	padding-inline: 1.25rem;
}

@media (min-width: 48rem) {
	.wp-site-blocks > main:not(.hupin-main),
	.wp-site-blocks > .wp-block-group:not(.hupin-main):not(.hupin-header) {
		padding-inline: 2rem;
	}
}

@media (min-width: 64rem) {
	.wp-site-blocks > main:not(.hupin-main),
	.wp-site-blocks > .wp-block-group:not(.hupin-main):not(.hupin-header) {
		padding-inline: 3rem;
	}
}

@media (min-width: 100rem) {
	.wp-site-blocks > main:not(.hupin-main),
	.wp-site-blocks > .wp-block-group:not(.hupin-main):not(.hupin-header) {
		padding-inline: 4.5rem;
	}
}

.woocommerce-breadcrumb {
	color: var(--hupin-ink-mute);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* ==========================================================================
   Conteúdo editorial de páginas
   ========================================================================== */

.hupin-prose > * {
	max-width: 46rem;
}

.hupin-prose .wp-block-post-title {
	max-width: none;
	margin-bottom: 2.5rem;
	font-size: clamp(2.25rem, 7vw, 5rem);
}

/* ==========================================================================
   Página Sobre
   ========================================================================== */

.hupin-about {
	overflow-x: clip;
}

.hupin-about__hero {
	padding-top: 3.5rem;
	padding-bottom: 4.5rem;
}

@media (min-width: 48rem) {
	.hupin-about__hero {
		padding-top: 5rem;
		padding-bottom: 6rem;
	}
}

.hupin-about__hero-grid {
	display: grid;
	gap: 3rem;
	align-items: center;
}

@media (min-width: 64rem) {
	.hupin-about__hero-grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		min-height: calc(100vh - var(--hupin-header-h) - 5rem);
	}
}

.hupin-about__hero-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.hupin-about__hero-meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	color: var(--hupin-ink-mute);
}

.hupin-about__hero-meta p {
	margin: 0;
}

.hupin-about__hero-meta span {
	flex: 1;
	height: 1px;
	background: var(--hupin-line);
}

.hupin-about__title {
	max-width: 13ch;
	margin: 2.5rem 0 0;
	font-size: clamp(2.875rem, 11vw, 9rem);
}

.hupin-about__title span {
	display: block;
}

.hupin-about__intro {
	max-width: 42rem;
	margin: 2rem 0 0;
	color: var(--hupin-ink-soft);
	font-size: clamp(1.125rem, 2vw, 1.5rem);
	line-height: 1.45;
}

@media (min-width: 64rem) {
	.hupin-about__intro {
		max-width: 34rem;
		margin-left: auto;
	}
}

.hupin-about__story,
.hupin-about__close {
	padding-block: 4rem;
}

@media (min-width: 48rem) {
	.hupin-about__story,
	.hupin-about__close {
		padding-block: 6rem;
	}
}

.hupin-about__rule {
	height: 1px;
	margin-bottom: 3rem;
	background: var(--hupin-line);
}

.hupin-about__story-grid,
.hupin-about__close-grid {
	display: grid;
	gap: 2rem;
}

@media (min-width: 64rem) {
	.hupin-about__story-grid {
		grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 0.6fr);
		gap: 5rem;
		align-items: start;
	}

	.hupin-about__close-grid {
		grid-template-columns: 8rem minmax(0, 0.85fr) minmax(22rem, 0.55fr);
		gap: 3rem;
		align-items: start;
	}
}

.hupin-about__section-title,
.hupin-about__close-title {
	margin: 0;
	font-size: clamp(2rem, 6vw, 5rem);
}

.hupin-about__copy {
	max-width: 42rem;
	color: var(--hupin-ink-soft);
	font-size: 1rem;
	line-height: 1.7;
}

.hupin-about__copy p {
	margin: 0;
}

.hupin-about__copy p + p {
	margin-top: 1.25rem;
}

.hupin-about__process {
	border-top: 1px solid var(--hupin-line);
	border-bottom: 1px solid var(--hupin-line);
}

.hupin-about__process-grid {
	display: grid;
	gap: 2rem;
}

@media (min-width: 64rem) {
	.hupin-about__process-grid {
		grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 0.6fr);
		gap: 5rem;
	}
}

.hupin-about__figure {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	min-height: 0;
	margin: 0;
	background: var(--hupin-paper-dim);
}

.hupin-about__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.hupin-about__process-copy {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.hupin-about__process-copy .hupin-about__copy {
	max-width: 42rem;
}

.hupin-about__close .hupin-label-sm {
	margin: 0;
	color: var(--hupin-ink-mute);
}

/* ==========================================================================
   Movimento reduzido — tudo que é decorativo para
   ========================================================================== */

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

	.hupin-marquee__track {
		animation: none !important;
	}

	.hupin-js .hupin-reveal {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   Vitrine
   ==========================================================================
   Portada do storefront: a barra de facetas é horizontal e o painel abre abaixo
   dela — nunca uma coluna à esquerda. No toque a mesma marcação vira bottom
   sheet. Sem JavaScript os painéis já vêm abertos e continuam clicáveis; é a
   classe `hupin-js`, escrita antes da primeira pintura, que autoriza recolher.
   ========================================================================== */

/* ----------------------------------------------------- cabeçalho da página */

.hupin-shop-head {
	padding-block: 3rem 2.5rem;
}

@media (min-width: 48rem) {
	.hupin-shop-head {
		padding-block: 4rem 3rem;
	}
}

.hupin-shop-head__eyebrow {
	margin: 0;
	color: var(--hupin-ink-mute);
}

.hupin-shop-head__title {
	margin: 1.5rem 0 0;
	font-size: clamp(3rem, 12vw, 9rem);
}

.hupin-shop-head__note {
	max-width: 32rem;
	margin: 1.5rem 0 0;
	color: var(--hupin-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.65;
}

/* ---------------------------------------------------------------- a barra */

.hupin-toolbar {
	position: sticky;
	/* Encosta no cabeçalho recolhido: o mesmo token, para não haver fresta nem
	   sobreposição quando o cabeçalho encolhe. */
	top: var(--hupin-header-h-min);
	z-index: 30;
	background: var(--hupin-paper);
	border-block: 1px solid var(--hupin-line);
}

.hupin-toolbar__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-width: 0;
	padding-block: 0.75rem;
}

.hupin-toolbar__trigger {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	/* Sem recuo vertical, para a barra medir o mesmo que a do storefront. */
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

/*
 * O alvo de toque, porém, não pode ter 16 px de altura. A área clicável cresce
 * para ~44 px por fora da caixa, sem participar do layout — a barra não muda de
 * altura e o dedo acerta.
 */
.hupin-toolbar__trigger::after {
	content: '';
	position: absolute;
	inset: -0.875rem -0.75rem;
}

.hupin-toolbar__trigger-icon {
	width: 1rem;
	height: 1rem;
}

.hupin-toolbar__facets {
	display: none;
	min-width: 0;
	flex: 1 1 auto;
	align-items: center;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.hupin-toolbar__facets::-webkit-scrollbar {
	display: none;
}

@media (min-width: 64rem) {
	.hupin-toolbar__trigger {
		display: none;
	}

	.hupin-toolbar__facets {
		display: flex;
	}
}

@media (min-width: 80rem) {
	.hupin-toolbar__facets {
		gap: 2rem;
	}
}

.hupin-toolbar__facet {
	/* `flex` e não `block`: com o botão em `inline-flex`, o item da lista abriria
	   uma caixa de linha e somaria a descida da fonte — 6 px a mais de barra. */
	display: flex;
	flex: 0 0 auto;
}

.hupin-toolbar__facet-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0;
	border: 0;
	background: none;
	color: var(--hupin-ink-soft);
	cursor: pointer;
	transition: color 160ms ease;
}

.hupin-toolbar__facet-button:hover,
.hupin-toolbar__facet-button[aria-expanded='true'] {
	color: var(--hupin-ink);
}

.hupin-toolbar__caret {
	display: inline-block;
	transition: transform 300ms var(--hupin-ease);
}

.hupin-toolbar__facet-button[aria-expanded='true'] .hupin-toolbar__caret {
	transform: rotate(180deg);
}

.hupin-toolbar__clear {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--hupin-ink-mute);
	text-decoration: none;
	transition: color 160ms ease;
}

.hupin-toolbar__clear:hover {
	color: var(--hupin-ink);
}

.hupin-toolbar__clear-icon {
	width: 0.75rem;
	height: 0.75rem;
}

/* ------------------------------------------------- contagem e ordenação */

.hupin-toolbar__meta {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 1rem;
}

@media (min-width: 48rem) {
	.hupin-toolbar__meta {
		gap: 2rem;
	}
}

.hupin-toolbar__count {
	margin: 0;
	color: var(--hupin-ink-mute);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.hupin-toolbar__sort {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.hupin-toolbar__sort-label {
	display: none;
	color: var(--hupin-ink-mute);
}

@media (min-width: 48rem) {
	.hupin-toolbar__sort-label {
		display: inline;
	}
}

/* O seletor precisa de dois níveis: a folha do WooCommerce estiliza `select` e
   ganharia da classe sozinha, deixando a ordenação com corpo maior que o rótulo
   ao lado. */
.hupin-toolbar .hupin-toolbar__sort-select {
	padding: 0.25rem 0.25rem 0.25rem 0;
	border: 0;
	border-bottom: 1px solid var(--hupin-ink);
	background: none;
	color: inherit;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Com JavaScript a troca é imediata e o botão some. Sem ele, ele é o que faz a
   ordenação funcionar. */
.hupin-js .hupin-toolbar__sort-go,
.hupin-js .hupin-facet__price-go {
	display: none;
}

.hupin-toolbar__sort-go,
.hupin-facet__price-go {
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--hupin-ink);
	background: none;
	color: inherit;
	cursor: pointer;
	font-family: inherit;
}

/* --------------------------------------------------------------- painéis */

.hupin-toolbar__sheet-head,
.hupin-toolbar__sheet-foot {
	display: none;
}

.hupin-facet {
	position: relative;
	border-top: 1px solid var(--hupin-line);
}

.hupin-facet__inner {
	padding-block: 1.75rem;
}

.hupin-facet__title {
	margin: 0 0 1.25rem;
	color: var(--hupin-ink-mute);
}

.hupin-facet__options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hupin-facet__options--color {
	gap: 1rem 1.5rem;
}

.hupin-facet__item {
	max-width: 100%;
}

.hupin-facet__option {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--hupin-ink-soft);
	text-decoration: none;
	transition: color 160ms ease;
}

.hupin-facet__option:hover {
	color: var(--hupin-ink);
}

.hupin-facet__option.is-on {
	color: var(--hupin-ink);
}

.hupin-facet__box {
	display: block;
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	border: 1px solid var(--hupin-line-strong);
	transition: background-color 160ms ease, border-color 160ms ease;
}

.hupin-facet__option.is-on .hupin-facet__box {
	border-color: var(--hupin-ink);
	background: var(--hupin-ink);
	box-shadow: inset 0 0 0 3px var(--hupin-paper);
}

/* Cor não tem caixinha: o ponto de tinta é o próprio controle, e o estado ligado
   é um anel — nunca só a cor, que sozinha não comunica. */
.hupin-facet__options--color .hupin-swatch {
	outline: 1px solid transparent;
	outline-offset: 3px;
	transition: outline-color 160ms ease;
}

.hupin-facet__options--color .hupin-facet__option.is-on .hupin-swatch {
	outline-color: var(--hupin-ink);
}

.hupin-facet__options--color .hupin-facet__option.is-on .hupin-facet__label {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hupin-facet__label {
	font-size: 0.875rem;
	line-height: 1.3;
}

.hupin-facet__close {
	display: none;
}

/* ------------------------------------------------------------ faixa de preço */

.hupin-facet__price {
	max-width: 26rem;
}

.hupin-facet__price-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.hupin-facet__price-head span {
	color: var(--hupin-ink-mute);
}

.hupin-facet__price-value {
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.hupin-facet__price-range {
	width: 100%;
	margin: 1rem 0 0;
	accent-color: var(--hupin-ink);
}

.hupin-facet__price-scale {
	display: flex;
	justify-content: space-between;
	margin-top: 0.5rem;
	color: var(--hupin-ink-mute);
	font-variant-numeric: tabular-nums;
}

.hupin-facet__price-go {
	margin-top: 1rem;
}

/* ------------------------------------------------- recolhido, com JavaScript */

.hupin-js .hupin-facet {
	display: none;
}

.hupin-js .hupin-facet.is-open {
	display: block;
}

@media (min-width: 64rem) {
	.hupin-js .hupin-facet__close {
		position: absolute;
		top: 1.75rem;
		right: 3rem;
		display: grid;
		place-items: center;
		width: 2rem;
		height: 2rem;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		cursor: pointer;
		transition: background-color 160ms ease, color 160ms ease;
	}

	.hupin-js .hupin-facet__close:hover {
		background: var(--hupin-ink);
		color: var(--hupin-paper);
	}

	.hupin-js .hupin-facet__close .hupin-icon {
		width: 1rem;
		height: 1rem;
	}
}

@media (min-width: 100rem) {
	.hupin-js .hupin-facet__close {
		right: 4.5rem;
	}
}

/* --------------------------------------------------------- bottom sheet */

@media (max-width: 63.99rem) {
	.hupin-js .hupin-toolbar__panels {
		position: fixed;
		inset: 0;
		z-index: 60;
		display: none;
		background: rgba(14, 14, 14, 0.35);
	}

	.hupin-js .hupin-toolbar__panels.is-open {
		display: block;
	}

	.hupin-js .hupin-toolbar__sheet {
		position: absolute;
		inset-inline: 0;
		bottom: 0;
		display: flex;
		max-height: 88vh;
		flex-direction: column;
		background: var(--hupin-paper);
		animation: hupin-sheet-in 400ms var(--hupin-ease);
	}

	.hupin-js .hupin-toolbar__sheet-head {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: space-between;
		padding: 1rem 1.25rem;
		border-bottom: 1px solid var(--hupin-line);
	}

	.hupin-js .hupin-toolbar__sheet-head p {
		margin: 0;
	}

	.hupin-js .hupin-toolbar__sheet-close {
		display: grid;
		place-items: center;
		width: 2.25rem;
		height: 2.25rem;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		cursor: pointer;
	}

	.hupin-js .hupin-toolbar__sheet-body {
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Dentro do sheet as facetas ficam todas abertas e empilhadas, como no
	   storefront — nada de acordeão dentro de gaveta. */
	.hupin-js .hupin-toolbar__panels.is-open .hupin-facet {
		display: block;
		border-top: 0;
		border-bottom: 1px solid var(--hupin-line);
	}

	.hupin-js .hupin-toolbar__panels.is-open .hupin-facet:last-child {
		border-bottom: 0;
	}

	.hupin-js .hupin-toolbar__sheet-foot {
		display: flex;
		flex: 0 0 auto;
		gap: 0.75rem;
		padding: 1rem 1.25rem;
		border-top: 1px solid var(--hupin-line);
	}

	.hupin-js .hupin-toolbar__sheet-foot > * {
		flex: 1 1 0;
	}
}

@keyframes hupin-sheet-in {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

/* --------------------------------------------------------------- a grade */

.hupin-shop-grid-wrap {
	padding-block: 3rem;
}

@media (min-width: 48rem) {
	.hupin-shop-grid-wrap {
		padding-block: 4rem;
	}
}

.hupin-shop-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3.5rem 1rem;
}

@media (min-width: 48rem) {
	.hupin-shop-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 3.5rem 1.5rem;
	}
}

@media (min-width: 64rem) {
	.hupin-shop-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 5rem 2rem;
	}
}

/* ------------------------------------------------------------ sem resultado */

.hupin-shop-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
	padding-block: 5rem;
}

.hupin-shop-empty__title {
	margin: 0;
	font-size: clamp(2rem, 6vw, 4rem);
}

.hupin-shop-empty__text {
	max-width: 28rem;
	margin: 0;
	color: var(--hupin-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.65;
}

/* ------------------------------------------------------------------ botão */

.hupin-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 1.75rem;
	border: 1px solid var(--hupin-ink);
	background: var(--hupin-ink);
	color: var(--hupin-paper);
	cursor: pointer;
	text-decoration: none;
	transition: opacity 160ms ease;
}

.hupin-button:hover {
	opacity: 0.85;
}

.hupin-button--ghost {
	background: none;
	color: var(--hupin-ink);
}

.hupin-button--ghost:hover {
	background: var(--hupin-ink);
	color: var(--hupin-paper);
	opacity: 1;
}

/* ------------------------------------------------------------- paginação */

.hupin-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 4rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--hupin-line);
}

.hupin-pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hupin-pagination__list a,
.hupin-pagination__list span {
	display: grid;
	min-width: 2.25rem;
	height: 2.25rem;
	place-items: center;
	padding-inline: 0.5rem;
	color: var(--hupin-ink-soft);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: background-color 160ms ease, color 160ms ease;
}

.hupin-pagination__list a:hover {
	background: var(--hupin-ink);
	color: var(--hupin-paper);
}

.hupin-pagination__list .current {
	background: var(--hupin-ink);
	color: var(--hupin-paper);
}

.hupin-pagination__list .dots {
	min-width: 1.25rem;
	padding-inline: 0;
}

.hupin-pagination__status {
	margin: 0;
	color: var(--hupin-ink-mute);
	font-variant-numeric: tabular-nums;
}

/* O cabeçalho da vitrine não recebe o recuo genérico de `main`. */
.wp-site-blocks > .wp-block-group.hupin-main > .hupin-shop-head {
	margin-block-start: 0;
}

/* ==========================================================================
   Cabeçalho da categoria
   ==========================================================================
   A vitrine abre com o nome grande e o texto respirando; a categoria acrescenta
   caminho e imagem. A imagem é coluna à direita no desktop e some para cima no
   toque — categoria sem imagem cadastrada simplesmente não tem a coluna, e o
   texto ocupa a largura inteira.
   ========================================================================== */

.hupin-cathead {
	padding-block: 3rem 2.5rem;
}

@media (min-width: 48rem) {
	.hupin-cathead {
		padding-block: 4rem 3rem;
	}
}

.hupin-cathead__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem;
	color: var(--hupin-ink-mute);
}

.hupin-cathead__sep,
.hupin-cathead__here {
	color: var(--hupin-ink-mute);
}

.hupin-cathead__row {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	margin-top: 2rem;
}

@media (min-width: 64rem) {
	.hupin-cathead__row {
		flex-direction: row;
		/* Topo, não base: alinhado pela base o título descia atrás da imagem e
		   abria um vão morto embaixo do caminho. */
		align-items: flex-start;
		gap: 4rem;
		margin-top: 2.5rem;
	}

	.hupin-cathead__text {
		flex: 1 1 58%;
		min-width: 0;
	}

	.hupin-cathead__figure {
		flex: 0 1 42%;
		min-width: 0;
	}
}

.hupin-cathead__title {
	margin: 0;
	/* Um degrau abaixo da vitrine: a página é mais específica, o título pesa
	   menos que o do catálogo inteiro. */
	/* O piso é 2,75rem e não 3rem por causa do 375: a essa largura sobram
	   335 px de coluna, e "MARCADORES" a 48 px pedia 348 — quebrava deixando o
	   "S" sozinho na segunda linha. */
	font-size: clamp(2.75rem, 11vw, 8.5rem);
	/* Nome de categoria é dado do lojista e pode ser mais longo que os de hoje;
	   sem isto, um nome comprido escorreria para fora da coluna. */
	overflow-wrap: break-word;
}

@media (min-width: 64rem) {
	/*
	 * Com a imagem ao lado, o título divide a linha: "STREETWEAR" a 11vw
	 * atravessava a coluna e batia na foto. Sem imagem o texto ocupa a largura
	 * inteira e o tamanho cheio volta.
	 */
	.hupin-cathead__title {
		/*
		 * A conta sai da coluna, não da viewport. A coluna de texto mede
		 * 58% de (largura − goteiras − vão), e o nome mais longo do catálogo
		 * ocupa 7,26em — medido, não estimado. O `calc` mantém o título dentro
		 * disso em toda a faixa, com folga, para nenhum nome quebrar deixando
		 * uma letra órfã na segunda linha.
		 */
		font-size: clamp(3rem, calc(7.6vw - 14px), 7rem);
	}

	.hupin-cathead--sem-imagem .hupin-cathead__title {
		font-size: clamp(2.75rem, 11vw, 8.5rem);
	}
}

.hupin-cathead__desc {
	max-width: 34rem;
	margin: 1.5rem 0 0;
	color: var(--hupin-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.hupin-cathead__count {
	margin: 1.5rem 0 0;
	color: var(--hupin-ink-mute);
	font-variant-numeric: tabular-nums;
}

.hupin-cathead__figure {
	margin: 0;
}

.hupin-cathead__image {
	display: block;
	width: 100%;
	height: auto;
	/* Enquadramento editorial, não recorte de produto. */
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (min-width: 64rem) {
	.hupin-cathead__image {
		/* Mais larga que alta no desktop: a coluna de texto tem três blocos
		   curtos, e 5:4 abria um vão embaixo deles. */
		aspect-ratio: 3 / 2;
	}
}

.hupin-cathead--sem-imagem .hupin-cathead__text {
	flex-basis: 100%;
}

/* ==========================================================================
   Página de produto
   ==========================================================================
   60/40 no desktop, com o painel de compra grudado enquanto a galeria rola.
   O formulário é o nativo do WooCommerce — as regras abaixo vestem a marcação
   do plugin em vez de substituí-la, para o motor de variação seguir intacto.
   ========================================================================== */

.hupin-product {
	display: grid;
	gap: 3rem;
	padding-block: 2.5rem 4rem;
}

@media (min-width: 64rem) {
	.hupin-product {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		gap: 4rem;
		padding-block: 3.5rem 6rem;
	}
}

@media (min-width: 80rem) {
	.hupin-product {
		gap: 6rem;
	}
}

/* ------------------------------------------------------------- galeria */

.hupin-product__gallery {
	min-width: 0;
}

.hupin-product__frame {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	background: var(--hupin-paper);
}

.hupin-product__image {
	width: 100%;
	height: 100%;
	/* `contain` porque a foto é recorte de produto: retrato, paisagem ou
	   quadrada, nenhuma é cortada nem esticada. */
	object-fit: contain;
	object-position: center;
}

.hupin-product__flag {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	color: var(--hupin-ink-mute);
}

.hupin-product__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.hupin-product__thumb {
	display: block;
	width: 4rem;
	padding: 0;
	border: 1px solid var(--hupin-line);
	background: none;
	cursor: pointer;
	transition: border-color 160ms ease;
}

@media (min-width: 48rem) {
	.hupin-product__thumb {
		width: 5rem;
	}
}

.hupin-product__thumb:hover {
	border-color: var(--hupin-line-strong);
}

.hupin-product__thumb.is-current {
	border-color: var(--hupin-ink);
}

.hupin-product__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: contain;
}

/* -------------------------------------------------------------- painel */

.hupin-product__panel {
	min-width: 0;
}

@media (min-width: 64rem) {
	.hupin-product__panel {
		position: sticky;
		/* Abaixo do cabeçalho recolhido, com ar. */
		top: calc(var(--hupin-header-h-min) + 2rem);
		align-self: start;
	}
}

.hupin-product__brand {
	margin: 0;
	color: var(--hupin-ink-mute);
}

.hupin-product__title {
	margin: 1rem 0 0;
	font-size: clamp(1.75rem, 4vw, 3rem);
	line-height: 1;
}

.hupin-product__short {
	max-width: 34rem;
	margin: 0.75rem 0 0;
	color: var(--hupin-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.hupin-product__panel .hupin-price--detail {
	margin-top: 2rem;
}

.hupin-product__stock {
	margin: 1.25rem 0 0;
	color: var(--hupin-ink-mute);
}

.hupin-product__stock.out-of-stock {
	color: var(--hupin-ink);
}

.hupin-product__pickup {
	margin: 2rem 0 0;
	color: var(--hupin-ink-mute);
}

.hupin-product__meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem 1.5rem;
	margin: 2rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--hupin-line);
	font-size: 0.875rem;
}

.hupin-product__meta dt {
	color: var(--hupin-ink-mute);
	padding-top: 0.1rem;
}

.hupin-product__meta dd {
	margin: 0;
}

/* --------------------------------------------- formulário nativo vestido */

.hupin-product__buy {
	margin-top: 2rem;
}

.hupin-product__buy form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}

.hupin-product__buy .variations_form {
	display: block;
}

/* A tabela de variações do plugin vira lista; a estrutura fica, o visual muda. */
.hupin-product__buy table.variations {
	width: 100%;
	margin: 0 0 1.5rem;
	border-collapse: collapse;
}

.hupin-product__buy table.variations th,
.hupin-product__buy table.variations td {
	display: block;
	padding: 0;
	border: 0;
	text-align: left;
}

.hupin-product__buy table.variations th label {
	display: block;
	margin-bottom: 0.625rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1.2;
	text-transform: uppercase;
}

.hupin-product__buy table.variations tr + tr th label {
	margin-top: 1.5rem;
}

.hupin-product__buy select {
	width: 100%;
	max-width: 22rem;
	padding: 0.75rem 0.5rem 0.75rem 0;
	border: 0;
	border-bottom: 1px solid var(--hupin-ink);
	background: none;
	color: inherit;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.9375rem;
}

.hupin-product__buy .reset_variations {
	display: inline-block;
	margin-top: 0.75rem;
	color: var(--hupin-ink-mute);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.hupin-product__buy .woocommerce-variation-price {
	margin-bottom: 1.25rem;
}

.hupin-product__buy .woocommerce-variation-price .hupin-price--detail {
	margin-top: 0;
}

.hupin-product__buy .woocommerce-variation-availability {
	margin-bottom: 1rem;
}

.hupin-product__buy .woocommerce-variation-availability p {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hupin-ink-mute);
}

.hupin-product__buy .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

/* Quando nenhuma variação está escolhida, o preço de base fica; escolhida uma
   de preço diferente, o WooCommerce imprime o dela e o de base sai de cena. */
.hupin-product.has-variation-price > .hupin-product__panel > .hupin-price--detail {
	display: none;
}

/* --------------------------------------------------------- quantidade */

.hupin-product__buy .quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--hupin-line-strong);
}

.hupin-product__buy .quantity .screen-reader-text {
	position: absolute;
}

.hupin-product__buy .quantity input.qty {
	width: 3.25rem;
	height: 3.5rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: 0.9375rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}

.hupin-product__buy .quantity input.qty::-webkit-outer-spin-button,
.hupin-product__buy .quantity input.qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.hupin-qty-step {
	display: grid;
	width: 2.75rem;
	height: 3.5rem;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--hupin-ink-soft);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	transition: color 160ms ease;
}

.hupin-qty-step:hover:not(:disabled) {
	color: var(--hupin-ink);
}

.hupin-qty-step:disabled {
	color: var(--hupin-line-strong);
	cursor: not-allowed;
}

/* -------------------------------------------------------------- botão */

.hupin-product__buy .single_add_to_cart_button {
	display: inline-flex;
	min-width: 13rem;
	flex: 1 1 13rem;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding: 1.125rem 2rem;
	border: 1px solid var(--hupin-ink);
	background: var(--hupin-ink);
	color: var(--hupin-paper);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity 160ms ease;
}

.hupin-product__buy .single_add_to_cart_button:hover {
	opacity: 0.85;
}

.hupin-product__buy .single_add_to_cart_button.disabled,
.hupin-product__buy .single_add_to_cart_button:disabled {
	cursor: not-allowed;
	opacity: 0.3;
}

.hupin-product__buy .stock.out-of-stock {
	width: 100%;
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.hupin-product__buy .wc-no-matching-variations {
	margin: 0 0 1rem;
	color: var(--hupin-ink-soft);
	font-size: 0.875rem;
}

/* ----------------------------------------------------------- swatches */

.hupin-swatches {
	margin-top: 2.25rem;
}

/* Escolher vem antes de comprar: com os swatches acima, o formulário encosta
   neles em vez de abrir o respiro de seção. */
.hupin-swatches + .hupin-product__buy {
	margin-top: 0;
}

.hupin-swatches__group {
	margin: 0 0 1.75rem;
	padding: 0;
	border: 0;
}

.hupin-swatches__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.625rem;
	margin-bottom: 0.875rem;
	padding: 0;
}

.hupin-swatches__current {
	color: var(--hupin-ink-mute);
	font-size: 0.875rem;
}

.hupin-swatches__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.hupin-swatch {
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: box-shadow 160ms ease, opacity 160ms ease;
}

.hupin-swatch--color {
	width: 2rem;
	height: 2rem;
	background: var(--hupin-swatch, var(--hupin-paper-dim));
	box-shadow: inset 0 0 0 1px rgba(14, 14, 14, 0.15);
}

/* Cor que a cartela não conhece não finge cor: fica neutra e riscada. */
.hupin-swatch--sem-cor {
	background:
		linear-gradient(135deg, transparent 46%, var(--hupin-line-strong) 46%, var(--hupin-line-strong) 54%, transparent 54%),
		var(--hupin-paper-dim);
}

.hupin-swatch--chip {
	min-width: 3.5rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--hupin-line-strong);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1.2;
	text-transform: uppercase;
	transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.hupin-swatch--chip:hover {
	border-color: var(--hupin-ink);
}

.hupin-swatch__input:checked + .hupin-swatch--color {
	box-shadow:
		inset 0 0 0 1px rgba(14, 14, 14, 0.15),
		0 0 0 2px var(--hupin-paper),
		0 0 0 4px var(--hupin-ink);
}

.hupin-swatch__input:checked + .hupin-swatch--chip {
	border-color: var(--hupin-ink);
	background: var(--hupin-ink);
	color: var(--hupin-paper);
}

/* O foco tem de aparecer: o input real está fora da tela, então o anel é
   desenhado no rótulo. */
.hupin-swatch__input:focus-visible + .hupin-swatch {
	outline: 2px solid var(--hupin-ink);
	outline-offset: 3px;
}

.hupin-swatch__input:disabled + .hupin-swatch {
	cursor: not-allowed;
	opacity: 0.3;
}

.hupin-swatch__input:disabled + .hupin-swatch--chip {
	text-decoration: line-through;
}

.hupin-swatch__input:disabled + .hupin-swatch--color::after {
	content: '';
	width: 100%;
	height: 1px;
	background: var(--hupin-ink);
	transform: rotate(-45deg);
}

/* --------------------------------------------------- sobre o produto */

.hupin-prodinfo {
	padding-block: 0 4rem;
}

@media (min-width: 64rem) {
	.hupin-prodinfo {
		padding-block: 0 6rem;
	}
}

.hupin-prodinfo__title {
	margin: 0 0 1.5rem;
	color: var(--hupin-ink-mute);
}

.hupin-prodinfo__list {
	max-width: 46rem;
	border-top: 1px solid var(--hupin-line);
}

.hupin-prodinfo__item {
	border-bottom: 1px solid var(--hupin-line);
}

.hupin-prodinfo__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.25rem 0;
	cursor: pointer;
	list-style: none;
}

.hupin-prodinfo__summary::-webkit-details-marker {
	display: none;
}

.hupin-prodinfo__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.hupin-prodinfo__sign {
	position: relative;
	width: 0.875rem;
	height: 0.875rem;
	flex: 0 0 auto;
}

.hupin-prodinfo__sign::before,
.hupin-prodinfo__sign::after {
	content: '';
	position: absolute;
	inset: 50% 0 auto 0;
	height: 1px;
	background: var(--hupin-ink);
	transition: transform 300ms var(--hupin-ease);
}

.hupin-prodinfo__sign::after {
	transform: rotate(90deg);
}

.hupin-prodinfo__item[open] .hupin-prodinfo__sign::after {
	transform: rotate(0deg);
}

.hupin-prodinfo__body {
	padding: 0 0 1.75rem;
	color: var(--hupin-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.hupin-prodinfo__body p {
	margin: 0 0 0.75rem;
	max-width: 42rem;
}

.hupin-prodinfo__body p:last-child {
	margin-bottom: 0;
}

.hupin-specs {
	display: grid;
	gap: 0;
	margin: 0;
}

.hupin-specs__row {
	display: grid;
	grid-template-columns: minmax(7rem, 30%) 1fr;
	gap: 1.5rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--hupin-line);
}

.hupin-specs__row:last-child {
	border-bottom: 0;
}

.hupin-specs dt {
	color: var(--hupin-ink-mute);
	padding-top: 0.15rem;
}

.hupin-specs dd {
	margin: 0;
	color: var(--hupin-ink);
}

/* ------------------------------------------------------- relacionados */

.hupin-related {
	padding-block: 0 5rem;
	border-top: 1px solid var(--hupin-line);
	padding-top: 4rem;
}

@media (min-width: 48rem) {
	.hupin-related {
		padding-block: 5rem 7rem;
	}
}

.hupin-related__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3.5rem 1rem;
	margin-top: 3rem;
}

@media (min-width: 48rem) {
	.hupin-related__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 3.5rem 1.5rem;
	}
}

@media (min-width: 64rem) {
	.hupin-related__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 5rem 2rem;
		margin-top: 4rem;
	}

	/* Poucos relacionados não esticam o card: a grade encolhe e o resto vira ar. */
	.hupin-related__grid[data-count='1'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.hupin-related__grid[data-count='2'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.hupin-related__grid[data-count='3'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Linha do SKU só aparece quando há SKU. Em produto variável ela nasce vazia e
   o WooCommerce a preenche na escolha da variação. */
.hupin-product__meta:has(.sku:empty) dt:first-of-type,
.hupin-product__meta:has(.sku:empty) dd:first-of-type {
	display: none;
}

/* Opção cuja variação está sem estoque: continua clicável, porque clicar mostra
   o aviso do WooCommerce, mas não se disfarça de disponível. */
.hupin-swatch--esgotado {
	opacity: 0.45;
}

.hupin-swatch--color.hupin-swatch--esgotado {
	position: relative;
}

.hupin-swatch--color.hupin-swatch--esgotado::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 130%;
	height: 1px;
	background: var(--hupin-ink);
	transform: translate(-50%, -50%) rotate(-45deg);
}

.hupin-swatch--chip.hupin-swatch--esgotado {
	text-decoration: line-through;
}

/* ==========================================================================
   Carrinho
   ========================================================================== */

/* --------------------------------- medidas fixas do plugin -------------- */

/* O `woocommerce-blocktheme.css` é a camada de compatibilidade do WooCommerce com
   temas em blocos e desenha o carrinho como tabela: largura máxima de 1000px,
   miniatura de 120px, célula de remover de 1em, cupom em flex e campo com altura
   e margem próprias — várias delas presas a `#coupon_code`, que carrega peso de
   ID. Como aqui a marcação é de lista, essas medidas precisam sair explicitamente.
   Cada regra abaixo desfaz uma do plugin, e só dentro do carrinho do tema. */

.woocommerce-cart main .woocommerce,
.woocommerce-cart .woocommerce {
	max-width: none;
}

.hupin-cart .woocommerce-cart-form .product-thumbnail.hupin-cart__media,
.hupin-cart .woocommerce-cart-form .product-thumbnail.hupin-cart__media a,
.hupin-cart .woocommerce-cart-form .product-thumbnail.hupin-cart__media a img,
.hupin-cart .woocommerce-cart-form .product-thumbnail.hupin-cart__media img {
	width: 100%;
}

.hupin-cart .woocommerce-cart-form .product-remove.hupin-cart__remove {
	width: auto;
}

.hupin-cart .woocommerce-cart-form .coupon.hupin-cart__coupon {
	display: block;
}

.hupin-cart .woocommerce-cart-form #coupon_code.hupin-cart__coupon-input {
	width: 100%;
	height: 2.75rem;
	margin-right: 0;
	padding: 0 0.875rem;
	font-size: 0.875rem;
}

.hupin-cart .cart-collaterals .hupin-totals__title,
.hupin-cart__summary .hupin-totals__title {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
}

.hupin-cart {
	display: grid;
	gap: 3rem;
	padding-block: 2.5rem 5rem;
}

.hupin-cart__masthead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.25rem;
}

.hupin-cart__eyebrow {
	flex: 1 0 100%;
	margin: 0 0 0.5rem;
	color: var(--hupin-ink-mute);
}

.hupin-cart__title {
	margin: 0;
	font-size: clamp(2.25rem, 7vw, 4.5rem);
	line-height: 0.95;
}

.hupin-cart__count {
	margin: 0;
	color: var(--hupin-ink-mute);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ itens */

.hupin-cart__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--hupin-line);
}

.hupin-cart__item {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: 1.25rem;
	padding-block: 1.5rem;
	border-bottom: 1px solid var(--hupin-line);
}

.hupin-cart__media {
	/* Sem isto o item de grade estica até a altura da linha e o fundo aparece
	   como uma sobra embaixo da foto. */
	align-self: start;
	background: var(--hupin-paper-dim);
}

.hupin-cart__media a,
.hupin-cart__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: contain;
}

.hupin-cart__body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
}

.hupin-cart__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.hupin-cart__ident {
	min-width: 0;
}

.hupin-cart__brand {
	margin: 0 0 0.25rem;
	color: var(--hupin-ink-mute);
}

.hupin-cart__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
}

.hupin-cart__name a {
	color: inherit;
}

/* Atributos da variação, impressos por wc_get_formatted_cart_item_data(). */
.hupin-cart__ident .variation {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.75rem;
	margin: 0.5rem 0 0;
	color: var(--hupin-ink-soft);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.hupin-cart__ident .variation dt {
	margin: 0;
	font-weight: 400;
}

.hupin-cart__ident .variation dd {
	margin: 0 0.75rem 0 0.25rem;
}

.hupin-cart__ident .variation dd p {
	margin: 0;
}

.hupin-cart__unit {
	margin: 0.5rem 0 0;
	color: var(--hupin-ink-mute);
}

.hupin-cart__ident .backorder_notification {
	margin: 0.5rem 0 0;
	color: var(--hupin-ink-soft);
	font-size: 0.8125rem;
}

.hupin-cart__subtotal {
	flex: none;
	margin: 0;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.hupin-cart__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* Passos de quantidade: mesmo componente da página de produto, em escala menor. */
.hupin-cart__qty .quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--hupin-line-strong);
}

.hupin-cart__qty .quantity .screen-reader-text {
	position: absolute;
}

.hupin-cart__qty .quantity input.qty {
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: 0.875rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}

.hupin-cart__qty .quantity input.qty::-webkit-outer-spin-button,
.hupin-cart__qty .quantity input.qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.hupin-cart__qty .hupin-qty-step {
	width: 2.25rem;
	height: 2.75rem;
}

/* O `woocommerce.css` desenha `a.remove` como um "×" vermelho de 1em por 1em, com
   `color` em `!important`. Aqui o link é a palavra "Remover": as medidas e a cor
   do plugin precisam sair inteiras, senão o texto sai grande, vermelho e vaza da
   coluna por cima do resumo. O `!important` daqui responde ao do plugin. */
.hupin-cart .hupin-cart__remove .remove {
	display: inline-block;
	width: auto;
	height: auto;
	padding: 0 0 0.125rem;
	border-bottom: 1px solid var(--hupin-line-strong);
	border-radius: 0;
	background: none;
	color: var(--hupin-ink-mute) !important;
	font-size: 0.625rem;
	font-weight: 500;
	line-height: 1.2;
	text-align: left;
	text-decoration: none;
	transition: color 160ms ease, border-color 160ms ease;
}

.hupin-cart .hupin-cart__remove .remove:hover,
.hupin-cart .hupin-cart__remove .remove:focus-visible {
	background: none;
	color: var(--hupin-ink) !important;
	border-bottom-color: var(--hupin-ink);
}

/* ---------------------------------------------------------------- cupom */

.hupin-cart__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	padding-top: 1.75rem;
}

.hupin-cart__coupon {
	flex: 1 1 18rem;
	max-width: 24rem;
}

.hupin-cart__coupon label {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--hupin-ink-mute);
}

.hupin-cart__coupon-row {
	display: flex;
}

.hupin-cart__coupon-input {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	height: 2.75rem;
	padding: 0 0.875rem;
	border: 1px solid var(--hupin-line-strong);
	border-right: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: 0.875rem;
}

.hupin-cart__coupon-input:focus-visible {
	outline: 2px solid var(--hupin-ink);
	outline-offset: -2px;
}

/* Erro de cupom não sobe para o topo da página: o `cart.js` o injeta embaixo do
   campo, como `.coupon-error-notice`, e marca o input com `has-error`. */
.hupin-cart__coupon-input.has-error {
	border-color: #a3231f;
}

.hupin-cart__coupon .coupon-error-notice {
	margin: 0.625rem 0 0;
	color: #a3231f;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.hupin-cart__coupon-go,
.hupin-cart__update {
	height: 2.75rem;
	padding: 0 1.25rem;
	border: 1px solid var(--hupin-ink);
	background: none;
	color: var(--hupin-ink);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 160ms ease, color 160ms ease;
}

.hupin-cart__coupon-go:hover:not(:disabled),
.hupin-cart__update:hover:not(:disabled) {
	background: var(--hupin-ink);
	color: var(--hupin-paper);
}

.hupin-cart__update:disabled {
	border-color: var(--hupin-line-strong);
	color: var(--hupin-ink-mute);
	cursor: not-allowed;
}

/* Com JavaScript a quantidade se atualiza sozinha e o botão vira ruído. Sem
   JavaScript a classe nunca é aplicada e ele continua sendo o único caminho. */
.woocommerce-cart-form.is-auto .hupin-cart__update {
	display: none;
}

/* ---------------------------------------------------------------- resumo */

.hupin-cart__summary {
	align-self: start;
}

.hupin-totals {
	padding: 1.75rem;
	border: 1px solid var(--hupin-ink);
}

.hupin-totals__title {
	margin: 0 0 1.25rem;
	color: var(--hupin-ink-mute);
}

.hupin-totals__list {
	margin: 0;
}

.hupin-totals__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.75rem;
	border-top: 1px solid var(--hupin-line);
}

.hupin-totals__row:first-child {
	border-top: 0;
	padding-top: 0;
}

.hupin-totals__row dt,
.hupin-totals__row dd {
	margin: 0;
}

.hupin-totals__row dt {
	color: var(--hupin-ink-soft);
	font-size: 0.875rem;
}

.hupin-totals__row dd {
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.hupin-totals__row--total {
	border-top-color: var(--hupin-ink);
	padding-top: 1rem;
}

.hupin-totals__row--total dt {
	color: var(--hupin-ink);
	font-size: 1rem;
}

.hupin-totals__row--total dd {
	font-size: 1.25rem;
	font-weight: 500;
}

.hupin-totals__row--pix {
	border-top-style: dashed;
}

.hupin-totals__row--pix dd {
	font-weight: 500;
}

/* Frete e calculadora ocupam a linha inteira quando o WooCommerce tiver algo a
   dizer. Não há nada escrito à mão aqui: sem método configurado, nada aparece. */
.hupin-totals__row--block,
.hupin-totals .shipping {
	display: block;
}

.hupin-totals .shipping dt,
.hupin-totals .shipping th {
	display: block;
	margin-bottom: 0.5rem;
}

.hupin-totals .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hupin-totals__go {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1.5rem;
}

.hupin-cart__checkout {
	/* O tema não redefine `box-sizing` globalmente: sem isto o `width: 100%` soma
	   o padding do botão e ele escapa da moldura do resumo. */
	box-sizing: border-box;
	width: 100%;
}

.hupin-cart__disclaimer {
	margin: 0;
	color: var(--hupin-ink-mute);
	font-size: 0.75rem;
	line-height: 1.55;
}

.hupin-cart__clear {
	align-self: center;
	color: var(--hupin-ink-mute);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 160ms ease, border-color 160ms ease;
}

.hupin-cart__clear:hover {
	color: var(--hupin-ink);
	border-bottom-color: var(--hupin-ink);
}

/* ---------------------------------------------------------- duas colunas */

@media (min-width: 64rem) {
	.hupin-cart {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: 4rem;
		align-items: start;
	}

	.hupin-cart__masthead {
		grid-column: 1 / -1;
	}

	.hupin-cart__item {
		grid-template-columns: 7.5rem minmax(0, 1fr);
		gap: 2rem;
		padding-block: 2rem;
	}

	.hupin-cart__name {
		font-size: 1.125rem;
	}

	.hupin-cart__summary {
		position: sticky;
		top: calc(var(--hupin-header-h-min) + 2rem);
	}
}

/* --------------------------------------------------------- carrinho vazio */

.hupin-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
	padding-block: 4rem 6rem;
}

.hupin-cart-empty__title {
	margin: 0;
	font-size: clamp(2.5rem, 9vw, 7rem);
	line-height: 0.9;
}

.hupin-cart-empty__notice .cart-empty {
	margin: 0;
	max-width: 30rem;
	color: var(--hupin-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.hupin-cart-empty__text {
	max-width: 34rem;
	margin: 0;
	color: var(--hupin-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.hupin-cart-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	margin-top: 1rem;
}

.hupin-cart-empty__actions p {
	margin: 0;
}

/* ------------------------------------------------------ avisos do plugin */

/* Em tema de blocos o WooCommerce troca os avisos clássicos pelos avisos de
   bloco (`Blocks\Domain\Services\Notices`), então as duas marcações são
   vestidas — a de bloco é a que aparece hoje, a clássica fica de rede. */

.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-notices-wrapper {
	box-sizing: border-box;
	padding-inline: 1.25rem;
	padding-top: 2rem;
}

/* O `wc-blocks.css` usa `.banner.is-success` (0,2,0) e `padding !important`, então
   os seletores daqui precisam nomear cada estado para vencer no peso — não por
   capricho de especificidade, mas porque é a única forma de o aviso sair verde
   de plugin e entrar na paleta da loja. O padding do plugin fica. */

body .wc-block-components-notice-banner,
body .wc-block-components-notice-banner.is-success,
body .wc-block-components-notice-banner.is-error,
body .wc-block-components-notice-banner.is-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0 0 1rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--hupin-line-strong);
	border-left: 3px solid var(--hupin-ink);
	border-radius: 0;
	background-color: var(--hupin-paper-dim);
	color: var(--hupin-ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem;
	line-height: 1.5;
	list-style: none;
}

/* O ::before de ícone do CSS clássico do plugin não combina com a moldura. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
	content: none;
}

body .wc-block-components-notice-banner > svg,
body .wc-block-components-notice-banner.is-success > svg,
body .wc-block-components-notice-banner.is-info > svg,
body .wc-block-components-notice-banner.is-error > svg {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0.125rem 0 0;
	padding: 0;
	border-radius: 0;
	background: none;
	fill: var(--hupin-ink);
}

body .wc-block-components-notice-banner.is-error,
.woocommerce-error {
	border-left-color: #a3231f;
}

body .wc-block-components-notice-banner.is-error > svg {
	fill: #a3231f;
	background: none;
}


body .wc-block-components-notice-banner.is-error > svg {
	color: #a3231f;
}

body .wc-block-components-notice-banner__content {
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
}

body .wc-block-components-notice-banner__content > ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body .wc-block-components-notice-banner a,
.woocommerce-message a,
.woocommerce-error a,
.woocommerce-info a {
	color: inherit;
}

body .wc-block-components-notice-banner .button,
body .wc-block-components-notice-banner .wc-forward,
.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto;
	padding: 0.5rem 1rem;
	border: 1px solid var(--hupin-ink);
	background: none;
	color: var(--hupin-ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

body .wc-block-components-notice-banner .button:hover,
body .wc-block-components-notice-banner .wc-forward:hover,
.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
	background: var(--hupin-ink);
	color: var(--hupin-paper);
}

@media (min-width: 48rem) {
	.woocommerce-notices-wrapper {
		padding-inline: 2rem;
	}
}

@media (min-width: 64rem) {
	.woocommerce-notices-wrapper {
		padding-inline: 3rem;
	}
}

@media (min-width: 100rem) {
	.woocommerce-notices-wrapper {
		padding-inline: 4.5rem;
	}
}

/* ---------------------------------------------- título do checkout ------ */

/* A página de finalização não é redesenhada nesta etapa: ela usa o enquadramento
   do WooCommerce. O que faltava era um `h1` — a página não tinha nenhum, e quem
   navega por leitor de tela chegava num documento sem título. O tamanho é
   contido de propósito, para o cabeçalho não competir com o formulário. */
/* Tipografia é a de `.hupin-display`, já aprovada; aqui só o tamanho e o
   espaçamento, contidos para o título não competir com o formulário. */
.hupin-checkout__title {
	margin: 0 0 2rem;
	font-size: clamp(1.75rem, 4vw, 2.75rem);
}