.ct-home, .ct-page { font-family: 'Work Sans', system-ui, sans-serif; background: #F8F2E6; color: #2B241E; }
.ct-home h1, .ct-home h2, .ct-home h3, .ct-page h1, .ct-page h2, .ct-page h3 { font-family: 'Fraunces', Georgia, serif; }
.ct-home *, .ct-page * { box-sizing: border-box; }

/* Text links */
.ct-home a.ct-link, .ct-page a.ct-link { color: #8A4A26; text-decoration: none; transition: color 0.15s ease; }
.ct-home a.ct-link:hover, .ct-page a.ct-link:hover { color: #B4592E; text-decoration: underline; }
.ct-home a.ct-link:focus-visible, .ct-page a.ct-link:focus-visible { outline: 2px solid #2E4F3C; outline-offset: 2px; }

/* Primary (filled terracotta) buttons */
.ct-home .ct-btn-primary, .ct-page .ct-btn-primary {
  display: inline-flex; align-items: center; background: #B4592E; color: #FFFFFF !important;
  padding: 14px 28px; border-radius: 4px; font-weight: 600; font-size: 15px; text-decoration: none;
  border: none; cursor: pointer; font-family: 'Work Sans', sans-serif;
  transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.ct-home .ct-btn-primary:hover, .ct-page .ct-btn-primary:hover { background: #9A4A24; box-shadow: 0 4px 12px rgba(180,89,46,0.3); transform: translateY(-1px); }
.ct-home .ct-btn-primary:focus-visible, .ct-page .ct-btn-primary:focus-visible { outline: 2px solid #2E4F3C; outline-offset: 2px; }
.ct-home .ct-btn-primary:active, .ct-page .ct-btn-primary:active { transform: translateY(0); }

/* Secondary (text-only) buttons */
.ct-home .ct-btn-ghost, .ct-page .ct-btn-ghost {
  display: inline-flex; align-items: center; padding: 14px 28px; font-weight: 600; font-size: 15px;
  color: #2B241E; text-decoration: none; transition: color 0.15s ease;
}
.ct-home .ct-btn-ghost:hover, .ct-page .ct-btn-ghost:hover { color: #B4592E; }
.ct-home .ct-btn-ghost:focus-visible, .ct-page .ct-btn-ghost:focus-visible { outline: 2px solid #2E4F3C; outline-offset: 2px; }

/* Add-to-cart buttons */
.ct-home .ct-add-cart {
  background: #2E4F3C !important; color: #F8F2E6 !important; border: none !important; border-radius: 4px !important;
  padding: 10px 18px !important; font-size: 14px !important; font-weight: 600 !important; font-family: 'Work Sans', sans-serif !important;
  transition: background-color 0.15s ease;
}
.ct-home .ct-add-cart:hover { background: #22392B !important; }
.ct-home .ct-add-cart:focus-visible { outline: 2px solid #B4592E; outline-offset: 2px; }

/* Product / blog cards */
.ct-home .ct-card {
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.ct-home .ct-card:hover {
  box-shadow: 0 8px 24px rgba(43,36,30,0.12); transform: translateY(-3px); border-color: #D9BE7C;
}
.ct-home a.ct-card-link { text-decoration: none; color: inherit; }
.ct-home a.ct-card-link:focus-visible { outline: 2px solid #2E4F3C; outline-offset: 2px; }
.ct-home a.ct-title-link:hover { text-decoration: underline; }

/* Topic/filter-style chips (reserved for future use) */
.ct-home .ct-chip:hover { background: #E6D9C2; }

/* Out-of-stock badge on the shop/archive loop. Divi's WooCommerce loop template doesn't call
   wc_get_stock_html(), so there was no visual sold-out indicator at all -- just a clickable card
   like any in-stock item. CSS-only badge driven off WooCommerce's own .outofstock class. */
ul.products li.product.outofstock { position: relative; }
ul.products li.product.outofstock .et_shop_image { position: relative; display: block; }
ul.products li.product.outofstock .et_shop_image::after {
  content: "Out of Stock";
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: #2B241E; color: #FFFFFF; font-size: 11px; font-weight: 700;
  padding: 5px 10px; border-radius: 4px; letter-spacing: 0.5px; text-transform: uppercase;
}
ul.products li.product.outofstock .et_shop_image img { opacity: 0.5; }
ul.products li.product.outofstock .woocommerce-loop-product__title,
ul.products li.product.outofstock .price { opacity: 0.55; }