/* =========================================================
   Maison Truyts — gedeelde stijl
   Lichte achtergrond · donkere serif · groene balken & knoppen
   (structuur naar Ronald Phillips)
   ========================================================= */

:root{
  --green:       #324b33;   /* kopbalk, herobalk, knoppen, accenten */
  --green-deep:  #28402a;   /* hover / donkerder groen */
  --green-dark:  #1f3220;   /* footer */
  --paper:       #f5f4ef;   /* pagina-achtergrond (licht) */
  --panel:       #ffffff;   /* witte kaarten/velden */
  --cream:       #f3efe6;   /* lichte tekst op groene balken */
  --cream-soft:  #d8d3c6;   /* gedempte lichte tekst op groen */
  --ink:         #18140f;   /* donkere tekst op licht */
  --ink-soft:    #5c574d;   /* gedempte donkere tekst */
  --gold:        #b08d57;   /* spaarzaam accent */
  --line:        #e3ddd0;   /* hairline op licht */
  --line-cream:  rgba(243,239,230,.22);
  --white:       #ffffff;

  /* aliassen voor oude kleurnamen in de pagina's */
  --bordeaux:       var(--green);
  --bordeaux-deep:  var(--green-deep);
  --bordeaux-soft:  var(--green);

  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;
  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--paper);
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.1; margin:0; letter-spacing:.01em; color:var(--ink); }

.eyebrow{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.32em; font-size:.72rem; font-weight:500; color:var(--green); }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }

/* Knoppen — vol groen met crème tekst (à la "View collection") */
.btn{
  display:inline-block; font-family:var(--sans); text-transform:uppercase; letter-spacing:.22em;
  font-size:.72rem; font-weight:500; padding:14px 32px;
  border:1px solid var(--green); color:var(--cream); background:var(--green);
  transition:all .3s ease; cursor:pointer;
}
.btn:hover{ background:var(--green-deep); border-color:var(--green-deep); }
/* lichte variant — voor gebruik óp groene balken */
.btn-light{ background:transparent; border:1px solid var(--cream); color:var(--cream); }
.btn-light:hover{ background:var(--cream); color:var(--green); border-color:var(--cream); }

/* ---------- Header (groene balk) ---------- */
.site-header{ position:sticky; top:0; z-index:50; background:var(--green); border-bottom:1px solid var(--line-cream); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:18px var(--gutter); max-width:var(--maxw); margin:0 auto; }
.brand{ text-align:center; line-height:1; }
.brand .name{ font-family:var(--serif); font-size:1.9rem; letter-spacing:.16em; color:var(--cream); }
.brand .tagline{ display:block; font-family:var(--sans); font-size:.58rem; letter-spacing:.34em; text-transform:uppercase; color:var(--cream-soft); margin-top:5px; }
.nav{ display:flex; gap:30px; align-items:center; }
.nav a{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; color:var(--cream); position:relative; padding:4px 0; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--gold); transition:width .3s ease; }
.nav a:hover::after, .nav a.active::after{ width:100%; }
.nav a.active{ color:var(--gold); }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; font-size:1.5rem; color:var(--cream); }

/* ---------- Hero (groene balk) ---------- */
.hero{ position:relative; height:72vh; min-height:460px; overflow:hidden; background:var(--green); }
.slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease; display:flex; align-items:flex-end; }
.slide.active{ opacity:1; }
.slide-bg{ position:absolute; inset:0; }
.slide-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,30,20,.45) 0%, rgba(20,30,20,.05) 60%); }
.slide-caption{ position:relative; z-index:2; color:var(--cream); padding:0 var(--gutter) 56px; max-width:var(--maxw); margin:0 auto; width:100%; }
.slide-caption .eyebrow{ color:var(--gold); }
.slide-caption h2{ font-size:clamp(2.2rem,5vw,4rem); margin:8px 0 18px; max-width:18ch; color:var(--cream); }
.hero-dots{ position:absolute; bottom:24px; right:var(--gutter); z-index:3; display:flex; gap:10px; }
.hero-dots button{ width:10px; height:10px; border-radius:50%; border:1px solid var(--cream); background:transparent; cursor:pointer; padding:0; }
.hero-dots button.active{ background:var(--cream); }

