/* ============================================
   MOOQS — Brand Stylesheet
   Ultra-luxury closet design brand
   Colors: #1D1D1D bg / #D46734 orange / #F0EBE1 text / #44362E chocolate
   Fonts: Cormorant Garamond (heading) / Montserrat (body)
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: #000;
  color: #F0EBE1;
  font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
  font-weight: 300;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.015em;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* --- Buttons --- */
.btn-primary {
  display: inline-block;
  padding: 15px 44px;
  background-color: #D46734;
  color: #F0EBE1;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid #D46734;
  cursor: pointer;
  transition: background-color 0.35s ease, color 0.35s ease;
}
.btn-primary:hover {
  background-color: transparent;
  color: #D46734;
}

.btn-secondary {
  display: inline-block;
  padding: 15px 44px;
  background-color: transparent;
  color: #F0EBE1;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(240,235,225,0.35);
  cursor: pointer;
  transition: border-color 0.35s ease, color 0.35s ease;
}
.btn-secondary:hover {
  border-color: #D46734;
  color: #D46734;
}

.btn-ghost {
  display: inline-block;
  padding: 13px 36px;
  background-color: transparent;
  color: #D46734;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid #D46734;
  cursor: pointer;
  transition: background-color 0.35s ease, color 0.35s ease;
}
.btn-ghost:hover {
  background-color: #D46734;
  color: #F0EBE1;
}

/* --- Section Label --- */
.section-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #B8894A;
  display: block;
}

/* --- Gold Divider --- */
.gold-divider {
  width: 50px;
  height: 1px;
  background-color: #B8894A;
}

/* --- Scroll Line --- */
.scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, #B8894A, transparent);
  display: block;
}

/* --- Section Padding --- */
.section-padding {
  padding-top: 120px;
  padding-bottom: 120px;
}

/* --- Form Input --- */
.form-input {
  width: 100%;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #3A3028;
  color: #F0EBE1;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.04em;
  padding: 16px 0;
  outline: none;
  transition: border-color 0.3s ease;
  -webkit-appearance: none;
}
.form-input::placeholder {
  color: #8A7A72;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.form-input:focus {
  border-bottom-color: #D46734;
}
textarea.form-input {
  resize: none;
  height: 120px;
}

/* Dropdown readability on dark background */
select.form-input {
  background-color: #121212;
  border: 1px solid #3A3028;
  border-bottom: 1px solid #3A3028;
  color: #F2EBE2;
  padding: 10px 12px;
}

select.form-input option,
select.form-input optgroup {
  background-color: #121212;
  color: #F2EBE2;
}

/* --- Card --- */
.card {
  background-color: #242424;
  border: 1px solid #2E2E2E;
}

/* --- Product Card with Hover Overlay --- */
.product-card {
  position: relative;
  overflow: hidden;
  background-color: #242424;
  cursor: pointer;
}
.product-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card:hover img {
  transform: scale(1.05);
}
.product-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 60px 28px 28px;
  background: linear-gradient(to top, rgba(20,14,10,0.92) 0%, rgba(20,14,10,0.4) 60%, transparent 100%);
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.45s ease, opacity 0.45s ease;
}
.product-card:hover .product-card-overlay {
  transform: translateY(0);
  opacity: 1;
}

/* --- Star Rating --- */
.star-rating::before {
  content: '\2605\2605\2605\2605\2605';
  color: #B8894A;
  font-size: 11px;
  letter-spacing: 3px;
}

