/*
 * trainitnow-child — WooCommerce styling
 *
 * All WC-page-specific CSS lives here. Loads after tokens.css, so every
 * rule can rely on the --tin-* and --gcid-* variables being defined.
 *
 * Sections (search "[N]" to jump):
 *   [1] Single Product   — sticky purchase card row
 *   [2] Shop Archive     — clearfix override (WC adds ::before/::after that steal grid cells)
 *   [3] Shop Archive     — Lovable-style course cards
 *   [4] Shop Archive     — pagination chrome
 *   [5] Shop Archive     — catalog controls (search form + category pills)
 *
 * Cart + Checkout styling (WC Cart/Checkout Block) intentionally omitted
 * for now — block-editor markup needs distinct selectors. To be added
 * once we have a populated cart to inspect.
 */

/* ============================================================
 * [1] Single Product — sticky purchase card row
 * ============================================================ */

.tin-sticky-product-row {
    align-items: flex-start;
}
.tin-sticky-product-row > .et_pb_column:last-child {
    position: sticky;
    top: 96px;
    align-self: flex-start;
}
@media (max-width: 980px) {
    .tin-sticky-product-row > .et_pb_column:last-child {
        position: static;
    }
}

/* ============================================================
 * [2] Shop Archive — clearfix override
 * ============================================================
 * WC's ul.products has clearfix ::before/::after pseudos with display:
 * table. Once the UL becomes display: grid, those pseudos get treated
 * as grid items and steal the first/last cells. Suppress them.
 */

.tin-shop ul.products::before,
.tin-shop ul.products::after {
    display: none !important;
}

/* ============================================================
 * [3] Shop Archive — Lovable-style course cards
 * ============================================================ */

.tin-shop ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}
@media (max-width: 980px) {
    .tin-shop ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .tin-shop ul.products { grid-template-columns: 1fr; }
}

/* Card frame */
.tin-shop ul.products li.product {
    background: var(--tin-card);
    border: 1px solid var(--tin-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--tin-shadow-card);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    float: none !important;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
}

/* Force cards to fill the grid cell at every breakpoint. Divi's WC Shop
 * module emits a high-specificity rule:
 *   .et_pb_shop ul.products.columns-N li.product { width: 48%; margin-right: 4%; }
 * (4 classes + 2 elements = specificity 0,0,4,2) which beats our generic
 * `.tin-shop ul.products li.product` (0,0,3,2). Match its specificity by
 * including `.et_pb_shop` and `.columns-N` in our selector — gives us
 * 0,0,5,2 — and zero out the margin-right so the card uses the full cell. */
.tin-shop.et_pb_shop ul.products.columns-2 li.product,
.tin-shop.et_pb_shop ul.products.columns-3 li.product,
.tin-shop.et_pb_shop ul.products.columns-4 li.product,
.tin-shop.et_pb_shop ul.products.columns-5 li.product,
.tin-shop.et_pb_shop ul.products.columns-6 li.product {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}
.tin-shop ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: var(--tin-shadow-card-hover);
}

/* Image — aspect ratio + hover zoom */
.tin-shop ul.products li.product .et_shop_image,
.tin-shop ul.products li.product .woocommerce-loop-product__link img,
.tin-shop ul.products li.product img {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
    border-radius: 12px 12px 0 0;
}
.tin-shop ul.products li.product:hover img {
    transform: scale(1.05);
}

/* Title */
.tin-shop ul.products li.product .woocommerce-loop-product__title,
.tin-shop ul.products li.product h3,
.tin-shop ul.products li.product h2 {
    padding: 16px 20px 8px !important;
    margin: 0 !important;
    color: var(--tin-foreground);
    transition: color 0.2s ease;
}
.tin-shop ul.products li.product:hover .woocommerce-loop-product__title,
.tin-shop ul.products li.product:hover h3,
.tin-shop ul.products li.product:hover h2 {
    color: var(--gcid-primary-color);
}

/* Price strip with top divider */
.tin-shop ul.products li.product .price {
    padding: 12px 20px 20px !important;
    margin: 0 !important;
    border-top: 1px solid var(--tin-border);
    margin-top: auto !important;
    color: var(--tin-foreground);
}
.tin-shop ul.products li.product .price del {
    color: var(--tin-muted-foreground);
    margin-right: 8px;
    opacity: 1;
}

/* Category overlay badge — top-left of image
   Default: "Online" (purple). Override per category below. */
.tin-shop ul.products li.product::before {
    content: "Online";
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--gcid-primary-color);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    pointer-events: none;
}
.tin-shop ul.products li.product.product_cat-classroom::before {
    content: "Klassikaal";
    background: var(--gcid-secondary-color);
}

/* Hide Divi Shop module's "Add to cart" button on cards — clicking the
   card itself goes to the product page (cleaner UX). */
.tin-shop ul.products li.product .button {
    display: none !important;
}

/* ============================================================
 * [4] Shop Archive — pagination
 * ============================================================ */

.tin-shop .woocommerce-pagination,
.tin-shop nav.pagination,
.tin-shop .et_pb_shop ~ nav,
.tin-shop .et_pb_shop nav {
    margin: 32px 0 0;
}
.tin-shop .woocommerce-pagination ul.page-numbers,
.tin-shop ul.page-numbers {
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 32px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: none !important;
}
.tin-shop ul.page-numbers li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
.tin-shop ul.page-numbers li > a,
.tin-shop ul.page-numbers li > span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--tin-border) !important;
    border-radius: var(--tin-radius-md);
    background: var(--tin-card) !important;
    color: var(--tin-foreground) !important;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.tin-shop .page-numbers:not(.current):not(.dots):hover,
.tin-shop ul.page-numbers li > a:hover {
    background: var(--tin-accent) !important;
    color: var(--gcid-primary-color) !important;
    border-color: var(--gcid-primary-color) !important;
}
.tin-shop .page-numbers.current,
.tin-shop ul.page-numbers li > span.current,
.tin-shop ul.page-numbers li > .current {
    background: var(--gcid-primary-color) !important;
    color: #fff !important;
    border-color: var(--gcid-primary-color) !important;
}
.tin-shop .page-numbers.dots,
.tin-shop ul.page-numbers li > span.dots {
    border: none !important;
    background: transparent !important;
    color: var(--tin-muted-foreground) !important;
    cursor: default;
}

/* ============================================================
 * [5] Shop Archive — catalog controls (search + category pills)
 * ============================================================ */

.tin-catalog-controls__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    background: var(--tin-card);
    border: 1px solid var(--tin-border);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: var(--tin-shadow-card);
    margin-bottom: 24px;
}

/* Search form */
.tin-search-form {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 240px;
    min-width: 240px;
    max-width: 400px;
}
.tin-search-icon {
    position: absolute;
    left: 14px;
    color: var(--tin-muted-foreground);
    pointer-events: none;
}
.tin-search-form input[type="search"] {
    flex: 1;
    height: 40px;
    padding: 0 14px 0 42px;
    border: 1px solid var(--tin-border);
    border-radius: var(--tin-radius-md);
    background: var(--tin-card);
    color: var(--tin-foreground);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tin-search-form input[type="search"]:focus {
    outline: none;
    border-color: var(--gcid-primary-color);
    box-shadow: 0 0 0 3px hsl(245 50% 48% / 0.15);
}
.tin-search-form button[type="submit"] {
    margin-left: 8px;
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--tin-radius-md);
    background: var(--gcid-primary-color);
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s ease;
}
.tin-search-form button[type="submit"]:hover { filter: brightness(0.92); }

/* Category pills */
.tin-cat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tin-cat-pill {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--tin-border);
    border-radius: 999px;
    background: var(--tin-card);
    color: var(--tin-foreground);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.tin-cat-pill:hover {
    background: var(--tin-accent);
    color: var(--gcid-primary-color);
    border-color: var(--gcid-primary-color);
}
.tin-cat-pill.is-active {
    background: var(--gcid-primary-color);
    color: #fff;
    border-color: var(--gcid-primary-color);
}

