/**
 * EcoConsumo Design System v0.1
 * Camada visual global, independente do tema, WooCommerce e Dokan.
 */

:root {
    --eco-green-950: #17351f;
    --eco-green-900: #21482b;
    --eco-green-700: #397247;
    --eco-green-500: #65a844;
    --eco-lime: #9acb3b;
    --eco-sun: #e4a72b;
    --eco-cream: #f4f0e7;
    --eco-sand: #ded4c1;
    --eco-ink: #1c211d;
    --eco-gray-700: #555b56;
    --eco-gray-400: #a7ada7;
    --eco-gray-200: #dedfdc;
    --eco-white: #ffffff;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --eco-container: 1440px;
    --eco-content: 1280px;
    --eco-gutter: clamp(20px, 4vw, 64px);

    --heading-sm: 28px;
    --heading-md: 40px;
    --heading-lg: 58px;
    --heading-xl: clamp(54px, 7vw, 96px);

    --eco-font-display: "Archivo Black", Impact, sans-serif;
    --eco-font-interface: "Source Sans 3", "Segoe UI", sans-serif;
    --eco-transition: 160ms ease;
}

html {
    color-scheme: light;
    scroll-behavior: smooth;
}

body {
    background: var(--eco-cream);
    color: var(--eco-ink);
    font-family: var(--eco-font-interface);
    font-size: 17px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
    font-family: var(--eco-font-interface);
}

h1,
h2,
h3,
.eco-heading,
.woocommerce-products-header__title,
.woocommerce div.product .product_title {
    color: var(--eco-green-950);
    font-family: var(--eco-font-display);
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: .95;
    text-wrap: balance;
}

h1 { font-size: clamp(42px, 5.5vw, var(--heading-lg)); }
h2 { font-size: clamp(32px, 4vw, var(--heading-md)); }
h3 { font-size: clamp(24px, 3vw, var(--heading-sm)); }
h4,
h5,
h6 {
    color: var(--eco-ink);
    font-family: var(--eco-font-interface);
    font-weight: 700;
    line-height: 1.15;
}

.eco-heading-xl { font-size: var(--heading-xl); }
.eco-heading-lg { font-size: var(--heading-lg); }
.eco-heading-md { font-size: var(--heading-md); }
.eco-heading-sm { font-size: var(--heading-sm); }

/* O dashboard é uma interface de trabalho: mantém Source Sans 3. */
.dokan-dashboard h1,
.dokan-dashboard h2,
.dokan-dashboard h3,
.dokan-dashboard .dokan-dashboard-header h1 {
    font-family: var(--eco-font-interface);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.15;
}

a {
    color: var(--eco-green-900);
    text-decoration-color: color-mix(in srgb, var(--eco-green-900) 45%, transparent);
    text-underline-offset: .18em;
    transition: color var(--eco-transition), text-decoration-color var(--eco-transition);
}

a:hover {
    color: var(--eco-green-700);
    text-decoration-color: currentColor;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--eco-sun);
    outline-offset: 3px;
}

.eco-container,
.eco-content {
    box-sizing: border-box;
    margin-inline: auto;
    padding-inline: var(--eco-gutter);
    width: 100%;
}

.eco-container { max-width: var(--eco-container); }
.eco-content { max-width: var(--eco-content); }

.eco-button-primary,
.eco-button-secondary,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.dokan-btn-theme {
    align-items: center;
    appearance: none;
    border: 1px solid transparent;
    border-radius: 5px;
    box-shadow: none;
    cursor: pointer;
    display: inline-flex;
    font-family: var(--eco-font-interface);
    font-size: 16px;
    font-weight: 700;
    justify-content: center;
    line-height: 1.15;
    min-height: 48px;
    padding: 12px 22px;
    text-decoration: none;
    transition: background-color var(--eco-transition), border-color var(--eco-transition), color var(--eco-transition), transform var(--eco-transition);
}

.eco-button-primary,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.dokan-btn-theme {
    background: var(--eco-green-900);
    border-color: var(--eco-green-900);
    color: var(--eco-white);
}

.eco-button-primary:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.dokan-btn-theme:hover {
    background: var(--eco-green-700);
    border-color: var(--eco-green-700);
    color: var(--eco-white);
    transform: translateY(-1px);
}

.eco-button-secondary {
    background: transparent;
    border-color: var(--eco-green-950);
    color: var(--eco-green-950);
}

