/*
Theme Name: Partou Raypack
Theme URI: https://partou.raypack.nl
Author: Schülski-IT
Author URI: https://schulski-it.nl
Description: Bestelportaal voor Partou kinderopvang - stickers, vlaggen, borden en accessoires door Raypack
Version: 2.5.1
Requires at least: 6.4
Requires PHP: 8.2
Text Domain: partou-raypack
License: Proprietary

WooCommerce bestelportaal in Partou huisstijl.
*/

/* ============================================================
   CSS Custom Properties — Partou Design Tokens
   ============================================================ */
:root {
    /* Partou Brand Colors */
    --partou-purple: #582354;
    --partou-red: #ec575d;
    --partou-orange: #f3a200;
    --partou-gradient: linear-gradient(135deg, #582354 0%, #ec575d 65%, #f3a200 100%);
    --partou-gradient-soft: linear-gradient(135deg, rgba(88,35,84,0.08) 0%, rgba(236,87,93,0.08) 65%, rgba(243,162,0,0.08) 100%);

    /* Brand RGB triplets — used to build alpha tints via rgba(var(--brand-purple-rgb), 0.x).
       Single source of truth for brand recolor: change here = change everywhere. */
    --brand-purple-rgb: 88, 35, 84;
    --brand-red-rgb:    236, 87, 93;
    --brand-orange-rgb: 243, 162, 0;
    --brand-success-rgb: 56, 161, 105;
    --brand-white-rgb:  255, 255, 255;
    --brand-black-rgb:  0, 0, 0;

    /* Alias tokens — use these instead of raw rgba() */
    --shadow-purple-soft: 0 4px 14px rgba(var(--brand-purple-rgb), 0.25);
    --shadow-purple-mid:  0 6px 20px rgba(var(--brand-purple-rgb), 0.35);
    --shadow-purple-deep: 0 8px 24px rgba(var(--brand-purple-rgb), 0.35);
    --shadow-orange-glow: 0 4px 14px rgba(var(--brand-orange-rgb), 0.3);
    --tint-purple-04:     rgba(var(--brand-purple-rgb), 0.04);
    --tint-purple-08:     rgba(var(--brand-purple-rgb), 0.08);
    --tint-purple-10:     rgba(var(--brand-purple-rgb), 0.1);
    --tint-purple-12:     rgba(var(--brand-purple-rgb), 0.12);
    --tint-red-04:        rgba(var(--brand-red-rgb), 0.04);
    --tint-red-08:        rgba(var(--brand-red-rgb), 0.08);
    --tint-success-04:    rgba(var(--brand-success-rgb), 0.04);
    --tint-success-08:    rgba(var(--brand-success-rgb), 0.08);
    --tint-success-20:    rgba(var(--brand-success-rgb), 0.2);
    --tint-white-15:      rgba(var(--brand-white-rgb), 0.15);
    --tint-white-20:      rgba(var(--brand-white-rgb), 0.2);
    --tint-white-25:      rgba(var(--brand-white-rgb), 0.25);
    --focus-ring-purple:  0 0 0 3px rgba(var(--brand-purple-rgb), 0.3);
    --focus-ring-purple-soft: 0 0 0 3px rgba(var(--brand-purple-rgb), 0.1);

    /* Functional Colors */
    --color-primary: #582354;
    --color-primary-light: #7a3d75;
    --color-accent: #ec575d;
    --color-accent-hover: #d94449;
    --color-cta: #f3a200;
    --color-cta-hover: #d98f00;
    --color-success: #38a169;
    --color-warning: #f3a200;
    --color-error: #ec575d;
    --color-info: #582354;

    /* Neutrals */
    --color-bg: #ffffff;
    --color-bg-light: #faf7fa;
    --color-bg-warm: #fef9f0;
    --color-surface: #ffffff;
    --color-border: #e8dfe7;
    --color-border-light: #f0eaef;
    --color-text-dark: #2d1f2c;
    --color-text: #4a3649;
    --color-text-muted: #8a7489;

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(88,35,84,0.08);
    --shadow-card: 0 4px 6px -1px rgba(88,35,84,0.1), 0 2px 4px -2px rgba(88,35,84,0.06);
    --shadow-card-hover: 0 10px 25px -5px rgba(88,35,84,0.15), 0 4px 6px -4px rgba(88,35,84,0.06);
    --shadow-btn: 0 4px 14px rgba(88,35,84,0.25);

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* Typography */
    --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Plus Jakarta Sans', sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: clamp(1.5rem, 3vw + 0.5rem, 1.875rem);
    --text-4xl: clamp(2rem, 4vw + 0.5rem, 2.5rem);
    --text-hero: clamp(2.25rem, 5vw + 1rem, 3.75rem);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
}

/* ============================================================
   Reset & Base
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent);
}

a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--color-text-dark);
    line-height: 1.2;
    font-weight: 700;
}

/* ============================================================
   Layout
   ============================================================ */
.container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--space-8);
}

.section {
    padding: var(--space-10) 0;
}

@media (min-width: 768px) {
    .section {
        padding: var(--space-16) 0;
    }
}

.section--light {
    background: var(--color-bg-light);
}

.section--warm {
    background: var(--color-bg-warm);
}

.section--gradient {
    background: var(--partou-gradient);
    color: #fff;
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
    background: var(--color-surface);
    border-bottom: 2px solid transparent;
    border-image: var(--partou-gradient) 1;
    padding: var(--space-2) 0;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: var(--shadow-sm);
}

@media (min-width: 1024px) {
    .site-header {
        padding: var(--space-3) 0;
    }
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.site-logo img {
    height: 44px;
    width: auto;
}

/* WordPress custom logo — needs high specificity to beat WP's inline height:auto */
.site-header .custom-logo-link,
.site-header .site-logo {
    display: inline-flex;
    align-items: center;
    min-height: var(--space-12);
}

.site-header .custom-logo-link .custom-logo,
.site-header .custom-logo-link img,
.site-header .custom-logo {
    height: 44px;
    max-height: 44px;
    width: auto;
}

/* Header right cluster — keeps cart visible at all breakpoints, nav-toggle next to it */
.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

/* Mobile-first: nav is a slide-down dropdown, hidden until toggle opens it */
.site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    background: var(--color-surface);
    padding: var(--space-4);
    box-shadow: var(--shadow-card);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.site-nav.is-open {
    display: flex;
}

.site-nav a {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--color-text);
    padding: var(--space-3) var(--space-4);
    min-height: var(--space-12);
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.site-nav a:hover,
.site-nav a:focus-visible {
    color: var(--color-primary);
    background: var(--partou-gradient-soft);
}

.header-cart {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    color: var(--color-primary);
    padding: var(--space-2) var(--space-3);
    min-height: var(--space-12);
    min-width: var(--space-12);
    border-radius: var(--radius-full);
    background: var(--partou-gradient-soft);
    transition: all var(--transition-fast);
}

.header-cart:hover,
.header-cart:focus-visible {
    box-shadow: var(--shadow-card);
}

.cart-count {
    background: var(--partou-gradient);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 700;
}

/* Header search — visible inline on desktop, icon-toggleable on mobile.
   site-search is positioned static; its form anchors to .site-header (which is
   position: sticky and acts as the containing block for the absolute form). */
.site-search {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.site-search__form {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    z-index: 1;
}

.site-search.is-open .site-search__form {
    display: flex;
    gap: var(--space-2);
}

.site-search__input {
    flex: 1;
    min-height: var(--space-12);
    padding: var(--space-2) var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    color: var(--color-text-dark);
    background: var(--color-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.site-search__input:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring-purple-soft);
    outline: none;
}

.site-search__toggle,
.site-search__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--space-12);
    min-height: var(--space-12);
    padding: var(--space-2) var(--space-3);
    background: var(--partou-gradient-soft);
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: box-shadow var(--transition-fast), background var(--transition-fast);
}

.site-search__toggle:hover,
.site-search__toggle:focus-visible,
.site-search__submit:hover,
.site-search__submit:focus-visible {
    box-shadow: var(--shadow-card);
}

/* Mobile nav toggle — 44x44 minimum tap-target */
.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    min-width: var(--space-12);
    min-height: var(--space-12);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
    background: var(--partou-gradient-soft);
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text-dark);
    margin: 3px 0;
    border-radius: 2px;
    /* Decorative bars; no text content. Set font-size so a11y audits don't
       count them as 13.3px text elements. */
    font-size: var(--text-base);
    transition: all var(--transition-fast);
}

/* ≥768px — desktop nav: inline flex, hide toggle, search inline */
@media (min-width: 768px) {
    .site-nav {
        display: flex;
        position: static;
        flex-direction: row;
        align-items: center;
        gap: var(--space-6);
        padding: 0;
        background: none;
        box-shadow: none;
        border-radius: 0;
    }

    .site-nav a {
        font-size: var(--text-sm);
        min-height: auto;
        padding: var(--space-2) var(--space-3);
    }

    .nav-toggle {
        display: none;
    }

    .site-search__form {
        display: flex;
        position: static;
        padding: 0;
        background: none;
        box-shadow: none;
        border-radius: 0;
    }

    .site-search__toggle {
        display: none;
    }

    .site-search__input {
        min-width: 220px;
        max-width: 280px;
    }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
    background: var(--partou-gradient);
    padding: var(--space-12) 0;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .hero {
        padding: var(--space-20) 0;
    }
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 400px;
    height: 400px;
    background: rgba(255,255,255,0.04);
    border-radius: 50%;
}

.hero .container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: center;
    text-align: center;
}

@media (min-width: 768px) {
    .hero .container {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
        text-align: left;
    }
}

.hero__content {
    color: #fff;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-6);
}

.hero__title {
    font-size: var(--text-hero);
    font-weight: 800;
    color: #fff;
    margin-bottom: var(--space-6);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.hero__subtitle {
    font-size: var(--text-lg);
    opacity: 0.9;
    margin-bottom: var(--space-8);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.hero__image {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(var(--brand-black-rgb), 0.2);
    max-width: 400px;
    margin: 0 auto;
}

.hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 768px) {
    .hero__subtitle {
        margin-left: 0;
        margin-right: 0;
    }

    .hero__image {
        max-width: none;
        margin: 0;
    }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--text-base);
    cursor: pointer;
    border: none;
    transition: all var(--transition-base);
    text-decoration: none;
    line-height: 1.4;
}

.btn:focus-visible {
    outline: 2px solid var(--color-cta);
    outline-offset: 2px;
}

.btn--primary {
    background: var(--partou-gradient);
    color: #fff;
    box-shadow: var(--shadow-btn);
}

.btn--primary:hover,
.btn--primary:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow-purple-mid);
    color: #fff;
}

/* Translucent secondary — only readable on dark/gradient backgrounds (e.g. .hero, .section--gradient) */
.btn--secondary {
    background: var(--tint-white-20);
    color: #fff;
    border: 2px solid rgba(var(--brand-white-rgb), 0.4);
    backdrop-filter: blur(10px);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
    background: rgba(var(--brand-white-rgb), 0.3);
    color: #fff;
}

.btn.is-success {
    background: var(--color-success);
    color: #fff;
}

/* Solid secondary — for use on light/white sections where translucent variant is invisible */
.btn--secondary--solid {
    background: var(--color-surface);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    backdrop-filter: none;
}

.btn--secondary--solid:hover,
.btn--secondary--solid:focus-visible {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.btn--cta {
    background: var(--partou-gradient);
    color: #fff;
    box-shadow: 0 8px 20px rgba(236, 87, 93, 0.32), 0 2px 4px rgba(88, 35, 84, 0.12);
    letter-spacing: 0.01em;
}

.btn--cta:hover,
.btn--cta:focus-visible {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 12px 26px rgba(236, 87, 93, 0.4), 0 4px 8px rgba(88, 35, 84, 0.18);
}

.btn--outline {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.btn--outline:hover {
    background: var(--color-primary);
    color: #fff;
}

.btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-lg);
    border-radius: var(--radius-lg);
}

/* ============================================================
   Product Cards (WooCommerce Override)
   ============================================================ */
.products {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    list-style: none;
    padding: 0;
}

@media (min-width: 640px) {
    .products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .products {
        grid-template-columns: repeat(3, 1fr);
    }
}

.product-card,
.products .product {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: all var(--transition-base);
    position: relative;
}

.product-card:hover,
.products .product:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
}

.product-card__image,
.products .product .woocommerce-loop-product__link img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.product-card__body {
    padding: var(--space-6);
}

.product-card__category {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.product-card__title,
.products .product .woocommerce-loop-product__title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: var(--space-3);
}

.product-card__price,
.products .product .price {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--color-primary);
}

.product-card__price small {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-text-muted);
}

/* Quick-add quantity for bulk ordering */
.product-card__quick-add {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-light);
}

.product-card__qty {
    display: flex;
    align-items: center;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.product-card__qty button {
    min-width: var(--space-12);
    min-height: var(--space-12);
    border: none;
    background: var(--color-bg-light);
    cursor: pointer;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text);
    transition: background var(--transition-fast);
}

.product-card__qty button:hover {
    background: var(--partou-gradient-soft);
}

.product-card__qty button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.product-card__qty input {
    width: 48px;
    min-height: var(--space-12);
    border: none;
    text-align: center;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--color-text-dark);
}

.product-card__qty input:focus {
    outline: none;
    background: var(--partou-gradient-soft);
    box-shadow: inset 0 0 0 2px var(--color-primary);
}

/* ============================================================
   Category Cards
   ============================================================ */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-6);
}

.category-card {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 3/2;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-base);
}

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

.category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-6);
    background: linear-gradient(to top, rgba(88,35,84,0.85), transparent);
    color: #fff;
}

.category-card__title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: #fff;
}

.category-card__count {
    font-size: var(--text-sm);
    opacity: 0.8;
}

/* ============================================================
   Section Headers
   ============================================================ */
.section-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto var(--space-12);
}

.section-header__title {
    font-size: var(--text-3xl);
    font-weight: 800;
    margin-bottom: var(--space-4);
    background: var(--partou-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-header__subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
}

/* ============================================================
   USP Bar
   ============================================================ */
.usp-bar {
    background: var(--color-bg-light);
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.usp-bar .container {
    display: flex;
    justify-content: center;
    gap: var(--space-10);
    flex-wrap: wrap;
}

.usp-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-text);
}