/* ---------- Secties (licht) ---------- */
.section{ padding:clamp(56px,8vw,110px) 0; }
.section-head{ text-align:center; max-width:720px; margin:0 auto clamp(36px,5vw,64px); }
.section-head h2{ font-size:clamp(2rem,4vw,3rem); margin:12px 0 16px; }
.section-head p{ color:var(--ink-soft); font-size:1.05rem; }
.divider{ width:54px; height:1px; background:var(--gold); margin:0 auto; }

/* ---------- Categorietegels (objecten op zwart) ---------- */
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.tile{ position:relative; aspect-ratio:3/4; overflow:hidden; }
.tile .art{ position:absolute; inset:0; transition:transform 1s ease; }
.tile:hover .art{ transform:scale(1.06); }
.tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 55%); }
.tile .label{ position:absolute; left:0; right:0; bottom:0; z-index:2; text-align:center; color:var(--cream); padding:26px 16px; }
.tile .label h3{ font-size:1.6rem; color:var(--cream); }
.tile .label span{ font-family:var(--sans); font-size:.64rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); }

/* ---------- Object van de maand ---------- */
.feature{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(30px,5vw,72px); }
.feature .art{ aspect-ratio:4/5; }
.feature-body .eyebrow{ color:var(--green); }
.feature-body h2{ font-size:clamp(1.9rem,3.5vw,2.8rem); margin:14px 0 10px; }
.feature-body p{ color:var(--ink-soft); }
.feature-body .specs{ list-style:none; padding:0; margin:18px 0 26px; font-size:.95rem; color:var(--ink-soft); }
.feature-body .specs li{ padding:6px 0; border-bottom:1px solid var(--line); }

/* ---------- About-strip (groene balk) ---------- */
.about-strip{ background:var(--green); text-align:center; }
.about-strip .eyebrow{ color:var(--gold); }
.about-strip h2{ font-size:clamp(1.9rem,4vw,3rem); margin:14px 0 20px; max-width:20ch; margin-inline:auto; color:var(--cream); }
.about-strip p{ max-width:60ch; margin:0 auto 28px; color:var(--cream-soft); }

/* ---------- Collectie-grid ---------- */
.collection-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); }
.object-card .art{ aspect-ratio:4/5; margin-bottom:16px; transition:opacity .4s ease; }
.object-card:hover .art{ opacity:.9; }
.object-card .maker{ font-family:var(--sans); font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:var(--green); }
.object-card h3{ font-size:1.3rem; margin:6px 0 4px; color:var(--ink); }
.object-card .meta{ font-size:.9rem; color:var(--ink-soft); }
.object-card .price{ font-family:var(--serif); font-size:1.05rem; margin-top:6px; color:var(--ink); }

/* filters */
.filters{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-bottom:48px; }
.filters button{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.18em; font-size:.66rem; padding:10px 20px; background:transparent; border:1px solid var(--line); cursor:pointer; color:var(--ink-soft); transition:all .3s ease; }
.filters button.active, .filters button:hover{ border-color:var(--green); color:var(--green); }

/* ---------- Over / Contact-pagina's ---------- */
.page-hero{ background:var(--paper); text-align:center; padding:clamp(48px,7vw,86px) var(--gutter) 4px; }
.page-hero .eyebrow{ color:var(--green); }
.page-hero h1{ font-size:clamp(2.2rem,4.5vw,3.4rem); margin-top:12px; color:var(--ink); }
.page-hero h1 + *, .page-hero .divider{ margin-top:18px; }

.prose{ max-width:760px; margin:0 auto; }
.prose p{ margin:0 0 1.3em; font-size:1.08rem; color:var(--ink-soft); }
.prose h2{ font-size:1.9rem; margin:1.6em 0 .5em; color:var(--green); }
.lead{ font-family:var(--serif); font-size:1.5rem; line-height:1.5; color:var(--ink); }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:start; }
.contact-info dl{ margin:0; }
.contact-info dt{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.22em; font-size:.66rem; color:var(--green); margin-top:24px; }
.contact-info dd{ margin:6px 0 0; font-size:1.05rem; color:var(--ink); }