/* Visually hidden — accessible labels */
.tin-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
 * [6] Cart + Checkout (legacy [woocommerce_cart] shortcode)
 * ============================================================
 * The /cart/ and /checkout/ pages were created in Feb 2026 with the
 * legacy WC shortcodes — `[woocommerce_cart]` / `[woocommerce_checkout]`.
 * Markup is the classic woocommerce-cart-form / form.checkout structure,
 * NOT the React-based wc-block-* components.
 *
 * To switch to the Cart/Checkout Block in the future: edit each page,
 * replace the shortcode with the matching block, and re-style against
 * the wc-block-* class set (different ruleset).
 */

/* Page surface */
body.woocommerce-cart,
body.woocommerce-checkout {
    background: var(--tin-background);
}
body.woocommerce-cart .et_pb_post_content,
body.woocommerce-checkout .et_pb_post_content,
body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content {
    color: var(--tin-foreground);
    font-family: "Inter", system-ui, sans-serif;
}

/* ---------- Cart layout ----------
 * Divi 5 renders this page using two separate WC modules
 * (et_pb_wc_cart_products + et_pb_wc_cart_totals) placed in a
 * Divi row. Page-side layout is handled by the row/column structure
 * in the Visual Builder, NOT by CSS grid here. So we keep the
 * .woocommerce-cart .woocommerce wrapper as normal block flow and
 * just defensively flatten any default WC float/width/margin.
 */
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart form.woocommerce-cart-form {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}

/* ---------- Cart items: card-per-row layout ----------
 * The WC cart shortcode outputs a <table>. We re-flow it with CSS into
 * card-per-row to match the Lovable cart design — image | name + meta |
 * qty pill | subtotal | × — each row a self-contained card.
 */

/* Strip the table chrome (no outer card around the whole table) */
.woocommerce-cart table.shop_table.cart,
.woocommerce-cart .woocommerce-cart-form table.shop_table {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

/* Hide the thead (column titles) — each row is self-explanatory */
.woocommerce-cart table.shop_table.cart thead,
.woocommerce-cart .woocommerce-cart-form table.shop_table thead {
    display: none;
}

/* tbody flows as a vertical stack of cards */
.woocommerce-cart table.shop_table.cart tbody,
.woocommerce-cart .woocommerce-cart-form table.shop_table tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Each cart_item row is a card laid out as a 4-area grid:
 *   [img]   [name]    [qty]   [remove]
 *   [img]   [price]   [qty]   [remove]
 * Image, qty, and remove each span both rows (vertically centered).
 * Middle column stacks title + price vertically.
 */
.woocommerce-cart table.shop_table.cart tbody tr.cart_item,
.woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
        "img name qty remove"
        "img price qty remove";
    column-gap: 16px;
    row-gap: 4px;
    align-items: start;
    padding: 16px;
    background: var(--tin-card);
    border: 1px solid var(--tin-border);
    border-radius: 12px;
    box-shadow: var(--tin-shadow-card);
}

/* Reset cell defaults */
.woocommerce-cart table.shop_table.cart tbody tr.cart_item td,
.woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item td {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    vertical-align: middle;
    width: auto !important;
}

/* Image — left column, vertically centered across both rows */
.woocommerce-cart table.shop_table tbody tr.cart_item td.product-thumbnail {
    grid-area: img;
    align-self: center;
}
.woocommerce-cart table.shop_table tbody tr.cart_item td.product-thumbnail img,
.woocommerce-cart table.shop_table .product-thumbnail img {
    width: 112px !important;
    height: 80px !important;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--tin-border);
    display: block;
}

/* Title + variation meta — top of the middle column */
.woocommerce-cart table.shop_table tbody tr.cart_item td.product-name {
    grid-area: name;
    min-width: 0;
}
.woocommerce-cart table.shop_table .product-name a {
    color: var(--tin-foreground);
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.35;
    text-decoration: none;
    transition: color 0.2s ease;
    display: block;
    margin-bottom: 4px;
}
.woocommerce-cart table.shop_table .product-name a:hover {
    color: var(--gcid-primary-color);
}
/* Variation meta (e.g., "Kies hier je gewenste datum/locatie: 06-10-2026 Utrecht") */
.woocommerce-cart table.shop_table .product-name .variation,
.woocommerce-cart table.shop_table .product-name dl {
    color: var(--tin-muted-foreground);
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
}
.woocommerce-cart table.shop_table .product-name .variation dt,
.woocommerce-cart table.shop_table .product-name dl dt {
    font-weight: 500;
    margin: 0;
    padding: 0;
    display: inline;
}
.woocommerce-cart table.shop_table .product-name .variation dd,
.woocommerce-cart table.shop_table .product-name dl dd {
    margin: 0 0 0 4px;
    padding: 0;
    display: inline;
}
.woocommerce-cart table.shop_table .product-name .variation dd p,
.woocommerce-cart table.shop_table .product-name dl dd p {
    margin: 0;
    display: inline;
}

/* Per-unit price — already hidden (subtotal carries the meaningful number) */
.woocommerce-cart table.shop_table tbody tr.cart_item td.product-price {
    display: none;
}

/* Quantity — sits between price column and remove, vertically centered.
 * Multi-copy purchases re-enabled (per project decision update). */
.woocommerce-cart table.shop_table tbody tr.cart_item td.product-quantity {
    grid-area: qty;
    align-self: center;
}

/* Subtotal — bottom of the middle column, large bold, brand foreground */
.woocommerce-cart table.shop_table tbody tr.cart_item td.product-subtotal {
    grid-area: price;
    color: var(--tin-foreground);
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 18px;
    text-align: left;
}
.woocommerce-cart table.shop_table .woocommerce-Price-amount {
    color: inherit;
}

/* Remove (×) — right column, vertically centered across both rows */
.woocommerce-cart table.shop_table tbody tr.cart_item td.product-remove {
    grid-area: remove;
    align-self: center;
}

/* Mobile / phone — collapse to image left, content stacked, remove right.
 * Qty drops below price in the middle column. */
@media (max-width: 600px) {
    .woocommerce-cart table.shop_table.cart tbody tr.cart_item,
    .woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item {
        grid-template-columns: 80px minmax(0, 1fr) auto;
        grid-template-areas:
            "img name remove"
            "img price remove"
            "img qty remove";
    }
    .woocommerce-cart table.shop_table tbody tr.cart_item td.product-thumbnail img {
        width: 80px !important;
        height: 80px !important;
    }
}

/* ---------- Coupon + Update cart "actions" row as its own card ---------- */
.woocommerce-cart .woocommerce-cart-form table.shop_table tr:has(td.actions),
.woocommerce-cart table.shop_table tr.actions {
    display: block;
    margin-top: 4px;
}
.woocommerce-cart table.shop_table td.actions,
.woocommerce-cart .woocommerce-cart-form table.shop_table td.actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px !important;
    background: var(--tin-card) !important;
    border: 1px solid var(--tin-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--tin-shadow-card);
    width: 100%;
    box-sizing: border-box;
}
/* Coupon block inside the actions cell — left side, takes most of the row */
.woocommerce-cart .actions .coupon {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    flex: 1 1 240px;
    margin: 0;
}

/* ---------- Quantity input — same styling as the catalog search bar ----------
 * Generalized to all WC pages (cart, single product, checkout) so the qty
 * input renders identically wherever WC outputs `input.qty`.
 */
