/* =========================================================
   Home (front-page.php) — editorial, liderada por produto e
   em largura total. Reutiliza o card da loja (.cos-card) e os
   tokens da marca (--ink, --paper, --sand, --line, --sans…).

   As faixas rompem o cap de 1800px da .cos-shell (mesma técnica
   do footer/marquee); os cabeçalhos e o texto dos cards mantêm o
   gutter para não colarem às margens.
   ========================================================= */

/* Full-bleed das faixas da home */
.cos-home-hero,
.cos-home-grid,
.cos-home-cats,
.cos-home-cta {
	width: 100vw;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ── 1. Hero — slider de destaques (tiles verticais 2:3) ─
   As fotos de produto são 2:3 (verticais). Tiles à mesma proporção mostram a
   imagem completa, sem corte. Swiper controla o gesto/snap para evitar paragens
   intermédias em tablet e mobile. */
.cos-home-hero {
	display: block;
	overflow: hidden;
}
.cos-home-hero__track,
.cos-home-cats__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
}
/* Anti-FOUC: o layout em linha e a largura dos slides vêm do Swiper (CSS do
   CDN + larguras inline aplicadas por JS só no DOMContentLoaded). Até lá os
   slides empilhavam a 100vw e, com aspect-ratio 2/3, ficavam gigantes durante
   uns ms. Reproduzimos aqui a largura inicial — as mesmas slidesPerView do
   home-slider.js — para não haver flash nem salto de layout (CLS). O Swiper
   sobrepõe estas regras com estilo inline assim que inicializa. */
.cos-home-hero__track > .swiper-slide,
.cos-home-cats__track > .swiper-slide {
	flex: 0 0 auto;
	width: calc(100% / 1.14);
}
@media (min-width: 700px) {
	.cos-home-hero__track > .swiper-slide,
	.cos-home-cats__track > .swiper-slide {
		width: calc(100% / 2.14);
	}
}
@media (min-width: 901px) {
	.cos-home-hero__track > .swiper-slide,
	.cos-home-cats__track > .swiper-slide {
		width: calc(100% / 4.14);
	}
}
/* O .swiper-slide é o item dimensionado pelo Swiper; o cartão (<a>) preenche-o.
   Slide passou a <div> (em vez de <a>) para o role="group" do módulo a11y do
   Swiper ser válido — o link e o seu aspect-ratio mantêm-se intactos. */
.cos-home-hero__track > .swiper-slide,
.cos-home-cats__track > .swiper-slide {
	display: flex;
}
.cos-home-hero__track > .swiper-slide > .cos-home-hero__tile,
.cos-home-cats__track > .swiper-slide > .cos-home-cat {
	width: 100%;
}

/* Swiper handles drag/touch. Keep the product imagery unselectable during swipes. */
.cos-home-hero,
.cos-home-cats {
	cursor: grab;
}
.cos-home-hero:active,
.cos-home-cats:active {
	cursor: grabbing;
}
.cos-home-hero a,
.cos-home-hero img,
.cos-home-cats a,
.cos-home-cats img {
	-webkit-user-drag: none;
	user-select: none;
}
.cos-home-hero__tile {
	position: relative;
	aspect-ratio: 2 / 3;
	display: block;
	height: auto;
	overflow: hidden;
	background: var(--sand);
	color: var(--paper);
}
.cos-home-hero__tile:hover {
	color: var(--paper);
	text-decoration: none;
}
.cos-home-hero__media,
.cos-home-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.cos-home-hero__img {
	object-fit: cover;
	object-position: center;
	transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.cos-home-hero__tile:hover .cos-home-hero__img {
	transform: scale(1.045);
}
/* Scrim para legibilidade da legenda */
.cos-home-hero__tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--overlay-scrim-strong) 0%, transparent 48%);
	pointer-events: none;
}
.cos-home-hero__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: clamp(20px, 3vw, 44px);
}
.cos-home-hero__eyebrow {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--paper-65);
}
.cos-home-hero__name {
	font-family: var(--sans);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.15;
	font-size: clamp(16px, 1.5vw, 22px);
}
.cos-home-hero__price,
.cos-home-hero__price * {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--paper);
	background: transparent;
}
.cos-home-hero__price del,
.cos-home-hero__price del * {
	color: var(--paper-65);
	text-decoration: line-through;
}
.cos-home-hero__price ins,
.cos-home-hero__price ins * {
	color: var(--paper);
	text-decoration: none;
}
.cos-home-hero__price .woocommerce-price-suffix,
.cos-home-hero__price small {
	display: none;
}

