/* =======================================================================
   WooPanel — Grade de Produtos
   Compatível com WooCommerce · Elementor Free · Elementor Pro · WooPanel
   ======================================================================= */

/* -----------------------------------------------------------------------
   Variáveis e raiz da grade
   ----------------------------------------------------------------------- */
.woopanel-grid-root {
	--woopanel-primary:        #2563eb;
	--woopanel-primary-hover:  #1d4ed8;
	--woopanel-price:          #2563eb;
	--woopanel-text:           #111827;
	--woopanel-text-muted:     #6b7280;
	--woopanel-card-bg:        #ffffff;
	--woopanel-radius:         14px;
	--woopanel-shadow:         0 2px 16px rgba(0, 0, 0, 0.07);
	--woopanel-shadow-hover:   0 8px 32px rgba(0, 0, 0, 0.13);

	position: relative;
	width: 100%;
	box-sizing: border-box;
	max-width: 100%;
	overflow-x: hidden;
	font-family: inherit;
	color: var(--woopanel-text);
	padding: 1rem 0;
}

.woopanel-grid-empty {
	text-align: center;
	padding: 2rem;
	color: var(--woopanel-text-muted);
}

/* -----------------------------------------------------------------------
   Grid layout
   ----------------------------------------------------------------------- */
.woopanel-grid {
	display: grid;
	grid-template-columns: repeat(var(--woopanel-grid-columns, 4), minmax(0, 1fr));
	gap: 1.25rem;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.woopanel-grid-item {
	width: 100%;
	min-width: 0;
}

/* -----------------------------------------------------------------------
   Card
   ----------------------------------------------------------------------- */
.woopanel-grid-card {
	background:    var(--woopanel-card-bg);
	border-radius: var(--woopanel-radius);
	box-shadow:    var(--woopanel-shadow);
	overflow:      hidden;
	height:        100%;
	display:       flex;
	flex-direction: column;
	transition:    transform 0.3s ease, box-shadow 0.3s ease;
}

.woopanel-grid-card:hover {
	transform:  translateY(-3px);
	box-shadow: var(--woopanel-shadow-hover);
}

/* -----------------------------------------------------------------------
   Área da imagem — quadrada com overlays
   ----------------------------------------------------------------------- */
.woopanel-grid-card__media-wrap {
	position:   relative;
	width:      100%;
	aspect-ratio: 1 / 1;
	overflow:   hidden;
	background: #f3f4f6;
	flex-shrink: 0;
}

.woopanel-grid-card__media {
	display: block;
	width:   100%;
	height:  100%;
}

.woopanel-grid-card__media img {
	display:          block;
	width:            100%;
	height:           100%;
	object-fit:       cover;
	object-position:  center;
	transition:       transform 0.45s ease;
}

.woopanel-grid-card:hover .woopanel-grid-card__media img {
	transform: scale(1.06);
}

/* -----------------------------------------------------------------------
   Botão circular "Ver produto" — canto superior direito
   Aparece no hover com animação de entrada suave
   ----------------------------------------------------------------------- */
.woopanel-grid-card__view-btn {
	position:        absolute;
	top:             12px;
	right:           12px;
	z-index:         3;
	width:           44px;
	height:          44px;
	border-radius:   50%;
	background:      #ffffff;
	display:         flex;
	align-items:     center;
	justify-content: center;
	box-shadow:      0 2px 12px rgba(0, 0, 0, 0.16);
	cursor:          pointer;
	text-decoration: none;
	color:           var(--woopanel-text);
	opacity:         0;
	transform:       translateY(-6px);
	transition:      opacity 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease;
}

.woopanel-grid-card:hover .woopanel-grid-card__view-btn {
	opacity:   1;
	transform: translateY(0);
}

/* Em qualquer aparelho de toque (celular, tablet) não existe estado de
   :hover — o botão "Ver produto" ficaria opacity:0 para sempre, invisível
   e impossível de tocar. Nesses aparelhos ele fica sempre visível. */
@media (hover: none), (pointer: coarse) {
	.woopanel-grid-card__view-btn {
		opacity:   1;
		transform: translateY(0);
	}
}

.woopanel-grid-card__view-btn:hover {
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
	transform:  translateY(-2px);
}

.woopanel-grid-card__view-btn svg {
	display:      block;
	flex-shrink:  0;
	stroke-width: 1.75;
}

/* -----------------------------------------------------------------------
   Badge "NOVO" — canto inferior esquerdo da imagem
   ----------------------------------------------------------------------- */
.woopanel-grid-card__badge-new {
	position:        absolute;
	bottom:          12px;
	left:            12px;
	z-index:         3;
	display:         inline-block;
	background:      #ffffff;
	color:           #111827;
	font-size:       0.625rem;
	font-weight:     700;
	letter-spacing:  0.1em;
	text-transform:  uppercase;
	line-height:     1;
	padding:         5px 10px;
	border-radius:   6px;
	box-shadow:      0 2px 8px rgba(0, 0, 0, 0.12);
	pointer-events:  none;
}

/* -----------------------------------------------------------------------
   Corpo do card — título, preço, ações
   ----------------------------------------------------------------------- */
.woopanel-grid-card__body {
	padding:        1rem;
	display:        flex;
	flex-direction: column;
	gap:            0.6rem;
	flex:           1;
}

.woopanel-grid-card__title {
	margin:      0;
	font-size:   0.9rem;
	font-weight: 600;
	line-height: 1.4;
}

.woopanel-grid-card__title a {
	color:              var(--woopanel-text);
	text-decoration:    none;
	display:            -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}

.woopanel-grid-card__title a:hover {
	color: var(--woopanel-primary);
}

.woopanel-grid-card__price {
	font-size:   1rem;
	font-weight: 700;
	color:       var(--woopanel-price);
}

.woopanel-grid-card__price del {
	color:       var(--woopanel-text-muted);
	font-weight: 400;
	font-size:   0.85rem;
}

.woopanel-grid-card__price ins,
.woopanel-grid-card__price .amount {
	color:           var(--woopanel-price);
	text-decoration: none;
}

.woopanel-grid-card__actions {
	display:        flex;
	flex-direction: column;
	gap:            0.5rem;
	margin-top:     auto;
}

/* ── Container interno dos dois botões ── */
.woopanel-grid-card__actions-row {
	display:        flex;
	flex-direction: column;
	gap:            0.5rem;
	width:          100%;
}

/* ── Desktop: botão "Comprar" SEMPRE oculto ── */
.woopanel-grid-card__actions .woopanel-btn-buy {
	display: none;
}

/* -----------------------------------------------------------------------
   Botão — comportamento estrutural (aplica-se sempre, com e sem Elementor)
   ----------------------------------------------------------------------- */
.woopanel-grid-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             clamp(0.4rem, 1vw, 0.65rem);
	width:           100%;
	min-width:       0;
	max-width:       100%;
	min-height:      44px;
	height:          auto;
	box-sizing:      border-box;
	padding-inline:  clamp(0.5rem, 1.4vw, 0.95rem);
	padding-block:   0.6rem;
	text-decoration: none;
	cursor:          pointer;
	white-space:     normal;
	word-break:      break-word;
	text-align:      center;
	font-size:       clamp(0.72rem, 1vw, 1rem);
	line-height:     1.2;
	overflow:        hidden;
}

