/**
 * Fruver local · public.css
 * Tienda pública: catálogo, ficha de producto, carrito y checkout.
 *
 * El bloque de variables define la identidad visual (colores,
 * radios, sombras). Cambiarla aquí actualiza toda la tienda.
 */

:root {
	--fl-ink: #1c211d;
	--fl-muted: #6d7669;
	--fl-paper: #faf8f3;
	--fl-surface: #ffffff;
	--fl-border: #e7e2d8;
	--fl-primary: #1f4d3a;
	--fl-primary-dark: #163a2b;
	--fl-accent: #c98a3a;
	--fl-danger: #b3261e;
	--fl-radius-xl: 22px;
	--fl-radius-lg: 16px;
	--fl-radius-md: 12px;
	--fl-radius-sm: 9px;
	--fl-shadow-sm: 0 2px 10px rgba(20, 30, 20, .06);
	--fl-shadow-md: 0 16px 36px -20px rgba(20, 30, 20, .45);
}

/* Base ------------------------------------------------------------ */

.fl-catalog, .fl-cart-page, .fl-checkout {
	max-width: 1120px;
	margin: 32px auto;
	font-family: inherit;
	color: var(--fl-ink);
}

/* Encabezado de sección --------------------------------------------- */

.fl-section-head { margin-bottom: 26px; }
.fl-eyebrow { margin: 0; color: var(--fl-accent); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .12em; }
.fl-section-head h2 { margin: 6px 0 18px; font-size: 34px; font-weight: 800; letter-spacing: -.01em; }

.fl-search { position: relative; }
.fl-search span { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--fl-muted); }
.fl-search input {
	width: 100%; box-sizing: border-box;
	padding: 14px 16px 14px 46px;
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius-lg);
	background: var(--fl-surface);
	font: inherit;
	box-shadow: var(--fl-shadow-sm);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fl-search input:focus { outline: none; border-color: var(--fl-primary); box-shadow: 0 0 0 3px rgba(31, 77, 58, .12); }

/* Filtros por categoría ------------------------------------------------ */

.fl-filters { display: flex; gap: 8px; overflow-x: auto; margin-top: 16px; padding-bottom: 2px; }
.fl-filters button {
	min-width: max-content;
	border: 1px solid var(--fl-border);
	border-radius: 999px;
	background: var(--fl-surface);
	padding: 9px 16px;
	cursor: pointer;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--fl-ink);
	-webkit-text-fill-color: var(--fl-ink);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.fl-filters button span { color: inherit; -webkit-text-fill-color: inherit; }
.fl-filters button:hover { border-color: var(--fl-primary); }
.fl-filters button.is-active {
	background: var(--fl-primary);
	border-color: var(--fl-primary);
	color: #fff;
	-webkit-text-fill-color: #fff;
}

/* Cuadrícula de productos ------------------------------------------------ */

.fl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.fl-card[hidden] {
	display: none !important;
}

.fl-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius-xl);
	background: var(--fl-surface);
	box-shadow: var(--fl-shadow-sm);
	transition: box-shadow .2s ease, transform .2s ease;
}
.fl-card:hover { box-shadow: var(--fl-shadow-md); transform: translateY(-2px); }

.fl-image { display: flex; height: 220px; align-items: center; justify-content: center; background: var(--fl-paper); font-size: 60px; overflow: hidden; }
.fl-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.fl-card:hover .fl-image img { transform: scale(1.04); }

.fl-card-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.fl-card small { color: var(--fl-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.fl-card h3 { margin: 8px 0 2px; font-size: 19px; font-weight: 700; overflow-wrap: anywhere; line-height: 1.25; }
.fl-card h3 a { color: inherit; text-decoration: none; }
.fl-unit { margin: 0 0 8px; font-size: 13.5px; color: var(--fl-muted); }
.fl-card del { font-size: 13px; color: var(--fl-muted); }
.fl-price { display: block; margin: 2px 0 6px; color: var(--fl-primary); font-size: 24px; font-weight: 800; }
.fl-stock { margin: 0 0 4px; font-size: 12.5px; color: var(--fl-primary); font-weight: 700; }
.fl-stock.out { color: var(--fl-danger); }

/* Selector de cantidad y botón agregar --------------------------------- */

.fl-quantity-field { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--fl-ink); }
.fl-quantity-field span { flex: 1; }
.fl-quantity-field em { font-style: normal; color: var(--fl-muted); font-size: 12px; }
.fl-quantity-field input[data-fl-quantity] { width: 74px; }

.fl-add { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; }
.fl-card:not(.fl-card-single) .fl-quantity-field { display: none; }

.fl-add input[data-fl-quantity] {
	height: 40px;
	width: 46px;
	text-align: center;
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius-sm);
	padding: 6px;
	font: inherit;
	font-weight: 700;
	color: var(--fl-ink);
	-webkit-text-fill-color: var(--fl-ink);
	background: var(--fl-surface);
}