body.woocommerce-cart .quantity,
body.single-product .quantity,
body.woocommerce-page .quantity {
    display: inline-block;
}
body.woocommerce-cart input.qty,
body.single-product input.qty,
body.woocommerce-page input.qty,
body.woocommerce-cart input[type="number"].qty,
body.single-product input[type="number"].qty {
    width: 72px !important;
    height: 40px !important;
    padding: 0 8px !important;
    border: 1px solid var(--tin-border) !important;
    border-radius: var(--tin-radius-md) !important;
    background: var(--tin-card) !important;
    color: var(--tin-foreground) !important;
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    text-align: center !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.woocommerce-cart input.qty:focus,
body.single-product input.qty:focus,
body.woocommerce-page input.qty:focus {
    outline: none !important;
    border-color: var(--gcid-primary-color) !important;
    box-shadow: 0 0 0 3px hsl(245 50% 48% / 0.15) !important;
}

/* ---------- Remove (×) link ---------- */
.woocommerce-cart a.remove,
.woocommerce-cart table.shop_table a.remove {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--tin-muted) !important;
    color: var(--tin-muted-foreground) !important;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.woocommerce-cart a.remove:hover,
.woocommerce-cart table.shop_table a.remove:hover {
    background: var(--tin-destructive) !important;
    color: #fff !important;
}

/* ---------- Coupon row ---------- */
.woocommerce-cart .actions .coupon {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.woocommerce-cart .actions .coupon label {
    display: none;
}
.woocommerce-cart .actions .coupon input[type="text"],
.woocommerce-cart .actions .coupon input#coupon_code {
    flex: 1 1 200px;
    min-width: 0;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--tin-border);
    border-radius: var(--tin-radius-md);
    background: var(--tin-card);
    color: var(--tin-foreground);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce-cart .actions .coupon input[type="text"]:focus,
.woocommerce-cart .actions .coupon input#coupon_code:focus {
    outline: none;
    border-color: var(--gcid-primary-color);
    box-shadow: 0 0 0 3px hsl(245 50% 48% / 0.15);
}

/* ---------- Cart totals card ---------- */
.cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals {
    background: var(--tin-card);
    border: 1px solid var(--tin-border);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--tin-shadow-card);
}
.cart_totals h2 {
    margin: 0 0 16px;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--tin-foreground);
}
.cart_totals table.shop_table {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 16px;
}
.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
    background: transparent !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--tin-border) !important;
    color: var(--tin-foreground);
    font-family: "Inter", sans-serif;
    font-size: 14px;
}
.cart_totals table.shop_table tr.cart-subtotal th,
.cart_totals table.shop_table tr.cart-subtotal td {
    font-weight: 500;
}
.cart_totals table.shop_table tr.order-total th,
.cart_totals table.shop_table tr.order-total td {
    font-size: 16px;
    font-weight: 700;
}
.cart_totals .wc-proceed-to-checkout {
    padding: 0;
    margin-top: 8px;
}

/* ---------- Buttons (cart + checkout shortcodes) ---------- */
.woocommerce-cart .button,
.woocommerce-cart input.button,
.woocommerce-cart a.button,
.woocommerce-cart button.button,
.woocommerce-checkout .button,
.woocommerce-checkout input.button,
.woocommerce-checkout a.button,
.woocommerce-checkout button.button,
.woocommerce-checkout #place_order,
.wc-proceed-to-checkout a.checkout-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px;
    padding: 0 24px !important;
    border: 0 !important;
    border-radius: var(--tin-radius-md) !important;
    background: var(--gcid-primary-color) !important;
    color: #fff !important;
    font-family: "Inter", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: filter 0.15s ease, transform 0.05s ease !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.woocommerce-cart .button:hover,
.woocommerce-cart input.button:hover,
.woocommerce-cart a.button:hover,
.woocommerce-cart button.button:hover,
.woocommerce-checkout .button:hover,
.woocommerce-checkout #place_order:hover,
.wc-proceed-to-checkout a.checkout-button:hover {
    filter: brightness(0.92) !important;
    color: #fff !important;
}
.wc-proceed-to-checkout a.checkout-button {
    width: 100%;
    height: 48px;
    font-size: 16px !important;
}

/* "Update cart" button — quieter / secondary */
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart input[name="update_cart"] {
    background: var(--tin-card) !important;
    color: var(--tin-foreground) !important;
    border: 1px solid var(--tin-border) !important;
}
.woocommerce-cart button[name="update_cart"]:hover,
.woocommerce-cart input[name="update_cart"]:hover {
    background: var(--tin-accent) !important;
    color: var(--gcid-primary-color) !important;
    border-color: var(--gcid-primary-color) !important;
}

/* ---------- Checkout layout ----------
 * Like the cart page, Divi 5 renders this with multiple WC modules
 * (et_pb_wc_checkout_billing, et_pb_wc_checkout_payment_info, etc.)
 * placed in a Divi row. Page-side layout is handled by the row/column
 * structure in the Visual Builder, NOT by CSS grid here. We just
 * defensively flatten any default WC float/width/margin so each Divi
 * module fills 100% of whatever Divi column you placed it in.
 */
.woocommerce-checkout #customer_details,
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}

/* Card chrome on .col-1 / .col-2 — but ONLY when the column actually has
   content. Each Divi WC checkout module emits a copy of the shortcode
   wrapper skeleton, leaving some columns empty; without this gate we'd
   render those empties as visible cards. */
.woocommerce-checkout #customer_details .col-1:has(*),
.woocommerce-checkout #customer_details .col-2:has(*),
.woocommerce-checkout .col2-set .col-1:has(*),
.woocommerce-checkout .col2-set .col-2:has(*) {
    background: var(--tin-card);
    border: 1px solid var(--tin-border);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--tin-shadow-card);
    margin-bottom: 16px !important;
}

/* Hide empty WC checkout placeholders that Divi modules emit redundantly.
   :empty catches truly empty nodes; :not(:has(*)) catches nodes that only
   contain whitespace or comments. Both belt-and-suspenders. */
.woocommerce-checkout .col-1:empty,
.woocommerce-checkout .col-2:empty,
.woocommerce-checkout .col-1:not(:has(*)),
.woocommerce-checkout .col-2:not(:has(*)),
.woocommerce-checkout .col2-set:empty,
.woocommerce-checkout .col2-set:not(:has(*)),
.woocommerce-checkout #customer_details:empty,
.woocommerce-checkout #customer_details:not(:has(*)),
.woocommerce-checkout #order_review:empty,
.woocommerce-checkout #order_review:not(:has(*)),
.woocommerce-checkout .wc_payment_methods:empty,
.woocommerce-checkout .wc_payment_methods:not(:has(*)),
.woocommerce-checkout .wc_payment_method:empty,
.woocommerce-checkout .wc_payment_method:not(:has(*)),
.woocommerce-checkout .woocommerce-billing-fields:empty,
.woocommerce-checkout .woocommerce-shipping-fields:empty,
.woocommerce-checkout .woocommerce-additional-fields:empty {
    display: none !important;
}

/* Shipping is only relevant when the cart contains shippable items.
   When the cart is all-virtual (e-learning) or no shipping zones apply,
   WC keeps the wrapper but renders zero fields inside. The :has(*) gate
   above lets it through because it has a heading. Tighten by requiring
   an actual <input>/<select>/<textarea>: if there's no real form
   control inside, the shipping module/wrapper is meaningless and gets
   hidden. */
.woocommerce-checkout .woocommerce-shipping-fields:not(:has(input, select, textarea)),
[class*="wc_checkout_shipping"]:not(:has(input, select, textarea)),
[class*="wc-checkout-shipping"]:not(:has(input, select, textarea)) {
    display: none !important;
}

/* Section headings inside checkout (Billing details, Additional info, Order review) */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
    margin: 0 0 16px !important;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--tin-foreground);
}

