/*
Theme Name:   Hello Montelli
Theme URI:    https://montelli.com.br
Description:  Child theme do Hello Elementor customizado para a Montelli (relojoaria). Mantido pela UPLevel Marketing Digital.
Author:       UPLevel Marketing Digital
Author URI:   https://uplevelbrasil.com.br
Template:     hello-elementor
Version:      0.1.0
Text Domain:  hello-montelli
*/

/* ============================================================
   MONTELLI — Design tokens
   ============================================================ */

:root {
    /* Paleta oficial (variáveis do Figma) */
    --montelli-branco-papel: #F4F4F4;
    --montelli-preto: #1A1A1A;
    --montelli-dourado: #EECD8F;
    --montelli-cinza: #4A4A4A;

    /* Cores complementares observadas no design */
    --montelli-branco: #FFFFFF;
    --montelli-off-white: #F2F2F2;
    --montelli-navy: #0B1A2A;
    --montelli-text-muted: rgba(0, 0, 0, 0.6);
    --montelli-text-soft: rgba(0, 0, 0, 0.8);
    --montelli-overlay-dark: rgba(0, 0, 0, 0.4);
    --montelli-overlay-darker: rgba(0, 0, 0, 0.7);
    --montelli-white-translucent: rgba(255, 255, 255, 0.05);
    --montelli-white-translucent-stronger: rgba(255, 255, 255, 0.15);

    /* Tipografia */
    --montelli-font-display: 'Cormorant SC', Georgia, serif;
    --montelli-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --montelli-font-ui: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --montelli-font-accent: 'Chivo', -apple-system, sans-serif;

    /* Escala tipográfica (do Figma) */
    --montelli-fs-hero-eyebrow: 40px;
    --montelli-fs-hero-headline: 64px;
    --montelli-fs-display-xl: 120px;
    --montelli-fs-display-lg: 60px;
    --montelli-fs-display-md: 48px;
    --montelli-fs-display-sm: 36px;
    --montelli-fs-display-xs: 32px;
    --montelli-fs-display-card-label: 27px;
    --montelli-fs-body-lg: 18px;
    --montelli-fs-body-md: 16px;
    --montelli-fs-body-sm: 14px;
    --montelli-fs-body-xs: 12px;
    --montelli-fs-label: 10px;

    /* Espaçamento */
    --montelli-container-max: 1440px;
    --montelli-container-newsletter: 1200px;

    /* Layout */
    --montelli-header-height: 80px;
    --montelli-radius-pill: 99px;
    --montelli-radius-md: 8px;
    --montelli-radius-sm: 4px;
}

/* ============================================================
   Tipografia global
   ============================================================ */

body {
    font-family: var(--montelli-font-body);
    font-weight: 300;
    color: var(--montelli-preto);
    background: var(--montelli-branco);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.montelli-display {
    font-family: var(--montelli-font-display);
    font-weight: 400;
    letter-spacing: 0;
}

.montelli-display--light { font-weight: 300; }
.montelli-display--medium { font-weight: 500; }

.montelli-eyebrow,
.montelli-label-uppercase {
    font-family: var(--montelli-font-body);
    font-size: var(--montelli-fs-label);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--montelli-text-soft);
}

/* ============================================================ Utilities ============================================================ */

