/*
Theme Name: Necklez Theme
Author: Necklez
Version: 1.0
*/

:root {
  --font-classic: 'Metamorphous', serif;
  --font-bold: 'Playfair Display SC', serif;
  --font-neutral: 'Sorts Mill Goudy', serif;
  --color-light-shades: #fcf8d2;
  --color-light-accent: #9B856E;
  --color-main: #9CA69F;
  --color-dark-accent: #6a625d;
  --color-dark-shades: #10281b;
  --color-dark: #0d1310;
}

/* --- Fonts:
Caps: Playfair Display SC
Serif: Sorts Mill Goudy, IBM Plex Serif, Lora, Noto Serif, Playfair Display
Medieval: Modern Antiqua, Metamorphous
---*/

/* ---------- GLOBAL ---------- */
a,
h1,
h2,
button {
font-family: var(--font-bold) !important; 
}

main,
body,
footer { 
font-family: 
var(--font-classic); 
}

.woocommerce-cart *,
.woocommerce-checkout *,
.woocommerce-order-received * {
  font-family: var(--font-neutral) !important;
}

.woocommerce-cart h1,
.woocommerce-cart h2,
.woocommerce-cart a,
.woocommerce-cart button,
.woocommerce-checkout h1,
.woocommerce-checkout h2,
.woocommerce-checkout a,
.woocommerce-checkout button,
.woocommerce-order-received h1,
.woocommerce-order-received h2,
.woocommerce-order-received a,
.woocommerce-order-received button {
  font-family: inherit !important;
}

.woocommerce-cart .main-nav ul.menu > li > a,
.woocommerce-checkout .main-nav ul.menu > li > a,
.woocommerce-order-received .main-nav ul.menu > li > a {
  font-family: var(--font-bold) !important;
}

body {
  background-color: var(--color-main);
  margin: 0 auto;
  font-size: 1.05rem;
}

h1 {
  font-size: 2.5rem;
  color: var(--color-dark-shades);
}

h2 {
  font-size: 2rem;
  color: var(--color-dark-shades);
}

a {
  color: var(--color-dark-shades);
  font-weight: bold;
}

a:hover{
  color: var(--color-dark-accent);
  font-weight: bold;
  text-decoration: none;
}




/* ---------- GLOBAL CONTAINER ---------- */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* ---------- HEADER ---------- */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--color-light-shades);
  position: relative;
  background-color: var(--color-dark-shades);
  font-size: 1.7rem;
}

.site-header a {
  color: var(--color-light-shades);
  text-decoration: none;
}

.logo img {
  width: 200px;
}

/* ---------- NAVIGATION ---------- */

/* Checkbox überall unsichtbar */

#menu-toggle { 
  position: absolute; 
  width: 0; 
  height: 0; 
  opacity: 0; 
  pointer-events: none; 
}

/* Desktop Layout */
.main-nav ul.menu { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 1rem; 
  list-style: none; 
  margin: 0; 
  padding: 0; 
} 

.main-nav ul.menu li { 
  position: relative; 
} 
  
