/* ============================================================================
   SIBRAFF — Catálogo de Flores e Coroas de Flores (flores-coroas.html)
   Estilos do grid de produtos alimentado pela Planilha Google (js/flores.js)
   Cores do site: dourado #c1ae58 · azul-marinho #152c48
   ============================================================================ */

:root{
	--fl-gold:#c1ae58;
	--fl-gold-dark:#a8954a;
	--fl-navy:#152c48;
	--fl-ink:#212529;
	--fl-body:#495057;
	--fl-muted:#8a8f98;
	--fl-line:#e6e8ec;
}

/* ---- Banner (CTA do hero, mesmo estilo do index.html) ---- */
#catalogo{ scroll-margin-top: 110px; }

/* O triângulo branco (SVG) e a faixa branca lateral têm tamanho fixo no tema;
   quando o banner fica mais alto que o da home, a foto de fundo aparece no
   canto esquerdo. Aqui os dois passam a cobrir sempre a altura toda. */
.custom-section-background .slider-slide .custom-svg-1{
	top: -100px;
	height: calc(100% + 380px); /* 100% = altura do .container; a folga cobre o banner todo */
	width: 700px;
	max-width: none;
}
.custom-section-background .container:before{
	height: calc(100% + 600px) !important;
}
.slider-cta-btn{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 15px;
	padding: 12px 28px;
	border-radius: 6px;
	border: 2px solid transparent;
	text-decoration: none;
	transition: all 0.3s ease;
	animation: pulse-button 2.5s ease-in-out infinite, float-button 3.5s ease-in-out infinite;
	min-width: 180px;
	text-align: center;
}
.slider-cta-secondary{
	background-color: #c1ae58;
	border-color: #c1ae58;
	color: #ffffff;
}
.slider-cta-secondary:hover{
	background-color: #a89646;
	border-color: #a89646;
	color: #ffffff;
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 8px 25px rgba(193, 174, 88, 0.5);
	animation: none;
}
@keyframes pulse-button{
	0%, 100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(193, 174, 88, 0.3); }
	50%{ transform: scale(1.01); box-shadow: 0 0 0 6px rgba(193, 174, 88, 0); }
}
@keyframes float-button{
	0%, 100%{ transform: translateY(0px); }
	50%{ transform: translateY(-4px); }
}
/* ---- Correção do header no mobile/tablet (só nesta página) ----
   O tema fixa height:110px no .header-container; abaixo de 992px as colunas
   empilham e o conteúdo vaza por cima do banner. Aqui o header vira uma linha
   compacta: logo à esquerda, menu (burger) à direita. */
@media (max-width: 991px){
	#header .header-container{ height:auto !important; }
	#header .header-container > .header-row{
		flex-wrap: nowrap !important;
		align-items: center !important;
		width: 100%;
	}
	#header .header-container .header-column{
		width: auto !important;
		flex: 0 1 auto !important;
	}
	#header .header-container .header-column:last-child{ flex: 1 1 auto !important; margin-left: auto !important; }
	#header .header-container .header-column:last-child > .header-row{
		width: 100%;
		justify-content: flex-end !important;
		flex-wrap: nowrap !important;
	}
	#header .header-nav{
		display: flex !important;
		align-items: center;
		justify-content: flex-end;
		width: auto;
	}
	/* o tema usa float:right no botão do menu, que não ocupa espaço no flex */
	#header .header-btn-collapse-nav{
		float: none !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		margin: 0 !important;
	}
	#header .header-nav .feature-box{ display: none !important; } /* bloco "WHATSAPP Clique aqui" (redundante: topo já tem botão) */
	#header .header-logo img{ max-width: 150px !important; }
}

/* Tablets: garante legibilidade do texto sobre a foto (fora da área do triângulo) */
@media (min-width: 576px) and (max-width: 991px){
	.custom-section-background .slider-slide .container:after{
		content: '';
		position: absolute;
		top: 0; bottom: 0; left: -30px;
		width: 78%;
		background: linear-gradient(90deg, rgba(255,255,255,.92) 55%, rgba(255,255,255,0) 100%);
		z-index: 0;
		pointer-events: none;
	}
}

/* Celular: o tema já remove a foto de fundo (fundo branco); compacta o banner */
@media (max-width: 575px){
	.custom-section-background,
	.custom-section-background .slider-slide{
		min-height: 0 !important;
	}
	.custom-section-background .slider-slide .container{
		min-height: 0 !important;
		padding-top: 1.25rem !important;
		padding-bottom: .75rem !important;
		margin-top: .5rem !important;
		margin-bottom: .5rem !important;
	}
	.custom-section-background .slider-slide h1{
		font-size: 1.55rem !important;
		line-height: 1.3 !important;
	}
	.custom-section-background .slider-slide h1 br{ display: none; }
	.custom-section-background .slider-slide h2{
		font-size: .9rem !important;
	}
	.slider-cta-btn{
		width: 100%;
		min-width: 100%;
		margin-right: 0 !important;
		margin-bottom: 12px !important;
		font-size: 14px;
		padding: 11px 24px;
	}
}