.montelli-container { width: 100%; max-width: var(--montelli-container-max); margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.montelli-container--narrow { max-width: var(--montelli-container-newsletter); }

.montelli-btn-pill { display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 100px; padding: 10px 16px; border-radius: var(--montelli-radius-md); background: var(--montelli-white-translucent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 0.5px solid currentColor; color: var(--montelli-branco); font-family: var(--montelli-font-accent); font-weight: 200; font-size: var(--montelli-fs-body-md); text-decoration: none; transition: background 0.2s ease; cursor: pointer; }
.montelli-btn-pill:hover { background: var(--montelli-white-translucent-stronger); }
.montelli-btn-pill--dark { color: var(--montelli-preto); border-color: var(--montelli-preto); background: transparent; }
.montelli-btn-pill--dark:hover { background: rgba(0, 0, 0, 0.05); }

.montelli-filter-pill { display: inline-flex; align-items: center; justify-content: center; height: 28px; min-width: 100px; padding: 4px 8px; border-radius: var(--montelli-radius-pill); border: 0.5px solid var(--montelli-navy); background: transparent; font-family: var(--montelli-font-accent); font-weight: 100; font-size: var(--montelli-fs-body-sm); color: rgba(11, 26, 42, 0.8); cursor: pointer; transition: background 0.2s ease; }
.montelli-filter-pill[aria-pressed="true"], .montelli-filter-pill.is-active { background: rgba(11, 26, 42, 0.15); backdrop-filter: blur(8px); }

/* ============================================================ Header ============================================================ */
.montelli-header { position: absolute; top: 0; left: 0; width: 100%; height: var(--montelli-header-height); z-index: 100; color: var(--montelli-branco-papel); }
.montelli-header__inner { display: flex; align-items: center; height: 100%; padding: 0 24px; }
.montelli-header__menu-toggle { width: 30px; height: 30px; background: transparent; border: 0; cursor: pointer; padding: 0; }
.montelli-header__logo { flex: 0 0 193px; text-align: center; }
.montelli-header__actions { margin-left: auto; display: flex; align-items: center; gap: 16px; font-family: var(--montelli-font-ui); font-size: var(--montelli-fs-body-sm); }
.montelli-header__search-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 16px; background: var(--montelli-white-translucent-stronger); border-radius: var(--montelli-radius-pill); color: var(--montelli-branco-papel); cursor: pointer; }

/* ============================================================ Hero ============================================================ */
.montelli-hero { position: relative; min-height: 800px; color: var(--montelli-branco); overflow: hidden; }
.montelli-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.montelli-hero__inner { position: relative; z-index: 1; display: flex; align-items: center; min-height: 800px; max-width: var(--montelli-container-max); margin: 0 auto; }
.montelli-hero__left { flex: 1 0 0; max-width: 600px; padding: 120px 80px; display: flex; flex-direction: column; gap: 32px; }
.montelli-hero__eyebrow { font-family: var(--montelli-font-display); font-size: var(--montelli-fs-hero-eyebrow); line-height: 0.9; font-weight: 400; }
.montelli-hero__headline { font-family: var(--montelli-font-display); font-size: var(--montelli-fs-hero-headline); line-height: 0.9; font-weight: 400; margin: 0; }
.montelli-hero__subhead { font-family: var(--montelli-font-ui); font-weight: 200; font-size: var(--montelli-fs-body-md); }
.montelli-hero__right { flex: 1 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; padding: 32px 20px; }
.montelli-hero__right-title { font-family: var(--montelli-font-display); font-size: var(--montelli-fs-hero-eyebrow); line-height: 0.9; text-align: center; }
.montelli-line-cards { display: flex; gap: 32px; width: 100%; max-width: 782px; justify-content: space-between; }
.montelli-line-card { position: relative; flex: 1 0 0; max-width: 375px; min-height: 375px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 24px; overflow: hidden; background-size: cover; background-position: center; text-align: center; color: var(--montelli-branco); }
.montelli-line-card::before { content: ""; position: absolute; inset: 0; background: var(--montelli-overlay-dark); z-index: 0; }
.montelli-line-card__label, .montelli-line-card__name { position: relative; z-index: 1; width: 100%; }
.montelli-line-card__label { font-family: var(--montelli-font-display); font-weight: 300; font-size: 10.5px; }
.montelli-line-card__name { font-family: var(--montelli-font-display); font-weight: 400; font-size: var(--montelli-fs-display-card-label); }

/* ============================================================ Banner full-bleed ============================================================ */
.montelli-banner { position: relative; width: 100%; min-height: 600px; overflow: hidden; color: var(--montelli-branco); }
.montelli-banner__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.montelli-banner__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, var(--montelli-overlay-darker) 47%, transparent 78%); z-index: 1; }
.montelli-banner__content { position: relative; z-index: 2; max-width: var(--montelli-container-max); margin: 0 auto; padding: 64px; padding-right: 300px; min-height: 600px; display: flex; flex-direction: column; justify-content: center; }
.montelli-banner__title-xl { font-family: var(--montelli-font-display); font-weight: 500; font-size: var(--montelli-fs-display-xl); line-height: 1; text-transform: uppercase; margin: 0 0 24px; }
.montelli-banner__text { font-family: var(--montelli-font-body); font-weight: 300; font-size: var(--montelli-fs-body-md); line-height: 1.6; max-width: 600px; margin: 0 0 16px; }
.montelli-banner__link { font-family: var(--montelli-font-ui); font-weight: 100; font-size: var(--montelli-fs-body-sm); color: var(--montelli-branco); text-decoration: underline; }