/* Form fields */
.woocommerce-checkout form .form-row {
    margin-bottom: 16px;
    padding: 0;
}
.woocommerce-checkout form .form-row label {
    display: block;
    margin: 0 0 6px;
    color: var(--tin-foreground);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
}
.woocommerce-checkout form .form-row .required,
.woocommerce-checkout form .form-row abbr.required {
    color: var(--gcid-primary-color);
    text-decoration: none;
    border: 0;
}
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row textarea,
.woocommerce-checkout form .form-row select,
.woocommerce-checkout .select2-container--default .select2-selection--single {
    width: 100% !important;
    height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid var(--tin-border) !important;
    border-radius: var(--tin-radius-md) !important;
    background: var(--tin-card) !important;
    color: var(--tin-foreground) !important;
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.woocommerce-checkout form .form-row textarea {
    height: auto !important;
    min-height: 96px !important;
    padding: 12px 14px !important;
    line-height: 1.5;
}
.woocommerce-checkout form .form-row input.input-text:focus,
.woocommerce-checkout form .form-row textarea:focus,
.woocommerce-checkout form .form-row select:focus,
.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single {
    outline: none !important;
    border-color: var(--gcid-primary-color) !important;
    box-shadow: 0 0 0 3px hsl(245 50% 48% / 0.15) !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px !important;
    padding: 0 !important;
    color: var(--tin-foreground) !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
}

/* Order review (right column on checkout) */
.woocommerce-checkout #order_review {
    background: var(--tin-card);
    border: 1px solid var(--tin-border);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--tin-shadow-card);
}
.woocommerce-checkout #order_review table.shop_table {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    margin: 0 0 16px;
}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
    background: transparent !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--tin-border) !important;
    font-family: "Inter", sans-serif;
}
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total th,
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td {
    font-size: 16px;
    font-weight: 700;
}

/* Payment methods */
.woocommerce-checkout .wc_payment_methods {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}
.woocommerce-checkout .wc_payment_method:has(*) {
    background: var(--tin-card);
    border: 1px solid var(--tin-border);
    border-radius: var(--tin-radius-md);
    padding: 14px 16px;
    margin-bottom: 8px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.woocommerce-checkout .wc_payment_method input[type="radio"] {
    accent-color: var(--gcid-primary-color);
    margin-right: 8px;
}
.woocommerce-checkout .wc_payment_method label {
    display: inline;
    color: var(--tin-foreground);
    font-weight: 500;
    cursor: pointer;
}
.woocommerce-checkout .wc_payment_method.payment_method_active,
.woocommerce-checkout .wc_payment_method:has(input:checked) {
    border-color: var(--gcid-primary-color);
    background: var(--tin-accent);
}
.woocommerce-checkout .wc_payment_method .payment_box {
    background: transparent;
    border: 0;
    color: var(--tin-muted-foreground);
    font-size: 14px;
    margin-top: 8px;
    padding: 0;
}
.woocommerce-checkout .wc_payment_method .payment_box::before {
    display: none;
}

/* Place order button — full width, taller */
.woocommerce-checkout #place_order {
    width: 100%;
    height: 48px;
    margin-top: 8px;
    font-size: 16px !important;
}

/* Notice strips (cart updated, coupon applied, errors, etc.) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce-cart .woocommerce-notices-wrapper > .woocommerce-message,
.woocommerce-cart .woocommerce-notices-wrapper > .woocommerce-info,
.woocommerce-checkout .woocommerce-notices-wrapper > .woocommerce-message,
.woocommerce-checkout .woocommerce-notices-wrapper > .woocommerce-info,
.woocommerce-checkout .woocommerce-notices-wrapper > .woocommerce-error {
    background: var(--tin-card);
    border: 1px solid var(--tin-border);
    border-left: 4px solid var(--gcid-primary-color);
    border-radius: var(--tin-radius-md);
    padding: 14px 18px;
    color: var(--tin-foreground);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    box-shadow: none;
    margin-bottom: 16px;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    color: var(--gcid-primary-color);
    top: 18px;
    left: 18px;
}
.woocommerce-error {
    border-left-color: var(--tin-destructive);
}
.woocommerce-error::before {
    color: var(--tin-destructive);
}

/* Empty cart state */
.cart-empty,
.woocommerce-cart .wc-empty-cart-message {
    text-align: center;
    padding: 48px 20px;
    color: var(--tin-muted-foreground);
    font-family: "Inter", sans-serif;
    font-size: 16px;
}
.return-to-shop {
    text-align: center;
    margin: 16px 0 0;
}

/* ============================================================
 * [7] Single Product — variations form + qty/CTA layout
 * ============================================================
 * Default WC renders the variations as a <table>, with qty + Add to
 * Cart inline next to each other inside .variations_button. We re-flow
 * both: the variations table becomes a label-above-select column, and
 * the qty/CTA stack vertically (qty on its own row above a full-width
 * Add to Cart button) so the qty input doesn't catch the button hover.
 */

