@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Bebas+Neue&family=Pacifico&display=swap");

:root {
  --page: #f3faf9;
  --surface: #e7f4f2;
  --background: #ffffff;
  --foreground: #12363a;
  --ink: #12363a;
  --muted: #5a7376;
  --border: #d4e8e5;
  --border-strong: #b7ddd9;
  --brand: #f4a261;
  --brand-dark: #e76f51;
  --brand-soft: #fff7f0;
  --teal: #4fb0a4;
  --teal-dark: #1b4d4a;
  --teal-logo: #1b4d4a;
  --teal-soft: #f0faf8;
  --clipper: #e76f51;
  --panel: #1b4d4a;
  --soft: #f7fbfb;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-display: "Bebas Neue", Impact, sans-serif;
  --font-script: "Pacifico", cursive;
  --font-sans: var(--font-body);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ink);
  font-family: var(--font-body), sans-serif;
  background: #f4f7f7;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

/* Parches para que el CSS de Next se vea bien en PHP (sin Next/Image) */
.catalog-showcase-media { position: relative; overflow: hidden; }
.catalog-showcase-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fotos de producto: enteras, centradas (no zoom recortado) */
.catalog-product-media {
  position: relative !important;
  display: flex !important;
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: #fff !important;
  padding: 0.75rem !important;
}
.catalog-product-image {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 0 !important;
}
.catalog-grid--lux .catalog-product-media {
  background: #fff !important;
}
.catalog-header-logo img {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(27, 77, 74, 0.18);
}
.catalog-search-icon-svg {
  pointer-events: none;
  position: absolute;
  left: 0.9rem;
  width: 1rem;
  height: 1rem;
  color: var(--muted);
}
.catalog-footer-logo {
  width: 64px;
  height: 64px;
  border-radius: 1rem;
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.hidden-desktop { display: block; }
@media (min-width: 768px) {
  .hidden-desktop { display: none; }
}