/*
Theme Name: Vintessa
Theme URI: https://vintessa.store/
Author: Vintessa
Description: Het goedgekeurde Vintessa ontwerp, voorbereid voor WooCommerce.
Version: 1.0.0
Text Domain: vintessa
*/

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

:root {
  --black: #050505;
  --gold: #d9bd8b;
  --cream: #f4efe7;
  --text: #24211d;
  --muted: #756f66;
  --line: #ded5c8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: #fff;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.75;
}
a { color: inherit; text-decoration: none; }
.header {
  height: 92px;
  padding: 10px 5vw;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: var(--black);
  border-bottom: 1px solid #27231e;
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand img { width: 88px; height: 70px; object-fit: contain; }
nav { display: flex; gap: 34px; }
nav a {
  color: #eee5d7;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
nav a:hover { color: var(--gold); }

.hero {
  min-height: calc(100vh - 92px);
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 4vw;
  background: var(--black);
  color: #f8f0e4;
  padding: 70px 7vw;
  border-bottom: 1px solid #29251f;
}
.hero-logo { display: flex; align-items: center; justify-content: center; height: 100%; }
.hero-logo img { width: min(42vw, 560px); height: auto; max-height: 72vh; object-fit: contain; display: block; }
.hero-copy { max-width: 590px; padding-right: 2vw; }
.hero-copy .intro { margin: 0 0 34px; color: #d6cfc4; }
.section { padding: 100px 7vw; }
#collectie { background: #f4ede3; }
.section-heading { max-width: 700px; margin: 0 auto 55px; text-align: center; }
h2 { font-size: clamp(42px, 5vw, 62px); margin: 0 0 18px; }
.section-heading p:last-child { color: var(--muted); }
.products {
  max-width: 1180px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.product-card { border: 1px solid var(--line); background: #fff; }
.placeholder {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: #f1ede6;
  color: #938b80;
  font-size: 10px;
  letter-spacing: .22em;
}
.product-info { padding: 20px; }
.product-info h3 { font-size: 27px; margin: 0 0 3px; }
.product-info p { color: var(--muted); font-size: 12px; margin: 0 0 9px; }
.product-info strong { font-family: "Cormorant Garamond", Georgia, serif; font-size: 23px; font-weight: 500; }

.section-dark { background: var(--black); color: #eee7dc; }
.narrow { max-width: 780px; margin: auto; text-align: center; }
.narrow p:not(.eyebrow) { color: #c9c0b4; }
.contact { background: #f4ede3; }
.contact-box {
  max-width: 620px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.contact-box p { padding: 22px; margin: 0; }
.contact-box p + p { border-left: 1px solid var(--line); }
.contact-box span {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.contact-box a { font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; }

footer {
  padding: 55px 7vw 35px;
  background: var(--black);
  color: #aaa095;
  text-align: center;
  font-size: 11px;
}
.footer-logo { width: 95px; height: 75px; object-fit: contain; margin-bottom: 18px; }
.footer-links { display: flex; justify-content: center; gap: 25px; margin-bottom: 18px; }
.footer-links a:hover { color: var(--gold); }

@media (max-width: 720px) {
  .header { height: auto; padding: 16px 20px; flex-direction: column; gap: 8px; }
  nav { gap: 15px; flex-wrap: wrap; justify-content: center; }
  nav a { font-size: 10px; }
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 35px; padding: 55px 22px 75px; text-align: center; }
  .hero-logo img { width: min(78vw, 430px); }
  .hero-copy { max-width: 600px; padding-right: 0; margin: auto; }
  .hero-copy .intro { margin-left: auto; margin-right: auto; }
  .products { grid-template-columns: 1fr; max-width: 430px; }
  .section { padding: 75px 22px; }
  .contact-box { grid-template-columns: 1fr; }
  .contact-box p + p { border-left: 0; border-top: 1px solid var(--line); }
  .footer-links { flex-direction: column; gap: 7px; }
}


/* WordPress / WooCommerce integration */
.wp-block-post-title { display:none; }
.wp-block-woocommerce { width:100%; }

.woocommerce-page main.site-main,
.woocommerce main.site-main { background: var(--cream); }

.woocommerce .products {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 70px 7vw 100px;
}
.woocommerce .products::before,
.woocommerce .products::after { display:none; }
.woocommerce ul.products li.product {
  width:auto !important;
  margin:0 !important;
  float:none !important;
  background:#fff;
  border:1px solid var(--line);
  padding:0 0 20px;
}
.woocommerce ul.products li.product a img {
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  margin:0 0 18px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:27px;
  padding:0 20px;
}
.woocommerce ul.products li.product .price {
  padding:0 20px;
  color:var(--text);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:23px;
}
.woocommerce ul.products li.product .button {
  margin:8px 20px 0;
  background:var(--black);
  color:#f8f0e4;
  border-radius:0;
  font-weight:400;
}
.woocommerce div.product {
  padding:80px 7vw;
  background:var(--cream);
}
.woocommerce div.product .product_title {
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(42px,5vw,62px);
}
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button {
  background:var(--black);
  color:#f8f0e4;
  border-radius:0;
  font-weight:400;
}
.woocommerce-message { border-top-color:var(--gold); }
.woocommerce-message::before { color:var(--gold); }

@media (max-width:720px) {
  .woocommerce .products { grid-template-columns:1fr; max-width:430px; }
}

.product-card > a > img {
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
  margin:0;
}
.product-card > a { display:block; }
.button {
  display:inline-block;
  padding:13px 24px;
  background:#f8f0e4;
  color:var(--black);
  border:1px solid #f8f0e4;
}
.button:hover { background:transparent; color:#f8f0e4; }
.eyebrow {
  color:var(--muted);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin:0 0 10px;
}
.section-dark .eyebrow { color:var(--gold); }