/* Variations: hide the table chrome, treat as a column of fields */
body.single-product table.variations,
body.single-product table.variations tbody,
body.single-product table.variations tr {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
}
body.single-product table.variations tr {
    margin: 0 0 12px !important;
}
body.single-product table.variations th.label,
body.single-product table.variations td.value {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
body.single-product table.variations th.label label {
    display: block;
    margin: 0 0 6px;
    color: var(--tin-foreground);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
}

/* The select itself — same chrome as the search bar */
body.single-product table.variations td.value select {
    width: 100% !important;
    height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid var(--tin-border) !important;
    border-radius: var(--tin-radius-md) !important;
    background: var(--tin-card) !important;
    color: var(--tin-foreground) !important;
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    /* Native arrow stays visible (browser default) — fine for spirit-of-design */
    appearance: auto;
}
body.single-product table.variations td.value select:focus {
    outline: none !important;
    border-color: var(--gcid-primary-color) !important;
    box-shadow: 0 0 0 3px hsl(245 50% 48% / 0.15) !important;
}

/* "Clear" link below the select after a variation is chosen */
body.single-product table.variations a.reset_variations {
    display: inline-block;
    margin-top: 8px;
    color: var(--tin-muted-foreground);
    font-size: 13px;
    text-decoration: underline;
}
body.single-product table.variations a.reset_variations:hover {
    color: var(--gcid-primary-color);
}

/* Variation price block (appears after a variation is chosen) */
body.single-product .single_variation_wrap .single_variation,
body.single-product .single_variation {
    margin: 12px 0;
}
body.single-product .single_variation .woocommerce-variation-price .price,
body.single-product .single_variation_wrap .woocommerce-variation-price .price,
body.single-product .single_variation .woocommerce-Price-amount {
    color: var(--tin-foreground);
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-weight: 700;
}

/* Stack qty above the Add to Cart button (was inline → caused hover overlap).
   Covers both simple (form.cart) and variable (.variations_button) flows. */
body.single-product form.cart,
body.single-product .variations_button {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}
body.single-product form.cart .quantity,
body.single-product .variations_button .quantity {
    align-self: flex-start;
}
body.single-product form.cart button.single_add_to_cart_button,
body.single-product form.cart input.single_add_to_cart_button,
body.single-product .variations_button button.single_add_to_cart_button {
    width: 100% !important;
    margin: 0 !important;
}

/* ============================================================
 * [8] Description list helper classes (.tan-checklist, .tan-audience-grid)
 * ============================================================
 * Use these classes on <ul> elements inside product descriptions to
 * style the list per the Lovable design. Authored as `tan-` (Train
 * AI Now brand mark) since they live in product-description content,
 * not in dev-side CSS.
 *
 *   <ul class="tan-checklist">…</ul>      → "Wat ga je leren?" pattern
 *   <ul class="tan-audience-grid">…</ul>  → "Voor wie is deze cursus?" pattern
 */

/* ---- .tan-checklist — 2-col grid, check-mark icon per item ---- */
ul.tan-checklist {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}
@media (max-width: 600px) {
    ul.tan-checklist {
        grid-template-columns: 1fr;
    }
}
ul.tan-checklist li {
    /* Block-level li with the icon absolutely positioned, so inline content
       (text + <strong> + nested inlines) flows naturally instead of being
       split into separate flex items. */
    position: relative;
    margin: 0 !important;
    padding: 0 0 0 28px !important;
    color: var(--tin-foreground);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    list-style: none !important;
}
ul.tan-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2329A37C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ---- .tan-audience-grid — 2-col grid of cards, shield-check icon ---- */
ul.tan-audience-grid {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 600px) {
    ul.tan-audience-grid {
        grid-template-columns: 1fr;
    }
}
ul.tan-audience-grid li {
    /* Block-level li with absolutely-positioned icon (see tan-checklist
       above for the rationale). Left padding makes room for the icon:
       16 (card padding) + 20 (icon width) + 12 (gap) = 48. */
    position: relative;
    margin: 0 !important;
    padding: 16px 16px 16px 48px !important;
    background: var(--tin-card);
    border: 1px solid var(--tin-border);
    border-radius: 12px;
    box-shadow: var(--tin-shadow-card);
    color: var(--tin-foreground);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    list-style: none !important;
}
ul.tan-audience-grid li::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 18px; /* card padding 16 + original margin-top 2 */
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23473DB8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><path d='m9 12 2 2 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ============================================================
 * [9] Generic page components (used across home/static pages)
 * ============================================================
 * Filename is `woocommerce.css` for historical reasons — these rules
 * are for non-WC content. Move to a dedicated `components.css` if/when
 * the set grows enough to justify a separate file.
 */

/* Site-wide gradient backdrop — Lovable's 3-stop vertical hero gradient
 * applied to <body> as a fixed-attachment background. Stays consistent
 * across viewports as the user scrolls. Hero sections leave their bg
 * transparent so this shows through; sections that want a card surface
 * (stats, testimonials, product cards) sit on top of it.
 *
 * Pages that need a different feel (e.g., a future content-heavy page
 * that wants a flat white) can override on the body via a body-class
 * selector.
 */
body {
    background: var(--tin-gradient-hero) !important;
    background-attachment: fixed !important;
    background-size: 100% 100vh !important;
    background-repeat: no-repeat !important;
}

/* Divi 5 paints .et_pb_section with a default solid white background, which
 * covers the body gradient above. Reset it to transparent. Sections that
 * have an explicit Background Color set in Divi's UI generate higher-
 * specificity inline styles (or numbered-class rules) that win over this,
 * so they keep their colored bg. */
.et_pb_section {
    background-color: transparent;
}

/* Optional explicit-section override — same gradient applied to a single
 * section. Rarely needed now that body has the gradient by default, but
 * still useful if a section sits on a different parent (e.g., a Theme
 * Builder template's main canvas with its own bg).
 */
.tin-bg-gradient-hero {
    background: var(--tin-gradient-hero) !important;
    background-image: var(--tin-gradient-hero) !important;
}

/* Primary gradient as section background — used on the bottom CTA section
 * where Lovable applies `gradient-primary` (the indigo→violet 135deg). */
.tin-bg-gradient-primary {
    background: var(--tin-gradient-primary) !important;
    background-image: var(--tin-gradient-primary) !important;
}

/* Inverted section content — switches text colors to white for sections
 * sitting on dark/gradient backgrounds. Pair with .tin-bg-gradient-primary
 * (or any other dark-backdrop class) on the same section. */
.tin-section--inverted h1,
.tin-section--inverted h2,
.tin-section--inverted h3,
.tin-section--inverted h4,
.tin-section--inverted .tin-section-heading__title {
    color: #ffffff !important;
}
.tin-section--inverted p,
.tin-section--inverted .tin-section-heading__subtitle {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Disable Divi's auto vertical gap between modules in a column.
 * Apply on a Section, Row, or Column when you want modules to control
 * their own spacing via Margin Bottom only. Divi 5 sets a default
 * --vertical-gap on .et_flex_column which gets ADDED to per-module
 * margins, so without this you get doubled spacing.
 */
.tin-no-vgap,
.tin-no-vgap .et_pb_column,
.tin-no-vgap .et_flex_column,
.tin-no-vgap > .et_pb_row,
.tin-no-vgap .et_pb_row .et_pb_column,
.tin-no-vgap .et_pb_row .et_flex_column {
    --vertical-gap: 0 !important;
}

/* ---- Pill badge — small uppercase tag ----
 * Used inside section headings ("AI Adoptie", "Over ons", etc.)
 * Smaller and bolder than the hero badge.
 */
.tin-pill-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--tin-accent);
    color: var(--gcid-primary-color);
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---- Inline button row ----
 * Flex container for two or more buttons placed inline.
 * Wraps on narrow widths.
 */
.tin-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

/* ---- Section heading helper ----
 * Reusable H2 + subtitle pattern. Centered by default; add the
 * `--left` modifier for a left-aligned variant.
 *
 *   <div class="tin-section-heading">
 *     <h2 class="tin-section-heading__title">Title</h2>
 *     <p class="tin-section-heading__subtitle">Subtitle</p>
 *   </div>
 */
.tin-section-heading {
    margin: 0 0 40px;
    text-align: center;
}
.tin-section-heading--left {
    text-align: left;
}
.tin-section-heading--narrow {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
}
/* When a pill badge appears immediately above the title, give it air */
.tin-section-heading .tin-pill-badge {
    margin-bottom: 12px;
}
.tin-section-heading__title {
    font-family: "Inter", sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--tin-foreground);
    margin: 0 0 12px;
}
.tin-section-heading__subtitle {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--tin-muted-foreground);
    margin: 0;
}

/* ---- Leertraject (category) cards ----
 * 3-card grid where the entire card is a link, with hover lift + shadow
 * grow. Each card has an icon container with a configurable gradient.
 *
 *   <div class="tin-category-grid">
 *     <a href="..." class="tin-category-card">
 *       <span class="tin-category-card__icon tin-category-card__icon--primary">
 *         <!-- inline SVG -->
 *       </span>
 *       <h3 class="tin-category-card__title">Title</h3>
 *       <p class="tin-category-card__desc">Description</p>
 *       <span class="tin-category-card__cta">Bekijk aanbod →</span>
 *     </a>
 *   </div>
 *
 * Icon variants: --primary (gradient indigo→violet) or --cta (gradient teal).
 */
.tin-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
@media (max-width: 768px) {
    .tin-category-grid { grid-template-columns: 1fr; }
}
.tin-category-card {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px;
    background: var(--tin-card);
    border: 1px solid var(--tin-border);
    border-radius: 12px;
    box-shadow: var(--tin-shadow-card);
    text-decoration: none !important;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tin-category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tin-shadow-card-hover);
}
.tin-category-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    color: #ffffff;
    margin-bottom: 16px;
    flex: 0 0 auto;
}
.tin-category-card__icon--primary {
    background: var(--tin-gradient-primary);
}
.tin-category-card__icon--cta {
    background: var(--tin-gradient-cta);
}
.tin-category-card__icon svg {
    width: 24px;
    height: 24px;
}
.tin-category-card__title {
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tin-foreground);
    margin: 0 0 8px;
}
.tin-category-card__desc {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--tin-muted-foreground);
    margin: 0 0 16px;
    flex: 1 1 auto;
}
.tin-category-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--gcid-primary-color);
    text-decoration: none;
}
.tin-category-card:hover .tin-category-card__cta {
    text-decoration: underline;
}

/* ---- Generic icon card grid ----
 * 6-card pattern with icon container on top, used for "Belang van AI-adoptie",
 * "Waarom AI leren bij..." and similar feature-grid sections.
 *
 *   <div class="tin-icon-card-grid">
 *     <div class="tin-icon-card">
 *       <span class="tin-icon-card__icon" aria-hidden="true"><!-- svg --></span>
 *       <h3 class="tin-icon-card__title">Title</h3>
 *       <p class="tin-icon-card__desc">Description</p>
 *     </div>
 *     ...
 *   </div>
 *
 * Icon variant: add `tin-icon-card__icon--accent` for a pale-lavender
 * background with primary-color icon, vs the default gradient bg.
 */
.tin-icon-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
@media (max-width: 1024px) {
    .tin-icon-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .tin-icon-card-grid { grid-template-columns: 1fr; }
}
.tin-icon-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: var(--tin-card);
    border: 1px solid var(--tin-border);
    border-radius: 12px;
    box-shadow: var(--tin-shadow-card);
}
.tin-icon-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: #ffffff;
    background: var(--tin-gradient-primary);
    margin-bottom: 12px;
    flex: 0 0 auto;
}
.tin-icon-card__icon svg {
    width: 20px;
    height: 20px;
}
.tin-icon-card__icon--accent {
    background: var(--tin-accent);
    color: var(--gcid-primary-color);
}
.tin-icon-card__title {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tin-foreground);
    margin: 0 0 8px;
}
.tin-icon-card__desc {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--tin-muted-foreground);
    margin: 0;
    flex: 1 1 auto;
}