.woopanel-grid-btn svg,
.woopanel-grid-root .elementor-button .elementor-button-icon svg {
	width:           clamp(15px, 1.2vw, 18px);
	height:          clamp(15px, 1.2vw, 18px);
	flex-shrink:     0;
}

.woopanel-grid-root .elementor-button {
	display:         inline-flex !important;
	align-items:     center !important;
	justify-content: center !important;
	width:           100% !important;
	box-sizing:      border-box !important;
	min-width:       0 !important;
	max-width:       100% !important;
	min-height:      44px !important;
	height:          auto !important;
	padding-inline:  clamp(0.5rem, 1.4vw, 0.95rem) !important;
	padding-block:   0.6rem !important;
	font-size:       clamp(0.72rem, 1vw, 1rem) !important;
	line-height:     1.2 !important;
	overflow:        hidden !important;
}

.woopanel-grid-root .elementor-button .elementor-button-content-wrapper {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             clamp(0.4rem, 1vw, 0.65rem);
	width:           100%;
	max-width:       100%;
	min-width:       0;
	box-sizing:      border-box;
	flex:            1 1 auto;
	overflow:        hidden !important;
}

.woopanel-grid-root .elementor-button .elementor-button-icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	width:           clamp(15px, 1.2vw, 18px);
	height:          clamp(15px, 1.2vw, 18px);
}