/* Hauptlinks */ .main-nav ul.menu > li > a { text-decoration: none; font-family: var(--font-bold); color: var(--color-light-shades); padding: 0.5rem 1rem; display: block; transition: color 0.2s ease, background-color 0.2s ease; } /* Shop-Link deaktivieren */ .main-nav ul.menu > li > a[href="#"] { pointer-events: none; cursor: default; } /* Hovereffekt */ .main-nav ul.menu > li > a:hover { color: var(--color-dark-accent); } /* Dropdown Desktop */ .main-nav ul.menu li ul.sub-menu { display: none; position: absolute; top: 100%; left: 0; background-color: var(--color-light-shades); list-style: none; padding: 0.5rem 0; margin: 0; border: 1px solid var(--color-light-accent); min-width: 200px; z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,0.15); } .main-nav ul.menu li:hover > ul.sub-menu,
.main-nav ul.menu li ul.sub-menu:hover {
  display: block;
} .main-nav ul.menu li ul.sub-menu li a { display: block; padding: 0.6rem 1rem; color: var(--color-dark-shades); text-decoration: none; white-space: nowrap; font-size: 1rem; line-height: 1.4; transition: background-color 0.2s ease, color 0.2s ease; } .main-nav ul.menu li ul.sub-menu li a:hover { background-color: var(--color-light-accent); color: var(--color-light-shades); } /* MOBILE / TABLET */ @media (max-width: 900px) { .site-header { flex-wrap: wrap; justify-content: space-between; padding: 1rem; position: relative; z-index: 10; } .site-header .logo { flex: 0 0 auto; } /* Burger Icon */ .burger { display: flex; flex-direction: column; justify-content: space-between; width: 25px; height: 20px; cursor: pointer; flex: 0 0 auto; } .burger span { display: block; height: 3px; background-color: var(--color-light-shades); border-radius: 2px; transition: all 0.3s ease; } /* Cart rechts */ .cart { flex: 0 0 auto; } .cart-link { text-decoration: none; color: var(--color-light-shades); font-size: 1.4rem; display: flex; align-items: center; gap: 0.3rem; transition: color 0.2s ease; } .cart-link:hover { color: var(--color-dark-accent); } .cart-link svg { vertical-align: middle; height: 1em; } /* Fullscreen Menü */ .main-nav { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; background-color: var(--color-dark-shades); display: flex; flex-direction: column; justify-content: center; align-items: center; transform: translateY(-100%); transition: transform 0.3s ease; z-index: 999; } /* Menü öffnen */ #menu-toggle:checked ~ .main-nav { transform: translateY(0); } /* Close X oben rechts */ .close-menu { position: absolute; top: 1rem; right: 1rem; font-size: 2.5rem; color: var(--color-light-shades); cursor: pointer; z-index: 1001; transition: color 0.2s ease; } .close-menu:hover { color: var(--color-light-accent); } /* Menü Items */ .main-nav ul.menu { flex-direction: column; gap: 0.8rem; text-align: center; } .main-nav ul.menu > li > a { font-size: 2rem; line-height: 1.4; padding: 0.9rem 0.5rem; min-height: 44px; border: none; background: none; display: block; box-sizing: border-box; transition: background-color 0.2s ease, color 0.2s ease; } /* Untermenü */ .main-nav ul.menu li ul.sub-menu { position: static; display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.5rem; background-color: var(--color-dark-shades); box-shadow: none; padding: 0; } .main-nav ul.menu li ul.sub-menu li a { color: var(--color-light-shades); font-size: 1.5rem; line-height: 1.4; padding: 0.7rem 0.5rem; min-height: 40px; display: block; box-sizing: border-box; transition: background-color 0.2s ease, color 0.2s ease; } .main-nav ul.menu li ul.sub-menu li a:hover { background-color: var(--color-dark-accent); color: var(--color-light-shades); } /* Burger Animation zu X */ #menu-toggle:checked + .burger span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } #menu-toggle:checked + .burger span:nth-child(2) { opacity: 0; } #menu-toggle:checked + .burger span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } } /* Desktop: X-Button unsichtbar */ @media (min-width: 901px) { .close-menu { display: none !important; } /* Optional: Burger-Icon auch Desktop ausblenden */ .burger { display: none !important; } } /* ---------- NAVIGATION ENDE ---------- */

/* HEADER ENDE */


/*------------- HOME -------------*/

/* HOME - HERO */

.hero { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  margin: 1rem auto; 
} 

.hero img { 
  width: 100%; 
  max-width: 1400px; 
  min-height: 70vh;
  object-fit: cover; 
  object-position: center; 
  border-radius: 0.5rem; 
  box-shadow: 0 2px 15px var(--color-dark-accent); 
  display: block; 
} 

@media (max-width: 900px) { 
  .hero { 
    padding-top: 0.5rem; 
  } 
  
  .hero img { 
    width: 100%; 
    min-height: 45vh; 
    max-width: 100%; 
    border-radius: 0.5rem; 
  } 
  
}


/* HOME - CATEGORY GRID */

.categories {
  padding: 1rem;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}

/* wichtig: Link über ganze Grid-Spalte */
.category-grid a {
  display: block;
  width: 100%;
}

.category-grid img {
  width: 100%;
  display: block;
  border-radius: 0.5rem;
  transition: transform 0.3s ease;
}

.category-grid img:hover {
  transform: scale(1.02);
}

/* Tablet & Mobile */
@media (max-width: 900px) {

  .categories {
    padding: 0;
  }

  .category-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 2rem auto;
    width: 100%;
  }

  .category-grid img {
    width: 100%;
  }

}

