/*
Theme Name: Pettiq
Theme URI: https://pettiq.nl
Author: MoaiApps
Author URI: https://moaiapps.nl
Description: Warm, eigen thema voor Pettiq — online dierenspeciaalzaak met gepersonaliseerde artikelen.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: pettiq
*/

:root {
  --p-radius: 22px;
  --p-radius-s: 14px;
  --p-shadow: 0 1px 2px rgba(30,58,52,.06), 0 10px 30px -12px rgba(30,58,52,.18);
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--wp--preset--color--abrikoos); color: var(--wp--preset--color--inkt); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--wp--preset--color--abrikoos); outline-offset: 3px; border-radius: 6px; }
a { text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
img { border-radius: inherit; }

/* ---------- Kopteksten / accenten ---------- */
.p-eyebrow { font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--den); display: inline-flex; align-items: center; gap: .55rem; margin: 0; }
.p-eyebrow::before { content: ""; width: 1.1rem; height: 1.1rem; background: currentColor; -webkit-mask: url(assets/paw.svg) center/contain no-repeat; mask: url(assets/paw.svg) center/contain no-repeat; color: var(--wp--preset--color--abrikoos); background-color: var(--wp--preset--color--abrikoos); }
.p-hand { font-family: var(--wp--preset--font-family--caveat); font-weight: 700; color: var(--wp--preset--color--abrikoos-donker); font-size: 1.15em; line-height: 1; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; color: var(--wp--preset--color--den); }

/* ---------- Header ---------- */
.p-topbar { font-size: .85rem; font-weight: 600; }
.p-topbar p { margin: 0; }
.p-topbar .p-topbar__items { display: flex; justify-content: center; gap: 2.2rem; flex-wrap: wrap; }
.p-topbar .p-topbar__items span::before { content: "•"; color: var(--wp--preset--color--abrikoos); margin-right: .6rem; }
.p-topbar .p-topbar__items span:first-child::before { content: none; }
@media (max-width: 720px) { .p-topbar .p-topbar__items span:not(:first-child) { display: none; } }

/* Geen backdrop-filter: die maakt de header het 'containing block' voor het mobiele menu (position: fixed), waardoor het menu in de header bleef steken. */
.p-header { position: sticky; top: 0; z-index: 50; background: var(--wp--preset--color--creme); border-bottom: 1px solid rgba(30,58,52,.08); }
.admin-bar .p-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .p-header { top: 0; } }
.p-logo { display: block; line-height: 0; }
.p-logo img { height: 42px; width: auto; }
@media (max-width: 600px) { .p-logo img { height: 34px; } }

.p-header .wp-block-navigation a { text-decoration: none; color: var(--wp--preset--color--inkt); padding: .45rem .2rem; background-image: linear-gradient(var(--wp--preset--color--abrikoos), var(--wp--preset--color--abrikoos)); background-size: 0 3px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .25s ease; }
.p-header .wp-block-navigation a:hover, .p-header .wp-block-navigation a:focus { color: var(--wp--preset--color--inkt); background-size: 100% 3px; }
.p-header .wp-block-navigation .p-nav-accent a { color: var(--wp--preset--color--abrikoos-donker); }
.p-header .wp-block-navigation .p-nav-accent a:hover { color: var(--wp--preset--color--abrikoos-donker); }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--creme) !important; padding: 1.5rem !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { font-family: var(--wp--preset--font-family--fraunces); font-size: 1.8rem; gap: .6rem; }

.p-header .wp-block-search__inside-wrapper { border: 1.5px solid rgba(30,58,52,.16); border-radius: 999px; background: #fff; padding: 2px 2px 2px 14px; }
.p-header .wp-block-search__input { border: 0; background: transparent; font-size: .95rem; min-width: 12rem; }
.p-header .wp-block-search__button { background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--creme); border-radius: 999px; padding: .5rem; margin: 0; }
.p-header .wp-block-search__button:hover { background: var(--wp--preset--color--den); color: var(--wp--preset--color--creme); }
.p-header .wp-block-search__button svg { fill: currentColor; }
@media (max-width: 1020px) { .p-header .wp-block-search { display: none; } }
.p-header .wc-block-mini-cart__button, .p-header .wc-block-customer-account a { color: var(--wp--preset--color--inkt); }
.p-header .wc-block-mini-cart__button:hover { color: var(--wp--preset--color--den); }
.p-header .wc-block-mini-cart__badge { background: var(--wp--preset--color--abrikoos) !important; color: var(--wp--preset--color--inkt) !important; font-weight: 800; }

