@charset "UTF-8";
/* Carrossel scroll-snap + galeria de produto — substitui o RoyalSlider */

/* ---------- carrossel genérico ---------- */
.carousel { position: relative; width: 100%; }

.carousel-track {
	display: flex;
	/* scroll horizontal apenas; o gesto vertical passa naturalmente para a
	   página (não pôr touch-action: pan-x — isso desligava o pan vertical) */
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.carousel-track::-webkit-scrollbar { display: none; }

.carousel-slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	position: relative;
}

.carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.32);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s ease, opacity .15s ease;
}
.carousel-btn:hover,
.carousel-btn:focus-visible { background: rgba(0, 0, 0, 0.55); outline: none; }
.carousel-btn--prev { left: 14px; }
.carousel-btn--next { right: 14px; }
.carousel-btn svg { width: 20px; height: 20px; fill: currentColor; }

/* no hero, as setas só aparecem ao passar o rato (no telemóvel usa-se o swipe) */
@media (hover: hover) and (min-width: 900px) {
	#hero-carousel .carousel-btn { opacity: 0; }
	#hero-carousel:hover .carousel-btn,
	#hero-carousel .carousel-btn:focus-visible { opacity: 1; }
}

.carousel-dots {
	position: absolute;
	left: 0; right: 0;
	bottom: 10px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.carousel-dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
}
.carousel-dots button[aria-current="true"] { background: #fff; }

/* ---------- hero (homepage) ---------- */
#hero-carousel .carousel-slide { height: 300px; }
#hero-carousel .carousel-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
	display: block;
}
/* scrim: escurece a base (e um pouco a esquerda) para a legenda ler bem sobre qualquer foto */
#hero-carousel .carousel-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 20%, rgba(0, 0, 0, 0.08) 44%, rgba(0, 0, 0, 0) 62%),
		linear-gradient(to right, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 46%);
	pointer-events: none;
}
@media (min-width: 641px)  { #hero-carousel .carousel-slide { height: 380px; } }
@media (min-width: 900px)  { #hero-carousel .carousel-slide { height: 460px; } }
@media (min-width: 1280px) { #hero-carousel .carousel-slide { height: 520px; } }

.hero-caption {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	max-width: 640px;
	padding: 22px 26px 26px;
	color: #fff;
	text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5);
}
.hero-kicker {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}
.hero-caption h2 {
	margin: 0;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.12;
	color: #fff;
}
@media (min-width: 900px) {
	.hero-caption { padding: 34px 40px 40px; max-width: 720px; }
	.hero-caption h2 { font-size: 38px; }
	.hero-kicker { font-size: 13px; margin-bottom: 8px; }
}

/* ---------- produtos em destaque (homepage) ---------- */
#produtos-carousel .carousel-slide { height: 300px; background: #f4f4f4; }
@media (min-width: 861px)  { #produtos-carousel .carousel-slide { height: 320px; } }
#produtos-carousel .carousel-slide a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
#produtos-carousel .carousel-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
#produtos-carousel .destaque-ref {
	position: absolute;
	left: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 12px;
	letter-spacing: 0.04em;
	padding: 3px 10px;
}

/* ---------- galeria de produto (artigo.php) ---------- */
.galeria-principal {
	width: 100%;
	background: #f6f6f6;
}
.galeria-principal img {
	width: 100%;
	height: 380px;
	object-fit: contain;
	display: block;
	cursor: zoom-in;
}
@media (max-width: 640px) {
	.galeria-principal img { height: 260px; }
}
.galeria-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}
.galeria-thumb {
	padding: 0;
	border: 2px solid transparent;
	background: none;
	cursor: pointer;
	line-height: 0;
}
.galeria-thumb[aria-current="true"] { border-color: #20A6DC; }
.galeria-thumb img {
	width: 75px;
	height: 75px;
	object-fit: cover;
	display: block;
}

.galeria-dialog {
	border: 0;
	padding: 0;
	max-width: 92vw;
	max-height: 92vh;
	background: transparent;
}
.galeria-dialog::backdrop { background: rgba(0, 0, 0, 0.85); }
.galeria-dialog img {
	max-width: 92vw;
	max-height: 92vh;
	display: block;
}