@media (max-width: 500px) {

  .category-grid img {
    width: 100%;
    max-width: none;
  }

}



/* HOME - POPULAR PRODUCTS */

.popular-products {
  background-color: var(--color-dark-shades);
  padding: 1rem;
  border-radius: 1rem 1rem 0 0;
  text-align: center;
  color: var(--color-light-shades);
  font-family: var(--font-bold);

}

.popular-products .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.popular-products a {
    color: var(--color-light-shades);
    text-decoration: none;
  }

.popular-products a:hover{
  color: var(--color-dark-accent);
  font-weight: bold;
  text-decoration: none;
}

.popular-products h2,
.popular-products p,
.popular-products span {
  color: var(--color-light-shades);
}


.popular-products .products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.popular-products .products-grid .product-placeholder,
.popular-products .products-grid li.product {
  border-radius: 0.5rem;
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease;
}

.popular-products .products-grid .product-placeholder:hover,
.popular-products .products-grid li.product:hover {
  transform: scale(1.02);
}

.popular-products .products-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
  object-fit: cover;
}

.popular-products .products-grid .product-placeholder p,
.popular-products .products-grid li.product .woocommerce-loop-product__title {
  margin: 0.5rem 0 0;
  font-size: 1rem;
}


/* HOME - FEATURES */

.features {
  background-color: var(--color-dark-accent);
  color: var(--color-light-shades);
  border-radius: 0 0 1rem 1rem;
  padding: 3rem 1rem;
  box-sizing: border-box;
}


.features .feature-grid {
  display: flex;
  justify-content: space-between; 
  align-items: flex-start;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Einzelne Feature-Karte */
.features .feature {
  flex: 1 1 0;      
  max-width: 360px; 
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem;
}

/* Icon (SVG) */
.features .feature svg {
  width: 6rem;
  height: 6rem;
  margin-bottom: 1rem;
  color: var(--color-light-shades);
  transition: transform 0.25s ease, color 0.25s ease;
}

/* Text */
.features .feature p {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.4;
  font-family: var(--font-classic);
}

/* Responsive: Tablet & Mobile */
@media (max-width: 900px) {
  .features {
    padding: 2rem 0.75rem;
  }

  .features .feature-grid {
    flex-direction: column;   /* untereinander */
    align-items: center;
    gap: 2.5rem;
  }

  .features .feature {
    width: 100%;
    max-width: 700px;         /* Karte bleibt nicht zu breit */
    padding: 0.5rem 1rem;
  }

  .features .feature svg {
    width: 4.25rem;           /* kleineres Icon auf Mobile */
    height: 4.25rem;
    margin-bottom: 0.75rem;
  }

  .features .feature p {
    font-size: 1.05rem;       /* kleinere Schrift auf Mobile */
  }
}

@media (max-width: 500px) {
  .features .feature svg {
    width: 3.5rem;
    height: 3.5rem;
  }
  .features .feature p {
    font-size: 0.98rem;
  }
}

/* HOME END */


/* COMING SOON */

#coming-soon {
  background-color: var(--color-dark-shades);
  text-align: center;
  margin: 3rem 1rem;
  color: var(--color-light-shades)
}

#coming-soon h1 {
  color: var(--color-light-shades);
}

#coming-soon img {
  width: 150px;
}