.usp-item__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--partou-gradient-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
}

/* ============================================================
   WooCommerce Overrides
   ============================================================ */
.woocommerce .quantity .qty {
    width: 60px;
    padding: var(--space-2);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-weight: 600;
    text-align: center;
}

.woocommerce .quantity .qty:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: var(--focus-ring-purple-soft);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background: var(--partou-gradient);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--text-base);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-btn);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: var(--shadow-purple-mid);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background: var(--color-cta);
    color: var(--color-text-dark);
    box-shadow: var(--shadow-orange-glow);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background: var(--color-cta-hover);
}

/* WooCommerce notices */
.woocommerce-message {
    border-top-color: var(--color-success);
    border-radius: var(--radius-md);
}

.woocommerce-error {
    border-top-color: var(--color-error);
    border-radius: var(--radius-md);
}

.woocommerce-info {
    border-top-color: var(--color-primary);
    border-radius: var(--radius-md);
}

/* Cart & Checkout styling */
.woocommerce-cart .cart-collaterals,
.woocommerce-checkout #order_review {
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.woocommerce table.shop_table {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
}

.woocommerce table.shop_table th {
    background: var(--color-bg-light);
    font-weight: 700;
    color: var(--color-text-dark);
}

/* Forms */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    transition: border-color var(--transition-fast);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: var(--focus-ring-purple-soft);
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
    background: var(--color-text-dark);
    color: rgba(255,255,255,0.7);
    padding: var(--space-12) 0 var(--space-6);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-10);
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
        gap: var(--space-10);
    }
}

.footer-brand .site-logo img {
    height: 40px;
    margin-bottom: var(--space-4);
    filter: brightness(0) invert(1);
}

.footer-brand p {
    font-size: var(--text-sm);
    max-width: 300px;
    line-height: 1.7;
}

.footer-col h4 {
    color: #fff;
    font-size: var(--text-base);
    margin-bottom: var(--space-4);
}

.footer-col ul {
    list-style: none;
}

.footer-col li {
    margin-bottom: var(--space-2);
}

.footer-col a {
    display: inline-flex;
    align-items: center;
    min-height: var(--space-12);
    padding: var(--space-1) 0;
    color: rgba(var(--brand-white-rgb), 0.6);
    font-size: var(--text-sm);
    transition: color var(--transition-fast);
}

.footer-col a:hover,
.footer-col a:focus-visible {
    color: var(--color-cta);
}

.footer-bottom {
    border-top: 1px solid rgba(var(--brand-white-rgb), 0.1);
    padding-top: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
    font-size: var(--text-sm);
}

.footer-bottom a {
    color: var(--color-cta);
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0;
        text-align: left;
    }
}

/* ============================================================
   Hero Image — fallback placeholder
   ============================================================ */
.hero__image-wrap {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(var(--brand-black-rgb), 0.2);
    min-height: 240px;
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
}

.hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero__img-placeholder {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--brand-white-rgb), 0.1);
    border-radius: var(--radius-xl);
}

.hero__img-placeholder svg {
    width: 100%;
    height: auto;
}

.hero__actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: center;
}

@media (min-width: 768px) {
    .hero__image-wrap {
        min-height: 320px;
        max-width: none;
        margin: 0;
    }

    .hero__actions {
        justify-content: flex-start;
    }
}

/* ============================================================
   Featured Products Wrap (WooCommerce shortcode container)
   ============================================================ */
.featured-products-wrap .products {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 640px) {
    .featured-products-wrap .products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .featured-products-wrap .products {
        grid-template-columns: repeat(3, 1fr);
    }

    /* When inside sidebar layout, limit to 2 columns */
    .products-with-sidebar__main .featured-products-wrap .products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1600px) {
    .products-with-sidebar__main .featured-products-wrap .products {
        grid-template-columns: repeat(3, 1fr);
    }
}

.featured-products-wrap .products li.product {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-base);
    padding: 0;
    margin: 0;
}

.featured-products-wrap .products li.product:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
}

.featured-products-wrap .woocommerce-loop-product__link img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.featured-products-wrap .woocommerce-loop-product__title,
.featured-products-wrap h2.woocommerce-loop-product__title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-dark);
    padding: var(--space-4) var(--space-6) var(--space-2);
    margin: 0;
}

.featured-products-wrap .price {
    padding: 0 var(--space-6) var(--space-2);
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--color-primary);
    display: block;
}

.featured-products-wrap .product-card__quick-add {
    padding: 0 var(--space-6) var(--space-6);
}

/* ============================================================
   CTA Section Helpers
   ============================================================ */
.cta-section__title {
    font-size: var(--text-4xl);
    color: #fff;
    margin-bottom: var(--space-4);
}

.cta-section__subtitle {
    font-size: var(--text-lg);
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto var(--space-8);
}

.cta-section__actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================
   Contact Section (homepage + offerte sidebar)
   ============================================================ */
.contact-section {
    padding: var(--space-16) 0;
}

.contact-card-wrap {
    display: flex;
    justify-content: center;
}

.contact-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: var(--space-6);
    max-width: 720px;
    width: 100%;
    border: 2px solid var(--color-border-light);
}

@media (min-width: 640px) {
    .contact-card {
        flex-direction: row;
        text-align: left;
        padding: var(--space-8);
        gap: var(--space-8);
    }
}

.contact-card--compact {
    padding: 0;
    box-shadow: none;
    border: none;
    background: transparent;
    gap: var(--space-5);
    max-width: none;
}

.contact-card__avatar {
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}

.contact-card__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.contact-card__name {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--color-text-dark);
    line-height: 1.2;
}

.contact-card__role {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: calc(-1 * var(--space-2));
}

.contact-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.contact-card__link:hover {
    color: var(--color-accent);
}

.contact-card__link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--partou-gradient-soft);
    color: var(--color-primary);
    flex-shrink: 0;
    transition: background var(--transition-fast);
}

.contact-card__link:hover .contact-card__link-icon {
    background: var(--color-border);
}

.contact-card__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
    width: 100%;
}

.contact-card__cta .btn {
    width: 100%;
}

.contact-card__response {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: 600;
}

.contact-card__link {
    justify-content: center;
}

@media (min-width: 640px) {
    .contact-card__link {
        justify-content: flex-start;
    }

    .contact-card__cta {
        width: auto;
    }

    .contact-card__cta .btn {
        width: auto;
    }
}

/* ============================================================
   Products with Contact Sidebar (Homepage)
   ============================================================ */
.products-with-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.products-with-sidebar__main {
    flex: 1;
    min-width: 0;
}

@media (min-width: 1024px) {
    .products-with-sidebar {
        flex-direction: row;
        gap: var(--space-10, 40px);
        align-items: start;
    }

    .products-with-sidebar__aside {
        flex-shrink: 0;
        width: 280px;
        position: sticky;
        top: 100px;
    }
}

/* Sidebar Contact Card — mobile-first stacked, becomes vertical sidebar at ≥1024px */
.sidebar-contact-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
    border: 2px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
}

.sidebar-contact-card__avatar {
    border-radius: 50%;
    overflow: hidden;
}

.sidebar-contact-card__title {
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--color-text-dark);
    line-height: 1.2;
    margin: 0;
}

.sidebar-contact-card__subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
    margin: 0;
}

.sidebar-contact-card__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
}

.sidebar-contact-card__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--space-12);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.sidebar-contact-card__link:hover {
    color: var(--color-accent);
}

.sidebar-contact-card__link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--partou-gradient-soft);
    color: var(--color-primary);
    flex-shrink: 0;
}

.sidebar-contact-card__btn {
    width: 100%;
    justify-content: center;
}

.sidebar-contact-card__response {
    /* Was --text-xs (12px); bumped to --text-sm for mobile-readable body */
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-weight: 600;
    margin: 0;
}

/* ≥640px — wrap horizontally (works for both flat-list and sidebar-out contexts) */
@media (min-width: 640px) {
    .sidebar-contact-card {
        flex-direction: row;
        flex-wrap: wrap;
        text-align: left;
        align-items: center;
        gap: var(--space-4) var(--space-6);
        padding: var(--space-6) var(--space-8);
    }

    .sidebar-contact-card__title,
    .sidebar-contact-card__subtitle {
        text-align: left;
        flex-basis: calc(100% - 96px);
    }

    .sidebar-contact-card__links {
        flex-direction: row;
        gap: var(--space-4);
    }

    .sidebar-contact-card__link {
        justify-content: flex-start;
    }

    .sidebar-contact-card__btn {
        width: auto;
    }
}

/* ≥1024px — vertical sidebar layout when inside .products-with-sidebar */
@media (min-width: 1024px) {
    .products-with-sidebar__aside .sidebar-contact-card {
        flex-direction: column;
        flex-wrap: nowrap;
        text-align: center;
        align-items: center;
        padding: var(--space-6);
    }

    .products-with-sidebar__aside .sidebar-contact-card__title,
    .products-with-sidebar__aside .sidebar-contact-card__subtitle {
        text-align: center;
        flex-basis: auto;
    }

    .products-with-sidebar__aside .sidebar-contact-card__links {
        flex-direction: column;
        gap: var(--space-2);
    }

    .products-with-sidebar__aside .sidebar-contact-card__link {
        justify-content: center;
    }

    .products-with-sidebar__aside .sidebar-contact-card__btn {
        width: 100%;
    }
}

/* ============================================================
   Generic Page Title — used by page.php for non-cart/checkout pages
   ============================================================ */
.page-title {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-8);
}

/* ============================================================
   404 Page
   ============================================================ */
.error-404__title {
    font-size: var(--text-hero);
    margin-bottom: var(--space-4);
}

.error-404__lead {
    font-size: var(--text-xl);
    color: var(--color-text-muted);
    margin: 0 auto var(--space-8);
    max-width: 500px;
}

.error-404__actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================
   Utility Classes
   ============================================================ */
.text-center { text-align: center; }
.text-gradient {
    background: var(--partou-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }
.visually-hidden,
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

/* Skip link — visible on focus, anchored top-left */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: var(--space-3) var(--space-4);
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    border-radius: 0 0 var(--radius-md) 0;
    text-decoration: none;
}

.skip-link:focus,
.skip-link:focus-visible {
    left: 0;
    outline: 3px solid var(--color-cta);
    outline-offset: 2px;
    color: #fff;
}

/* ============================================================
   WooCommerce — Breadcrumbs
   ============================================================ */
.woocommerce .woocommerce-breadcrumb {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    padding: var(--space-4) 0;
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
}
.woocommerce .woocommerce-breadcrumb a {
    color: var(--color-primary);
    font-weight: 600;
}
.woocommerce .woocommerce-breadcrumb a:hover {
    color: var(--color-accent);
}

/* ============================================================
   WooCommerce — Shop Controls
   ============================================================ */
.woocommerce .woocommerce-result-count {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}
.woocommerce .woocommerce-ordering select {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-surface);
    cursor: pointer;
    appearance: none;
    padding-right: var(--space-8);
}

/* ============================================================
   WooCommerce — Product Loop Cards
   ============================================================ */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: start;
}
@media (min-width: 480px) {
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
    .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
}
@media (min-width: 1200px) {
    .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); }
}
/* Override WooCommerce float-based layout for CSS Grid */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
.woocommerce ul.products.columns-4 li.product,
.woocommerce-page ul.products.columns-4 li.product,
ul.pcws-product-grid li.product,
.pcws-related__grid li.product,
section.related ul.products li.product {
    width: auto;
    float: none;
    margin: 0;
}

/* Kill WooCommerce clearfix pseudo-elements — they become grid items */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
ul.pcws-product-grid::before,
ul.pcws-product-grid::after,
.pcws-related__grid::before,
.pcws-related__grid::after,
section.related ul.products::before,
section.related ul.products::after {
    content: none;
    display: none;
}

/* Override WooCommerce width on ALL grid-based product lists */
.pcws-related__grid li.product {
    width: auto;
    float: none;
    margin: 0;
}

.woocommerce ul.products li.product {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    border: none;
    width: auto;
    float: none;
}
.woocommerce ul.products li.product:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    display: block;
    flex: 1;
    text-decoration: none;
    color: inherit;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
    margin: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-dark);
    padding: var(--space-4) var(--space-5) var(--space-2);
    margin: 0;
}
.woocommerce ul.products li.product .price {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--color-primary);
    padding: 0 var(--space-5) var(--space-3);
}
.woocommerce ul.products li.product .product-card__quick-add {
    margin: 0;
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border-light);
}

/* ============================================================
   WooCommerce — Single Product Page
   ============================================================ */
