/*
Theme Name: SmallArts
Theme URI: https://smallarts.de
Author: SmallArts
Author URI: https://smallarts.de
Description: Skandinavisch inspiriertes Premium-Handmade-Theme für SmallArts. WooCommerce-kompatibel mit warmen Naturtönen, weicher Typografie und liebevollen Details. Perfekt für handgefertigte Unikate, Etsy-ähnliche Shops und nordische Lifestyle-Marken.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: smallarts
Tags: e-commerce, woocommerce, handmade, scandinavian, minimal, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, two-columns, right-sidebar
*/

/* ==========================================================================
   1. CSS-VARIABLEN — Markenfarben & Typografie
   ========================================================================== */
:root {
  /* Marken-Farben */
  --sa-cream: #FAF6F0;
  --sa-cream-light: #FFFDF9;
  --sa-sand: #F0E8DA;
  --sa-sand-light: #F5EFE3;
  --sa-beige: #E8DDC9;
  --sa-beige-warm: #E5D5BD;
  --sa-beige-dark: #D9C9B5;
  --sa-brown-light: #B5A696;
  --sa-brown: #8C7B6E;
  --sa-brown-mid: #6B5A4D;
  --sa-brown-dark: #5C4A3D;
  --sa-brown-darker: #4A3F35;
  --sa-brown-deep: #3D3228;

  --sa-forest: #2D5F3F;
  --sa-forest-dark: #234A30;
  --sa-terracotta: #C45A2C;
  --sa-terracotta-dark: #A04A24;

  /* Typografie */
  --sa-font: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sa-font-serif: Georgia, 'Times New Roman', serif;

  /* Layout */
  --sa-radius: 16px;
  --sa-radius-sm: 12px;
  --sa-radius-pill: 40px;
  --sa-shadow: 0 8px 24px rgba(45, 95, 63, 0.08);
  --sa-shadow-lg: 0 12px 28px rgba(45, 95, 63, 0.08);
  --sa-transition: all 0.3s ease;
  --sa-max-width: 1280px;
}

/* ==========================================================================
   2. RESET & GRUNDLAGEN
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--sa-font);
  background: var(--sa-cream);
  color: var(--sa-brown-darker);
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--sa-forest); text-decoration: none; transition: var(--sa-transition); }
a:hover { color: var(--sa-forest-dark); }

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  letter-spacing: -0.5px;
  color: var(--sa-brown-deep);
  line-height: 1.2;
  margin-bottom: 16px;
}

h1 { font-size: 48px; }
h2 { font-size: 36px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }

p { margin-bottom: 16px; }

button, .btn, input[type="submit"] {
  background: var(--sa-forest);
  color: var(--sa-cream-light);
  border: none;
  padding: 14px 32px;
  border-radius: var(--sa-radius-pill);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: var(--sa-transition);
  text-decoration: none;
  display: inline-block;
}

button:hover, .btn:hover, input[type="submit"]:hover {
  background: var(--sa-forest-dark);
  transform: translateY(-2px);
  color: var(--sa-cream-light);
}

.btn-light {
  background: var(--sa-cream-light);
  color: var(--sa-forest);
}

.btn-outline {
  background: transparent;
  color: var(--sa-forest);
  border: 2px solid var(--sa-forest);
  padding: 12px 30px;
}

.btn-outline:hover {
  background: var(--sa-forest);
  color: var(--sa-cream-light);
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.sa-wrap { max-width: var(--sa-max-width); margin: 0 auto; padding: 0 32px; }

.sa-section { padding: 80px 0; }
.sa-section-tinted { background: var(--sa-sand-light); padding: 80px 0; }

.sa-section-header { text-align: center; margin-bottom: 48px; }
.sa-eyebrow {
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--sa-forest);
  text-transform: uppercase;
  margin-bottom: 12px;
  font-weight: 600;
  display: block;
}
.sa-section-header h2 { margin-bottom: 12px; }
.sa-section-header p {
  color: var(--sa-brown);
  font-size: 15px;
  max-width: 540px;
  margin: 0 auto;
}

/* ==========================================================================
   4. TOP-BAR
   ========================================================================== */
