/* ==========================================================================
   Pakket pages — SHARED mobile styles (all 5 age pakketten)
   Prefix: kpm-pakket-  (accent via --pakket-accent / --pakket-on-accent, set per page by the D2 accent file)
   Depends on shared.css
   ========================================================================== */

/* --- Page title --- */
.kpm-pakket-title {
    padding: 24px 20px 20px;
    text-align: center;
}
.kpm-pakket-title h1 {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 32px;
    color: var(--color-text);
    margin: 0 0 12px;
    line-height: 1.05;
}
.kpm-pakket-title__sub {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    line-height: 1.4;
}
.kpm-pakket-title__price {
    color: var(--color-primary);
}

/* --- Hero — accent card --- */
.kpm-pakket-hero {
    padding: 20px 20px 24px;
    position: relative;
}
.kpm-pakket-hero__card {
    position: relative;
    background: var(--pakket-accent);
    border-radius: var(--radius-card);
    padding: 40px 24px 32px;
    color: var(--pakket-on-accent);
}
.kpm-pakket-hero__badge {
    position: absolute;
    top: -16px;
    left: 56px;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: var(--color-white);
    border: 5px solid var(--pakket-accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px;
    text-align: center;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.kpm-pakket-hero__badge-label {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    margin-bottom: 4px;
    color: var(--color-primary);
}
.kpm-pakket-hero__badge-amount {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 34px;
    line-height: 1;
    color: var(--color-text);
}
.kpm-pakket-hero__photo {
    margin: 0;
    line-height: 0;
}
.kpm-pakket-hero__photo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}
.kpm-pakket-hero__heading {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.15;
    color: var(--pakket-on-accent);
    margin: 20px 0 16px;
}
.kpm-pakket-hero__text {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--pakket-on-accent);
    line-height: 1.6;
    margin: 0;
}

/* --- Body text (white) --- */
.kpm-pakket-content {
    padding: 32px 44px 24px;
}
.kpm-pakket-content p {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.6;
    margin: 0 0 14px;
}
.kpm-pakket-content p:last-child {
    margin-bottom: 0;
}

/* --- Bookshelf (uses shared-bookshelf, styled like over-page) --- */
.kpm-pakket-shelf {
    text-align: center;
    padding: 0 16px 16px;
}
.kpm-pakket-shelf__heading {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.15;
    color: var(--color-text);
    margin: 0 0 6px;
}
.kpm-pakket-shelf__swipe {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--color-grey-mid);
    margin: 0 0 16px;
}
.kpm-pakket-shelf .kph-bookshelf {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    overflow: hidden;
}
.kpm-pakket-shelf .kph-bookshelf__edge {
    margin-left: -20px;
    margin-right: -20px;
}
.kpm-pakket-shelf .kph-bookshelf__books {
    padding-left: 16px;
    padding-right: 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.kpm-pakket-shelf .kph-bookshelf__books::-webkit-scrollbar {
    display: none;
}

/* --- Switch CTA (grey card) --- */
.kpm-pakket-switch {
    padding: 24px 44px 48px;
}
.kpm-pakket-switch__card {
    position: relative;
    background: #ECE8E3;
    border-radius: var(--radius-card);
    padding: 20px 20px 28px;
    text-align: center;
}
.kpm-pakket-switch__text {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-text);
    line-height: 1.5;
    margin: 0 0 16px;
}
.kpm-pakket-switch__btn {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 18px;
    padding: 8px 32px;
    border: none;
    border-radius: var(--radius-btn);
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;
}


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  STANDARD PAKKET-PAGE LAYOUT — mobile (Phase 1: prentenboek)           ║
   ║  kpm-pakket-collectie / kpm-pakket-order / kpm-pakket-brievenbus       ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

/* --- Collectie hero — accent card. Verbatim kpbm-hero (donor) recoloured;
   the donor mobile card has NO price badge (Dick revision 1c).
   Bottom padding 36px + the following .kpm-pakket-hero's own 20px top = 56px
   gap, matching the dreumes mobile hero→content spacing (24px + 32px). --- */