/* COMING SOON END */



/* CONTACT PAGE */

.contact {
  font-family: var(--font-classic);
  color: var(--color-dark-shades);
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;

  /* Inputs, Textareas, Selects */
  .forminator-ui input,
  .forminator-ui select,
  .forminator-ui textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-light-shades);
    font-size: 1rem;
    font-family: inherit;
    background-color: var(--color-main);
  }

  /* Placeholder Farbe */
  .forminator-ui input::placeholder,
  .forminator-ui textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
  }

  /* Fokusfelder */
  .forminator-ui input:focus,
  .forminator-ui select:focus,
  .forminator-ui textarea:focus {
    outline: none;
    border: 1px solid var(--color-main);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
  }

  /* Fehlerfelder */
  .forminator-ui .forminator-error {
    border: 1px solid var(--color-error);
    background-color: rgba(255, 0, 0, 0.05);
  }

  /* Labels */
  .forminator-ui label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
  }

  /* Textarea Höhe */
  .forminator-ui textarea {
    min-height: 150px;
  }

  /* Select Styling */
  .forminator-ui select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  /* Buttons */
  button {
    background-color: var(--color-dark-shades);
    color: var(--color-light-shades);
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-dark-shades);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease, border 0.2s ease;
  }

  /* Hover-Effekt Buttons */
  button:hover {
    background-color: var(--color-main);
    border: 1px solid darkgreen; /* angepasst */
    transform: scale(1.02);
  }

  /* Abstand zwischen Feldern */
  .forminator-ui .forminator-row {
    margin-bottom: 1.5rem;
  }

  /* Responsive Anpassung */
  @media (max-width: 600px) {
    padding: 1rem;

    button {
      width: 100%;
    }
  }
}

/* CONTACT PAGE END */


/* FAQ */
.faq {
  font-family: var(--font-classic);
  color: var(--color-dark-shades);
  margin: 0 auto;
  padding: 2rem;
}
/* FAQ END */


/* IMPRINT */
.imprint {
  font-family: var(--font-classic);
  color: var(--color-dark-shades);
  margin: 0 auto;
  padding: 2rem;
}
/* IMPRINT END */

/*------------- PAGES STYLING END -------------*/


/*------------- /SHOP/ STYLING START -------------*/

/* Shop-Layout Überschriften zentrieren */
.shop-layout h1,
.shop-layout h2,
.shop-layout .price {
  text-align: center;
}

/* Listenpunkte entfernen */
.shop-layout li {
  list-style-type: none;
}

#primary {
  color: var(--color-dark-shades);
}

.shop-layout a {
  color: var(--color-dark-shades);
}

.shop-layout a:hover {
  color: var(--color-dark-accent);
}

.woocommerce ul.products li.product .price {
    display: block;   
    margin-bottom: 1rem;
}

.woocommerce ul.products li.product .button {
    display: block;    
    width: fit-content;   
    margin: 0 auto;       
}

.woocommerce div.product .summary .price {
    display: block;
    margin-bottom: 1.5rem; 
}

.woocommerce div.product form.cart .button {
    display: block;
    margin: 0 auto;        
}

.woocommerce a.added_to_cart {
    display: block;       
    width: fit-content;   
    margin: 0.5rem auto 0 auto; 
    text-align: center;   
}


.woocommerce-Price-amount {
  font-size: 1.3rem;
  color: var(--color-dark-accent);
}


.archive.woocommerce ul.products li.product img {
    border-radius: 0.5rem; /* Abrundung */
    transition: transform 0.3s ease;
}

.archive.woocommerce ul.products li.product img:hover {
    transform: scale(1.05);
}

.woocommerce nav.woocommerce-breadcrumb a,
.posted_in a {
  color: var(--color-dark-shades);
  text-decoration: underline;
  margin: 3px;
}

.woocommerce nav.woocommerce-breadcrumb a:hover,
.posted_in a:hover {
  color: var(--color-dark-shades);
  text-decoration: none;
}