@media (min-width: 768px) {
    .woocommerce div.product {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
        align-items: start;
    }
    .woocommerce div.product .woocommerce-tabs,
    .woocommerce div.product .related.products,
    .woocommerce div.product .upsells.products {
        grid-column: 1 / -1;
    }
}
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.woocommerce div.product div.images .flex-control-thumbs {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: 0;
    list-style: none;
}
.woocommerce div.product div.images .flex-control-thumbs li {
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li:hover img {
    opacity: 1;
}
.woocommerce div.product .product_title {
    font-size: var(--text-4xl);
    font-weight: 800;
    color: var(--color-text-dark);
    margin-bottom: var(--space-4);
}
.woocommerce div.product p.price {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: var(--space-6);
}
.woocommerce div.product form.cart {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    padding: var(--space-6);
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
}
.woocommerce div.product form.cart .quantity .qty {
    width: 72px;
    height: 48px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--text-lg);
    text-align: center;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1;
    height: 48px;
}
.woocommerce div.product .product_meta {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs { margin-top: var(--space-12); }
.woocommerce div.product .woocommerce-tabs ul.tabs {
    list-style: none;
    display: flex;
    gap: var(--space-1);
    padding: 0;
    margin: 0 0 var(--space-1) 0;
    border-bottom: 2px solid var(--color-border-light);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: var(--space-3) var(--space-5);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
    padding: var(--space-8) 0;
    border: none;
    box-shadow: none;
    background: none;
}

/* Related / Upsell */
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products {
    margin-top: var(--space-16);
    padding-top: var(--space-12);
    border-top: 1px solid var(--color-border-light);
}
.woocommerce div.product .related.products > h2,
.woocommerce div.product .upsells.products > h2 {
    font-size: var(--text-3xl);
    font-weight: 800;
    margin-bottom: var(--space-8);
    background: var(--partou-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================
   WooCommerce — Notices
   ============================================================ */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-left: 4px solid var(--color-success);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-sm);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    border-top: none;
}
.woocommerce-error { border-left-color: var(--color-error); background: var(--tint-red-04); }
.woocommerce-info { border-left-color: var(--color-primary); background: var(--tint-purple-04); }
.woocommerce-message { background: var(--tint-success-04); }

/* ============================================================
   WooCommerce — Cart Page
   ============================================================ */
.woocommerce table.shop_table {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    border-collapse: separate;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.woocommerce table.shop_table th {
    background: var(--color-bg-light);
    font-weight: 700;
    font-size: var(--text-sm);
    padding: var(--space-4) var(--space-5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.woocommerce table.shop_table td {
    padding: var(--space-5);
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border-light);
}
.woocommerce table.shop_table .product-thumbnail img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}
.woocommerce table.shop_table .product-name a {
    font-weight: 700;
    color: var(--color-text-dark);
}
.woocommerce table.shop_table .product-remove a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--space-12);
    min-height: var(--space-12);
    border-radius: var(--radius-full);
    background: var(--tint-red-08);
    color: var(--color-error);
}
.woocommerce table.shop_table .product-remove a.remove:hover {
    background: var(--color-error);
    color: #fff;
}

/* Cart Totals */
.woocommerce-cart .cart-collaterals .cart_totals {
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
}
.woocommerce-cart .cart-collaterals .cart_totals .checkout-button {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--color-cta);
    color: var(--color-text-dark);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-6);
    font-weight: 700;
    font-size: var(--text-lg);
    box-shadow: var(--shadow-orange-glow);
}
.woocommerce-cart .cart-collaterals .cart_totals .checkout-button:hover {
    background: var(--color-cta-hover);
    transform: translateY(-2px);
}

/* ============================================================
   WooCommerce — Checkout
   ============================================================ */
@media (min-width: 768px) {
    .woocommerce-checkout .col2-set {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }
}
.woocommerce-checkout h3 {
    font-size: var(--text-xl);
    font-weight: 800;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-border-light);
}
.woocommerce-checkout #order_review {
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
}
.woocommerce-checkout #place_order {
    width: 100%;
    background: var(--color-cta);
    color: var(--color-text-dark);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-8);
    font-weight: 700;
    font-size: var(--text-lg);
    box-shadow: var(--shadow-orange-glow);
    margin-top: var(--space-6);
}
.woocommerce-checkout #place_order:hover {
    background: var(--color-cta-hover);
    transform: translateY(-2px);
}

/* Delivery Options */
.partou-delivery-section {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin: var(--space-8) 0;
    border: 1px solid var(--color-border-light);
}

.partou-delivery-section__title {
    font-size: var(--text-xl);
    font-weight: 800;
    margin-bottom: var(--space-4);
    color: var(--color-text-dark);
    background: var(--partou-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.partou-delivery-radio label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.partou-delivery-radio label:hover {
    background: var(--partou-gradient-soft);
}

/* ============================================================
   WooCommerce — Pagination
   ============================================================ */
.woocommerce nav.woocommerce-pagination {
    margin-top: var(--space-12);
    text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
    display: inline-flex;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    border: none;
}
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span.current {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    font-weight: 700;
    border: 2px solid var(--color-border-light);
    background: var(--color-surface);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--partou-gradient);
    color: #fff;
    border-color: transparent;
}

/* ============================================================
   PCWS Product Cards (moved from content-product.php)
   ============================================================ */
.pcws-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
    position: relative;
}

.pcws-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

/* Badge zone */
.pcws-card__badges {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    z-index: 2;
}

.pcws-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
}

.pcws-badge--sale {
    background: var(--partou-gradient);
    color: #fff;
}

.pcws-badge--soldout {
    background: var(--color-text-muted);
    color: #fff;
}

/* Product image */
.pcws-card__image-wrap {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-light);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.pcws-card__image-wrap a {
    display: block;
}

.pcws-card__image-wrap img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}

.pcws-card:hover .pcws-card__image-wrap img {
    transform: scale(1.04);
}

/* Placeholder when no image — branded gradient diamond met paars-accent icoon */
.pcws-card__image-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 25%, rgba(243, 162, 0, 0.12), transparent 55%),
        radial-gradient(circle at 70% 80%, rgba(236, 87, 93, 0.12), transparent 55%),
        linear-gradient(135deg, #faf5f9 0%, #fff4ec 100%);
    color: var(--color-primary);
    font-size: 3rem;
    position: relative;
}

.pcws-card__image-placeholder::before {
    content: '';
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 0 0 2px rgba(88, 35, 84, 0.06);
}

.pcws-card__image-placeholder svg {
    position: relative;
    opacity: 0.42;
}

/* Card body */
.pcws-card__body {
    padding: var(--space-5) var(--space-5) 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pcws-card__category {
    /* Was --text-xs (12px); bumped to --text-sm to clear 14px mobile floor.
       Inline tap-target with generous vertical padding for ≥44px hitbox. */
    display: inline-flex;
    align-items: center;
    min-height: var(--space-12);
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--partou-red);
    margin-bottom: var(--space-1);
}

.pcws-card__title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: var(--space-2);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pcws-card__title a {
    display: flex;
    align-items: flex-start;
    min-height: var(--space-12);
    padding: var(--space-1) 0;
    color: inherit;
    text-decoration: none;
}

.pcws-card__title a:hover,
.pcws-card__title a:focus-visible {
    color: var(--color-primary);
}

.pcws-card__excerpt {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.55;
    margin-bottom: var(--space-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.pcws-card__price {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.2;
    margin-bottom: var(--space-4);
}

.pcws-card__price del {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: line-through;
    margin-right: var(--space-2);
}

.pcws-card__price ins {
    text-decoration: none;
    color: var(--partou-red);
}

/* Quick-add footer */
.pcws-card__footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border-light);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* Stack footer vertically on narrow cards (sidebar layout) */
.products-with-sidebar__main .pcws-card__footer {
    flex-direction: column;
    align-items: stretch;
}

.products-with-sidebar__main .pcws-card__footer .pcws-qty-stepper {
    align-self: flex-start;
}

.products-with-sidebar__main .pcws-card__footer .pcws-card__add-btn {
    justify-content: center;
}

/* Sticker products: link-only footer */
.pcws-card__footer--link {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border-light);
}

.pcws-card__order-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--space-12);
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--color-primary);
    background: transparent;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.pcws-card__order-link:hover,
.pcws-card__order-link:focus-visible {
    color: var(--color-accent);
    text-decoration: none;
}

.pcws-card__order-link svg {
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.pcws-card__order-link:hover svg,
.pcws-card__order-link:focus-visible svg {
    transform: translateX(3px);
}

/* Qty stepper */
.pcws-qty-stepper {
    display: flex;
    align-items: stretch;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color var(--transition-fast);
}

.pcws-qty-stepper:focus-within {
    border-color: var(--color-primary);
}

.pcws-qty-stepper__btn {
    min-width: var(--space-12);
    min-height: var(--space-12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-light);
    border: none;
    cursor: pointer;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text);
    transition: background var(--transition-fast);
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
}

.pcws-qty-stepper__btn:hover {
    background: var(--partou-gradient-soft);
    color: var(--partou-purple);
}

.pcws-qty-stepper__btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.pcws-qty-stepper__input {
    width: 46px;
    min-height: var(--space-12);
    border: none;
    text-align: center;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-dark);
    background: #fff;
    -moz-appearance: textfield;
    padding: 0;
}

.pcws-qty-stepper__input::-webkit-inner-spin-button,
.pcws-qty-stepper__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.pcws-qty-stepper__input:focus {
    outline: none;
    background: var(--partou-gradient-soft);
    box-shadow: inset 0 0 0 2px var(--color-primary);
}

/* Add-to-cart button */
.pcws-card__add-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--partou-gradient);
    color: #fff;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-btn);
    text-decoration: none;
    white-space: nowrap;
    min-height: var(--space-12);
}

.pcws-card__add-btn:hover:not(:disabled),
.pcws-card__add-btn:focus-visible:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-purple-mid);
    color: #fff;
}

.pcws-card__add-btn:disabled,
.pcws-card__add-btn.is-loading {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.pcws-card__add-btn svg {
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.pcws-card__add-btn:hover svg {
    transform: scale(1.15);
}

/* Out of stock state */
.pcws-card--out-of-stock .pcws-card__footer {
    background: var(--color-bg-light);
}

.pcws-card__out-of-stock {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    width: 100%;
    text-align: center;
    padding: var(--space-2) 0;
}

/* Toast feedback */
.pcws-toast {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    background: var(--color-text-dark);
    color: #fff;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    box-shadow: var(--shadow-card-hover);
    z-index: 100;
    transform: translateY(80px);
    opacity: 0;
    transition: all var(--transition-base);
    pointer-events: none;
}

.pcws-toast.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.pcws-toast--success {
    background: var(--color-success);
}

.pcws-toast--error {
    background: var(--color-error);
}

/* ============================================================
   Shop Page — Archive Product
   ============================================================ */
.pcws-shop-page {
    padding: var(--space-8) 0 var(--space-16);
}

.pcws-shop-header {
    background: var(--partou-gradient);
    padding: var(--space-12) 0;
    margin-bottom: var(--space-8);
    position: relative;
    overflow: hidden;
}

.pcws-shop-header::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -8%;
    width: 500px;
    height: 500px;
    background: rgba(var(--brand-white-rgb), 0.06);
    border-radius: 50%;
    pointer-events: none;
}

.pcws-shop-header .container {
    position: relative;
    z-index: 1;
}

.pcws-shop-header__title {
    font-size: var(--text-4xl);
    font-weight: 800;
    color: #fff;
    margin-bottom: var(--space-2);
}

.pcws-shop-header__subtitle {
    font-size: var(--text-lg);
    color: rgba(var(--brand-white-rgb), 0.85);
}

/* Category filter pills — sticky only ≥640px (mobile keeps it inline so the screen scrolls naturally) */
.pcws-filter-bar {
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: var(--space-8);
    background: var(--color-bg);
    position: static;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(var(--brand-purple-rgb), 0.06);
}

.pcws-filter-bar .container {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.pcws-filter-label {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.pcws-filter-pills {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pcws-filter-pill {
    display: inline-flex;
    align-items: center;
    min-height: var(--space-12);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    border: 2px solid var(--color-border);
    color: var(--color-text);
    background: var(--color-bg);
    transition: all var(--transition-base);
    cursor: pointer;
}

.pcws-filter-pill:hover {
    border-color: var(--partou-purple);
    color: var(--partou-purple);
    background: var(--partou-gradient-soft);
}

.pcws-filter-pill.is-active {
    background: var(--partou-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--shadow-btn);
}

.pcws-filter-pill .pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-1);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 700;
    margin-left: var(--space-2);
    background: var(--tint-purple-12);
    color: var(--partou-purple);
}

.pcws-filter-pill.is-active .pill-count {
    background: var(--tint-white-25);
    color: #fff;
}

/* Shop toolbar */
.pcws-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
}

.pcws-product-count {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-weight: 500;
}

.pcws-product-count strong {
    color: var(--color-text-dark);
    font-weight: 700;
}

.woocommerce-ordering .orderby {
    min-height: var(--space-12);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-dark);
    background: var(--color-bg);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.woocommerce-ordering .orderby:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: var(--focus-ring-purple-soft);
}

/* Product grid — .pcws-product-grid is co-classed with `products`; mobile-first
   grid lives on `.woocommerce ul.products` (~line 1421). Filter-bar position
   tweak only — keep grid system in one place. */
@media (min-width: 640px) {
    .pcws-filter-bar {
        position: sticky;
    }
}

/* No products */
.pcws-no-products {
    text-align: center;
    padding: var(--space-16) var(--space-6);
    background: var(--color-bg-light);
    border-radius: var(--radius-xl);
    border: 2px dashed var(--color-border);
}

.pcws-no-products__icon {
    font-size: 3rem;
    margin-bottom: var(--space-4);
    opacity: 0.4;
}

.pcws-no-products__title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: var(--space-3);
}

.pcws-no-products__text {
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

/* ============================================================
   Single Product Page
   ============================================================ */
.pcws-single {
    padding: var(--space-10) 0 var(--space-16);
}

/* Breadcrumb */
.pcws-breadcrumb {
    padding: var(--space-4) 0;
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.pcws-breadcrumb a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.pcws-breadcrumb a:hover {
    color: var(--color-primary);
}

.pcws-breadcrumb__sep {
    color: var(--color-border);
    user-select: none;
}

.pcws-breadcrumb__current {
    color: var(--color-text-dark);
    font-weight: 600;
}

/* Two-column layout — mobile-first: single column, becomes two ≥1024px */
.pcws-single__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: start;
}

@media (min-width: 1024px) {
    .pcws-single__layout {
        /* Gallery krijgt een vast bereik (max 420px), wizard krijgt de rest.
           Vlaggen/borden wizards waren overdreven smal toen beide kolommen 1fr 1fr
           waren; tegelijk had de gallery zee aan whitespace eronder. */
        grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
        gap: var(--space-10);
    }
}

@media (min-width: 1440px) {
    .pcws-single__layout {
        gap: var(--space-12);
    }
}

/* Vlag-wizard / configurable products: gallery weg, preview zit al in de wizard.
   Layout wordt single-col; info-header + wizard krijgen volle breedte zonder
   nutteloze witruimte links. */
.pcws-single__layout--no-gallery {
    grid-template-columns: minmax(0, 1fr);
    max-width: 960px;
    margin-inline: auto;
}

@media (min-width: 1024px) {
    .pcws-single__layout--no-gallery {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }

    /* Header (title + price + USPs) compacter: title links, price rechts */
    .pcws-single__layout--no-gallery .pcws-single__info-col {
        gap: var(--space-4);
    }

    .pcws-single__layout--no-gallery .pcws-single__price-block {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-4);
    }

    .pcws-single__layout--no-gallery .pcws-single__price-incl {
        margin: 0;
        font-size: var(--text-xs);
        color: var(--color-text-muted);
    }

    /* Design-step: preview + thumb grid naast elkaar i.p.v. gestapeld.
       Halveert scroll-hoogte op de design-stap. */
    .pcws-single__layout--no-gallery .pcws-vlagwizard__step[data-step="1"] .pcws-vlagwizard__step-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        gap: var(--space-6);
        align-items: start;
    }

    .pcws-single__layout--no-gallery .pcws-vlagwizard__context {
        grid-column: 1 / -1;
    }

    .pcws-single__layout--no-gallery .pcws-vlagwizard__design-preview {
        margin: 0;
        max-width: 100%;
        aspect-ratio: 3 / 4;
    }

    .pcws-single__layout--no-gallery .pcws-vlagwizard__design-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
}

