/* ======================================================================
   Jake's Beer – Untappd CSS
   - Product shortcode  : [jb_untappd_checkins]  → .jb-untappd-*
   - Homepage wall      : [jb_untappd_wall]      → .jb-untappd-wall-*
   Gescheiden namespaces zodat styles elkaar niet beïnvloeden.
   ====================================================================== */


/* ----------------------------------------------------------------------
   1) PRODUCT SHORTCODE  [jb_untappd_checkins]  (exact zoals screenshot)
   - altijd stacked (1 per rij, ook op desktop)
   - vierkante foto + afgeronde hoeken
   - groene, ronde sterren
   - oranje tekstlink "Bekijk check‑in"
   ---------------------------------------------------------------------- */

/* 1 per rij op álle schermen */
.jb-untappd-list{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  width: 100%;
}

/* transparante ‘kaart’ (géén border/schaduw) */
.jb-untappd-card{
  background:transparent;
  padding:6px 6px 4px;
  text-align:center;
}

/* foto: vierkant + afgerond (force aspect) */
.jb-untappd-photo{
  width:140px; height:140px;        /* bewust vast zoals in je ontwerp */
  aspect-ratio:1/1;                 /* vangt externe styles af */
  object-fit:cover;
  border-radius:20px;
  display:block;
  margin:8px auto 14px;
}

/* naam (kleur komt uit theme) */
.jb-untappd-name{
  font-size:1.6rem;
  margin:0 0 8px;
}

/* GROENE RONDE STERREN ************************************************** */
.jb-untappd-stars{
  display:flex; justify-content:center; gap:8px;
  margin:6px 0 12px;
}
.jb-untappd-star{
  width:24px; height:24px; border-radius:50%;
  background:#f5a623;                 /* goud */
  color:#fff;                          /* witte ster */
  display:flex; align-items:center; justify-content:center;
  font-size:14px; line-height:1;
  box-shadow:0 1px 0 rgba(0,0,0,.06) inset;
}
.jb-untappd-star--empty{
  background:#eee3d7;                  /* licht cirkeltje */
  color:#c9b9a8;                        /* zachte ster */
}

/* teksten */
.jb-untappd-text{ 
margin:10px 0 12px; 
font-size: 14px;
font-style: italic;
}

.jb-untappd-wherewhen{ 
margin:8px 0 14px; 
font-size: 14px;
color: #777;
}

/* Zet quotes rond de user-tekst en geef ’m subtiele stijl */
.jb-untappd-text{
  font-style: italic;
  quotes: "“" "”" "‘" "’";
}
.jb-untappd-text::before{ content: open-quote; }
.jb-untappd-text::after { content: close-quote; }

/* Zelfde voor de wall-kaartjes, als je die ook wil quoten
.jb-untappd-wall-text{
  font-style: italic;
  quotes: "“" "”" "‘" "’";
}
.jb-untappd-wall-text::before{ content: open-quote; }
.jb-untappd-wall-text::after { content: close-quote; }
 */