/* Horizontal variant: icon on the left, title+desc stacked on the right.
 * Used in "Waarom AI leren bij Train AI Now"-style USP grids. */
.tin-icon-card--horizontal {
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
}
.tin-icon-card--horizontal .tin-icon-card__icon {
    margin-bottom: 0;
}
.tin-icon-card--horizontal .tin-icon-card__body {
    flex: 1 1 auto;
}
.tin-icon-card--horizontal .tin-icon-card__title {
    font-size: 16px;
    margin-bottom: 4px;
}

/* ---- Inline stat row (compact version of the big stats grid) ----
 * Small icon left, big number + small label stacked right.
 * Placed in a 2-col grid by default, configurable.
 */
.tin-stat-row__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.tin-stat-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.tin-stat-row__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--tin-accent);
    color: var(--gcid-primary-color);
}
.tin-stat-row__icon svg {
    width: 20px;
    height: 20px;
}
.tin-stat-row__value {
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--tin-foreground);
}
.tin-stat-row__label {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: var(--tin-muted-foreground);
}

/* ---- Process steps (3-step "Zo werkt het" pattern) ----
 *
 *   <div class="tin-step-grid">
 *     <div class="tin-step">
 *       <div class="tin-step__number">1</div>
 *       <h3 class="tin-step__title">Step title</h3>
 *       <p class="tin-step__desc">Step description</p>
 *     </div>
 *     ...
 *   </div>
 */
.tin-step-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}
@media (max-width: 768px) {
    .tin-step-grid { grid-template-columns: 1fr; }
}
.tin-step {
    text-align: center;
}
.tin-step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: var(--tin-gradient-primary);
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 16px;
}
.tin-step__title {
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tin-foreground);
    margin: 0 0 8px;
}
.tin-step__desc {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--tin-muted-foreground);
    margin: 0;
}

/* ---- Partner spotlight card (AI CERTs Platinum Partner) ----
 * Centered card with big icon, name, tier, role, and a 2-col benefits
 * checklist below.
 */
.tin-partner-card {
    background: var(--tin-card);
    border: 1px solid var(--tin-border);
    border-radius: 16px;
    padding: 32px;
    box-shadow: var(--tin-shadow-elevated);
    text-align: center;
}
.tin-partner-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border-radius: 16px;
    background: var(--tin-accent);
    color: var(--gcid-primary-color);
    margin-bottom: 24px;
}
.tin-partner-card__icon svg {
    width: 64px;
    height: 64px;
}
.tin-partner-card__name {
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--tin-foreground);
    margin: 0 0 8px;
}
.tin-partner-card__tier {
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--gcid-primary-color);
    margin: 0 0 4px;
}
.tin-partner-card__role {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: var(--tin-muted-foreground);
    margin: 0 0 24px;
}
.tin-partner-card__benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    text-align: left;
}
@media (max-width: 600px) {
    .tin-partner-card__benefits { grid-template-columns: 1fr; }
}
.tin-partner-card__benefit {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tin-muted-foreground);
}
.tin-partner-card__benefit::before {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2329A37C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ---- 4-column variant of the .tin-shop catalog grid ----
 * Default `.tin-shop` (Phase 3.2) is 3-col for the catalog archive.
 * Add `tin-shop--4cols` alongside `tin-shop` on the homepage featured
 * row to override to 4-col on desktop.
 *
 * Breakpoints aligned with Divi 5's standard 980px tablet boundary so
 * our grid changes happen at the same time Divi's responsive WC widths
 * change. (Earlier 1024px → 2-col created a misaligned zone where Divi
 * was already in tablet mode but our grid wasn't.)
 */
.tin-shop.tin-shop--4cols ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 980px) {
    .tin-shop.tin-shop--4cols ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 600px) {
    .tin-shop.tin-shop--4cols ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* ---- Stats strip ----
 * Used on the Home page (and elsewhere) to render a row of headline numbers
 * with gradient values + muted labels. 4 cols desktop / 2 cols mobile.
 *
 *   <div class="tin-stats-grid">
 *     <div class="tin-stat">
 *       <div class="tin-stat__value tin-text-gradient">5.000+</div>
 *       <div class="tin-stat__label">Studenten per jaar</div>
 *     </div>
 *     ... more stats ...
 *   </div>
 */
.tin-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    text-align: center;
}
@media (max-width: 768px) {
    .tin-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}
.tin-stat__value {
    font-family: "Inter", sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
}
@media (max-width: 768px) {
    .tin-stat__value { font-size: 24px; }
}
.tin-stat__label {
    margin-top: 4px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: var(--tin-muted-foreground);
}

/* ---- Testimonial cards ----
 * 2-col grid of card-style testimonials with avatar+name+role footer.
 *
 *   <div class="tin-testimonials-grid">
 *     <div class="tin-testimonial">
 *       <p class="tin-testimonial__text">"…"</p>
 *       <div class="tin-testimonial__author">
 *         <div class="tin-testimonial__avatar" aria-hidden="true">L</div>
 *         <div>
 *           <div class="tin-testimonial__name">Lisa de Vries</div>
 *           <div class="tin-testimonial__role">Marketing Manager</div>
 *         </div>
 *       </div>
 *     </div>
 *     ... more …
 *   </div>
 */
.tin-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 1024px;
    margin: 0 auto;
}
.tin-testimonials-grid--3col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1200px;
}
@media (max-width: 768px) {
    .tin-testimonials-grid,
    .tin-testimonials-grid--3col { grid-template-columns: 1fr; }
}
.tin-testimonial {
    background: var(--tin-card);
    border: 1px solid var(--tin-border);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--tin-shadow-card);
}
.tin-testimonial__text {
    margin: 0 0 16px;
    color: var(--tin-muted-foreground);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: italic;
    line-height: 1.6;
}
.tin-testimonial__author {
    display: flex;
    align-items: center;
    gap: 12px;
}
.tin-testimonial__avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--tin-gradient-primary);
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}
.tin-testimonial__name {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tin-foreground);
}
.tin-testimonial__role {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: var(--tin-muted-foreground);
}

/* ---- Footer link lists ----
 * Phase 2.1 added <ul class="tin-footer-links"> in each footer column
 * but the styling was never defined, so default browser disc bullets
 * appeared. Strip them and tighten the line spacing.
 */
ul.tin-footer-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
ul.tin-footer-links li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
}
ul.tin-footer-links li:last-child {
    margin-bottom: 0 !important;
}
ul.tin-footer-links a {
    text-decoration: none;
}

/* ---- Header menu — reduce vertical padding + lock hover ----
 * Divi 5 ships .et_pb_menu--with-logo .et_pb_menu__menu>nav>ul>li>a with
 * `padding: 31px 0`, which makes the nav (and the CTA, since the
 * `.tn-menu-cta` <li> wraps a tall <a>) too tall. The same selector also
 * shifts on hover (Divi's default underline indicator changes the
 * computed box). Lock the padding identically on base AND hover so the
 * menu's height never changes.
 */
.et_pb_menu--with-logo .et_pb_menu__menu > nav > ul > li > a,
.et_pb_menu--with-logo .et_pb_menu__menu > nav > ul > li > a:hover,
.et_pb_menu--with-logo .et_pb_menu__menu > nav > ul > li > a:focus,
.et_pb_menu--with-logo .et_pb_menu__menu > nav > ul > li > a:active,
.et_pb_menu--with-logo .et_pb_menu__menu > nav > ul > li:hover > a,
.et_pb_menu--with-logo .et_pb_menu__menu > nav > ul > li:focus-within > a,
.et_pb_menu--with-logo .et_pb_menu__menu > nav > ul > li.current-menu-item > a {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    border: 0 !important;
}