/* Gallery column — sticky at ≥1024px only */
.pcws-single__gallery-col {
    position: static;
}

@media (min-width: 1024px) {
    .pcws-single__gallery-col {
        position: sticky;
        top: calc(80px + var(--space-4));
    }
}

.pcws-gallery {
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--color-bg-light);
}

.pcws-gallery__main {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
}

.pcws-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
    display: block;
}

.pcws-gallery__main img:hover {
    transform: scale(1.04);
}

.pcws-gallery__main-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--partou-gradient-soft);
    color: var(--color-text-muted);
}

.pcws-gallery__thumbs {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-bg-light);
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.pcws-gallery__thumb {
    flex-shrink: 0;
    width: 72px;
    height: 54px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.pcws-gallery__thumb.is-active,
.pcws-gallery__thumb:hover {
    border-color: var(--partou-purple);
}

.pcws-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Info column */
.pcws-single__info-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.pcws-single__category {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--partou-red);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.pcws-single__title {
    font-size: clamp(1.5rem, 3vw + 0.5rem, 2rem);
    font-weight: 800;
    color: var(--color-text-dark);
    line-height: 1.2;
    margin: 0;
}

.pcws-single__price-block {
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--color-border-light);
}

.pcws-single__price {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.1;
}

.pcws-single__price del {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--color-text-muted);
    margin-right: var(--space-3);
    text-decoration: line-through;
}

.pcws-single__price ins {
    text-decoration: none;
    color: var(--partou-red);
}

.pcws-single__price-incl {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.pcws-single__short-desc {
    font-size: var(--text-base);
    color: var(--color-text);
    line-height: 1.7;
}

.pcws-single__short-desc p {
    margin-bottom: var(--space-3);
}

.pcws-single__short-desc p:last-child {
    margin-bottom: 0;
}

/* Qty + add to cart */
.pcws-single__add-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.pcws-single__qty-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.pcws-single__qty-label {
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--color-text-dark);
    min-width: 60px;
}

.pcws-single__add-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-lg);
    background: var(--partou-gradient);
    color: #fff;
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-btn);
}

.pcws-single__add-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(88,35,84,0.35);
    color: #fff;
}

.pcws-single__add-btn svg {
    flex-shrink: 0;
}

/* Stock status */
.pcws-single__stock {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
}

.pcws-single__stock--in { color: var(--color-success); }
.pcws-single__stock--out { color: var(--color-error); }

.pcws-single__stock-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: currentColor;
}

/* Meta info */
.pcws-single__meta {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    border-top: 1px solid var(--color-border-light);
    padding-top: var(--space-4);
}

.pcws-single__meta-row {
    display: flex;
    gap: var(--space-2);
}

.pcws-single__meta-label {
    font-weight: 700;
    color: var(--color-text-dark);
    min-width: 100px;
}

/* Compact header — sticker products */
.pcws-single__compact-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3) var(--space-6);
    margin-bottom: var(--space-4);
}

.pcws-single__compact-header .pcws-single__title {
    width: 100%;
    margin-bottom: 0;
}

.pcws-single__compact-header .pcws-single__price-block {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.pcws-single__compact-header .pcws-single__short-desc {
    width: 100%;
    margin-bottom: 0;
}

/* Product Tabs */
.pcws-tabs {
    margin-top: var(--space-16);
}

.pcws-tabs__nav {
    display: flex;
    border-bottom: 2px solid var(--color-border-light);
    gap: var(--space-1);
    overflow-x: auto;
    scrollbar-width: none;
}

.pcws-tabs__nav::-webkit-scrollbar { display: none; }

.pcws-tabs__btn {
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text-muted);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.pcws-tabs__btn:hover { color: var(--color-primary); }

.pcws-tabs__btn.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--partou-purple);
}

.pcws-tabs__panel {
    display: none;
    padding: var(--space-8) 0;
    animation: pcwsFadeIn 0.2s ease;
}

.pcws-tabs__panel.is-active { display: block; }

@keyframes pcwsFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pcws-tab-content {
    max-width: 720px;
    font-size: var(--text-base);
    color: var(--color-text);
    line-height: 1.75;
}

.pcws-tab-content h2,
.pcws-tab-content h3 {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text-dark);
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
}

.pcws-tab-content p { margin-bottom: var(--space-4); }
.pcws-tab-content ul,
.pcws-tab-content ol { padding-left: var(--space-6); margin-bottom: var(--space-4); }
.pcws-tab-content li { margin-bottom: var(--space-2); }

#pcws-panel-reviews .woocommerce-Reviews { max-width: 720px; }

/* Related / Upsell Products */
.pcws-related {
    margin-top: var(--space-16);
    padding-top: var(--space-12);
    border-top: 1px solid var(--color-border-light);
}

.pcws-related__heading {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-text-dark);
    margin-bottom: var(--space-8);
    position: relative;
    display: inline-block;
}

.pcws-related__heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 3px;
    background: var(--partou-gradient);
    border-radius: var(--radius-full);
}

.pcws-related__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

@media (min-width: 481px) {
    .pcws-related__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 769px) {
    .pcws-related__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1025px) {
    .pcws-related__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   WooCommerce Placeholder Image Override
   ============================================================ */
.woocommerce ul.products li.product a img.wc-placeholder,
.woocommerce ul.products li.product a img[src*="woocommerce-placeholder"],
.woocommerce div.product div.images img.wc-placeholder,
.woocommerce div.product div.images img[src*="woocommerce-placeholder"],
img.wc-placeholder,
img[src*="woocommerce-placeholder"] {
    background: var(--partou-gradient-soft);
    object-fit: contain;
    padding: var(--space-8);
    opacity: 0.4;
}

/* ============================================================
   Logo Fallback (no inline styles)
   ============================================================ */
.site-logo__text {
    font-size: 1.5rem;
    font-weight: 800;
    background: var(--partou-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.site-logo__text--light {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
}

/* ============================================================
   Category Card — Gradient Placeholder (no image)
   ============================================================ */
.category-card--no-image {
    background: var(--partou-gradient);
}

.category-card--no-image .category-card__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -65%);
    opacity: 0.35;
    color: #fff;
}

.category-card--no-image .category-card__overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
}

/* ============================================================
   Shop Page Header
   ============================================================ */
.shop-hero {
    background: var(--partou-gradient);
    padding: var(--space-12) 0 var(--space-10);
    margin-bottom: var(--space-8);
}

.shop-hero__title {
    font-size: var(--text-4xl);
    font-weight: 800;
    color: #fff;
    margin-bottom: var(--space-3);
}

.shop-hero__subtitle {
    font-size: var(--text-lg);
    color: rgba(var(--brand-white-rgb), 0.85);
    max-width: 500px;
}

/* Category pills on shop page */
.shop-category-pills {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-6);
}

.shop-category-pill {
    display: inline-flex;
    align-items: center;
    min-height: var(--space-12);
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--tint-white-15);
    backdrop-filter: blur(10px);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    transition: all var(--transition-fast);
    border: 1px solid var(--tint-white-20);
}

.shop-category-pill:hover,
.shop-category-pill:focus-visible,
.shop-category-pill--active {
    background: var(--tint-white-25);
    color: #fff;
}

.shop-category-pill__count {
    background: var(--tint-white-20);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
}

/* ============================================================
   Single Product — Better Gallery Placeholder
   ============================================================ */
.woocommerce div.product div.images .woocommerce-product-gallery__image--placeholder img {
    background: var(--partou-gradient-soft);
    padding: var(--space-12);
    opacity: 0.35;
}

/* ============================================================
   Mobile-First Responsive Cascade
   Default = phones (<480px). ≥480 = larger phones / small tablets.
   ≥768 = tablets. ≥1024 = desktops.
   ============================================================ */

/* USP bar — mobile default: 2-up wrap, smaller icons */
.usp-bar .container {
    justify-content: flex-start;
    gap: var(--space-4);
}

.usp-item {
    flex: 0 0 calc(50% - var(--space-2));
    font-size: var(--text-sm);
}

.usp-item__icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
}

/* Category grid — mobile default: 2-up dense */
.category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.category-card {
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
}

.category-card__overlay {
    padding: var(--space-3);
}

.category-card__title {
    font-size: var(--text-base);
}

.category-card__count {
    font-size: var(--text-sm);
}

/* ≥480px — slightly more breathing room, restore some desktop styling */
@media (min-width: 480px) {
    .usp-bar .container {
        gap: var(--space-6);
        justify-content: center;
    }

    .usp-item {
        flex: 0 0 auto;
    }

    .usp-item__icon {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-md);
    }

    .category-card__title {
        font-size: var(--text-xl);
    }
}

/* ≥640px — category grid becomes 3-up on small tablets */
@media (min-width: 640px) {
    .category-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-6);
    }

    .category-card {
        aspect-ratio: 3/2;
        border-radius: var(--radius-xl);
    }

    .category-card__overlay {
        padding: var(--space-6);
    }
}

/* ≥1024px — full auto-fill desktop grid */
@media (min-width: 1024px) {
    .category-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .usp-bar .container {
        gap: var(--space-10);
    }
}

/* ============================================================
   Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms;
        transition-duration: 0.01ms;
    }
}

/* ============================================================
   Sticker Product Hero
   ============================================================ */

/* Remove top padding from .pcws-single when sticker hero is present */
.pcws-single:has(.pcws-sticker-hero) {
    padding-top: 0;
}

/* Base — full-width gradient hero with rounded bottom */
.pcws-sticker-hero {
    background: var(--partou-gradient);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    padding: var(--space-8) var(--space-6);
    margin-bottom: var(--space-8);
    position: relative;
    overflow: hidden;
}

/* Subtle noise/texture overlay for depth */
.pcws-sticker-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(255,255,255,0.08) 0%, transparent 60%);
    pointer-events: none;
}

/* Two-column grid: 60/40, stacks on mobile */
.pcws-sticker-hero__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

/* Breadcrumb inside hero */
.pcws-breadcrumb--hero {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.pcws-breadcrumb--hero,
.pcws-breadcrumb--hero a,
.pcws-breadcrumb--hero .pcws-breadcrumb__sep,
.pcws-breadcrumb--hero .pcws-breadcrumb__current {
    color: rgba(255, 255, 255, 0.7);
}

.pcws-breadcrumb--hero a:hover {
    color: #ffffff;
}

/* ---- Left column: info ---- */

.pcws-sticker-hero__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Category tag pill */
.pcws-sticker-hero__cat-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 5px var(--space-3);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.25);
    width: max-content;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.pcws-sticker-hero__cat-tag:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.pcws-sticker-hero__cat-tag svg {
    flex-shrink: 0;
    opacity: 0.85;
}

/* Hero title */
.pcws-sticker-hero__title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

/* Price badge wrapper */
.pcws-sticker-hero__price-wrap {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.pcws-sticker-hero__price {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    color: #ffffff;
    font-size: var(--text-2xl);
    font-weight: 800;
    line-height: 1.2;
}

/* WooCommerce injects .price > .woocommerce-Price-amount — inherit white */
.pcws-sticker-hero__price .price,
.pcws-sticker-hero__price .woocommerce-Price-amount,
.pcws-sticker-hero__price .woocommerce-Price-currencySymbol {
    color: #ffffff;
}

.pcws-sticker-hero__price-note {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-sm);
    font-weight: 500;
}

/* Short description */
.pcws-sticker-hero__desc {
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--text-base);
    line-height: 1.65;
    max-width: 52ch;
}

.pcws-sticker-hero__desc p {
    margin: 0;
}

.pcws-sticker-hero__desc p + p {
    margin-top: var(--space-3);
}

/* Stock status */
.pcws-sticker-hero__stock {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.pcws-sticker-hero__stock-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.pcws-sticker-hero__stock--in .pcws-sticker-hero__stock-dot {
    background: #68d391;
    box-shadow: 0 0 0 3px rgba(104, 211, 145, 0.3);
}

.pcws-sticker-hero__stock--out .pcws-sticker-hero__stock-dot {
    background: rgba(255, 255, 255, 0.4);
}

/* USP badges row */
.pcws-sticker-hero__usps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.pcws-sticker-hero__usp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 5px var(--space-3);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.pcws-sticker-hero__usp svg {
    flex-shrink: 0;
    opacity: 0.8;
}

/* ---- Right column: decorative visual ---- */

.pcws-sticker-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    /* Dots are absolutely positioned descendants — clip them so narrow
       viewports never let them escape into the title column. */
    overflow: hidden;
    border-radius: var(--radius-xl);
}

/* Outer ring — gradient border via pseudo-element */
.pcws-sticker-hero__circle-outer {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: var(--radius-full);
    padding: 3px;
    background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.15));
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.3);
    flex-shrink: 0;
}

/* Inner circle — frosted glass white */
.pcws-sticker-hero__circle-inner {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    text-align: center;
    padding: var(--space-4);
}

.pcws-sticker-hero__icon {
    color: var(--partou-purple);
    opacity: 0.8;
    flex-shrink: 0;
}

.pcws-sticker-hero__circle-label {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.4;
    white-space: pre-line;
}

/* Floating decoration dots */
.pcws-sticker-hero__dot {
    position: absolute;
    border-radius: var(--radius-full);
    background: var(--tint-white-25);
    pointer-events: none;
}