/* ---------- Knoppen ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link { border: 2px solid var(--wp--preset--color--inkt); color: var(--wp--preset--color--inkt); background: transparent; padding: calc(.95rem - 2px) calc(1.6rem - 2px); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover, .wp-block-button.is-style-outline > .wp-block-button__link:focus { background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--creme); border-color: var(--wp--preset--color--inkt); }
.wp-block-button.p-btn-accent > .wp-block-button__link { background: var(--wp--preset--color--abrikoos); color: var(--wp--preset--color--inkt); }
.wp-block-button.p-btn-accent > .wp-block-button__link:hover, .wp-block-button.p-btn-accent > .wp-block-button__link:focus { background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--creme); }
.wp-block-button__link { transition: background-color .2s, color .2s, transform .2s; }
.wp-block-button__link:active { transform: translateY(1px); }
.p-on-dark .wp-block-button.is-style-outline > .wp-block-button__link { border-color: var(--wp--preset--color--creme); color: var(--wp--preset--color--creme); }
.p-on-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--creme); color: var(--wp--preset--color--inkt); }

/* ---------- Hero ---------- */
.p-hero { position: relative; overflow: hidden; }
.p-hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; }
.p-hero__lead { font-size: 1.2rem; max-width: 34rem; color: var(--wp--preset--color--grijs); }
.p-hero::before { content: ""; position: absolute; width: 46rem; height: 46rem; right: -14rem; top: -10rem; background: radial-gradient(closest-side, var(--wp--preset--color--perzik), transparent); opacity: .9; pointer-events: none; }
.p-hero > * { position: relative; }
.p-trust { display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: .9rem; font-weight: 600; color: var(--wp--preset--color--grijs); margin-top: .5rem; }
.p-trust span { display: inline-flex; align-items: center; gap: .4rem; }
.p-trust svg { width: 18px; height: 18px; color: var(--wp--preset--color--den); flex: none; }

/* ---------- Naamlab (hero-configurator) ---------- */
.p-lab { background: #fff; border-radius: 28px; box-shadow: var(--p-shadow); padding: clamp(1.25rem, 3vw, 2rem); position: relative; }
.p-lab__stage { background: var(--wp--preset--color--salie); border-radius: 20px; aspect-ratio: 16/11; display: grid; place-items: center; position: relative; overflow: hidden; transition: background-color .35s; }
.p-lab__stage[data-kleur="perzik"] { background: var(--wp--preset--color--perzik); }
.p-lab__stage[data-kleur="lucht"] { background: var(--wp--preset--color--lucht); }
.p-lab__stage[data-kleur="boter"] { background: var(--wp--preset--color--boter); }
.p-lab__stage svg { width: 82%; height: auto; overflow: visible; filter: drop-shadow(0 18px 18px rgba(30,58,52,.14)); transition: transform .4s cubic-bezier(.3,1.4,.5,1); }
.p-lab__stage.is-bump svg { transform: rotate(-3deg) scale(1.03); }
.p-lab__label { position: absolute; left: 1rem; top: .9rem; font-family: var(--wp--preset--font-family--caveat); font-size: 1.5rem; color: var(--wp--preset--color--inkt); opacity: .75; }
.p-lab__row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-top: 1.1rem; }
.p-lab label.p-lab__field { flex: 1 1 14rem; display: block; }
.p-lab label.p-lab__field span { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--grijs); margin-bottom: .35rem; }
.p-input, .p-lab input[type="text"] { width: 100%; box-sizing: border-box; font: 600 1.15rem/1.2 var(--wp--preset--font-family--figtree); color: var(--wp--preset--color--inkt); padding: .85rem 1rem; border: 2px solid rgba(30,58,52,.15); border-radius: var(--p-radius-s); background: var(--wp--preset--color--creme); transition: border-color .2s, background-color .2s; }
.p-input:focus, .p-lab input[type="text"]:focus { outline: none; border-color: var(--wp--preset--color--den); background: #fff; }
.p-seg { display: inline-flex; background: var(--wp--preset--color--creme); border-radius: 999px; padding: 4px; gap: 2px; border: 1.5px solid rgba(30,58,52,.1); }
.p-seg button { border: 0; background: transparent; color: var(--wp--preset--color--inkt); font: 600 .9rem var(--wp--preset--font-family--figtree); padding: .5rem .9rem; border-radius: 999px; cursor: pointer; }
.p-seg button:hover { background: var(--wp--preset--color--zand); color: var(--wp--preset--color--inkt); }
.p-seg button[aria-pressed="true"] { background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--creme); }
.p-seg button[aria-pressed="true"]:hover { background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--creme); }
.p-swatches { display: inline-flex; gap: .45rem; }
.p-swatches button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px rgba(30,58,52,.2); cursor: pointer; padding: 0; }
.p-swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--wp--preset--color--inkt); }
.p-lab__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1.5px dashed rgba(30,58,52,.14); }
.p-lab__price { font-family: var(--wp--preset--font-family--fraunces); font-size: 1.6rem; font-weight: 600; }
.p-lab__price small { font-family: var(--wp--preset--font-family--figtree); font-size: .85rem; font-weight: 500; color: var(--wp--preset--color--grijs); display: block; }
.p-btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--creme); text-decoration: none; font-weight: 700; padding: .95rem 1.5rem; border-radius: 999px; transition: background-color .2s; }
.p-btn:hover, .p-btn:focus { background: var(--wp--preset--color--den); color: var(--wp--preset--color--creme); }
.p-btn svg { width: 18px; height: 18px; transition: transform .2s; }
.p-btn:hover svg { transform: translateX(3px); }
.p-sticker { position: absolute; right: -10px; top: -18px; background: var(--wp--preset--color--abrikoos); color: var(--wp--preset--color--inkt); font-family: var(--wp--preset--font-family--caveat); font-weight: 700; font-size: 1.35rem; line-height: 1; padding: .9rem .8rem; border-radius: 50%; width: 92px; height: 92px; box-sizing: border-box; display: grid; place-items: center; text-align: center; transform: rotate(10deg); box-shadow: var(--p-shadow); }
@media (max-width: 600px) { .p-sticker { width: 74px; height: 74px; font-size: 1.1rem; right: -4px; } }

