@import url('https://fonts.googleapis.com/css2?family=Rubik+One&family=Rubik:wght@300;400;500;700&family=Roboto:wght@400;700&display=swap');

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

:root {
    --color-one:         #243061;
    --color-one-hover:   #1a2347;

    --color-two:         #ffffff;
    --color-two-hover:   #f0f0f0;

    --color-three:       #BD9C5C;
    --color-three-hover: #a0833d;

    --color-four:        #646363;
    --color-four-hover:  #4a4a4a;

    --color-five:        #517299;
    --color-five-hover:  #3d5a7a;

    --color-six:         #D4D4D4;
    --color-six-hover:   #b0b0b0;

    --color-seven:       #F4F4F4;
    --color-seven-hover: #e0e0e0;

    --color-eight:       #D55A60;
    --color-eight-hover: #b8404a;

    --color-nine:        #EBEBEB;

    --color-dark:        #1a1a1a;
    --color-star:        #F5A623;
    --color-whatsapp:    #3DAA6A;
    --color-whatsapp-hover: #2e8a54;

    --color-success:     #2e7d32;
    --color-success-bg:  #e8f5e9;
    --color-success-bd:  #a5d6a7;
    --color-error-text:  #c62828;
    --color-error-bg:    #fce4ec;
    --color-error-bd:    #ef9a9a;

    --font-primary:     'Rubik', 'Roboto', sans-serif;
    --font-display:     'Rubik One', 'Roboto', sans-serif;
    --font-size-base:   16px;
    --line-height-base: 1.6;

    --spacing-xs:  4px;
    --spacing-sm:  8px;
    --spacing-md:  16px;
    --spacing-lg:  24px;
    --spacing-xl:  40px;
    --spacing-2xl: 64px;

    --container-max: 1280px;
    --container-pad: 24px;

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

    --transition: 0.2s ease;
}

html { font-size: var(--font-size-base); }

body {
    font-family: var(--font-primary);
    color: var(--color-one);
    background: var(--color-seven);
    line-height: var(--line-height-base);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

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

/* === Container === */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* === WooCommerce global === */
.woocommerce-notices-wrapper,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

/* === Botões === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--transition);
    border: none;
}

.btn--primary {
    background: var(--color-one);
    color: var(--color-two);
}
.btn--primary:hover { background: var(--color-one-hover); opacity: 1; }

.btn--accent {
    background: var(--color-three);
    color: var(--color-two);
}
.btn--accent:hover { background: var(--color-three-hover); opacity: 1; }

.btn--outline {
    background: transparent;
    border: 2px solid var(--color-one);
    color: var(--color-one);
}
.btn--outline:hover { background: var(--color-one); color: var(--color-two); opacity: 1; }

/* === 404 === */
.not-found {
    padding: var(--spacing-2xl) 0;
    background: var(--color-seven);
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.not-found__inner {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}

.not-found__code {
    font-size: 120px;
    font-weight: 700;
    color: var(--color-six);
    line-height: 1;
    margin-bottom: var(--spacing-md);
}

.not-found__title {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-one);
    margin-bottom: var(--spacing-md);
}

.not-found__text {
    font-size: 16px;
    color: var(--color-four);
    line-height: 1.6;
    margin-bottom: var(--spacing-xl);
}

.not-found__actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-xl);
}

.not-found__cats-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-four);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--spacing-sm);
}

.not-found__cats-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    list-style: none;
    padding: 0;
    margin: 0;
}

.not-found__cats-list a {
    display: inline-block;
    padding: 6px 16px;
    border: 1.5px solid var(--color-one);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-one);
    transition: background var(--transition), color var(--transition);
}

.not-found__cats-list a:hover {
    background: var(--color-one);
    color: var(--color-two);
}