.pcws-sticker-hero__dot--1 {
    width: 48px;
    height: 48px;
    top: 12px;
    right: 12px;
}

.pcws-sticker-hero__dot--2 {
    width: 28px;
    height: 28px;
    bottom: 24px;
    left: 16px;
    background: rgba(var(--brand-white-rgb), 0.18);
}

.pcws-sticker-hero__dot--3 {
    width: 16px;
    height: 16px;
    bottom: 60px;
    right: 24px;
    background: rgba(var(--brand-white-rgb), 0.3);
}

/* ============================================================
   Sticker Hero — Responsive
   ============================================================ */

/* Tablet: two columns appear */
@media (min-width: 640px) {
    .pcws-sticker-hero {
        padding: var(--space-12) var(--space-8);
    }

    .pcws-sticker-hero__layout {
        grid-template-columns: 3fr 2fr;
        align-items: center;
        gap: var(--space-12);
    }

    .pcws-sticker-hero__circle-outer {
        width: 240px;
        height: 240px;
    }

    .pcws-sticker-hero__visual {
        min-height: 260px;
    }

    .pcws-sticker-hero__dot--1 {
        width: 60px;
        height: 60px;
        top: 0;
        right: 0;
    }

    .pcws-sticker-hero__dot--2 {
        width: 36px;
        height: 36px;
        bottom: 16px;
        left: 8px;
    }

    .pcws-sticker-hero__dot--3 {
        width: 20px;
        height: 20px;
        bottom: 64px;
        right: 16px;
    }
}

/* Desktop: more breathing room */
@media (min-width: 1024px) {
    .pcws-sticker-hero {
        padding: var(--space-16) var(--space-12);
        margin-bottom: var(--space-12);
    }

    .pcws-sticker-hero__circle-outer {
        width: 280px;
        height: 280px;
    }

    .pcws-sticker-hero__visual {
        min-height: 300px;
    }

    .pcws-sticker-hero__icon {
        width: 80px;
        height: 80px;
    }

    .pcws-sticker-hero__circle-label {
        font-size: var(--text-sm);
    }
}

/* ============================================================
   Service options — product cards (borden categorie)
   ============================================================ */
.pcws-card__services {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.pcws-card__service-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-primary);
    background: var(--partou-gradient-soft);
    padding: 3px var(--space-2);
    border-radius: var(--radius-full);
    line-height: 1.3;
}

.pcws-card__service-badge svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Montage/bezorging selector in card */
.pcws-card__service-selector {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
}

/* Service-toggle: secundair gestyled (was te visueel zwaar t.o.v. primary CTA).
   Donker-paarse tekst op zachte achtergrond, gradient border-accent op hover. */
.pcws-service-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: inherit;
    color: var(--color-primary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border-light);
    transition: all var(--transition-fast);
    user-select: none;
}

.pcws-service-toggle svg {
    stroke: var(--color-primary);
    opacity: 0.7;
}

.pcws-service-toggle::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    opacity: 0.6;
    transform: rotate(45deg);
    margin-left: auto;
    flex-shrink: 0;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.pcws-service-toggle[aria-expanded="true"]::after {
    transform: rotate(-135deg);
    opacity: 1;
}

.pcws-service-toggle:hover,
.pcws-service-toggle:focus-visible {
    border-color: var(--color-accent);
    background: var(--color-surface);
    color: var(--color-accent);
}

.pcws-service-toggle:hover svg,
.pcws-service-toggle:focus-visible svg {
    stroke: var(--color-accent);
    opacity: 1;
}

/* Date picker for on-appointment services */
.pcws-service-date {
    padding: var(--space-2) var(--space-3);
}

.pcws-service-date__label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.pcws-service-date__input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--color-text-dark);
    transition: border-color var(--transition-fast);
}

.pcws-service-date__input:focus {
    border-color: var(--color-primary);
    outline: 2px solid rgba(88,35,84,0.15);
    outline-offset: 1px;
}

/* Single product — service section (borden) */
.pcws-single__service-section {
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
}

.pcws-single__service-heading {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: var(--space-4);
}

.pcws-single__service-group {
    margin-bottom: var(--space-3);
}

.pcws-single__service-section .pcws-service-option {
    font-size: var(--text-sm);
    padding: var(--space-3) var(--space-4);
}

.pcws-single__service-section .pcws-service-option__price {
    font-size: var(--text-sm);
}

.pcws-card__service-options {
    background: var(--color-bg-light);
    border-radius: var(--radius-sm);
    margin-top: var(--space-2);
    padding: var(--space-2);
    flex-direction: column;
    gap: var(--space-1);
}

.pcws-card__service-options[hidden] {
    display: none;
}

.pcws-card__service-options:not([hidden]) {
    display: flex;
}

.pcws-service-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
    font-size: var(--text-xs);
    line-height: 1.4;
}

.pcws-service-option:hover {
    background: var(--color-bg-light);
}

.pcws-service-option input[type="radio"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    flex-shrink: 0;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    cursor: pointer;
    position: relative;
}

.pcws-service-option input[type="radio"]:checked {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 3px var(--color-primary);
}

.pcws-service-option__label {
    flex: 1;
    color: var(--color-text);
    font-weight: 500;
}

.pcws-service-option__price {
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

.pcws-service-option__price--free {
    color: var(--color-success);
}

/* Disclaimer onder montage opties — communiceert dat /uur tarieven niet vast zijn */
.pcws-service-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: var(--space-2) var(--space-3);
    background: var(--tint-purple-04);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--color-text);
}

.pcws-service-note svg {
    flex-shrink: 0;
    color: var(--color-primary);
    margin-top: 2px;
}

/* Divider between bezorging and montage groups */
.pcws-service-group-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    padding: var(--space-2) var(--space-3) 0;
    margin-top: var(--space-1);
}

/* ============================================================
   Product Specs Grid — description tab (sticker products)
   ============================================================ */
.pcws-product-specs {
    margin-bottom: var(--space-6, 24px);
}

.pcws-product-specs__heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-dark, #2d1f2c);
    margin-bottom: var(--space-4, 16px);
}

.pcws-product-specs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--color-border-light, #f0eaef);
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
}

.pcws-product-specs__item {
    display: grid;
    grid-template-columns: 24px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-surface);
    transition: background var(--transition-fast);
}

@media (min-width: 480px) {
    .pcws-product-specs__item {
        grid-template-columns: 28px 1fr 1fr;
        grid-template-rows: auto;
    }
}

.pcws-product-specs__item:last-child {
    border-bottom: none;
}

.pcws-product-specs__item:nth-child(even) {
    background: var(--color-bg-light, #faf7fa);
}

.pcws-product-specs__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary, #582354);
    flex-shrink: 0;
}

.pcws-product-specs__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-dark, #2d1f2c);
}

.pcws-product-specs__value {
    font-size: var(--text-sm);
    color: var(--color-text-dark);
    font-weight: 500;
    grid-column: 2 / -1;
    text-align: left;
}

@media (min-width: 480px) {
    .pcws-product-specs__value {
        grid-column: auto;
        text-align: right;
        color: var(--color-text-muted);
        font-weight: 400;
    }
}

.pcws-product-specs__extra-desc {
    margin-top: var(--space-6, 24px);
    color: var(--color-text-muted, #8a7489);
    font-size: 0.9375rem;
    line-height: 1.65;
}

/* ============================================================
   Sticker Help CTA — replaces related products for stickers
   ============================================================ */
.pcws-sticker-help {
    margin: var(--space-8, 32px) 0 var(--space-12, 48px);
}

.pcws-sticker-help__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    flex-wrap: wrap;
}

@media (min-width: 600px) {
    .pcws-sticker-help__inner {
        flex-direction: row;
        align-items: center;
        gap: var(--space-6);
        padding: var(--space-6) var(--space-8);
    }
}

.pcws-sticker-help__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--partou-gradient, linear-gradient(135deg, #582354, #ec575d, #f3a200));
    color: #fff;
    flex-shrink: 0;
}

.pcws-sticker-help__text {
    flex: 1;
    min-width: 200px;
}

.pcws-sticker-help__heading {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-text-dark, #2d1f2c);
    margin: 0 0 var(--space-1, 4px);
}

.pcws-sticker-help__desc {
    font-size: 0.875rem;
    color: var(--color-text-muted, #8a7489);
    margin: 0;
    line-height: 1.5;
}

.pcws-sticker-help__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--space-12);
    padding: var(--space-3) var(--space-5);
    background: var(--partou-gradient);
    color: #fff;
    font-weight: 700;
    font-size: var(--text-base);
    border-radius: var(--radius-md);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow-purple-soft);
    transition: transform var(--transition-fast), box-shadow var(--transition-base);
    flex-shrink: 0;
}

.pcws-sticker-help__btn:hover,
.pcws-sticker-help__btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow-purple-mid);
    color: #fff;
    text-decoration: none;
}

@media (min-width: 600px) {
    .pcws-sticker-help__btn {
        width: auto;
    }
}

/* ============================================================
   Beachvlag Wizard — 3-step flow
   (single-product.php → vlaggen + PARTOU-BEACHVLAG / PARTOU-BANIERVLAG)
   ============================================================ */
.pcws-vlagwizard {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.pcws-vlagwizard__heading {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.2;
}

/* Progress bar */
.pcws-vlagwizard__progress {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.pcws-vlagwizard__progress-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    transition: background var(--transition-base), color var(--transition-base);
}

.pcws-vlagwizard__progress-item.is-active {
    background: var(--partou-gradient);
    color: #fff;
}

.pcws-vlagwizard__progress-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.25);
    font-size: var(--text-xs);
    font-weight: 700;
    flex-shrink: 0;
}

.pcws-vlagwizard__progress-item:not(.is-active) .pcws-vlagwizard__progress-num {
    background: var(--color-bg);
}

.pcws-vlagwizard__progress-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Step container */
.pcws-vlagwizard__step {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition-base);
}

.pcws-vlagwizard__step.is-open {
    border-color: var(--color-border);
}

.pcws-vlagwizard__step-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--space-12);
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: none;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text-dark);
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-base);
}

.pcws-vlagwizard__step-header:hover {
    background: var(--color-bg-light);
}

.pcws-vlagwizard__step-header:focus {
    outline: none;
}

.pcws-vlagwizard__step-header:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px var(--color-accent-hover);
}

.pcws-vlagwizard__step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 800;
    flex-shrink: 0;
    transition: background var(--transition-base), color var(--transition-base);
}

.pcws-vlagwizard__step.is-open .pcws-vlagwizard__step-badge {
    background: var(--partou-gradient);
    color: #fff;
}

.pcws-vlagwizard__step-title {
    flex: 1;
    line-height: 1.3;
}

.pcws-vlagwizard__step-chevron {
    color: var(--color-text-muted);
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

.pcws-vlagwizard__step.is-open .pcws-vlagwizard__step-chevron {
    transform: rotate(180deg);
}

.pcws-vlagwizard__step-panel {
    display: none;
    padding: var(--space-4) var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border-light);
}

.pcws-vlagwizard__step.is-open .pcws-vlagwizard__step-panel {
    display: block;
}

/* Step 1 — Current flag */
.pcws-vlagwizard__current-flag {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-bg-light);
}

.pcws-vlagwizard__current-flag-thumb {
    flex-shrink: 0;
    width: var(--space-12);
    height: var(--space-12);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pcws-vlagwizard__current-flag-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pcws-vlagwizard__current-flag-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.pcws-vlagwizard__current-flag-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: 500;
}

.pcws-vlagwizard__current-flag-name {
    font-size: var(--text-base);
    color: var(--color-text-dark);
    font-weight: 700;
    line-height: 1.2;
}

.pcws-vlagwizard__current-flag-price {
    font-size: var(--text-sm);
    color: var(--color-primary);
    font-weight: 700;
}

.pcws-vlagwizard__change-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-accent);
}

.pcws-vlagwizard__change-link:hover {
    color: var(--color-accent-hover);
}

/* Step 2 — Options */
.pcws-vlagwizard__options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

.pcws-vlagwizard__option {
    margin: 0;
}

.pcws-vlagwizard__option-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--space-12);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.pcws-vlagwizard__option-card:hover {
    border-color: var(--color-border);
    box-shadow: var(--shadow-card);
}

.pcws-vlagwizard__option-card.is-selected {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-card-hover);
}

.pcws-vlagwizard__option-card:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-accent-hover);
}

.pcws-vlagwizard__option-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pcws-vlagwizard__option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-md);
    background: var(--color-bg-light);
    color: var(--color-primary);
    flex-shrink: 0;
}

.pcws-vlagwizard__option-card.is-selected .pcws-vlagwizard__option-icon {
    background: var(--partou-gradient);
    color: #fff;
}

.pcws-vlagwizard__option-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
    min-width: 0;
}

.pcws-vlagwizard__option-name {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.2;
}

.pcws-vlagwizard__option-meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.pcws-vlagwizard__option-price {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary);
    flex-shrink: 0;
    text-align: right;
}

.pcws-vlagwizard__empty {
    margin: 0;
    padding: var(--space-4);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.pcws-vlagwizard__alt-link {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
}

.pcws-vlagwizard__alt-link a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-accent);
    font-weight: 600;
}

/* Step 3 — Summary + add */
.pcws-vlagwizard__qty-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.pcws-vlagwizard__qty-label {
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--color-text-dark);
    min-width: 60px;
}

.pcws-vlagwizard__summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
}

.pcws-vlagwizard__summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text);
}

.pcws-vlagwizard__summary-row.is-empty {
    display: none;
}

.pcws-vlagwizard__summary-row--total {
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-base);
    font-weight: 800;
    color: var(--color-text-dark);
}

.pcws-vlagwizard__summary-row--total .pcws-vlagwizard__summary-value {
    color: var(--color-primary);
    font-size: var(--text-lg);
}

.pcws-vlagwizard__summary-label {
    margin: 0;
}

.pcws-vlagwizard__summary-value {
    margin: 0;
    font-weight: 700;
}

.pcws-vlagwizard__add-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: var(--space-12);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-lg);
    background: var(--partou-gradient);
    color: #fff;
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    box-shadow: var(--shadow-btn);
}