.sa-topbar {
  background: var(--sa-brown-deep);
  color: var(--sa-beige-dark);
  font-size: 12px;
  padding: 8px 0;
  text-align: center;
  letter-spacing: 1.5px;
}

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.sa-header {
  background: var(--sa-cream-light);
  border-bottom: 0.5px solid #E8DFD2;
  position: sticky;
  top: 0;
  z-index: 100;
}

.sa-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  max-width: var(--sa-max-width);
  margin: 0 auto;
}

.sa-logo img,
.sa-logo .custom-logo { height: 56px !important; width: auto !important; max-height: 56px; }

.sa-main-nav ul {
  list-style: none;
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
}

.sa-main-nav a {
  color: var(--sa-brown-dark);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}

.sa-main-nav a:hover,
.sa-main-nav .current-menu-item a {
  color: var(--sa-forest);
  border-bottom-color: var(--sa-forest);
}

.sa-header-icons {
  display: flex;
  gap: 20px;
  align-items: center;
  color: var(--sa-brown-dark);
}

.sa-header-icons a {
  color: inherit;
  position: relative;
  display: flex;
}

.sa-header-icons svg { width: 22px; height: 22px; }

.sa-cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--sa-forest);
  color: var(--sa-cream-light);
  font-size: 10px;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* Mobile menu toggle */
.sa-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--sa-brown-dark);
  padding: 8px;
  cursor: pointer;
}

/* ==========================================================================
   6. HERO
   ========================================================================== */
.sa-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--sa-sand);
  min-height: 480px;
}

.sa-hero-text {
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sa-hero h1 {
  font-size: 48px;
  margin-bottom: 20px;
  letter-spacing: -1px;
}

.sa-hero-text p {
  font-size: 17px;
  color: var(--sa-brown-mid);
  line-height: 1.6;
  margin-bottom: 36px;
  max-width: 460px;
}

.sa-hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }

.sa-hero-visual {
  background: var(--sa-beige-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.sa-hero-visual::before {
  content: '';
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.4);
}

.sa-hero-visual img {
  position: relative;
  z-index: 1;
  width: 280px;
  height: 280px;
}

/* ==========================================================================
   7. USP-STRIP
   ========================================================================== */
.sa-usp-strip {
  background: var(--sa-cream-light);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 24px 32px;
  gap: 24px;
  border-bottom: 0.5px solid #E8DFD2;
}

.sa-usp {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.sa-usp-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sa-sand);
  color: var(--sa-forest);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sa-usp-icon svg { width: 18px; height: 18px; }

.sa-usp-text {
  font-size: 13px;
  color: var(--sa-brown-mid);
  font-weight: 500;
}

/* ==========================================================================
   8. KATEGORIEN
   ========================================================================== */
.sa-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sa-cat-card {
  background: var(--sa-cream-light);
  border-radius: var(--sa-radius);
  padding: 36px 24px;
  text-align: center;
  border: 0.5px solid #E8DFD2;
  transition: var(--sa-transition);
  display: block;
  color: inherit;
}

.sa-cat-card:hover {
  border-color: var(--sa-forest);
  transform: translateY(-4px);
  box-shadow: var(--sa-shadow);
  color: inherit;
}

.sa-cat-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--sa-sand);
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sa-forest);
}

.sa-cat-icon svg { width: 28px; height: 28px; }

.sa-cat-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--sa-brown-deep);
  margin-bottom: 4px;
}

.sa-cat-count {
  font-size: 12px;
  color: var(--sa-brown);
}

/* ==========================================================================
   9. PRODUKTE / WOOCOMMERCE
   ========================================================================== */
.sa-products,
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--sa-cream-light);
  border-radius: var(--sa-radius);
  overflow: hidden;
  border: 0.5px solid #E8DFD2;
  transition: var(--sa-transition);
}

.woocommerce ul.products li.product:hover {
  border-color: var(--sa-forest);
  transform: translateY(-4px);
  box-shadow: var(--sa-shadow-lg);
}

.woocommerce ul.products li.product a {
  text-decoration: none;
  color: inherit;
}