/* Lock the menu module's vertical margin on hover. The Theme Builder
 * header has a generated rule like:
 *   .et_pb_menu_0_tb_header.et_pb_menu:hover { margin: 12px 0 }
 * which makes the entire menu strip grow ~24px on hover. Override to
 * keep margins identical between base and hover.
 *
 * Targets any TB-header menu module variant — the [class*="_tb_header"]
 * pattern catches Divi's auto-generated module IDs. The .et-l--header
 * scope keeps the rule from leaking into menus elsewhere. */
.et-l--header .et_pb_menu:hover,
.et-l--header [class*="_tb_header"].et_pb_menu:hover,
.et-l--header [class*="et_pb_menu"]:hover,
body.et-db #et-boc .et-l .et_pb_menu_0_tb_header.et_pb_menu:hover {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Hero pill badge — used on the Home page hero ("Geaccrediteerde AI-opleidingen") */
.tin-hero-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--tin-accent);
    color: var(--gcid-primary-color);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

/* Gradient text fill — wrap inline text in a span with this class.
   Pulled from Lovable's --gradient-primary (135deg indigo → violet). */
.tin-text-gradient {
    background: var(--tin-gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---- Button variants ----
 * Two named variants to apply via a single class:
 *   .tin-btn-primary                       — full chrome, gradient background
 *   .tin-btn-outline / .tin-btn-secondary  — transparent bg, border, foreground text
 *                                            (two names for the same variant —
 *                                             "outline" matches Lovable shadcn
 *                                             naming, "secondary" is more
 *                                             semantic. Pick whichever feels
 *                                             clearer; both produce the same
 *                                             visual.)
 *
 * Apply via Divi's Advanced → Attributes → CSS Class. Selectors cover both
 * raw <a>/<button> usage and Divi's button wrapper pattern. Padding is
 * locked on both base AND :hover so Divi's default hover-shifts-padding
 * arrow effect can't change the button's size.
 */

/* Primary — gradient */
a.tin-btn-primary,
button.tin-btn-primary,
.et_pb_button_module_wrapper.tin-btn-primary .et_pb_button,
.et_pb_button.tin-btn-primary,
.tin-btn-primary > a,
.tin-btn-primary > button,
/* lock the same padding on hover/focus to prevent any Divi shift */
a.tin-btn-primary:hover,
a.tin-btn-primary:focus,
button.tin-btn-primary:hover,
button.tin-btn-primary:focus,
.et_pb_button_module_wrapper.tin-btn-primary .et_pb_button:hover,
.et_pb_button_module_wrapper.tin-btn-primary .et_pb_button:focus,
.et_pb_button.tin-btn-primary:hover,
.et_pb_button.tin-btn-primary:focus {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 32px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--tin-gradient-primary) !important;
    background-image: var(--tin-gradient-primary) !important;
    color: #ffffff !important;
    font-family: "Inter", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.05s ease !important;
}
/* Hover/focus visual changes (filter only — padding/margin already locked above) */
a.tin-btn-primary:hover,
button.tin-btn-primary:hover,
.et_pb_button_module_wrapper.tin-btn-primary .et_pb_button:hover,
.et_pb_button.tin-btn-primary:hover {
    filter: brightness(0.93) !important;
}
.tin-btn-primary:active,
.tin-btn-primary > a:active,
.tin-btn-primary > button:active {
    transform: translateY(1px);
}
/* Defeat Divi's default ::after hover arrow */
.tin-btn-primary::after,
.tin-btn-primary.et_pb_button::after,
.et_pb_button.tin-btn-primary::after,
.et_pb_button_module_wrapper.tin-btn-primary .et_pb_button::after,
.tin-btn-primary:hover::after,
.et_pb_button.tin-btn-primary:hover::after,
.et_pb_button_module_wrapper.tin-btn-primary .et_pb_button:hover::after {
    display: none !important;
    content: none !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
}

/* Outline / Secondary — transparent bg, border, foreground text.
 * Both class names produce the same visual; pick whichever reads cleaner. */
a.tin-btn-outline,
a.tin-btn-secondary,
button.tin-btn-outline,
button.tin-btn-secondary,
.et_pb_button_module_wrapper.tin-btn-outline .et_pb_button,
.et_pb_button_module_wrapper.tin-btn-secondary .et_pb_button,
.et_pb_button.tin-btn-outline,
.et_pb_button.tin-btn-secondary,
.tin-btn-outline > a,
.tin-btn-secondary > a,
.tin-btn-outline > button,
.tin-btn-secondary > button,
/* lock padding on hover/focus too */
a.tin-btn-outline:hover,
a.tin-btn-outline:focus,
a.tin-btn-secondary:hover,
a.tin-btn-secondary:focus,
button.tin-btn-outline:hover,
button.tin-btn-outline:focus,
button.tin-btn-secondary:hover,
button.tin-btn-secondary:focus,
.et_pb_button_module_wrapper.tin-btn-outline .et_pb_button:hover,
.et_pb_button_module_wrapper.tin-btn-outline .et_pb_button:focus,
.et_pb_button_module_wrapper.tin-btn-secondary .et_pb_button:hover,
.et_pb_button_module_wrapper.tin-btn-secondary .et_pb_button:focus,
.et_pb_button.tin-btn-outline:hover,
.et_pb_button.tin-btn-outline:focus,
.et_pb_button.tin-btn-secondary:hover,
.et_pb_button.tin-btn-secondary:focus {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 13px 32px !important;
    margin: 0 !important;
    border: 1px solid var(--tin-border) !important;
    border-radius: 12px !important;
    background: var(--tin-card) !important;
    background-image: none !important;
    color: var(--tin-foreground) !important;
    font-family: "Inter", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
/* Hover/focus visual changes */
a.tin-btn-outline:hover,
a.tin-btn-secondary:hover,
button.tin-btn-outline:hover,
button.tin-btn-secondary:hover,
.et_pb_button_module_wrapper.tin-btn-outline .et_pb_button:hover,
.et_pb_button_module_wrapper.tin-btn-secondary .et_pb_button:hover,
.et_pb_button.tin-btn-outline:hover,
.et_pb_button.tin-btn-secondary:hover {
    background: var(--tin-accent) !important;
    border-color: var(--gcid-primary-color) !important;
    color: var(--gcid-primary-color) !important;
}
/* Defeat Divi's default ::after hover arrow on these too */
.tin-btn-outline::after,
.tin-btn-secondary::after,
.et_pb_button.tin-btn-outline::after,
.et_pb_button.tin-btn-secondary::after,
.et_pb_button_module_wrapper.tin-btn-outline .et_pb_button::after,
.et_pb_button_module_wrapper.tin-btn-secondary .et_pb_button::after,
.tin-btn-outline:hover::after,
.tin-btn-secondary:hover::after,
.et_pb_button.tin-btn-outline:hover::after,
.et_pb_button.tin-btn-secondary:hover::after,
.et_pb_button_module_wrapper.tin-btn-outline .et_pb_button:hover::after,
.et_pb_button_module_wrapper.tin-btn-secondary .et_pb_button:hover::after {
    display: none !important;
    content: none !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
}

/* On-dark outline — for use on .tin-bg-gradient-primary and other dark
 * backdrops. Transparent bg + translucent white border + white text. */
a.tin-btn-on-dark-outline,
button.tin-btn-on-dark-outline,
.et_pb_button_module_wrapper.tin-btn-on-dark-outline .et_pb_button,
.et_pb_button.tin-btn-on-dark-outline,
.tin-btn-on-dark-outline > a,
.tin-btn-on-dark-outline > button,
a.tin-btn-on-dark-outline:hover,
a.tin-btn-on-dark-outline:focus,
button.tin-btn-on-dark-outline:hover,
button.tin-btn-on-dark-outline:focus,
.et_pb_button_module_wrapper.tin-btn-on-dark-outline .et_pb_button:hover,
.et_pb_button_module_wrapper.tin-btn-on-dark-outline .et_pb_button:focus,
.et_pb_button.tin-btn-on-dark-outline:hover,
.et_pb_button.tin-btn-on-dark-outline:focus {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 13px 32px !important;
    margin: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 12px !important;
    background: transparent !important;
    background-image: none !important;
    color: #ffffff !important;
    font-family: "Inter", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}
a.tin-btn-on-dark-outline:hover,
button.tin-btn-on-dark-outline:hover,
.et_pb_button.tin-btn-on-dark-outline:hover,
.et_pb_button_module_wrapper.tin-btn-on-dark-outline .et_pb_button:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #ffffff !important;
}
.tin-btn-on-dark-outline::after,
.et_pb_button.tin-btn-on-dark-outline::after,
.et_pb_button_module_wrapper.tin-btn-on-dark-outline .et_pb_button::after {
    display: none !important;
    content: none !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
}

/* ============================================================
 * [10] Phase 4.4 components — Zakelijk page
 * ============================================================ */

/* ---- Stat tile grid (2x2 vertical cards) ----
 * Used on the Zakelijk hero's right column. Different from .tin-stats-grid
 * (full-width 4-across numbers) and .tin-stat-row (small inline icon+value).
 *
 *   <div class="tin-stat-tile-grid">
 *     <div class="tin-stat-tile">
 *       <span class="tin-stat-tile__icon" aria-hidden="true"><svg/></span>
 *       <div class="tin-stat-tile__value tin-text-gradient">5.000+</div>
 *       <div class="tin-stat-tile__label">Getrainde professionals</div>
 *     </div>
 *     ...
 *   </div>
 */
.tin-stat-tile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.tin-stat-tile {
    background: var(--tin-card);
    border: 1px solid var(--tin-border);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    box-shadow: var(--tin-shadow-card);
}
.tin-stat-tile__icon {
    display: block;
    margin: 0 auto 8px;
    color: var(--gcid-primary-color);
}
.tin-stat-tile__icon svg {
    width: 24px;
    height: 24px;
    display: inline-block;
}
.tin-stat-tile__value {
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
}
.tin-stat-tile__label {
    margin-top: 4px;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: var(--tin-muted-foreground);
}

/* ---- Inline feature list (single-column checklist) ----
 * Used on the Zakelijk hero — like .tan-checklist but single column,
 * inline-friendly, smaller gap.
 *
 *   <ul class="tin-feature-list">
 *     <li>Op maat gemaakte curricula</li>
 *     <li>Flexibele planning en locatie</li>
 *     ...
 *   </ul>
 */
ul.tin-feature-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 32px !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
ul.tin-feature-list li {
    /* Block-level li with absolutely-positioned icon (see tan-checklist
       above for the rationale). Padding-left = 16 (icon) + 8 (gap). */
    position: relative;
    margin: 0 !important;
    padding: 0 0 0 24px !important;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tin-foreground);
    list-style: none !important;
}
ul.tin-feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px; /* roughly centers a 16px icon on a 14px/1.5 first line */
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2329A37C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ---- 2-col modifier for icon-card-grid ----
 * Used on the Zakelijk "Waarom AI adoptie" section (4 cards in 2-col)
 * vs the homepage's 6-card 3-col version.
 */