.pcws-vlagwizard__add-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    color: #fff;
}

.pcws-vlagwizard__add-btn:focus {
    outline: none;
}

.pcws-vlagwizard__add-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-accent-hover), var(--shadow-btn);
}

.pcws-vlagwizard__add-btn.is-loading {
    opacity: 0.7;
    cursor: wait;
}

.pcws-vlagwizard__add-btn svg {
    flex-shrink: 0;
}

/* ≥640px — 2-col foot grid + always-open accordion */
@media (min-width: 640px) {
    .pcws-vlagwizard__options {
        grid-template-columns: repeat(2, 1fr);
    }

    .pcws-vlagwizard__step-chevron {
        display: none;
    }

    .pcws-vlagwizard__step-header {
        cursor: default;
    }

    .pcws-vlagwizard__step-header:hover {
        background: transparent;
    }
}

/* ≥1024px — 3-col foot grid */
@media (min-width: 1024px) {
    .pcws-vlagwizard__options {
        grid-template-columns: repeat(3, 1fr);
    }

    .pcws-vlagwizard {
        padding: var(--space-8);
    }
}

/* ============================================================
   Step 1 — Design picker
   (live preview + 6-up thumb grid; mobile-first)
   ============================================================ */

/* Contextual header — replaces former 'current flag' card */
.pcws-vlagwizard__context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-bg-light);
}

.pcws-vlagwizard__context-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.pcws-vlagwizard__context-label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-text-muted);
}

.pcws-vlagwizard__context-name {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.2;
}

/* Live preview — square, brand-grade card */
.pcws-vlagwizard__design-preview {
    position: relative;
    margin: 0 0 var(--space-5);
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--color-bg-light);
    box-shadow: var(--shadow-card);
}

.pcws-vlagwizard__design-preview-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--transition-base);
}

.pcws-vlagwizard__design-preview-caption {
    position: absolute;
    left: var(--space-3);
    bottom: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: rgba(var(--brand-white-rgb), 0.92);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-card);
}

.pcws-vlagwizard__design-preview-eyebrow {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pcws-vlagwizard__design-preview-name {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.2;
}

/* Thumbnail grid — 2-up mobile, 3-up ≥640px */
.pcws-vlagwizard__design-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

/* Thumbnail card — interactive, ≥48px tap target via aspect-ratio + min-height */
.pcws-vlagwizard__design-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: var(--space-12);
    padding: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    font-family: var(--font-primary);
    text-align: left;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.pcws-vlagwizard__design-card:hover {
    border-color: var(--color-border);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

.pcws-vlagwizard__design-card:focus {
    outline: none;
}

.pcws-vlagwizard__design-card:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-purple);
    border-color: var(--color-primary);
}

.pcws-vlagwizard__design-card-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-bg-light);
}

.pcws-vlagwizard__design-card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.pcws-vlagwizard__design-card:hover .pcws-vlagwizard__design-card-thumb img {
    transform: scale(1.04);
}

.pcws-vlagwizard__design-card-label {
    display: block;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.2;
}

/* Check badge — top-right, only visible when selected */
.pcws-vlagwizard__design-card-check {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-6);
    height: var(--space-6);
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: var(--color-bg);
    box-shadow: var(--shadow-card);
    opacity: 0;
    transform: scale(0.7);
    transition: opacity var(--transition-base), transform var(--transition-base);
    pointer-events: none;
}

/* Selected state — 2px accent border + glow + check visible */
.pcws-vlagwizard__design-card.is-selected {
    border: 2px solid var(--color-accent);
    box-shadow: var(--shadow-purple-deep);
}

.pcws-vlagwizard__design-card.is-selected .pcws-vlagwizard__design-card-check {
    opacity: 1;
    transform: scale(1);
}

.pcws-vlagwizard__design-card.is-selected .pcws-vlagwizard__design-card-label {
    color: var(--color-text-dark);
    font-weight: 700;
}

/* Summary row — design (text value, no price) */
.pcws-vlagwizard__summary-value--text {
    font-weight: 600;
    color: var(--color-text);
}

/* Cart design thumb — used by woocommerce_get_item_data filter */
.pcws-cart-design {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    vertical-align: middle;
}

.pcws-cart-design-thumb {
    width: var(--space-12);
    height: var(--space-12);
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--color-bg-light);
}

.pcws-cart-design__name {
    font-weight: 600;
    color: var(--color-text-dark);
}

/* ≥640px — 3-col design grid + larger preview cap */
@media (min-width: 640px) {
    .pcws-vlagwizard__design-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .pcws-vlagwizard__design-preview {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ≥1024px — keep 3-up (bigger thumbs) */
@media (min-width: 1024px) {
    .pcws-vlagwizard__design-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
    }
}

/* ============================================================
   Round 4 — FAQ Page
   template-faq.php → /veelgestelde-vragen/
   ============================================================ */
.faq-page {
    background: var(--color-bg);
}

.faq-hero {
    background: var(--partou-gradient);
    color: #fff;
    padding: var(--space-12) 0 var(--space-16);
    position: relative;
    overflow: hidden;
}

.faq-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(var(--brand-white-rgb), 0.12) 0%, transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(var(--brand-white-rgb), 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.faq-hero__content {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.faq-hero__badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: rgba(var(--brand-white-rgb), 0.18);
    border: 1px solid rgba(var(--brand-white-rgb), 0.25);
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-4);
    backdrop-filter: blur(8px);
}

.faq-hero__title {
    font-size: clamp(1.75rem, 4vw + 0.5rem, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 var(--space-3);
    color: #fff;
}

.faq-hero__subtitle {
    font-size: var(--text-lg);
    color: rgba(var(--brand-white-rgb), 0.92);
    line-height: 1.55;
    margin: 0;
}

@media (min-width: 768px) {
    .faq-hero {
        padding: var(--space-16) 0 var(--space-12);
    }
}

.faq-list-wrap {
    background: var(--color-bg);
}

.faq-list {
    max-width: 820px;
    margin: 0 auto;
}

.faq-list__section-title {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-text-dark);
    margin: var(--space-10) 0 var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--tint-purple-08);
    position: relative;
}

.faq-list__section-title:first-child {
    margin-top: 0;
}

.faq-list__section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 60px;
    height: 2px;
    background: var(--partou-gradient);
}

.faq-list__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.faq-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item[open] {
    border-color: rgba(var(--brand-purple-rgb), 0.3);
    box-shadow: var(--shadow-card-hover);
}

.faq-item__summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    font-weight: 600;
    color: var(--color-text-dark);
    user-select: none;
    min-height: 56px;
}

.faq-item__summary::-webkit-details-marker {
    display: none;
}

.faq-item__summary:hover {
    background: var(--tint-purple-04);
}

.faq-item__summary:focus-visible {
    outline: 2px solid var(--partou-purple);
    outline-offset: -2px;
}

.faq-item__q {
    font-size: var(--text-base);
    line-height: 1.45;
    flex: 1;
}

.faq-item__chevron {
    flex-shrink: 0;
    color: var(--partou-purple);
    transition: transform 0.2s ease;
    display: inline-flex;
}

.faq-item[open] .faq-item__chevron {
    transform: rotate(180deg);
}

.faq-item__answer {
    padding: 0 var(--space-5) var(--space-5);
    color: var(--color-text-muted);
    line-height: 1.65;
    font-size: var(--text-base);
    border-top: 1px solid var(--color-border-light);
    padding-top: var(--space-4);
}

.faq-item__answer p {
    margin: 0 0 var(--space-3);
}

.faq-item__answer p:last-child {
    margin-bottom: 0;
}

.faq-item__answer a {
    color: var(--partou-purple);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.faq-item__answer a:hover {
    color: var(--partou-red);
}

@media (min-width: 768px) {
    .faq-item__summary {
        padding: var(--space-5) var(--space-6);
        min-height: 64px;
    }
    .faq-item__q {
        font-size: var(--text-lg);
    }
    .faq-item__answer {
        padding: var(--space-4) var(--space-6) var(--space-5);
    }
}

.faq-cta {
    margin-top: var(--space-12);
    padding: var(--space-8);
    background: var(--partou-gradient-soft);
    border-radius: var(--radius-xl);
    text-align: center;
    border: 1px solid var(--tint-purple-08);
}

.faq-cta__title {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--color-text-dark);
    margin: 0 0 var(--space-2);
}

.faq-cta__text {
    color: var(--color-text-muted);
    margin: 0 0 var(--space-5);
    font-size: var(--text-base);
}

.faq-cta__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
}

@media (min-width: 600px) {
    .faq-cta__actions {
        flex-direction: row;
        justify-content: center;
    }
}

/* ============================================================
   Round 4 — Polished empty cart card
   (extends .pcws-cart-empty in cart.css; new rules only here)
   ============================================================ */
.pcws-cart-empty__svg {
    width: 96px;
    height: 96px;
    margin: 0 auto var(--space-5);
    color: var(--partou-purple);
    opacity: 0.85;
}

.pcws-cart-empty__svg svg {
    width: 100%;
    height: 100%;
}

.pcws-cart-empty--polished {
    background: linear-gradient(180deg, var(--color-surface), var(--tint-purple-04));
    border: 1px solid var(--tint-purple-08);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    padding: var(--space-12) var(--space-6);
    text-align: center;
    max-width: 600px;
    margin: var(--space-8) auto var(--space-12);
}

.pcws-cart-empty--polished .pcws-cart-empty__title {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-text-dark);
    margin: 0 0 var(--space-3);
}

.pcws-cart-empty--polished .pcws-cart-empty__text {
    color: var(--color-text-muted);
    margin: 0 auto var(--space-6);
    max-width: 420px;
    line-height: 1.6;
}

.pcws-cart-empty__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
}

@media (min-width: 600px) {
    .pcws-cart-empty--polished {
        padding: var(--space-16) var(--space-12);
    }
    .pcws-cart-empty__actions {
        flex-direction: row;
        justify-content: center;
    }
}

/* ============================================================
   Round 4 — Footer logo size guard
   ============================================================ */
.footer-brand .site-logo img,
.footer-brand .custom-logo {
    max-width: 200px;
    height: auto;
    width: auto;
}

/* ============================================================
   Round 4 — Hero title spacing fix
   ============================================================ */
.hero__title-line {
    display: block;
}

/* ============================================================
   Round 4 — Mobile text<14px bumps on /producten/
   Bump small UI text (filter pills, breadcrumb, badges, counters)
   to the var(--text-sm) minimum (14px) op mobiel.
   Specificiteit: ge-prefixed met body om bestaande regels te overrulen.
   ============================================================ */
body .woocommerce-breadcrumb,
body .woocommerce-breadcrumb a,
body .pcws-shop-header .pcws-breadcrumb,
body .pcws-card__category,
body .pcws-card__excerpt,
body .pcws-card__stock-text,
body .pcws-pagination a,
body .pcws-pagination span,
body .product_meta,
body .product_meta a,
body .pcws-cart-product-meta,
body .sidebar-contact-card__response,
body .pcws-filter-pill .pill-count,
body .header-cart .cart-count,
body .cart-count,
body .pcws-badge,
body .pcws-badge--sale,
body .pcws-badge--soldout {
    font-size: var(--text-sm);
}

/* ============================================================
   Round 5 — UX Polish (v2.2.0)
   ============================================================ */

/* Global spinner keyframe — single source of truth for is-loading buttons.
   (main.js used to inject @keyframes spin via a <style> element; we promote it
   to the stylesheet so any element with .is-loading can adopt the spinner.) */
@keyframes pcws-spin {
    to { transform: rotate(360deg); }
}

/* CSS-only spinner for any button that toggles .is-loading.
   Adds a small rotating ring on the right side without replacing the label.
   Buttons that prefer to swap their text (main.js Bezig… flow) keep working. */
.btn.is-loading::after,
.pcws-card__add-btn.is-loading::after,
.pcws-vlagwizard__add-btn.is-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: var(--space-2);
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: pcws-spin 0.7s linear infinite;
    vertical-align: -2px;
}

/* ---- Card hover parity — apply our brand lift to ALL product card variants ---- */
/* The .pcws-card already has lift; .products li (used by [products] shortcode)
   also has translateY(-4px) higher up. This block makes sure the transition
   curve is consistent + the box-shadow upgrade matches. */
