/*
Theme Name: Tessa Smits
Theme URI: https://tessasmits.nl
Description: Custom child theme for tessasmits.nl — built on Hello Elementor
Author: Tessa Smits
Author URI: https://tessasmits.nl
Template: hello-elementor
Version: 1.1.51
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ==========================================================================
   GLOBAL — design tokens, resets, shared components
   ========================================================================== */

:root {
    --ts-text:        #0b1220;
    --ts-text-muted:  #7b8794;
    --ts-border:      #bbbbbb;
    --ts-border-light:#e6edf3;
    --ts-bg-panel:    #f4f6fa;
    --ts-bg-input:    #f4f6fa;
    --ts-bg-signing:  #f7f3e9;
    --ts-gold:        #febe0c;
    --ts-gold-hover:  #e6ab0b;
    --ts-accent:      #c43c6b;
    --ts-accent-light:#f6c4d3;
    --ts-success:     #32c48d;
    --ts-discount:    #32c48d;
    --ts-radius-panel:8px;
    --ts-radius-qty:  8px;
    --ts-radius-input:4px;
    --ts-radius-thumb:7px;
    --ts-font:        'Montserrat', sans-serif;
    --ts-font-heading:'Playfair Display', Georgia, serif;
}

html, body {
    overflow-x: clip;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Product description with inline "Lees meer" (matches Figma 925:1588).
   The text is cut after N characters in JS and the toggle is appended inline,
   so it reads as part of the sentence — no clamp, overlay or background. */
body .beschrijving-collapsible {
    margin-bottom: 20px;
}

body .beschrijving-toggle {
    display: inline;
    border: 0;
    margin: 0;
    padding: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    color: #c43c6b;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

/* WooCommerce error notices (shared) */
/* WooCommerce notices — shared style */
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error,
body .woocommerce-notices-wrapper .woocommerce-message,
body .woocommerce-notices-wrapper .woocommerce-error,
body .woocommerce-notices-wrapper .woocommerce-info {
    font-family: var(--ts-font);
    font-size: 14px;
    font-weight: 300;
    color: var(--ts-text);
    line-height: 20px;
    letter-spacing: -0.15px;
    padding: 9px 13px;
    border-radius: var(--ts-radius-input);
    margin: 0 0 16px;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Success / info */
body .woocommerce-message,
body .woocommerce-notices-wrapper .woocommerce-message {
    background: rgba(50, 196, 141, 0.2);
    border: 1px solid var(--ts-success);
}

body .woocommerce-info,
body .woocommerce-notices-wrapper .woocommerce-info {
    background: rgba(50, 196, 141, 0.2);
    border: 1px solid var(--ts-success);
}

/* Error */
body .woocommerce-error,
body .woocommerce-notices-wrapper .woocommerce-error {
    background: rgba(196, 60, 107, 0.15);
    border: 1px solid var(--ts-accent);
}

/* Links inside notices */
body .woocommerce-message a,
body .woocommerce-info a,
body .woocommerce-error a {
    color: var(--ts-text);
    font-weight: 500;
    text-decoration: underline;
}

/* Error list items */
body .woocommerce-error li {
    list-style: none;
}

/* Hide default WC notice icons */
body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before {
    display: none;
}

/* ==========================================================================
   SHARED COMPONENTS — used across multiple pages
   ========================================================================== */

/* Qty control  − [ n ] + */
body .ts-qty-control {
    display: flex;
    align-items: center;
    border: 1px solid var(--ts-text);
    border-radius: var(--ts-radius-qty);
    overflow: hidden;
    flex-shrink: 0;
}

body .ts-qty-btn {
    width: 40px;
    height: 48px;
    background: none;
    border: none;
    box-shadow: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ts-text);
    transition: background 0.15s;
    padding: 0;
    font-family: var(--ts-font);
}

body .ts-qty-btn:hover {
    background: var(--ts-bg-input);
}

body .ts-qty-input {
    width: 46px;
    height: 48px;
    border: none;
    border-left: 1px solid var(--ts-text);
    border-right: 1px solid var(--ts-text);
    text-align: center;
    font-size: 16px;
    font-family: var(--ts-font);
    color: var(--ts-text);
    background: var(--ts-bg-panel);
    -moz-appearance: textfield;
    appearance: textfield;
}

body .ts-qty-input::-webkit-outer-spin-button,
body .ts-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Pill-shaped qty control variant */
body .ts-qty-control--pill {
    border-radius: 100px;
}

/* Trust badges (used on product + cart) */
body .ts-trust-badges {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--ts-border-light);
}

body .ts-trust-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    color: var(--ts-text);
    font-family: var(--ts-font);
    font-weight: 300;
    line-height: 1.6;
}

body .ts-trust-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* Payment logos */
body .ts-payment-logos {
    padding-top: 12px;
    padding-bottom: 48px;
    margin-top: 4px;
}

/* Delivery banner [ts_delivery_banner] */
body .ts-delivery-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #0c6f79;
    color: #f4f6fa;
    font-family: var(--ts-font);
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    letter-spacing: -0.15px;
    padding: 8px 12px;
    text-align: center;
    width: 100%;
}

body .ts-delivery-banner__icon {
    width: 14px;
    height: 12px;
    flex-shrink: 0;
    stroke: #32c48d;
}

body .ts-delivery-banner__text strong {
    font-weight: 700;
}

/* Prevent iOS input zoom (< 16px triggers auto-zoom) */
@supports (-webkit-touch-callout: none) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="url"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }
}