.woopanel-grid-root .elementor-button .elementor-button-text {
	flex:            1 1 auto;
	min-width:       0;
	max-width:       100%;
	white-space:     normal;
	word-break:      break-word;
	text-align:      center;
	overflow:        hidden !important;
}

/* -----------------------------------------------------------------------
   Estilos visuais nativos — SOMENTE quando o Elementor NÃO está ativo
   (.woopanel-no-elementor injetada via PHP no elemento raiz)
   ----------------------------------------------------------------------- */
.woopanel-no-elementor .woopanel-btn {
	gap:           0.4rem;
	padding:       0 0.95rem;
	border-radius: 10px;
	font-size:     0.82rem;
	font-weight:   600;
	font-family:   inherit;
	border:        2px solid transparent;
	transition:    background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	line-height:   1.2;
	height:        44px;
	min-height:    44px;
}

.woopanel-no-elementor .woopanel-btn-primary {
	background:   var(--woopanel-primary);
	color:        #fff;
	border-color: var(--woopanel-primary);
}

.woopanel-no-elementor .woopanel-btn-primary:hover,
.woopanel-no-elementor .woopanel-btn-primary:focus {
	background:   var(--woopanel-primary-hover);
	border-color: var(--woopanel-primary-hover);
	color:        #fff;
}

/* Botão "Indisponível" */
.woopanel-no-elementor .woopanel-btn--muted {
	background: #e5e7eb;
	color:      #9ca3af;
	cursor:     not-allowed;
}

.woopanel-no-elementor.woopanel-buttons-rounded .woopanel-btn {
	border-radius: 999px;
}

.woopanel-no-elementor.woopanel-buttons-square .woopanel-btn {
	border-radius: 4px;
}

/* -----------------------------------------------------------------------
   Integração com Elementor
   Os botões herdam o estilo global configurado em:
   Elementor → Configurações Globais → Botões
   O WooPanel adiciona apenas largura total e alinhamento do ícone.
   ----------------------------------------------------------------------- */
.woopanel-grid-root .elementor-button {
	width:       100%;
	box-sizing:  border-box;
}

.woopanel-grid-root .elementor-button .elementor-button-icon {
	display:     inline-flex;
	align-items: center;
	flex-shrink: 0;
}

/* Botão "Indisponível" (com Elementor) */
.woopanel-grid-root .woopanel-btn--muted {
	opacity:         0.5;
	cursor:          not-allowed;
	pointer-events:  none;
	width:           100%;
	box-sizing:      border-box;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         0.6rem 0.9rem;
}

/* Formato de botão configurado no WooPanel, respeitado mesmo com Elementor */
.woopanel-buttons-rounded .elementor-button {
	border-radius: 999px !important;
}

.woopanel-buttons-square .elementor-button {
	border-radius: 4px !important;
}

/* -----------------------------------------------------------------------
   Responsividade
   ----------------------------------------------------------------------- */

/* Tablet — até 3 colunas */
@media (max-width: 1199px) {
	.woopanel-grid {
		grid-template-columns: repeat(min(3, var(--woopanel-grid-columns, 4)), minmax(0, 1fr));
		gap: 1rem;
	}
}