/* ---- Filtros por categoria ---- */
.shop-filters{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:2.2rem; }
.filter-chip{ border:1.5px solid var(--fl-line); background:#fff; color:var(--fl-ink); border-radius:50rem; padding:.55rem 1.15rem; font-size:.85rem; font-weight:600; cursor:pointer; transition:transform .2s, background .25s, color .25s, border-color .25s; }
.filter-chip:hover{ border-color:var(--fl-navy); transform:translateY(-2px); }
.filter-chip.active{ background:var(--fl-navy); color:#fff; border-color:var(--fl-navy); }

/* ---- Grid e cards ---- */
.shop-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.4rem; }
.shop-card{ position:relative; background:#fff; border:1px solid var(--fl-line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; transition:transform .35s, box-shadow .35s; }
.shop-card:hover{ transform:translateY(-8px); box-shadow:0 24px 48px rgba(21,44,72,.16); }
.shop-card > .shop-media{ display:block; width:100%; aspect-ratio:4/3; overflow:hidden; position:relative; }
.shop-media-img{ display:block; width:100%; height:100%; object-fit:cover; }
.shop-badges{ position:absolute; top:12px; left:12px; right:12px; display:flex; gap:.4rem; flex-wrap:wrap; z-index:2; }
.shop-badge{ font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.3rem .6rem; border-radius:50rem; color:#fff; box-shadow:0 4px 10px rgba(0,0,0,.18); }
.shop-badge.tam{ background:var(--fl-navy); }
.shop-badge.destaque{ background:var(--fl-gold); color:#fff; margin-left:auto; }
.shop-body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.shop-cat{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--fl-gold-dark); }
.shop-card h3{ font-size:1.04rem; font-weight:700; margin:.25rem 0 .4rem; color:var(--fl-ink); }
.shop-desc{ font-size:.85rem; color:var(--fl-body); margin-bottom:.9rem; flex:1; }

/* ---- Preço ---- */
.shop-price{ margin-bottom:.95rem; }
.price-was{ font-size:.8rem; color:var(--fl-muted); text-decoration:line-through; }
.price-now{ font-size:1.35rem; font-weight:800; color:var(--fl-navy); line-height:1.1; }
.price-consulta{ font-size:1.05rem; font-weight:700; color:var(--fl-navy); }
.price-installments{ display:block; font-size:.75rem; color:var(--fl-body); margin-top:.15rem; }

/* ---- Botão do card ---- */
.shop-actions{ display:flex; gap:.5rem; }
.shop-actions .btn{ flex:1; font-size:.8rem; padding:.6rem .5rem; white-space:nowrap; border-radius:50rem; font-weight:600; }
.shop-actions .btn i{ margin-right:.35rem; }
.btn-wa-card{ background:#25d366; border:0; color:#fff !important; }
.btn-wa-card:hover{ background:#1ebe5b; color:#fff; }

/* ---- Placeholder (produto sem foto) ---- */
.shop-media .ph{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; background:repeating-linear-gradient(45deg,rgba(21,44,72,.04) 0 12px,rgba(21,44,72,0) 12px 24px), linear-gradient(135deg,#f4f5f7 0%,#eceef1 100%); border-bottom:1px solid var(--fl-line); }
.shop-media .ph i.ph-icon{ font-size:2rem; color:var(--fl-gold); }
.shop-media .ph .ph-label{ font-weight:600; font-size:.92rem; color:#4a4d54; }
.shop-media .ph .ph-dim{ font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; opacity:.7; color:var(--fl-body); }

/* ---- Estado vazio e esqueleto de carregamento ---- */
.shop-empty{ grid-column:1/-1; text-align:center; padding:2.5rem 1rem; color:var(--fl-body); }
.shop-skeleton{ border:1px solid var(--fl-line); border-radius:12px; overflow:hidden; background:#fff; }
.shop-skeleton .sk-img{ aspect-ratio:4/3; }
.shop-skeleton .sk-img,.shop-skeleton .sk-line{ background:linear-gradient(100deg,#ececef 30%,#f7f7f9 50%,#ececef 70%); background-size:200% 100%; animation:flshimmer 1.2s infinite; }
.shop-skeleton .sk-line{ height:12px; margin:14px 16px; border-radius:6px; }
.shop-skeleton .sk-line.short{ width:50%; }
@keyframes flshimmer{ from{background-position:200% 0;} to{background-position:-200% 0;} }

/* ---- Animação de entrada dos cards ---- */
.shop-card.reveal{ opacity:0; transform:translateY(18px); transition:opacity .5s ease var(--rd,0ms), transform .5s ease var(--rd,0ms); }
.shop-card.reveal.in{ opacity:1; transform:none; transition:opacity .5s ease var(--rd,0ms), transform .35s ease; }
.shop-card.reveal.in:hover{ transform:translateY(-8px); }