/* ============================================================ Coleções ============================================================ */
.montelli-collections { background: linear-gradient(90deg, rgba(11, 26, 42, 0.05), rgba(11, 26, 42, 0.05)), var(--montelli-branco); padding: 32px 10px; }
.montelli-collections__title { font-family: var(--montelli-font-display); font-weight: 300; font-size: var(--montelli-fs-display-md); color: var(--montelli-navy); text-align: center; margin: 0 auto 16px; }
.montelli-collections__filters { display: flex; gap: 10px; justify-content: center; margin-bottom: 32px; }
.montelli-collections__grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: var(--montelli-container-max); margin: 0 auto; padding: 10px; }
.montelli-product-card { flex: 0 0 460px; width: 460px; min-height: 630px; display: flex; flex-direction: column; justify-content: space-between; background: var(--montelli-branco); }
.montelli-product-card__image { height: 400px; background-size: cover; background-position: center; background-color: var(--montelli-branco); }
.montelli-product-card__body { display: flex; flex-direction: column; gap: 32px; padding: 16px; }
.montelli-product-card__favorite { width: 20px; height: 20px; background: transparent; border: 0; cursor: pointer; padding: 0; }
.montelli-product-card__category { font-family: var(--montelli-font-body); font-weight: 300; font-size: var(--montelli-fs-body-xs); color: var(--montelli-text-muted); line-height: 1; }
.montelli-product-card__name { font-family: var(--montelli-font-display); font-weight: 400; font-size: var(--montelli-fs-display-sm); color: var(--montelli-preto); line-height: 1; margin: 4px 0 0; }
.montelli-product-card__specs { font-family: var(--montelli-font-body); font-weight: 300; font-size: var(--montelli-fs-body-sm); color: var(--montelli-text-muted); line-height: 1; }
.montelli-product-card__price { font-family: var(--montelli-font-body); font-weight: 400; font-size: var(--montelli-fs-body-sm); color: var(--montelli-preto); line-height: 1; }

/* ============================================================ Banner emocional ============================================================ */
.montelli-banner-emotion { position: relative; min-height: 900px; color: var(--montelli-branco); overflow: hidden; }
.montelli-banner-emotion__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.montelli-banner-emotion__inner { position: relative; z-index: 1; display: flex; gap: 10px; max-width: var(--montelli-container-max); margin: 0 auto; min-height: 900px; padding: 64px 32px; align-items: stretch; }
.montelli-banner-emotion__left, .montelli-banner-emotion__right { flex: 1 0 0; display: flex; flex-direction: column; }
.montelli-banner-emotion__left { justify-content: flex-start; padding-right: 300px; }
.montelli-banner-emotion__right { justify-content: flex-end; align-items: flex-end; text-align: right; }
.montelli-banner-emotion__title { font-family: var(--montelli-font-display); font-weight: 300; font-size: var(--montelli-fs-display-lg); line-height: 1; max-width: 600px; }
.montelli-banner-emotion__subtitle { font-family: var(--montelli-font-display); font-weight: 300; font-size: var(--montelli-fs-body-lg); max-width: 600px; margin-top: 16px; }

/* ============================================================ Newsletter ============================================================ */
.montelli-newsletter { background: var(--montelli-off-white); padding: 64px 10px; }
.montelli-newsletter__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: var(--montelli-container-newsletter); margin: 0 auto; }
.montelli-newsletter__title { font-family: var(--montelli-font-display); font-weight: 500; font-size: var(--montelli-fs-display-xs); text-transform: uppercase; margin: 0; }
.montelli-newsletter__subtitle { font-family: var(--montelli-font-body); font-weight: 400; font-size: var(--montelli-fs-body-md); color: var(--montelli-text-muted); max-width: 400px; margin: 8px 0 0; }
.montelli-newsletter__form { flex: 1 0 0; max-width: 650px; display: flex; align-items: center; border-bottom: 1px solid rgba(0, 0, 0, 0.3); height: 44px; }
.montelli-newsletter__input { flex: 1 0 0; border: 0; background: transparent; font-family: var(--montelli-font-ui); font-size: var(--montelli-fs-body-md); padding: 12px 0; outline: 0; }
.montelli-newsletter__submit { background: transparent; border: 0; font-family: var(--montelli-font-ui); font-size: var(--montelli-fs-body-md); color: var(--montelli-preto); cursor: pointer; padding: 12px 16px; }