.products li.product,
.pcws-card,
.featured-products-wrap .products li.product,
.woocommerce ul.products li.product {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* ---- Product card consistent height (Round 5 task #2) ----
   Make every WC archive card a flex column so the footer (price + add btn)
   sticks to the bottom regardless of title length / missing description. */
.pcws-card {
    height: 100%;
}

.pcws-card__image-wrap {
    flex: 0 0 auto;
}

.pcws-card__image-wrap img,
.pcws-card__image-placeholder {
    aspect-ratio: 4 / 3;
}

.pcws-card__body {
    flex: 1 1 auto;
}

.pcws-card__title {
    /* Reserve 2 lines so cards with 1-line titles don't shrink. */
    min-height: calc(var(--text-base) * 1.35 * 2);
}

.pcws-card__price {
    /* Push to bottom of the body so the footer sits flush regardless of
       presence/absence of an excerpt. */
    margin-top: auto;
}

/* Same treatment for the [products] shortcode loop on the homepage. */
.products li.product,
.woocommerce ul.products li.product,
.featured-products-wrap .products li.product {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.featured-products-wrap .products li.product .price,
.woocommerce ul.products li.product .price {
    margin-top: auto;
}

/* Grid rows stretch evenly */
.products,
.pcws-product-grid,
.featured-products-wrap .products {
    grid-auto-rows: 1fr;
}

/* ---- Breathing room on desktop (Round 5 task #3) ---- */
@media (min-width: 1280px) {
    .section {
        padding-block: var(--space-16);
    }
}

/* Thin gradient divider between non-gradient major sections.
   The :not() guard skips dark/gradient sections so we don't draw on top of
   coloured backgrounds. .section--gradient = main offender. */
@media (min-width: 1024px) {
    .section + .section:not(.section--gradient)::before {
        content: '';
        display: block;
        height: 1px;
        max-width: min(960px, 80%);
        margin: 0 auto var(--space-12);
        background: linear-gradient(to right, transparent, var(--color-border), transparent);
    }
}

/* ---- Wizard step open/close transition (Round 5 task #4) ----
   Currently the panel uses display:none/block which snaps. Replace with a
   max-height + opacity reveal. The .is-open class already exists in the
   markup + JS, so we only swap the visual mechanic.
   Note: max-height transition requires a known upper bound; 1200px easily
   fits the largest step (design grid). */
.pcws-vlagwizard__step-panel {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top: 1px solid transparent;
    transition:
        max-height var(--transition-slow),
        opacity var(--transition-base),
        padding var(--transition-base),
        border-color var(--transition-base);
}

.pcws-vlagwizard__step.is-open .pcws-vlagwizard__step-panel {
    display: block;
    max-height: 1200px;
    opacity: 1;
    padding-top: var(--space-4);
    padding-bottom: var(--space-5);
    border-top-color: var(--color-border-light);
}

/* ---- Header search desktop width (Round 5 task #7) ---- */
@media (min-width: 1024px) {
    .site-search__input {
        width: 280px;
        min-width: 280px;
        max-width: 320px;
    }
}

/* ---- Cart count empty-state (Round 5 task #7) ----
   Hide the bubble when the badge has no items so the header doesn't show "0". */
.cart-count[data-empty="true"] {
    display: none;
}

/* ---- Section heading weight bump (Round 5 task #6) ----
   Already 800 in :root via .section-header__title, so no change there.
   Footer brand text + bottom row contrast on warm/light bg already passes;
   we lift its color slightly for legibility. */
.site-footer .footer-bottom a {
    color: var(--color-primary);
    font-weight: 600;
}

.site-footer .footer-bottom a:hover {
    color: var(--color-accent);
}

/* ---- Body line-height — desktop boost (Round 5 task #6) ---- */
@media (min-width: 1024px) {
    body {
        line-height: 1.65;
    }
}

/* ---- Reduced-motion safety for ALL Round 5 transitions ---- */
@media (prefers-reduced-motion: reduce) {
    .pcws-vlagwizard__step-panel,
    .pcws-vlagwizard__step.is-open .pcws-vlagwizard__step-panel,
    .pcws-card,
    .products li.product,
    .featured-products-wrap .products li.product,
    .woocommerce ul.products li.product {
        transition: none;
    }
    .btn.is-loading::after,
    .pcws-card__add-btn.is-loading::after,
    .pcws-vlagwizard__add-btn.is-loading::after {
        animation: none;
    }
}

/* ============================================================
   Round 6 — Bundle promo
   ------------------------------------------------------------
   Shared component used in two contexts:
   1. PDP info column (`.partou-bundle-promo`) — sits below the
      vlag-wizard add button or directly below the price block.
   2. Cart page (`.partou-bundle-promo--cart`) — wider, with a
      "Wissel naar pakket" button + "Bekijk pakket" ghost.

   Mobile-first. Tokens only. No !important. No inline styles.
   ============================================================ */
.partou-bundle-promo {
    position: relative;
    overflow: hidden;
    margin-block: var(--space-6);
    padding: var(--space-6) var(--space-5) var(--space-5);
    background:
        linear-gradient(
            135deg,
            rgba(var(--brand-orange-rgb), 0.06) 0%,
            rgba(var(--brand-red-rgb), 0.05) 50%,
            rgba(var(--brand-purple-rgb), 0.05) 100%
        ),
        var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.partou-bundle-promo:hover {
    box-shadow: var(--shadow-card-hover);
}

/* Ribbon — gradient pill in the top-right */
.partou-bundle-promo__ribbon {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    background: var(--partou-gradient);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-orange-glow);
    text-transform: uppercase;
    line-height: 1.6;
}

.partou-bundle-promo__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-right: 96px; /* keep clear of the ribbon */
    margin-bottom: var(--space-4);
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.partou-bundle-promo__eyebrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--partou-gradient);
    color: #fff;
    border-radius: var(--radius-full);
}

.partou-bundle-promo__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
}

@media (min-width: 480px) {
    .partou-bundle-promo__layout {
        grid-template-columns: 110px 1fr;
        gap: var(--space-5);
    }
}

.partou-bundle-promo__thumb {
    display: block;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 160px;
    margin-inline: auto;
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition-base);
}

@media (min-width: 480px) {
    .partou-bundle-promo__thumb {
        max-width: 110px;
        margin-inline: 0;
    }
}

.partou-bundle-promo__thumb:hover {
    transform: translateY(-2px);
}

.partou-bundle-promo__thumb-img,
.partou-bundle-promo__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.partou-bundle-promo__thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--color-primary);
    background: var(--tint-purple-08);
}

.partou-bundle-promo__body {
    min-width: 0;
}

.partou-bundle-promo__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-dark);
}

.partou-bundle-promo__title a {
    color: inherit;
    text-decoration: none;
}

.partou-bundle-promo__title a:hover {
    color: var(--color-accent);
}

.partou-bundle-promo__contents {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.partou-bundle-promo__pricing {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.partou-bundle-promo__regular,
.partou-bundle-promo__sale {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--text-base);
}

.partou-bundle-promo__regular-label,
.partou-bundle-promo__sale-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    font-weight: 600;
}

.partou-bundle-promo__regular del {
    color: var(--color-text-muted);
    text-decoration: line-through;
    font-weight: 500;
}

.partou-bundle-promo__sale strong {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-text-dark);
    line-height: 1.1;
}

/* Big savings line — the headline number */
.partou-bundle-promo__savings {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--tint-success-08);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-success);
}

.partou-bundle-promo__savings-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.partou-bundle-promo__savings-amount {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-success);
    line-height: 1.1;
}

.partou-bundle-promo__savings-pct {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-weight: 500;
}

/* Primary CTA — gradient, full-width on mobile */
.partou-bundle-promo__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 48px;
    padding: var(--space-3) var(--space-5);
    background: var(--partou-gradient);
    color: #fff;
    font-weight: 700;
    font-size: var(--text-base);
    text-decoration: none;
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: var(--shadow-purple-soft);
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        opacity var(--transition-fast);
}

.partou-bundle-promo__cta:hover,
.partou-bundle-promo__cta:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-purple-mid);
}

.partou-bundle-promo__cta:focus-visible {
    outline: 3px solid var(--color-cta);
    outline-offset: 2px;
}

.partou-bundle-promo__cta.is-loading {
    opacity: 0.7;
    pointer-events: none;
}

@media (min-width: 480px) {
    .partou-bundle-promo__cta {
        width: auto;
    }
}

/* Cart variant — has primary + ghost button, plus a hint line */
.partou-bundle-promo--cart {
    margin-top: var(--space-10);
}

.partou-bundle-promo__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

@media (min-width: 480px) {
    .partou-bundle-promo__actions {
        flex-direction: row;
        align-items: center;
    }
}

.partou-bundle-promo__cta--ghost {
    background: transparent;
    color: var(--color-primary);
    border: 1.5px solid var(--color-border);
    box-shadow: none;
    font-weight: 600;
}

.partou-bundle-promo__cta--ghost:hover,
.partou-bundle-promo__cta--ghost:focus-visible {
    color: var(--color-primary);
    background: var(--tint-purple-04);
    border-color: var(--color-primary);
    box-shadow: none;
    transform: none;
}

.partou-bundle-promo__cta-label {
    line-height: 1.2;
}

.partou-bundle-promo__hint {
    margin: var(--space-4) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Cart-suggestion section wrapper — keeps spacing rhythm with the
   surrounding pcws-cross-sells block. */
.partou-bundle-cart-suggestion {
    margin-top: var(--space-12);
}

/* ============================================================
   Round 6 — Sticker tip panel (PDP, above configurator)
   ============================================================ */
.partou-sticker-tip {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin: var(--space-8) auto var(--space-6);
    padding: var(--space-4) var(--space-5);
    max-width: 880px;
    background:
        linear-gradient(
            135deg,
            rgba(var(--brand-purple-rgb), 0.05) 0%,
            rgba(var(--brand-red-rgb), 0.04) 100%
        ),
        var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-left: 3px solid var(--color-info);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.partou-sticker-tip__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-info);
    background: var(--tint-purple-08);
    border-radius: var(--radius-full);
}

.partou-sticker-tip__heading {
    margin: 0 0 var(--space-1);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.4;
}

.partou-sticker-tip__text {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: 1.55;
}

/* ============================================================
   Round 6 — Cross-sells enhanced styling
   ------------------------------------------------------------
   Bumps the existing cross-sell section: wider cards with
   stronger shadow on hover + bigger tap targets. We add via
   `.pcws-cross-sells--enhanced` so we don't disturb other uses.
   ============================================================ */
.pcws-cross-sells--enhanced {
    margin-top: var(--space-12);
    padding: var(--space-6);
    background: var(--color-bg-light);
    border-radius: var(--radius-xl);
}

.pcws-cross-sells--enhanced .pcws-cross-sells__heading {
    margin-bottom: var(--space-1);
}

.pcws-cross-sells--enhanced .pcws-cross-sells__sub {
    margin-bottom: var(--space-6);
}

.pcws-cross-sells--enhanced .products li.product,
.pcws-cross-sells--enhanced ul.products li.product {
    border-radius: var(--radius-lg);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.pcws-cross-sells--enhanced .products li.product:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}

@media (prefers-reduced-motion: reduce) {
    .partou-bundle-promo,
    .partou-bundle-promo__cta,
    .partou-bundle-promo__thumb,
    .pcws-cross-sells--enhanced .products li.product {
        transition: none;
    }
    .partou-bundle-promo__cta:hover,
    .partou-bundle-promo__cta:focus-visible {
        transform: none;
    }
}

/* ============================================================
   Round 6 — USP badges (per category)
   ------------------------------------------------------------
   Chip-list met categorie-USPs. Gerenderd op productkaart
   (.partou-usps--card, max 3 items) en op PDP
   (.partou-usps--single, alle items). Tokens-only, geen
   inline styles, geen !important.
   ============================================================ */
.partou-usps {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.partou-usps__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: var(--color-bg-light);
    color: var(--color-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    line-height: 1.3;
    font-weight: 500;
}

.partou-usps__icon {
    color: var(--color-accent);
    flex-shrink: 0;
}

.partou-usps__label {
    white-space: nowrap;
}

/* Card variant — kleinere chips, max 3 items, kunnen wrappen */
.partou-usps--card {
    margin-top: var(--space-2);
    margin-bottom: var(--space-3);
}

.partou-usps--card .partou-usps__item {
    padding: 2px var(--space-2);
    font-size: 0.7rem;
}

/* PDP variant — iets ruimer, sluit aan bij price-block */
.partou-usps--single {
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
}

.partou-usps--single .partou-usps__item {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    background: var(--color-bg-light);
    border-color: var(--color-border-light);
}

/* Mobile: laat lange labels netjes wrappen ipv overflow */
@media (max-width: 480px) {
    .partou-usps__label {
        white-space: normal;
    }
}

/* ============================================================
   Round 6 — Comprehensive visual polish (v2.4.0)
   ------------------------------------------------------------
   - Search results template (search.php) — NEW
   - 404 page upgrade (richer card + suggested categories)
   - page.php hero + content card
   - My-account / login form Partou styling
   - Generic input polish for fields outside our custom forms
   - /producten/ toolbar polish (sort dropdown look)
   ============================================================ */

/* ---- Generic Page Hero (pcws-page-hero) — used by page.php ---- */
.pcws-page-hero {
    background: var(--partou-gradient);
    padding: var(--space-10) 0 var(--space-8);
    position: relative;
    overflow: hidden;
    color: #fff;
}

.pcws-page-hero::before {
    content: '';
    position: absolute;
    top: -45%;
    right: -10%;
    width: 420px;
    height: 420px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}

.pcws-page-hero > .container {
    position: relative;
    z-index: 1;
}

.pcws-page-hero__title {
    color: #fff;
    font-size: var(--text-4xl);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 var(--space-3);
    letter-spacing: -0.01em;
}

.pcws-page-hero__lead {
    color: rgba(255, 255, 255, 0.92);
    font-size: var(--text-lg);
    line-height: 1.55;
    max-width: 640px;
    margin: 0;
}

@media (min-width: 768px) {
    .pcws-page-hero {
        padding: var(--space-12) 0 var(--space-10);
    }
}

/* page.php content article — neutralise WP default margins, add reading max-width. */
.pcws-page__article {
    max-width: 760px;
    margin: 0 auto;
}

/* Cart, checkout en account moeten de volle container-breedte gebruiken
   omdat ze hun eigen multi-column layouts hebben. De 760px reading-width
   is alleen voor tekst-zware content-pagina's. */
.woocommerce-cart .pcws-page__article,
.woocommerce-checkout .pcws-page__article,
.woocommerce-account .pcws-page__article {
    max-width: none;
}

.pcws-page__content {
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: 1.7;
}

.pcws-page__content > * + * {
    margin-top: var(--space-4);
}

.pcws-page__content h2,
.pcws-page__content h3,
.pcws-page__content h4 {
    color: var(--color-text-dark);
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
}

.pcws-page__content h2 { font-size: var(--text-2xl); font-weight: 800; }
.pcws-page__content h3 { font-size: var(--text-xl); font-weight: 700; }

.pcws-page__content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: var(--tint-purple-12);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--transition-fast), color var(--transition-fast);
}

.pcws-page__content a:hover {
    color: var(--color-accent);
    text-decoration-color: currentColor;
}

.pcws-page__content ul,
.pcws-page__content ol {
    padding-left: var(--space-6);
}

.pcws-page__content ul li,
.pcws-page__content ol li {
    margin-bottom: var(--space-2);
}

.pcws-page__content blockquote {
    border-left: 4px solid var(--color-accent);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-light);
    border-radius: var(--radius-sm);
    font-style: italic;
    color: var(--color-text-dark);
}

/* ---- Search results template (search.php) ---- */
.pcws-search-hero {
    background: var(--partou-gradient);
    padding: var(--space-10) 0 var(--space-8);
    position: relative;
    overflow: hidden;
    color: #fff;
}

.pcws-search-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 480px;
    height: 480px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}