/* Tablet menor — até 2 colunas */
@media (max-width: 899px) {
	.woopanel-grid {
		grid-template-columns: repeat(min(2, var(--woopanel-grid-columns, 4)), minmax(0, 1fr));
	}
}

/* Mobile — SEMPRE 2 colunas, independente da configuração do shortcode */
@media (max-width: 599px) {
	.woopanel-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Ajustes de espaçamento no card para mobile */
	.woopanel-grid-card__body {
		padding: 0.75rem;
		gap:     0.45rem;
	}

	.woopanel-grid-card__title {
		font-size: 0.8rem;
	}

	.woopanel-grid-card__price {
		font-size: 0.9rem;
	}

	/* Botão responsivo no mobile */
	.woopanel-grid-btn,
	.woopanel-grid-root .elementor-button,
	.woopanel-no-elementor .woopanel-btn {
		padding-inline: clamp(0.55rem, 1vw, 0.8rem);
		padding-block:  0.56rem;
		font-size:      clamp(0.75rem, 0.98vw, 0.9rem);
		height:         40px;
		min-height:     40px;
	}

	.woopanel-grid-btn svg,
	.woopanel-grid-root .elementor-button .elementor-button-icon svg,
	.woopanel-no-elementor .woopanel-btn svg {
		width:  clamp(14px, 1.1vw, 16px);
		height: clamp(14px, 1.1vw, 16px);
	}

	/* Botão "Ver produto" menor */
	.woopanel-grid-card__view-btn {
		width:  38px;
		height: 38px;
		top:    8px;
		right:  8px;
	}

	.woopanel-grid-card__view-btn svg {
		width:  17px;
		height: 17px;
	}

	/* Badge menor */
	.woopanel-grid-card__badge-new {
		font-size: 0.55rem;
		padding:   4px 8px;
		bottom:    8px;
		left:      8px;
	}

	/* ============================================================
	   MOBILE: 2 botões lado a lado nos cards
	   ============================================================ */

	/* Container interno vira linha (row) no mobile */
	.woopanel-grid-card__actions-row {
		flex-direction: row !important;
		align-items:    stretch;
		gap:            0.5rem;
	}

	/* Exibe o botão "COMPRAR" somente no mobile */
	.woopanel-grid-card__actions .woopanel-btn-buy {
		display:        inline-flex !important;
		flex:           1 1 auto !important;
		min-width:      0 !important;
		width:          auto !important;
		max-width:      100% !important;
	}

	/* Botão "Adicionar ao Carrinho" no mobile: SÓ ÍCONE (sacola) */
	.woopanel-grid-card__actions .woopanel-btn-atc {
		flex:           0 0 auto !important;
		width:          40px !important;
		min-width:      40px !important;
		max-width:      40px !important;
		padding:        0 !important;
		padding-inline: 0 !important;
		padding-block:  0 !important;
		gap:            0 !important;
		height:         40px !important;
		min-height:     40px !important;
	}

	/* Oculta texto do botão ATC no mobile (nativo) */
	.woopanel-grid-card__actions .woopanel-btn-atc .woopanel-btn-atc__text {
		display: none !important;
	}

	/* Oculta texto do botão ATC no mobile (Elementor) */
	.woopanel-grid-card__actions .woopanel-btn-atc .elementor-button-text {
		display: none !important;
	}

	.woopanel-grid-card__actions .woopanel-btn-atc .elementor-button-content-wrapper {
		gap:     0 !important;
		padding: 0 !important;
	}

	.woopanel-grid-card__actions .woopanel-btn-atc .elementor-button-icon {
		width:           auto;
		height:          auto;
		display:         inline-flex;
		align-items:     center;
		justify-content: center;
	}

	/* Tamanho do ícone dentro do botão ATC no mobile */
	.woopanel-grid-card__actions .woopanel-btn-atc svg,
	.woopanel-grid-card__actions .woopanel-btn-atc .elementor-button-icon svg {
		width:  18px !important;
		height: 18px !important;
	}
}