/*
 Theme Name:   Senor Don Gato Editorial - Champagne
 Theme URI:    https://senordongato.com.co
 Description:  Variante de color champagne/dorado claro del tema editorial de Senor Don Gato (basado en la paleta oficial de marca)
 Author:       Senor Don Gato
 Template:     twentytwentyfour
 Version:      1.0.7
 Text Domain:  sdg-editorial-champagne
*/

/* ===== Checkout: estilo de marca ===== */
.wp-block-woocommerce-checkout {
	font-family: "Work Sans", -apple-system, sans-serif;
}

.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title {
	font-family: "Fraunces", Georgia, serif;
	font-weight: 500;
	color: #232323;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-combobox input,
.wp-block-woocommerce-checkout select,
.wp-block-woocommerce-checkout .wc-block-components-address-form input {
	border-radius: 10px !important;
	border-color: rgba(35, 35, 35, 0.18) !important;
	background: #FBF6EE;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout select:focus {
	border-color: #232323 !important;
	box-shadow: none !important;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step {
	border-radius: 16px;
}

.wp-block-woocommerce-checkout .wc-block-components-panel,
.wp-block-woocommerce-checkout .wc-block-components-order-summary,
.wc-block-checkout__sidebar .wc-block-components-panel {
	border-radius: 16px;
	background: #FFFFFF;
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox svg {
	border-radius: 4px;
}

/* Campos con animacion de entrada (fade-up), se activan via JS al cargar */
.sdg-checkout-field {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.sdg-checkout-field.sdg-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Footer siempre anclado al fondo de la pantalla, incluso en paginas con poco contenido */
html {
	min-height: 100%;
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

body > .wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	width: 100%;
}

footer.wp-block-template-part {
	margin-top: auto;
}

/* Fichas grandes en la pagina de Ofertas */
.sdg-ofertas-grid .wc-block-product {
	box-sizing: border-box;
	padding: 1.5rem;
}

.sdg-ofertas-grid .wc-block-components-product-image {
	margin-bottom: 0.5rem;
}

.sdg-ofertas-grid .wp-block-post-title,
.sdg-ofertas-grid h3 {
	font-size: 1.2rem !important;
}

.sdg-ofertas-grid .wc-block-components-product-price {
	font-size: 1.1rem !important;
}

.sdg-page-title {
	/* margin: 0 !important; */
}

.sdg-page-title + .wp-block-group {
	margin-top: 0.5rem !important;
}

/* Espaciado compacto uniforme entre todos los elementos de la barra lateral de filtros */
.sdg-filter-sidebar > * {
	margin-block-start: 0.5rem !important;
}

.sdg-filter-sidebar > *:first-child {
	margin-block-start: 0 !important;
}

/* Encabezado de la pagina de categoria/tienda mas compacto, menos espacio desperdiciado arriba */
main.wp-block-group > * {
	margin-block-start: 0.6rem !important;
}

main.wp-block-group > *:first-child {
	margin-block-start: 0 !important;
}

.wp-block-query-title {
	font-size: 2rem !important;
	margin-block-end: 0 !important;
}

/* Lista compacta de categorias en la barra lateral de la Tienda (tipo tabla, no fichas) */
.wp-block-woocommerce-product-categories.sdg-sidebar-categories {
	margin-top: 0.5rem;
}

.sdg-sidebar-categories.wc-block-product-categories-list,
.sdg-sidebar-categories ul.wc-block-product-categories-list {
	display: block;
	grid-template-columns: none;
	gap: 0;
	margin: 0;
}

.sdg-sidebar-categories .wc-block-product-categories-list-item {
	text-align: left;
	background: none;
	padding: 0;
	border-radius: 0;
	border-bottom: 1px solid rgba(35, 35, 35, 0.08);
}

.sdg-sidebar-categories .wc-block-product-categories-list-item:hover {
	box-shadow: none;
}

.sdg-sidebar-categories .wc-block-product-categories-list-item__name {
	display: block;
	font-size: 0.85rem;
	font-weight: 400;
	text-transform: none;
	padding: 0.45rem 0.15rem;
	transition: color 0.2s;
}

.sdg-sidebar-categories .wc-block-product-categories-list-item__name:hover {
	color: var(--wp--preset--color--secondary);
}

.sdg-sidebar-categories .wc-block-product-categories-list-item.sdg-active .wc-block-product-categories-list-item__name {
	background: #232323;
	color: #FBF6EE;
	padding-left: 0.6rem;
}

/* Filtro de precio simple */
.sdg-price-filter {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.75rem 0 1.5rem;
}

.sdg-price-filter__input {
	width: 4.5rem;
	padding: 0.4rem 0.5rem;
	border: 1px solid rgba(35, 35, 35, 0.2);
	border-radius: 8px;
	font-size: 0.8rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.sdg-price-filter__sep {
	font-size: 0.8rem;
	opacity: 0.5;
}

.sdg-price-filter__btn {
	border: none;
	background: #232323;
	color: #FBF6EE;
	font-size: 0.75rem;
	padding: 0.45rem 0.8rem;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
}

/* Tiles de categorias, estilo Modo: tarjeta con imagen redondeada */
.wc-block-product-categories,
ul.wc-block-product-categories-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1.5rem;
	list-style: none;
	padding: 0;
	margin: 2rem 0 0;
}

ul.wc-block-product-categories-list li {
	text-align: center;
}

ul.wc-block-product-categories-list img {
	border-radius: 20px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}

ul.wc-block-product-categories-list a {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	text-decoration: none;
	display: block;
	margin-top: 0.5rem;
}

/* Tarjetas de producto */
.wp-block-woocommerce-product-collection .wc-block-components-product-image img,
.wp-block-woocommerce-product-collection img {
	border-radius: 20px;
}

/* Fichas de tamano estandar: recorte cuadrado consistente sin importar la proporcion original de la foto */
.wc-block-components-product-image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 20px;
}

.wc-block-components-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px;
}

/* La ficha completa como columna, con el boton siempre alineado al fondo */
.wc-block-product {
	display: flex;
	flex-direction: column;
}

.wc-block-product .wp-block-woocommerce-product-button {
	margin-top: auto;
	padding-top: 0.75rem;
}

/* Badge de oferta, estilo pastilla en vez de caja con borde */
.wc-block-components-product-sale-badge {
	background: var(--wp--preset--color--secondary);
	border: none;
	border-radius: 999px;
	padding: 0.3rem 0.85rem;
	box-shadow: 0 4px 10px rgba(35, 35, 35, 0.15);
}

.wc-block-components-product-sale-badge__text,
span.wc-block-components-product-sale-badge__text {
	color: var(--wp--preset--color--contrast) !important;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Responsive: columnas de producto se apilan en movil */
@media (max-width: 600px) {
	.wp-block-woocommerce-product-collection ul.wc-block-product-template {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	ul.wc-block-product-categories-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Fichas: tarjetas de producto/categoria estilo card, consistentes en todo el sitio */
.wc-block-product,
ul.wc-block-product-categories-list li,
.sdg-card {
	background: var(--wp--preset--color--base);
	border-radius: 20px;
	padding: 1rem;
	transition: box-shadow 0.3s ease, opacity 1.2s cubic-bezier(0.16,1,0.3,1), transform 1.2s cubic-bezier(0.16,1,0.3,1);
}

.wc-block-product:hover,
ul.wc-block-product-categories-list li:hover,
.sdg-card:hover {
	box-shadow: 0 8px 24px rgba(35, 35, 35, 0.1);
}

.wc-block-product .wc-block-components-product-price,
.sdg-card .sdg-card__price {
	color: var(--sdg-salvia-oscuro, #57684E);
	font-weight: 500;
}

/* Animacion de aparicion al hacer scroll (fichas y tarjetas) */
.sdg-fade-target {
	opacity: 0;
	transform: translateY(55px);
	transition: opacity 1.2s cubic-bezier(0.16,1,0.3,1), transform 1.2s cubic-bezier(0.16,1,0.3,1);
}

.sdg-fade-target.sdg-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Ficha generica reutilizable (categorias, ofertas, contacto) */
/* Se ajusta al ancho de pantalla, maximo 4 columnas */
.sdg-cards-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	margin-top: 2rem;
}

@media (min-width: 700px) {
	.sdg-cards-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1000px) {
	.sdg-cards-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.sdg-card {
	display: block;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	overflow: hidden;
}

.sdg-card__media {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 16px;
	overflow: hidden;
	background: var(--wp--preset--color--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.9rem;
}

.sdg-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sdg-card__media svg {
	width: 40%;
	height: 40%;
	color: var(--wp--preset--color--contrast);
}

.sdg-card__title {
	font-family: "Fraunces", Georgia, serif;
	font-size: 1.15rem;
	font-weight: 500;
	margin: 0 0 0.35rem;
}

.sdg-card__desc {
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast);
	opacity: 0.65;
	line-height: 1.5;
	margin: 0;
}

.sdg-card__price {
	display: block;
	margin-top: 0.6rem;
	font-size: 1.05rem;
}

@media (max-width: 600px) {
	.sdg-cards-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
}