.eco-button-secondary:hover {
    background: var(--eco-sand);
    border-color: var(--eco-green-950);
    color: var(--eco-green-950);
}

.eco-button-primary:disabled,
.eco-button-secondary:disabled,
.woocommerce :disabled.button {
    cursor: not-allowed;
    opacity: .56;
    transform: none;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]), select, textarea),
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.dokan-form-control {
    background: var(--eco-white);
    border: 1px solid var(--eco-gray-400);
    border-radius: var(--radius-sm);
    box-shadow: none;
    box-sizing: border-box;
    color: var(--eco-ink);
    font-size: 16px;
    line-height: 1.3;
    min-height: 48px;
    padding: 11px 13px;
    transition: border-color var(--eco-transition), box-shadow var(--eco-transition);
}

textarea,
.woocommerce form .form-row textarea { min-height: 128px; }

:where(input, select, textarea)::placeholder { color: var(--eco-gray-700); opacity: .72; }

:where(input, select, textarea):focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.dokan-form-control:focus {
    border-color: var(--eco-green-700);
    box-shadow: 0 0 0 3px rgb(57 114 71 / 16%);
    outline: 0;
}

:where(label, .form-row label, .dokan-form-group label) {
    color: var(--eco-ink);
    font-family: var(--eco-font-interface);
    font-weight: 600;
}

.eco-label {
    align-items: center;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    color: var(--eco-green-900);
    display: inline-flex;
    font-family: var(--eco-font-interface);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1;
    min-height: 26px;
    padding: 6px 9px;
    text-transform: uppercase;
}

.eco-label--sun { color: #76500a; background: #f8e9c7; }
.eco-label--green { color: var(--eco-green-950); background: #e1edd9; }
.eco-label--neutral { color: var(--eco-gray-700); background: var(--eco-white); }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: var(--eco-white);
    border: 1px solid var(--eco-gray-200);
    border-top: 4px solid var(--eco-green-700);
    border-radius: var(--radius-sm);
    box-shadow: none;
    color: var(--eco-ink);
    font-family: var(--eco-font-interface);
    padding: 16px 20px 16px 52px;
}

.woocommerce-info { border-top-color: var(--eco-sun); }
.woocommerce-error { border-top-color: #a53b2e; }
.woocommerce-message::before { color: var(--eco-green-700); }
.woocommerce-info::before { color: #8a5d09; }
.woocommerce-error::before { color: #a53b2e; }

.woocommerce ul.products {
    gap: clamp(18px, 2.5vw, 32px);
}

.woocommerce ul.products li.product {
    background: var(--eco-white);
    border: 1px solid var(--eco-gray-200);
    border-radius: var(--radius-md);
    box-shadow: none;
    box-sizing: border-box;
    overflow: hidden;
    padding: clamp(12px, 1.5vw, 20px);
    transition: border-color var(--eco-transition), transform var(--eco-transition);
}

.woocommerce ul.products li.product:hover {
    border-color: var(--eco-gray-400);
    transform: translateY(-2px);
}

.woocommerce ul.products li.product a img {
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: var(--eco-ink);
    font-family: var(--eco-font-interface);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.15;
}

.woocommerce ul.products li.product .price {
    color: var(--eco-green-900);
    font-family: var(--eco-font-interface);
    font-size: 18px;
    font-weight: 700;
}

.ecoconsumo-product-details {
    background: var(--eco-white);
    border: 1px solid var(--eco-gray-200);
    border-radius: var(--radius-md);
    margin-block: 24px;
    padding: clamp(18px, 3vw, 30px);
}

.ecoconsumo-product-details h2 { font-size: var(--heading-sm); }
.ecoconsumo-product-details dt { color: var(--eco-gray-700); margin-top: 12px; }
.ecoconsumo-product-details dd { margin: 2px 0 0; }

@media (max-width: 767px) {
    :root { --eco-gutter: 20px; }
    body { font-size: 16px; }
    h1 { font-size: 40px; }
    h2 { font-size: 32px; }
    h3 { font-size: 25px; }
    .eco-heading-xl { font-size: 48px; }
    .eco-heading-lg { font-size: 40px; }
    .eco-heading-md { font-size: 32px; }
    .eco-button-primary,
    .eco-button-secondary { width: 100%; }
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error { padding: 14px 14px 14px 42px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        scroll-behavior: auto;
        transition-duration: .01ms;
    }
}