/* Providerpagina's (/providers/<slug>) en productpagina's per provider. Kleuren en maten uit tokens.css. */

.pp-hero { background: linear-gradient(180deg, var(--tint-blue) 0%, var(--white) 100%); border-bottom: 1px solid var(--line-blue); padding: var(--sp-6) 0 var(--sp-6); }
.pp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-6); align-items: start; }
.pp-hero-main { display: flex; gap: var(--sp-5); align-items: flex-start; }
.pp-hero h1 { margin: 2px 0 var(--sp-3); font-size: var(--fs-page); }
.pp-hero .lead { max-width: 62ch; color: var(--ink); }
.pp-logo { flex: none; display: flex; align-items: center; justify-content: center; width: 132px; height: 96px; padding: var(--sp-3); background: var(--white); border: 1px solid var(--line-blue); border-radius: var(--radius); }
.pp-logo .pv-logo { max-width: 100%; max-height: 54px; height: auto; width: auto; }
.pp-logo .pv-logo--on-brand { background: #6a1b6d; padding: 6px 10px; border-radius: var(--radius-xs); }
.pp-logo .pv-name { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: 1.25rem; color: var(--navy); text-align: center; }
.pp-logo-sm { width: 104px; height: 72px; }
.pp-logo-sm .pv-logo { max-height: 40px; }
.pp-badges { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: 0; }
.pp-badges li { padding: 4px 11px; border: 1px solid var(--line-blue); border-radius: var(--radius-full); background: var(--white); color: var(--navy); font-size: var(--fs-meta); font-weight: var(--fw-semibold); }
.pp-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pp-facts { padding: var(--sp-4) var(--sp-5); background: var(--white); border: 1px solid var(--line-blue); border-radius: var(--radius-lg); }
.pp-facts h2 { margin: 0 0 var(--sp-2); }
.pp-facts dl, .pp-group dl { margin: 0; }
.pp-facts dl > div, .pp-group dl > div { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: var(--sp-3); padding: 9px 0; border-top: 1px solid var(--line); }
.pp-facts dl > div:first-child, .pp-group dl > div:first-child { border-top: 0; }
.pp-facts dt, .pp-group dt { color: var(--muted); font-size: var(--fs-meta); font-weight: var(--fw-semibold); }
.pp-facts dd, .pp-group dd { margin: 0; color: var(--ink); font-size: var(--fs-small); overflow-wrap: anywhere; }
.pp-group dd a, .pp-facts dd a { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-semibold); }

.pp-tabs { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; margin-top: var(--sp-5); padding-bottom: 2px; }
.pp-tabs a { flex: none; padding: 7px 14px; border: 1px solid var(--line-blue); border-radius: var(--radius-full); background: var(--white); color: var(--navy); font-size: var(--fs-meta); font-weight: var(--fw-semibold); }
.pp-tabs a:hover { border-color: var(--blue); color: var(--blue); }
.pp-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
.pp-group h2 { margin-top: 0; }

.pp-cats { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: 0; }
.pp-cats a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--line-blue); border-radius: var(--radius-sm); background: var(--white); color: var(--navy); font-weight: var(--fw-semibold); }
.pp-cats a span { padding: 1px 8px; border-radius: var(--radius-full); background: var(--tint-blue); color: var(--blue); font-size: var(--fs-meta); }
.pp-cats a[aria-current] { border-color: var(--blue); background: var(--blue); color: var(--white); }
.pp-cats a[aria-current] span { background: rgba(255, 255, 255, .2); color: var(--white); }
.pp-filters { margin-bottom: var(--sp-3); }
.pp-grid { align-items: stretch; }
.pp-card { display: flex; flex-direction: column; }
.pp-card > .btn { margin-top: auto; }
.pp-card.is-concept { border-style: dashed; }
.pp-card .card-media img { max-height: 190px; object-fit: contain; }
.pp-empty { max-width: 760px; }
.pp-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.pp-sources { margin: 0; padding-left: 18px; font-size: var(--fs-small); }
.pp-sources li { margin: 4px 0; overflow-wrap: anywhere; }