.woocommerce ul.products li.product img {
  margin: 0 !important;
  width: 100%;
  height: 280px;
  object-fit: cover;
  background: var(--sa-sand);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 0 22px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--sa-brown-deep) !important;
  margin-top: 16px !important;
  margin-bottom: 10px !important;
}

.woocommerce ul.products li.product .price {
  padding: 0 22px 20px !important;
  display: block;
  color: var(--sa-forest) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

.woocommerce ul.products li.product .price del {
  color: var(--sa-brown-light) !important;
  font-weight: 400;
  margin-right: 8px;
}

.woocommerce ul.products li.product .price ins {
  background: transparent !important;
  text-decoration: none;
}

.woocommerce span.onsale {
  background: var(--sa-forest) !important;
  color: var(--sa-cream-light) !important;
  border-radius: 14px !important;
  padding: 5px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1 !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
}

/* "Add to cart" Button — Stil */
.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--sa-forest) !important;
  color: var(--sa-cream-light) !important;
  border-radius: var(--sa-radius-pill) !important;
  padding: 12px 24px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin: 0 22px 22px !important;
  display: block !important;
  text-align: center !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--sa-forest-dark) !important;
  color: var(--sa-cream-light) !important;
}

/* Single Product */
.woocommerce div.product .product_title {
  font-size: 36px !important;
  font-weight: 500 !important;
  color: var(--sa-brown-deep) !important;
  letter-spacing: -0.5px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--sa-forest) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
}

.woocommerce-tabs .tabs li.active a,
.woocommerce-tabs .tabs li a:hover {
  color: var(--sa-forest) !important;
}

/* ==========================================================================
   10. STORY-BANNER
   ========================================================================== */
.sa-story {
  background: var(--sa-forest);
  color: var(--sa-cream-light);
  margin: 80px 32px;
  border-radius: 24px;
  padding: 64px 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.sa-story h2 {
  color: var(--sa-cream-light);
  font-size: 32px;
  margin-bottom: 16px;
}

.sa-story .sa-eyebrow { color: var(--sa-beige-dark); }

.sa-story p {
  font-size: 15px;
  line-height: 1.7;
  opacity: 0.9;
  margin-bottom: 16px;
}

.sa-story-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sa-story-icon img {
  width: 220px;
  height: 220px;
  background: var(--sa-cream-light);
  border-radius: 50%;
  padding: 30px;
}

/* ==========================================================================
   11. NEWSLETTER
   ========================================================================== */
.sa-newsletter {
  background: var(--sa-sand);
  text-align: center;
  padding: 64px 32px;
}

.sa-newsletter h2 {
  font-size: 28px;
  margin-bottom: 12px;
}

.sa-newsletter p {
  color: var(--sa-brown-mid);
  font-size: 15px;
  margin-bottom: 28px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.sa-newsletter-form {
  display: flex;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px;
}

.sa-newsletter-form input[type="email"] {
  flex: 1;
  padding: 14px 20px;
  border: 1px solid var(--sa-beige-dark);
  border-radius: var(--sa-radius-pill);
  background: var(--sa-cream-light);
  font-family: inherit;
  font-size: 14px;
  color: var(--sa-brown-darker);
}

.sa-newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--sa-forest);
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.sa-footer {
  background: var(--sa-brown-deep);
  color: var(--sa-beige-dark);
  padding: 56px 32px 24px;
}

.sa-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 0.5px solid var(--sa-brown-dark);
  max-width: var(--sa-max-width);
  margin: 0 auto;
}

.sa-foot-brand img {
  height: 48px;
  margin-bottom: 16px;
  filter: brightness(0) invert(1) opacity(0.85);
}

.sa-foot-brand p {
  font-size: 13px;
  color: var(--sa-brown-light);
  line-height: 1.7;
  max-width: 320px;
}

.sa-foot-col h4 {
  font-size: 12px;
  color: var(--sa-cream-light);
  margin-bottom: 16px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
}

.sa-foot-col a {
  display: block;
  font-size: 13px;
  color: var(--sa-brown-light);
  padding: 6px 0;
}

.sa-foot-col a:hover { color: var(--sa-cream-light); }