.fl-add .fl-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius-sm);
	background: var(--fl-paper);
	color: var(--fl-ink);
	-webkit-text-fill-color: var(--fl-ink);
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
}
.fl-add .fl-step:hover { background: #efece3; }

.fl-add .fl-primary { margin-left: auto; }

.fl-primary, .fl-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 12px 20px;
	border-radius: var(--fl-radius-sm);
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.fl-primary {
	background: var(--fl-primary);
	border: 1px solid var(--fl-primary);
	color: #fff !important;
}
.fl-primary:hover { background: var(--fl-primary-dark); border-color: var(--fl-primary-dark); }
.fl-outline { border: 1px solid var(--fl-border); color: var(--fl-ink); background: transparent; }
.fl-outline:hover { border-color: var(--fl-primary); color: var(--fl-primary); }

.fl-empty { padding: 40px 20px; text-align: center; color: var(--fl-muted); }

/* Botón flotante del carrito -------------------------------------------- */

.fl-cart-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--fl-primary);
	color: #fff !important;
	padding: 14px 18px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
	box-shadow: 0 10px 26px -8px rgba(22, 58, 43, .55);
	transition: transform .15s ease, background .15s ease;
}
.fl-cart-float:hover { background: var(--fl-primary-dark); transform: translateY(-2px); }
.fl-cart-float b {
	display: inline-grid; place-items: center;
	min-width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--fl-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
}

/* Página de carrito ------------------------------------------------------ */

.fl-cart-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fl-cart-thumb {
	display: flex; flex: 0 0 54px; align-items: center; justify-content: center;
	width: 54px; height: 54px; border-radius: var(--fl-radius-md);
	overflow: hidden; background: var(--fl-paper); font-size: 22px;
}
.fl-cart-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-cart-info { min-width: 0; }
.fl-cart-info strong { display: block; overflow-wrap: anywhere; }
.fl-cart-info small { display: block; color: var(--fl-muted); }
.fl-cart-qty { min-width: 20px; text-align: center; font-weight: 700; }

.fl-cart-row {
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	gap: 16px;
	align-items: center;
	padding: 16px 4px;
	border-bottom: 1px solid var(--fl-border);
}
.fl-remove {
	border: none; background: transparent;
	color: var(--fl-danger); font-weight: 700; font-size: 13px; cursor: pointer;
}
.fl-total { margin: 22px 0; font-size: 24px; font-weight: 800; text-align: right; }
.fl-checkout-link { display: block; text-align: center; }

/* Checkout ------------------------------------------------------------- */

.fl-checkout { max-width: 680px; }
.fl-payment-note { padding: 14px 16px; background: #eef3ea; border: 1px solid #dbe6d4; border-radius: var(--fl-radius-md); color: var(--fl-primary); font-weight: 600; }
.fl-checkout form { margin-top: 22px; }
.fl-checkout label { display: block; margin: 16px 0; font-weight: 700; font-size: 14px; }
.fl-checkout input, .fl-checkout textarea, .fl-checkout select {
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin-top: 7px;
	padding: 13px 14px;
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius-md);
	background: var(--fl-surface);
	font: inherit;
}
.fl-checkout input:focus, .fl-checkout textarea:focus, .fl-checkout select:focus {
	outline: none; border-color: var(--fl-primary); box-shadow: 0 0 0 3px rgba(31, 77, 58, .12);
}
.fl-checkout textarea { min-height: 84px; resize: vertical; }
.fl-checkout button.fl-primary { width: 100%; margin-top: 6px; padding: 14px; font-size: 15px; }
.fl-notice { font-weight: 600; color: var(--fl-primary); min-height: 1.2em; }

/* Ficha de producto individual ------------------------------------------- */

.fl-card-single .fl-image { height: auto; display: block; padding: 12px; }
.fl-card-single .fl-image img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; display: block; margin: 0 auto; }
.fl-card-single .fl-image:not(:has(img)) { min-height: 220px; display: flex; }
.fl-single-add { justify-content: flex-start; }

/* Ajustes finos del tema activo ------------------------------------------ */
/* El tema del sitio a veces inyecta metadatos (autor/fecha) o navegación
   dentro de la página de producto; se ocultan para que solo se vea la
   ficha de compra. */
.single-producto .entry-meta,
.single-producto .post-meta,
.single-producto .post-byline,
.single-producto .entry-footer,
.single-producto .byline,
.single-producto .posted-on,
.single-producto .entry-date,
.single-producto .author,
.single-producto .post-navigation,
.single-producto .navigation.post-navigation,
.single-producto .nav-links,
.single-producto nav[class*="navigation"],
.single-producto .prev-next-post-nav,
.single-producto .pagination.single-navigation,
.single-producto [class*="author"],
.single-producto [class*="date"] {
	display: none !important;
}
.single-producto .entry-header h1,
.single-producto h1.entry-title,
.single-producto .entry-title a {
	text-decoration: none !important;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 800px) {
	.fl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 500px) {
	.fl-grid { gap: 12px; }
	.fl-section-head h2 { font-size: 26px; }
	.fl-image { height: 132px; font-size: 42px; }
	.fl-card { border-radius: var(--fl-radius-lg); }
	.fl-card-body { padding: 12px; }
	.fl-card h3 { font-size: 16px; }
	.fl-card small, .fl-unit, .fl-stock { font-size: 11px; }
	.fl-price { font-size: 20px; }
	.fl-add { gap: 4px; }
	.fl-add .fl-primary { font-size: 12px; padding: 9px 10px; }
	.fl-cart-row { grid-template-columns: 1fr auto; gap: 8px; }
	.fl-cart-row .fl-add { grid-column: 1; }
	.fl-cart-row b, .fl-remove { grid-column: 2; justify-self: end; }
	.fl-cart-float span:not(:first-child) { display: none; }
}