/* Jodoco – productkaarten: diersoorticonen en snelle weergave */

/* Diersoorticonen in de regel met de productnaam (vervangen het vaste icoon uit de template) */
.e-loop-item.jt-met-iconen .elementor-element-015ea94{ display:none !important; }
.jt-iconen{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; margin-left:auto; }
.jt-iconen img{ display:block; width:26px !important; height:26px !important; object-fit:contain; }

/* i-knop: rechtsboven op de kaart, buiten de foto (beweegt niet mee met de zoom) */
.jt-kaart{ position:relative !important; }
.jt-info{ position:absolute; z-index:4; top:12px; right:12px; width:34px; height:34px; padding:0 !important; border:0 !important; border-radius:50% !important;
  background:rgba(255,255,255,.94) !important; color:var(--jo-inkt,#1C1C52) !important; box-shadow:0 0 0 1px rgba(28,28,82,.08) !important; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font:500 italic 16px/1 Georgia,'Times New Roman',serif !important; text-transform:none !important;
  transition:background .25s ease, color .25s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.jt-info:hover, .jt-info:focus-visible{ background:var(--jo-groen,#65B32E) !important; color:#fff !important; transform:scale(1.08); outline:none; }

/* ---------- Snelle weergave (pop-up), zonder foto ---------- */
html.jt-vast{ overflow:hidden; }
.jt-modal{ position:fixed; inset:0; z-index:100002; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(14,14,40,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0; transition:opacity .3s ease; font-family:'Poppins',sans-serif; }
.jt-modal.is-open{ opacity:1; }
.jt-paneel{ position:relative; display:flex; flex-direction:column; width:min(620px,100%); max-height:calc(100vh - 48px); background:#fff; color:var(--jo-inkt,#1C1C52);
  border-top:4px solid var(--jo-navy,#2A2B7C); transform:translateY(16px) scale(.98); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.jt-modal.is-gewassen .jt-paneel{ border-top-color:var(--jo-groen-diep,#3E7B22); }
.jt-modal.is-open .jt-paneel{ transform:none; }

/* Kop */
.jt-kopbalk{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; padding:28px 32px 22px; border-bottom:1px solid var(--jo-lijn,#E3E4EC); }
.jt-soort{ display:flex; align-items:center; gap:10px; font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--jo-gedempt,#8A8AA0); }
.jt-modal .jt-naam{ margin:0 !important; font-family:'Poppins',sans-serif !important; font-size:30px !important; line-height:1.1 !important; font-weight:500 !important;
  letter-spacing:-.025em !important; color:var(--jo-inkt,#1C1C52) !important; text-transform:none !important; }
.jt-sluit{ flex:0 0 auto; width:40px; height:40px; padding:0 !important; border:1px solid var(--jo-lijn,#E3E4EC) !important; border-radius:50% !important;
  background:#fff !important; color:var(--jo-inkt,#1C1C52) !important; box-shadow:none !important; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .25s ease, color .25s ease, transform .35s ease; }
.jt-sluit:hover{ background:var(--jo-inkt,#1C1C52) !important; color:#fff !important; transform:rotate(90deg); }
.jt-sluit svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }

/* Toedieningsvorm als tags onder de titel */
.jt-vormen{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0 !important; padding:0 !important; }
.jt-vormen:empty{ display:none; }
.jt-vormen li{ margin:0 !important; display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px !important; border:1px solid var(--jo-lijn,#E3E4EC); border-radius:2px;
  font-size:12px; color:var(--jo-tekst,#55556A); }
.jt-vormen li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--jo-groen,#65B32E); }

/* Lijf: compact, één kolom met alleen de kern */
.jt-lijf{ display:flex; flex-direction:column; gap:22px; padding:24px 32px 26px; overflow:auto; }
.jt-modal .jt-lead{ margin:0 !important; font-size:16px; line-height:1.6; color:var(--jo-inkt,#1C1C52); }
.jt-laden{ height:160px; background:linear-gradient(90deg,#F1F1F6 25%,#E6E6EE 50%,#F1F1F6 75%); background-size:200% 100%; animation:jt-laad 1.2s linear infinite; }
@keyframes jt-laad{ to{ background-position:-200% 0; } }

/* Resultaat in één regel */
.jt-resultaat{ display:flex; align-items:center; gap:16px; padding:14px 18px; background:var(--jo-tint-dieren,#F4F5FD); border-left:3px solid var(--jo-groen,#65B32E); }
.jt-modal.is-gewassen .jt-resultaat{ background:#F1F7EE; }
.jt-res-getal{ font-size:36px; line-height:1; font-weight:500; letter-spacing:-.04em; color:var(--jo-inkt,#1C1C52); white-space:nowrap; }
.jt-res-getal b{ font-size:.5em; font-weight:500; color:var(--jo-groen,#65B32E); margin-left:2px; }
.jt-res-tekst{ display:flex; flex-direction:column; gap:2px; }
.jt-res-tekst strong{ font-size:14px; font-weight:500; line-height:1.35; color:var(--jo-inkt,#1C1C52); }
.jt-res-tekst small{ font-size:12px; color:var(--jo-gedempt,#8A8AA0); }

/* Voordelen */
.jt-voordelen{ list-style:none; display:flex; flex-direction:column; gap:10px; margin:0 !important; padding:0 !important; }
.jt-voordelen li{ position:relative; margin:0 !important; padding:0 0 0 26px !important; font-size:14.5px; line-height:1.45; color:var(--jo-inkt,#1C1C52); }
.jt-voordelen li::before{ content:""; position:absolute; left:0; top:3px; width:16px; height:16px; background:var(--jo-groen,#65B32E);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; }

/* Drie kerngegevens naast elkaar */
.jt-kern{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0 !important; border-top:1px solid var(--jo-lijn,#E3E4EC); }
.jt-kern > div{ padding:14px 14px 0 0; min-width:0; }
.jt-kern > div + div{ padding-left:14px; border-left:1px solid var(--jo-lijn,#E3E4EC); }
.jt-kern dt{ font-size:10.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--jo-gedempt,#8A8AA0); }
.jt-kern dd{ margin:4px 0 0 !important; font-size:13.5px; line-height:1.4; color:var(--jo-inkt,#1C1C52); }

/* Voet met acties */
.jt-voet{ display:flex; align-items:center; flex-wrap:wrap; gap:16px 28px; padding:18px 32px; border-top:1px solid var(--jo-lijn,#E3E4EC); background:#fff; }
.jt-knop{ position:relative; overflow:hidden; isolation:isolate; display:inline-flex; align-items:center; gap:12px; height:52px; padding:0 24px; background:var(--jo-groen,#65B32E);
  color:#fff !important; border-radius:2px; font-size:15px; font-weight:500; text-decoration:none !important; }
.jt-knop::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--jo-navy-diep,#1C1C52); transform:scaleX(0); transform-origin:right; transition:transform .55s cubic-bezier(.7,0,.2,1); }
.jt-knop:hover::before{ transform:scaleX(1); transform-origin:left; }
.jt-link{ position:relative; display:inline-flex; align-items:center; gap:10px; padding-bottom:5px; color:var(--jo-inkt,#1C1C52) !important; font-size:14px; font-weight:500; text-decoration:none !important; }
.jt-link::before, .jt-link::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; }
.jt-link::before{ background:rgba(28,28,82,.3); transform-origin:right; transition:transform .45s cubic-bezier(.7,0,.2,1); }
.jt-link::after{ height:2px; background:var(--jo-groen,#65B32E); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.7,0,.2,1); }
.jt-link:hover::before{ transform:scaleX(0); }
.jt-link:hover::after{ transform:scaleX(1); transition-delay:.12s; }
.jt-knop i, .jt-link i{ width:16px; height:16px; flex:0 0 16px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; }
.jt-link i{ background:var(--jo-groen,#65B32E); }

@media (max-width:767px){
  .jt-modal{ align-items:flex-end; padding:0; }
  .jt-paneel{ max-height:92vh; transform:translateY(40px); }
  .jt-kopbalk{ padding:20px 20px 16px; }
  .jt-modal .jt-naam{ font-size:24px !important; }
  .jt-lijf{ padding:18px 20px 22px; }
  .jt-kern{ grid-template-columns:minmax(0,1fr) !important; }
  .jt-voordelen{ grid-template-columns:minmax(0,1fr); }
  .jt-kern > div{ padding:12px 0; }
  .jt-kern > div + div{ padding-left:0; border-left:0; border-top:1px solid var(--jo-lijn,#E3E4EC); }
  .jt-voet{ padding:14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .jt-knop{ flex:1 1 auto; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){ .jt-modal, .jt-paneel, .jt-info, .jt-laden{ transition:none !important; animation:none !important; } }