/*
Theme Name: Prindustry Shine
Theme URI: https://prindustry.nl
Description: Sprankelend child theme van Twenty Twenty-Four voor Prindustry Connect webshops: fris blauw/teal-palet, Bricolage Grotesque koppen en een premium skin voor alle shopcomponenten (tiles, configurator, cart, checkout, account, orders). De plugin blijft neutraal; dit theme brengt de looks.
Author: Prindustry
Template: twentytwentyfour
Version: 1.0.2
Requires at least: 6.6
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: prindustry-shine
*/

/* De hele shop-skin hangt aan één merk-token: de plugin-CSS is neutraal,
   dit theme kleurt hem in. */
:root {
  --prindustry-brand: var(--wp--preset--color--accent, #0e8bd1);
}

/* --- Design tokens voor de shopcomponenten --- */

.prindustry-product,
.prindustry-print-product,
.prindustry-cart,
.prindustry-checkout,
.prindustry-account,
.prindustry-orders,
.prindustry-orders-empty,
.prindustry-category-tiles,
.prindustry-category-menu,
.prindustry-categories,
.prindustry-products,
.prindustry-notice,
.prindustry-added-notice {
  --prindustry-ink: var(--wp--preset--color--contrast, #0a2540);
  --prindustry-paper: var(--wp--preset--color--base-2, #fff);
  --prindustry-accent: var(--prindustry-brand);

  --prindustry-border: color-mix(in srgb, var(--prindustry-ink) 12%, transparent);
  --prindustry-border-strong: color-mix(in srgb, var(--prindustry-ink) 24%, transparent);
  --prindustry-tint: color-mix(in srgb, var(--prindustry-ink) 4%, transparent);
  --prindustry-tint-strong: color-mix(in srgb, var(--prindustry-ink) 8%, transparent);

  --prindustry-shadow-s: 0 1px 2px rgba(10, 37, 64, 0.05), 0 1px 6px rgba(10, 37, 64, 0.04);
  --prindustry-shadow-m: 0 2px 4px rgba(10, 37, 64, 0.05), 0 8px 24px rgba(10, 37, 64, 0.07);
  --prindustry-shadow-l: 0 4px 10px rgba(10, 37, 64, 0.06), 0 18px 44px rgba(10, 37, 64, 0.12);

  --prindustry-radius-s: 10px;
  --prindustry-radius: 16px;
  --prindustry-radius-l: 20px;
  --prindustry-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --prindustry-success: #178243;
  --prindustry-danger: #c62828;
}

/* Moderne focusring op alle interactieve shopelementen. */
.prindustry-product :focus-visible,
.prindustry-print-product :focus-visible,
.prindustry-cart :focus-visible,
.prindustry-checkout :focus-visible,
.prindustry-account :focus-visible,
.prindustry-category-tiles :focus-visible,
a.prindustry-category-tile:focus-visible,
.prindustry-category-menu :focus-visible {
  outline: 2px solid var(--prindustry-accent, currentColor);
  outline-offset: 2px;
  border-radius: var(--prindustry-radius-s, 10px);
}

/* --- Formuliervelden --- */

.prindustry-product input:focus,
.prindustry-print-product input:focus,
.prindustry-cart input:focus,
.prindustry-checkout input:focus,
.prindustry-checkout select:focus,
.prindustry-checkout textarea:focus,
.prindustry-account input:focus,
.prindustry-account select:focus {
  border-color: var(--prindustry-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--prindustry-accent) 15%, transparent);
  outline: none;
}

/* --- Navigatie: submenu als kaart, meerkoloms bij veel categorieën ---
   Werkt voor losse links én voor een Paginalijst (Page List) in het
   submenu, dus ook voor het automatisch gevulde Shop-menu. */

.wp-block-navigation .wp-block-navigation__submenu-container {
  min-width: 15rem;
  padding: 0.6rem;
  border: 1px solid var(--prindustry-border, rgba(10, 37, 64, 0.1)) !important;
  border-radius: var(--prindustry-radius, 16px);
  background: var(--prindustry-paper, #fff);
  box-shadow: var(--prindustry-shadow-l, 0 18px 44px rgba(10, 37, 64, 0.12));
  color: var(--prindustry-ink, #0a2540);
  overflow: hidden;
}

/* Items erven geen vlakvulling van het thema; de kaart is de achtergrond. */
.wp-block-navigation .wp-block-navigation__submenu-container > li,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-pages-list__item {
  background: transparent !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-pages-list__item__link {
  display: block;
  padding: 0.5rem 0.85rem !important;
  border-radius: calc(var(--prindustry-radius, 16px) - 8px);
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-pages-list__item__link:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-pages-list__item__link:focus-visible {
  background: color-mix(in srgb, var(--prindustry-brand, #0e8bd1) 10%, transparent);
  color: var(--prindustry-brand, #0e8bd1);
}

/* Vanaf 9 items twee kolommen, vanaf 17 drie — de lijst groeit mee met het assortiment. */
.wp-block-navigation .wp-block-navigation__submenu-container:has(> li:nth-child(9)) {
  display: grid;
  grid-template-columns: repeat(2, minmax(11rem, 1fr));
  gap: 0 0.5rem;
  width: max-content;
}

.wp-block-navigation .wp-block-navigation__submenu-container:has(> li:nth-child(17)) {
  grid-template-columns: repeat(3, minmax(11rem, 1fr));
}

/* --- Mega-menu met kolomkoppen ---
   Zet in het Shop-submenu per groep een submenu-item ("Drukwerk",
   "Textiel", …) met daaronder de categorielinks. Zo'n genest submenu wordt
   hier een kolom: het label is de kop, de links staan er open onder. De
   indeling beheer je dus gewoon in de Site Editor. */

.wp-block-navigation .wp-block-navigation__submenu-container:has(> .wp-block-navigation-submenu),
.wp-block-navigation .wp-block-navigation__submenu-container:has(> .wp-block-pages-list__item.has-child) {
  display: flex;
  flex-direction: row; /* core zet de container op column */
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 2rem;
  width: max-content;
  max-width: min(60rem, calc(100vw - 3rem));
  padding: 1rem 1.25rem 1.1rem;
  /* Lange lijsten scrollen in de kaart in plaats van onder de viewport door
     (12rem = ruimte voor header plus een eventuele mededelingenbalk). */
  max-height: calc(100dvh - 12rem);
  overflow-y: auto;
}

/* De kaart hangt aan de viewport, niet aan het menu-item: core zet de
   kaart links (of rechts, bij een rechts uitgelijnd menu) van het item en
   dan valt een kaart van vier kolommen buiten beeld. position: fixed met
   top: auto pint de rechterrand op de viewport en houdt de verticale plek
   uit de normale flow ("static position"). Het item is daarvoor een
   gewoon blok met de link en het pijltje inline: in core's flex-item zou
   die static position verticaal gecentreerd worden en de kaart over de
   header heen vallen. Alleen in het uitgeklapte desktopmenu, niet in de
   mobiele overlay. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child:has(> .wp-block-navigation__submenu-container > .wp-block-navigation-submenu),
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child:has(> .wp-block-navigation__submenu-container > .wp-block-pages-list__item.has-child) {
  display: block;
  white-space: nowrap;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child:has(> .wp-block-navigation__submenu-container > .wp-block-navigation-submenu) > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child:has(> .wp-block-navigation__submenu-container > .wp-block-navigation-submenu) > .wp-block-navigation__submenu-icon,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child:has(> .wp-block-navigation__submenu-container > .wp-block-pages-list__item.has-child) > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child:has(> .wp-block-navigation__submenu-container > .wp-block-pages-list__item.has-child) > .wp-block-navigation__submenu-icon {
  display: inline-flex;
  vertical-align: middle;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container:has(> .wp-block-navigation-submenu),
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container:has(> .wp-block-pages-list__item.has-child) {
  position: fixed;
  top: auto;
  left: auto;
  right: 1rem;
  max-width: min(60rem, calc(100vw - 2rem));
  white-space: normal;
}

.wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-submenu,
.wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-pages-list__item.has-child {
  display: block;
  min-width: 11rem;
}

/* De kop: het label van de groep, zonder dropdown-gedrag. */
.wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-submenu > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-pages-list__item.has-child > .wp-block-pages-list__item__link {
  padding: 0.35rem 0.85rem 0.5rem !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--prindustry-ink, #0a2540) 55%, transparent);
  background: none !important;
  cursor: default;
}

.wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon,
.wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-pages-list__item.has-child > .wp-block-navigation__submenu-icon,
.wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-pages-list__item.has-child > .wp-block-navigation-submenu__toggle {
  display: none;
}

/* De groep-inhoud staat altijd open, als gewone kolom in de kaart. */
.wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-pages-list__item.has-child > .wp-block-navigation__submenu-container {
  position: static;
  display: block;
  visibility: visible;
  opacity: 1;
  height: auto;
  width: auto;
  min-width: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transform: none;
}

@media (max-width: 599px) {
  /* Smal scherm zonder overlay-menu: groepen onder elkaar, kaart blijft
     binnen de viewport en scrolt zelf. */
  .wp-block-navigation .wp-block-navigation__submenu-container:has(> .wp-block-navigation-submenu),
  .wp-block-navigation .wp-block-navigation__submenu-container:has(> .wp-block-pages-list__item.has-child) {
    display: block;
    width: max-content;
    max-width: calc(100vw - 2rem);
    padding: 0.5rem;
  }
}

/* De pijl-indicator in het hoofdmenu iets subtieler. */
.wp-block-navigation .wp-block-navigation__submenu-icon {
  opacity: 0.6;
}

@media (max-width: 599px) {
  /* In het mobiele overlay-menu gewoon een lijst. */
  .wp-block-navigation .wp-block-navigation__submenu-container,
  .wp-block-navigation .wp-block-navigation__submenu-container:has(> li:nth-child(9)) {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0 !important;
    box-shadow: none;
    background: transparent;
  }
}

/* --- Category-tiles: foto-vullend met glazen naambalk --- */

.prindustry-category-tile {
  border: 1px solid var(--prindustry-border, rgba(0, 0, 0, 0.1));
  border-radius: var(--prindustry-radius-l, 20px);
  box-shadow: var(--prindustry-shadow-s);
  transition:
    transform 0.35s var(--prindustry-ease, ease),
    box-shadow 0.35s var(--prindustry-ease, ease);
}

.prindustry-category-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--prindustry-shadow-l);
}

.prindustry-category-tile-media img {
  transition: transform 0.6s var(--prindustry-ease, ease);
}

.prindustry-category-tile:hover .prindustry-category-tile-media img {
  transform: scale(1.06);
}

.prindustry-category-tile-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.15rem;
  background: color-mix(in srgb, var(--prindustry-paper, #fff) 82%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  border-top: 1px solid color-mix(in srgb, var(--prindustry-paper, #fff) 55%, transparent);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.prindustry-category-tile-name::after {
  content: "→";
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  background: var(--prindustry-accent, #0a2540);
  color: var(--prindustry-paper, #fff);
  font-size: 0.9rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.35s var(--prindustry-ease, ease);
}

.prindustry-category-tile:hover .prindustry-category-tile-name::after,
.prindustry-category-tile:focus-visible .prindustry-category-tile-name::after {
  opacity: 1;
  transform: none;
}

/* Tegels met omschrijving en/of bestelknop (block-toggles): de naam
   verhuist van de glazen balk óver de foto naar een tekstblok eronder,
   zodat omschrijving en knop ruimte krijgen. De pijl blijft. */
.prindustry-category-tile--extended .prindustry-category-tile-name {
  position: static;
  padding: 0.95rem 1.15rem 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-top: 0;
  font-size: 1.05rem;
}

.prindustry-category-tile--extended .prindustry-category-tile-description {
  padding: 0.3rem 1.15rem 0;
  background: none;
  color: var(--prindustry-ink, #0a2540);
  opacity: 0.7;
  line-height: 1.5;
}

.prindustry-category-tile--extended .prindustry-category-tile-action {
  padding: 0.95rem 1.15rem 1.15rem;
  background: none;
}

.prindustry-category-tile--extended .prindustry-category-tile-action .prindustry-button {
  padding: 0.55em 1.25em;
  border-radius: 999px;
  font-size: 0.9rem;
}

.prindustry-category-tile--extended:hover .prindustry-category-tile-action .prindustry-button {
  background: color-mix(in srgb, var(--prindustry-brand) 85%, #000);
}

/* --- Configurator: kaart, stappen, opties --- */

.prindustry-print-media {
  border-radius: var(--prindustry-radius-l, 20px);
}

.prindustry-step-card {
  border-radius: var(--prindustry-radius, 16px);
  border: 1px solid var(--prindustry-border, rgba(0, 0, 0, 0.08));
  box-shadow: var(--prindustry-shadow-m);
  overflow: hidden;
}

.prindustry-step-card-header {
  background: var(--prindustry-tint, rgba(0, 0, 0, 0.02));
}

.prindustry-step-card-header h3 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.prindustry-step-badge {
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s var(--prindustry-ease, ease);
}

.prindustry-step-badge.is-done {
  background: var(--prindustry-success, #178243);
  color: #fff;
  transform: scale(1.05);
}

.prindustry-step-option {
  position: relative;
  border-radius: var(--prindustry-radius-s, 10px);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.2s var(--prindustry-ease, ease),
    box-shadow 0.2s ease;
}

.prindustry-step-option:hover {
  transform: translateY(-2px);
  box-shadow: var(--prindustry-shadow-s);
}

.prindustry-step-option.is-selected {
  border-color: var(--prindustry-accent);
  box-shadow: inset 0 0 0 1px var(--prindustry-accent);
  background: color-mix(in srgb, var(--prindustry-accent) 6%, var(--prindustry-paper, #fff));
}

.prindustry-step-option.is-selected::after {
  content: "✓";
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: var(--prindustry-accent);
  color: var(--prindustry-paper, #fff);
  font-size: 0.65rem;
  font-weight: 700;
  animation: prindustry-shine-pop 0.25s var(--prindustry-ease, ease-out);
}

@keyframes prindustry-shine-pop {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes prindustry-shine-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

/* Prijzen laden met shimmer. */
.prindustry-pricelist-loading {
  border-radius: var(--prindustry-radius-s, 10px);
  padding: 0.85rem 1rem;
  background: linear-gradient(
    100deg,
    var(--prindustry-tint, rgba(0, 0, 0, 0.04)) 40%,
    var(--prindustry-tint-strong, rgba(0, 0, 0, 0.08)) 50%,
    var(--prindustry-tint, rgba(0, 0, 0, 0.04)) 60%
  );
  background-size: 200% 100%;
  animation: prindustry-shine-shimmer 1.4s linear infinite;
}

/* --- Prijsmatrix --- */

.prindustry-pricelist {
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.prindustry-pricelist th {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.prindustry-price-cell {
  border-radius: var(--prindustry-radius-s, 10px);
  transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.prindustry-price-cell.is-selected {
  background: var(--prindustry-accent);
  color: var(--prindustry-paper, #fff);
  box-shadow: var(--prindustry-shadow-s);
}

/* --- Dropzone --- */

.prindustry-dropzone {
  border-radius: var(--prindustry-radius, 16px);
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    transform 0.2s var(--prindustry-ease, ease);
}

.prindustry-dropzone.is-dragover {
  transform: scale(1.01);
}

.prindustry-dropzone-icon {
  transition: transform 0.2s var(--prindustry-ease, ease);
}

.prindustry-dropzone.is-dragover .prindustry-dropzone-icon {
  transform: translateY(-2px) scale(1.08);
}

/* --- Cart & checkout --- */

.prindustry-cart-item {
  border-radius: var(--prindustry-radius, 16px);
  box-shadow: var(--prindustry-shadow-s);
  transition: box-shadow 0.25s var(--prindustry-ease, ease);
}

.prindustry-cart-item:hover {
  box-shadow: var(--prindustry-shadow-m);
}

.prindustry-cart-item-price {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.prindustry-cart-summary {
  border-radius: var(--prindustry-radius, 16px);
  background: var(--prindustry-paper, #fff);
  box-shadow: var(--prindustry-shadow-m);
}

.prindustry-summary-row {
  font-variant-numeric: tabular-nums;
}

.prindustry-auth-panel,
.prindustry-account-card {
  border-radius: var(--prindustry-radius, 16px);
  box-shadow: var(--prindustry-shadow-s);
}

.prindustry-address-choice {
  border-radius: var(--prindustry-radius-s, 10px);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.prindustry-address-choice:hover {
  background: var(--prindustry-tint, rgba(0, 0, 0, 0.02));
}

.prindustry-address-choice:has(input:checked) {
  border-color: var(--prindustry-accent);
  box-shadow: inset 0 0 0 1px var(--prindustry-accent);
  background: color-mix(in srgb, var(--prindustry-accent) 5%, transparent);
}

/* --- Orders --- */

.prindustry-order-card {
  transition: box-shadow 0.25s var(--prindustry-ease, ease), transform 0.25s var(--prindustry-ease, ease);
}

.prindustry-order-card:hover {
  transform: translateY(-2px);
}

/* --- Knoppen (plugin-fallbackknoppen kleuren mee met het merk) --- */

.prindustry-button--primary:not(.wp-element-button) {
  background: var(--prindustry-brand);
  border-color: var(--prindustry-brand);
  color: #fff;
}

.prindustry-button--primary:not(.wp-element-button):hover {
  background: color-mix(in srgb, var(--prindustry-brand) 85%, #000);
}

.prindustry-button--primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--prindustry-shadow-m);
}

.prindustry-button--primary:active {
  transform: none;
  box-shadow: var(--prindustry-shadow-s);
}

.prindustry-button {
  transition: transform 0.2s var(--prindustry-ease, ease), box-shadow 0.2s ease, background-color 0.15s ease;
}

/* --- Mini-cart preview: frosted glass --- */

.prindustry-cart-preview {
  border-radius: 16px;
  background: color-mix(in srgb, var(--wp--preset--color--base-2, #fff) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 4px 10px rgba(10, 37, 64, 0.06), 0 24px 56px -12px rgba(10, 37, 64, 0.28);
  animation: prindustry-shine-preview 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes prindustry-shine-preview {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.prindustry-cart-preview-btn {
  border-radius: 999px;
}

.prindustry-cart-preview-btn.is-primary {
  background: var(--prindustry-brand);
  border-color: var(--prindustry-brand);
}

/* Badge in het merkblauw i.p.v. WP-alarmrood. */
.prindustry-cart-badge {
  background: var(--prindustry-brand);
}

/* --- Reduced motion: alle beweging uit --- */

@media (prefers-reduced-motion: reduce) {
  .prindustry-category-tile,
  .prindustry-category-tile-media img,
  .prindustry-category-tile-name::after,
  .prindustry-step-option,
  .prindustry-step-badge,
  .prindustry-cart-item,
  .prindustry-order-card,
  .prindustry-button,
  .prindustry-dropzone,
  .prindustry-dropzone-icon {
    transition: none;
  }
  .prindustry-category-tile:hover,
  .prindustry-step-option:hover,
  .prindustry-order-card:hover,
  .prindustry-button--primary:hover {
    transform: none;
  }
  .prindustry-pricelist-loading,
  .prindustry-step-option.is-selected::after,
  .prindustry-cart-preview {
    animation: none;
  }
}

/* ==========================================================================
   B2C sparkle — contemporary commerce-laag
   ========================================================================== */

/* Marker-highlight in koppen: <mark class="shine-highlight">woord</mark>.
   Lime swash onder de tekst, licht rond — het klassieke D2C-accent. */
.shine-highlight {
  background: linear-gradient(
    0deg,
    var(--wp--preset--color--accent-2, #c9f158) 0 34%,
    transparent 34%
  );
  color: inherit;
  border-radius: 6px;
  padding: 0 0.08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Lopende trust-ticker: groep .shine-marquee met twee identieke
   nowrap-paragrafen (tweede aria-hidden) die samen naadloos loopen. */
.shine-marquee {
  display: flex;
  overflow: hidden;
  gap: 0;
}

.shine-marquee p {
  flex: none;
  min-width: 100%;
  white-space: nowrap;
  margin: 0;
  animation: shine-marquee 55s linear infinite;
}

@keyframes shine-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* Sticker-badge op kaarten: kolom .shine-card + paragraaf .shine-sticker. */
.shine-card {
  position: relative;
}

.shine-sticker {
  position: absolute;
  z-index: 2;
  top: -0.8rem;
  right: 0.9rem;
  margin: 0;
  padding: 0.35em 0.95em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wp--preset--color--accent-3, #ffc53d) 42%, var(--wp--preset--color--base-2, #fff));
  color: var(--wp--preset--color--contrast, #101828);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  rotate: 5deg;
}

/* Gekanteld hero-beeld dat rechttrekt bij hover. */
.shine-tilt img {
  rotate: -2.5deg;
  transition: rotate 0.45s cubic-bezier(0.22, 1, 0.36, 1), scale 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 24px 60px -18px rgba(16, 24, 40, 0.35);
}

.shine-tilt:hover img {
  rotate: 0deg;
  scale: 1.02;
}

/* Afgeronde sectieband (alignfull-groepen met .shine-band). */
.shine-band {
  border-radius: 32px;
  margin-inline: clamp(0.75rem, 2vw, 2rem) !important;
  overflow: hidden;
}

/* "Zo werkt het": stappen als kaarten met icoon (CSS-mask, kleurt mee met
   het accent), stap-kicker en titel. Markup: columns.shine-steps >
   column.shine-step.shine-step--{configure|upload|deliver}. */
.shine-steps {
  gap: 1.25rem;
}

.shine-step {
  position: relative;
  padding: 1.75rem 1.75rem 1.9rem;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 20px;
  background: var(--wp--preset--color--base-2, #fff);
  box-shadow: 0 2px 4px rgba(16, 24, 40, 0.04), 0 10px 28px rgba(16, 24, 40, 0.06);
}

/* Icoon-tegel bovenin. */
.shine-step::before {
  content: "";
  display: block;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1.25rem;
  border-radius: 14px;
  background-color: var(--wp--preset--color--accent-4, #e3f2fd);
}

.shine-step::after {
  content: "";
  position: absolute;
  top: calc(1.75rem + 0.8125rem);
  left: calc(1.75rem + 0.8125rem);
  width: 1.625rem;
  height: 1.625rem;
  background-color: var(--wp--preset--color--accent, #0b87e0);
  -webkit-mask: var(--shine-step-icon) center / contain no-repeat;
  mask: var(--shine-step-icon) center / contain no-repeat;
}

/* Iconen (Lucide-stijl, 24-grid, stroke 2). */
.shine-step--configure {
  --shine-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E");
}

.shine-step--upload {
  --shine-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
}

.shine-step--deliver {
  --shine-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17h4V5H2v12h3'/%3E%3Cpath d='M20 17h2v-3.34a4 4 0 0 0-1.17-2.83L19 9h-5v8h1'/%3E%3Ccircle cx='7.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E");
}

.shine-step-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent, #0b87e0);
}

.shine-step h3 {
  margin: 0 0 0.6rem;
}

.shine-step p:last-child {
  margin-bottom: 0;
  color: var(--wp--preset--color--contrast-2, #475467);
}

/* Reviews als moderne cards i.p.v. cursieve serif-quotes. */
.wp-block-quote {
  position: relative;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 18px;
  background: var(--wp--preset--color--base-2, #fff);
  box-shadow: 0 2px 4px rgba(16, 24, 40, 0.04), 0 10px 28px rgba(16, 24, 40, 0.06);
  padding: 1.6rem 1.5rem 1.35rem;
}

.wp-block-quote::before {
  content: "“";
  display: block;
  font-family: var(--wp--preset--font-family--heading, inherit);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 0.6;
  color: var(--wp--preset--color--accent, #0b87e0);
  margin-bottom: 0.55rem;
}

.wp-block-quote p {
  font-style: normal;
  line-height: 1.55;
}

.wp-block-quote cite {
  display: block;
  margin-top: 0.8rem;
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast-2, #475467);
}

/* Sterrenregel boven reviews mag ademen. */
.wp-block-quote + cite {
  opacity: 0.75;
}

/* FAQ: cards met plus/min-marker. */
.wp-block-details {
  border: 1px solid rgba(16, 24, 40, 0.08);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: box-shadow 0.2s ease;
}

.wp-block-details:hover {
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
}

.wp-block-details summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 650;
  cursor: pointer;
}

.wp-block-details summary::-webkit-details-marker {
  display: none;
}

.wp-block-details summary::after {
  content: "+";
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--wp--preset--color--accent-4, #e3f2fd);
  color: var(--wp--preset--color--accent, #0b87e0);
  font-weight: 800;
  transition: rotate 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.wp-block-details[open] summary::after {
  rotate: 45deg;
}

.wp-block-details[open] summary {
  margin-bottom: 0.5rem;
}

/* CTA-knoppen met pijl die meebeweegt. */
.shine-btn-arrow .wp-block-button__link::after {
  content: "→";
  display: inline-block;
  margin-left: 0.5em;
  transition: translate 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.shine-btn-arrow .wp-block-button__link:hover::after {
  translate: 4px 0;
}

/* Knoppen voelen fysiek: subtiele lift + press. */
.wp-block-button__link {
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, background-color 0.15s ease, color 0.15s ease;
}

.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(16, 24, 40, 0.35);
}

.wp-block-button__link:active {
  transform: none;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .shine-marquee p,
  .shine-tilt img,
  .wp-block-details summary::after,
  .shine-btn-arrow .wp-block-button__link::after,
  .wp-block-button__link {
    animation: none;
    transition: none;
  }
  .shine-tilt img {
    rotate: 0deg;
  }
  .wp-block-button__link:hover {
    transform: none;
  }
}

/* ==========================================================================
   Leesbaarheid: lead-alinea en maximale tekstbreedte
   Koppen en lopende tekst blijven op een leesbare maat, ook in alignwide-
   secties en kolommen. Shopcomponenten van de plugin (.prindustry-*) doen
   niet mee: die hebben hun eigen layout (prijsmatrix, cart, checkout).
   Let op: bewust niet [class*="prindustry-"], want dat matcht ook de
   body-class wp-theme-prindustry-shine en schakelt dan alles uit.
   Directe kinderen van een constrained layout doen ook niet mee: die
   krijgen al de contentbreedte (620px) van WordPress én worden gecentreerd,
   dus een afwijkende max-width zou kicker en kop uit elkaar schuiven.
   ========================================================================== */

/* Lead-alinea (blokstijl "Lead" op core/paragraph). */
.is-style-lead {
  font-size: var(--wp--preset--font-size--lead, 1.3125rem);
  line-height: 1.8;
  color: var(--wp--preset--color--contrast-2, #475467);
}

.wp-block-post-content :where(p, li):not(:where([class^="prindustry-"], [class*=" prindustry-"]) *):not(.is-layout-constrained > *) {
  max-width: 52ch;
}

.wp-block-post-content :where(h1):not(:where([class^="prindustry-"], [class*=" prindustry-"]) *):not(.is-layout-constrained > *) {
  max-width: 17ch;
}

.wp-block-post-content :where(h2, h3):not(:where([class^="prindustry-"], [class*=" prindustry-"]) *):not(.is-layout-constrained > *) {
  max-width: 26ch;
}

/* Gecentreerde tekst blijft gecentreerd binnen haar maat. */
.wp-block-post-content :where(p, h1, h2, h3).has-text-align-center {
  margin-left: auto;
  margin-right: auto;
}

/* Verticale ruimte tussen secties: elk top-level blok in de pagina-inhoud
   is een sectie en krijgt ruim de dubbele blokgap van Twenty Twenty-Four. */
.wp-block-post-content {
  --shine-section-gap: clamp(4rem, 7vw, 6.5rem);
}

.wp-block-post-content > * + * {
  margin-top: var(--shine-section-gap) !important;
}

/* Een blok dat eindigt op een kop is een sectiekop (bv. "Assortiment" boven
   de categorie-tiles): wat erop volgt hoort erbij en blijft dichtbij. */
.wp-block-post-content > *:has(> :last-child:is(h1, h2, h3, h4)) + * {
  margin-top: 1.5rem !important;
}

/* Ook lucht tussen header en het eerste blok (de hero). */
.wp-block-post-content > :first-child {
  margin-top: calc(var(--shine-section-gap) / 2) !important;
}

/* Uitzonderingen: de ticker moet de volle breedte houden. */
.shine-marquee p {
  max-width: none;
}

/* ==========================================================================
   Shopcomponenten op wide-breedte
   De constrained contentbreedte is prosemaat (~620px) — veel te smal voor
   tiles-grid, configurator, cart en checkout. Roots van de plugin-templates
   krijgen de wide-size van het theme.
   ========================================================================== */

.wp-block-post-content > .prindustry-product,
.wp-block-post-content > .prindustry-print-product,
.wp-block-post-content > .prindustry-cart,
.wp-block-post-content > .prindustry-cart-layout,
.wp-block-post-content > .prindustry-cart-empty,
.wp-block-post-content > .prindustry-checkout,
.wp-block-post-content > .prindustry-checkout-layout,
.wp-block-post-content > .prindustry-checkout-auth,
.wp-block-post-content > .prindustry-account,
.wp-block-post-content > .prindustry-orders,
.wp-block-post-content > .prindustry-orders-empty,
.wp-block-post-content > .prindustry-category-tiles,
.wp-block-post-content > .prindustry-categories,
.wp-block-post-content > .prindustry-products,
.wp-block-post-content > .prindustry-products-empty {
  max-width: var(--wp--style--global--wide-size, 1280px);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}