/* Productpagina */
.pp-item { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-5); align-items: start; margin-top: var(--sp-4); }
.pp-item-main { display: grid; gap: var(--sp-4); min-width: 0; }
.pp-item-aside { display: grid; gap: var(--sp-4); }
.pp-item-head { display: flex; gap: var(--sp-4); align-items: flex-start; }
.pp-item-head h1, .pp-phone h1 { margin: 2px 0 var(--sp-2); font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); }
.pp-item-sub { color: var(--muted); margin: 0 0 var(--sp-2); }
.pp-notice { padding: var(--sp-3) var(--sp-4); border: 1px dashed #e0a400; border-radius: var(--radius); background: #fff8e6; color: var(--ink); }
.pp-pricebox { border-color: var(--line-blue); }
.pp-price-dl { margin: 0 0 var(--sp-4); }
.pp-price-dl > div { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 9px 0; border-top: 1px solid var(--line); }
.pp-price-dl > div:first-child { border-top: 0; }
.pp-price-dl dt { color: var(--muted); }
.pp-price-dl dd { margin: 0; font-weight: var(--fw-semibold); color: var(--navy); text-align: right; }
.pp-price-dl .pp-total dt, .pp-price-dl .pp-total dd { color: var(--navy); font-weight: var(--fw-heading); font-size: 1.0625rem; }
.pp-small { font-size: var(--fs-meta); margin: var(--sp-2) 0 0; }
.pp-phone { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-5); align-items: center; padding: var(--sp-4); background: var(--white); border: 1px solid var(--line-blue); border-radius: var(--radius-lg); }
.pp-phone-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; background: var(--tint); border-radius: var(--radius); overflow: hidden; }
.pp-phone-media img, .pp-phone-media svg { max-width: 92%; max-height: 92%; width: auto; height: auto; object-fit: contain; }
.pp-storage { color: var(--blue); }
.pp-from { margin: var(--sp-2) 0 var(--sp-3); color: var(--muted); }
.pp-from strong { font-family: var(--font-heading); font-size: var(--fs-price); color: var(--navy); }
.pp-variants { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; }
.pp-variants li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--sp-3); background: var(--white); border: 1px solid var(--line-blue); border-radius: var(--radius); text-align: center; font-size: var(--fs-small); }
.pp-variants img, .pp-variants svg { width: auto; max-width: 100%; height: 110px; object-fit: contain; }
.pp-variants span { color: var(--muted); font-size: var(--fs-meta); }
#pp-offers td { vertical-align: top; }
/* Houdt absoluut gepositioneerde, verborgen koppen binnen de scrollcontainer (anders horizontale overflow). */
#aanbiedingen .table-wrap { position: relative; }
#pp-offers td:last-child { min-width: 150px; }
#pp-offers .btn { white-space: normal; line-height: 1.25; text-align: center; }

@media (max-width: 1099px) {
    .pp-hero-grid, .pp-item { grid-template-columns: minmax(0, 1fr); }
    .pp-facts { max-width: 640px; }
}
@media (max-width: 767px) {
    .pp-hero { padding: var(--sp-5) 0; }
    .pp-hero-main { flex-direction: column; gap: var(--sp-3); }
    .pp-logo { width: 112px; height: 76px; }
    .pp-groups, .pp-bottom { grid-template-columns: minmax(0, 1fr); }
    .pp-actions .btn { flex: 1 1 100%; justify-content: center; }
    .pp-phone { grid-template-columns: minmax(0, 1fr); }
    .pp-phone-media { max-width: 260px; margin: 0 auto; width: 100%; }
    .pp-facts dl > div, .pp-group dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .pp-item-head { flex-direction: column; }
    /* Aanbiedingentabel als kaarten (zelfde patroon als #offers-table) */
    #pp-offers thead { display: none; }
    #pp-offers, #pp-offers tbody, #pp-offers tr, #pp-offers td { display: block; width: 100%; }
    #pp-offers tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
    #pp-offers td { border: 0; padding: 5px 14px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; text-align: right; white-space: normal; }
    #pp-offers td::before { content: attr(data-label); flex: none; color: var(--muted); font-size: .85rem; text-align: left; }
    #pp-offers td:first-child { text-align: left; }
    #pp-offers td:last-child { display: block; }
    #pp-offers td:last-child .btn { width: 100%; white-space: normal; }
}

/* Uitgebreide providerpagina (provider-rich.php) */
.pp-hero-rich { padding: var(--sp-7) 0 var(--sp-6); }
.pp-rich-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-7); align-items: center; }
.pp-rich-id { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.pp-rich-id h1 { margin: 0; font-size: var(--fs-display); letter-spacing: var(--ls-display); line-height: var(--lh-tight); }
.pp-rich-id .eyebrow { margin: 0 0 4px; }
.pp-rich-intro { max-width: 56ch; margin: 0 0 var(--sp-4); }
.pp-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-5); padding: 0; }
.pp-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; background: var(--white); border: 1px solid var(--line-blue); border-radius: var(--radius-full); color: var(--navy); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.pp-chips li svg { color: var(--blue); }
.pp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.pp-stat { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-4) var(--sp-5); background: var(--white); border: 1px solid var(--line-blue); border-radius: var(--radius-lg); }
.pp-stat strong { font-family: var(--font-heading); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: var(--fw-heading); color: var(--navy); letter-spacing: var(--ls-heading); line-height: 1.1; }
.pp-stat span { color: var(--muted); font-size: var(--fs-meta); }
.pp-stat-src { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .75rem; }

.pp-subnav { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line-blue); }
.pp-subnav .container { display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; }
.pp-subnav a { flex: none; padding: 14px 14px 12px; border-bottom: 2px solid transparent; color: var(--navy); font-weight: var(--fw-semibold); font-size: var(--fs-small); }
.pp-subnav a:hover, .pp-subnav a[aria-current] { color: var(--blue); border-bottom-color: var(--blue); }