/* ── 2 & 3. Cabeçalho de secção ───────────────────────── */
.cos-home-section {
	padding: clamp(64px, 8vw, 120px) 0 0;
}
.cos-home-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding: 0 var(--gutter);
	margin: 0 0 clamp(28px, 3.5vw, 44px);
}
.cos-home-section__eyebrow {
	display: block;
	margin-bottom: 12px;
}
.cos-home-section__title {
	font-family: var(--sans);
	font-weight: 400;
	text-transform: uppercase;
	font-size: var(--fs-h2-section);
	letter-spacing: 0.02em;
	line-height: 1.05;
	margin: 0;
}
.cos-home-section__link {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--stone);
	white-space: nowrap;
	display: inline-block;
	padding-block: 6px;        /* alvo de toque ≥24px (WCAG 2.5.8) */
}
.cos-home-section__link:hover {
	color: var(--ink);
}

/* ── 2. Grelha de destaques — cards grandes, full-bleed ── */
.cos-home-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px 14px;              /* mesmo ritmo da grelha da loja */
	padding-inline: 0;           /* imagens edge-to-edge */
}
/* Título/preço justos à imagem, como na grelha da loja (não recuados pelo
   gutter, que deixava demasiado espaço à esquerda). Pequeno inset só para não
   colarem à margem do ecrã na coluna mais à esquerda. */
.cos-home-grid .cos-card__meta {
	padding: 0 clamp(8px, 1.2vw, 16px) 12px;
}
@media (max-width: 1100px) {
	.cos-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.cos-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* ── 3. Categorias — slider horizontal com todas as categorias ─
   Mesma mecânica Swiper do hero para manter o gesto consistente em touch. */
.cos-home-cats {
	display: block;
	overflow: hidden;
}
/* Mesma estrutura/tamanho dos tiles do hero: imagem em cover, legenda em
   overlay, proporção 2:3 e a mesma largura (≈1/3 do ecrã no desktop). */
.cos-home-cat {
	position: relative;
	display: block;
	aspect-ratio: 2 / 3;                  /* mesma estrutura/proporção dos tiles do topo (sem corte) */
	height: auto;
	overflow: hidden;
	background: var(--sand);
	color: var(--paper);
}
.cos-home-cat:hover {
	color: var(--paper);
	text-decoration: none;
}
.cos-home-cat__media,
.cos-home-cat__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.cos-home-cat__img {
	object-fit: cover;
	object-position: center;
	transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.cos-home-cat:hover .cos-home-cat__img {
	transform: scale(1.045);
}
.cos-home-cat::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--overlay-scrim-strong) 0%, transparent 48%);
	pointer-events: none;
}
.cos-home-cat__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: clamp(14px, 1.4vw, 22px);  /* proporcional aos tiles mais pequenos */
}
.cos-home-cat__name {
	font-family: var(--sans);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.15;
	font-size: clamp(16px, 1.5vw, 22px);
}
.cos-home-cat__count {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--paper-65);
}

/* Ecrãs médios e portáteis (inclui MacBooks, ~1440–1728px): o slider mostra 4
   tiles, ficando cada um estreito. Sem isto, o nome (até 22px, uppercase) parte
   em linhas e o padding (até 44px) aperta o texto. Reduz tipografia + padding
   nesta faixa; só ecrãs muito grandes (>1800px), com tiles largos, mantêm o
   tamanho maior, e ≤900px já passa a 2 tiles (mais largos). */
@media (min-width: 901px) and (max-width: 1800px) {
	.cos-home-hero__cap { padding: 14px 16px; gap: 4px; }
	.cos-home-cat__cap  { padding: 12px 14px; gap: 4px; }
	.cos-home-hero__name,
	.cos-home-cat__name { font-size: 14px; letter-spacing: 0.02em; }
	.cos-home-hero__eyebrow,
	.cos-home-cat__count { font-size: 10px; }
	.cos-home-hero__price,
	.cos-home-hero__price * { font-size: 12px; }
}

/* ── 4. CTA de fecho ──────────────────────────────────── */
.cos-home-cta {
	margin-top: clamp(64px, 8vw, 120px);
	padding: clamp(72px, 10vw, 140px) var(--gutter);
	background: var(--sand);
	text-align: center;
}
.cos-home-cta__eyebrow {
	display: block;
	margin-bottom: 14px;
}
.cos-home-cta__title {
	font-family: var(--sans);
	font-weight: 400;
	text-transform: uppercase;
	font-size: var(--fs-h2-cta);
	letter-spacing: 0.01em;
	line-height: 1.08;
	margin: 0 0 28px;
}
.cos-home-cta__btn.cta {
	width: auto;
	display: inline-flex;
	justify-content: center;
	gap: 12px;
	padding-inline: 40px;
}