/* ---------- Categorie-tegels ---------- */
.p-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.75rem, 2vw, 1.5rem); }
@media (max-width: 900px) { .p-cats { grid-template-columns: repeat(2, 1fr); } }
.p-cat { position: relative; display: block; border-radius: var(--p-radius); overflow: hidden; text-decoration: none; color: var(--wp--preset--color--inkt); background: var(--wp--preset--color--zand); aspect-ratio: 4/5; isolation: isolate; }
.p-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.p-cat:hover img { transform: scale(1.06); }
.p-cat__label { position: absolute; left: .75rem; right: .75rem; bottom: .75rem; background: #fff; border-radius: var(--p-radius-s); padding: .8rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.p-cat__label strong { font-family: var(--wp--preset--font-family--fraunces); font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 600; }
.p-cat__label small { display: block; font-size: .8rem; color: var(--wp--preset--color--grijs); font-weight: 500; }
.p-cat__arrow { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--wp--preset--color--creme); color: var(--wp--preset--color--inkt); transition: background-color .2s, color .2s; }
.p-cat:hover .p-cat__arrow { background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--creme); }
.p-cat:hover, .p-cat:focus { color: var(--wp--preset--color--inkt); }
.p-cat--accent .p-cat__label { background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--creme); }
.p-cat--accent .p-cat__label small { color: #C9D8D2; }
.p-cat--accent .p-cat__arrow { background: var(--wp--preset--color--abrikoos); color: var(--wp--preset--color--inkt); }
.p-cat--accent:hover .p-cat__arrow { background: var(--wp--preset--color--creme); color: var(--wp--preset--color--inkt); }
.p-cat--accent:hover, .p-cat--accent:focus { color: var(--wp--preset--color--creme); }

/* ---------- Stappen ---------- */
.p-steps { counter-reset: stap; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 860px) { .p-steps { grid-template-columns: 1fr; } }
.p-step { background: rgba(255,255,255,.65); border-radius: var(--p-radius); padding: 1.6rem; position: relative; }
.p-step::before { counter-increment: stap; content: counter(stap); font-family: var(--wp--preset--font-family--fraunces); font-weight: 600; font-size: 1.3rem; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--creme); margin-bottom: 1rem; }
.p-step h3 { font-size: 1.35rem; margin: 0 0 .4rem; }
.p-step p { margin: 0; color: var(--wp--preset--color--grijs); }
.p-step .p-hand { position: absolute; right: 1.2rem; top: 1.3rem; transform: rotate(-4deg); }

/* ---------- Productkaarten (WooCommerce blokken) ---------- */
.wc-block-product-template .wc-block-product, .wp-block-woocommerce-product-template .wc-block-product, .wc-block-grid__product { background: #fff; border-radius: var(--p-radius); padding: .6rem .6rem 1.1rem; box-shadow: 0 1px 2px rgba(30,58,52,.05); transition: transform .25s ease, box-shadow .25s ease; text-align: left; }
.wc-block-product-template .wc-block-product:hover, .wc-block-grid__product:hover { transform: translateY(-4px); box-shadow: var(--p-shadow); }
.wc-block-components-product-image, .wc-block-product .wp-block-woocommerce-product-image { border-radius: 16px; overflow: hidden; }
.wc-block-product .wp-block-post-title, .wc-block-product h3 { font-family: var(--wp--preset--font-family--fraunces); font-weight: 600; font-size: 1.12rem !important; line-height: 1.25; margin: .9rem .5rem .25rem !important; text-align: left !important; }
.wc-block-product .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--inkt); }
.wc-block-product .wp-block-post-title a:hover { color: var(--wp--preset--color--den); text-decoration: underline; }
.wc-block-product .wc-block-components-product-price, .wc-block-product .wp-block-woocommerce-product-price { margin: 0 .5rem !important; text-align: left !important; font-size: 1.02rem !important; justify-content: flex-start !important; }
.wc-block-product .wp-block-button, .wc-block-product .wc-block-components-product-button { margin: .9rem .5rem 0 !important; justify-content: flex-start !important; align-items: flex-start !important; }
.wc-block-product .wp-block-button__link, .wc-block-components-product-button__button { font-size: .9rem !important; padding: .65rem 1.1rem !important; border-radius: 999px !important; background: var(--wp--preset--color--creme) !important; color: var(--wp--preset--color--inkt) !important; border: 1.5px solid rgba(30,58,52,.18) !important; font-weight: 700 !important; }
.wc-block-product .wp-block-button__link:hover, .wc-block-components-product-button__button:hover { background: var(--wp--preset--color--inkt) !important; color: var(--wp--preset--color--creme) !important; border-color: var(--wp--preset--color--inkt) !important; }
.wc-block-components-product-sale-badge, .wc-block-components-product-badge { background: var(--wp--preset--color--abrikoos) !important; color: var(--wp--preset--color--inkt) !important; border: 0 !important; border-radius: 999px !important; font-weight: 700; }
.p-badge-naam { position: absolute; z-index: 2; left: .9rem; top: .9rem; background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--creme); font-size: .75rem; font-weight: 700; padding: .3rem .65rem; border-radius: 999px; letter-spacing: .02em; }