.pp-cards { columns: 3; column-gap: var(--sp-4); }
.pp-cards > .pp-card-info { break-inside: avoid; margin-bottom: var(--sp-4); }
.pp-card-info { padding: var(--sp-5); background: var(--white); border: 1px solid var(--line-blue); border-radius: var(--radius-lg); scroll-margin-top: 70px; }
.pp-card-info h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--sp-3); font-size: 1.0625rem; }
.pp-card-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--tint-blue); color: var(--blue); }
.pp-card-info dl { margin: 0; }
.pp-card-info dl > div { padding: 9px 0; border-top: 1px solid var(--line); }
.pp-card-info dl > div:first-child { border-top: 0; padding-top: 0; }
.pp-card-info dt { color: var(--muted); font-size: var(--fs-meta); font-weight: var(--fw-semibold); margin-bottom: 2px; }
.pp-card-info dd { margin: 0; color: var(--ink); font-size: var(--fs-small); overflow-wrap: anywhere; }
.pp-card-info dd a { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-semibold); }

.pp-offer-band { padding: var(--sp-7) 0; margin-top: var(--sp-6); background: var(--tint); border-top: 1px solid var(--line-blue); border-bottom: 1px solid var(--line-blue); scroll-margin-top: 50px; }
.pp-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--white); border: 1px solid var(--line-blue); border-radius: var(--radius); }
.pp-seg a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-sm); color: var(--navy); font-weight: var(--fw-semibold); }
.pp-seg a span { padding: 1px 8px; border-radius: var(--radius-full); background: var(--tint-blue); color: var(--blue); font-size: var(--fs-meta); }
.pp-seg a[aria-current] { background: var(--navy); color: var(--white); }
.pp-seg a[aria-current] span { background: rgba(255, 255, 255, .18); color: var(--white); }
.pp-seg-note { margin: var(--sp-2) 0 var(--sp-4); color: var(--muted); font-size: var(--fs-small); }
.pp-lines { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: 0; }
.pp-lines a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border: 1px solid var(--line-blue); border-radius: var(--radius-full); background: var(--white); color: var(--navy); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.pp-lines a small { color: var(--muted); font-weight: var(--fw-medium); }
.pp-lines a span { color: var(--blue); font-size: var(--fs-meta); }
.pp-lines a[aria-current] { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }

.pp-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.pp-plan { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); background: var(--white); border: 1px solid var(--line-blue); border-radius: var(--radius-lg); }
.pp-plan-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
.tag-line { background: var(--tint-blue); color: var(--navy-2); }
.tag-line-teens, .tag-line-kids { background: #fff3e6; color: #8a4200; }
.tag-combi { background: #e8f7ee; color: #0b6b38; }
.pp-plan-head { display: flex; flex-direction: column; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); color: var(--white); }
.pp-plan-data { font-family: var(--font-heading); font-size: 1.75rem; font-weight: var(--fw-heading); line-height: 1.1; }
.pp-plan-sub { font-size: var(--fs-meta); opacity: .85; }
.pp-plan-name { margin: 0; font-size: 1rem; line-height: 1.3; }
.pp-plan-name a { color: var(--navy); }
.pp-plan dl { margin: 0; }
.pp-plan dl > div { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 5px 0; font-size: var(--fs-small); border-top: 1px solid var(--line); }
.pp-plan dl > div:first-child { border-top: 0; }
.pp-plan dt { color: var(--muted); }
.pp-plan dd { margin: 0; color: var(--ink); font-weight: var(--fw-semibold); text-align: right; }
.pp-plan-price { padding: var(--sp-3); background: var(--tint); border-radius: var(--radius); }
.pp-plan-avg { display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px; }
.pp-plan-avg strong { font-family: var(--font-heading); font-size: var(--fs-price); color: var(--navy); }
.pp-plan-avg span { color: var(--muted); font-size: var(--fs-meta); }
.pp-plan-price dl > div { border-top-color: var(--line-blue); }
.pp-plan-total { display: flex; justify-content: space-between; margin: 6px 0 0; padding-top: 8px; border-top: 1px solid var(--line-blue); font-size: var(--fs-small); color: var(--navy); }
.pp-plan > .btn { margin-top: auto; }

.pp-concepts { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); background: var(--white); border: 1px dashed #e0a400; border-radius: var(--radius-lg); }
.pp-concepts summary { cursor: pointer; color: var(--navy); }
.pp-concepts p { color: var(--muted); font-size: var(--fs-small); }

@media (max-width: 1099px) {
    .pp-rich-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
    .pp-cards { columns: 2; }
    .pp-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .pp-hero-rich { padding: var(--sp-5) 0; }
    .pp-cards { columns: 1; }
    .pp-plan-grid { grid-template-columns: minmax(0, 1fr); }
    .pp-seg { display: flex; }
    .pp-seg a { flex: 1 1 auto; justify-content: center; }
    .pp-stat { padding: var(--sp-3) var(--sp-4); }
    .pp-concept-table thead { display: none; }
    .pp-concept-table, .pp-concept-table tbody, .pp-concept-table tr, .pp-concept-table td { display: block; width: 100%; }
    .pp-concept-table tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
    .pp-concept-table td { border: 0; padding: 3px 12px; }
    .pp-concept-table td::before { content: attr(data-label) ': '; color: var(--muted); font-size: .8rem; }
}