/*
 * Merged theme styles — derived from juanita_shopify_theme/assets/styles.css
 * plus section-scoped CSS variables (product/collection/cart/about/page)
 * flattened into a single stylesheet. Tailwind utilities still come from
 * the CDN; this file holds only the custom variables, fonts, and classes
 * the theme references via var(--...) and custom class names.
 */

:root {
  /* Home / navbar / footer */
  --primary-color: #FF3E41;
  --secondary-color: #FFF8E1;
  --text-primary: #000000;
  --text-secondary: #000000;
  --accent-color: #E11D48;
  --highlight-blue: #3B82F6;
  --highlight-yellow: #F59E0B;
  --highlight-green: #10B981;
  --neutral-bg: #FDFBF6;
  --colorful-bg: #FEFCE8;

  /* Collection page palette */
  --traditional-red: #E74C3C;
  --traditional-blue: #3498DB;
  --traditional-green: #2ECC71;
  --traditional-yellow: #F1C40F;
  --vibrant-pink: #E91E63;
  --deep-purple: #9C27B0;
  --bright-teal: #009688;
  --bg-products-page: var(--secondary-color);

  /* Cart page palette */
  --highlight-color: #F0AD4E;
  --guatemalan-blue: #3A7CA5;
  --guatemalan-red: #C73E1D;
  --guatemalan-yellow: #E6AF2E;
  --guatemalan-green: #4A7856;
  --guatemalan-purple: #6A4C9C;
  --cart-bg: #FFFFFF;
  --cart-bg-alt: #FDEBD0;

  /* About / page palette */
  --soft-peach: #FFF0E5;
  --mayan-gold: #FFBF00;
  --forest-green: #228B22;
  --sunset-orange: #FF8C00;
  --volcanic-ash: #5A5A5A;
  --sky-blue-light: #E0F2FE;
}

body {
  font-family: "Plus Jakarta Sans", "Noto Sans", sans-serif;
}

.guatemalan-font { font-family: 'Jost', sans-serif; }
.primary-font { font-family: "Jost", "Noto Sans", sans-serif; }
.font-display { font-family: 'Jost', sans-serif; }
.font-body { font-family: 'Jost', sans-serif; }

/* ---------- Buttons / cards / inputs (from product page) ---------- */
.button_primary {
  background-color: var(--primary-color);
  color: #fff;
  border-radius: 9999px;
  padding: 0.5rem 1.5rem;
}
.button_primary:hover { opacity: 0.9; }
.card { background:#fff; border-radius:0.5rem; box-shadow:0 4px 6px rgba(0,0,0,.08); padding:1.5rem; }
.input { border:1px solid #d1d5db; border-radius:9999px; padding:0.5rem 1rem; }
.input:focus { outline: none; border-color: var(--primary-color); }
.typography_h1 { font-size: 2.25rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; }
.typography_h2 { font-size: 1.875rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; }
.typography_body { font-size: 1rem; color: var(--text-secondary); }

/* ---------- Collection page ---------- */
.btn-primary {
  background-color: var(--primary-color);
  color: #fff;
  transition: background-color .3s ease;
}
.btn-primary:hover { background-color: var(--accent-color); }
.btn-secondary {
  background-color: var(--secondary-color);
  color: var(--text-primary);
  transition: background-color .3s ease;
}
.btn-secondary:hover { background-color: #e5e7eb; }

.filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: var(--secondary-color);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid #d1d5db;
  transition: background-color .2s ease;
}
.filter-button:hover { background-color: #d1d5db; }
.filter-button.active {
  background-color: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

.product-card {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.08);
  background: #fff;
  transition: box-shadow .3s ease;
}
.product-card:hover { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }

.product-image {
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  aspect-ratio: 3 / 4;
}
.product-info { padding: 1rem; }
.product-name {
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  transition: color .2s ease;
}
.group:hover .product-name { color: var(--primary-color); }
.product-price { color: var(--text-secondary); font-size: 0.875rem; }

/* Pagination */
.pagination-link {
  min-width: 42px;
  padding: 0.5rem 1rem;
  border: 1px solid #d1d5db;
  background-color: var(--secondary-color);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color .2s ease;
}
.pagination-link:hover { background-color: #d1d5db; }
.pagination-link.active {
  background-color: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
  font-weight: 600;
}
.pagination-arrow {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  background-color: var(--secondary-color);
  color: var(--text-primary);
  transition: background-color .2s ease;
}
.pagination-arrow:hover { background-color: #d1d5db; }

/* ---------- Cart page ---------- */
.nav-link-hover:hover { color: var(--primary-color); transition: color .3s ease; }
.cart-item-container:not(:last-child) { border-bottom: 1px solid #E0E0E0; }
.icon-button:hover { background-color: #e0e0e0; transition: background-color .3s ease; }
.breadcrumb-active { color: var(--text-primary); font-weight: 600; }
.breadcrumb-inactive { color: var(--text-secondary); }
.breadcrumb-separator { color: var(--text-secondary); }
.order-summary-row:not(:last-child) { border-bottom: 1px dashed #E0E0E0; }
.checkout-button {
  background-color: var(--primary-color);
  transition: background-color .3s ease, transform .2s ease;
}
.checkout-button:hover { background-color: #C9302C; transform: translateY(-2px); }
.checkout-button:active { transform: translateY(0); }
.colorful-border { border: 2px solid; }
.remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color .2s ease, border-color .2s ease;
}
.remove-btn:hover { color: var(--primary-color); border-color: var(--primary-color); }

/* ---------- About / page ---------- */
.section-title {
  color: var(--text-primary);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}
.subsection-title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.paragraph-text { color: var(--text-secondary); font-size: 1rem; line-height: 1.625; margin-bottom: 1.5rem; }
.paragraph-text p { color: var(--text-secondary); font-size: 1rem; line-height: 1.625; margin-bottom: 1.5rem; }