.pcws-search-hero > .container {
    position: relative;
    z-index: 1;
}

.pcws-search-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    color: #fff;
    margin-bottom: var(--space-5);
}

.pcws-search-hero__title {
    color: #fff;
    font-size: var(--text-4xl);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 var(--space-3);
    letter-spacing: -0.01em;
}

.pcws-search-hero__query {
    background: rgba(255, 255, 255, 0.2);
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    font-weight: 700;
}

.pcws-search-hero__count {
    color: rgba(255, 255, 255, 0.92);
    font-size: var(--text-base);
    margin: 0 0 var(--space-6);
}

.pcws-search-hero__form {
    display: flex;
    gap: var(--space-2);
    max-width: 560px;
    flex-wrap: wrap;
}

.pcws-search-hero__input {
    flex: 1 1 220px;
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    color: var(--color-text-dark);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pcws-search-hero__input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.9);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
}

.pcws-search-hero__submit {
    min-height: 44px;
    padding: 0 var(--space-6);
    background: var(--color-cta);
    color: var(--color-text-dark);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
    box-shadow: var(--shadow-orange-glow);
}

.pcws-search-hero__submit:hover {
    background: var(--color-cta-hover);
    transform: translateY(-1px);
}

.pcws-search-hero__submit:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .pcws-search-hero { padding: var(--space-12) 0 var(--space-10); }
}

/* Section titles inside search results */
.pcws-search__section-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-text-dark);
    margin: 0 0 var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-border-light);
}

.pcws-search__section-title--secondary {
    margin-top: var(--space-12);
}

.pcws-search__section-count {
    background: var(--partou-gradient);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 2px var(--space-3);
    border-radius: var(--radius-full);
    min-width: 28px;
    text-align: center;
}

/* Page result cards */
.pcws-search-pages {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-4);
}

.pcws-search-page {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.pcws-search-page:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-border);
}

.pcws-search-page__title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin: 0 0 var(--space-2);
}

.pcws-search-page__title a {
    color: var(--color-text-dark);
}

.pcws-search-page__title a:hover {
    color: var(--color-primary);
}

.pcws-search-page__excerpt {
    color: var(--color-text);
    font-size: var(--text-sm);
    line-height: 1.6;
    margin: 0 0 var(--space-3);
}

.pcws-search-page__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 600;
}

.pcws-search-page__link:hover {
    color: var(--color-accent);
}

/* Search pagination */
.pcws-search-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-12);
}

.pcws-search-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-dark);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.pcws-search-pagination .page-numbers:hover {
    background: var(--tint-purple-04);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.pcws-search-pagination .page-numbers.current {
    background: var(--partou-gradient);
    border-color: transparent;
    color: #fff;
}

.pcws-search-pagination .page-numbers.dots {
    background: transparent;
    border-color: transparent;
    color: var(--color-text-muted);
}

/* Search empty state */
.pcws-search-empty {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-4);
}

.pcws-search-empty__illustration {
    margin: 0 auto var(--space-6);
    display: flex;
    justify-content: center;
}

.pcws-search-empty__title {
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--color-text-dark);
    margin: 0 0 var(--space-3);
}

.pcws-search-empty__text {
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: 1.6;
    margin: 0 0 var(--space-6);
}

.pcws-search-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-10);
}

.pcws-search-empty__suggestions {
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border-light);
}

.pcws-search-empty__suggestions-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.pcws-search-empty__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.pcws-search-empty__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-dark);
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
    min-height: 36px;
}

.pcws-search-empty__chip:hover {
    background: var(--partou-gradient);
    border-color: transparent;
    color: #fff;
    transform: translateY(-1px);
}

.pcws-search-empty__chip-count {
    background: rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-full);
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: 700;
    min-width: 20px;
    text-align: center;
    transition: background var(--transition-fast);
}

.pcws-search-empty__chip:hover .pcws-search-empty__chip-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* ---- 404 page upgrade ---- */
.pcws-404__hero {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-5);
    text-align: center;
    box-shadow: var(--shadow-card);
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.pcws-404__hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 320px;
    height: 320px;
    background: var(--partou-gradient);
    opacity: 0.06;
    border-radius: 50%;
    pointer-events: none;
}

.pcws-404__illustration {
    position: relative;
    z-index: 1;
    margin: 0 auto var(--space-4);
    display: flex;
    justify-content: center;
}

.pcws-404__badge {
    position: relative;
    z-index: 1;
    display: inline-block;
    background: var(--tint-red-08);
    color: var(--color-accent);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-5);
}

.pcws-404__title {
    position: relative;
    z-index: 1;
    font-size: var(--text-3xl);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-text-dark);
    margin: 0 auto var(--space-3);
    max-width: 540px;
}

.pcws-404__lead {
    position: relative;
    z-index: 1;
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: 1.6;
    margin: 0 auto var(--space-6);
    max-width: 480px;
}

.pcws-404__actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.pcws-404__search {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 440px;
    margin: 0 auto;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);
}

.pcws-404__search:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring-purple-soft);
}

.pcws-404__search-icon {
    color: var(--color-text-muted);
    flex: 0 0 auto;
    display: inline-flex;
}

.pcws-404__search-input {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--color-text-dark);
    padding: var(--space-2) 0;
    min-width: 0;
}

.pcws-404__search-input:focus {
    outline: none;
}

.pcws-404__search-submit {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 var(--space-4);
    background: var(--partou-gradient);
    color: #fff;
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.pcws-404__search-submit:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.pcws-404__categories {
    margin-top: var(--space-12);
}

.pcws-404__cat-title {
    text-align: center;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 var(--space-6);
}

.pcws-404__cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 720px;
}

@media (min-width: 768px) {
    .pcws-404__cat-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-4);
    }
    .pcws-404__hero {
        padding: var(--space-12) var(--space-8);
    }
    .pcws-404__title {
        font-size: var(--text-4xl);
    }
}

.pcws-404__cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    color: var(--color-text-dark);
    text-decoration: none;
    text-align: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    min-height: 120px;
}

.pcws-404__cat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-primary);
    color: var(--color-text-dark);
}

.pcws-404__cat-icon {
    color: var(--color-primary);
    background: var(--tint-purple-04);
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pcws-404__cat-name {
    font-weight: 700;
    font-size: var(--text-base);
}

.pcws-404__cat-count {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: 600;
}

.pcws-404__contact-fallback {
    text-align: center;
    margin-top: var(--space-12);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
    padding: 0 var(--space-3);
}

.pcws-404__contact-fallback a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pcws-404__contact-fallback a:hover {
    color: var(--color-accent);
}

/* ---- My-account / WooCommerce login form polish ---- */
/* My-account uses page.php with its hero. The shortcode renders
   .woocommerce > #customer_login. Constrain width and add card layout. */
body.woocommerce-account .pcws-page__article {
    max-width: 1080px;
}

/* When registration is DISABLED, WC outputs the login form bare (no
   #customer_login wrapper). Wrap that in a card-look via the form itself.
   We use the form class directly (no `>` combinator) for max compat. */
body.woocommerce-account form.woocommerce-form-login {
    max-width: 540px;
    margin: 0 auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-5);
    box-shadow: var(--shadow-card);
}

@media (min-width: 768px) {
    body.woocommerce-account form.woocommerce-form-login {
        padding: var(--space-8);
    }
}

body.woocommerce-account .woocommerce > h2 {
    max-width: 540px;
    margin-inline: auto;
    text-align: left;
}

/* Login + register columns (when registration is enabled) */
body.woocommerce-account #customer_login {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    max-width: 880px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    body.woocommerce-account #customer_login.col2-set {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }
}

body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .u-column2,
body.woocommerce-account #customer_login .col-1,
body.woocommerce-account #customer_login .col-2 {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-5);
    box-shadow: var(--shadow-card);
    width: auto;
    float: none;
}

@media (min-width: 768px) {
    body.woocommerce-account #customer_login .u-column1,
    body.woocommerce-account #customer_login .u-column2,
    body.woocommerce-account #customer_login .col-1,
    body.woocommerce-account #customer_login .col-2 {
        padding: var(--space-8);
    }
}

body.woocommerce-account #customer_login h2,
body.woocommerce-account .woocommerce > h2 {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-text-dark);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-border-light);
}

/* Form rows */
body.woocommerce-account .woocommerce-form-row,
body.woocommerce-account .woocommerce-form .form-row {
    margin-bottom: var(--space-4);
    padding: 0;
}

body.woocommerce-account .woocommerce-form label,
body.woocommerce-account .woocommerce-form-row > label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: var(--space-2);
}

body.woocommerce-account .woocommerce-form input.input-text,
body.woocommerce-account .woocommerce-form .woocommerce-Input,
body.woocommerce-account .woocommerce-form input[type="email"],
body.woocommerce-account .woocommerce-form input[type="password"],
body.woocommerce-account .woocommerce-form input[type="text"] {
    width: 100%;
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    color: var(--color-text-dark);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

body.woocommerce-account .woocommerce-form input.input-text:focus,
body.woocommerce-account .woocommerce-form input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring-purple-soft);
}

/* The form-row that holds remember-me + submit button. WC keeps them in
   the same <p>. Only style THAT specific row (the one that has the
   submit-button child) — leave normal label/input rows untouched. */
body.woocommerce-account .woocommerce-form-login p.form-row:has(button[type="submit"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

body.woocommerce-account .woocommerce-form-login p.form-row:has(button[type="submit"]) > .woocommerce-form__label-for-checkbox {
    flex: 1 1 100%;
}

@media (min-width: 480px) {
    body.woocommerce-account .woocommerce-form-login p.form-row:has(button[type="submit"]) > .woocommerce-form__label-for-checkbox {
        flex: 1 1 auto;
    }
}

/* Checkbox + remember-me — use higher specificity instead of !important */
body.woocommerce-account .woocommerce-form .woocommerce-form__label-for-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 0;
    cursor: pointer;
    font-weight: 500;
}

body.woocommerce-account .woocommerce-form__input-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    margin: 0;
}

/* Submit button */
body.woocommerce-account .woocommerce-form button[type="submit"],
body.woocommerce-account .woocommerce-button.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--space-3) var(--space-6);
    background: var(--partou-gradient);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-purple-soft);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

body.woocommerce-account .woocommerce-form button[type="submit"]:hover,
body.woocommerce-account .woocommerce-button.button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-purple-mid);
    color: #fff;
}

/* Lost password link */
body.woocommerce-account .woocommerce-LostPassword {
    margin-top: var(--space-4);
    margin-bottom: 0;
    font-size: var(--text-sm);
}

body.woocommerce-account .woocommerce-LostPassword a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.woocommerce-account .woocommerce-LostPassword a:hover {
    color: var(--color-accent);
}

/* Logged-in: navigation + content layout */
body.woocommerce-account.logged-in .woocommerce {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 768px) {
    body.woocommerce-account.logged-in .woocommerce {
        grid-template-columns: 240px 1fr;
        gap: var(--space-8);
        align-items: flex-start;
    }
}

body.woocommerce-account .woocommerce-MyAccount-navigation {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    box-shadow: var(--shadow-sm);
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
    border: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    color: var(--color-text-dark);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    min-height: 44px;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    background: var(--tint-purple-04);
    color: var(--color-primary);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--partou-gradient);
    color: #fff;
}

body.woocommerce-account .woocommerce-MyAccount-content {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    min-height: 300px;
}

@media (min-width: 768px) {
    body.woocommerce-account .woocommerce-MyAccount-content {
        padding: var(--space-8);
    }
}

body.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
    color: var(--color-text-dark);
    font-size: var(--text-lg);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

body.woocommerce-account .woocommerce-MyAccount-content a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.woocommerce-account .woocommerce-MyAccount-content a:hover {
    color: var(--color-accent);
}

/* Tables in my-account (orders, addresses) */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    width: 100%;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
    background: var(--color-bg-light);
    color: var(--color-text-dark);
    font-weight: 700;
    text-align: left;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border-light);
    font-size: var(--text-sm);
    color: var(--color-text);
}

/* ---- Generic input polish — for elements outside our custom forms ---- */
.pcws-page__content input[type="text"],
.pcws-page__content input[type="email"],
.pcws-page__content input[type="search"],
.pcws-page__content input[type="tel"],
.pcws-page__content input[type="url"],
.pcws-page__content input[type="password"],
.pcws-page__content textarea,
.pcws-page__content select {
    width: 100%;
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    color: var(--color-text-dark);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pcws-page__content input:focus,
.pcws-page__content textarea:focus,
.pcws-page__content select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring-purple-soft);
}

/* ---- Search result product grid spacing ---- */
.pcws-search ul.products,
.pcws-search ul.pcws-product-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 600px) {
    .pcws-search ul.products,
    .pcws-search ul.pcws-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .pcws-search ul.products,
    .pcws-search ul.pcws-product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-6);
    }
}

/* ---- /producten/ shop toolbar polish ---- */
.pcws-shop-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
}

.pcws-shop-toolbar .pcws-product-count {
    margin: 0;
    color: var(--color-text);
    font-size: var(--text-sm);
}

.pcws-shop-toolbar .pcws-product-count strong {
    color: var(--color-text-dark);
    font-weight: 700;
}

.pcws-shop-toolbar .woocommerce-ordering {
    margin: 0;
}

.pcws-shop-toolbar .woocommerce-ordering select.orderby {
    min-height: 40px;
    padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-dark);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a3649' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    transition: border-color var(--transition-fast);
}

.pcws-shop-toolbar .woocommerce-ordering select.orderby:hover,
.pcws-shop-toolbar .woocommerce-ordering select.orderby:focus {
    border-color: var(--color-primary);
    outline: none;
}

/* Footer-bottom polish — better spread + line on mobile */
.site-footer .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-5);
    margin-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: var(--text-sm);
}

.site-footer .footer-bottom p {
    margin: 0;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .pcws-search-page,
    .pcws-404__cat-card,
    .pcws-search-empty__chip,
    .pcws-search-hero__submit,
    .pcws-404__search-submit,
    body.woocommerce-account .woocommerce-form button[type="submit"],
    body.woocommerce-account .woocommerce-button.button {
        transition: none;
    }
}