/*
Theme Name: E-Chele
Description: E-Chele client presentation layer for Commerce Platform.
Author: Commerce Platform Team
Template: cp-platform
Version: 0.2.0
Requires at least: 7.0
Requires PHP: 8.1
Text Domain: e-chele
License: Proprietary
*/

:root {
    --cp-color-background: #fbfaf7;
    --cp-color-surface: #efede8;
    --cp-color-text: #171717;
    --cp-color-muted: #67645f;
    --cp-color-border: #d9d4cb;
    --cp-color-accent: #171717;
    --cp-color-on-accent: #fff;
    --ec-soft-rose: #c9a7a5;
    --ec-warm-stone: #9b9994;
    --ec-display: Georgia, "Times New Roman", serif;
}

body {
    background: var(--cp-color-background);
}

.cp-header {
    position: sticky;
    top: 0;
    backdrop-filter: blur(1rem);
}

.cp-brand__name,
.cp-footer__brand {
    font-family: var(--ec-display);
    font-weight: 500;
    letter-spacing: 0.18em;
}

.ec-announcement {
    padding: 0.55rem 1rem;
    background: var(--cp-color-text);
    color: var(--cp-color-background);
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
}

.ec-home {
    padding: 0;
}

.ec-hero {
    position: relative;
    display: grid;
    min-height: min(48rem, 82vh);
    place-items: center;
    padding: clamp(5rem, 13vw, 10rem) 1rem;
    background:
        radial-gradient(circle at 78% 30%, rgb(201 167 165 / 42%), transparent 30%),
        radial-gradient(circle at 18% 78%, rgb(155 153 148 / 35%), transparent 32%),
        linear-gradient(145deg, #f9f6f1 5%, #dfd9d0 100%);
    text-align: center;
}

.ec-hero__media {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.52;
}

.ec-hero__content {
    position: relative;
    z-index: 1;
    max-width: 56rem;
}

.ec-eyebrow {
    margin: 0 0 1.25rem;
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.ec-hero h1,
.ec-story h2,
.ec-section-heading h2 {
    margin: 0;
    font-family: var(--ec-display);
    font-weight: 400;
    line-height: 0.95;
}

.ec-hero h1 {
    font-size: clamp(4rem, 14vw, 9.5rem);
}

.ec-hero__lead {
    max-width: 42rem;
    margin: 1.75rem auto 0;
    color: var(--cp-color-muted);
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
}

.ec-button {
    display: inline-flex;
    min-height: 3.2rem;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.6rem;
    margin-top: 2rem;
    border: 1px solid var(--cp-color-text);
    background: var(--cp-color-text);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 750;
    letter-spacing: 0.11em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 180ms ease, color 180ms ease;
}

.ec-button:hover {
    background: transparent;
    color: var(--cp-color-text);
}

.ec-promise {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-block: 1.25rem;
    border-bottom: 1px solid var(--cp-color-border);
}

.ec-promise p {
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.ec-promise p + p {
    border-left: 1px solid var(--cp-color-border);
}

.ec-section {
    padding-block: clamp(4rem, 9vw, 8rem);
}

.ec-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2.5rem;
}

.ec-section-heading h2,
.ec-story h2 {
    font-size: clamp(2.8rem, 7vw, 5.5rem);
}

.ec-section-heading a {
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ec-products ul.products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.ec-products ul.products::before,
.ec-products ul.products::after {
    display: none;
}

.ec-products ul.products li.product {
    float: none;
    width: auto;
    margin: 0;
}

.ec-products ul.products li.product a img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--cp-color-surface);
}

.ec-products .woocommerce-loop-product__title {
    margin-bottom: 0.25rem;
    font-family: var(--ec-display);
    font-size: 1.25rem;
    font-weight: 400;
}

.cp-commerce h1,
.cp-commerce h2,
.woocommerce-account .cp-entry__header h1 {
    font-family: var(--ec-display);
    font-weight: 400;
}

.cp-commerce ul.products li.product a img {
    transition: transform 220ms ease;
}

.cp-commerce ul.products li.product a:hover img {
    transform: scale(1.015);
}

.woocommerce div.product .product_title,
.woocommerce div.product .woocommerce-tabs h2 {
    font-family: var(--ec-display);
    font-weight: 400;
}

.woocommerce div.product .summary {
    align-self: start;
    padding-top: clamp(0rem, 3vw, 2rem);
}

.woocommerce div.product form.cart .variations label {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.woocommerce-checkout .wc-block-checkout,
.woocommerce-cart .wc-block-cart {
    --wp--preset--color--contrast: var(--cp-color-text);
}

.ec-story {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(3rem, 8vw, 8rem);
    align-items: center;
}

.ec-story__mark {
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: var(--cp-color-text);
    color: #fff;
    font-family: var(--ec-display);
    font-size: clamp(4rem, 12vw, 9rem);
    font-style: italic;
}

.ec-story__copy p {
    max-width: 38rem;
    color: var(--cp-color-muted);
    font-size: 1.1rem;
}

.ec-testimonials {
    background: var(--cp-color-text);
    color: #fff;
}

.ec-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgb(255 255 255 / 25%);
}

.ec-testimonials blockquote {
    min-height: 14rem;
    padding: 2.5rem;
    margin: 0;
    background: var(--cp-color-text);
    font-family: var(--ec-display);
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.25;
}

@media (max-width: 48rem) {
    .ec-promise,
    .ec-products ul.products,
    .ec-testimonials__grid,
    .ec-story {
        grid-template-columns: 1fr;
    }

    .ec-promise p + p {
        border-top: 1px solid var(--cp-color-border);
        border-left: 0;
    }

    .ec-section-heading {
        align-items: start;
        flex-direction: column;
    }

    .ec-testimonials blockquote {
        min-height: auto;
    }
}