/*
 * Productpagina op de telefoon: compacter, meer als een app.
 *
 * Alleen tot 700px breed, en per stap aan of uit in Progenion Thema →
 * Productpagina mobiel. Elke stap hangt aan een eigen bodyklasse:
 *   pro-m-specs     specificaties als compacte lijst
 *   pro-m-collapse  lange teksten ingeklapt met "Lees verder"
 *   pro-m-reviews   eerst drie reviews, formulier op verzoek
 *   pro-m-appbar    tabbalk die meeloopt en een vaste koopbalk onderin
 *   pro-m-compact   voordelen en service als tegels, strakkere witruimte
 * Uitzetten = de klasse verdwijnt; de pagina is dan precies zoals daarvoor.
 */

/* Knoppen die het script toevoegt, alleen op de telefoon zichtbaar. */
.pro-m-more,
.pro-m-specs-toggle,
.pro-m-buybar { display: none; }

@media (max-width: 700px) {
  /* Gedeelde knop "Lees verder" / "Alles tonen". */
  .pro-m-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    margin: 10px 0 0;
    padding: 9px 14px;
    border: 1px solid rgba(8, 121, 223, .18);
    border-radius: 12px;
    background: rgba(255, 255, 255, .78);
    color: var(--pro-blue, #0879df);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .pro-m-more::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .18s ease;
  }
  .pro-m-more[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
  .pro-m-more:focus-visible { outline: 2px solid var(--pro-blue, #0879df); outline-offset: 2px; }

  /* ------------------------------------------------------------------
   * Stap 1 – specificaties als compacte lijst
   * ---------------------------------------------------------------- */
  body.pro-m-specs .pro-product-specifications { gap: 12px; padding: 18px 14px 14px; }
  body.pro-m-specs .pro-specifications-heading { position: static; padding: 0 2px; }
  body.pro-m-specs .pro-specifications-heading h2 { margin-bottom: 4px; font-size: 22px; }
  body.pro-m-specs .pro-specifications-heading p:not(.pro-product-kicker) { margin: 0; font-size: 13px; }
  body.pro-m-specs .pro-specifications-table table.shop_attributes tbody {
    display: block;
    overflow: hidden;
    border: 1px solid rgba(8, 121, 223, .14);
    border-radius: 14px;
    background: rgba(255, 255, 255, .86);
  }
  body.pro-m-specs .pro-specifications-table table.shop_attributes tr,
  body.pro-m-specs .pro-specifications-table table.shop_attributes tr:nth-child(4n + 1),
  body.pro-m-specs .pro-specifications-table table.shop_attributes tr:nth-child(4n + 2) {
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    min-height: 0;
    padding: 8px 13px;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
  }
  body.pro-m-specs .pro-specifications-table table.shop_attributes tr + tr { border-top: 1px solid rgba(8, 121, 223, .10) !important; }
  body.pro-m-specs .pro-specifications-table table.shop_attributes tr:nth-child(even) { background: rgba(236, 247, 255, .55) !important; }
  body.pro-m-specs .pro-specifications-table table.shop_attributes th {
    margin: 0;
    font-size: 10.5px;
    letter-spacing: .03em;
  }
  body.pro-m-specs .pro-specifications-table table.shop_attributes td,
  body.pro-m-specs .pro-specifications-table table.shop_attributes td p {
    font-size: 13px;
    text-align: right !important;
    overflow-wrap: anywhere;
  }
  /* Ingeklapt: alleen de vier belangrijkste, in volgorde van belang. */
  body.pro-m-specs .pro-specifications-table.is-collapsed table.shop_attributes tbody { display: flex; flex-direction: column; }
  body.pro-m-specs .pro-specifications-table.is-collapsed table.shop_attributes tr:not(.is-key) { display: none; }
  body.pro-m-specs .pro-specifications-table.is-collapsed table.shop_attributes tr.is-key {
    order: var(--pro-m-key, 0);
    border-top: 1px solid rgba(8, 121, 223, .10) !important;
    background: transparent !important;
  }
  body.pro-m-specs .pro-specifications-table.is-collapsed table.shop_attributes tr.is-key-first { border-top: 0 !important; }
  body.pro-m-specs .pro-specifications-table.is-collapsed table.shop_attributes td,
  body.pro-m-specs .pro-specifications-table.is-collapsed table.shop_attributes td p { font-size: 14px; }

  /* Knop "Alle specificaties": tegel met raster-icoon, uitleg en een teller. */
  .pro-m-specs-toggle {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto 28px;
    align-items: center;
    gap: 11px;
    width: 100%;
    margin: 10px 0 0;
    padding: 10px 10px 10px 11px;
    border: 1px solid rgba(8, 121, 223, .16);
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(232, 245, 255, .9));
    box-shadow: 0 8px 22px rgba(12, 69, 119, .08), inset 0 1px 0 #fff;
    color: var(--pro-navy, #082b55);
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .pro-m-specs-toggle:active { transform: scale(.985); box-shadow: 0 4px 12px rgba(12, 69, 119, .08), inset 0 1px 0 #fff; }
  .pro-m-specs-toggle:focus-visible { outline: 2px solid var(--pro-blue, #0879df); outline-offset: 2px; }
  .pro-m-specs-toggle__icon {
    display: grid;
    grid-template-columns: repeat(2, 9px);
    gap: 4px;
    place-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(145deg, #1f8ff0, #0868c9);
    box-shadow: 0 6px 14px rgba(8, 104, 201, .25);
  }
  .pro-m-specs-toggle__icon i { width: 9px; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, .92); }
  .pro-m-specs-toggle__icon i:nth-child(4) { background: rgba(255, 255, 255, .5); }
  .pro-m-specs-toggle__text { display: grid; gap: 2px; min-width: 0; }
  .pro-m-specs-toggle__text strong { font-size: 14px; font-weight: 900; line-height: 1.2; }
  .pro-m-specs-toggle__text small { overflow: hidden; color: #5f7a96; font-size: 11.5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
  .pro-m-specs-toggle__badge {
    min-width: 34px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(8, 121, 223, .12);
    color: var(--pro-blue, #0879df);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
  }
  .pro-m-specs-toggle__badge[hidden] { display: none; }
  .pro-m-specs-toggle__chevron {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(12, 69, 119, .12);
  }
  .pro-m-specs-toggle__chevron::after {
    content: "";
    position: absolute;
    top: 9px;
    left: 10px;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--pro-blue, #0879df);
    border-bottom: 2px solid var(--pro-blue, #0879df);
    transform: rotate(45deg);
    transition: transform .18s ease;
  }
  .pro-m-specs-toggle[aria-expanded="true"] .pro-m-specs-toggle__chevron::after { top: 12px; transform: rotate(-135deg); }

  /* ------------------------------------------------------------------
   * Stap 2 – lange teksten inklappen
   * ---------------------------------------------------------------- */
  body.pro-m-collapse .pro-m-clamp:not(.is-open) {
    position: relative;
    max-height: var(--pro-m-clamp, 220px);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent);
  }

  /* ------------------------------------------------------------------
   * Stap 3 – reviews: eerst drie, formulier op verzoek
   * ---------------------------------------------------------------- */
  body.pro-m-reviews .pro-product-reviews__content ol.commentlist.is-collapsed > li:nth-child(n + 4) { display: none; }
  body.pro-m-reviews .pro-product-reviews__content #review_form_wrapper.is-collapsed { display: none; }
  body.pro-m-reviews .pro-review-distribution { gap: 4px; }

  /* ------------------------------------------------------------------
   * Stap 4 – app-navigatie: meelopende tabbalk en vaste koopbalk
   * ---------------------------------------------------------------- */
  body.pro-m-appbar .pro-product-anchor-nav {
    justify-content: flex-start;
    gap: 4px;
    margin-inline: -4px;
    padding: 4px;
    border-radius: 14px;
    scroll-padding-inline: 12px;
  }
  body.pro-m-appbar .pro-product-anchor-nav button {
    min-height: 34px;
    padding: 6px 13px;
    font-size: 12px;
    transition: background .18s ease, color .18s ease;
  }
  body.pro-m-appbar .pro-m-buybar {
    position: fixed;
    z-index: 90;
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 7px 7px 7px 8px;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 18px;
    background: rgba(248, 252, 255, .90);
    box-shadow: 0 14px 38px rgba(12, 69, 119, .22), inset 0 1px 0 rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    transform: translateY(calc(100% + 24px));
    opacity: 0;
    pointer-events: none;
    transition: transform .24s ease, opacity .24s ease;
  }
  body.pro-m-appbar.pro-m-bar-visible .pro-m-buybar { transform: none; opacity: 1; pointer-events: auto; }
  .pro-m-buybar__image {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: #fff;
    object-fit: contain;
  }
  .pro-m-buybar__info { display: grid; min-width: 0; line-height: 1.2; }
  .pro-m-buybar__info strong {
    overflow: hidden;
    color: var(--pro-navy, #082b55);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pro-m-buybar__price { color: var(--pro-navy, #082b55); font-size: 16px; font-weight: 900; }
  .pro-m-buybar__price del { margin-right: 4px; opacity: .55; font-size: 12px; font-weight: 700; }
  .pro-m-buybar__price ins { text-decoration: none; }
  .pro-m-buybar__price small { display: none; }
  .pro-m-buybar__button {
    min-height: 44px;
    padding: 10px 16px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, #ff7a1a, #f24b0f);
    box-shadow: 0 8px 18px rgba(242, 75, 15, .28);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
  }
  .pro-m-buybar__button:focus-visible { outline: 2px solid #082b55; outline-offset: 2px; }
  /* Chatknop en "terug naar boven" schuiven boven de koopbalk. */
  body.pro-m-appbar.pro-m-bar-visible .progdash-ai-floating { bottom: calc(var(--pro-m-bar-h, 64px) + 18px); transition: bottom .24s ease; }
  body.pro-m-appbar.pro-m-bar-visible .site-footer .footer-to-top.is-enhanced { bottom: calc(var(--pro-m-bar-h, 64px) + 22px); }
  body.pro-m-appbar.pro-m-bar-visible .pro-single-product { padding-bottom: calc(var(--pro-m-bar-h, 64px) + 30px); }

  /* ------------------------------------------------------------------
   * Stap 5 – compacte koopkaart en service, strakkere witruimte
   * ---------------------------------------------------------------- */
  body.pro-m-compact .pro-product-hero { gap: 10px; }
  body.pro-m-compact .pro-product-purchase-card { gap: 12px; padding: 16px 13px 13px; }
  body.pro-m-compact .pro-product-purchase-card .product_title { font-size: 25px; }
  body.pro-m-compact .pro-product-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
  }
  body.pro-m-compact .pro-product-benefits li {
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    padding: 9px 9px 9px 8px;
    border: 1px solid rgba(8, 121, 223, .12);
    border-radius: 12px;
    background: rgba(255, 255, 255, .72);
  }
  body.pro-m-compact .pro-product-benefits .pro-check { flex: 0 0 20px; width: 20px; height: 20px; font-size: 11px; }
  body.pro-m-compact .pro-product-benefits strong { font-size: 13px; line-height: 1.2; }
  body.pro-m-compact .pro-product-benefits small { font-size: 10.5px; line-height: 1.25; }
  body.pro-m-compact .pro-payment-trust ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; }

  body.pro-m-compact .pro-service-strip {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 74%;
    gap: 8px;
    margin-top: 10px;
    padding: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body.pro-m-compact .pro-service-strip::-webkit-scrollbar { display: none; }
  body.pro-m-compact .pro-service-strip > div {
    padding: 9px 10px !important;
    border: 1px solid rgba(8, 121, 223, .10) !important;
    border-radius: 13px;
    background: rgba(255, 255, 255, .7);
    scroll-snap-align: start;
  }
  body.pro-m-compact .pro-service-strip > div:last-child { border-bottom: 1px solid rgba(8, 121, 223, .10) !important; }
  body.pro-m-compact .pro-service-icon { flex-basis: 34px; width: 34px; height: 34px; }

  body.pro-m-compact .pro-product-anchor-nav { margin-top: 10px; }
  body.pro-m-compact .pro-product-overview { gap: 14px; margin-top: 10px; padding: 18px 14px; }
  body.pro-m-compact .pro-product-overview h2 { font-size: 22px; }
  body.pro-m-compact .pro-overview-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  body.pro-m-compact .pro-overview-cards article { gap: 8px; min-height: 0; padding: 10px; border-radius: 13px; }
  body.pro-m-compact .pro-overview-cards .pro-feature-icon { width: 30px; height: 30px; flex-basis: 30px; }
  body.pro-m-compact .pro-overview-cards h3 { font-size: 13px; line-height: 1.2; }
  body.pro-m-compact .pro-overview-cards p { font-size: 10.5px; line-height: 1.25; }
  body.pro-m-compact .pro-product-specifications,
  body.pro-m-compact .pro-product-author,
  body.pro-m-compact .pro-product-faq,
  body.pro-m-compact .pro-product-details { margin-top: 10px; }
  body.pro-m-compact .pro-section-heading--details { padding: 18px 14px; }
  body.pro-m-compact .pro-section-heading--details h2 { font-size: 22px; }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .pro-m-more::after,
  .pro-m-specs-toggle,
  .pro-m-specs-toggle__chevron::after,
  body.pro-m-appbar .pro-m-buybar,
  body.pro-m-appbar .pro-product-anchor-nav button { transition: none; }
}