/* Jansma Haule – My Account */
:root{
  --jh-green:#476930;
  --jh-green-700:#3b5a28;
  --jh-text:#0b0b0b;
  --jh-muted:#6b7280;
  --jh-bg:#f6f7f5; /* subtiele achtergrond */
  --jh-radius:16px;
}

.woocommerce-account .woocommerce::after, .woocommerce-account .woocommerce::before {
  display: none !important;
}


/* Layout */
.jh-account .woocommerce{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items:start;
}
@media (max-width: 960px){
  .jh-account .woocommerce{ grid-template-columns: 1fr; }
}

/* Titel */
.jh-account .entry-title,
.jh-account .woocommerce h1{
  font-size: clamp(32px, 4.2vw, 72px);
  line-height: 1.05;
  margin: 0 0 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Navigatie (sidebar) */
.jh-account .woocommerce-MyAccount-navigation{
  background:#fff;
  border-radius: var(--jh-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 16px;
  position: sticky;
  top: 24px;
}
.jh-account .woocommerce-MyAccount-navigation ul{
  list-style:none;
  margin:0;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.jh-account .woocommerce-MyAccount-navigation li a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:12px;
  text-decoration:none;
  color: var(--jh-text);
  font-weight:600;
  transition: background .2s ease, color .2s ease, transform .06s ease;
}
.jh-account .woocommerce-MyAccount-navigation li a::before{
  content:"";
  inline-size:8px;
  block-size:8px;
  border-radius:999px;
  background: var(--jh-muted);
  flex: 0 0 8px;
}
.jh-account .woocommerce-MyAccount-navigation li a:hover{
  background:#f0f4ef;
  transform: translateY(-1px);
}
.jh-account .woocommerce-MyAccount-navigation .is-active a{
  background: var(--jh-green);
  color:#fff;
}
.jh-account .woocommerce-MyAccount-navigation .is-active a::before{
  background:#fff;
}

/* Contentkaart */
.jh-account .woocommerce-MyAccount-content{
  background:#fff;
  border-radius: var(--jh-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: clamp(18px, 2.2vw, 28px);
}

/* Tekst & links in content */
.jh-account .woocommerce-MyAccount-content p{
  font-size: 18px;
  line-height: 1.6;
  color: var(--jh-text);
}
.jh-account .woocommerce-MyAccount-content a{
  color: var(--jh-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.jh-account .woocommerce-MyAccount-content a:hover{
  color: var(--jh-green-700);
}

/* Tabellen (bestellingen) */
.jh-account table.shop_table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius: 12px;
}
.jh-account table.shop_table thead th{
  background:#f7faf7;
  color:#111;
  padding:14px;
  font-weight:700;
}
.jh-account table.shop_table tbody td{
  padding:14px;
  border-top:1px solid #eef2ed;
}

/* Knoppen */
.jh-account .woocommerce a.button,
.jh-account .woocommerce button.button,
.jh-account .woocommerce input.button{
  background: var(--jh-green);
  color:#fff;
  border:none;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight:700;
  cursor:pointer;
  transition: background .2s ease, transform .06s ease;
}
.jh-account .woocommerce a.button:hover,
.jh-account .woocommerce button.button:hover,
.jh-account .woocommerce input.button:hover{
  background: var(--jh-green-700);
  transform: translateY(-1px);
}

/* Formulieren (accountgegevens / adres) */
.jh-account .woocommerce form .form-row{
  margin-bottom:14px;
}
.jh-account .woocommerce form .form-row label{
  font-weight:700;
  display:block;
  margin-bottom:6px;
}
.jh-account .woocommerce form .input-text,
.jh-account .woocommerce form input[type="text"],
.jh-account .woocommerce form input[type="email"],
.jh-account .woocommerce form input[type="password"],
.jh-account .woocommerce form input[type="tel"],
.jh-account .woocommerce form textarea,
.jh-account .select2-container .select2-selection--single{
  width:100%;
  border:1px solid #e4e9e1;
  border-radius:12px;
  padding:12px 14px;
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.jh-account .woocommerce form .input-text:focus,
.jh-account .woocommerce form input:focus,
.jh-account .woocommerce form textarea:focus{
  border-color: var(--jh-green);
  box-shadow: 0 0 0 3px rgba(71,105,48,.15);
}

/* Notices */
.jh-account .woocommerce-message,
.jh-account .woocommerce-error,
.jh-account .woocommerce-info{
  border-radius: 12px;
  padding: 14px 16px;
}

/* =============== NAV CLEANUP & ACTIVE STATE FIX =============== */
body.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.woocommerce-account .content { padding: 40px 0; }

body.woocommerce-account .content h1 {
  margin-top: 0;
}

/* Reset ALLE iconen/markers die je theme toevoegt */
body.woocommerce-account .woocommerce-MyAccount-navigation li,
body.woocommerce-account .woocommerce-MyAccount-navigation li a{
  background-image: none !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a::after{
  content: none !important;
}

/* Basis link */
body.woocommerce-account .woocommerce-MyAccount-navigation li a{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 12px 42px; /* ruimte voor dot links */
  border-radius: 12px;
  text-decoration: none;
  color: var(--jh-text);
  font-weight: 600;
  line-height: 1.2;
  transition: background .2s ease, color .2s ease, transform .06s ease;
}

/* Eigen kleine dot links, exact gepositioneerd */
body.woocommerce-account .woocommerce-MyAccount-navigation li a::before{
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--jh-muted);
  transform: translateY(-50%);
}

/* Hover */
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  background: #f0f4ef;
  transform: translateY(-1px);
}

/* Actieve item: pill over de volledige rij; dot wordt wit */
body.woocommerce-account .woocommerce-MyAccount-navigation .is-active > a{
  background: var(--jh-green) !important;
  color: #fff !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation .is-active > a::before{
  background: #fff;
}

/* =============== LAYOUT / SPACING FINETUNE =============== */
body.woocommerce-account .content .woocommerce{
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

body.woocommerce-account .woocommerce-MyAccount-navigation{
  margin: 0 0 0 0; /* kleine top offset onder de H1 */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 16px;
      width: 100%;
}

body.woocommerce-account .woocommerce-MyAccount-content{
  grid-column: 2 / 3;
  width: 100%;
  max-width: none;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: clamp(18px, 2.2vw, 28px);
}

/* Reset “smalle tekstkolom” uit het theme in de content */
body.woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-account .woocommerce-MyAccount-content *{
  max-width: none !important;
  width: auto !important;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Optisch consistent lijnhoogte/spacing */
body.woocommerce-account .woocommerce-MyAccount-content p{
  margin: 0 0 12px;
  line-height: 1.6;
}

/* === Alleen dashboard (ingelogd) krijgt sidebar + grid === */
body.woocommerce-account.logged-in .content .woocommerce{
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
/* Content pas naar kolom 2 zetten als er echt een grid is */
body.woocommerce-account.logged-in .woocommerce-MyAccount-content{
  grid-column: 2 / 3;
}


/* ==================================================================
   Nova Septem - Mijn account op tablet en telefoon

   Het raster hierboven zou onder 960 pixels naar een kolom moeten, maar
   WooCommerce laat de navigatie en de inhoud zelf naast elkaar zweven.
   Die zweving wint, waardoor de tekstkolom zo smal werd dat elk woord op
   een eigen regel kwam. Hier zetten we dat hard recht.
   ================================================================== */

@media (max-width: 900px){

  .woocommerce-account .woocommerce,
  .jh-account .woocommerce{
    display: block !important;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content,
  .jh-account .woocommerce-MyAccount-navigation,
  .jh-account .woocommerce-MyAccount-content{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
    padding-left: 0;
    padding-right: 0;
  }

  .jh-account .woocommerce-MyAccount-navigation{
    position: static !important;
    padding: 10px !important;
  }

  /* Navigatie compacter: twee kolommen knoppen in plaats van een lange lijst. */
  .jh-account .woocommerce-MyAccount-navigation ul{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 4px !important;
  }

  .jh-account .woocommerce-MyAccount-navigation li{
    min-width: 0;
  }

  /* De uitlijning van link en bolletje expliciet terugzetten, anders schuift
     het bolletje over de tekst heen. */
  .jh-account .woocommerce-MyAccount-navigation li a{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 11px 12px !important;
    font-size: 14px !important;
    min-width: 0;
  }

  .jh-account .woocommerce-MyAccount-navigation li a::before{
    position: static !important;
    flex: 0 0 8px !important;
    inline-size: 8px;
    block-size: 8px;
    margin: 0 !important;
  }

  /* Titel niet groter dan nodig. */
  .jh-account .entry-title,
  .jh-account .woocommerce h1{
    font-size: 28px !important;
    margin-bottom: 16px !important;
  }

  /* Inhoud leesbaar houden. */
  .jh-account .woocommerce-MyAccount-content{
    padding: 16px !important;
  }

  .jh-account .woocommerce-MyAccount-content p,
  .jh-account .woocommerce-MyAccount-content li,
  .jh-account .woocommerce-MyAccount-content td{
    font-size: 14.5px;
    line-height: 1.6;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  /* Tabellen met bestellingen passen niet, dus horizontaal scrollen binnen
     het blok in plaats van de hele pagina laten uitrekken. */
  .jh-account .woocommerce-MyAccount-content table{
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 420px){
  .jh-account .woocommerce-MyAccount-navigation ul{
    grid-template-columns: 1fr;
  }
  .jh-account .entry-title,
  .jh-account .woocommerce h1{ font-size: 24px !important; }
}