/* ==========================================================================
   FishMe Design System & Exact Style Token Clone
   Source: https://fishme.ae/my-shop/
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  /* Color Palette */
  --primary-navy: #021B44;
  --primary-navy-hover: #03306d;
  --dark-header-bg: #071c2c;
  --body-bg: #f7f7f7;
  --card-bg: #ffffff;
  --text-dark: #111111;
  --text-muted: #9a9a9a;
  
  /* Typography */
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  /* UI Components */
  --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  --card-border-radius: 12px;
  --button-border-radius: 14px;
  --badge-border-radius: 50px;
}

/* Base resets & styles */
body {
  background-color: var(--body-bg);
  font-family: var(--font-body);
  color: var(--text-dark);
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

/* Header styling */
.page-header {
  background: var(--dark-header-bg) !important;
  color: #ffffff;
  padding: 45px 0 !important;
  text-align: center;
}

/* Product Card grid item */
.product-card {
  background: var(--card-bg);
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  padding: 12px;
  border: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* Sale Badge */
.onsale-badge {
  background: var(--primary-navy) !important;
  color: #ffffff !important;
  border-radius: var(--badge-border-radius) !important;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 2;
}

/* Price typography */
.price del {
  color: var(--text-muted) !important;
  font-size: 18px !important;
  text-decoration-thickness: 2px;
  margin-right: 6px;
}

.price ins, .price .current-price {
  color: var(--text-dark) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.price::after {
  content: " / kg";
  font-size: 14px;
  color: var(--text-dark);
  font-weight: 500;
}

/* Buttons */
.btn-primary, .woocommerce-button {
  background: var(--primary-navy) !important;
  color: #ffffff !important;
  border-radius: var(--button-border-radius) !important;
  font-weight: 600 !important;
  border: none !important;
  padding: 10px 18px !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn-primary:hover, .woocommerce-button:hover {
  background: var(--primary-navy-hover) !important;
}