@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

    :root{
      --text-color: #592C38;
      --bg: #F3ECDC;
      --nav-gap: 28px;
      --nav-font-size: 18px;
      --dropdown-bg: rgba(242,240,208,0.98);
      --dropdown-border: rgba(89,44,56,0.06);
      --logo-size: 260px;
    }

    html,body { height:100%; margin:0; }

    body {
      font-family: 'CaslonAntiqueRegular', 'EB Garamond', serif;
      background-color: var(--bg);
      color: var(--text-color);
      display:flex;
      flex-direction:column;
      position:relative;
      overflow-x:hidden;
    }

    /*----------------------------*/
    /*      NAVIGATION COPY       */
    /*----------------------------*/
    nav ul, nav a, nav button {
      font-family: 'CaslonAntiqueRegular','EB Garamond',serif !important;
    }
    .nav-wrap {
      display:flex;
      justify-content:center;
      padding:18px 24px;
      background:transparent;
    }
    nav ul {
      list-style:none;
      margin:0;
      padding:0;
      display:flex;
      gap:var(--nav-gap);
      align-items:center;
      font-size:var(--nav-font-size);
    }
    nav li { position:relative; }
    nav a, nav button {
      color:var(--text-color);
      text-decoration:none;
      background:none;
      border:none;
      padding:6px 8px;
      cursor:pointer;
      font:inherit;
    }
    nav a:hover, nav button:hover { opacity:0.7; }
    .dropdown {
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      top:100%;
      min-width:180px;
      background:var(--dropdown-bg);
      border:1px solid var(--dropdown-border);
      border-radius:6px;
      padding:8px 0;
      box-shadow:0 8px 20px rgba(0,0,0,0.04);
      display:none;
      z-index:200;
    }
    .dropdown a {
      display:block;
      padding:8px 20px;
      text-decoration:none;
      color:var(--text-color);
      font-size:16px;
    }
    .dropdown a:hover { background:rgba(89,44,56,0.06); }

    nav li:hover > .dropdown,
    nav li:focus-within > .dropdown { display:block; }

    @media(max-width:720px){
      nav ul { flex-wrap:wrap; gap:12px; }
      .dropdown { left:0; transform:none; min-width:150px; }
    }

    /*----------------------------*/
    /*          MAIN              */
    /*----------------------------*/
    /* --- WIJNEN PAGE — contact-style flipping logos --- */

.wine-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  margin-top: 200px;
}

.wine-flip-container {
  width: 300px;
  height: 300px;
  perspective: 1000px;
  position: relative;
}

.wine-flip {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1.3s ease;
}

.wine-flip:hover {
  transform: rotateY(180deg);
}

.wine-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.wine-face img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* same as Contact page */
}

.wine-back {
  transform: rotateY(180deg);
}



    /*----------------------------*/
    /*          FOOTER            */
    /*----------------------------*/
    footer {
      margin-top:auto;
      padding:10px 20px;
      font-size:14px;
      display:flex;
      justify-content:space-between;
      opacity:0.85;
    }
    
/* ------------------------------------------------ */
/* 📱 MOBILE LAYOUT FIXES FOR WIJNEN PAGE          */
/* ------------------------------------------------ */
@media (max-width: 720px) {

  /* Stack the wine cards vertically */
  .wine-row {
    flex-direction: column;
    gap: 40px;
    margin-top: 60px; /* reduce huge spacing */
    padding-bottom: 60px; /* Add space so content doesn't hide under footer */
  }

  /* Make flip cards scale to screen width */
  .wine-flip-container {
    width: 80vw;      /* responsive width */
    height: 80vw;     /* keep square ratio */
    max-width: 320px; /* optional limit */
    max-height: 320px;
  }

  /* Ensure images scale nicely */
  .wine-face img {
    object-fit: contain;
  }

/* show hamburger, hide desktop nav */
  .hamburger{
    display:flex;
    flex-direction:column;
    gap:3px;
    background:transparent;
    border:none;
    width:44px;
    height:44px;
    padding:8px;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    position:absolute;
    left:16px;
    top:12px;
    z-index:1100;
  }

  .hamburger .line{
    width:20px;
    height:4px;
    background:#592C38;
    border-radius:3px;
    transition:transform .25s ease, opacity .2s ease;
    display:block;
  }

  .hamburger[aria-expanded="true"] .line:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .hamburger[aria-expanded="true"] .line:nth-child(2){ opacity: 0; }
  .hamburger[aria-expanded="true"] .line:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  nav ul{ display:none; }

  .nav-wrap.open::before{
    content:'';
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.4);
    z-index:900;
    pointer-events:none;
  }

  .nav-wrap.open nav ul{
    display:flex;
    position:fixed;
    left:0;
    top:60px;
    bottom:0;
    width:280px;
    flex-direction:column;
    gap:8px;
    padding:16px;
    background:var(--bg);
    z-index:950;
    box-shadow:2px 0 10px rgba(0,0,0,0.1);
    overflow-y:auto;
    align-items:flex-start;
  }

  .nav-wrap.open nav ul li{ width:100%; }

  .nav-wrap.open nav ul a,
  .nav-wrap.open nav ul button{
    display:block;
    width:100%;
    padding:12px 14px;
    text-align:left;
    font-size:16px;
  }

  .nav-wrap.open nav ul .dropdown{
    position:static;
    transform:none;
    background:rgba(89,44,56,0.06);
    border:none;
    box-shadow:none;
    padding:0;
    display:flex !important;
    flex-direction:column;
    width:100%;
    margin-top:4px;
  }

  .nav-wrap.open nav ul .dropdown a{
    padding:8px 14px;
    font-size:14px;
  }
  
  footer {
      margin-top:auto;
      padding:10px 20px;
      font-size:12px;
      display:flex;
      justify-content:space-between;
      opacity:0.85;
  
}
  
}