/* ORANJE tekstlink (geen button) — hard oranje zodat hij niet ‘donker’ erft */
.jb-untappd-actions .jb-untappd-link{
  --jb-accent: #ff6a00;               /* fall-back oranje */
  color: var(--jb-accent, #ff6a00) !important;
  text-decoration: underline;
  font-weight: 600;
  font-size: 14px;
}
.jb-untappd-actions .jb-untappd-link:hover{
  filter: brightness(1.05);
}

/* compact op small phones */
@media (max-width:480px){
  .jb-untappd-photo{ width:120px; height:120px; border-radius:16px; }
  .jb-untappd-star{ width:32px; height:32px; font-size:18px; }
  .jb-untappd-list{ gap:24px; }
}


/* ----------------------------------------------------------------------
   2) HOMEPAGE WALL  [jb_untappd_wall]  (blijft zoals hij is)
   - staggered, vierkante foto’s, geen border/schaduw
   ---------------------------------------------------------------------- */

.jb-untappd-wall{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:24px;
  align-items:start;
}

/* speels stagger-effect */
.jb-untappd-wall-card:nth-child(2n){ margin-top:28px; }

@media (max-width:1200px){
  .jb-untappd-wall{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:992px){
  .jb-untappd-wall{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .jb-untappd-wall-card:nth-child(2n){ margin-top:22px; }
}
@media (max-width:720px){
  .jb-untappd-wall{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .jb-untappd-wall-card:nth-child(2n){ margin-top:0px; }
}
@media (max-width:480px){
  .jb-untappd-wall{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .jb-untappd-wall-card:nth-child(2n){ margin-top:0px; }
  /* small phones: max 4 tegels */
  .jb-untappd-wall > :nth-child(n+5){ display:none; }
}

/* transparant; geen border/schaduw */
.jb-untappd-wall-card{ background:transparent; border-radius:0; box-shadow:none; }

/* vierkante foto */
.jb-untappd-wall-figure{
  position:relative; overflow:hidden; margin:0 0 10px 0;
  border-radius:18px; aspect-ratio:1/1;
}
.jb-untappd-wall-figure img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:18px;
  aspect-ratio: 1/1;
}

.jb-untappd-wall-meta{ text-align:center; padding:0; }
.jb-untappd-wall-name{ font-size:1.1rem; /* margin:6px 0 6px; */ margin:0px;}

/* sterren in de wall: zelfde look, iets compacter */
.jb-untappd-wall .jb-untappd-stars{ justify-content:center; gap:7px; margin:2px 0 12px; }
.jb-untappd-wall .jb-untappd-star{
  width:20px; height:20px; border-radius:50%;
  background:#f5a623; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:12px;
}
.jb-untappd-wall .jb-untappd-star--empty{ background:#eee3d7; color:#c9b9a8; }

.jb-untappd-wall-text{ font-size:.80rem; margin:4px 0 8px; 
color: #777;}

/* gewone tekstlink (erft theme-kleur) */
.jb-untappd-wall-actions .jb-untappd-wall-link{
  text-decoration:underline;
  color:#555;
  font-size:0.80rem;
}

/* Toon op mobiel (≤600px) maximaal 4 tegels in de homepage wall */
@media (max-width: 600px) {
  /* pak elk direct grid‑item, ongeacht class/markup */
  .jb-untappd-wall > *:nth-of-type(n+5) {
    display: none !important;
  }
}

/* iets strikter voor heel smalle schermen */
@media (max-width: 480px) {
  .jb-untappd-wall > *:nth-of-type(n+5) {
    display: none !important;
  }
}

/* 1) Zet de info­regel naast elkaar */
.single-product .desc{
  display: flex;
  align-items: center;      /* verticaal uitlijnen */
  gap: 12px;                /* ruimte tussen label en sterren/tekst */
  flex-wrap: wrap;          /* mag afbreken op smalle schermen */
}

/* 2) Zorg dat het biertype-label zichzelf niet 100% breed maakt */
.single-product .desc .jakesbeer-label-wrapper{
  display: inline-flex;     /* of 'flex' als je binnenin ook wilt centreren */
  margin: 0;                /* eventuele marges weghalen */
}

/* 3) Sterren netjes op één hoogte en als ‘blokje’ */
.single-product .desc .jb-untappd-stars-inline{
  display: inline-flex;
  gap: 2px;
  line-height: 1;
  color: #f5a623;
}

/* (optioneel) als je ergens een <br> tussen hebt sluipen: */
.single-product .desc br{ display:none; }

.jb-title-score-untappd-total {
font-size: 14px;
line-height: 18px;
color: #2c2c2c;
font-weight: bold;
  transition: 0.3s;

}

.jb-title-score-untappd {
font-size: 14px;
line-height: 18px;
color: #6B5C50;
  transition: 0.3s;

}

.untappd-score .desc {
    justify-content: center;
    text-align: center;
}

/* basis: link erft z’n kleur (en geen underline) */
.jb-untappd-stars-hero a:hover {
  color: inherit;
  text-decoration: none;
}

/* HOVER – verander de kleur van beide spans binnen de link */
.jb-untappd-stars-hero a:hover .jb-title-score-untappd,
.jb-untappd-stars-hero a:hover .jb-title-score-untappd-total {
  color: #f5a623 !important;
  text-decoration: none !important;
  transition: 0.3s;
}

/* (optioneel) focus‑toegankelijkheid */
.jb-untappd-stars-hero a:focus-visible .jb-title-score-untappd,
.jb-untappd-stars-hero a:focus-visible .jb-title-score-untappd-total {
  outline: none;
  text-decoration: none;
    transition: 0.3s;

}

.jb-untappd-product-summary::before {
  content: "\f405";
  font-family: "Font Awesome 5 Brands"; /* aanhalingstekens verbeteren compatibiliteit */
  font-weight: 400;                     /* zorgt dat ‘Brands’ icoon juist rendert */
  display: inline-block;                /* voorkomt baseline-glitches */
  margin-right: 8px;                    /* iets subtieler dan 10px */
  font-style: normal;                   /* voorkomt italic-erfing */
  speak: none;                          /* voor toegankelijkheid / screenreaders */
}

p.jb-untappd-product-summary {
    margin: 10px 0px 0px 0px !important;
}