/* ============================================================ Footer ============================================================ */
.montelli-footer { background: var(--montelli-off-white); padding: 16px 10px; }
.montelli-footer__inner { max-width: var(--montelli-container-newsletter); margin: 0 auto; display: flex; flex-direction: column; gap: 64px; padding: 16px 0; }
.montelli-footer__top { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.montelli-footer__brand-text { max-width: 385px; display: flex; flex-direction: column; gap: 16px; }
.montelli-footer__brand-text p { font-family: var(--montelli-font-body); font-size: var(--montelli-fs-body-md); color: var(--montelli-text-muted); letter-spacing: 1px; line-height: 1.6; margin: 0; }
.montelli-footer__brand-title { font-family: var(--montelli-font-display); font-weight: 500; font-size: var(--montelli-fs-display-xs); text-transform: uppercase; letter-spacing: 1px; color: var(--montelli-preto); margin: 0; }
.montelli-footer__benefits { display: flex; gap: 16px; align-items: center; }
.montelli-footer__benefit { width: 160px; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.montelli-footer__benefit-text { font-family: var(--montelli-font-body); font-size: var(--montelli-fs-body-sm); letter-spacing: 1px; line-height: 1.6; color: var(--montelli-preto); }
.montelli-footer__benefit-icon { width: 60px; height: 60px; margin: 0 auto; }
.montelli-footer__cols { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.montelli-footer__col { flex: 1 0 0; max-width: 491px; }
.montelli-footer__col h4 { font-family: var(--montelli-font-body); font-weight: 400; font-size: var(--montelli-fs-label); text-transform: uppercase; letter-spacing: 1px; color: var(--montelli-text-soft); margin: 0 0 24px; }
.montelli-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.montelli-footer__col a { font-family: var(--montelli-font-body); font-size: var(--montelli-fs-body-xs); color: var(--montelli-text-soft); text-decoration: none; }
.montelli-footer__logo { max-width: 386px; margin: 0 auto; }
.montelli-footer__copyright { display: flex; align-items: center; justify-content: center; gap: 4px; font-family: var(--montelli-font-body); font-size: var(--montelli-fs-body-xs); color: var(--montelli-preto); }

/* ============================================================ WooCommerce overrides ============================================================ */
.woocommerce .price { font-family: var(--montelli-font-body); font-weight: 400; color: var(--montelli-preto); }
.woocommerce button.button.alt { background: var(--montelli-preto); color: var(--montelli-branco); font-family: var(--montelli-font-accent); font-weight: 200; border-radius: var(--montelli-radius-md); text-transform: none; }

/* ============================================================ Responsivo ============================================================ */
@media (max-width: 1024px) {
    .montelli-hero__inner { flex-direction: column; padding: 80px 24px; }
    .montelli-hero__left, .montelli-hero__right { max-width: 100%; padding: 24px 0; }
    .montelli-banner__content { padding-right: 64px; }
    .montelli-banner__title-xl { font-size: 80px; }
    .montelli-banner-emotion__inner { flex-direction: column; padding: 64px 24px; }
    .montelli-banner-emotion__left { padding-right: 0; }
    .montelli-banner-emotion__right { align-items: flex-start; text-align: left; }
    .montelli-footer__top { flex-direction: column; align-items: flex-start; }
    .montelli-footer__benefits { flex-wrap: wrap; justify-content: center; }
    .montelli-newsletter__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
    .montelli-hero__headline { font-size: 40px; }
    .montelli-hero__eyebrow { font-size: 28px; }
    .montelli-banner__title-xl { font-size: 48px; }
    .montelli-banner-emotion__title { font-size: 40px; }
    .montelli-product-card { flex: 1 1 100%; width: 100%; }
    .montelli-collections__title { font-size: 32px; }
    .montelli-footer__cols { flex-direction: column; }
}


/* ============================================================
   PATCH 2026-05-25: SVG sizing constraints + header overlay
   ============================================================ */

/* Default constraint for inline SVGs inside Montelli components */
.montelli-header svg,
.montelli-footer svg,
.montelli-product-card svg,
.montelli-line-card svg {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/* Header — explicit icon sizes */
.montelli-header { background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 60%, transparent 100%); }
.montelli-header__menu-toggle svg { width: 30px; height: 30px; }
.montelli-header__logo svg { width: 100%; max-width: 193px; height: auto; }
.montelli-header__search-pill svg { width: 16px; height: 16px; }
.montelli-header__actions a svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Pill button (Conheça a Montelli) — make full-width text centered */
.montelli-btn-pill { white-space: nowrap; }

/* Hero cards larger and clearer */
.montelli-line-card { box-shadow: 0 4px 24px rgba(0,0,0,0.3); }
.montelli-line-card__label { letter-spacing: 2px; }

/* Product card favorite */
.montelli-product-card__favorite svg { width: 20px; height: 20px; }

/* Footer benefit icons — strict 60x60 box */
.montelli-footer__benefit-icon { display: flex; align-items: center; justify-content: center; }
.montelli-footer__benefit-icon svg { width: 36px; height: 36px; }

/* Footer logos */
.montelli-footer__logo svg { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 auto; }
.montelli-footer__copyright svg { width: 15px; height: 12px; vertical-align: middle; }

/* Banner emotion — fix horizontal overflow on right column */
.montelli-banner-emotion__inner { overflow: visible; }
.montelli-banner-emotion__right { padding-right: 32px; padding-left: 32px; min-width: 0; }
.montelli-banner-emotion__title { white-space: normal; max-width: 100%; }

/* Banner emotion left padding so text doesn't crowd the watch */
.montelli-banner-emotion__left { padding-left: 32px; padding-right: 64px; }
.montelli-banner-emotion__left .montelli-banner-emotion__title { font-size: 56px; }

/* Hero right column ensures cards aren't too small */
.montelli-hero__right { min-width: 0; }
.montelli-line-cards { min-width: 0; }

/* Hide WP comment-feed and other default WP elements that may leak in */
.elementor-page .montelli-header { z-index: 1000; }