/*
Theme Name: CRMX Studio (Kadence Child)
Theme URI: https://crmx-studio.com
Description: Child tema za CRMX Studio - ročno izdelana keramika
Author: CRMX Studio
Template: kadence
Version: 1.0.0
*/

:root {
  --crmx-cream: #EFE7DD;
  --crmx-cream-light: #FBF6EF;
  --crmx-terracotta: #C97B54;
  --crmx-terracotta-dark: #B36A45;
  --crmx-clay-brown: #8C6E54;
  --crmx-sage: #7C8567;
  --crmx-charcoal: #2B2621;
  --crmx-text-muted: #6B5F52;
  --crmx-border: #E4D9C9;
}

/* ---------- Osnovna tipografija ---------- */
body {
  background: var(--crmx-cream-light);
  color: var(--crmx-charcoal);
}

h1, h2, h3,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-optical-sizing: auto;
  color: var(--crmx-charcoal);
  letter-spacing: -0.3px;
}

/* ---------- Glava / navigacija ---------- */
.site-header,
.kadence-sticky-menu,
header.site-header,
#masthead {
  background: var(--crmx-cream-light);
  border-bottom: 1px solid var(--crmx-border);
}

.site-header a,
.main-navigation a,
#site-navigation a,
.navigation ul li a,
nav.main-navigation ul li a,
.kadence-navigation ul li a,
header a {
  color: var(--crmx-text-muted) !important;
  font-size: 14px;
}

.site-header a:hover,
.main-navigation a:hover,
#site-navigation a:hover,
.navigation ul li a:hover,
nav.main-navigation ul li a:hover,
.kadence-navigation ul li a:hover,
header a:hover {
  color: var(--crmx-terracotta) !important;
}

/* Skrij privzet "page title" pas (npr. sivo "Home" polje) na domači strani */
.home .entry-header,
.home .page-header,
.home .page-hero-section,
.home .kadence-page-title {
  display: none !important;
}

/* ---------- Hero sekcija ---------- */
.crmx-hero {
  background: var(--crmx-cream);
  padding: 64px 32px;
  text-align: center;
  border-radius: 12px;
  margin-bottom: 32px;
}

.crmx-hero h1 {
  font-size: 32px;
  margin-bottom: 12px;
}

.crmx-hero p {
  font-size: 15px;
  color: var(--crmx-text-muted);
  max-width: 420px;
  margin: 0 auto 28px;
  line-height: 1.6;
}

.crmx-btn {
  display: inline-block;
  background: var(--crmx-terracotta);
  color: #FFF6EF !important;
  font-size: 13px;
  padding: 12px 28px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.crmx-btn:hover {
  background: var(--crmx-terracotta-dark);
  color: #FFF6EF !important;
}

/* ---------- Kategorije ---------- */
.crmx-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 40px;
}

.crmx-category-card {
  position: relative;
  border-radius: 14px;
  aspect-ratio: 1;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 -40px 40px -10px rgba(0,0,0,0.45);
}

.crmx-category-card.clay { background-color: var(--crmx-clay-brown); }
.crmx-category-card.sage { background-color: var(--crmx-sage); }
.crmx-category-card.dark { background-color: var(--crmx-charcoal); }

.crmx-categories-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 640px) {
  .crmx-categories-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.crmx-new-arrivals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 40px;
}

@media (max-width: 640px) {
  .crmx-new-arrivals {
    grid-template-columns: repeat(2, 1fr);
  }
}

.crmx-product-card {
  text-decoration: none;
  display: block;
}

.crmx-product-image img {
  width: 100%;
  aspect-ratio: 0.85;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  margin-bottom: 8px;
}

.crmx-product-name {
  font-size: 12px;
  color: var(--crmx-charcoal);
  margin: 0;
}

.crmx-product-price {
  font-size: 12px;
  color: var(--crmx-terracotta);
  margin: 2px 0 0;
}
/* ---------- WooCommerce produkti ---------- */
ul.products li.product .woocommerce-loop-product__title {
  font-size: 14px;
  margin-top: 8px;
}

ul.products li.product .price {
  color: var(--crmx-terracotta) !important;
  font-size: 13px;
}

.woocommerce ul.products li.product img {
  border-radius: 12px;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit {
  background: var(--crmx-terracotta) !important;
  color: #FFF6EF !important;
  border-radius: 999px !important;
  border: none !important;
  font-size: 13px !important;
  padding: 10px 22px !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--crmx-terracotta-dark) !important;
}

/* ---------- Footer ---------- */
.site-footer,
footer.site-footer {
  background: var(--crmx-charcoal);
  color: var(--crmx-border);
  padding: 28px;
}

.site-footer a {
  color: var(--crmx-border);
}

.crmx-payment-icons {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.crmx-payment-icons span {
  background: #F5EDE3;
  color: var(--crmx-charcoal);
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 4px;
}