/* ==========================================================================
   pb-behandelingen.css
   Behandelingen (.p-behandelingen): Formidable boekingsformulier + trimsalon shop-favorieten.
   Link samen met pb-common.css (pb-common.css eerst).
   ========================================================================== */

.pb-main .shop-row{display:flex;gap:12px;overflow-x:auto;overflow-y:auto;padding-left:0;scrollbar-width:none;padding-top:0;padding-right:0;padding-bottom:2px;scroll-padding-left:0}
.pb-main .product{flex:0 0 146px;background:#fff;border:1px solid #eee2d8;border-radius:var(--r-md);padding-top:8px;padding-right:8px;padding-bottom:8px;padding-left:8px;position:relative;box-shadow:0 8px 18px rgba(77,51,34,.10);min-height:236px;overflow-x:hidden;overflow-y:hidden;transition:transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease}
.pb-main .product img{width:100%;height:118px;object-fit:contain;border-radius:5px;background:#f5f0eb;padding-top:7px;padding-right:7px;padding-bottom:7px;padding-left:7px;margin-top:0;margin-right:0;margin-bottom:9px;margin-left:0}
.pb-main .price{position:static;right:12px;top:12px;background:var(--accent);color:#fff;font-size:15px;font-weight:900;padding-top:5px;padding-right:8px;padding-bottom:5px;padding-left:8px;box-shadow:none;border-radius:4px;display:inline-flex;padding:0;line-height:1;align-items:center;justify-content:center;width:auto;max-width:max-content}
.pb-main .product h3{font-size:14px;line-height:1.14;margin-top:0;margin-right:0;margin-bottom:8px;margin-left:0;font-weight:850;font-family:Manrope,system-ui,sans-serif;color:#201a16;min-height:35px;letter-spacing:-.02em}
.pb-main .buy{height:34px;width:100%;background:linear-gradient(135deg,var(--button),var(--button2));color:#fff;border-radius:7px;font-size:12px;font-weight:850;border:0;box-shadow:0 10px 18px rgba(108,77,56,.18);transition:.2s ease;display:none;align-items:center;justify-content:center;gap:6px;font:800 12px/1 Manrope,system-ui,sans-serif;padding-top:10px;padding-right:12px;padding-bottom:10px;padding-left:12px;min-height:38px;text-decoration:none;font-family:Manrope,system-ui,sans-serif;letter-spacing:-.01em}
.pb-main .buy:after{content:'\2192 ';font-weight:900}
.pb-main .shop-row::-webkit-scrollbar{display:none}
.pb-main .product::after{content:"\2661";position:absolute;top:9px;right:9px;width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#29211c;font-size:20px;line-height:1;box-shadow:0 4px 12px rgba(77,51,34,.12);z-index:4}
.pb-main .product .price{position:static;display:inline-flex;align-items:center;justify-content:center;width:auto;max-width:max-content;background:var(--accent);color:#fff;box-shadow:none;border-radius:4px;padding-top:5px;padding-right:8px;padding-bottom:5px;padding-left:8px;font-size:15px;font-weight:900;line-height:1;padding:0}
.pb-main .product .buy{display:none}
.pb-main .buy .icon{width:14px;height:14px;stroke-width:1.55}
.pb-main .buy::after{content:none}
.pb-main .product:after{content:"\2661";position:absolute;right:10px;top:10px;width:31px;height:31px;border-radius:50%;background:#fff;display:grid;place-items:center;color:#29211c;font-size:21px;line-height:1;box-shadow:0 4px 12px rgba(77,51,34,.13);z-index:4}
.pb-main .buy{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:auto;min-height:38px;padding-top:10px;padding-right:12px;padding-bottom:10px;padding-left:12px;border-radius:3px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(135deg,var(--accent),#a96548);color:#fff;box-shadow:0 9px 18px rgba(111,72,49,.18);font-family:Manrope,system-ui,sans-serif;font-size:12px;line-height:1;font-weight:850;text-decoration:none}
.pb-main .buy svg{width:14px;height:14px;stroke-width:1.6}
.pb-main .shop-row{display:grid;gap:18px;overflow-x:visible;padding-top:0;padding-right:18px;padding-bottom:4px;padding-left:18px;scrollbar-width:none;grid-template-columns:repeat(5, 1fr);overflow-y:visible}
.pb-main .shop-row::-webkit-scrollbar{display:none}
.pb-main .product{background:#fff;border:1px solid #eee2d8;border-radius:var(--r);padding-top:8px;padding-right:8px;padding-bottom:8px;padding-left:8px;box-shadow:0 8px 18px rgba(77,51,34,.10);overflow-x:hidden;overflow-y:hidden;position:relative}
.pb-main .shop-row .product{flex:0 0 146px;min-height:232px}
.pb-main .product:after{content:"\2661";position:absolute;top:10px;right:10px;width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#29211c;font-size:21px;line-height:1;box-shadow:0 4px 12px rgba(77,51,34,.13);z-index:4}
.pb-main .product img{width:100%;height:118px;object-fit:contain;background:#f5f0eb;border-radius:var(--r);padding-top:8px;padding-right:8px;padding-bottom:8px;padding-left:8px;margin-top:0;margin-right:0;margin-bottom:9px;margin-left:0}
.pb-main .product h3{font-family:Manrope,system-ui,sans-serif;font-size:14px;line-height:1.14;font-weight:850;color:#201a16;margin-top:0;margin-right:0;margin-bottom:8px;margin-left:0;min-height:34px;letter-spacing:-.02em}
.pb-main .product .rating{font-size:11px;color:#9a6a2f;margin-top:0;margin-right:0;margin-bottom:7px;margin-left:0}
.pb-main .product .price{position:static;display:inline-flex;align-items:center;justify-content:center;width:auto;max-width:max-content;background:var(--accent);color:#fff;box-shadow:none;border-radius:4px;padding-top:5px;padding-right:8px;padding-bottom:5px;padding-left:8px;font-size:15px;font-weight:900;line-height:1;margin-top:0;margin-right:0;margin-bottom:8px;margin-left:0}
.pb-main .price{position:static;display:inline-flex;align-items:center;justify-content:center;width:auto;max-width:max-content;background:var(--accent);color:#fff;box-shadow:none;border-radius:4px;padding-top:5px;padding-right:8px;padding-bottom:5px;padding-left:8px;font-size:15px;font-weight:900;line-height:1;margin-top:0;margin-right:0;margin-bottom:8px;margin-left:0}
.pb-main .product .buy{width:100%;margin-top:4px}
.pb-main .shop-row .product .buy{height:40px;border-radius:12px;font-weight:800;font-size:0;padding-top:0;padding-right:18px;padding-bottom:0;padding-left:18px;display:inline-flex;align-items:center;justify-content:center;gap:0;font-family:Manrope, system-ui, sans-serif;background:var(--accent);color:#fff;border:0;box-shadow:0 6px 14px rgba(111, 72, 49, .22);position:absolute;right:12px;bottom:12px;width:40px;min-width:0;padding:0;margin:0;cursor:pointer}
.pb-main .shop-row .added_to_cart{display:none!important}
.pb-main .shop-row .product .buy svg{width:19px;height:19px;stroke-width:1.7}
.pb-main .shop-row .product .buy .icon{width:19px;height:19px;stroke-width:1.7}
.pb-main .shop-row .product .buy:hover{background:#b96a47}
.pb-main .product:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(77, 51, 34, .16)}
.pb-main .shop-row .product{position:relative;display:flex;flex-direction:column;flex:0 0 170px;min-height:0;padding-top:12px;padding-right:12px;padding-bottom:12px;padding-left:12px;overflow-x:hidden;overflow-y:hidden;background:#fff;border:1px solid #eee2d8;border-radius:14px;box-shadow:var(--shadow2)}
.pb-main .shop-row .product img{width:100%;height:158px;object-fit:cover;background:#f5f0eb;padding:0;border-radius:10px;margin-top:0;margin-right:0;margin-bottom:11px;margin-left:0;display:block}
.pb-main .shop-row .product .rating{display:none}
.pb-main .shop-row .product h3{font-family:Fraunces, serif;color:var(--brown);font-size:15.5px;line-height:1.25;font-weight:600;margin-top:0;margin-right:2px;margin-bottom:10px;margin-left:2px}
.pb-main .shop-row .product .price{margin-top:auto;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:50px;padding-bottom:0;padding-left:2px;display:flex;align-items:center;min-height:40px;background:none;border:0;border-radius:0;font-family:Fraunces, serif;color:var(--brown);font-size:19px;font-weight:600}
@media (min-width:768px) and (max-width:1024px){
  .pb-main .shop-row{grid-template-columns:repeat(3, 1fr);flex-wrap:nowrap;scroll-snap-type:x proximity}
  .pb-main .shop-row .product{flex:0 0 200px;width:200px;scroll-snap-align:start}
}
@media (max-width:767px){
  .pb-main .shop-cats{padding-right:18px;padding-left:18px}
  .pb-main .shop-row{padding-left:18px;padding-right:18px}
  .pb-main .product{border-radius:6px}
  .pb-main .shop-cats{display:flex;grid-template-columns:none;gap:10px;overflow-x:auto}
  .pb-main .shop-cat{flex:0 0 188px}
  .pb-main .shop-row{display:flex;gap:14px;overflow-x:auto;grid-template-columns:none;overflow-y:auto}
  .pb-main .shop-row .product .buy{font-weight:600;padding-top:12px;padding-right:12px;padding-bottom:12px;padding-left:12px;font-family:Fraunces, serif}
}
/* Winkelmandknop bij "Must Haves" stond hier verborgen; op de homepage staat
   hij er wel. De opmaak (rond knopje rechtsonder op de tegel) staat hierboven
   al gedefinieerd, dus alleen weer zichtbaar maken volstaat. */
.pb-main .shop-row .product .buy{display:inline-flex!important}
.pb-main .booking-section{padding-top:18px;padding-bottom:18px}
.pb-main .frm_forms,
.pb-main .frm_forms.with_frm_style{max-width:none;width:100%;margin-left:auto;margin-right:auto;color:var(--dark)}
/* Formidable zet zijn eigen formulierbreedte (standaard 760px, uit de
   Formidable-stijl) op het <form>-element zelf, niet op de .frm_forms-wrapper.
   Alleen die wrapper verbreden helpt dus niets: het formulier blijft daarbinnen
   gecentreerd staan. Hiermee vult het de volle breedte van de sectie, gelijk
   met de paginatitel en de rest van de inhoud. */
.pb-main .frm_forms{--form-width:100%}
.pb-main .frm_forms form{max-width:none;width:100%;margin-left:0;margin-right:0}
.pb-main .frm_forms fieldset{border:0;margin:0;padding:0;min-width:0}
.pb-main .frm_forms .frm_form_field{margin-bottom:13px}
.pb-main .frm_forms .frm_error_style,
.pb-main .frm_forms .frm_error{font-size:12px;color:#b4452f}
.pb-main .frm_forms .pb-step-head{margin-bottom:14px}
.pb-main .frm_forms .pb-step-head .h2{margin-top:0}
.pb-main .frm_forms .frm_primary_label{display:block;color:#7d6757;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:850;padding:0 0 6px;margin:0;line-height:1.2}
.pb-main .frm_forms input[type="text"],
.pb-main .frm_forms input[type="email"],
.pb-main .frm_forms input[type="tel"],
.pb-main .frm_forms input[type="number"],
.pb-main .frm_forms select,
.pb-main .frm_forms textarea{width:100%!important;border:1px solid #d5c2b3!important;background:#fffaf5!important;color:var(--dark)!important;border-radius:3px!important;min-height:44px!important;padding:0 11px!important;font-family:Manrope,system-ui,sans-serif!important;font-size:14px!important;box-shadow:none!important}
.pb-main .frm_forms textarea{min-height:96px!important;padding-top:11px!important;padding-bottom:11px!important;resize:vertical}
.pb-main .frm_forms input::placeholder,
.pb-main .frm_forms textarea::placeholder{color:#9a8778;font-size:13px}
.pb-main .frm_forms input:focus,
.pb-main .frm_forms select:focus,
.pb-main .frm_forms textarea:focus{border-color:var(--accent)!important;outline:0}
.pb-main .frm_forms .frm_half{grid-column:span 6}
.pb-main .frm_forms .form-note{color:var(--muted);font-size:13px;line-height:1.5;margin:6px 2px 4px}
/* Behandelingen-kiezer — compacte lijst, één regel per behandeling.
   De drie onderdelen (.pb-tr-naam / .pb-tr-duur / .pb-tr-prijs) komen uit het
   optielabel dat inc/pb-behandelingen-form-options.php opbouwt: Formidable
   staat HTML toe in een optielabel, dus de opsplitsing gebeurt serverkant en
   niet in de browser. Let op: Formidable toont `data-frmprice` zélf nergens —
   dat attribuut voedt alleen het Totaal-veld — vandaar dat de zichtbare prijs
   uit het label komt. */
.pb-main .frm_forms .pb-treatments > .frm_primary_label{display:none}
/* Eén kolom over de volle breedte: de namen ("Doodle Medium — schofthoogte
   43 t/m 52 cm") zijn te lang voor twee kolommen en braken daar over twee
   regels. Zo blijft elke regel één regel en staat de prijs netjes rechts. */
.pb-main .frm_forms .pb-treatments .frm_opt_container{display:block;border:0;padding:0;border-top:1px solid var(--line)}
.pb-main .frm_forms .pb-treatments .frm_checkbox,
.pb-main .frm_forms .pb-treatments .frm_radio{margin:0}
.pb-main .frm_forms .pb-treatments .frm_checkbox label,
.pb-main .frm_forms .pb-treatments .frm_radio label{display:flex;align-items:center;gap:12px;margin:0;padding:13px 16px;cursor:pointer;width:100%;color:var(--brown);font-size:15.5px;font-weight:700;line-height:1.3;transition:background .15s ease;
	/* Deze vier zetten de kaartopmaak uit die in de pagina zelf staat
	   (inline <style> in Bricks, selector `.pb-booking .pb-treatments
	   .frm_checkbox label`). Weglaten is niet genoeg: wat je niet overschrijft
	   blijft gewoon staan, en dan houd je per regel een omlijnd blokje. */
	background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
.pb-main .frm_forms .pb-treatments .frm_checkbox label:hover,
.pb-main .frm_forms .pb-treatments .frm_radio label:hover{background:#fff8f1}
/* Het keuzerondje.
   Formidable dwingt `height:16px !important` af op zijn eigen checkboxes, en
   die regel is met CSS niet te overrulen — ook niet met een specifiekere
   selector plus !important (nagemeten in de browser: de eigen regel wordt
   simpelweg niet toegepast). Vandaar deze aanpak: de checkbox zelf wordt
   onzichtbaar gemaakt en het rondje is een ::before op het label. Een
   pseudo-element kan Formidable niet aanpassen, dus het blijft netjes rond.
   Klikken op het label schakelt de checkbox gewoon, dus dit verandert niets
   aan de bediening of de toegankelijkheid. */
.pb-main .frm_forms .pb-treatments .frm_checkbox input[type="checkbox"],
.pb-main .frm_forms .pb-treatments .frm_radio input[type="radio"]{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;pointer-events:none}
.pb-main .frm_forms .pb-treatments .frm_checkbox label::before,
.pb-main .frm_forms .pb-treatments .frm_radio label::before{content:"";flex:0 0 20px;width:20px;height:20px;box-sizing:border-box;display:block;border:2px solid #d3bbaa;border-radius:50%;background:#fff;transition:border-color .15s ease,background .15s ease}
.pb-main .frm_forms .pb-treatments label:has(input:checked)::before{border-color:var(--accent);background:radial-gradient(circle at center,var(--accent) 0 42%,#fff 44%)}
/* Opgesplitst label: naam vet, duur klein en grijs eronder, prijs rechts */
.pb-main .frm_forms .pb-treatments .pb-tr-midden{flex:1 1 auto;min-width:0;display:block}
.pb-main .frm_forms .pb-treatments .pb-tr-naam{display:block;overflow-wrap:anywhere}
.pb-main .frm_forms .pb-treatments .pb-tr-duur{display:block;margin-top:1px;font-size:12px;font-weight:600;line-height:1.3;color:var(--muted)}
.pb-main .frm_forms .pb-treatments .pb-tr-prijs{flex:0 0 auto;font-family:Fraunces,serif;font-size:18px;font-weight:600;color:var(--brown);white-space:nowrap;padding-left:12px}
.pb-main .frm_forms .pb-treatments label:has(input:checked){background:#fff8f1}
.pb-main .frm_forms .pb-treatments label:has(input:checked) .pb-tr-prijs{color:var(--accent)}
.pb-main .frm_forms .pb-total{display:flex;align-items:center;gap:8px;background:var(--brown);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow2);margin:4px 0 14px}
.pb-main .frm_forms .pb-total .frm_primary_label{order:1;margin:0;margin-right:auto;color:rgba(255,255,255,.78);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:850;padding:0}
/* Formidable toont het totaal in <p class="frm_total_formatted"> en verbergt
   het echte invoerveld in .frm_with_box.frm_hidden. Daarom hangt de opmaak aan
   die paragraaf en niet meer aan het input-veld — dat laatste leverde een los
   euroteken rechts en het bedrag links op.
   De regel hieronder zet het oude euroteken op de balk zelf expliciet uit;
   anders staat er twee keer een € zodra een oudere versie van dit bestand nog
   in de browsercache zit. */
.pb-main .frm_forms .pb-total::before{content:none}
.pb-main .frm_forms .pb-total .frm_total_formatted{order:2;margin:0;color:#fff;font-family:Fraunces,serif;font-size:24px;font-weight:600;line-height:1;white-space:nowrap}
.pb-main .frm_forms .pb-total .frm_total_formatted::before{content:"\20AC\00A0"}
.pb-main .frm_forms .pb-total .frm_with_box{display:none}
.pb-main .frm_forms .pb-total .frm_description,
.pb-main .frm_forms .pb-total .frm_required{display:none}
.pb-main .frm_forms .frm_submit{margin-top:8px;clear:both}
.pb-main .frm_forms .frm_submit button,
.pb-main .frm_forms .frm_submit input[type="submit"],
.pb-main .frm_forms .frm_button_submit,
.pb-main .frm_forms .frm_prev_page{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,var(--accent),#a96548)!important;color:#fff!important;font:800 14px/1 Manrope,system-ui,sans-serif!important;padding:0 18px!important;min-height:44px!important;border:0!important;border-radius:var(--r-md)!important;box-shadow:0 8px 16px rgba(111,72,49,.18);cursor:pointer;transition:.2s ease;text-shadow:none}
.pb-main .frm_forms .frm_submit .frm_prev_page,
.pb-main .frm_forms .frm_submit button.frm_prev_page{background:#efe1d6!important;color:var(--brown)!important;box-shadow:none!important}
.pb-main .frm_forms .frm_submit button:hover{transform:translateY(-1px)}
@media (max-width:767px){
  .pb-main .frm_forms,
  .pb-main .frm_forms.with_frm_style{max-width:none}
  /* Op mobiel is er te weinig ruimte om naam en prijs op één regel te houden:
     de prijs schuift daarom onder de naam i.p.v. rechts ernaast. */
  .pb-main .frm_forms .pb-treatments .frm_checkbox label,
  .pb-main .frm_forms .pb-treatments .frm_radio label{flex-wrap:wrap;font-size:14.5px;padding:11px 2px}
  .pb-main .frm_forms .pb-treatments .pb-tr-prijs{font-size:16px;padding-left:32px;width:100%;margin-top:2px}
  .pb-main .frm_forms .pb-total .frm_total_formatted{font-size:21px}
}