.sa-foot-bottom {
  text-align: center;
  padding-top: 24px;
  font-size: 11px;
  color: var(--sa-brown);
  letter-spacing: 1.5px;
  max-width: var(--sa-max-width);
  margin: 0 auto;
}

.sa-foot-social { display: flex; gap: 12px; margin-top: 16px; }

.sa-foot-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sa-brown-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sa-beige-dark);
}

.sa-foot-social a:hover {
  background: var(--sa-forest);
  color: var(--sa-cream-light);
}

.sa-foot-social svg { width: 16px; height: 16px; }

/* ==========================================================================
   13. BLOG / POSTS
   ========================================================================== */
.sa-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--sa-max-width);
  margin: 0 auto;
  padding: 0 32px;
}

.sa-post-card {
  background: var(--sa-cream-light);
  border-radius: var(--sa-radius);
  overflow: hidden;
  border: 0.5px solid #E8DFD2;
  transition: var(--sa-transition);
}

.sa-post-card:hover {
  border-color: var(--sa-forest);
  transform: translateY(-4px);
  box-shadow: var(--sa-shadow);
}

.sa-post-card .sa-post-img {
  height: 200px;
  background: var(--sa-sand);
  overflow: hidden;
}

.sa-post-card .sa-post-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sa-post-card-content { padding: 24px; }

.sa-post-card .sa-post-cat {
  font-size: 11px;
  color: var(--sa-forest);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 8px;
}

.sa-post-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.sa-post-card h3 a { color: var(--sa-brown-deep); }
.sa-post-card h3 a:hover { color: var(--sa-forest); }

.sa-post-card .sa-post-meta {
  font-size: 12px;
  color: var(--sa-brown);
}

/* Single Post */
.sa-single-post {
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 32px;
}

.sa-single-post .sa-post-cat {
  font-size: 11px;
  color: var(--sa-forest);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 16px;
  display: block;
  text-align: center;
}

.sa-single-post h1 {
  text-align: center;
  margin-bottom: 24px;
}

.sa-post-meta-single {
  text-align: center;
  color: var(--sa-brown);
  font-size: 13px;
  margin-bottom: 40px;
}

.sa-single-post .sa-featured-img {
  margin: 0 -32px 40px;
  border-radius: var(--sa-radius);
  overflow: hidden;
}

.sa-single-post .sa-content {
  font-size: 16px;
  line-height: 1.8;
  color: var(--sa-brown-darker);
}

.sa-single-post .sa-content p { margin-bottom: 20px; }
.sa-single-post .sa-content h2 { margin-top: 40px; margin-bottom: 16px; }

/* ==========================================================================
   14. MOBILE
   ========================================================================== */
@media (max-width: 968px) {
  .sa-hero { grid-template-columns: 1fr; }
  .sa-hero-text { padding: 48px 24px; }
  .sa-hero h1 { font-size: 32px; }
  .sa-usp-strip { grid-template-columns: repeat(2, 1fr); }
  .sa-categories { grid-template-columns: repeat(2, 1fr); }
  .sa-products,
  .woocommerce ul.products,
  .sa-blog-grid { grid-template-columns: 1fr !important; }
  .sa-story { grid-template-columns: 1fr; padding: 40px 24px; margin: 40px 16px; }
  .sa-footer-grid { grid-template-columns: 1fr 1fr; }
  
  .sa-menu-toggle { display: block; }
  .sa-main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--sa-cream-light);
    padding: 24px;
    border-bottom: 1px solid #E8DFD2;
  }
  .sa-main-nav.active { display: block; }
  .sa-main-nav ul {
    flex-direction: column;
    gap: 16px;
  }
}

@media (max-width: 600px) {
  h1 { font-size: 28px; }
  h2 { font-size: 24px; }
  .sa-section { padding: 48px 0; }
  .sa-section-tinted { padding: 48px 0; }
  .sa-categories { grid-template-columns: 1fr; }
  .sa-footer-grid { grid-template-columns: 1fr; }
  .sa-newsletter-form { flex-direction: column; }
  .sa-newsletter-form input[type="email"] { width: 100%; }
}