/** Shopify CDN: Minification failed Line 415:0 Unexpected "}" **/ /* ============================================================ Crowfy — Padronização de hierarquia tipográfica ============================================================ Arquivo próprio, fora do base.css do tema (Meka/Muup), para sobreviver a atualizações do desenvolvedor do tema. Todos os valores vêm de variáveis CSS geradas no theme.liquid a partir das configurações em "Hierarquia de textos". Nenhum valor é fixo aqui — para ajustar, use o editor de tema. Escopo: as regras de produto só valem dentro de .template-product, evitando efeito colateral em home, coleção e páginas. ============================================================ */ /* ---------------------------------------------------------- 1. Breadcrumb — global O tema aplicava 1.6rem (16px), mesmo tamanho do corpo de texto, o que competia visualmente com o conteúdo. ---------------------------------------------------------- */ /* ATENÇÃO À ESPECIFICIDADE: 'component-breadcrumb.css' é carregado pelo snippet breadcrumbs.liquid, ou seja, DENTRO do body — depois deste arquivo, que está no . Com a mesma especificidade, a regra do tema venceria por vir depois. Por isso todos os seletores abaixo usam duas classes. */ .breadcrumbs .breadcrumbs__item, .breadcrumbs .breadcrumbs__link, .breadcrumbs .breadcrumbs-nav, .breadcrumbs__list .breadcrumbs__item, .breadcrumbs__list .breadcrumbs__link, .breadcrumbs__list-top .breadcrumbs__item, .breadcrumbs__list-top .breadcrumbs__link, .collection-hero___breadcrumbs .breadcrumbs__item, .collection-hero___breadcrumbs .breadcrumbs__link, .collection-hero___breadcrumbs .breadcrumbs__list { font-size: var(--typo-breadcrumb-size-mb); font-weight: var(--typo-breadcrumb-weight); line-height: 1.4; } .breadcrumbs .breadcrumbs__item .icon, .breadcrumbs__list .breadcrumbs__item .icon { width: 0.7em; margin-right: 0.4em; } .breadcrumbs { padding: 1.8rem 0; gap: 1.5rem; } @media only screen and (min-width: 750px) { .breadcrumbs .breadcrumbs__item, .breadcrumbs .breadcrumbs__link, .breadcrumbs .breadcrumbs-nav, .breadcrumbs__list .breadcrumbs__item, .breadcrumbs__list .breadcrumbs__link, .breadcrumbs__list-top .breadcrumbs__item, .breadcrumbs__list-top .breadcrumbs__link, .collection-hero___breadcrumbs .breadcrumbs__item, .collection-hero___breadcrumbs .breadcrumbs__link, .collection-hero___breadcrumbs .breadcrumbs__list { font-size: var(--typo-breadcrumb-size); } .breadcrumbs { padding: 2.2rem 0; } } /* ---------------------------------------------------------- 2. Cores — títulos em preto, corpo em cinza chumbo Aplicado só onde o esquema de cores é claro. Em seções de fundo escuro (scheme-3, 4, 6, 9) o texto permanece claro, senão ficaria ilegível. ---------------------------------------------------------- */ .template-product .color-scheme-1 h1, .template-product .color-scheme-1 h2, .template-product .color-scheme-1 h3, .template-product .color-scheme-1 h4, .template-product .color-scheme-1 h5, .template-product .color-scheme-1 h6, .template-product .color-scheme-2 h1, .template-product .color-scheme-2 h2, .template-product .color-scheme-2 h3, .template-product .color-scheme-2 h4, .template-product .color-scheme-2 h5, .template-product .color-scheme-2 h6, .template-product .color-scheme-7 h1, .template-product .color-scheme-7 h2, .template-product .color-scheme-7 h3, .template-product .color-scheme-7 h4, .template-product .color-scheme-7 h5, .template-product .color-scheme-7 h6, .template-product .color-scheme-1 .section-title, .template-product .color-scheme-2 .section-title, .template-product .color-scheme-7 .section-title, .template-product .color-scheme-1 .accordion__title, .template-product .color-scheme-2 .accordion__title, .template-product .color-scheme-7 .accordion__title, .template-product .product__title h1, .template-product .product__title h2 { color: var(--typo-heading-color); } .template-product .color-scheme-1 .product__description, .template-product .color-scheme-1 .product__text, .template-product .color-scheme-1 .section-description, .template-product .color-scheme-1 .accordion__content, .template-product .color-scheme-1 .image-with-text__text, .template-product .color-scheme-2 .product__description, .template-product .color-scheme-2 .product__text, .template-product .color-scheme-2 .section-description, .template-product .color-scheme-2 .accordion__content, .template-product .color-scheme-2 .image-with-text__text, .template-product .color-scheme-7 .product__description, .template-product .color-scheme-7 .product__text, .template-product .color-scheme-7 .section-description, .template-product .color-scheme-7 .accordion__content, .template-product .color-scheme-7 .image-with-text__text, .template-product .feature-column__description, .template-product .pickup-description, .template-product .delivery-description { color: var(--typo-body-color); } /* ---------------------------------------------------------- 3. Título do produto (H1) Referência da hierarquia da página. Antes o bloco usava a classe .h3 (20px), menor que vários subtítulos da página. ---------------------------------------------------------- */ .template-product .product__title h1, .template-product .product__title h2, .template-product .product__title .h0, .template-product .product__title .h1, .template-product .product__title .h2, .template-product .product__title .h3, .template-product .product__title .h4, .template-product .product__title .h5, .template-product .product__title .h6 { font-size: var(--typo-pdp-title-size-mb); font-weight: var(--typo-pdp-title-weight); line-height: 1.2; } @media only screen and (min-width: 750px) { .template-product .product__title h1, .template-product .product__title h2, .template-product .product__title .h0, .template-product .product__title .h1, .template-product .product__title .h2, .template-product .product__title .h3, .template-product .product__title .h4, .template-product .product__title .h5, .template-product .product__title .h6 { font-size: var(--typo-pdp-title-size); } } /* ---------------------------------------------------------- 4. Subtítulos de seção (H2) Unifica Especificações, FAQ, Produtos relacionados e blocos de conteúdo, que estavam entre h2 (22px) e h3 (20px). ---------------------------------------------------------- */ .template-product .section-title, .template-product .section-heading .section-title, .template-product .collapsible-content--heading, .template-product .image-with-text__heading, .template-product .related-products .section-title, .template-product .complementary-products__heading, .template-product .product__accordion-title, .template-product .product-specifications .section-title, .template-product .help-feedback .section-title { font-size: var(--typo-pdp-subtitle-size-mb) !important; font-weight: var(--typo-pdp-subtitle-weight); line-height: 1.25; } @media only screen and (min-width: 750px) { .template-product .section-title, .template-product .section-heading .section-title, .template-product .collapsible-content--heading, .template-product .image-with-text__heading, .template-product .related-products .section-title, .template-product .complementary-products__heading, .template-product .product__accordion-title, .template-product .product-specifications .section-title, .template-product .help-feedback .section-title { font-size: var(--typo-pdp-subtitle-size) !important; } } /* ---------------------------------------------------------- 5. Títulos de sanfona (H3) Linhas de Descrição / Especificações / FAQ, que oscilavam entre h4 (18px) e h5 (16px) conforme o bloco. ---------------------------------------------------------- */ .template-product .accordion__title, .template-product .accordion summary .accordion__title, .template-product .product__accordion .accordion__title { font-size: var(--typo-pdp-accordion-size-mb) !important; font-weight: var(--typo-pdp-accordion-weight); line-height: 1.35; } @media only screen and (min-width: 750px) { .template-product .accordion__title, .template-product .accordion summary .accordion__title, .template-product .product__accordion .accordion__title { font-size: var(--typo-pdp-accordion-size) !important; } } /* ---------------------------------------------------------- 6. Corpo de texto Fonte única para descrição, metafields e textos auxiliares. A descrição usava 1.8rem fixo, o bloco de metafield usava .text--small (1.4/1.6rem) e os blocos de conteúdo herdavam outro tamanho ainda — três medidas para o mesmo papel. ---------------------------------------------------------- */ .template-product .product__description, .template-product .product__description p, .template-product .product__description li, .template-product .product__text, .template-product .product__text p, .template-product .section-description, .template-product .section-description p, .template-product .accordion__content, .template-product .accordion__content p, .template-product .accordion__content li, .template-product .image-with-text__text, .template-product .image-with-text__text p, .template-product .image-with-text__text li, .template-product .feature-column__description, .template-product .pickup-description, .template-product .delivery-description, .template-product .product-popup-modal__button { font-size: var(--typo-pdp-body-size-mb) !important; font-weight: var(--typo-pdp-body-weight); line-height: var(--typo-pdp-body-line-height); } @media only screen and (min-width: 750px) { .template-product .product__description, .template-product .product__description p, .template-product .product__description li, .template-product .product__text, .template-product .product__text p, .template-product .section-description, .template-product .section-description p, .template-product .accordion__content, .template-product .accordion__content p, .template-product .accordion__content li, .template-product .image-with-text__text, .template-product .image-with-text__text p, .template-product .image-with-text__text li, .template-product .feature-column__description, .template-product .pickup-description, .template-product .delivery-description, .template-product .product-popup-modal__button { font-size: var(--typo-pdp-body-size) !important; } } /* Negrito dentro do corpo continua permitido (), mas o texto padrão nunca nasce em negrito. */ .template-product .product__description strong, .template-product .accordion__content strong, .template-product .image-with-text__text strong { font-weight: 600; } /* Legenda acima do título dos blocos de conteúdo — um degrau abaixo do corpo, para não competir com o subtítulo. */ .template-product .image-with-text__text--caption { font-size: calc(var(--typo-pdp-body-size-mb) - 0.2rem) !important; font-weight: 500; letter-spacing: 0.04em; } @media only screen and (min-width: 750px) { .template-product .image-with-text__text--caption { font-size: calc(var(--typo-pdp-body-size) - 0.2rem) !important; } } /* ---------------------------------------------------------- 7. Caixa de quantidade × botão de comprar O tema forçava 50%/50% acima de 1200px, com a caixa limitada a 24rem — muito mais larga que o rótulo "Quantidade" logo acima dela. A caixa passa a acompanhar a largura do rótulo e o botão absorve o espaço restante. O checkout dinâmico ("Compre já") continua sozinho na linha de baixo. ---------------------------------------------------------- */ @media only screen and (min-width: 1200px) { /* IMPORTANTE: manter flex-wrap: wrap. Com nowrap o botão de checkout dinâmico sobe para a mesma linha e espreme o "Adicionar ao carrinho". */ .template-product .product-form__buttons { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2rem; } /* Caixa de quantidade: não estica */ .template-product .product-form__buttons .product-form__quantity { flex: 0 0 auto; width: var(--pdp-qty-width); min-width: 0; } .template-product .product-form__buttons .product-form__quantity .quantity, .template-product .product-form__buttons .price-per-item__container { width: 100%; min-width: 0; } /* Botão de comprar: ocupa todo o espaço que sobrar da linha */ .template-product .product-form__buttons .product-form__submit { flex: 1 1 0; width: auto; min-width: 0; } /* O campo numérico tem largura intrínseca própria do navegador (~20 caracteres). Sem uma base explícita, ela é quem define o tamanho da caixa no modo automático, e não o rótulo. */ .template-product .product-form__buttons .quantity__input { flex: 1 1 2.4rem; width: 2.4rem; min-width: 0; padding-left: 0; padding-right: 0; } .template-product .product-form__buttons .quantity__button { width: 3rem; min-width: 3rem; flex: 0 0 auto; } /* Checkout dinâmico sempre em linha própria */ .template-product .product-form__buttons .shopify-payment-button { flex: 1 0 100%; width: 100%; max-width: 100%; } /* O rótulo define a largura da caixa no modo automático. O contador "(x no carrinho)" foi movido para fora do