/*------------- /SHOP/ STYLING END -------------*/



/*------------- /PRODUCT/ STYLING START -------------*/


/* Single Product Button wie Grid Button */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce ul.products li.product .button {
    font-family: var(--font-classic);
    background-color: var(--color-light-shades);
    color: var(--color-dark-accent);
    border: 1px solid var(--color-dark-accent);
    border-radius: 0.5rem;
    padding: 0.6em 1.2em;
    text-transform: uppercase;
    text-align: center;
    display: block;
    width: fit-content;
    margin: 0 auto;
}

/* Hover wie Grid */
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce ul.products li.product .button:hover {
    background-color: var(--color-light-shades);
    color: var(--color-dark-accent);
    border: 1px solid var(--color-light-shades);
}


.quantity input {
  font-family: var(--font-bold);
  font-size: 1.2rem;
  margin: 2px;
  border: 1px solid var(--color-dark-shades);
  border-radius: 3px;
}

div.product_meta {
  display: none;
}

.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__wrapper .flex-control-thumbs img  {
    border-radius: 0.5rem; 
}

.glightbox-container img {
    max-width: 1000px;  
    width: 90vw;   
    height: auto;
    max-height: 90vh; 
    object-fit: contain;
}

@media (max-width: 600px) {
    .glightbox-container img {
        width: 90vw; 
        max-width: 90vw;
        max-height: 80vh;
    }
}

.woocommerce-product-gallery__image {
    margin-bottom: 0.5rem;
}


/*------------- /PRODUCT/ STYLING END -------------*/



/*------------- REVIEW STYLING START -------------*/

a.woocommerce-review-link {
  color: var(--color-dark-shades);
}

a.woocommerce-review-link:hover {
  color: var(--color-dark-accent);
}

/* Bewertungssterne – Anzeige */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
  color: var(--color-dark-accent);
}

/* Bewertungssterne – Formular (Hover + Auswahl) */

.woocommerce p.stars a,
.woocommerce p.stars a:hover,
.woocommerce p.stars a.active {
  color: var(--color-dark-accent);
}

/*------------- REVIEW STYLING END -------------*/


/*------------- RELATED PRODUCTS STYLING START -------------*/

.related.products ul.products li.product img {
    border-radius: 0.5rem;
    transition: transform 0.3s ease;
}

.related.products ul.products li.product img:hover {
    transform: scale(1.05);
}

.related.products ul.products li.product a.woocommerce-LoopProduct-link {
  color: var(--color-dark-shades);
  font-weight: bold;
  text-decoration: none;
  font-size: 1rem;
}

.related.products ul.products li.product a.woocommerce-LoopProduct-link:hover {
  color: var(--color-dark-accent);
  font-weight: bold;
  text-decoration: none;
}

/*------------- RELATED PRODUCTS STYLING END -------------*/


/*------------- /CART/ STYLING START -------------*/


h2.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title,
section.cart th,
section.cart .wc-block-components-totals-footer-item {
  font-size: 1.4rem;
}

.wc-block-cart-item__product span {
  font-size: 1.1rem;
}

.wc-block-components-product-metadata * {
  color: var(--color-dark-accent);
  font-size: 1rem;
}

a.wc-block-components-product-name,
.wc-block-formatted-money-amount.wc-block-components-formatted-money-amount.wc-block-components-product-price__value {
   font-size: 1.15rem !important;
}

.wc-block-cart-item__remove-link {
  font-size: 0.9rem !important;
}

section.cart a {
  color: var(--color-dark-shades);
  font-weight: bold;
  text-decoration: underline;
  font-size: 1.4rem;
}

section.cart a:hover{
  color: var(--color-dark-accent);
  font-weight: bold;
  text-decoration: none;
}


/*------------- /CART/ STYLING END -------------*/


/* FOOTER */

.site-footer {
  text-align: center;
  padding: 2rem 0;
  color: var(--color-dark-shades);
}

.site-footer a {
  padding: 0 1.2rem;
  color: var(--color-dark-shades);
}