/* ---------- Woo algemeen ---------- */
.woocommerce-breadcrumb, .wc-block-breadcrumbs { font-size: .9rem; color: var(--wp--preset--color--grijs); }
.wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .single_add_to_cart_button { background: var(--wp--preset--color--inkt) !important; color: var(--wp--preset--color--creme) !important; border-radius: 999px !important; font-weight: 700 !important; border: 0 !important; }
.wc-block-components-button:not(.is-link):hover, .wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover, .single_add_to_cart_button:hover { background: var(--wp--preset--color--den) !important; color: var(--wp--preset--color--creme) !important; }
.single_add_to_cart_button { padding: 1rem 2rem !important; font-size: 1.05rem !important; }
.quantity .qty { border-radius: 999px; border: 1.5px solid rgba(30,58,52,.2); padding: .8rem; min-width: 4.5rem; text-align: center; font-weight: 700; background: #fff; }
.wp-block-woocommerce-product-image-gallery img, .woocommerce-product-gallery img { border-radius: var(--p-radius); }
.woocommerce-product-gallery__trigger { display: none; }
.wc-block-components-notice-banner { border-radius: var(--p-radius-s); }
.wc-block-catalog-sorting select, .woocommerce-ordering select { border-radius: 999px; border: 1.5px solid rgba(30,58,52,.18); padding: .55rem 1rem; background: #fff; font: inherit; }
.wp-block-query-pagination a, .wc-block-pagination a { text-decoration: none; }

/* Personalisatie op productpagina */
.p-perso { background: var(--wp--preset--color--salie); border-radius: var(--p-radius); padding: 1.25rem; margin: 0 0 1.25rem; }
.p-perso__title { font-family: var(--wp--preset--font-family--fraunces); font-weight: 600; font-size: 1.2rem; margin: 0 0 .2rem; display: flex; align-items: center; gap: .5rem; }
.p-perso__intro { margin: 0 0 .9rem; font-size: .95rem; color: var(--wp--preset--color--grijs); }
.p-perso label { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 .35rem; }
.p-perso .p-input { background: #fff; }
.p-perso__meta { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .75rem; }
.p-perso__count { font-size: .85rem; color: var(--wp--preset--color--grijs); }
.p-perso__preview { margin-top: .9rem; background: #fff; border-radius: var(--p-radius-s); padding: 1rem; text-align: center; min-height: 3.6rem; display: grid; place-items: center; }
.p-perso__preview span { font-family: var(--wp--preset--font-family--fraunces); font-weight: 700; font-size: 2rem; letter-spacing: .06em; color: #8A5E22; line-height: 1; word-break: break-word; }
.p-perso__preview[data-font="speels"] span { font-family: var(--wp--preset--font-family--caveat); letter-spacing: 0; font-size: 2.5rem; }
.p-perso__preview span:empty::before { content: "Jouw naam hier"; opacity: .35; }

/* ---------- USP-band ---------- */
.p-usps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .p-usps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .p-usps { grid-template-columns: 1fr; } }
.p-usp { display: flex; gap: .9rem; align-items: flex-start; }
.p-usp__icon { width: 48px; height: 48px; flex: none; border-radius: 16px; display: grid; place-items: center; background: rgba(251,246,238,.1); color: var(--wp--preset--color--abrikoos); }
.p-usp__icon svg { width: 24px; height: 24px; }
.p-usp strong { display: block; font-family: var(--wp--preset--font-family--fraunces); font-size: 1.12rem; font-weight: 600; color: var(--wp--preset--color--creme); }
.p-usp span { font-size: .92rem; color: #E6EFEB; }

/* ---------- Verhaal ---------- */
.p-story__img { border-radius: 28px; overflow: hidden; aspect-ratio: 1; background: var(--wp--preset--color--boter); position: relative; }
.p-story__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-story__note { position: absolute; left: 1.2rem; bottom: 1.2rem; background: #fff; padding: .8rem 1.1rem; border-radius: 14px; font-family: var(--wp--preset--font-family--caveat); font-size: 1.5rem; line-height: 1.1; transform: rotate(-3deg); box-shadow: var(--p-shadow); color: var(--wp--preset--color--inkt); }

/* ---------- Footer ---------- */
.p-footer { color: #C9D8D2; }
.p-footer h2, .p-footer h3, .p-footer h4 { color: var(--wp--preset--color--creme); font-size: 1.1rem; margin-bottom: .8rem; }
.p-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.p-footer a { color: var(--wp--preset--color--creme); text-decoration: none; }
.p-footer a:hover, .p-footer a:focus { color: var(--wp--preset--color--abrikoos); text-decoration: underline; }
.p-footer .p-footer__logo img { height: 40px; width: auto; }
.p-footer__bottom { border-top: 1px solid rgba(251,246,238,.14); font-size: .85rem; }
.p-footer__bottom p { margin: 0; }
.p-pay { display: flex; gap: .5rem; flex-wrap: wrap; }
.p-pay span { background: rgba(251,246,238,.1); color: var(--wp--preset--color--creme); border-radius: 8px; padding: .3rem .6rem; font-size: .8rem; font-weight: 700; }

/* ---------- Pagina's ---------- */
.p-page-head { background: var(--wp--preset--color--zand); }
.wp-block-post-content > p:first-child { font-size: 1.15rem; }

/* Beweging beperken */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Radio-knoppen als segmenten (personalisatie) */
.p-seg--radio label { display: inline-flex; align-items: center; margin: 0; padding: .5rem .9rem; border-radius: 999px; font-size: .9rem; font-weight: 600; letter-spacing: 0; text-transform: none; cursor: pointer; color: var(--wp--preset--color--inkt); background: transparent; }
.p-seg--radio label:hover { background: var(--wp--preset--color--zand); color: var(--wp--preset--color--inkt); }
.p-seg--radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.p-seg--radio label:has(input:checked), .p-seg--radio label:has(input:checked):hover { background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--creme); }
.p-seg--radio label:has(input:focus-visible) { outline: 3px solid var(--wp--preset--color--abrikoos); outline-offset: 2px; }

/* Fixes */
.p-lab svg [hidden] { display: none; }
.p-sticker { z-index: 3; }
.wc-block-product .wc-block-components-product-price { padding: 0 !important; }
.wc-block-product .wp-block-woocommerce-product-price .wc-block-components-product-price { margin: 0 !important; }
footer.wp-block-template-part { margin-top: var(--wp--preset--spacing--60); }
.home footer.wp-block-template-part { margin-top: 0; }
.single-product .wp-block-post-title { font-size: clamp(2rem, 3.6vw, 3rem) !important; line-height: 1.08; }
.single-product .woocommerce-Tabs-panel h2, .woocommerce-tabs h2 { font-size: var(--wp--preset--font-size--x-large); }
.single-product .wp-block-woocommerce-related-products h2, .single-product .related h2 { font-size: var(--wp--preset--font-size--xx-large); }
.single-product .wp-block-woocommerce-product-meta { font-size: .9rem; color: var(--wp--preset--color--grijs); }
.wc-block-components-product-price, .single-product .wp-block-woocommerce-product-price { font-family: var(--wp--preset--font-family--figtree); }
.single-product .wp-block-woocommerce-product-price { font-size: 1.5rem !important; font-weight: 800; }
.p-perso__row { margin-top: .9rem; }
.p-perso__row > span { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 .35rem; }

/* Mobiel */
.wc-block-product .wp-block-post-title { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; word-break: normal; }
@media (max-width: 600px) {
  .p-header .wp-block-navigation { order: 3; }
  .p-header__icons { margin-left: auto; }
  .p-cat__label { left: .5rem; right: .5rem; bottom: .5rem; padding: .65rem .75rem; }
  .p-cat__label small { display: none; }
  .p-cat__arrow { width: 30px; height: 30px; }
  .p-cat__arrow svg { width: 15px; height: 15px; }
  .wc-block-product .wp-block-post-title { font-size: 1rem !important; margin: .7rem .3rem .2rem !important; }
  .wc-block-product .wp-block-woocommerce-product-price { margin: 0 .3rem !important; }
  .wc-block-product .wp-block-button, .wc-block-product .wc-block-components-product-button { margin: .7rem .3rem 0 !important; }
  .wc-block-product .wp-block-button__link, .wc-block-components-product-button__button { font-size: .82rem !important; padding: .55rem .85rem !important; white-space: nowrap; }
  .p-lab__foot .p-btn { width: 100%; justify-content: center; }
  .p-hero h1 { font-size: 2.5rem; }
}

/* ---------- Etalage (hero zonder naamlab) ---------- */
.p-etalage { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.6rem, 1.6vw, 1rem); }
.p-etalage__item { display: block; background: #fff; border-radius: var(--p-radius); padding: .6rem .6rem .9rem; text-decoration: none; color: var(--wp--preset--color--inkt); box-shadow: 0 1px 2px rgba(30,58,52,.05); transition: transform .25s ease, box-shadow .25s ease; }
.p-etalage__item:nth-child(odd) { transform: translateY(1.4rem); }
.p-etalage__item:hover, .p-etalage__item:focus { color: var(--wp--preset--color--inkt); box-shadow: var(--p-shadow); transform: translateY(-3px); }
.p-etalage__item:nth-child(odd):hover { transform: translateY(calc(1.4rem - 3px)); }
.p-etalage__img { display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 1; background: #fff; }
.p-etalage__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.p-etalage__item--0 .p-etalage__img { background: var(--wp--preset--color--salie); }
.p-etalage__item--1 .p-etalage__img { background: var(--wp--preset--color--perzik); }
.p-etalage__item--2 .p-etalage__img { background: var(--wp--preset--color--boter); }
.p-etalage__item--3 .p-etalage__img { background: var(--wp--preset--color--lucht); }
.p-etalage__img img { mix-blend-mode: multiply; }
.p-etalage__txt { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .7rem .3rem 0; }
.p-etalage__txt strong { font-family: var(--wp--preset--font-family--fraunces); font-weight: 600; font-size: 1rem; line-height: 1.2; }
.p-etalage__txt span { font-weight: 800; font-size: .95rem; white-space: nowrap; }
.p-etalage .p-sticker { right: -12px; top: -22px; }
@media (max-width: 600px) { .p-etalage__txt { flex-direction: column; gap: .15rem; } .p-etalage__txt strong { font-size: .9rem; } }

/* Mobiel menu (overlay) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a { padding: .3rem 0; }
.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--inkt); }
.wp-block-navigation__responsive-container-open svg, .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; }

/* ---------- Mobiel menu (eigen schuifpaneel) ---------- */
.p-burger { display: none; align-items: center; gap: .45rem; border: 0; background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--creme); font: 700 .9rem var(--wp--preset--font-family--figtree); padding: .55rem .9rem .55rem .75rem; border-radius: 999px; cursor: pointer; }
.p-burger:hover, .p-burger:focus-visible { background: var(--wp--preset--color--den); color: var(--wp--preset--color--creme); }
.p-burger__lines { display: grid; gap: 3px; width: 16px; }
.p-burger__lines span { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.p-burger__lines span:nth-child(2) { width: 70%; }
@media (max-width: 900px) {
  .p-nav-desktop { display: none !important; }
  .p-burger { display: inline-flex; }
  .p-header__icons { margin-left: auto; }
}
.p-drawer { position: fixed; inset: 0; z-index: 1000; }
.p-drawer[hidden] { display: none; }
.p-drawer__scrim { position: absolute; inset: 0; background: rgba(30,58,52,.45); opacity: 0; transition: opacity .3s ease; }
.p-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(90vw, 400px); background: var(--wp--preset--color--creme); box-shadow: -20px 0 50px -20px rgba(30,58,52,.4); display: flex; flex-direction: column; gap: 1.1rem; padding: 1rem 1.1rem 1.4rem; overflow-y: auto; transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); border-radius: 24px 0 0 24px; }
.p-drawer.is-open .p-drawer__scrim { opacity: 1; }
.p-drawer.is-open .p-drawer__panel { transform: none; }
.p-drawer__top { display: flex; justify-content: space-between; align-items: center; }
.p-drawer__top .p-logo img { height: 34px; }
.p-drawer__close { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--wp--preset--color--inkt); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 2px rgba(30,58,52,.08); }
.p-drawer__close:hover { background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--creme); }
.p-drawer__search { display: flex; align-items: center; background: #fff; border: 1.5px solid rgba(30,58,52,.14); border-radius: 999px; padding: 3px 3px 3px 1rem; }
.p-drawer__search input[type="search"] { flex: 1; min-width: 0; border: 0; background: transparent; font: 500 1rem var(--wp--preset--font-family--figtree); color: var(--wp--preset--color--inkt); padding: .55rem 0; outline: none; }
.p-drawer__search button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--creme); display: grid; place-items: center; cursor: pointer; }
.p-drawer__search button:hover { background: var(--wp--preset--color--den); color: var(--wp--preset--color--creme); }
.p-drawer__label { margin: .2rem 0 -.4rem; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--grijs); }
.p-drawer__dieren, .p-drawer__links { list-style: none; margin: 0; padding: 0; }
.p-drawer__dieren { display: grid; gap: .6rem; }
.p-drawer__dier { background: #fff; border-radius: 18px; overflow: hidden; }
.p-drawer__dierknop { width: 100%; display: flex; align-items: center; gap: .85rem; border: 0; background: transparent; padding: .55rem .9rem .55rem .55rem; text-align: left; cursor: pointer; color: var(--wp--preset--color--inkt); }
.p-drawer__dierknop:hover { background: var(--wp--preset--color--zand); color: var(--wp--preset--color--inkt); }
.p-drawer__thumb { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; flex: none; }
.p-drawer__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-drawer__naam { flex: 1; font-family: var(--wp--preset--font-family--fraunces); font-weight: 600; font-size: 1.25rem; line-height: 1.15; }
.p-drawer__naam small { display: block; font-family: var(--wp--preset--font-family--figtree); font-weight: 500; font-size: .8rem; color: var(--wp--preset--color--grijs); margin-top: .15rem; }
.p-drawer__chev { width: 34px; height: 34px; border-radius: 50%; background: var(--wp--preset--color--creme); display: grid; place-items: center; transition: transform .25s ease; }
.p-drawer__dierknop[aria-expanded="true"] .p-drawer__chev { transform: rotate(180deg); background: var(--wp--preset--color--abrikoos); }
.p-drawer__subs { display: flex; flex-wrap: wrap; gap: .45rem; padding: .2rem .9rem 1rem; }
.p-drawer__subs[hidden] { display: none; }
.p-drawer__alles { flex-basis: 100%; display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: var(--wp--preset--color--den); text-decoration: none; padding: .3rem 0 .4rem; }
.p-drawer__alles:hover { color: var(--wp--preset--color--inkt); text-decoration: underline; }
.p-drawer__chip { display: inline-block; padding: .45rem .8rem; border-radius: 999px; background: var(--wp--preset--color--creme); border: 1.5px solid rgba(30,58,52,.1); color: var(--wp--preset--color--inkt); font-size: .9rem; font-weight: 600; text-decoration: none; }
.p-drawer__chip:hover, .p-drawer__chip:focus { background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--creme); border-color: var(--wp--preset--color--inkt); }
.p-drawer__links { border-top: 1.5px dashed rgba(30,58,52,.14); padding-top: .6rem; }
.p-drawer__links a { display: flex; justify-content: space-between; padding: .65rem .2rem; font-weight: 600; font-size: 1.05rem; color: var(--wp--preset--color--inkt); text-decoration: none; }
.p-drawer__links a::after { content: "→"; color: var(--wp--preset--color--abrikoos-donker); }
.p-drawer__links a:hover { color: var(--wp--preset--color--den); }
.p-drawer__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .9rem; }
.p-drawer__badge { background: var(--wp--preset--color--salie); color: var(--wp--preset--color--inkt); font-weight: 700; padding: .4rem .75rem; border-radius: 999px; }
.p-drawer__foot a { color: var(--wp--preset--color--den); font-weight: 600; }
.p-drawer__foot a:hover { color: var(--wp--preset--color--inkt); }
html.p-noscroll { overflow: hidden; }