.tin-icon-card-grid.tin-icon-card-grid--2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 768px) {
    .tin-icon-card-grid.tin-icon-card-grid--2col {
        grid-template-columns: 1fr;
    }
}

/* ---- Divi Contact Form module — match our input styling ----
 * Used on the Zakelijk page's "Vraag een offerte aan" form (added
 * via Divi's Contact Form module). The CSS targets Divi's Contact Form
 * markup classes, NOT the WC checkout form classes.
 */
.et_pb_contact_form_container {
    background: var(--tin-card);
    border: 1px solid var(--tin-border);
    border-radius: 12px;
    padding: 32px;
    box-shadow: var(--tin-shadow-card);
}
.et_pb_contact_form_container .et_pb_contact_form {
    margin: 0;
}
.et_pb_contact_form p.et_pb_contact_field {
    margin: 0 0 16px !important;
    padding: 0 !important;
}
.et_pb_contact_form .et_pb_contact_field_options_title,
.et_pb_contact_form .et_pb_contact_form_label {
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--tin-foreground) !important;
    margin-bottom: 6px !important;
}
.et_pb_contact_form input[type="text"],
.et_pb_contact_form input[type="email"],
.et_pb_contact_form input[type="tel"],
.et_pb_contact_form input[type="number"],
.et_pb_contact_form input.input,
.et_pb_contact_form textarea,
.et_pb_contact_form textarea.et_pb_contact_message {
    width: 100% !important;
    height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid var(--tin-border) !important;
    border-radius: var(--tin-radius-md) !important;
    background: var(--tin-card) !important;
    color: var(--tin-foreground) !important;
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.et_pb_contact_form textarea,
.et_pb_contact_form textarea.et_pb_contact_message {
    height: auto !important;
    min-height: 120px !important;
    padding: 12px 14px !important;
    line-height: 1.5;
}
.et_pb_contact_form input:focus,
.et_pb_contact_form textarea:focus {
    outline: none !important;
    border-color: var(--gcid-primary-color) !important;
    box-shadow: 0 0 0 3px hsl(245 50% 48% / 0.15) !important;
}
.et_pb_contact_form input::placeholder,
.et_pb_contact_form textarea::placeholder {
    color: var(--tin-muted-foreground) !important;
    opacity: 0.7;
}
/* Submit button — match tin-btn-primary chrome */
.et_pb_contact_submit,
button.et_pb_contact_submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 24px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--tin-gradient-primary) !important;
    background-image: var(--tin-gradient-primary) !important;
    color: #ffffff !important;
    font-family: "Inter", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: filter 0.15s ease !important;
}
.et_pb_contact_submit:hover {
    filter: brightness(0.93) !important;
}
.et_pb_contact_submit::after {
    display: none !important;
}

/* ============================================================
 * [11] Catalog filter form (search + Type / Categorie / Niveau dropdowns)
 * ============================================================
 * Rendered server-side by the `[tin_catalog_filters]` shortcode (see
 * functions.php). Replaces the old `.tin-cat-pills` UI; the pill CSS
 * up at section [5] is kept around for back-compat but no longer used.
 */
.tin-catalog-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    background: var(--tin-card);
    border: 1px solid var(--tin-border);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: var(--tin-shadow-card);
    margin-bottom: 24px;
}

/* Search input cluster (icon + input) */
.tin-catalog-form__search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 240px;
    min-width: 200px;
}
.tin-catalog-form .tin-search-icon {
    position: absolute;
    left: 14px;
    color: var(--tin-muted-foreground);
    pointer-events: none;
}
.tin-catalog-form input[type="search"] {
    width: 100%;
    height: 40px;
    padding: 0 14px 0 42px;
    border: 1px solid var(--tin-border);
    border-radius: var(--tin-radius-md);
    background: var(--tin-card);
    color: var(--tin-foreground);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tin-catalog-form input[type="search"]:focus {
    outline: none;
    border-color: var(--gcid-primary-color);
    box-shadow: 0 0 0 3px hsl(245 50% 48% / 0.15);
}

/* Native <select> dropdowns — match the search-input chrome with a
 * custom chevron in the right gutter. */
.tin-catalog-form__select {
    flex: 0 0 auto;
    min-width: 160px;
    height: 40px;
    padding: 0 36px 0 14px;
    border: 1px solid var(--tin-border);
    border-radius: var(--tin-radius-md);
    background-color: var(--tin-card);
    color: var(--tin-foreground);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2030' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tin-catalog-form__select:focus {
    outline: none;
    border-color: var(--gcid-primary-color);
    box-shadow: 0 0 0 3px hsl(245 50% 48% / 0.15);
}
.tin-catalog-form__select:hover {
    border-color: var(--gcid-primary-color);
}

/* Submit button — fallback for users who don't have JS, or who tab
 * through dropdowns and want an explicit "go". Selects also submit-on-
 * change via onchange="this.form.submit()" in the rendered HTML. */
.tin-catalog-form__submit {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--tin-radius-md);
    background: var(--gcid-primary-color);
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s ease;
}
.tin-catalog-form__submit:hover {
    filter: brightness(0.92);
}