/* --- Check/Cross Lists --- */
.check-list { list-style: none; padding: 0; }
.check-list li { position: relative; padding-left: 24px; margin-bottom: 10px; font-size: 14px; font-weight: 300; color: #D0C8C0; }
.check-list li::before { content: '\2713'; color: #B8894A; position: absolute; left: 0; font-size: 12px; top: 2px; }

.cross-list { list-style: none; padding: 0; }
.cross-list li { position: relative; padding-left: 24px; margin-bottom: 10px; font-size: 14px; font-weight: 300; color: #7A6E66; }
.cross-list li::before { content: '\2715'; color: #4A3E36; position: absolute; left: 0; font-size: 11px; top: 2px; }

/* --- FAQ (details/summary) --- */
.faq-item {
  border-bottom: 1px solid #2A2218;
}
.faq-item summary {
  padding: 26px 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-weight: 400;
  color: #F0EBE1;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: 0.01em;
  user-select: none;
  transition: color 0.3s ease;
}
.faq-item summary:hover { color: #B8894A; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  color: #B8894A;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 300;
  flex-shrink: 0;
  margin-left: 24px;
  transition: transform 0.3s ease;
}
.faq-item[open] summary::after {
  content: '\2014';
  font-size: 14px;
}
.faq-answer {
  padding: 0 0 28px 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.9;
  color: #C8BDB4;
  letter-spacing: 0.03em;
  max-width: 680px;
}

/* --- Nav Links --- */
.nav-link {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(9px, 0.75vw, 11px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #F0EBE1;
  text-decoration: none;
  transition: color 0.3s ease;
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #B8894A;
  transition: width 0.3s ease;
}
.nav-link:hover { color: #B8894A; }
.nav-link:hover::after { width: 100%; }

/* --- Hero Section --- */
.hero-section {
  position: relative;
  height: 100vh;
  min-height: 650px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8,8,8,0.25) 0%,
    rgba(8,8,8,0.45) 50%,
    rgba(8,8,8,0.88) 100%
  );
}
.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 90px;
  text-align: center;
  padding-left: 32px;
  padding-right: 32px;
}

/* --- Scroll Reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s ease, transform 0.85s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Horizontal Rules --- */
.hr-dark {
  border: none;
  border-top: 1px solid #252525;
}

/* --- Split Section --- */
.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 680px;
}

/* --- Gallery Grid --- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.gallery-grid-item {
  overflow: hidden;
  position: relative;
}
.gallery-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.gallery-grid-item:hover img {
  transform: scale(1.04);
}

/* --- Footer bottom text --- */
footer p { color: #F0EBE1 !important; }

/* --- Responsive Nav --- */
@media (max-width: 1280px) {
  #site-header { padding: 22px 36px !important; }
  #desktop-nav { gap: 22px !important; }
  .nav-link { letter-spacing: 0.16em; }
  #desktop-cta { gap: 12px !important; }
  #desktop-cta { margin-left: 18px !important; }
}

@media (max-width: 1100px) {
  #site-header { padding: 18px 28px !important; }
  #desktop-nav { gap: 16px !important; }
  .nav-link { letter-spacing: 0.10em; }
  #desktop-cta { gap: 8px !important; }
  #desktop-cta { margin-left: 12px !important; }
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .split-section { grid-template-columns: 1fr !important; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .section-padding { padding-top: 64px; padding-bottom: 64px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .hero-content { padding-left: 24px; padding-right: 24px; padding-bottom: 56px; }
  .hero-section { min-height: 100svh; }

  .mobile-stack { display: flex !important; flex-direction: column !important; gap: 10px !important; }
  .mobile-stack > * { height: 300px !important; grid-row: auto !important; }

  .mobile-2col { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto !important; }
  .mobile-2col > * { grid-row: auto !important; height: 220px !important; }

  .mobile-pad { padding-left: 20px !important; padding-right: 20px !important; }

  .split-section > div:last-child { padding: 40px 24px !important; }

  .pillars-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }

  .product-card { min-height: 260px; }
}

@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .mobile-2col { grid-template-columns: 1fr !important; }
  .mobile-2col > * { height: 260px !important; }
}

/* --- Product Pages: C01 style harmonization --- */
.field-label { color: #FFFFFF !important; }
.field-label strong { color: #F0EBE1 !important; }

.size-pill { color: #FFFFFF !important; }
.size-pill:hover { color: #FFFFFF !important; }

.btn-pill-ghost { color: #FFFFFF !important; }
.btn-quote-subtle { color: #FFFFFF !important; }
.dl-btn-pill { color: #FFFFFF !important; }
.dl-login-note { color: #FFFFFF !important; }

.price-label,
.price-login,
.price-disclaimer,
.price-loading { color: #FFFFFF !important; }

/* Product-detail pages often use inline text colors; align those with C01 */
.product-flex [style*="color:#C0B4A8"],
.product-flex [style*="color: #C0B4A8"],
.product-flex [style*="color:#C8C0B8"],
.product-flex [style*="color: #C8C0B8"],
.product-flex [style*="color:#A09488"],
.product-flex [style*="color: #A09488"],
.product-flex [style*="color:#9A8E84"],
.product-flex [style*="color: #9A8E84"],
.product-flex [style*="color:#C8BDB4"],
.product-flex [style*="color: #C8BDB4"] {
  color: #FFFFFF !important;
}

/* Product title code (C01/R20/etc.) should use same font as title */
.product-flex h1 > span[style*="font-family:'Montserrat'"],
.product-flex h1 > span[style*='font-family:"Montserrat"'] {
  font-family: inherit !important;
  font-weight: inherit !important;
}

/* Keep product detail page spacing consistent with C01 */
.product-flex {
  align-items: flex-start !important;
  min-height: 100vh !important;
}

.product-flex > div:first-child {
  width: 50% !important;
  height: 100vh !important;
}

.product-flex > div:last-child {
  flex: 1 !important;
  padding: 28px 48px 40px !important;
  overflow-y: auto !important;
}

/* Downloads strip directly below the split section */
.product-flex + section {
  background: #000 !important;
  border-top: 1px solid #1A1A1A !important;
  padding: 20px 48px 32px !important;
}

/* Harmonize next two content sections with C01 rhythm */
.product-flex + section + section {
  background: #000 !important;
  border-top: 1px solid #1A1A1A !important;
  padding: 48px 48px !important;
}

.product-flex + section + section + section {
  background: #000 !important;
  border-top: 1px solid #1A1A1A !important;
  padding: 72px 48px !important;
}

/* Product pages: improve light-grey text readability */
.product-flex,
.product-flex p,
.product-flex td,
.product-flex span {
  color: #F0EBE1;
}

.product-flex .price-amount {
  color: #F6F2EA !important;
}

.product-flex .price-loading {
  color: #C8C0B8 !important;
}

/* Technical specs tables on all product detail pages */
.product-flex table td {
  color: #FFFFFF !important;
}

/* Keep article-code cells gold where intended */
.product-flex table td[style*="#B8894A"],
.product-flex table td[style*="#b8894a"] {
  color: #B8894A !important;
}

/* Article-code badges: cleaner typography across pages */
.prod-tag,
.rel-card-body > span:first-child,
#spec-article {
  font-family: 'Montserrat', 'Helvetica Neue', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
}

/* ── “Bekijk onze andere producten” (rel-card grid on product pages) ─────────
   Softer than flat #000; thumbnails fill tile (no 16px inset); calmer type scale */
section:has(.rel-row) {
  background: linear-gradient(180deg, #11100f 0%, #141312 55%, #161514 100%) !important;
  border-top-color: rgba(184, 137, 74, 0.14) !important;
}

/* Kopschrift “Bekijk onze andere producten” — kleiner op alle pagina’s met rel-row */
section:has(.rel-row) h2 {
  font-size: clamp(1rem, 2.45vw, 1.28rem) !important;
  line-height: 1.22 !important;
  letter-spacing: 0.03em !important;
}

.rel-row {
  gap: 12px !important;
}

.rel-card {
  border: 1px solid rgba(184, 137, 74, 0.14) !important;
  background: #171615 !important;
}

.rel-card:hover {
  border-color: rgba(184, 137, 74, 0.45) !important;
}

.rel-card-img {
  background: radial-gradient(ellipse 85% 75% at 50% 42%, #22201e 0%, #161514 72%) !important;
}

.rel-card-img img {
  padding: 0 !important;
  box-sizing: border-box !important;
}

.rel-card-body {
  border-top-color: rgba(184, 137, 74, 0.12) !important;
}

.rel-card-body > span:first-child {
  font-size: clamp(1.05rem, 2.6vw, 1.35rem) !important;
}

.rel-card-body h3 {
  font-size: clamp(0.88rem, 2.5vw, 1rem) !important;
  line-height: 1.38 !important;
}

.rel-card-body > p {
  font-size: clamp(9px, 2.2vw, 10px) !important;
}