/* ---------- Juridisch / productveiligheid ---------- */
.p-prijsinfo { font-size: .9rem; color: var(--wp--preset--color--grijs); margin: -.25rem 0 1.1rem; }
.p-gpsr { margin-top: 2rem; padding: 1.25rem 1.4rem; background: #fff; border-radius: var(--p-radius-s); font-size: .92rem; }
.p-gpsr h3 { font-size: 1.15rem; margin: 0 0 .7rem; }
.p-gpsr dl { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.2rem; margin: 0; }
.p-gpsr dt { font-weight: 700; }
.p-gpsr dd { margin: 0; color: var(--wp--preset--color--grijs); }
@media (max-width: 600px) { .p-gpsr dl { grid-template-columns: 1fr; } .p-gpsr dd { margin-bottom: .5rem; } }
.p-invullen { background: #FFE58A; color: #5A3B00; padding: 0 .25rem; border-radius: 4px; }
.p-footer__legal { font-size: .8rem; opacity: .85; flex-basis: 100%; }
.p-modelformulier { background: #fff; border: 1.5px dashed rgba(30,58,52,.25); border-radius: var(--p-radius-s); padding: 1.25rem 1.4rem; }

/* Print (o.a. PDF van de voorwaarden) */
@media print {
  header.wp-block-template-part, footer.wp-block-template-part, .p-drawer, .woocommerce-coming-soon-banner, #wpadminbar { display: none !important; }
  body { background: #fff; }
  .p-page-head { background: none; padding: 0 !important; }
  .p-invullen { background: none; }
}
.single-product .wc-block-product .wp-block-post-title { font-size: 1.12rem !important; line-height: 1.25; }
@media (max-width: 600px) { .single-product .wc-block-product .wp-block-post-title { font-size: 1rem !important; } }

/* Subcategorieën als snelkoppelingen op categoriepagina's */
.p-subcats { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .5rem; }
.p-subcats a { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; background: #fff; border: 1.5px solid rgba(30,58,52,.12); color: var(--wp--preset--color--inkt); font-weight: 600; font-size: .92rem; text-decoration: none; }
.p-subcats a span { font-size: .78rem; font-weight: 700; color: var(--wp--preset--color--grijs); }
.p-subcats a:hover, .p-subcats a:focus, .p-subcats a[aria-current="page"] { background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--creme); border-color: var(--wp--preset--color--inkt); }
.p-subcats a:hover span, .p-subcats a[aria-current="page"] span { color: #C9D8D2; }
.wp-block-term-description { max-width: 46rem; color: var(--wp--preset--color--grijs); font-size: 1.05rem; }

.p-footer__bottom a { text-decoration: underline; text-underline-offset: .2em; }
.p-cat--accent .p-cat__label small { color: #DCE7E2; }
.wp-block-term-description { max-width: none; }
.wp-block-term-description > p { max-width: 46rem; margin-left: 0 !important; }
.wp-block-term-description > .p-subcats { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
:where(.is-layout-constrained, .wp-block-group) > .p-subcats, .p-subcats { margin-left: auto !important; margin-right: auto !important; max-width: var(--wp--style--global--wide-size) !important; }
@media (max-width: 600px) { .wp-block-query-title { font-size: 2rem !important; overflow-wrap: break-word; } }

/* ---------- Contactformulier ---------- */
.p-form { background: #fff; border-radius: var(--p-radius); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1rem; box-shadow: 0 1px 2px rgba(30,58,52,.05); }
.p-form label { display: grid; gap: .4rem; font-weight: 700; font-size: .92rem; }
.p-form label small { font-weight: 500; color: var(--wp--preset--color--grijs); }
.p-form input[type="text"], .p-form input[type="email"], .p-form select, .p-form textarea { font: 500 1rem/1.4 var(--wp--preset--font-family--figtree); color: var(--wp--preset--color--inkt); padding: .8rem 1rem; border: 2px solid rgba(30,58,52,.15); border-radius: var(--p-radius-s); background: var(--wp--preset--color--creme); width: 100%; box-sizing: border-box; }
.p-form input:focus, .p-form select:focus, .p-form textarea:focus { outline: none; border-color: var(--wp--preset--color--den); background: #fff; }
.p-form__rij { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .p-form__rij { grid-template-columns: 1fr; } }
.p-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.p-form__privacy { font-size: .85rem; color: var(--wp--preset--color--grijs); margin: 0; }
.p-form .p-btn { border: 0; cursor: pointer; justify-self: start; font-size: 1rem; }
.p-melding { border-radius: var(--p-radius-s); padding: 1rem 1.2rem; font-weight: 600; margin-bottom: 1rem; }
.p-melding--ok { background: var(--wp--preset--color--salie); color: var(--wp--preset--color--inkt); }
.p-melding--fout { background: #FBE3D6; color: #7A2E0B; }
.p-btn--wa { background: #1E7B4E; color: #fff; }
.p-btn--wa:hover, .p-btn--wa:focus { background: #155C3A; color: #fff; }
.p-form label { display: block; }
.p-form label > input, .p-form label > select, .p-form label > textarea { margin-top: .4rem; }
.p-form label > span[aria-hidden] { color: var(--wp--preset--color--abrikoos-donker); }
.p-form .p-btn { font-weight: 700; padding: .95rem 1.6rem; }
/* Contactpagina iets breder */
.page-id-28 { --wp--style--global--content-size: 1040px; }

/* Mijn account: inlog- en registratieformulier in Pettiq-stijl */
.woocommerce form.login, .woocommerce form.register, .woocommerce form.lost_reset_password { background: #fff; border: 0 !important; border-radius: var(--p-radius); padding: clamp(1.25rem, 3vw, 2rem) !important; box-shadow: 0 1px 2px rgba(30,58,52,.05); }
.woocommerce form .form-row label { font-weight: 700; font-size: .92rem; }
.woocommerce form .form-row .input-text, .woocommerce form .form-row input[type="password"] { font: 500 1rem/1.4 var(--wp--preset--font-family--figtree); padding: .8rem 1rem; border: 2px solid rgba(30,58,52,.15); border-radius: var(--p-radius-s); background: var(--wp--preset--color--creme); }
.woocommerce form .form-row .input-text:focus { outline: none; border-color: var(--wp--preset--color--den); background: #fff; }
.woocommerce form .form-row .required { color: var(--wp--preset--color--abrikoos-donker); }
.woocommerce form.login .button, .woocommerce form.register .button, .woocommerce form.lost_reset_password .button { background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--creme); border-radius: 999px; padding: .85rem 1.6rem; font-weight: 700; border: 0; }
.woocommerce form.login .button:hover, .woocommerce form.register .button:hover, .woocommerce form.lost_reset_password .button:hover { background: var(--wp--preset--color--den); color: var(--wp--preset--color--creme); }
.woocommerce-account .u-columns h2 { font-size: var(--wp--preset--font-size--x-large); }

/* Productomschrijving: tussenkopjes en lijsten */
.woocommerce-Tabs-panel--description h3, .wp-block-woocommerce-product-details h3:not(.p-gpsr h3) { font-size: 1.35rem; margin: 1.6rem 0 .5rem; }
.woocommerce-Tabs-panel--description ul { padding-left: 1.2rem; display: grid; gap: .3rem; }
.woocommerce-Tabs-panel--description ul li::marker { color: var(--wp--preset--color--abrikoos); }
.woocommerce-Tabs-panel--description > p:first-child { font-size: 1.08rem; max-width: 52rem; }

/* Cookiemelding */
.p-cookies { position: fixed; z-index: 1000; left: 16px; right: 16px; bottom: 16px; max-width: 34rem; margin-left: auto; background: #fff; color: var(--wp--preset--color--inkt); border: 1.5px solid rgba(30,58,52,.12); border-radius: 18px; box-shadow: 0 12px 40px rgba(30,58,52,.18); padding: 1.1rem 1.2rem; font-size: .95rem; line-height: 1.5; }
.p-cookies[hidden] { display: none; }
.p-cookies p { margin: 0 0 .9rem; }
.p-cookies a { color: var(--wp--preset--color--den); }
.p-cookies__knoppen { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
.p-cookies button { font: inherit; font-weight: 700; padding: .6rem 1.2rem; border-radius: 999px; cursor: pointer; border: 1.5px solid var(--wp--preset--color--inkt); }
.p-cookies__nee { background: #fff; color: var(--wp--preset--color--inkt); }
.p-cookies__nee:hover, .p-cookies__nee:focus-visible { background: var(--wp--preset--color--creme); color: var(--wp--preset--color--inkt); }
.p-cookies__ja { background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--creme); }
.p-cookies__ja:hover, .p-cookies__ja:focus-visible { background: var(--wp--preset--color--den); border-color: var(--wp--preset--color--den); color: #fff; }
@media (max-width: 600px) { .p-cookies__knoppen button { flex: 1; } }

/* Iconen bij contactlinks in de footer */
.p-icolink { display: inline-flex; align-items: center; gap: .55rem; vertical-align: top; }
.p-footer li:has(> .p-icolink) { line-height: 1.2; padding: .2rem 0; }
.p-ico { width: 1.1em; height: 1.1em; flex: none; color: var(--wp--preset--color--abrikoos); transition: transform .15s ease; }
.p-icolink:hover .p-ico, .p-icolink:focus .p-ico { transform: scale(1.12); }

/* Melding minimum / gratis verzending in winkelwagen en afrekenen */
.p-verzendmelding { background: var(--wp--preset--color--salie); color: var(--wp--preset--color--inkt); border-radius: 14px; padding: .8rem 1.1rem; font-weight: 600; margin: 0 0 1.2rem; }