form label{ display:block; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin:18px 0 6px; }
form input, form textarea{ width:100%; padding:12px 14px; border:1px solid var(--line); background:var(--panel); font-family:var(--sans); font-size:.95rem; color:var(--ink); }
form input:focus, form textarea:focus{ outline:none; border-color:var(--green); }

/* ---------- Footer (donkergroen) ---------- */
.site-footer{ background:var(--green-dark); color:var(--cream-soft); padding:clamp(48px,7vw,84px) 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; }
.site-footer .name{ font-family:var(--serif); font-size:1.7rem; color:var(--cream); letter-spacing:.12em; }
.site-footer h4{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.22em; font-size:.68rem; color:var(--gold); margin-bottom:14px; }
.site-footer a{ display:block; color:var(--cream-soft); padding:4px 0; font-size:.92rem; }
.site-footer a:hover{ color:var(--cream); }
.footer-bottom{ border-top:1px solid var(--line-cream); margin-top:48px; padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.78rem; color:var(--cream-soft); }

/* ---------- Placeholder art: objecten op zwart ---------- */
.art{ background:#0b0b0b; position:relative; }
.ph{ width:100%; height:100%; }
[class*="ph-"]{ background-color:#0b0b0b; background-repeat:no-repeat; background-position:center; background-size:46%; }
.ph-furniture{ background-image:linear-gradient(160deg,#171717,#080808),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' fill='none' stroke='%23b08d57' stroke-width='1.4'%3E%3Crect x='20' y='25' width='60' height='70'/%3E%3Cline x1='50' y1='25' x2='50' y2='95'/%3E%3Cline x1='20' y1='48' x2='80' y2='48'/%3E%3Cline x1='20' y1='72' x2='80' y2='72'/%3E%3C/svg%3E"); background-size:auto, 44%; }
.ph-silver{ background-image:linear-gradient(160deg,#171717,#080808),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' fill='none' stroke='%23b08d57' stroke-width='1.4'%3E%3Cpath d='M50 95 V55'/%3E%3Cpath d='M35 30 Q50 48 65 30'/%3E%3Cellipse cx='50' cy='98' rx='16' ry='4'/%3E%3C/svg%3E"); background-size:auto, 44%; }
.ph-ceramics{ background-image:linear-gradient(160deg,#171717,#080808),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' fill='none' stroke='%23b08d57' stroke-width='1.4'%3E%3Cpath d='M40 28 Q35 26 38 22 L62 22 Q65 26 60 28 Q72 50 64 78 Q60 96 50 96 Q40 96 36 78 Q28 50 40 28 Z'/%3E%3Cpath d='M38 52 Q50 60 62 52'/%3E%3C/svg%3E"); background-size:auto, 42%; }
.ph-art, .ph-painting{ background-image:linear-gradient(160deg,#171717,#080808),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' fill='none' stroke='%23b08d57' stroke-width='1.4'%3E%3Crect x='24' y='24' width='52' height='68'/%3E%3Crect x='30' y='30' width='40' height='56'/%3E%3Cpath d='M30 80 L44 60 L53 71 L62 55 L70 70'/%3E%3Ccircle cx='59' cy='44' r='4'/%3E%3C/svg%3E"); background-size:auto, 44%; }
.ph-feature{ background-image:linear-gradient(160deg,#1c1c1c,#080808),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' fill='none' stroke='%23b08d57' stroke-width='1.2'%3E%3Cpath d='M50 96 V44'/%3E%3Cellipse cx='50' cy='99' rx='18' ry='4'/%3E%3Cpath d='M50 44 L30 36 M50 44 L70 36'/%3E%3C/svg%3E"); background-size:auto, 50%; }
.ph-portrait{ background-image:linear-gradient(160deg,#171717,#080808),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' fill='none' stroke='%23b08d57' stroke-width='1.3'%3E%3Ccircle cx='50' cy='44' r='14'/%3E%3Cpath d='M28 92 Q28 66 50 66 Q72 66 72 92'/%3E%3C/svg%3E"); background-size:auto, 44%; }
.ph-jewelry{ background-image:linear-gradient(160deg,#171717,#080808),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' fill='none' stroke='%23b08d57' stroke-width='1.3'%3E%3Cpath d='M22 40 Q50 78 78 40'/%3E%3Cpath d='M50 64 l4 7 -4 7 -4 -7 z'/%3E%3Ccircle cx='50' cy='40' r='2'/%3E%3C/svg%3E"); background-size:auto, 44%; }
.ph-bronze{ background-image:linear-gradient(160deg,#171717,#080808),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' fill='none' stroke='%23b08d57' stroke-width='1.3'%3E%3Crect x='36' y='92' width='28' height='8'/%3E%3Cpath d='M50 92 V58'/%3E%3Ccircle cx='50' cy='40' r='9'/%3E%3Cpath d='M50 49 Q38 54 40 70 M50 49 Q62 54 60 70'/%3E%3C/svg%3E"); background-size:auto, 46%; }
.ph-african{ background-image:linear-gradient(160deg,#171717,#080808),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' fill='none' stroke='%23b08d57' stroke-width='1.3'%3E%3Cpath d='M40 22 Q60 22 62 40 Q66 70 50 96 Q34 70 38 40 Q40 28 40 22 Z'/%3E%3Cpath d='M50 30 V92'/%3E%3C/svg%3E"); background-size:auto, 42%; }
.ph-chinese{ background-image:linear-gradient(160deg,#171717,#080808),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' fill='none' stroke='%23b08d57' stroke-width='1.3'%3E%3Cpath d='M44 26 Q42 22 50 22 Q58 22 56 26 Q56 32 52 34 Q66 42 66 66 Q66 92 50 96 Q34 92 34 66 Q34 42 48 34 Q44 32 44 26 Z'/%3E%3C/svg%3E"); background-size:auto, 40%; }
.ph-islamic{ background-image:linear-gradient(160deg,#171717,#080808),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' fill='none' stroke='%23b08d57' stroke-width='1.3'%3E%3Cpath d='M32 94 V52 Q32 28 50 20 Q68 28 68 52 V94'/%3E%3Cpath d='M42 52 H58 V68 H42 Z'/%3E%3Cpath d='M50 48 L62 60 L50 72 L38 60 Z'/%3E%3C/svg%3E"); background-size:auto, 42%; }
.ph-gems{ background-image:linear-gradient(160deg,#171717,#080808),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' fill='none' stroke='%23b08d57' stroke-width='1.3'%3E%3Cpath d='M30 50 L42 34 H58 L70 50 L50 92 Z'/%3E%3Cpath d='M30 50 H70'/%3E%3Cpath d='M42 34 L46 50 M58 34 L54 50 M46 50 L50 92 M54 50 L50 92'/%3E%3C/svg%3E"); background-size:auto, 42%; }

/* ---------- Object-detailpagina ---------- */
.breadcrumb{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:28px; }
.breadcrumb a{ color:var(--ink-soft); }
.breadcrumb a:hover{ color:var(--green); }
.breadcrumb span{ color:var(--green); }
.object-detail{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,5vw,64px); align-items:start; }
.detail-gallery .main-img{ aspect-ratio:4/5; background:#0b0b0b; overflow:hidden; }
.detail-gallery .main-img img{ width:100%; height:100%; object-fit:cover; }
.detail-thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.detail-thumbs button{ width:72px; height:88px; padding:0; border:1px solid var(--line); background:#0b0b0b; cursor:pointer; overflow:hidden; }
.detail-thumbs button.active{ border-color:var(--green); }
.detail-thumbs img{ width:100%; height:100%; object-fit:cover; }
.detail-info .maker{ font-family:var(--sans); font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--green); }
.detail-info h1{ font-size:clamp(1.7rem,3.2vw,2.6rem); margin:10px 0 8px; }
.detail-info .sub{ color:var(--ink-soft); font-size:1.05rem; margin-bottom:20px; }
.detail-info .status-badge{ display:inline-block; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; padding:5px 12px; border:1px solid var(--green); color:var(--green); margin-bottom:20px; }
.detail-info .price{ font-family:var(--serif); font-size:1.4rem; color:var(--ink); margin:8px 0 22px; }
.detail-info .description{ color:var(--ink-soft); line-height:1.8; margin-bottom:22px; }
.detail-info .specs{ list-style:none; padding:0; margin:18px 0 22px; font-size:.95rem; color:var(--ink-soft); }
.detail-info .specs li{ padding:7px 0; border-bottom:1px solid var(--line); }
.enquiry-box{ border:1px solid var(--line); padding:24px; background:var(--panel); margin-top:8px; }
.enquiry-box h3{ font-family:var(--serif); color:var(--green); font-size:1.3rem; margin-bottom:6px; }

/* ---------- Taalkiezer (in groene header) ---------- */
.lang-switch{ position:relative; margin-left:22px; }
.lang-btn{ display:flex; align-items:center; gap:7px; background:transparent; border:1px solid var(--line-cream); cursor:pointer; font-family:var(--sans); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); padding:8px 12px; transition:all .3s ease; }
.lang-btn:hover{ border-color:var(--cream); color:var(--cream); }
.lang-btn .globe{ font-size:.95rem; } .lang-btn .caret{ font-size:.6rem; opacity:.7; }
.lang-menu{ position:absolute; top:calc(100% + 8px); right:0; z-index:80; background:var(--panel); border:1px solid var(--line); box-shadow:0 18px 50px rgba(0,0,0,.18); width:230px; max-height:60vh; overflow:auto; padding:8px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .25s ease; }
.lang-switch.open .lang-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-menu > button{ display:block; width:100%; text-align:left; background:transparent; border:none; cursor:pointer; font-family:var(--sans); font-size:.85rem; color:var(--ink); padding:9px 12px; }
.lang-menu > button:hover{ background:var(--paper); color:var(--green); }
.lang-menu > button.active{ color:var(--green); font-weight:500; }
.lang-all{ border-top:1px solid var(--line); margin-top:8px; padding:12px 12px 6px; }
.lang-all > span{ display:block; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
.lang-all-box .goog-te-combo{ width:100%; padding:9px 10px; border:1px solid var(--line); background:var(--white); font-family:var(--sans); font-size:.85rem; color:var(--ink); cursor:pointer; }

.goog-te-banner-frame, .skiptranslate{ display:none !important; }
body{ top:0 !important; position:static !important; }
#goog-gt-tt, .goog-te-balloon-frame{ display:none !important; }
.goog-text-highlight{ background:none !important; box-shadow:none !important; }
font[style]{ background:none !important; box-shadow:none !important; }

[dir="rtl"] .nav a::after{ left:auto; right:0; }
[dir="rtl"] .header-inner{ flex-direction:row-reverse; }
[dir="rtl"] .slide-caption, [dir="rtl"] .prose, [dir="rtl"] .feature-body, [dir="rtl"] .contact-info{ text-align:right; }
[dir="rtl"] .lang-menu{ right:auto; left:0; }
[dir="rtl"] .lang-menu > button{ text-align:right; }
[dir="rtl"] .footer-bottom{ flex-direction:row-reverse; }

@media (max-width:960px){
  .tiles{ grid-template-columns:repeat(2,1fr); }
  .collection-grid{ grid-template-columns:repeat(2,1fr); }
  .feature, .two-col{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .nav{ position:fixed; inset:0 0 0 auto; width:min(78vw,320px); background:var(--green); flex-direction:column; align-items:flex-start; padding:90px 32px; gap:22px; transform:translateX(100%); transition:transform .4s ease; box-shadow:-20px 0 60px rgba(0,0,0,.3); }
  .nav.open{ transform:translateX(0); }
  .nav-toggle{ display:block; z-index:60; }
  .header-inner{ position:relative; }
  .tiles, .collection-grid, .footer-grid{ grid-template-columns:1fr; }
  .brand .name{ font-size:1.5rem; }
}