.kpm-pakket-collectie {
    /* padding-top carries the room above the card for the half-out price badge:
       overflow-x:hidden forces overflow-y to "auto" (CSS spec), which would clip
       the badge's upper half. 44px keeps the badge (top:-40px) inside the padded
       box — mirrors the nijntje hero (.kpnm-hero). Bottom 36px unchanged (the
       gap-to-next-hero noted above). */
    padding: 44px 20px 36px;
    margin-top: 8px;
    overflow-x: hidden;
}
.kpm-pakket-collectie__card {
    position: relative;
    background: var(--pakket-accent);
    border-radius: var(--radius-card);
    padding: 48px 20px 24px;
    color: var(--pakket-on-accent);
    overflow: visible;
}
/* Prijsknaller-cirkel op mobiel — gecentreerd, half-in/half-out op de bovenrand
   van de kaart, IDENTIEK aan de nijntje-referentie (.kpnm-hero__price). Was
   top-right binnen de kaart (Willem #5); uitgelijnd op nijntje 2026-06-23. */
.kpm-pakket-collectie__price {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid var(--pakket-accent);
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 3;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
.kpm-pakket-collectie__price-amount {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 21px;
    color: var(--color-text);
    line-height: 1.1;
}
.kpm-pakket-collectie__price-text {
    display: block;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 9px;
    color: var(--color-text);
    line-height: 1.15;
}
.kpm-pakket-collectie__books {
    margin: 0 -40px 20px;
    line-height: 0;
}
.kpm-pakket-collectie__books img {
    width: 100%;
    height: auto;
    display: block;
}
.kpm-pakket-collectie__desc {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--pakket-on-accent);
    line-height: 1.6;
    margin: 0 0 20px;
}
.kpm-pakket-collectie__desc p { margin: 0 0 14px; }
.kpm-pakket-collectie__desc p:last-child { margin-bottom: 0; }
/* Willem #4/#10: the bold first paragraph (font-weight:700, Nudica-bold) read as
   a second font next to the regular paragraphs. Unify to the body weight so the
   pakket text is one consistent font; inline <strong> still emphasises words. */
.kpm-pakket-collectie__btn {
    display: block;
    width: 100%;
    background: #FF4000;
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 22px;
    padding: 6px 20px;
    border: 2px solid var(--color-white);
    border-radius: var(--radius-btn);
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
}
.kpm-pakket-collectie__korting {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    color: var(--pakket-on-accent);
    text-align: center;
    line-height: 1.4;
    margin: 12px 0 0;
}

/* --- Bestelblok — prijsknaller-line + shared order form --- */
.kpm-pakket-order {
    padding: 24px 20px 100px;
}
.kpm-pakket-order__price {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 20px;
    color: var(--color-text);
    text-align: center;
    line-height: 1.25;
    margin: 0 0 24px;
}
.kpm-pakket-order .kph-order-form__badge {
    left: 50%;
    transform: translateX(-50%);
    width: 170px;
    height: 170px;
    border-width: 5px;
}
.kpm-pakket-order .kph-order-form__section-title {
    font-family: var(--font-body);
    font-weight: 700;
    margin-top: 48px;
}
.kpm-pakket-order .kph-order-form__submit-wrap {
    text-align: center;
}
.kpm-pakket-order .kph-order-form__submit {
    width: auto;
    padding: 12px 48px;
    border-width: 2px;
}
.kpm-pakket-order .kph-order-form {
    overflow: visible;
    border-radius: 0;
}

/* --- Brievenbus — beige card with composite + heading + sub --- */
.kpm-pakket-brievenbus {
    padding: 8px 20px 24px;
    overflow-x: hidden;
}
.kpm-pakket-brievenbus__card {
    background: var(--color-grey-warm);
    border-radius: var(--radius-card);
    padding: 32px 16px 16px;
    text-align: left;
}
.kpm-pakket-brievenbus__books {
    /* Willem (Phase-2 brief, item C): de afbeelding viel op mobiel BUITEN het
       kader — de -40px zijmarges duwden hem voorbij de kaartrand (kaart-padding
       is maar 16px). Binnen het kader: geen negatieve marges. Gedeeld blok —
       geldt automatisch ook voor prentenboeken.
       Willem batch #5: de afbeelding staat nu ONDER de tekst → marge boven. */
    margin: 20px 0 0;
    line-height: 0;
}
.kpm-pakket-brievenbus__books img {
    width: 100%;
    height: auto;
    display: block;
}
.kpm-pakket-brievenbus__heading {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 21px;
    color: var(--color-text);
    line-height: 1.2;
    margin: 0 0 20px;
}
.kpm-pakket-brievenbus__sub {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.6;
    margin: 0;
}