.profile-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,1fr);gap:24px;align-items:start}
.profile-bread{min-width:0}
.single-bread{position:relative;width:100%;aspect-ratio:766/525;overflow:hidden;border:1px solid #986632;border-radius:15px}
.profile-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bread-layer{position:absolute;inset:0}
.bread-field,.bread-hat,.bread-track{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.bread-field{font-weight:700;color:#341908;font-size:clamp(13px,2vw,29px);line-height:1;text-shadow:0 1px 2px #ffe7bb}
.bread-field.name{font-family:Georgia,serif;font-size:clamp(20px,3vw,43px);background:none!important;box-shadow:none!important;text-shadow:0 1px 3px #ffecd0;z-index:2}
.bread-hat{z-index:3;pointer-events:none}
.bread-field.score-now,.bread-field.score-previous,.bread-field.delta{background:#fff1d6;border:2px solid #44220e;border-radius:30px;font-size:clamp(12px,2vw,29px)}
.bread-field.delta.up{color:#07851e}.bread-field.delta.down{color:#c41416}
.bread-field.pct{color:#fff4db;text-shadow:1px 2px 3px #2b1206;z-index:3;justify-content:flex-end;font-size:clamp(12px,1.9vw,28px)}
.bread-track{overflow:hidden;border:3px solid #b77800;border-radius:100px;background:#391a0b;padding:0;box-shadow:0 1px 3px #271204}
.bread-fill{height:100%;border-radius:100px;background:linear-gradient(#fff4aa,#ffe348 20%,#f5b900 60%,#c27c00)}
.details dt{font-weight:bold;color:#f9d59d;margin-top:15px}.details dd{margin:5px 0 0;line-height:1.6}
.reports{margin-top:26px}.report-item{padding:13px 0;border-top:1px solid #79502b}.report-item a,.back{color:#ffe2a7}
.back{display:inline-block;margin-bottom:10px}.baker-card{display:flex;flex-direction:column}.baker-card .button{align-self:start;margin-top:auto}
@media(max-width:850px){.profile-grid{grid-template-columns:1fr}.single-bread{max-width:766px}.bread-field{font-size:clamp(13px,4vw,29px)}.bread-field.name{font-size:clamp(20px,6vw,43px)}}

/* De zwarte labels hebben eigen posities uit de profielmapping. */
.bread-field.bread-label{background:#381807;color:#fff3df;border-radius:30px 0 0 30px;font-family:Georgia,serif;font-style:italic;font-weight:bold;font-size:clamp(12px,1.65vw,25px);text-shadow:none;z-index:1}
.bread-field.score-now,.bread-field.score-previous,.bread-field.delta{z-index:2}
.bread-field.name{white-space:nowrap;z-index:2}

/* Foto's links en PDF rechts bij broodbeoordelingen. */
.report-with-photos{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,1fr);gap:20px;align-items:center}
.report-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0}
.report-photos img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:9px;border:1px solid #986632}
@media(max-width:650px){.report-with-photos{grid-template-columns:1fr}}

/* Zwarte omlijning van de mutsen op Onze Bakkers. */
#baker-cards .baker-card h2 img{filter:drop-shadow(1px 0 0 #1b0b04) drop-shadow(-1px 0 0 #1b0b04) drop-shadow(0 1px 0 #1b0b04) drop-shadow(0 -1px 0 #1b0b04)}

/* Omlijning van het werkelijke muts-silhouet op elk bakkersprofiel. */
.bread-hat .profile-hat-icon{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(1px 0 0 #1b0b04) drop-shadow(-1px 0 0 #1b0b04) drop-shadow(0 1px 0 #1b0b04) drop-shadow(0 -1px 0 #1b0b04)}

.bread-track {
    justify-content: flex-start;
}

/* Optionele ronde profielfoto of smiley met de bestaande dynamische muts erboven. */
#baker-cards .baker-card h2{display:flex;align-items:center;gap:14px}
#baker-cards .baker-avatar{position:relative;width:94px;height:106px;flex:0 0 94px;display:block}
#baker-cards .baker-avatar-face{position:absolute;left:7px;bottom:0;width:80px;height:80px;border-radius:50%;background:#ffcf35;border:1px solid #c49a45;display:flex;align-items:center;justify-content:center;font-size:72px;line-height:1;overflow:hidden;box-sizing:border-box}
#baker-cards .baker-avatar-face img{width:100%;height:100%;object-fit:cover;display:block}
#baker-cards .baker-avatar-hat{position:absolute;left:-5px;top:-20px;width:104px;height:65px;z-index:2;pointer-events:none}
#baker-cards .baker-avatar-hat img{width:100%;height:100%;object-fit:contain;display:block}

/* Smiley vult de ronde avatar; de muts blijft dynamisch en overlapt de bovenrand. */
#baker-cards .baker-avatar-face{font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif}

/* Grotere bakkersmuts op de smiley */
#baker-cards .baker-avatar-hat {
    width: 168px;
    height: 117px;
    left: -37px;
    top: -55px;
}

/* Smiley of profielfoto vóór de bakkersmuts */
#baker-cards .baker-avatar-hat {
    z-index: 1;
}

#baker-cards .baker-avatar-face {
    z-index: 2;
}