/* Theme Name: A Dois Theme URI: https://adoissexshop.com.br Author: Micas DSG Description: Tema da loja A Dois Sexshop. Tema de blocos com WooCommerce. Version: 1.0.0 Requires at least: 7.0 Requires PHP: 8.1 Text Domain: adois */ /* ========================================================================== Tokens (Figma: Semantic Claro/Escuro). Cores só por variável. ========================================================================== */ :root { color-scheme: light; /* Identidade A Dois (10/11/2026, modo único): papel claro, tinta vinho escuro, faixas no vinho da logo com branco por cima. Neutros no mesmo matiz do vinho (COR-02). */ --vinho: #7b2525; --vinho-fundo: #5e1b1c; --vinho-escuro: #3a0f11; --vinho-claro: #9d312f; --creme: #f4e2da; --creme-2: #ead2c8; --rosa-cha: #f4e2da; --bg: #fcf7f4; --bg-subtle: #f7eee9; --surface: #ffffff; --surface-hover: #fbf3ef; --media: #f4e2da; --fill: #7b25250a; --fill-hover: #7b252514; --fill-active: #7b25251f; --glass: #fcf7f4d9; --border: #7b25251f; --border-hover: #7b252538; --border-strong: #7b252566; --text: #2e1012; --text-muted: #5c3533; --text-subtle: #6e3f3b; --text-disabled: #b7958f; --accent: #7b2525; --accent-text: #7b2525; --btn-bg: #7b2525; --btn-bg-hover: #5e1b1c; --btn-text: #ffffff; --btn2-bg: transparent; --danger: #a3261b; --danger-bg: #a3261b14; --focus: #7b2525; --font-titulo: Fraunces, Georgia, serif; --font-texto: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --t-h1-size: 72px; --t-h1-lh: 76px; --t-h1p-size: 52px; --t-h1p-lh: 56px; --t-h2-size: 56px; --t-h2-lh: 60px; --t-h3-size: 32px; --t-h3-lh: 38px; --t-h4-size: 24px; --t-h4-lh: 30px; --t-h5-size: 20px; --t-h5-lh: 28px; --t-lead-size: 18px; --t-lead-lh: 28px; --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-80: 80px; --sec-pad: clamp(72px, 11svh, 128px); --page-margin: 80px; /* Cantos dos posts da marca: botão 10, quadro 20, moldura grande 32 (Figma: 9,9 e 66 em 1080). */ --card-r: 20px; --card-pad: 24px; --media-inset: 8px; --r-in: 12px; --r-ctl: 10px; --r-moldura: 32px; --hdr-top: 0px; --hdr-h: 76px; --sticky-top: calc(var(--hdr-top) + var(--hdr-h) + 32px); --ease: cubic-bezier(.25, .46, .45, .94); --ease-out: cubic-bezier(.165, .84, .44, 1); --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); } /* Faixa rosa chá: a quebra de cor clara, sempre uma seção inteira, com tinta vinho própria (COR-06/07). */ .is-bege { color-scheme: light; --bg: #f4e2da; --bg-subtle: #eed6cc; --surface: #faefea; --surface-hover: #fdf6f3; --media: #fbf1ec; --fill: #7b25250d; --fill-hover: #7b252517; --fill-active: #7b252521; --glass: #f4e2da; --border: #7b252529; --border-hover: #7b252547; --border-strong: #7b252573; --text: #2e1012; --text-muted: #5c3533; --text-subtle: #6e3f3b; --text-disabled: #b7958f; --accent: #7b2525; --accent-text: #7b2525; --btn-bg: #7b2525; --btn-bg-hover: #5e1b1c; --btn-text: #ffffff; --danger: #a3261b; --danger-bg: #a3261b14; --focus: #7b2525; --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); background-color: var(--bg); color: var(--text); } @media (max-width: 1279px) { :root { --page-margin: 40px; } } @media (max-width: 1024px) { :root { --t-h1-size: 56px; --t-h1-lh: 60px; --t-h1p-size: 40px; --t-h1p-lh: 44px; --t-h2-size: 40px; --t-h2-lh: 44px; --t-h3-size: 28px; --t-h3-lh: 36px; --space-48: 40px; --space-64: 56px; --space-80: 64px; --sec-pad: 80px; --hdr-h: 64px; } } @media (max-width: 640px) { :root { --t-h1-size: 40px; --t-h1-lh: 44px; --t-h1p-size: 32px; --t-h1p-lh: 36px; --t-h2-size: 32px; --t-h2-lh: 36px; --t-h3-size: 24px; --t-h3-lh: 32px; --t-h4-size: 20px; --t-h4-lh: 28px; --t-h5-size: 18px; --t-h5-lh: 24px; --t-lead-size: 16px; --t-lead-lh: 24px; --page-margin: 16px; --space-32: 24px; --space-48: 32px; --space-64: 48px; --space-80: 48px; --sec-pad: 64px; --card-pad: 16px; } } /* ========================================================================== Base ========================================================================== */ html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-top) + var(--hdr-h) + 24px); scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; background: var(--bg); color: var(--text); } .wp-site-blocks { overflow-x: clip; } ::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); } h1, h2, h3, h4, p, li, dd, dt, blockquote, summary { text-wrap: pretty; } h1, h2, .dc-painel__titulo { text-wrap: balance; } img { max-width: 100%; height: auto; } :focus { outline: none; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; } a { color: inherit; transition: color var(--dur, 250ms) var(--ease); } .has-lead-font-size, .dc-lead { font-size: var(--t-lead-size) !important; line-height: var(--t-lead-lh); } .dc-apoio, .dc-lead { color: var(--text-muted); } .dc-sutil { color: var(--text-subtle); } .dc-eyebrow { font-size: 14px; line-height: 20px; color: var(--text-subtle); margin: 0; } .is-escuro .dc-eyebrow { color: var(--accent-text); } .dc-numero { font-variant-numeric: tabular-nums; } .sr-only, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } main { min-height: 50svh; } /* Seções: blocos tonais, separadas por espaço. */ .dc-secao { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); margin-block: 0 !important; } .wp-site-blocks > main > * , .wp-site-blocks > main { margin-block-start: 0; } .dc-cabecalho-secao { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: var(--space-48) !important; flex-wrap: wrap; } .dc-cabecalho-secao h2 { margin: 0; } .dc-cabecalho-secao p { margin: 16px 0 0; max-width: 560px; } /* ========================================================================== Botões (CTL): pílula, 40/48, hover muda só fundo e borda. ========================================================================== */ .wp-element-button, .wp-block-button__link, .wc-block-components-button:not(.is-link), .button, button.single_add_to_cart_button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: var(--r-ctl); border: 1px solid transparent; background: var(--btn-bg); color: var(--btn-text); font: 500 15px/24px var(--font-texto); white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease); } .wp-element-button:hover, .wp-block-button__link:hover, .wc-block-components-button:not(.is-link):hover, .button:hover { background: var(--btn-bg-hover); color: var(--btn-text); } .wp-element-button:active, .wp-block-button__link:active, .wc-block-components-button:active { transform: scale(.98); } .wp-block-button.is-style-secundario .wp-block-button__link, .dc-btn-secundario { background: var(--btn2-bg); color: var(--text); border-color: var(--border); } .wp-block-button.is-style-secundario .wp-block-button__link:hover, .dc-btn-secundario:hover { background: var(--fill-hover); border-color: var(--border-hover); color: var(--text); } .wp-block-button.is-style-lg .wp-block-button__link, .dc-btn-lg { min-height: 48px; padding: 12px 24px; font-size: 16px; } .wp-block-button__link.has-seta::after, .dc-seta::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--i-seta) center / contain no-repeat; mask: var(--i-seta) center / contain no-repeat; } .wp-block-buttons { gap: 12px; } /* Chips (pílula 32px) */ .dc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .dc-chip, .dc-chips a { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--r-ctl); border: 1px solid var(--border); background: var(--fill); color: var(--text-muted); font: 400 14px/20px var(--font-texto); white-space: nowrap; text-decoration: none; transition: background-color 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease); } .dc-chips a:hover { background: var(--fill-hover); border-color: var(--border-hover); color: var(--text); } .dc-chips a[aria-current="page"], .dc-chip.is-ativo { background: var(--fill-active); border-color: var(--border-strong); color: var(--text); font-weight: 500; } .dc-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-ctl); border: 1px solid var(--border-hover); background: var(--fill); font-size: 12px; line-height: 16px; color: var(--text); width: fit-content; } /* ========================================================================== Ícones (traço, sem caixa): máscaras SVG. ========================================================================== */ :root { --i-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); --i-lixeira: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M5.5 7l1 12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2l1-12M9 7V4.5A1.5 1.5 0 0 1 10.5 3h3A1.5 1.5 0 0 1 15 4.5V7'/%3E%3C/svg%3E"); --i-mais: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); --i-caminhao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h11v10H2zM13 9h4l4 4v3h-8z'/%3E%3Ccircle cx='6' cy='17.5' r='1.75'/%3E%3Ccircle cx='17' cy='17.5' r='1.75'/%3E%3C/svg%3E"); --i-cartao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E"); --i-troca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h15l-3-3M20 16H5l3 3'/%3E%3C/svg%3E"); --i-conversa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5a8 8 0 0 1-11.8 7L4 20l1.4-4A8 8 0 1 1 20 11.5z'/%3E%3C/svg%3E"); --i-sacola: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 10V7a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E"); --i-cadeado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); --i-regua: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='8' width='20' height='8' rx='1.5'/%3E%3Cpath d='M6 8v3M10 8v4M14 8v3M18 8v4'/%3E%3C/svg%3E"); --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); } .dc-ico::before { content: ""; display: block; width: 24px; height: 24px; background: var(--accent-text); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; } .dc-ico-caminhao { --ico: var(--i-caminhao); } .dc-ico-cartao { --ico: var(--i-cartao); } .dc-ico-troca { --ico: var(--i-troca); } .dc-ico-conversa { --ico: var(--i-conversa); } .dc-ico-check { --ico: var(--i-check); } .dc-ico-regua { --ico: var(--i-regua); } .dc-ico-sm::before { width: 16px; height: 16px; } .dc-ico-lg::before { width: 32px; height: 32px; } /* ========================================================================== Header (NAV): pílula fixa flutuando, nunca some. ========================================================================== */ .dc-header-wrap { position: sticky; top: 0; z-index: 100; margin: 0 !important; padding: 0 !important; } /* Faixa inteira de papel com filete embaixo (direção Atelier): departamentos à esquerda, nome no centro, ações à direita. */ .dc-header { position: relative; height: var(--hdr-h); margin: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; padding: 0 var(--page-margin) !important; background: var(--bg); border-bottom: 1px solid var(--border); } .dc-logo { display: flex; align-items: center; justify-content: center; margin: 0 !important; } .dc-logo a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--accent); } .dc-logo__cisnes { display: block; width: 52px; line-height: 0; } .dc-logo__cisnes svg { width: 100%; height: auto; } .dc-logo__nome { font: 400 28px/1 var(--font-titulo); letter-spacing: -0.01em; color: var(--text); } .dc-nav { margin: 0 !important; } .dc-nav .wp-block-navigation__container { gap: 24px; flex-wrap: nowrap !important; align-items: center; } .dc-nav .wp-block-navigation-item__content { white-space: nowrap; } .dc-nav .wp-block-navigation-item__content { font: 400 15px/20px var(--font-texto); color: var(--text-muted); padding: 8px 0; } .dc-nav .wp-block-navigation-item__content:hover, .dc-nav .current-menu-item > a { color: var(--text); } .dc-acoes { display: flex !important; justify-content: flex-end; align-items: center; gap: 4px !important; margin: 0 !important; } .dc-acoes > * { margin: 0 !important; } .dc-acoes .wp-block-woocommerce-customer-account a, .dc-acoes .wp-block-search__button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: var(--r-ctl); border: 0; background: transparent; color: var(--text); transition: background-color 250ms var(--ease); } .dc-acoes .wp-block-woocommerce-customer-account a:hover, .dc-acoes .wp-block-search__button:hover { background: var(--fill-hover); } .dc-acoes .wp-block-woocommerce-customer-account svg, .dc-acoes .wp-block-search__button svg { width: 22px; height: 22px; fill: currentColor; } .dc-acoes .wp-block-search { margin: 0; } .dc-acoes .wp-block-search__inside-wrapper { border: 0; padding: 0; background: none; } .dc-acoes .wp-block-search__input { border-radius: var(--r-ctl); border: 1px solid var(--border); background: var(--surface); color: var(--text); height: 40px; padding: 0 16px; font-size: 16px; } .dc-acoes .wp-block-search.wp-block-search__searchfield-hidden .wp-block-search__input { width: 0; padding: 0; border: 0; } /* Sacola (mini-cart do WooCommerce) em pílula "Sacola 2" */ .wc-block-mini-cart__button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 14px !important; border-radius: var(--r-ctl); border: 1px solid var(--border-hover) !important; background: var(--btn2-bg) !important; color: var(--text) !important; font: 500 15px/24px var(--font-texto); transition: background-color 250ms var(--ease), border-color 250ms var(--ease); } .wc-block-mini-cart__button:hover { background: var(--fill-hover) !important; border-color: var(--border-strong) !important; } .wc-block-mini-cart__button::after { content: "Sacola"; order: 2; } .wc-block-mini-cart__quantity-badge { display: contents; } .wc-block-mini-cart__icon { order: 1; width: 18px; height: 18px; } .wc-block-mini-cart__badge { order: 3; position: static !important; transform: none !important; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-ctl); background: var(--btn-bg) !important; color: var(--btn-text) !important; border: 0 !important; font: 500 12px/22px var(--font-texto); font-variant-numeric: tabular-nums; margin-left: 4px; } .wc-block-mini-cart__button { flex-direction: row; } .is-escuro .wc-block-mini-cart__badge { background: var(--accent) !important; color: var(--bg) !important; } /* Menu do celular: abaixo de 1200px vira gaveta. */ .dc-nav-mobile { display: none !important; } @media (max-width: 1199px) { .dc-nav { display: none !important; } .dc-nav-mobile { display: flex !important; } .dc-acoes .wp-block-search { display: none; } } @media (max-width: 640px) { .wc-block-mini-cart__button::after { content: none; } .wc-block-mini-cart__button { width: 44px; height: 44px; padding: 0 !important; justify-content: center; position: relative; } .wc-block-mini-cart__badge { position: absolute !important; top: -2px; right: -4px; } .dc-acoes .wp-block-woocommerce-customer-account { display: none; } .dc-logo__cisnes { width: 40px; } .dc-logo__nome { font-size: 22px; } .dc-logo a { gap: 8px; } } .dc-nav-mobile .wp-block-navigation__responsive-container-open { width: 44px; height: 44px; border-radius: var(--r-ctl); display: inline-flex; align-items: center; justify-content: center; } .dc-nav-mobile .wp-block-navigation__responsive-container.is-menu-open { background: var(--bg) !important; color: var(--text) !important; padding: 16px var(--page-margin) 32px !important; } .dc-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 88px; align-items: stretch; } .dc-nav-mobile .is-menu-open .wp-block-navigation__container { gap: 0 !important; width: 100%; } .dc-nav-mobile .is-menu-open .wp-block-navigation-item { width: 100%; } .dc-nav-mobile .is-menu-open .wp-block-navigation-item + .wp-block-navigation-item { border-top: 1px solid var(--border); } .dc-nav-mobile .is-menu-open .wp-block-navigation-item__content { font: 300 var(--t-h3-size)/var(--t-h3-lh) var(--font-titulo); letter-spacing: -0.015em; padding: 16px 4px !important; width: 100%; color: var(--text); } .dc-nav-mobile .wp-block-navigation__responsive-container-close { top: 24px; right: calc(var(--page-margin) + 8px); width: 40px; height: 40px; border-radius: var(--r-ctl); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; } /* ========================================================================== Cards (CRD): quase da cor do fundo, raio 20, hover só fundo e borda. ========================================================================== */ .dc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-r); padding: var(--card-pad); transition: background-color 400ms var(--ease), border-color 400ms var(--ease); } .dc-card:hover { border-color: var(--border-hover); } a.dc-card:hover, .dc-card.is-link:hover { background: var(--surface-hover); } .dc-card-midia { padding: var(--media-inset) !important; } .dc-card-midia .wp-block-image, .dc-card-midia figure { margin: 0 !important; border-radius: var(--r-in); overflow: hidden; background: var(--media); } .dc-card-midia img { display: block; width: 100%; height: 100% !important; object-fit: cover; object-position: top; transition: transform 900ms var(--ease-out); } /* Grade de produtos (Product Collection) */ .wc-block-product-template { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px !important; margin: 0 !important; padding: 0 !important; list-style: none; } .wc-block-product-template .wc-block-product { width: auto !important; } .wc-block-product-template .wc-block-product { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-r); padding: var(--media-inset) var(--media-inset) var(--card-pad) !important; margin: 0 !important; display: flex; flex-direction: column; gap: 4px; text-align: left; transition: background-color 400ms var(--ease), border-color 400ms var(--ease); } .wc-block-product-template .wc-block-product:hover { background: var(--surface-hover); border-color: var(--border-hover); } .wc-block-product .wc-block-components-product-image { margin: 0 0 16px !important; border-radius: var(--r-in); overflow: hidden; background: var(--media); aspect-ratio: 4 / 5; } .wc-block-product .wc-block-components-product-image a, .wc-block-product .wc-block-components-product-image img { display: block; width: 100%; height: 100% !important; object-fit: cover; object-position: top; border-radius: 0; } .wc-block-product .wc-block-components-product-image img { transition: transform 900ms var(--ease-out); } .wc-block-product .wp-block-post-title { font: 400 var(--t-h5-size)/var(--t-h5-lh) var(--font-texto) !important; letter-spacing: -0.005em; margin: 0 16px !important; padding: 0 !important; } .wc-block-product .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* card inteiro clicável */ .wc-block-product .wc-block-components-product-price { margin: 0 !important; } .wc-block-product .wp-block-woocommerce-product-price { margin: 0 16px !important; font-size: 14px !important; line-height: 20px; color: var(--text-muted); text-align: left !important; } .wc-block-product .wc-block-components-product-sale-badge { position: absolute; top: 16px; right: 16px; z-index: 2; } .wc-block-components-product-sale-badge { border-radius: var(--r-ctl); border: 1px solid var(--border-hover); background: var(--surface); color: var(--text); font: 400 12px/16px var(--font-texto); padding: 4px 10px; text-transform: none; letter-spacing: 0; } @media (hover: hover) { .dc-card:hover img, .wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.05); } } @media (max-width: 1024px) { .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .wc-block-product-template { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--page-margin)) !important; padding: 0 var(--page-margin) 8px !important; scrollbar-width: none; gap: 16px !important; } .wc-block-product-template .wc-block-product { flex: 0 0 72%; scroll-snap-align: start; } } /* Bento da Loja: primeiro produto grande (SEC-06). */ .dc-loja-grade .wc-block-product-template { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; } .dc-loja-grade .wc-block-product-template > .wc-block-product:first-child { grid-column: span 2; grid-row: span 2; } .dc-loja-grade .wc-block-product-template > .wc-block-product:first-child .wc-block-components-product-image { aspect-ratio: auto; flex: 1; } .dc-loja-grade .wc-block-product-template > .wc-block-product:first-child .wp-block-post-title { font: 400 var(--t-h4-size)/var(--t-h4-lh) var(--font-texto) !important; letter-spacing: -0.01em; } @media (max-width: 1024px) { /* Tablet: três colunas, sem o destaque grande (em duas colunas cada card ficava com 330px). */ .dc-loja-grade .wc-block-product-template { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .dc-loja-grade .wc-block-product-template > .wc-block-product:first-child { grid-row: auto; grid-column: auto; } .dc-loja-grade .wc-block-product-template > .wc-block-product:first-child .wc-block-components-product-image { aspect-ratio: 4 / 5; flex: none; } .dc-loja-grade .wc-block-product-template > .wc-block-product:first-child .wp-block-post-title { font: 400 var(--t-h5-size)/var(--t-h5-lh) var(--font-texto) !important; } } /* Celular: duas colunas (pedido do Micael em 10/11/2026, substitui o de 31/10 de um por linha). */ @media (max-width: 640px) { .dc-loja-grade .wc-block-product-template { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; overflow: visible; margin-inline: 0 !important; padding: 0 !important; } .dc-loja-grade .wc-block-product-template .wc-block-product { flex: none; grid-column: auto !important; grid-row: auto !important; } .dc-loja-grade .wc-block-product-template .wc-block-product .wc-block-components-product-image { aspect-ratio: 1 / 1 !important; flex: none !important; margin-bottom: 12px !important; } .dc-loja-grade .wc-block-product-template .wc-block-product .wc-block-components-product-image img { object-position: center; } .dc-loja-grade .wc-block-product-template .wc-block-product .wp-block-post-title { font: 400 16px/22px var(--font-texto) !important; letter-spacing: 0; margin: 0 8px !important; } .dc-loja-grade .wc-block-product-template .wc-block-product .wp-block-woocommerce-product-price { margin: 4px 8px 0 !important; } } .dc-filtros { display: flex !important; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px !important; flex-wrap: wrap; } .dc-filtros .woocommerce-result-count, .dc-filtros .wc-block-product-results-count { font-size: 14px; color: var(--text-subtle); margin: 0; } .dc-filtros-dir { display: flex !important; align-items: center; gap: 16px; } .woocommerce-ordering select, .wc-block-catalog-sorting select { height: 32px; border-radius: var(--r-ctl); border: 1px solid var(--border); background: var(--fill); color: var(--text); font: 400 14px/20px var(--font-texto); padding: 0 32px 0 12px; } @media (max-width: 640px) { .dc-filtros .dc-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--page-margin)); padding: 0 var(--page-margin); scrollbar-width: none; width: calc(100% + 2 * var(--page-margin)); } } /* ========================================================================== Home: destaque do chapéu ========================================================================== */ .dc-destaque { display: grid !important; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; } .dc-destaque > * { margin: 0 !important; } .dc-destaque__midia { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; } .dc-destaque__midia > * { margin: 0 !important; } .dc-destaque__midia .dc-foto-principal { grid-column: 1 / -1; aspect-ratio: 612 / 500; } .dc-destaque__midia .dc-foto-detalhe { aspect-ratio: 281 / 156; } .dc-destaque__selo { background: var(--bg-subtle); border-radius: var(--r-in); padding: 20px !important; display: flex !important; flex-direction: column; justify-content: flex-end; gap: 4px; margin: 0 !important; } .dc-destaque__selo p { margin: 0; } .dc-destaque__selo p:first-child { font-weight: 500; font-size: 14px; } .dc-destaque__selo p:last-child { font-size: 14px; color: var(--text-muted); } .dc-destaque__texto { padding-left: 56px !important; display: flex !important; flex-direction: column; gap: 32px; } .dc-destaque__texto > * { margin: 0 !important; } .dc-destaque__texto h2 { margin: 16px 0 !important; } .dc-preco { display: block; font: 400 var(--t-h4-size)/var(--t-h4-lh) var(--font-titulo); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .dc-preco del { font-size: .6em; color: var(--text-subtle); } .dc-preco ins { text-decoration: none; } .dc-condicoes { font-size: 14px; line-height: 20px; color: var(--text-muted); margin: 4px 0 0; } @media (max-width: 1024px) { .dc-destaque { grid-template-columns: 1fr; gap: 40px; } .dc-destaque__texto { padding-left: 0 !important; } } @media (max-width: 640px) { .dc-destaque__texto .wp-block-buttons { flex-direction: column; } .dc-destaque__texto .wp-block-button, .dc-destaque__texto .wp-block-button__link { width: 100%; } } /* Home: quem é o Luciano. Frase que acende com a rolagem (MOV-05) e pilares com foto. */ .dc-manifesto { margin-bottom: var(--space-64) !important; } .dc-manifesto__titulo h2 { margin: 12px 0 0; } .dc-manifesto__frase { font: 300 var(--t-h3-size)/var(--t-h3-lh) var(--font-titulo); letter-spacing: -0.015em; color: var(--text); max-width: 960px; margin: var(--space-48) 0 0; text-wrap: pretty; } .dc-manifesto__frase .p { transition: color 250ms var(--ease); } .dc-manifesto.is-lendo .dc-manifesto__frase .p { color: var(--text-disabled); } .dc-manifesto.is-lendo .dc-manifesto__frase .p.is-aceso { color: var(--text); } .dc-pilares-fotos { list-style: none; margin: 0 auto var(--space-48) !important; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .dc-pilares-fotos > li { margin: 0; display: flex; flex-direction: column; } .dc-pilares-fotos figure { aspect-ratio: 4 / 3; margin: 0 !important; } .dc-pilares-fotos img { object-position: center 30%; } .dc-pilares-fotos__texto { padding: 16px 16px 12px; } .dc-pilares-fotos .n { font-size: 14px; line-height: 20px; color: var(--accent-text); font-variant-numeric: tabular-nums; } .dc-pilares-fotos h3 { font: 400 var(--t-h4-size)/var(--t-h4-lh) var(--font-texto); letter-spacing: -0.01em; margin: 8px 0; } .dc-pilares-fotos p { margin: 0; color: var(--text-muted); } @media (max-width: 1024px) { .dc-pilares-fotos { grid-template-columns: 1fr; } .dc-pilares-fotos figure { aspect-ratio: 16 / 10; } } @media (max-width: 640px) { .dc-manifesto__frase { font: 400 var(--t-lead-size)/var(--t-lead-lh) var(--font-texto); letter-spacing: 0; color: var(--text-muted); margin-top: 16px; } .dc-pilares-fotos__texto { padding: 8px 8px 8px; } } /* Home: benefícios da compra (células com borda compartilhada) */ /* Painel de chamada (CTA final, SEC-08) */ .dc-painel { border-radius: var(--card-r); padding: var(--space-48) !important; display: flex !important; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; } .dc-painel > * { margin: 0 !important; } .dc-painel h2 { margin: 0 0 12px !important; } .dc-painel p { margin: 0; color: var(--text-muted); } @media (max-width: 640px) { .dc-painel { padding: 32px 16px !important; } .dc-painel .wp-block-buttons { width: 100%; flex-direction: column; } .dc-painel .wp-block-button, .dc-painel .wp-block-button__link { width: 100%; } } /* ========================================================================== Páginas de conteúdo: índice lateral fixo + texto ========================================================================== */ .dc-conteudo { display: grid !important; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; } .dc-conteudo > * { margin: 0 !important; } .dc-indice { position: sticky; top: var(--sticky-top); font-size: 14px; line-height: 20px; } .dc-indice p { color: var(--text-subtle); margin: 0 0 12px; } .dc-indice ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .dc-indice a { display: block; padding: 6px 0; color: var(--text-muted); } .dc-indice a:hover, .dc-indice a.is-ativo { color: var(--text); } .dc-texto { max-width: 820px; } .dc-texto > h2 { font-size: var(--t-h3-size); line-height: var(--t-h3-lh); letter-spacing: -0.015em; margin: var(--space-64) 0 24px; } .dc-texto > h2:first-child { margin-top: 0; } .dc-texto h3 { font: 400 var(--t-h5-size)/var(--t-h5-lh) var(--font-texto); letter-spacing: -0.005em; margin: 32px 0 8px; } .dc-texto p, .dc-texto li { color: var(--text-muted); max-width: 680px; } @media (max-width: 1024px) { /* minmax(0, 1fr): a tabela de medidas não pode alargar a coluna além da tela. */ .dc-conteudo { grid-template-columns: minmax(0, 1fr); gap: 32px; } .dc-tabela { overflow-x: auto; } .dc-indice { position: static; } .dc-indice ul { flex-direction: row; flex-wrap: wrap; gap: 8px; } .dc-indice a { height: 32px; padding: 0 12px; border-radius: var(--r-ctl); border: 1px solid var(--border); background: var(--fill); display: inline-flex; align-items: center; } } /* Perguntas (FAQ): core/details */ .wp-block-details { border-top: 1px solid var(--border); padding: 16px 0; margin: 0 !important; } .wp-block-details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; font: 400 var(--t-h5-size)/var(--t-h5-lh) var(--font-texto); letter-spacing: -0.005em; color: var(--text); transition: color 250ms var(--ease); } .wp-block-details summary::-webkit-details-marker { display: none; } .wp-block-details summary::after { content: ""; flex: none; width: 16px; height: 16px; background: var(--text-subtle); -webkit-mask: var(--i-mais) center / contain no-repeat; mask: var(--i-mais) center / contain no-repeat; transition: transform 250ms var(--ease); } .wp-block-details[open] summary::after { transform: rotate(45deg); } .wp-block-details summary:hover { color: var(--text-muted); } .wp-block-details > :not(summary) { margin: 12px 0 0; color: var(--text-muted); max-width: 680px; } .wp-block-details[open] > :not(summary) { animation: dcFaq 250ms var(--ease) both; } @keyframes dcFaq { from { opacity: 0; transform: translateY(6px); } } .dc-texto .wp-block-details + h2, .dc-texto .wp-block-details:last-child { border-bottom: 0; } /* Tabela de medidas */ .dc-tabela table { border-collapse: separate; border-spacing: 0; width: 100%; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; font-size: 14px; font-variant-numeric: tabular-nums; } .dc-tabela th, .dc-tabela td { padding: 12px 16px; text-align: left; border: 0; } .dc-tabela th { background: var(--bg-subtle); font-weight: 500; color: var(--text); } .dc-tabela td { background: var(--surface); color: var(--text-muted); } .dc-tabela tr + tr > * { border-top: 1px solid var(--border); } .dc-tabela th + th, .dc-tabela td + td, .dc-tabela th + td { border-left: 1px solid var(--border); } .dc-tabela { overflow-x: auto; margin: 24px 0 !important; } /* Quem somos: capítulos com a foto presa ao lado (só ≥1025px) */ .dc-capitulos { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 0 80px; align-items: start; } .dc-capitulos__fotos { position: sticky; top: var(--sticky-top); height: min(calc(100svh - var(--sticky-top) - 32px), 760px); display: grid !important; margin: 0 !important; } .dc-capitulos__fotos figure { grid-area: 1 / 1; height: 100%; opacity: 0; transition: opacity 800ms var(--ease-out); } .dc-capitulos__fotos figure.is-ativo { opacity: 1; } .dc-capitulos__fotos img, .dc-capitulo__foto img { object-position: center 30%; } .dc-capitulos__lista { list-style: none; margin: 0; padding: 0; } .dc-capitulo { min-height: 64svh; display: flex; flex-direction: column; justify-content: center; color: var(--text); transition: color 400ms var(--ease); } .dc-capitulo .n { font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; color: var(--accent-text); transition: color 400ms var(--ease); } .dc-capitulo h3 { font: 300 var(--t-h3-size)/var(--t-h3-lh) var(--font-titulo); letter-spacing: -0.015em; color: inherit; margin: 12px 0 16px; } .dc-capitulo p { font-size: var(--t-lead-size); line-height: var(--t-lead-lh); color: inherit; margin: 0; max-width: 440px; } .dc-capitulo__foto { display: none !important; } .js .dc-capitulo:not(.is-ativo), .js .dc-capitulo:not(.is-ativo) .n { color: var(--text-subtle); } /* Valores: lista numerada, divisória só entre itens (LST-01) */ .dc-valores-lista { list-style: none; margin: 0; padding: 0; } .dc-valores-lista li { display: grid; grid-template-columns: 80px minmax(0, 4fr) minmax(0, 6fr); gap: 24px; align-items: baseline; padding: 32px 0; } .dc-valores-lista li:first-child { padding-top: 0; } .dc-valores-lista li:last-child { padding-bottom: 0; } .dc-valores-lista li + li { border-top: 1px solid var(--border); } .dc-valores-lista .n { font-size: 14px; line-height: 20px; color: var(--accent-text); font-variant-numeric: tabular-nums; } .dc-valores-lista h3 { font: 300 var(--t-h3-size)/var(--t-h3-lh) var(--font-titulo); letter-spacing: -0.015em; margin: 0; } .dc-valores-lista p { margin: 0; color: var(--text-muted); font-size: var(--t-lead-size); line-height: var(--t-lead-lh); max-width: 560px; } /* Galeria: no desktop a rolagem vertical anda o trilho na horizontal (SEC-05) */ .dc-galeria-secao .dc-galeria__trilho { display: flex; gap: 24px; } .dc-galeria-secao .dc-galeria__trilho > .dc-card { flex: 0 0 auto; height: min(calc(100svh - var(--sticky-top) - 64px), 560px); aspect-ratio: 4 / 5; margin: 0 !important; } .dc-galeria-secao .dc-galeria__trilho figure, .dc-capitulo__foto figure { height: 100%; } .dc-galeria-secao .dc-galeria.is-presa .dc-galeria__palco { position: sticky; top: var(--sticky-top); } .dc-galeria-secao .dc-galeria.is-presa .dc-galeria__trilho { will-change: transform; overflow: visible; scroll-snap-type: none; } @media (max-width: 1024px) { /* Tablet e celular: a mesma rolagem do computador, com a foto presa no alto e trocando conforme o capítulo que passa no meio da tela (pedido do Micael em 31/10/2026). */ .dc-capitulos { display: block; } .dc-capitulos__fotos { position: sticky; top: calc(var(--hdr-top) + var(--hdr-h) + 16px); z-index: 1; height: 38svh; margin: 0 0 var(--space-32) !important; } /* Fundo da página no vão entre o topo da tela e a foto: o texto que sobe some atrás dela. */ .dc-capitulos__fotos::before { content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--page-margin)); right: calc(-1 * var(--page-margin)); bottom: 100%; height: calc(var(--hdr-top) + var(--hdr-h) + 17px); background: var(--bg); } .dc-capitulo { min-height: 0; justify-content: flex-start; padding-bottom: var(--space-64); } .dc-capitulo:last-child { padding-bottom: 0; } .dc-valores-lista li { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr); } .dc-galeria-secao .dc-galeria__trilho { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--page-margin); margin-inline: calc(-1 * var(--page-margin)); padding: 0 var(--page-margin); scrollbar-width: none; } .dc-galeria-secao .dc-galeria__trilho::-webkit-scrollbar { display: none; } .dc-galeria-secao .dc-galeria__trilho > .dc-card { height: auto; width: 40%; scroll-snap-align: start; } } @media (max-width: 640px) { .dc-valores-lista li { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; } .dc-galeria-secao .dc-galeria__trilho { gap: 16px; } .dc-galeria-secao .dc-galeria__trilho > .dc-card { width: 72%; } /* Presa no celular: foto mais alta, ocupando a tela abaixo do header. */ .dc-galeria-secao .dc-galeria.is-presa .dc-galeria__palco { top: calc(var(--hdr-top) + var(--hdr-h) + 24px); } .dc-galeria-secao .dc-galeria.is-presa .dc-galeria__trilho > .dc-card { width: auto; height: min(calc(100svh - var(--hdr-top) - var(--hdr-h) - 72px), 125vw); aspect-ratio: 3 / 4; } } /* ========================================================================== Produto ========================================================================== */ .dc-produto { display: grid !important; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; align-items: start; margin-top: 32px !important; } .dc-produto > * { margin: 0 !important; } .dc-produto__compra { position: sticky; top: var(--sticky-top); display: flex !important; flex-direction: column; gap: 24px; } .dc-produto__compra > * { margin: 0 !important; } .dc-produto__compra h1 { font-size: var(--t-h1p-size) !important; line-height: var(--t-h1p-lh) !important; letter-spacing: -0.025em; margin: 12px 0 0 !important; } .dc-produto__compra .wc-block-components-product-price { font: 400 var(--t-h4-size)/var(--t-h4-lh) var(--font-titulo) !important; letter-spacing: -0.01em; color: var(--text); font-variant-numeric: tabular-nums; } .dc-produto__compra .wp-block-post-excerpt__excerpt { color: var(--text-muted); margin: 0; } @media (max-width: 1024px) { .dc-produto { grid-template-columns: 1fr; gap: 32px; } .dc-produto__compra { position: static; } } /* Galeria do produto: miniaturas à esquerda no computador, embaixo no celular; deslizar troca a foto */ .dc-galeria--produto { position: relative; display: flex; flex-direction: row-reverse; gap: 16px; } .dc-galeria--produto .dc-galeria__palco { position: relative; flex: 1; min-width: 0; border-radius: var(--card-r); background: var(--surface); border: 1px solid var(--border); padding: var(--media-inset); } .dc-galeria--produto .dc-galeria__trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--r-in); } .dc-galeria--produto .dc-galeria__trilho::-webkit-scrollbar { display: none; } .dc-galeria--produto .dc-galeria__foto { flex: 0 0 100%; margin: 0; scroll-snap-align: start; overflow: hidden; border-radius: var(--r-in); } .dc-galeria--produto .dc-galeria__foto img, .dc-galeria--produto .dc-galeria__palco > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: var(--r-in); transition: transform 900ms var(--ease-out); } .js .dc-galeria--produto .dc-galeria__foto { cursor: zoom-in; } @media (hover: hover) { .dc-galeria--produto .dc-galeria__foto:hover img { transform: scale(1.05); } } .dc-galeria--produto .dc-galeria__ampliar { display: none; position: absolute; top: 20px; right: 20px; z-index: 2; width: 40px; height: 40px; padding: 0; border-radius: var(--r-ctl); background: var(--surface); border: 1px solid var(--border); cursor: pointer; align-items: center; justify-content: center; transition: background-color 250ms var(--ease), border-color 250ms var(--ease); } .js .dc-galeria--produto .dc-galeria__ampliar { display: flex; } .dc-galeria--produto .dc-galeria__ampliar:hover { background: var(--surface-hover); border-color: var(--border-hover); } .dc-galeria--produto .dc-galeria__ampliar::before, .dc-zoom__botao::before { content: ""; width: 16px; height: 16px; background: var(--text); -webkit-mask: var(--i-mais) center / contain no-repeat; mask: var(--i-mais) center / contain no-repeat; } .dc-galeria--produto .dc-galeria__miniaturas { flex: 0 0 72px; display: flex; flex-direction: column; gap: 8px; } .dc-galeria--produto .dc-galeria__miniaturas button { box-sizing: border-box; width: 72px; height: 90px; padding: 3px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: border-color 250ms var(--ease); } .dc-galeria--produto .dc-galeria__miniaturas button:hover, .dc-galeria--produto .dc-galeria__miniaturas button[aria-current="true"] { border-color: var(--border-strong); } .dc-galeria--produto .dc-galeria__miniaturas img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 8px; } @media (max-width: 640px) { .dc-galeria--produto { flex-direction: column; } .dc-galeria--produto .dc-galeria__miniaturas { flex-direction: row; flex-basis: auto; overflow-x: auto; scrollbar-width: none; } .dc-galeria--produto .dc-galeria__miniaturas button { flex: 0 0 56px; width: 56px; height: 70px; } } /* Foto ampliada: tela cheia no fundo da página, foto inteira, fechar no canto */ .dc-zoom { box-sizing: border-box; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--text); overflow: hidden; } .dc-zoom::backdrop { background: var(--bg); } .dc-zoom[open] { animation: dcZoom 250ms var(--ease-out); } @keyframes dcZoom { from { opacity: 0; } } .dc-zoom img { display: block; width: 100%; height: 100%; object-fit: contain; } .dc-zoom__botao { position: fixed; z-index: 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: var(--r-ctl); background: var(--surface); border: 1px solid var(--border); cursor: pointer; transition: background-color 250ms var(--ease), border-color 250ms var(--ease); } .dc-zoom__botao:hover { background: var(--surface-hover); border-color: var(--border-hover); } .dc-zoom__fechar { top: 16px; right: 16px; } .dc-zoom__fechar::before { transform: rotate(45deg); } .dc-zoom__anterior, .dc-zoom__proxima { top: 50%; margin-top: -20px; } .dc-zoom__anterior { left: 16px; } .dc-zoom__proxima { right: 16px; } .dc-zoom__anterior::before, .dc-zoom__proxima::before { -webkit-mask-image: var(--i-seta); mask-image: var(--i-seta); } .dc-zoom__anterior::before { transform: rotate(180deg); } /* Comprar: variações em chips, quantidade e botão */ .wc-block-add-to-cart-with-options, .wp-block-woocommerce-add-to-cart-with-options { display: flex; flex-direction: column; gap: 24px; } .wc-block-add-to-cart-with-options-variation-selector-attribute, .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute { display: flex; flex-direction: column; gap: 12px; margin: 0 0 20px; } .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name, .wc-block-add-to-cart-with-options-variation-selector-attribute-name { font: 500 14px/20px var(--font-texto); color: var(--text); margin: 0; } .wc-block-product-filter-chips__items { display: flex; flex-wrap: wrap; gap: 8px; } .wc-block-product-filter-chips__item { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-ctl); border: 1px solid var(--border) !important; background: var(--fill) !important; color: var(--text) !important; font: 400 14px/20px var(--font-texto); cursor: pointer; transition: background-color 250ms var(--ease), border-color 250ms var(--ease); } .wc-block-product-filter-chips__item:hover { background: var(--fill-hover) !important; border-color: var(--border-hover) !important; } .wc-block-product-filter-chips__item[aria-checked="true"] { background: var(--fill-active) !important; border-color: var(--border-strong) !important; font-weight: 500; } .wc-block-product-filter-chips__item[aria-disabled="true"], .wc-block-product-filter-chips__item:disabled { color: var(--text-disabled) !important; text-decoration: line-through; cursor: not-allowed; } .wc-block-components-quantity-selector, .quantity { display: inline-flex; align-items: center; height: 48px; border-radius: var(--r-ctl); border: 1px solid var(--border-hover); background: var(--surface); overflow: hidden; } .wc-block-components-quantity-selector input, .quantity input.qty { width: 40px; border: 0; background: transparent; text-align: center; font: 500 16px/24px var(--font-texto); color: var(--text); -moz-appearance: textfield; } .wc-block-components-quantity-selector button { width: 40px; height: 100%; border: 0; background: transparent; color: var(--text); cursor: pointer; font-size: 18px; } .wc-block-components-quantity-selector button:hover { background: var(--fill-hover); } .wc-block-add-to-cart-with-options .wp-block-button__link, .wc-block-add-to-cart-with-options button[type="submit"], .single_add_to_cart_button { min-height: 48px !important; padding: 12px 24px !important; font-size: 16px !important; flex: 1; } .wc-block-add-to-cart-with-options form, form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } /* Abas de detalhes do produto viram lista sanfonada no visual */ .dc-produto__detalhes { margin-top: 8px !important; } /* Avisos da loja */ .wc-block-components-notice-banner, .woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius: 16px !important; border: 1px solid var(--border) !important; background: var(--surface) !important; color: var(--text) !important; padding: 16px 20px !important; font-size: 14px; } .wc-block-components-notice-banner.is-error, .woocommerce-error { border-color: color-mix(in srgb, var(--danger) 40%, transparent) !important; background: var(--danger-bg) !important; } .wc-block-components-notice-banner > svg { fill: currentColor; background: none !important; } /* ========================================================================== Sacola (gaveta do mini-cart) ========================================================================== */ .wc-block-mini-cart__drawer .components-modal__content, .wc-block-mini-cart__drawer { background: var(--surface) !important; color: var(--text); } .wc-block-components-drawer__screen-overlay { background: rgba(58, 18, 22, .42) !important; } /* Sacola fechada sai da ordem do teclado (ela fica no HTML com aria-hidden). O atraso deixa a saída animar. */ .wc-block-components-drawer__screen-overlay--is-hidden .wc-block-mini-cart__drawer { visibility: hidden; transition: visibility 0s linear 400ms; } .wc-block-mini-cart__drawer.wc-block-components-drawer { max-width: 480px; width: 100%; border-radius: 24px 0 0 24px; border-left: 1px solid var(--border); box-shadow: none !important; } .wc-block-mini-cart__title { font: 400 var(--t-h4-size)/var(--t-h4-lh) var(--font-texto) !important; letter-spacing: -0.01em; margin: 32px 32px 16px !important; mask-image: none !important; } .wc-block-components-drawer__close { top: 28px !important; right: 28px !important; width: 40px; height: 40px; border-radius: var(--r-ctl); border: 1px solid var(--border) !important; background: var(--fill) !important; display: flex; align-items: center; justify-content: center; } .wc-block-mini-cart__items { padding: 0 32px !important; } .wc-block-mini-cart__products-table .wc-block-cart-items__row { border-top: 1px solid var(--border); padding: 24px 0 !important; } .wc-block-mini-cart__products-table .wc-block-cart-items__row:first-child { border-top: 0; padding-top: 8px !important; } .wc-block-cart-item__image img { border-radius: 12px; background: var(--media); aspect-ratio: 4 / 5; object-fit: cover; } .wc-block-components-product-name { font: 400 16px/24px var(--font-texto) !important; color: var(--text) !important; text-decoration: none !important; } .wc-block-components-product-metadata, .wc-block-components-product-details { font-size: 14px; color: var(--text-muted); } .wc-block-cart-item__remove-link { font-size: 14px !important; color: var(--text-muted) !important; text-decoration: none !important; } .wc-block-cart-item__remove-link:hover { color: var(--text) !important; } .wc-block-mini-cart__footer { padding: 24px 32px 32px !important; border-top: 1px solid var(--border); box-shadow: none !important; } .wc-block-mini-cart__footer-subtotal { font: 400 var(--t-h5-size)/var(--t-h5-lh) var(--font-texto); } .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value { font: 300 24px/32px var(--font-titulo); font-variant-numeric: tabular-nums; } .wc-block-mini-cart__footer-actions { display: flex !important; flex-direction: column-reverse; gap: 12px !important; } .wc-block-mini-cart__footer-actions .wc-block-components-button { width: 100%; min-height: 48px; font-size: 16px; } .wc-block-mini-cart__footer-cart.wc-block-components-button { background: var(--btn2-bg) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } .wc-block-mini-cart__footer-cart.wc-block-components-button:hover { background: var(--fill-hover) !important; border-color: var(--border-hover) !important; } .wc-block-components-drawer, .wc-block-components-drawer * { box-shadow: none; } /* Celular: a tabela da sacola passava 11px da borda e cortava o preço. */ @media (max-width: 640px) { .wc-block-mini-cart__items { padding: 0 20px !important; box-sizing: border-box; max-width: 100%; overflow-x: hidden; } .wc-block-mini-cart__products-table { width: 100% !important; } .wc-block-mini-cart__title { margin: 28px 20px 16px !important; } .wc-block-mini-cart__footer { padding: 20px 20px 24px !important; } } /* Links dos avisos do checkout ("Clique aqui para entrar", cupom) com a cor do tema, não o azul do WooCommerce. */ .woocommerce-info a, .woocommerce-form-login-toggle a, .woocommerce-form-coupon-toggle a, .showlogin, .showcoupon { color: var(--text) !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-hover); } .woocommerce-info a:hover, .showlogin:hover, .showcoupon:hover { text-decoration-color: currentColor; } /* ========================================================================== Sacola e checkout (blocos do WooCommerce) ========================================================================== */ .dc-checkout-pagina { padding-top: calc(var(--hdr-top) + var(--hdr-h) + 48px) !important; } .wc-block-cart, .wc-block-checkout { margin-top: 32px !important; } .wc-block-components-sidebar .wc-block-components-panel, .wc-block-checkout__sidebar, .wc-block-cart__sidebar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-r); padding: var(--card-pad) !important; } .wc-block-components-title.wc-block-components-title { font: 400 var(--t-h5-size)/var(--t-h5-lh) var(--font-texto) !important; letter-spacing: -0.005em; } .wc-block-components-checkout-step { border: 0 !important; } .wc-block-components-checkout-step__heading { margin-bottom: 16px !important; } .wc-block-components-checkout-step__title { font: 300 var(--t-h3-size)/var(--t-h3-lh) var(--font-titulo) !important; letter-spacing: -0.015em; } .wc-block-components-text-input input, .wc-block-components-combobox .components-combobox-control__input, .wc-blocks-components-select__select, .wc-block-components-textarea, .wc-block-components-address-form select { min-height: 48px !important; border-radius: var(--r-ctl) !important; border: 1px solid var(--border-hover) !important; background: var(--surface) !important; color: var(--text) !important; font-size: 16px !important; padding-left: 20px !important; box-shadow: none !important; } .wc-block-components-textarea { border-radius: 16px !important; } .wc-block-components-text-input label, .wc-block-components-combobox label { left: 21px !important; color: var(--text-subtle) !important; } .wc-block-components-text-input input:focus, .wc-blocks-components-select__select:focus { border-color: var(--border-strong) !important; box-shadow: var(--focus-ring) !important; } .wc-block-components-text-input.has-error input, .wc-block-components-validation-error { border-color: var(--danger) !important; color: var(--danger); } .wc-block-components-radio-control__option, .wc-block-components-radio-control-accordion-option { border: 1px solid var(--border) !important; border-radius: 16px !important; background: var(--surface); margin-bottom: 8px !important; box-shadow: none !important; transition: border-color 250ms var(--ease), background-color 250ms var(--ease); } .wc-block-components-radio-control__option-checked, .wc-block-components-radio-control-accordion-option--checked-option-highlighted, .wc-block-components-radio-control__option--checked-option-highlighted { border-color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 6%, var(--surface)) !important; } .wc-block-components-radio-control__input:checked { border-color: var(--accent) !important; } .wc-block-components-radio-control__input:checked::before { background: var(--accent) !important; } .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } .wc-block-components-checkout-place-order-button, .wc-block-cart__submit-button { min-height: 48px !important; font-size: 16px !important; width: 100%; } .wc-block-components-totals-item__label { color: var(--text-muted); } .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font: 300 24px/32px var(--font-titulo); font-variant-numeric: tabular-nums; } .wc-block-components-order-summary-item__image img { border-radius: 12px; } .wc-block-components-order-summary-item__quantity { background: var(--btn-bg) !important; color: var(--btn-text) !important; border: 0 !important; box-shadow: none !important; } /* Sacola tradicional (woocommerce/cart/*.php) */ body .dc-checkout-pagina .woocommerce:has(.dc-sacola) { margin-top: var(--space-48); } .dc-sacola { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-64); align-items: start; } .dc-sacola__itens { list-style: none; margin: 0; padding: 0; } .dc-sacola__item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "foto info sub" "foto acoes sub"; grid-template-rows: auto 1fr; column-gap: 24px; row-gap: 16px; padding: 24px 0; } .dc-sacola__item:first-child { padding-top: 0; } .dc-sacola__item:last-child { padding-bottom: 0; } .dc-sacola__item + .dc-sacola__item { border-top: 1px solid var(--border); } .dc-sacola__foto { grid-area: foto; } .dc-sacola__foto img { display: block; width: 96px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 12px; background: var(--media); } .dc-sacola__info { grid-area: info; min-width: 0; } .dc-sacola__nome { font: 400 var(--t-h5-size)/var(--t-h5-lh) var(--font-texto); letter-spacing: -0.005em; margin: 0; } .dc-sacola__nome a { color: var(--text); text-decoration: none; transition: color 250ms var(--ease); } .dc-sacola__nome a:hover { color: var(--text-muted); } .dc-sacola__info dl.variation { display: flex; flex-wrap: wrap; gap: 0; margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--text-muted); } .dc-sacola__info dl.variation dt, .dc-sacola__info dl.variation dd, .dc-sacola__info dl.variation p { display: inline; margin: 0; font-weight: 400; } .dc-sacola__info dl.variation dt { margin-right: 4px; } .dc-sacola__info dl.variation dd:not(:last-child) { margin-right: 16px; } .dc-sacola__unitario { margin: 4px 0 0 !important; font-size: 14px; line-height: 20px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .dc-sacola__acoes { grid-area: acoes; display: flex; align-items: center; gap: 8px; align-self: end; } .dc-sacola__subtotal { grid-area: sub; margin: 0 !important; font-variant-numeric: tabular-nums; white-space: nowrap; } .dc-qtd { display: inline-flex; align-items: center; height: 40px; box-sizing: border-box; border: 1px solid var(--border-hover); border-radius: var(--r-ctl); } .dc-qtd__botao { width: 36px; height: 38px; padding: 0; border: 0; border-radius: var(--r-ctl); background: none; color: var(--text); font: 400 18px/1 var(--font-texto); cursor: pointer; transition: color 250ms var(--ease); } .dc-qtd__botao:disabled { color: var(--text-disabled); cursor: not-allowed; } body .woocommerce .dc-qtd input.qty { box-sizing: border-box; border-radius: 0; box-shadow: none; outline-offset: -2px; width: 32px; height: 38px; padding: 0; border: 0; background: none; color: var(--text); font: 400 16px/24px var(--font-texto); font-variant-numeric: tabular-nums; text-align: center; -moz-appearance: textfield; appearance: textfield; } .dc-qtd input.qty::-webkit-inner-spin-button, .dc-qtd input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .dc-qtd__fixa { padding: 0 16px; font-size: 14px; color: var(--text-muted); } body .woocommerce a.remove.dc-sacola__remover { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-ctl); color: var(--text-muted) !important; background: none !important; font-size: 0; transition: color 250ms var(--ease); } body .woocommerce a.remove.dc-sacola__remover::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--i-lixeira) center / contain no-repeat; mask: var(--i-lixeira) center / contain no-repeat; } body .woocommerce a.remove.dc-sacola__remover:hover { color: var(--text) !important; } .dc-sacola__atualizar { margin-top: 24px; } .js .dc-sacola__atualizar { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } body .woocommerce .cart-collaterals .dc-resumo { float: none; width: auto; box-sizing: border-box; } body .woocommerce .cart-collaterals { width: auto; float: none; } .dc-resumo { position: sticky; top: var(--sticky-top); background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-r); padding: var(--space-32); } .dc-resumo__titulo { font: 400 var(--t-h5-size)/var(--t-h5-lh) var(--font-texto) !important; letter-spacing: -0.005em; margin: 0 0 8px !important; } body .woocommerce .dc-resumo__tabela { width: 100%; border: 0; border-collapse: collapse; border-spacing: 0; margin: 0; } body .woocommerce .dc-resumo__tabela th, body .woocommerce .dc-resumo__tabela td { padding: 12px 0; border: 0; background: none; vertical-align: baseline; } .dc-resumo__tabela th { white-space: nowrap; padding-right: 16px !important; } .dc-resumo__tabela tr + tr th, .dc-resumo__tabela tr + tr td { border-top: 1px solid var(--border); } .dc-resumo__tabela th { text-align: left; font-weight: 400; color: var(--text-muted); } .dc-resumo__tabela td { text-align: right; font-variant-numeric: tabular-nums; } .dc-resumo__tabela td.dc-resumo__nota { color: var(--text-muted); } .dc-resumo__tabela .order-total th { font: 500 16px/32px var(--font-texto); color: var(--text); } body .woocommerce .dc-resumo__tabela .order-total th, body .woocommerce .dc-resumo__tabela .order-total td { vertical-align: middle; } .dc-resumo__tabela .order-total td { font: 300 24px/32px var(--font-titulo); color: var(--text); } .dc-resumo__tabela .order-total td strong { font-weight: 300; } .dc-resumo__tabela .woocommerce-remove-coupon { margin-left: 8px; font-size: 14px; color: var(--text-muted); } .dc-cupom { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 16px; } .dc-cupom summary { display: flex; align-items: center; justify-content: space-between; min-height: 24px; font: 500 14px/20px var(--font-texto); color: var(--text); cursor: pointer; list-style: none; transition: color 250ms var(--ease); } .dc-cupom summary::-webkit-details-marker { display: none; } .dc-cupom summary::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--i-chevron) center / contain no-repeat; mask: var(--i-chevron) center / contain no-repeat; transition: transform 250ms var(--ease); } .dc-cupom[open] summary::after { transform: rotate(180deg); } .dc-cupom summary:hover { color: var(--text-muted); } .dc-cupom__campo { display: flex; gap: 8px; margin-top: 12px; } body .woocommerce .dc-cupom__campo input.input-text { flex: 1; min-width: 0; height: 40px; box-sizing: border-box; padding: 0 16px; border: 1px solid var(--border-hover); border-radius: var(--r-ctl); background: var(--surface); color: var(--text); font: 400 16px/24px var(--font-texto); } body .woocommerce .dc-cupom__campo input.input-text:focus { border-color: var(--border-strong); outline: none; box-shadow: var(--focus-ring); } body .woocommerce .dc-cupom__campo .button { height: 40px; padding: 0 16px; border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--btn2-bg); color: var(--text); font: 500 15px/24px var(--font-texto); } body .woocommerce .dc-cupom__campo .button:hover { background: var(--fill-hover); border-color: var(--border-hover); } .wc-proceed-to-checkout { margin-top: 24px; padding: 0 !important; } body .woocommerce .wc-proceed-to-checkout a.checkout-button { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; min-height: 48px; margin: 0; padding: 12px 24px; border-radius: var(--r-ctl); background: var(--btn-bg); color: var(--btn-text); font: 500 16px/24px var(--font-texto); text-decoration: none; } body .woocommerce .wc-proceed-to-checkout a.checkout-button:hover { background: var(--btn-bg-hover); } body .woocommerce .dc-vazio .return-to-shop { margin: 8px 0 0 !important; } body .woocommerce .dc-vazio .return-to-shop a { display: inline-flex; align-items: center; min-height: 48px; box-sizing: border-box; padding: 12px 24px; font: 500 16px/24px var(--font-texto); } @media (max-width: 1024px) { .dc-sacola { grid-template-columns: 1fr; gap: var(--space-48); } .dc-resumo { position: static; } } @media (max-width: 640px) { .dc-sacola__item { grid-template-columns: 80px minmax(0, 1fr) auto; grid-template-areas: "foto info info" "foto acoes sub"; column-gap: 16px; } .dc-sacola__foto img { width: 80px; } .dc-sacola__subtotal { align-self: center; } .dc-resumo { padding: var(--card-pad); } } /* Header do checkout */ .dc-header-checkout .dc-protegido { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-subtle); justify-self: end; padding-right: 16px; margin: 0; white-space: nowrap; } .dc-header-checkout .dc-protegido::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--i-cadeado) center / contain no-repeat; mask: var(--i-cadeado) center / contain no-repeat; } .dc-header-checkout { grid-template-columns: 1fr 1fr !important; } /* Pedido confirmado */ .wc-block-order-confirmation-status { padding: 0 !important; } .wc-block-order-confirmation-status h1 { margin: 16px 0 12px !important; font-size: var(--t-h1p-size); line-height: var(--t-h1p-lh); } .wc-block-order-confirmation-status h1::before { content: ""; display: block; width: 32px; height: 32px; background: var(--accent-text); margin-bottom: 16px; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; } .wc-block-order-confirmation-summary { border: 1px solid var(--border); border-radius: var(--card-r); background: var(--surface); padding: var(--card-pad); } .wc-block-order-confirmation-totals table { border-collapse: collapse; width: 100%; } .wc-block-order-confirmation-totals th, .wc-block-order-confirmation-totals td { border: 0; border-top: 1px solid var(--border); padding: 12px 0; } .dc-proximos { border: 1px solid var(--border); border-radius: var(--card-r); background: var(--surface); padding: 32px !important; } .dc-proximos h2 { font: 400 var(--t-h5-size)/var(--t-h5-lh) var(--font-texto) !important; margin: 0 0 24px !important; letter-spacing: -0.005em; } .dc-proximos ol { list-style: none; margin: 0; padding: 0; } .dc-proximos li { position: relative; padding: 0 0 24px 40px; } .dc-proximos li:last-child { padding-bottom: 0; } .dc-proximos li::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: var(--r-ctl); border: 1px solid var(--border-strong); box-sizing: border-box; background: var(--surface); } .dc-proximos li:first-child::before { background: var(--accent); border-color: var(--accent); } .dc-proximos li::after { content: ""; position: absolute; left: 11.5px; top: 28px; bottom: 4px; width: 1px; background: var(--border-strong); } .dc-proximos li:last-child::after { display: none; } .dc-proximos strong { display: block; font-weight: 400; } .dc-proximos span { font-size: 14px; line-height: 20px; color: var(--text-subtle); } /* ========================================================================== Rodapé (NAV-08) ========================================================================== */ .dc-rodape { background: var(--bg-subtle); padding-top: var(--space-80) !important; padding-bottom: 32px !important; margin: 0 !important; } .dc-rodape__topo { display: grid !important; grid-template-columns: 1fr repeat(3, 224px); gap: 24px; align-items: start; } .dc-rodape__topo > * { margin: 0 !important; } .dc-rodape h2 { font: 500 14px/20px var(--font-texto) !important; letter-spacing: 0; margin: 0 0 16px !important; color: var(--text); } .dc-rodape ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .dc-rodape li a { display: inline-block; padding: 6px 0; font-size: 14px; line-height: 20px; color: var(--text-muted); } .dc-rodape li a:hover { color: var(--text); } .dc-rodape__base { display: flex !important; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: var(--space-64) !important; padding-top: 24px; border-top: 1px solid var(--border); font-size: 14px; line-height: 20px; color: var(--text-subtle); } .dc-rodape__base p { margin: 0; } /* Selo "Feito por" da Micas: ícone do M numa caixa só com contorno (regra global de 02/11/2026). */ .dc-rodape__base .dc-credito { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-subtle); text-decoration: none; transition: color 250ms var(--ease), border-color 250ms var(--ease); } .dc-rodape__base .dc-credito:hover { color: var(--text); border-color: var(--border-hover); } .dc-credito__marca { height: 18px; width: auto; flex: none; } .dc-rodape__trecho { white-space: nowrap; } .dc-rodape__trecho:last-child { white-space: normal; } @media (max-width: 1024px) { .dc-rodape__topo { grid-template-columns: 1fr 1fr 1fr; } .dc-rodape__topo > :first-child { grid-column: 1 / -1; margin-bottom: 16px !important; } } @media (max-width: 640px) { .dc-rodape__topo { grid-template-columns: 1fr 1fr; } } /* 404 */ .dc-404 { min-height: 100svh; display: flex !important; flex-direction: column; justify-content: center; padding-top: calc(var(--hdr-top) + var(--hdr-h) + 48px) !important; } /* ========================================================================== Movimento (MOV-04): uma entrada só, ao rolar. Sem JS, tudo aparece normal. ========================================================================== */ .js .dc-revela { opacity: 0; transform: translateY(12px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out), background-color 400ms var(--ease), border-color 400ms var(--ease), color 400ms var(--ease); transition-delay: var(--atraso, 0ms), var(--atraso, 0ms), 0ms, 0ms, 0ms; } .js .dc-revela.is-visivel { opacity: 1; transform: none; } @media (max-width: 640px) { .js .dc-revela { transform: translateY(8px); } } @media (hover: none) { .dc-card:hover img, .wc-block-product:hover .wc-block-components-product-image img { transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } .js .dc-revela { opacity: 1; transform: none; } } /* Mostrar só no desktop / só no celular (RSP-04) */ @media (max-width: 640px) { .only-d { display: none !important; } } @media (min-width: 641px) { .only-m { display: none !important; } } /* Complementos de templates */ .dc-titulo-colecao { margin: 0 0 var(--space-48) !important; } .dc-titulo-card { font: 400 var(--t-h5-size)/var(--t-h5-lh) var(--font-texto) !important; letter-spacing: -0.005em; margin: 0 0 16px !important; } .dc-preco-bloco { margin: 0; } .dc-confirmacao { display: grid !important; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; } .dc-confirmacao > * { margin: 0 !important; } .dc-confirmacao__principal { display: flex !important; flex-direction: column; gap: 32px; } .dc-confirmacao__principal > * { margin: 0 !important; } .dc-confirmacao__resumo { position: sticky; top: var(--sticky-top); padding: var(--space-32) !important; display: flex !important; flex-direction: column; gap: 32px; } .dc-confirmacao__resumo > * { margin: 0 !important; } @media (max-width: 1024px) { .dc-confirmacao { grid-template-columns: 1fr; gap: 32px; } .dc-confirmacao__resumo { position: static; } } .dc-produto-pagina { padding-bottom: 0 !important; } .dc-produto__compra .wp-block-post-content > * { max-width: 680px; } .dc-painel__titulo { font: 300 var(--t-h3-size)/var(--t-h3-lh) var(--font-titulo); letter-spacing: -0.015em; color: var(--text) !important; margin: 0 0 8px !important; } .dc-texto .dc-painel { margin-top: var(--space-64) !important; max-width: none; } .dc-texto .dc-painel p { max-width: none; } .dc-texto > .wp-block-details:has(+ :not(.wp-block-details)), .dc-texto > .wp-block-details:last-child { border-bottom: 1px solid var(--border); } /* Produto: ajustes finos da área de compra */ .dc-produto .dc-galeria, .dc-produto .wp-block-woocommerce-product-image-gallery, .dc-produto .woocommerce-product-gallery, .dc-produto .woocommerce-product-gallery__wrapper { min-width: 0; width: 100% !important; max-width: none !important; float: none !important; } .dc-produto .woocommerce-product-gallery__wrapper { margin: 0; } .dc-produto__compra .wp-block-woocommerce-product-price { margin-top: 16px !important; } .dc-produto__compra .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute { margin: 0 0 24px !important; } .dc-produto__compra .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute > .wp-block-group { margin: 0 !important; gap: 12px !important; } .dc-produto__compra .wp-block-woocommerce-add-to-cart-with-options-variation-description, .dc-produto__compra .wp-block-woocommerce-product-stock-indicator { margin: 0 0 16px !important; font-size: 14px; color: var(--text-muted); } .dc-produto__compra .wp-block-woocommerce-product-stock-indicator:empty { display: none; } .dc-produto__compra .wp-block-woocommerce-add-to-cart-with-options > form, .dc-produto__compra .wp-block-woocommerce-add-to-cart-with-options { gap: 0; } .dc-produto__compra .wp-block-woocommerce-add-to-cart-with-options .wp-block-group.is-layout-flex { gap: 12px; flex-wrap: nowrap; align-items: stretch; } .dc-produto__compra .wp-block-woocommerce-product-button { flex: 1; margin: 0 !important; } .dc-produto__compra .wp-block-woocommerce-product-button .wp-block-button__link { width: 100%; } .wc-block-components-product-button__button.disabled { opacity: 1; background: var(--fill-active); color: var(--text-muted); cursor: not-allowed; } .wc-block-components-quantity-selector { width: auto !important; margin: 0 !important; } .wc-block-components-quantity-selector::after { display: none !important; } .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { border: 0 !important; box-shadow: none !important; min-width: 40px; height: 100%; padding: 0; } .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { min-width: 40px; opacity: 1; } .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled { color: var(--text-disabled); } @media (max-width: 640px) { .dc-produto__compra .wp-block-woocommerce-add-to-cart-with-options .wp-block-group.is-layout-flex { flex-wrap: wrap; } .dc-produto__compra .wp-block-woocommerce-product-button { flex-basis: 100%; } } /* Sacola: respiro lateral do rodapé e botão de fechar */ .wc-block-mini-cart__footer { box-sizing: border-box; } .wc-block-mini-cart__footer-actions .wc-block-components-button { box-sizing: border-box; max-width: 100%; } .wc-block-components-drawer__close { top: 24px !important; right: 24px !important; color: var(--text) !important; opacity: 1 !important; } .wc-block-components-drawer__close svg { width: 20px; height: 20px; fill: currentColor; } .wc-block-mini-cart__title { margin: 24px 88px 16px 32px !important; } .wc-block-components-quantity-selector { border-radius: var(--r-ctl) !important; overflow: hidden; } .wc-block-mini-cart__products-table .wc-block-components-quantity-selector { height: 40px; } .wc-block-components-totals-item__description { font-size: 14px; line-height: 20px; color: var(--text-muted); margin-top: 4px; } /* Título da abertura nunca passa de 2 linhas: abaixo de 1280px o apoio desce. */ @media (max-width: 1279px) { .dc-hero__conteudo { grid-template-columns: minmax(0, 1fr); gap: 24px; } .dc-hero__apoio, .dc-hero__conteudo > .dc-lead { max-width: 560px; } } @media (max-width: 640px) { .dc-destaque__midia .dc-foto-detalhe { aspect-ratio: auto; min-height: 140px; } .dc-destaque__selo { padding: 16px !important; } } @media (max-width: 640px) { nav[aria-label="Categorias"] { width: calc(100% + 2 * var(--page-margin)); margin-inline: calc(-1 * var(--page-margin)); } .dc-chips { flex-wrap: nowrap; overflow-x: auto; padding: 0 var(--page-margin); scrollbar-width: none; } .dc-chips::-webkit-scrollbar { display: none; } .dc-filtros .dc-chips { margin: 0; width: auto; } } @media (max-width: 640px) { .wc-block-product-template:not(.dc-loja-grade *) { flex-wrap: nowrap !important; } } @media (max-width: 640px) { .wc-block-product-template:not(.dc-loja-grade *) { padding: 0 var(--page-margin) 8px !important; scroll-padding-inline: var(--page-margin); } } .dc-vazio { padding: var(--space-48) 0 !important; display: flex !important; flex-direction: column; gap: 16px; align-items: flex-start; } .dc-vazio > * { margin: 0 !important; } .dc-vazio .wp-block-buttons { margin-top: 8px !important; } /* ========================================================================== Checkout clássico (compatível com CPF, número e bairro do Brazilian Market) ========================================================================== */ .dc-checkout-pagina > * { max-width: var(--wp--style--global--wide-size, 1280px) !important; } .dc-checkout-pagina > .wp-block-post-title { margin: 0 0 var(--space-48) !important; font-size: var(--t-h1p-size); line-height: var(--t-h1p-lh); letter-spacing: -0.025em; } .woocommerce-form-login-toggle, .woocommerce-form-coupon-toggle { margin-bottom: 12px; } .woocommerce-form-login-toggle .woocommerce-info, .woocommerce-form-coupon-toggle .woocommerce-info { display: flex; gap: 8px; align-items: center; margin: 0; } .woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { display: none !important; } .woocommerce-info a, .woocommerce-message a { text-decoration: underline; text-underline-offset: 3px; } form.checkout_coupon, form.woocommerce-form-login { border: 1px solid var(--border); border-radius: var(--card-r); background: var(--surface); padding: var(--card-pad); margin: 0 0 24px; } form.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 48px; align-items: start; margin-top: 24px; } /* Avisos de erro na linha 1, acima das duas colunas; sem aviso a linha fica vazia (gap de linha 0). */ form.woocommerce-checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; grid-row: 1; margin-bottom: 24px; } form.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 2 / span 3; } form.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 2; } form.woocommerce-checkout #order_review { grid-column: 2; grid-row: 3; } #customer_details.col2-set { display: flex; flex-direction: column; gap: var(--space-48); width: 100%; } #customer_details .col-1, #customer_details .col-2 { width: 100% !important; float: none !important; } #customer_details::before, #customer_details::after { display: none; } .woocommerce-checkout h3, #order_review_heading { font: 300 var(--t-h3-size)/var(--t-h3-lh) var(--font-titulo); letter-spacing: -0.015em; margin: 0 0 24px; } #ship-to-different-address { font: 400 var(--t-h5-size)/var(--t-h5-lh) var(--font-texto); } #ship-to-different-address label { display: flex; align-items: center; gap: 12px; cursor: pointer; } .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper, .woocommerce-account-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; } .woocommerce-checkout .form-row { grid-column: 1 / -1; margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; display: flex; flex-direction: column; gap: 8px; } .woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { grid-column: auto; } .woocommerce-checkout .form-row label { font: 500 14px/20px var(--font-texto); color: var(--text); margin: 0; } .woocommerce-checkout .form-row label .required { color: var(--danger); text-decoration: none; } .woocommerce-checkout .form-row label .optional { color: var(--text-subtle); font-weight: 400; } .woocommerce form .input-text, .woocommerce form select, .woocommerce-checkout .select2-container .select2-selection--single { box-sizing: border-box; width: 100%; height: 48px; border-radius: var(--r-ctl); border: 1px solid var(--border-hover); background: var(--surface); color: var(--text); font: 400 16px/24px var(--font-texto); padding: 0 20px; box-shadow: none; transition: border-color 250ms var(--ease); } .woocommerce form textarea.input-text { height: 120px; border-radius: 16px; padding: 12px 20px; resize: vertical; } .woocommerce form .input-text:hover, .woocommerce form select:hover { border-color: var(--border-strong); } .woocommerce form .input-text:focus, .woocommerce form select:focus { border-color: var(--border-strong); box-shadow: var(--focus-ring); outline: none; } .woocommerce form .input-text::placeholder { color: var(--text-subtle); } .woocommerce-checkout .select2-container .select2-selection--single { display: flex; align-items: center; } .woocommerce-checkout .select2-container .select2-selection__rendered { padding: 0 !important; line-height: 46px !important; color: var(--text) !important; } .woocommerce-checkout .select2-container .select2-selection__arrow { height: 46px !important; right: 14px !important; } .select2-dropdown { border: 1px solid var(--border-hover) !important; border-radius: 16px !important; overflow: hidden; background: var(--surface) !important; } .select2-results__option--highlighted { background: var(--fill-active) !important; color: var(--text) !important; } .woocommerce form .form-row.woocommerce-invalid .input-text, .woocommerce form .form-row.woocommerce-invalid select { border-color: var(--danger); } .woocommerce form .form-row.woocommerce-validated .input-text { border-color: var(--border-hover); } .woocommerce-checkout .checkbox, .woocommerce-form__label-for-checkbox { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 12px; font-weight: 400 !important; cursor: pointer; } .woocommerce-checkout input[type="checkbox"], .woocommerce-checkout input[type="radio"] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; } /* Resumo do pedido: cartão fixo ao lado */ #order_review { position: sticky; top: var(--sticky-top); background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-r); padding: var(--space-32); } #order_review_heading { margin-top: 0; } #order_review .shop_table { width: 100%; border: 0; border-collapse: collapse; margin: 0 0 24px; font-size: 14px; } #order_review .shop_table th, #order_review .shop_table td { border: 0; border-top: 1px solid var(--border); padding: 12px 0; background: none; text-align: left; } #order_review .shop_table thead th { border-top: 0; padding-top: 0; font-weight: 500; color: var(--text-subtle); } #order_review .shop_table td:last-child, #order_review .shop_table th:last-child { text-align: right; font-variant-numeric: tabular-nums; } #order_review .shop_table .product-quantity { color: var(--text-subtle); font-weight: 400; } #order_review .shop_table .order-total td { font: 300 24px/32px var(--font-titulo); color: var(--text); } #order_review .shop_table .order-total th { font: 500 16px/32px var(--font-texto); } /* Cor e tamanho do item: "Cor: Café Tamanho: 57", sem o float do WooCommerce que trocava os valores de linha. */ #order_review .shop_table dl.variation { display: flex; flex-wrap: wrap; margin: 4px 0 0; color: var(--text-muted); font-size: 14px; line-height: 20px; } #order_review .shop_table dl.variation dt, #order_review .shop_table dl.variation dd, #order_review .shop_table dl.variation p { display: inline; float: none; clear: none; margin: 0; padding: 0; font-weight: 400; } #order_review .shop_table dl.variation dt { margin-right: 4px; } #order_review .shop_table dl.variation dd:not(:last-child) { margin-right: 16px; } #payment { background: none !important; border-radius: 0; } #payment ul.payment_methods { list-style: none; margin: 0 0 24px; padding: 0 !important; border: 0 !important; display: flex; flex-direction: column; gap: 8px; } #payment ul.payment_methods li { border: 1px solid var(--border); border-radius: 16px; padding: 16px; background: var(--surface); transition: border-color 250ms var(--ease), background-color 250ms var(--ease); } #payment ul.payment_methods li:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); } #payment ul.payment_methods li.woocommerce-notice { border: 0; padding: 0; background: none; font-size: 14px; color: var(--text-muted); } #payment div.payment_box { background: var(--fill) !important; border-radius: 12px; color: var(--text-muted); font-size: 14px; margin: 12px 0 0 !important; } #payment div.payment_box::before { display: none !important; } #payment .place-order { padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 16px; } .woocommerce-privacy-policy-text p, .woocommerce-terms-and-conditions-wrapper { font-size: 14px; line-height: 20px; color: var(--text-muted); margin: 0; } #place_order { width: 100%; min-height: 48px; padding: 12px 24px; font-size: 16px; border-radius: var(--r-ctl); background: var(--btn-bg); color: var(--btn-text); border: 0; cursor: pointer; transition: background-color 250ms var(--ease); } #place_order:hover { background: var(--btn-bg-hover); } .blockUI.blockOverlay { background: var(--bg) !important; opacity: .5 !important; } @media (max-width: 1024px) { form.woocommerce-checkout { grid-template-columns: 1fr; gap: 32px; } form.woocommerce-checkout #customer_details, form.woocommerce-checkout #order_review_heading, form.woocommerce-checkout #order_review { grid-column: 1; grid-row: auto; } #order_review { position: static; } } @media (max-width: 640px) { .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; } #order_review { padding: var(--card-pad); } } /* Checkout clássico: vence os estilos padrão do WooCommerce (seletores mais fortes) */ body .dc-checkout-pagina .woocommerce { max-width: none; margin: 0; padding: 0; } body .woocommerce form .form-row .input-text, body .woocommerce form .form-row select, body .woocommerce-page form .form-row .input-text { box-sizing: border-box; width: 100%; height: 48px; border-radius: var(--r-ctl); border: 1px solid var(--border-hover); background: var(--surface); color: var(--text); font: 400 16px/24px var(--font-texto); padding: 0 20px; box-shadow: none; outline: none; transition: border-color 250ms var(--ease); } body .woocommerce form .form-row textarea.input-text { height: 120px; border-radius: 16px; padding: 12px 20px; } body .woocommerce form .form-row .input-text:hover, body .woocommerce form .form-row select:hover { border-color: var(--border-strong); } body .woocommerce form .form-row .input-text:focus, body .woocommerce form .form-row select:focus { border-color: var(--border-strong); box-shadow: var(--focus-ring); } body .woocommerce form .form-row.woocommerce-invalid .input-text, body .woocommerce form .form-row.woocommerce-invalid select { border-color: var(--danger); } body .woocommerce form .form-row.woocommerce-validated .input-text, body .woocommerce form .form-row.woocommerce-validated select { border-color: var(--border-hover); } body .woocommerce form .form-row { margin: 0; padding: 0; } body .woocommerce form .form-row label { line-height: 20px; margin: 0; } body .woocommerce-checkout #payment ul.payment_methods li { line-height: 24px; } body .woocommerce-checkout #payment ul.payment_methods li img { vertical-align: middle; max-height: 24px; } .woocommerce-checkout .woocommerce-billing-fields .form-row#billing_country_field strong { font-weight: 400; height: 48px; display: flex; align-items: center; padding: 0 20px; border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--fill); } .woocommerce form .woocommerce-input-wrapper { width: 100%; } /* Menu aberto: o vidro do header não pode prender a gaveta (backdrop-filter cria contêiner para fixed). */ .dc-header:has(.is-menu-open) { -webkit-backdrop-filter: none; backdrop-filter: none; } /* ========================================================================== Home: abertura. A foto da hero encolhe com a rolagem até virar a foto do card do Chapéu Pantaneiro. Só ≥1025px e sem movimento reduzido (MOV-08); fora disso fica a hero com foto parada e o card logo abaixo. ========================================================================== */ .dc-vitrine { position: relative; background: #ffffff; } .dc-vitrine__palco { position: relative; } .dc-vitrine__heroi { box-sizing: border-box; } .dc-vitrine .dc-hero__slides picture { display: contents; } .dc-vitrine__destaque { padding: var(--sec-pad) max(var(--page-margin), (100% - 1280px) / 2); } .dc-vitrine__tela { display: none; } .dc-vitrine.is-animado { height: 260svh; } .dc-vitrine .dc-foto-principal img { object-position: center 30%; } .dc-vitrine.is-animado .dc-vitrine__palco { position: sticky; top: 0; height: 100svh; overflow: hidden; } .dc-vitrine.is-animado .dc-vitrine__heroi { position: absolute; inset: 0; z-index: 3; min-height: 0; background: transparent; } .dc-vitrine.is-pronto .dc-hero__slides { visibility: hidden; } .dc-vitrine.is-animado .dc-vitrine__tela { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; } .dc-vitrine.is-animado .dc-vitrine__destaque { box-sizing: border-box; height: 100%; display: flex; align-items: center; padding: var(--sticky-top) max(var(--page-margin), (100% - 1280px) / 2) 32px; } .dc-vitrine.is-animado .dc-destaque { width: 100%; } .dc-vitrine.is-animado .dc-destaque__midia { height: min(calc(100svh - var(--sticky-top) - 32px), 720px); grid-template-rows: minmax(0, 1fr) 156px; } .dc-vitrine.is-animado .dc-destaque__midia .dc-foto-principal, .dc-vitrine.is-animado .dc-destaque__midia .dc-foto-detalhe { aspect-ratio: auto; } /* O card e o texto aparecem quando a foto pousa, com a mesma entrada do site (MOV-04). A moldura só esmaece: se ela se mexesse, a foto não encaixaria. */ .dc-vitrine.is-animado .dc-destaque__midia { opacity: 0; transition: opacity 800ms var(--ease-out); } .dc-vitrine.is-animado .dc-destaque__texto > * { opacity: 0; transform: translateY(12px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: var(--atraso, 0ms); } /* Antes de pousar o texto só não recebe clique: continua na ordem do Tab, e o foco rola até ele (tema.js). */ .dc-vitrine.is-animado:not(.is-pousado) .dc-destaque__texto { pointer-events: none; } .dc-vitrine.is-pousado .dc-destaque__midia, .dc-vitrine.is-pousado .dc-destaque__texto > * { opacity: 1; transform: none; } /* Home: a coleção. Um painel por produto, no mesmo formato do destaque do chapéu; no desktop eles se empilham presos ao topo enquanto a página rola (MOV-08). */ .dc-pilha { display: flex; flex-direction: column; gap: 24px; } .dc-pilha__item { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; padding: var(--media-inset) !important; margin: 0 !important; height: min(calc(100svh - var(--sticky-top) - 32px), 640px); background: var(--surface); } .dc-pilha__midia { display: block; border-radius: var(--r-in); overflow: hidden; background: var(--media); } .dc-pilha__midia img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 900ms var(--ease-out); } .dc-pilha__info { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 32px 32px 32px 56px; } .dc-pilha__info > * { margin: 0; } .dc-pilha__info .dc-tag { position: absolute; top: 24px; right: 24px; } .dc-pilha__info h3 { font: 300 var(--t-h3-size)/var(--t-h3-lh) var(--font-titulo); letter-spacing: -0.015em; } .dc-pilha__info h3 a { color: inherit; text-decoration: none; } @media (hover: hover) { .dc-pilha__item:hover .dc-pilha__midia img { transform: scale(1.05); } } .dc-pilha__item { position: sticky; top: calc(var(--sticky-top) + var(--i) * 12px); } @media (max-width: 1024px) { .dc-pilha__item { top: calc(var(--hdr-top) + var(--hdr-h) + 12px + var(--i) * 8px); } } @media (max-width: 1024px) { .dc-pilha__item { grid-template-columns: 1fr; height: auto; } .dc-pilha__midia { aspect-ratio: 4 / 3; } .dc-pilha__info { padding: 24px 16px 16px; gap: 20px; } .dc-pilha__info .dc-tag { top: 24px; right: 16px; } } @media (max-width: 640px) { .dc-pilha { gap: 16px; } .dc-pilha__info { padding: 20px 8px 8px; } .dc-pilha__info .wp-block-button, .dc-pilha__info .wp-block-button__link { width: 100%; } } /* Voo da foto: canvas fixo acima do conteúdo e abaixo da lente e do texto da abertura. */ /* Na abertura com voo, a lente e o texto somem no começo da rolagem (como na Home). */ .dc-abertura-foto::after, .dc-abertura-foto .dc-hero__conteudo { opacity: var(--voo-op, 1); } .dc-abertura-foto:has(~ * [data-voo-destino]) { background: color-mix(in srgb, #0e1f1d calc(var(--voo-op, 1) * 100%), transparent); } .dc-voo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; visibility: hidden; } /* Paralaxe leve nas fotos (só ≥1025px, ligada pelo JS). Usa translate/scale, o zoom do hover continua no transform. */ .dc-paralaxe img { scale: 1.1; translate: 0 var(--py, 0px); } /* Informações do produto em caixas (referência: configurador da Apple). Cada informação na sua caixa, tamanhos em pílulas; tom de preenchimento, sem borda. Raio 12 dentro do card de 20 (FOR-02). */ .dc-caixas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 !important; } .dc-caixa { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--r-in); background: var(--fill); } .dc-caixa--larga { grid-column: 1 / -1; gap: 12px; } .dc-caixa .dc-ico { margin-bottom: 8px; } .dc-caixa__rotulo { font-size: 14px; line-height: 20px; color: var(--text-subtle); } .dc-caixa__valor { white-space: nowrap; } .dc-tamanhos { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .dc-tamanhos li { display: flex; } .dc-tamanhos a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 32px; padding: 0 12px; border-radius: var(--r-ctl); border: 1px solid var(--border-hover); background: var(--surface); color: var(--text); text-decoration: none; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; transition: background-color 250ms var(--ease), border-color 250ms var(--ease); } .dc-tamanhos a:hover { background: var(--surface-hover); border-color: var(--border-strong); } .dc-tamanhos a:active { transform: scale(0.98); } /* Celular: tamanhos pequenos e numa linha só, como as outras caixas do card; a área de toque continua com 40px de altura pelo ::before (CTL-09). */ @media (max-width: 640px) { .dc-caixas { grid-template-columns: minmax(0, 1fr); } .dc-tamanhos { flex-wrap: nowrap; gap: 4px; } .dc-tamanhos li { flex: 0 1 auto; min-width: 0; } .dc-tamanhos a { position: relative; height: 32px; min-width: 0; width: 100%; padding: 0 8px; } .dc-tamanhos a::before { content: ""; position: absolute; inset: -4px 0; } } .dc-pilha__topo > * { margin: 0; } .dc-pilha__n { display: block; font-size: 14px; line-height: 20px; color: var(--text-subtle); font-variant-numeric: tabular-nums; margin-bottom: 8px !important; } .dc-pilha__info .dc-preco-bloco { margin-top: -8px; } .dc-pilha__info { gap: 32px; } /* Pouco espaço (coluna estreita no desktop menor ou celular): as caixas viram linhas. */ .dc-pilha__info, .dc-destaque__texto { container-type: inline-size; } @container (max-width: 430px) { .dc-caixas { grid-template-columns: 1fr; } .dc-caixa:not(.dc-caixa--larga) { flex-direction: row; align-items: center; gap: 12px; padding: 12px 16px; } .dc-caixa:not(.dc-caixa--larga) .dc-ico { margin: 0; } .dc-caixa:not(.dc-caixa--larga) .dc-caixa__valor { margin-left: auto; } } @media (max-width: 640px) { .dc-pilha__info { gap: 24px; } } /* Home: como funciona a compra. Foto grande + quatro cards com a condição em destaque (bento, SEC-06). */ .dc-compra { display: grid; grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 3.5fr)); grid-template-rows: repeat(2, 240px); gap: 24px; } .dc-compra > * { margin: 0 !important; } /* Card escuro (o único de outra cor no bento): o caminho do pedido em três etapas. No desktop a linha enche e cada etapa alcançada acende com a rolagem (MOV-06). */ .dc-compra__trilho { grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 32px !important; color: var(--text); container-type: inline-size; } .dc-compra__trilho h3 { font: 300 var(--t-h3-size)/var(--t-h3-lh) var(--font-titulo); letter-spacing: -0.015em; margin: 0; } @container (max-width: 440px) { .dc-compra__trilho h3 { font: 400 var(--t-h4-size)/var(--t-h4-lh) var(--font-texto); letter-spacing: -0.01em; } } .dc-etapas { list-style: none; margin: 0; padding: 0; } .dc-etapas li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0 0 32px 40px; } .dc-etapas li:last-child { padding-bottom: 0; } .dc-etapas li::before { content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; box-sizing: border-box; border-radius: var(--r-ctl); border: 1px solid var(--border-strong); background: var(--surface); transition: background-color 400ms var(--ease), border-color 400ms var(--ease); } .dc-etapas li::after { content: ""; position: absolute; left: 11.5px; top: 30px; bottom: 4px; width: 1px; background: linear-gradient(var(--accent) calc(var(--enche, 0) * 100%), var(--border-strong) 0); } .dc-etapas li:last-child::after { display: none; } .dc-etapas__quando { font-size: 14px; line-height: 20px; color: var(--text-subtle); } .dc-etapas__oque { font: 400 var(--t-h5-size)/var(--t-h5-lh) var(--font-texto); letter-spacing: -0.005em; color: var(--text-muted); transition: color 400ms var(--ease); } .dc-etapas li.is-aceso::before { background: var(--accent); border-color: var(--accent); } .dc-etapas li.is-aceso .dc-etapas__oque { color: var(--text); } .dc-compra__item { display: flex; flex-direction: column; justify-content: space-between; } .dc-compra__item h3 { font: 300 var(--t-h3-size)/var(--t-h3-lh) var(--font-titulo); letter-spacing: -0.015em; white-space: nowrap; margin: 0 0 8px; } .dc-compra__item p { margin: 0; color: var(--text-muted); } .dc-compra__item { container-type: inline-size; } @container (max-width: 299px) { .dc-compra__item h3 { font: 400 var(--t-h4-size)/var(--t-h4-lh) var(--font-texto); letter-spacing: -0.01em; } } @media (max-width: 1024px) { .dc-compra { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; } .dc-compra__trilho { grid-column: 1 / -1; grid-row: auto; } .dc-compra__item { min-height: 200px; } } @media (max-width: 640px) { .dc-compra { grid-template-columns: 1fr; gap: 16px; } .dc-compra__trilho { padding: 24px 16px !important; gap: 32px; } .dc-compra__item { min-height: 0; gap: 32px; } } /* Duas seções seguidas no mesmo tom: o respiro não dobra (ex.: galeria → CTA em Quem somos). */ .dc-secao:not(.is-escuro) + .dc-secao:not(.is-escuro):not([class*="dc-abertura"]) { padding-top: 0; } /* ========================================================================== Entrar e criar conta (Minha conta sem login) ========================================================================== */ .dc-pagina-entrar .dc-abertura { display: none !important; } .dc-pagina-entrar .dc-pagina-texto { padding: 0 !important; } .dc-pagina-entrar .dc-pagina-texto > *, .dc-pagina-entrar .dc-texto, .dc-pagina-entrar .dc-texto > .woocommerce { max-width: none !important; margin: 0 !important; } .dc-entrar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; min-height: 100svh; box-sizing: border-box; width: min(1280px, 100% - 2 * var(--page-margin)); margin-inline: auto !important; padding: calc(var(--hdr-top) + var(--hdr-h) + 24px) 0 24px; } .dc-entrar__foto { position: relative; border-radius: var(--card-r); overflow: hidden; background: var(--media); min-height: 480px; } .dc-entrar__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .dc-entrar__lado { display: flex; align-items: center; justify-content: center; padding: 24px; } .dc-entrar__caixa { width: 100%; max-width: 440px; display: flex; flex-direction: column; } .dc-entrar__titulo { font: 300 var(--t-h1p-size)/var(--t-h1p-lh) var(--font-titulo); letter-spacing: -0.025em; margin: 0 0 16px !important; text-wrap: balance; } .dc-entrar__apoio { color: var(--text-muted); margin: 0 0 var(--space-32) !important; text-wrap: pretty; } .dc-entrar .woocommerce-notices-wrapper:not(:empty), .dc-entrar__caixa > .woocommerce-error { margin: 0 0 24px !important; } /* Botão do Google: secundário, com a marca do Google como o Google pede */ .dc-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 48px; box-sizing: border-box; border-radius: var(--r-ctl); border: 1px solid var(--border-hover); background: var(--surface); color: var(--text); font: 500 16px/24px var(--font-texto); text-decoration: none; white-space: nowrap; transition: background-color 250ms var(--ease), border-color 250ms var(--ease); } .dc-google:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text); } .dc-google:active { transform: scale(.98); } .dc-google:focus-visible { outline: none; box-shadow: var(--focus-ring); } .dc-google svg { width: 20px; height: 20px; flex: none; } .dc-entrar__ou { margin: 24px 0 !important; text-align: center; font-size: 14px; line-height: 20px; color: var(--text-subtle); } /* Abas Entrar / Criar conta (controle segmentado: trilho 40, item 32) */ .dc-entrar__abas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; height: 40px; padding: 4px; box-sizing: border-box; border-radius: var(--r-ctl); background: var(--fill-active); margin-bottom: 24px; } .dc-entrar__abas[hidden] { display: none; } .dc-entrar__abas button { height: 32px; border: 1px solid transparent; border-radius: var(--r-ctl); background: transparent; color: var(--text-muted); cursor: pointer; font: 500 14px/20px var(--font-texto); transition: background-color 250ms var(--ease), color 250ms var(--ease), border-color 250ms var(--ease); } .dc-entrar__abas button:hover { color: var(--text); } .dc-entrar__abas button[aria-selected="true"] { background: var(--surface); border-color: var(--border); color: var(--text); } .dc-entrar__abas button:focus-visible { outline: none; box-shadow: var(--focus-ring); } .dc-entrar__painel[hidden] { display: none; } .dc-entrar__painel + .dc-entrar__painel { margin-top: var(--space-48); } .js .dc-entrar__painel + .dc-entrar__painel { margin-top: 0; } .dc-entrar form.woocommerce-form-login, .dc-entrar form.woocommerce-form-register { border: 0; background: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; } .dc-entrar .form-row { margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 8px; } .dc-entrar .form-row label { font: 500 14px/20px var(--font-texto); color: var(--text); margin: 0; } .dc-entrar .password-input { position: relative; display: block; } .dc-entrar .password-input .input-text { padding-right: 56px; } .dc-entrar .show-password-input { position: absolute; right: 4px; top: 4px; width: 40px; height: 40px; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--text-muted); cursor: pointer; display: grid; place-items: center; } .dc-entrar .show-password-input:hover { background: var(--fill-hover); color: var(--text); } .dc-entrar .show-password-input:focus-visible { outline: none; box-shadow: var(--focus-ring); } .dc-entrar__linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .dc-entrar__linha .woocommerce-form__label-for-checkbox { display: inline-flex !important; align-items: center !important; gap: 12px; min-height: 24px; font: 400 14px/20px var(--font-texto); color: var(--text-muted); cursor: pointer; margin: 0; } .dc-entrar__linha input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); } .dc-entrar__link { display: inline-flex; align-items: center; min-height: 24px; font: 500 14px/20px var(--font-texto); color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); transition: text-decoration-color 250ms var(--ease); } .dc-entrar__link:hover { text-decoration-color: currentColor; } .dc-entrar__enviar { width: 100%; min-height: 48px; margin-top: 4px; font-size: 16px !important; } .dc-entrar__nota, .dc-entrar .woocommerce-privacy-policy-text p { margin: 0 !important; font-size: 14px; line-height: 20px; color: var(--text-muted); text-wrap: pretty; } .dc-entrar .woocommerce-privacy-policy-text a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 1024px) { .dc-entrar { grid-template-columns: 1fr; min-height: 0; } .dc-entrar__foto { display: none; } .dc-entrar__lado { padding: var(--space-32) 0 var(--space-64); } } @media (max-width: 640px) { .dc-entrar__lado { justify-content: flex-start; } .dc-entrar__caixa { max-width: none; } } /* ========================================================================== Ajustes do teste de usabilidade (29/10/2026) ========================================================================== */ /* Foco visível também no Estado (select2) e erro escrito embaixo de cada campo (FRM-04, A11-02). */ .woocommerce-checkout .select2-container--focus .select2-selection--single, .woocommerce-checkout .select2-container--open .select2-selection--single { border-color: var(--border-strong) !important; box-shadow: var(--focus-ring); outline: none; } .woocommerce form .form-row .checkout-inline-error-message, .woocommerce form .form-row .dc-erro-campo { margin: 0; font: 400 14px/20px var(--font-texto); color: var(--danger); } .woocommerce form .form-row .dc-cep-aviso { margin: 0; font: 400 14px/20px var(--font-texto); color: var(--text-muted); } /* reCAPTCHA: o selo flutuante sai (cobriria o aviso de cookies) e o aviso exigido pelo Google fica no formulário. */ .grecaptcha-badge { visibility: hidden; } .dc-recaptcha { margin: 0; font: 400 12px/16px var(--font-texto); letter-spacing: .01em; color: var(--text-muted); text-wrap: pretty; } .dc-recaptcha a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .dc-recaptcha a:hover { color: var(--text); } /* Aviso do limite de tentativas ("N tentativas restantes"): o plugin põe uma caixa amarela com sombra no meio da tela; aqui vira um aviso no padrão do site, logo abaixo do header, sem cobrir o formulário. */ body .llar_notification_login_page { position: fixed !important; z-index: 95 !important; top: calc(var(--hdr-top) + var(--hdr-h) + 16px) !important; left: 50% !important; transform: translateX(-50%) !important; box-sizing: border-box; width: min(400px, calc(100% - 32px)) !important; padding: 16px 48px 16px 20px !important; border: 1px solid var(--border-strong); border-radius: var(--card-r) !important; background: var(--surface) !important; box-shadow: none !important; color: var(--text) !important; font: 400 14px/20px var(--font-texto) !important; text-align: left !important; } body .llar_notification_login_page * { font: inherit !important; color: inherit !important; margin: 0 !important; } body .llar_notification_login_page .close-button { position: absolute; top: 4px !important; right: 4px !important; display: grid; place-items: center; width: 40px; height: 40px; font-size: 20px !important; line-height: 1 !important; color: var(--text-muted) !important; } @media (max-width: 640px) { body .llar_notification_login_page { top: calc(var(--hdr-top) + 56px + 8px) !important; } } .woocommerce form .form-row.woocommerce-invalid label { color: var(--danger); } /* Complemento: rótulo visível (FRM-03). */ .woocommerce-checkout #billing_address_2_field label.screen-reader-text, .woocommerce-checkout #shipping_address_2_field label.screen-reader-text { position: static !important; width: auto; height: auto; clip: auto; clip-path: none; overflow: visible; white-space: normal; margin: 0; } /* Aviso do produto (variação que falta) perto do botão e com o mesmo tamanho do texto. */ .dc-produto__compra .wc-block-components-notice-banner { margin: 0 0 16px !important; font-size: 16px; } /* Valores longos não saem do card do resumo (sacola) e o cupom fica do mesmo tamanho do botão. */ .dc-resumo__tabela td { overflow-wrap: anywhere; } .dc-cupom__campo { align-items: stretch; } body .woocommerce .dc-cupom__campo .button { flex: none; box-sizing: border-box; } .dc-cupom .woocommerce-error, .dc-cupom [role="alert"], .dc-cupom .coupon-error-notice { margin: 8px 0 0 !important; font-size: 14px; line-height: 20px; color: var(--danger); overflow-wrap: anywhere; } /* Título de busca com termo comprido não estoura a tela. */ .search-results h1, .search-no-results h1, .wp-block-query-title, .woocommerce-breadcrumb { overflow-wrap: anywhere; } @media (max-width: 640px) { /* Número da sacola dentro do próprio botão, longe do menu. */ .dc-acoes { gap: 8px !important; } .wc-block-mini-cart__badge { top: -4px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; line-height: 18px; margin: 0; } /* Informação que decide a compra em 16px no celular (TIP-10). */ .dc-condicoes, .dc-caixa__valor, .dc-sacola__info dl.variation, .dc-sacola__unitario, #order_review .shop_table, #order_review .shop_table dl.variation { font-size: 16px; line-height: 24px; } /* Áreas de toque de pelo menos 40px (CTL-09). */ .wp-block-details summary { min-height: 40px; } .dc-rodape li a, .dc-rodape__base a { display: inline-flex; align-items: center; min-height: 40px; } .dc-cupom summary { min-height: 40px; } .woocommerce-checkout .checkbox, .woocommerce-form__label-for-checkbox { min-height: 40px; align-items: center !important; } .woocommerce-form-login-toggle a, .showcoupon { display: inline-flex; align-items: center; min-height: 40px; } /* Sacola com letra grande: o subtotal desce para a linha de baixo em vez de ser cortado. */ .dc-sacola__item { grid-template-columns: 80px minmax(0, 1fr); grid-template-areas: "foto info" "foto acoes" "foto sub"; } .dc-sacola__subtotal { justify-self: start; } .dc-resumo__tabela th { white-space: normal; } } /* Aviso de cookies (A11-06): pequeno, no canto inferior, sem sombra (FOR-01). */ .dc-cookies { position: fixed; z-index: 90; left: 24px; bottom: 24px; box-sizing: border-box; width: min(400px, calc(100% - 48px)); display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--border-hover); border-radius: var(--card-r); background: var(--surface); color: var(--text); } .dc-cookies[hidden], .dc-respondeu .dc-cookies { display: none; } .dc-cookies p { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-muted); text-wrap: pretty; } .dc-cookies a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .dc-cookies__botoes { display: flex; gap: 8px; } .dc-cookies__botao { flex: 1; height: 40px; padding: 0 16px; border-radius: var(--r-ctl); border: 1px solid var(--border-hover); background: var(--btn2-bg); color: var(--text); font: 500 15px/24px var(--font-texto); cursor: pointer; white-space: nowrap; transition: background-color 250ms var(--ease), border-color 250ms var(--ease); } .dc-cookies__botao:hover { background: var(--fill-hover); border-color: var(--border-strong); } .dc-cookies__botao.is-sim { background: var(--btn-bg); color: var(--btn-text); border-color: transparent; } .dc-cookies__botao.is-sim:hover { background: var(--btn-bg-hover); } .dc-cookies__botao:focus-visible { outline: none; box-shadow: var(--focus-ring); } @media (max-width: 640px) { .dc-cookies { left: 8px; bottom: 8px; width: calc(100% - 16px); padding: 12px 16px; gap: 12px; } .dc-cookies__botao { height: 40px; } } /* ========================================================================== Produto: disponibilidade, esgotado e avise-me (LOJ-02, LOJ-05, LOJ-09) ========================================================================== */ /* A linha própria (dc-disponivel) substitui o indicador do WooCommerce, que ficava vazio com estoque. */ .dc-produto__compra .wp-block-woocommerce-product-stock-indicator { display: none !important; } .dc-disponivel { margin: 0 0 16px !important; font: 400 14px/20px var(--font-texto); color: var(--text-muted); } .dc-disponivel.is-esgotado { color: var(--text); font-weight: 500; } .wc-block-product-filter-chips__item.dc-esgotado { color: var(--text-disabled) !important; text-decoration: line-through; } .wc-block-product-filter-chips__item.dc-esgotado[aria-checked="true"] { color: var(--text-muted) !important; } form.dc-sem-estoque .wp-block-woocommerce-product-button, form.dc-sem-estoque .wp-block-add-to-cart-with-options-quantity-selector, .dc-produto__compra:has(form.dc-sem-estoque) .wc-block-components-notice-banner.is-error { display: none !important; } .dc-avise { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; border-radius: var(--card-r); transition: background-color 250ms var(--ease); } .dc-avise[hidden] { display: none; } .dc-avise__rotulo { font: 500 14px/20px var(--font-texto); color: var(--text); } .dc-avise__linha { display: flex; gap: 12px; } .dc-avise__linha[hidden] { display: none; } .dc-avise__linha input { flex: 1; min-width: 0; box-sizing: border-box; height: 48px; padding: 0 20px; border: 1px solid var(--border-hover); border-radius: var(--r-ctl); background: var(--surface); color: var(--text); font: 400 16px/24px var(--font-texto); transition: border-color 250ms var(--ease); } .dc-avise__linha input:hover { border-color: var(--border-strong); } .dc-avise__linha input:focus { border-color: var(--border-strong); outline: none; box-shadow: var(--focus-ring); } .dc-avise__linha input::placeholder { color: var(--text-subtle); } .dc-avise.is-erro .dc-avise__linha input { border-color: var(--danger); } .dc-avise__nota { margin: 0; font: 400 14px/20px var(--font-texto); color: var(--text-muted); } .dc-avise.is-erro .dc-avise__nota { color: var(--danger); } .dc-avise__isca { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; } @media (max-width: 640px) { .dc-avise__linha { flex-direction: column; } } /* Opção que falta escolher, quando a barra fixa leva até ela: acende a borda dos chips por 1,6 s. */ .dc-falta .wc-block-product-filter-chips__item { border-color: var(--border-strong) !important; background: var(--fill-hover) !important; } /* ========================================================================== Botão de adicionar: carregando e adicionado sem mudar a largura (LOJ-08) ========================================================================== */ .single_add_to_cart_button, .dc-avise__linha button { position: relative; } .single_add_to_cart_button.dc-carregando, .single_add_to_cart_button.dc-adicionado, .dc-avise__linha button.dc-carregando { pointer-events: none; } .single_add_to_cart_button.dc-carregando > span, .single_add_to_cart_button.dc-adicionado > span { visibility: hidden; } .single_add_to_cart_button.dc-carregando::after, .single_add_to_cart_button.dc-adicionado::after { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; } .single_add_to_cart_button.dc-carregando::after { content: "Adicionando…"; } .single_add_to_cart_button.dc-adicionado::after { content: "Adicionado à sacola"; } .dc-avise__linha button.dc-carregando { color: transparent; } .dc-avise__linha button.dc-carregando::after { content: "Enviando…"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--btn-text); } /* ========================================================================== Barra de compra fixa no celular e no tablet (LOJ-07) ========================================================================== */ .dc-barra-compra { position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; box-sizing: border-box; display: flex; align-items: center; gap: 16px; padding: 12px var(--page-margin) calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border-hover); color: var(--text); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 250ms var(--ease), transform 250ms var(--ease), visibility 0s linear 250ms; } .dc-barra-compra.is-visivel { opacity: 1; visibility: visible; transform: none; transition: opacity 250ms var(--ease), transform 250ms var(--ease), visibility 0s; } .dc-barra-compra__info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dc-barra-compra__preco { font: 400 16px/24px var(--font-titulo); font-variant-numeric: tabular-nums; } .dc-barra-compra__opcao { font: 400 14px/20px var(--font-texto); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dc-barra-compra button { flex: none; } @media (min-width: 1025px) { .dc-barra-compra { display: none; } } /* Com a barra na tela, o aviso de cookies sobe para não ficar por cima dela. */ @media (min-width: 641px) { .dc-com-barra .dc-cookies { bottom: calc(80px + env(safe-area-inset-bottom)); } } /* Checkout: País some quando a loja só envia para o Brasil; CPF com o motivo embaixo (LOJ-12). */ .woocommerce-checkout .form-row.dc-oculto { display: none !important; } /* O Woo pinta a dica como balão azul com seta (.woocommerce form .form-row .woocommerce-input-wrapper .description); aqui vira texto de apoio fixo. */ body.woocommerce-checkout form .form-row .woocommerce-input-wrapper .description { display: block !important; position: static; margin: 8px 0 0; padding: 0; background: none; border-radius: 0; font: 400 14px/20px var(--font-texto); color: var(--text-muted); } body.woocommerce-checkout form .form-row .woocommerce-input-wrapper .description::before { content: none; } .dc-barra-compra button:disabled { background: var(--fill-active); color: var(--text-muted); cursor: default; } /* Rótulo "Tamanho" com o guia de medidas à direita (só nos chapéus). */ .dc-rotulo-medidas { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .dc-rotulo-medidas a { display: inline-flex; align-items: center; min-height: 24px; font: 400 14px/20px var(--font-texto); color: var(--text); text-decoration: underline; text-underline-offset: 3px; transition: color 250ms var(--ease); } .dc-rotulo-medidas a:hover { color: var(--text-muted); } .dc-rotulo-medidas a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; } @media (max-width: 640px) { .dc-rotulo-medidas a { min-height: 40px; } } /* 404 com saída (PAG-12): busca nos produtos, categorias, ajuda e início. */ .dc-404__busca { display: flex; flex-direction: column; gap: 8px; margin-top: 48px; width: min(100%, 480px); } .dc-404__busca label { font: 500 14px/20px var(--font-texto); color: var(--text); } .dc-404__linha { display: flex; gap: 8px; width: min(100%, 480px); } .dc-404__linha input[type="search"] { flex: 1; min-width: 0; height: 48px; box-sizing: border-box; padding: 0 20px; border: 1px solid var(--border-hover); border-radius: var(--r-ctl); background: var(--surface); color: var(--text); font: 400 16px/24px var(--font-texto); } .dc-404__linha input[type="search"]:focus { border-color: var(--border-strong); outline: none; box-shadow: var(--focus-ring); } .dc-404__links { margin-top: 24px; } .dc-404__inicio { margin-top: 16px; } .dc-404__inicio a { display: inline-flex; align-items: center; min-height: 40px; color: var(--text-muted); text-decoration: none; transition: color 250ms var(--ease); } .dc-404__inicio a:hover { color: var(--text); } @media (max-width: 640px) { .dc-404 { align-items: flex-start; } .dc-404 > .dc-404__busca, .dc-404 > .dc-404__inicio { margin-left: 0 !important; margin-right: 0 !important; width: 100%; } .dc-404__linha { flex-direction: column; } .dc-404__linha input[type="search"] { flex: none; } .dc-404__linha .dc-btn-secundario { width: 100%; justify-content: center; } .dc-404__links a { height: 40px; box-sizing: border-box; padding: 0 16px; } .dc-404 > .dc-404__links { margin-inline: calc(-1 * var(--page-margin)) !important; width: calc(100% + 2 * var(--page-margin)); max-width: none; box-sizing: border-box; } .dc-404 > .wp-block-buttons { margin-right: 0 !important; width: 100%; } .dc-404 > .wp-block-buttons .wp-block-button { width: 100%; } .dc-404 > .wp-block-buttons .wp-block-button__link { width: 100%; justify-content: center; } } /* Finalização 30/10: toque de 40px e campos de 16px no celular (CTL-09, FRM-06), rodapé legível (TIP-10) e aviso de cookies no alto da tela, sobre o céu da abertura, sem cobrir o botão nem o preço. */ .dc-qtd__botao { width: 40px; } .dc-chip, .dc-chips a { box-sizing: border-box; } /* O WooCommerce põe font-size: inherit (13px) no seletor de ordem; este vence pela especificidade. */ body .woocommerce.wc-block-catalog-sorting select.orderby, body .woocommerce-ordering select.orderby { font-size: 14px; } .dc-rodape__base { font-size: 14px; line-height: 20px; } @media (max-width: 640px) { .dc-chip, .dc-chips a { height: 44px; padding: 0 16px; } body .woocommerce.wc-block-catalog-sorting select.orderby, body .woocommerce-ordering select.orderby { height: 44px; font-size: 16px; } body .woocommerce .dc-cupom__campo input.input-text, .dc-cupom input { font-size: 16px !important; } .dc-cookies { top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); left: 16px; width: calc(100% - 32px); gap: 12px; padding: 16px; } .dc-com-barra .dc-cookies { bottom: calc(88px + env(safe-area-inset-bottom)); } .dc-cookies__botao { height: 44px; } } /* ========================================================================== Dropdown no padrão do site, fechado e aberto (ordenar, parcelas do Mercado Pago, formulários) ========================================================================== */ .woocommerce-ordering select, .wc-block-catalog-sorting select, .woocommerce form select, #payment select { -webkit-appearance: none; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32z' fill='%23152e2b'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 16px !important; } #payment select { height: 48px; border-radius: var(--r-ctl) !important; border: 1px solid var(--border-hover) !important; background-color: var(--surface) !important; color: var(--text) !important; font: 400 16px/24px var(--font-texto) !important; padding: 0 40px 0 20px !important; } select option { background: var(--surface); color: var(--text); } @supports (appearance: base-select) { .woocommerce-ordering select, .wc-block-catalog-sorting select, .woocommerce form select, #payment select, .woocommerce-ordering select::picker(select), .wc-block-catalog-sorting select::picker(select), .woocommerce form select::picker(select), #payment select::picker(select) { appearance: base-select; } .woocommerce-ordering select, .wc-block-catalog-sorting select, .woocommerce form select, #payment select { display: inline-flex; align-items: center; } .woocommerce-ordering select::picker-icon, .wc-block-catalog-sorting select::picker-icon, .woocommerce form select::picker-icon, #payment select::picker-icon { display: none; } .woocommerce-ordering select::picker(select), .wc-block-catalog-sorting select::picker(select), .woocommerce form select::picker(select), #payment select::picker(select) { margin-top: 4px; padding: 4px; border: 1px solid var(--border-hover); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: none; } .woocommerce-ordering option, .wc-block-catalog-sorting option, .woocommerce form option, #payment option { padding: 8px 12px; border-radius: 12px; font: 400 16px/24px var(--font-texto); transition: background-color 250ms var(--ease); } .woocommerce-ordering option:hover, .wc-block-catalog-sorting option:hover, .woocommerce form option:hover, #payment option:hover { background: var(--fill-hover); } .woocommerce-ordering option:checked, .wc-block-catalog-sorting option:checked, .woocommerce form option:checked, #payment option:checked { background: var(--fill-active); } .woocommerce-ordering option::checkmark, .wc-block-catalog-sorting option::checkmark, .woocommerce form option::checkmark, #payment option::checkmark { display: none; } } /* Mercado Pago no celular: sem caixa dentro de caixa, campos na largura toda. */ html body #mp-checkout-custom-root #mp-custom-checkout-form-container .mp-checkout-custom-card-form .mp-checkout-custom-card-input, html body #mp-checkout-custom-root #mp-custom-checkout-form-container .mp-checkout-custom-card-column .mp-checkout-custom-security-code-container .mp-checkout-custom-security-code-input, html body #payment .mp-checkout-pix-container input { box-sizing: border-box !important; border-radius: var(--r-ctl) !important; border: 1px solid var(--border-hover) !important; padding-left: 8px !important; overflow: hidden; } html body #payment .mp-wallet-button-container { border-color: var(--border) !important; border-radius: 16px !important; } @media (max-width: 640px) { #payment .wc_payment_method { padding: 12px !important; } #payment div.payment_box[class*="mercado-pago"] { background: transparent !important; padding: 0 !important; } #payment .mp-checkout-custom-container, #payment .mp-checkout-pix-container, #payment [class*="mp-checkout-"][class$="-container"] { padding: 16px 0 0 !important; background: transparent !important; } #payment .mp-checkout-custom-card-flags { margin-bottom: 24px !important; } #payment .mp-wallet-button-container { padding: 16px 12px !important; margin-bottom: 24px !important; border-radius: 16px !important; background: var(--surface) !important; } #payment .mp-wallet-button-container-wrapper { margin-bottom: 0 !important; } } /* ========================================================================== Ajustes da revisão no celular (31/10/2026) ========================================================================== */ /* Ordenar: espaço para a seta própria. */ body .woocommerce.wc-block-catalog-sorting select.orderby, body .woocommerce-ordering select.orderby { padding-right: 40px !important; } /* Quantidade do produto: só a pílula, sem o retângulo do invólucro. */ .wp-block-add-to-cart-with-options-quantity-selector, .wp-block-add-to-cart-with-options-quantity-selector .quantity { border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; } /* Sacola lateral: fechar redondo, foco da marca, pesos até 500, total longe da borda. */ .wc-block-components-drawer__close { box-sizing: border-box; min-height: 0 !important; height: 40px !important; width: 40px !important; padding: 0 !important; } .wc-block-components-drawer__close svg { width: 16px !important; height: 16px !important; } .wc-block-components-drawer__close:focus, .wc-block-components-drawer__close:focus-visible { outline: none !important; box-shadow: var(--focus-ring) !important; } .wc-block-mini-cart__drawer .wc-block-components-drawer__content { padding-right: 8px; } .wc-block-mini-cart__products-table .wc-block-cart-item__total { padding-right: 16px !important; } .wc-block-mini-cart__products-table .wc-block-components-product-details { font-size: 14px; line-height: 20px; } .wc-block-mini-cart__empty-cart-wrapper strong, .wc-block-mini-cart__empty-cart-wrapper h2, .wc-block-mini-cart__empty-cart-wrapper p, .wc-block-components-totals-item__label, .wc-block-components-totals-item__value, .wc-block-mini-cart__footer-subtotal, .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td strong, .shop_table th, .cart-subtotal th, .order-total th, .order-total strong { font-weight: 500 !important; } /* Caminho: separador com espaço fixo e começo na mesma margem do título. */ .woocommerce-breadcrumb { font-size: 14px !important; line-height: 20px; padding-top: 16px !important; gap: 0 !important; padding-left: 0 !important; margin-left: 0 !important; } .woocommerce-breadcrumb .breadcrumb-separator { margin: 0 8px; } /* Rodapé: itens da base alinhados pela linha do texto. */ .dc-rodape__base { align-items: baseline; } .dc-rodape__base p { display: inline-flex; align-items: center; min-height: 40px; flex-wrap: wrap; column-gap: 4px; } /* Galeria presa no celular: card cabe entre as margens e fica no meio da altura livre. */ @media (max-width: 640px) { .dc-galeria-secao .dc-galeria.is-presa { --gal-h: min(calc(100svh - var(--hdr-top) - var(--hdr-h) - 72px), calc((100vw - 2 * var(--page-margin) - 18px) * 4 / 3)); } .dc-galeria-secao .dc-galeria.is-presa .dc-galeria__trilho > .dc-card { height: var(--gal-h) !important; } .dc-galeria-secao .dc-galeria.is-presa .dc-galeria__palco { top: max(calc(var(--hdr-top) + var(--hdr-h) + 24px), calc((100svh - var(--gal-h)) / 2 + (var(--hdr-top) + var(--hdr-h)) / 2)); } } /* ========================================================================== Frete e prazo na página do produto (adois-frete.php + tema.js) ========================================================================== */ .dc-frete { box-sizing: border-box; width: 100%; max-width: 100%; margin-top: 24px; padding: 20px; border: 1px solid var(--border); border-radius: var(--card-r); background: var(--surface); } .dc-frete__form { display: grid; gap: 12px; margin: 0; } .dc-frete__titulo { font: 500 16px/24px var(--font-texto); color: var(--text); } .dc-frete__linha { display: flex; gap: 8px; min-width: 0; } .dc-frete__campo { flex: 1 1 auto; min-width: 0; box-sizing: border-box; height: 48px; padding: 0 20px; border: 1px solid var(--border-hover); border-radius: var(--r-ctl); background: var(--bg); font: 400 16px/24px var(--font-texto); color: var(--text); font-variant-numeric: tabular-nums; transition: border-color 250ms var(--ease); } .dc-frete__campo::placeholder { color: var(--text-subtle); } .dc-frete__campo:hover { border-color: var(--border-strong); } .dc-frete__campo:focus-visible { outline: none; border-color: var(--border-strong); box-shadow: var(--focus-ring); } .dc-frete.is-erro .dc-frete__campo { border-color: var(--danger); } .dc-frete__botao { flex: none; box-sizing: border-box; height: 48px; padding: 0 24px; border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--btn2-bg); color: var(--text); font: 500 16px/24px var(--font-texto); cursor: pointer; transition: background-color 250ms var(--ease), border-color 250ms var(--ease); } .dc-frete__botao:hover { background: var(--fill-hover); border-color: var(--border-hover); } .dc-frete__botao:focus-visible { outline: none; box-shadow: var(--focus-ring); } .dc-frete.is-carregando .dc-frete__botao { cursor: progress; color: var(--text-muted); } .dc-frete__ajuda { justify-self: start; font-size: 14px; line-height: 20px; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-hover); } .dc-frete__ajuda:hover { color: var(--text); text-decoration-color: currentColor; } .dc-frete__msg { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--text-muted); text-wrap: pretty; } .dc-frete__msg:empty { display: none; } .dc-frete__msg.is-erro { color: var(--danger); } .dc-frete__lista { list-style: none; margin: 16px 0 0; padding: 0; } .dc-frete__lista[hidden] { display: none; } .dc-frete__opcao { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; } .dc-frete__opcao + .dc-frete__opcao { border-top: 1px solid var(--border); } .dc-frete__opcao:first-child { padding-top: 0; } .dc-frete__info { display: grid; gap: 2px; min-width: 0; } .dc-frete__nome { font: 500 16px/24px var(--font-texto); color: var(--text); } .dc-frete__prazo { font-size: 14px; line-height: 20px; color: var(--text-muted); } .dc-frete__preco { flex: none; font: 500 16px/24px var(--font-texto); color: var(--text); font-variant-numeric: tabular-nums; } /* A mensagem de apoio vai depois da lista quando há resultado. */ .dc-frete:has(.dc-frete__lista:not([hidden])) { display: flex; flex-direction: column; } .dc-frete:has(.dc-frete__lista:not([hidden])) .dc-frete__msg { order: 3; } @media (max-width: 640px) { .dc-frete { padding: 16px; } .dc-frete__botao { padding: 0 20px; } } /* Escolha do frete no resumo da finalização: o resumo vira linhas flexíveis (tabela espremia o envio numa coluna estreita) e as opções viram caixas. Prefixo #order_review vence o CSS do WooCommerce. */ #order_review .shop_table, #order_review .shop_table thead, #order_review .shop_table tbody, #order_review .shop_table tfoot { display: block; } #order_review .shop_table tr { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 1px solid var(--border); } #order_review .shop_table thead tr { border-top: 0; } #order_review .shop_table th, #order_review .shop_table td { display: block; border-top: 0 !important; } #order_review .shop_table .product-name { flex: 1 1 auto; min-width: 0; } #order_review .shop_table .product-total { flex: none; white-space: nowrap; } #order_review .shop_table tr.order-total { align-items: center; } #order_review .shop_table tr.woocommerce-shipping-totals { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 0; } #order_review .shop_table tr.woocommerce-shipping-totals th, #order_review .shop_table tr.woocommerce-shipping-totals td { padding: 0; text-align: left !important; } #order_review .shop_table tr.woocommerce-shipping-totals th { font-weight: 500; } #order_review ul#shipping_method { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } #order_review ul#shipping_method li { position: relative; margin: 0; padding: 0; text-indent: 0; line-height: inherit; } #order_review ul#shipping_method li input.shipping_method { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); margin: 0; accent-color: var(--accent); width: 18px; height: 18px; } #order_review ul#shipping_method li label { display: flex; align-items: center; justify-content: space-between; gap: 16px; box-sizing: border-box; width: 100%; margin: 0; min-height: 64px; padding: 12px 16px 12px 48px; border: 1px solid var(--border); border-radius: var(--r-in); background: var(--bg); cursor: pointer; font-weight: 400; text-align: left; transition: background-color 250ms var(--ease), border-color 250ms var(--ease); } #order_review ul#shipping_method li label:hover { background: var(--surface-hover); border-color: var(--border-hover); } #order_review ul#shipping_method li input.shipping_method:checked + label { border-color: var(--border-strong); background: var(--surface-hover); } #order_review ul#shipping_method li input.shipping_method:focus-visible + label { box-shadow: var(--focus-ring); } #order_review ul#shipping_method li input[type="hidden"] + label { padding-left: 16px; } .dc-envio__info { display: grid; gap: 2px; min-width: 0; text-align: left; } .dc-envio__nome { font: 500 16px/24px var(--font-texto); color: var(--text); } .dc-envio__prazo { font-size: 14px; line-height: 20px; color: var(--text-muted); } .dc-envio__preco { flex: none; font: 500 16px/24px var(--font-texto); color: var(--text); font-variant-numeric: tabular-nums; } .dc-envio__preco .woocommerce-Price-amount { font-weight: 500; } /* O WooCommerce põe 700 no rodapé do resumo; a loja usa no máximo 500. */ #order_review .shop_table tfoot th, #order_review .shop_table tfoot td, #order_review .shop_table tfoot strong, #order_review .shop_table tfoot bdi, #order_review .dc-envio__preco bdi { font-weight: 500; } /* ========================================================================== A Dois · base clara com fotos (rodada 3, 09/11): papel quente, marsala nas faixas, rosa chá no respiro. ========================================================================== */ body { background: var(--bg) !important; } .wp-site-blocks, main { background: transparent !important; } /* Topo limpo: papel sólido com filete, sem vidro. */ .dc-header { width: 100% !important; max-width: none !important; background: var(--bg) !important; border-bottom: 1px solid var(--border); -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .dc-nav .wp-block-navigation__container { gap: 24px !important; } .dc-nav .wp-block-navigation-item__content { white-space: nowrap; } .dc-logo__nome { white-space: nowrap; } @media (max-width: 1279px) { .dc-nav { display: none !important; } .dc-nav-mobile { display: flex !important; } .dc-header { grid-template-columns: auto minmax(0, 1fr); } .dc-logo { justify-content: flex-start; } } @media (max-width: 640px) { .dc-logo__cisnes { width: 40px; } .dc-logo__nome { font-size: 24px; } } /* Tipografia de cartaz: fino + médio na mesma frase. */ .a2-titulo { font-family: var(--font-titulo); font-optical-sizing: auto; letter-spacing: -0.02em; margin: 0; color: var(--text); text-wrap: balance; } .a2-titulo .fino { font-weight: 200; } .a2-titulo .medio { font-weight: 500; } h2.a2-titulo { font-size: clamp(36px, 4.6vw, 68px); line-height: 1.02; } .a2-pagina { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; font-size: 14px; line-height: 20px; color: var(--text-muted); } .a2-tracos { display: inline-flex; gap: 2px; } .a2-tracos i { width: 24px; height: 5px; border-radius: 3px; border: 1px solid var(--border-strong); } .a2-tracos i.is-atual { background: var(--accent); border-color: var(--accent); } .a2-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: var(--r-ctl); color: var(--text); text-decoration: none; font: 500 15px/1 var(--font-texto); background: transparent; transition: background-color 250ms var(--ease), border-color 250ms var(--ease); } .a2-chip:hover { background: var(--fill-hover); border-color: var(--accent); } .a2-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; } .dc-btn-lg { min-height: 52px; padding: 14px 28px; font-size: 16px; } .wp-element-button, .wp-block-button__link, .button { box-sizing: border-box; } .dc-secao { padding-inline: var(--page-margin); position: relative; } .a2-cabecalho { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 32px; max-width: 1280px; margin: 0 auto var(--space-48); } .a2-cabecalho .a2-pagina { grid-column: 1 / -1; margin: 0; } /* Troca de tom sempre ganha o respiro inteiro. */ .dc-secao.is-bege, .is-bege + .dc-secao, .dc-secao.is-escuro, .is-escuro + .dc-secao { padding-top: var(--sec-pad) !important; } .dc-secao.is-bege, .dc-secao.is-escuro { padding-bottom: var(--sec-pad) !important; } /* ---------- Departamentos: fotos reais da loja ---------- */ .a2-deptos__grade { list-style: none; margin: 0 auto; padding: 0; max-width: 1280px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .a2-depto { display: flex; flex-direction: column; height: 100%; border-radius: var(--card-r); border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; overflow: hidden; transition: border-color 250ms var(--ease), background-color 250ms var(--ease); } .a2-depto:hover { border-color: var(--border-strong); background: var(--surface-hover); } .a2-depto__foto { display: block; aspect-ratio: 1; margin: 8px 8px 0; border-radius: var(--r-in); overflow: hidden; background: var(--media); } .a2-depto__foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .a2-depto__rodape { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 12px; padding: 16px 16px 20px; } .a2-depto__icone { grid-row: span 2; width: 36px; height: 36px; background: var(--accent); -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat; } .a2-depto__nome { font: 400 20px/1.15 var(--font-titulo); } .a2-depto__qtd { font-size: 14px; line-height: 20px; color: var(--text-muted); } /* ---------- Cards de produto ---------- */ .dc-grade-produtos, .dc-trilho-produtos { list-style: none; margin: 0 auto; padding: 0; max-width: 1280px; } .dc-grade-produtos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .dc-trilho-produtos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, calc((100% - 72px) / 4)); gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 16px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .dc-trilho-produtos > li { scroll-snap-align: start; } .dc-item { margin: 0; min-width: 0; } .dc-item__card { height: 100%; display: flex; flex-direction: column; border-radius: var(--card-r); border: 1px solid var(--border); background: var(--surface); transition: border-color 250ms var(--ease); } .dc-item__card:hover { border-color: var(--border-strong); } .dc-item__link { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 0; color: var(--text); text-decoration: none; } .dc-item__foto { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-in); background: var(--media); margin-bottom: 10px; } .dc-item__foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .dc-item__selo { position: absolute; left: 8px; top: 8px; padding: 4px 10px; border-radius: 8px; background: var(--vinho); color: var(--creme); font: 500 13px/20px var(--font-texto); } .dc-item__cat { padding-inline: 8px; font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); } .dc-item__nome { padding-inline: 8px; font-size: 15px; line-height: 22px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dc-item__rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 8px 8px 16px; } .dc-item__preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; } .dc-item__preco strong { font: 500 22px/1.1 var(--font-titulo); color: var(--text); } .dc-item__preco del { font-size: 14px; color: var(--text-subtle); } .dc-item__add { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-ctl); background: var(--btn-bg); color: var(--btn-text); transition: background-color 250ms var(--ease); } .dc-item__add:hover { background: var(--btn-bg-hover); } .dc-item__add span { width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--i-sacola) center / contain no-repeat; mask: var(--i-sacola) center / contain no-repeat; } /* ---------- Página de produto ---------- */ .a2-produto-extras { display: flex; flex-direction: column; gap: 16px; margin-top: 8px !important; } .a2-confianca { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .a2-confianca li { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-in); background: var(--bg-subtle); border: 1px solid var(--border); font-size: 14px; line-height: 20px; color: var(--text-muted); } .a2-confianca strong, .a2-duvida strong { display: block; font-weight: 500; color: var(--text); margin-bottom: 2px; } .a2-duvida { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: var(--r-in); border: 1px solid var(--border-strong); color: var(--text-muted); text-decoration: none; font-size: 14px; line-height: 20px; transition: background-color 250ms var(--ease), border-color 250ms var(--ease); } .a2-duvida:hover { background: var(--fill-hover); border-color: var(--accent); } .a2-duvida strong { font-size: 16px; } :root { --i-caixa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5 12 12l9-4.5M12 12v9'/%3E%3C/svg%3E"); } .dc-ico-caixa { --ico: var(--i-caixa); } .single-product h1.wp-block-post-title { font-size: clamp(28px, 2.6vw, 38px) !important; line-height: 1.18 !important; font-weight: 300 !important; text-wrap: pretty; } .single-product .dc-produto__compra .wc-block-components-product-price, .single-product .dc-produto__compra .wp-block-woocommerce-product-price { font: 500 34px/1 var(--font-titulo) !important; color: var(--accent) !important; } .dc-galeria--produto { max-width: 640px; } .dc-galeria--produto .dc-galeria__palco { background: var(--rosa-cha); padding: 16px; border-radius: var(--r-moldura); border: 0 !important; box-sizing: border-box; } .dc-galeria--produto .dc-galeria__trilho, .dc-galeria--produto .dc-galeria__foto, .dc-galeria--produto .dc-galeria__foto img { border-radius: calc(var(--r-moldura) - 16px) !important; } .dc-galeria--produto .dc-galeria__foto { aspect-ratio: 1 / 1 !important; background: #fff; } .dc-galeria--produto .dc-galeria__foto img { width: 100%; height: 100%; object-fit: contain !important; transform: none !important; } .dc-produto__detalhes details:first-child:not(:has(.wp-block-post-content)) { display: none; } .a2-combina .a2-cabecalho { margin-bottom: var(--space-32); } /* ---------- Loja: cards de bloco no mesmo desenho ---------- */ .dc-loja-grade .wc-block-product-template > .wc-block-product:first-child { grid-column: auto !important; grid-row: auto !important; } .wc-block-product-template .wc-block-product { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--card-r) !important; padding: 8px 8px 16px !important; box-shadow: none !important; transition: border-color 250ms var(--ease); } .wc-block-product-template .wc-block-product:hover { border-color: var(--border-strong) !important; } .wc-block-product-template .wc-block-components-product-image { aspect-ratio: 1 / 1 !important; flex: none; border: 0 !important; overflow: hidden; border-radius: var(--r-in) !important; background: var(--media); } .wc-block-product-template .wc-block-components-product-image img { border-radius: var(--r-in) !important; } .wc-block-product-template .wp-block-post-title { margin: 14px 8px 8px !important; } .wc-block-product-template .wp-block-post-title, .wc-block-product-template .wp-block-post-title a { font: 400 15px/22px var(--font-texto) !important; color: var(--text) !important; letter-spacing: 0; } .wc-block-product-template .wc-block-components-product-price, .wc-block-product-template .wp-block-woocommerce-product-price { font: 500 22px/1.2 var(--font-titulo) !important; color: var(--text); padding: 0 !important; margin: 0 8px !important; text-align: left !important; } .wp-block-query-title, .wp-block-term-title, .woocommerce-products-header__title { font-weight: 300 !important; letter-spacing: -0.02em; } .dc-chips { flex-wrap: wrap; } /* Login sem foto e rodapé. */ .dc-entrar__marca { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--rosa-cha); color: var(--accent); } .dc-entrar__marca .dc-logo__cisnes { width: min(320px, 50%); } .dc-entrar__marca .dc-logo__nome { font-size: 56px; color: var(--accent); } .dc-rodape { background: var(--bg) !important; } .dc-rodape__lema { margin: 12px 0 0; font: 300 20px/1.3 var(--font-titulo); color: var(--text-muted); } .dc-rodape .dc-logo { justify-content: flex-start; } .dc-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; text-decoration-thickness: 1px; font-size: 16px; } .dc-link:hover { text-decoration-color: var(--text); } /* Barra de rolagem marsala sobre o papel. A rolagem suave é do tema.js (o smooth do CSS brigaria com ela). */ html { scrollbar-color: #f4e2da59 var(--bg); scrollbar-width: thin; scroll-behavior: auto !important; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-subtle); } ::-webkit-scrollbar-thumb { background: #f4e2da4d; border-radius: 10px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--vinho); } @media (max-width: 1024px) { .a2-deptos__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dc-grade-produtos { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .a2-acoes > * { width: 100%; justify-content: center; } .a2-cabecalho { grid-template-columns: minmax(0, 1fr); } .a2-cabecalho .a2-chip { justify-self: start; } .a2-deptos__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .a2-depto__rodape { grid-template-columns: minmax(0, 1fr); padding: 12px 12px 16px; } .a2-depto__icone { display: none; } .a2-depto__nome { font-size: 18px; } .dc-grade-produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .dc-item__link { padding: 6px 6px 0; } .dc-item__nome { font-size: 14px; line-height: 20px; padding-inline: 4px; } .dc-item__cat { padding-inline: 4px; font-size: 12px; } .dc-item__rodape { padding: 10px 6px 6px 10px; } .dc-item__preco strong { font-size: 18px; } .dc-item__add { width: 44px; height: 44px; } .a2-confianca { grid-template-columns: minmax(0, 1fr); } .a2-confianca li { flex-direction: row; align-items: flex-start; } } /* ========================================================================== A Dois · rodada 4 (09/11): cenas de rolagem, hero sem foto (luz em gradiente + esteira de produtos reais), trilho preso que anda de lado, fotos só nas duas últimas cenas, como fundo com gradiente. ========================================================================== */ html.lenis, html.lenis body { height: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } /* ---------- Título palavra por palavra ---------- */ .a2-palavra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; } .a2-palavra > span { display: inline-block; } .a2-titulo--anima .a2-palavra > span { transform: translateY(105%); transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i) * 70ms); } .a2-titulo--anima.is-dentro .a2-palavra > span { transform: none; } /* ---------- Abertura ---------- */ .a2-hero { --p: 0; position: relative; isolation: isolate; overflow: hidden; min-height: calc(100svh - var(--hdr-h)); box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: clamp(28px, 5svh, 64px) 0 0; background: linear-gradient(180deg, var(--bg) 0%, #fbeee8 100%); } /* Luz em gradiente que respira devagar (rosa chá e marsala, sem brilho). */ .a2-hero__luz { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .a2-hero__luz i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: a2-respira 18s var(--ease) infinite alternate; } .a2-hero__luz i:nth-child(1) { width: 52vw; height: 52vw; right: -12vw; top: -18vw; background: radial-gradient(circle, #e9b9a8 0%, transparent 65%); } .a2-hero__luz i:nth-child(2) { width: 40vw; height: 40vw; left: -14vw; bottom: -10vw; background: radial-gradient(circle, #f0cfc2 0%, transparent 65%); animation-duration: 22s; animation-delay: -6s; } .a2-hero__luz i:nth-child(3) { width: 30vw; height: 30vw; right: 22vw; bottom: 0; background: radial-gradient(circle, #b8484233 0%, transparent 65%); animation-duration: 26s; animation-delay: -12s; } @keyframes a2-respira { to { transform: translate3d(-6vw, 4vw, 0) scale(1.15); } } .a2-hero__topo { position: relative; width: 100%; max-width: calc(1280px + 2 * var(--page-margin)); margin: 0 auto; box-sizing: border-box; padding: 0 var(--page-margin); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: end; gap: 24px 64px; transform: translate3d(0, calc(var(--p) * -60px), 0); } .a2-hero__topo .a2-pagina { grid-column: 1 / -1; margin: 0; } .a2-hero h1 { grid-column: 1 / -1; font-size: clamp(64px, 9.4vw, 156px); line-height: .92; color: var(--accent); } .a2-hero h1 .medio { margin-left: .15em; } .a2-hero__lado { grid-column: 2; padding-bottom: 4px; } .a2-hero .dc-lead { margin: 0 0 24px; color: var(--text-muted); } .a2-hero__lado .a2-acoes { flex-wrap: nowrap; } .a2-selo { grid-column: 1; grid-row: 3; align-self: end; position: relative; width: 104px; height: 104px; border-radius: 50%; background: var(--vinho); color: var(--creme); display: grid; place-items: center; transform: rotate(calc(var(--p) * 180deg)); } .a2-selo__anel { position: absolute; inset: 0; width: 100%; height: 100%; animation: a2-gira 24s linear infinite; } .a2-selo__anel text { fill: currentColor; font: 400 19px var(--font-titulo); } .a2-selo__cisnes { width: 44px; line-height: 0; } .a2-selo__cisnes svg { width: 100%; height: auto; } @keyframes a2-gira { to { transform: rotate(360deg); } } /* Esteira de produtos reais: anda sozinha e corre mais com a rolagem. */ .a2-esteira { overflow: hidden; padding: 8px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .a2-esteira__fita { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; width: max-content; animation: a2-esteira 70s linear infinite; translate: calc(var(--p) * -320px) 0; } .a2-esteira:hover .a2-esteira__fita { animation-play-state: paused; } .a2-esteira li { flex: none; width: clamp(120px, 10.5vw, 168px); } .a2-esteira a { display: block; aspect-ratio: 4 / 5; border-radius: var(--card-r); overflow: hidden; border: 1px solid var(--border); background: var(--media); transition: border-color 250ms var(--ease); } .a2-esteira a:hover { border-color: var(--accent); } .a2-esteira img { width: 100%; height: 100%; object-fit: cover; display: block; } .a2-esteira li:nth-child(even) { margin-top: 28px; } @keyframes a2-esteira { to { transform: translateX(-50%); } } .a2-hero__garantias { list-style: none; margin: 0; padding: 16px var(--page-margin); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 40px; font-size: 14px; line-height: 20px; color: var(--text-muted); background: #fffaf7b3; } .a2-hero__garantias li { display: flex; align-items: center; gap: 10px; } .a2-hero__garantias li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* ---------- Sensações: cena presa, o trilho anda de lado com a rolagem ---------- */ .a2-sensacoes { --p: 0; --dist: 0px; position: relative; background: var(--bg); } .a2-sensacoes__palco { position: relative; display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 56px; align-items: center; padding: var(--sec-pad) 0 var(--sec-pad) var(--page-margin); overflow: hidden; } .a2-sensacoes__texto { position: relative; z-index: 1; } .a2-sensacoes__janela { min-width: 0; overflow: hidden; padding-block: 4px; } .a2-sensacoes.is-presa .a2-sensacoes__janela { -webkit-mask: linear-gradient(90deg, transparent, #000 32px); mask: linear-gradient(90deg, transparent, #000 32px); } .a2-sensacoes h2 { font-size: clamp(40px, 4.4vw, 64px); margin-bottom: 20px; } .a2-sensacoes .dc-lead { margin: 0 0 28px; color: var(--text-muted); } .a2-sensacoes__barra { display: none; margin-top: 40px; height: 2px; border-radius: 2px; background: var(--border); overflow: hidden; } .a2-sensacoes__barra i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p)); } .a2-sensacoes .dc-trilho-produtos { margin: 0; max-width: none; padding-right: var(--page-margin); grid-auto-columns: minmax(260px, 320px); } /* Com JS: a seção fica alta, o palco prende no topo e o trilho anda pela distância medida. */ .a2-sensacoes.is-presa .a2-sensacoes__palco { position: sticky; top: var(--hdr-h); height: calc(100svh - var(--hdr-h)); padding-block: 0; box-sizing: border-box; } .a2-sensacoes.is-presa .dc-trilho-produtos { overflow: visible; scroll-snap-type: none; padding-bottom: 0; transform: translate3d(calc(var(--p) * var(--dist) * -1), 0, 0); will-change: transform; } .a2-sensacoes.is-presa .a2-sensacoes__barra { display: block; } /* ---------- Cenas com foto de fundo e gradiente (penúltima e última) ---------- */ /* ---------- Card de produto: foto inteira no topo, segunda foto no passar do mouse ---------- */ .dc-item__card { overflow: hidden; } .dc-item__link { padding: 0; gap: 6px; } .dc-item__foto { border-radius: 0; margin-bottom: 12px; background: var(--media); } .dc-item__foto img { transition: opacity 500ms var(--ease); } .dc-item__outra { position: absolute; inset: 0; opacity: 0; } .dc-item__card:hover .dc-item__outra { opacity: 1; } .dc-item__cat, .dc-item__nome { padding-inline: 16px; } .dc-item__rodape { padding: 14px 12px 12px 16px; } /* ---------- Trilhos (responsivo) ---------- */ @media (max-width: 1024px) { .dc-trilho-produtos { grid-auto-columns: minmax(220px, 40%); } .a2-hero__topo { grid-template-columns: minmax(0, 1fr); align-items: start; } .a2-hero h1 { font-size: clamp(64px, 13vw, 132px); } .a2-hero__topo .a2-pagina { padding-right: 140px; } .a2-hero__lado { max-width: 520px; } .a2-hero__lado { grid-column: 1; } .a2-selo { position: absolute; right: var(--page-margin); top: 0; grid-row: auto; } .a2-sensacoes__palco { grid-template-columns: minmax(0, 1fr); gap: 32px; align-content: center; padding-left: var(--page-margin); } .a2-sensacoes .dc-trilho-produtos { grid-auto-columns: minmax(220px, 280px); } .a2-sensacoes__barra { max-width: 320px; margin-top: 24px; } } @media (max-width: 640px) { .a2-hero { padding-top: 24px; gap: 28px; } .a2-hero h1 { font-size: 20vw; } .a2-hero__topo .a2-pagina { padding-right: 96px; } .a2-hero h1 .medio { margin-left: 0; } .a2-hero .dc-lead { margin-bottom: 20px; } .a2-hero__lado .a2-acoes { flex-wrap: wrap; } .a2-hero .a2-pagina { font-size: 14px; } .a2-tracos i { width: 18px; } .a2-selo { width: 84px; height: 84px; top: -8px; } .a2-selo__cisnes { width: 30px; } .a2-selo__anel text { font-size: 21px; } .a2-esteira li { width: 132px; } .a2-esteira li:nth-child(even) { margin-top: 24px; } .a2-hero__garantias { justify-content: flex-start; gap: 6px 20px; font-size: 14px; } .a2-acoes > * { width: 100%; justify-content: center; } .dc-trilho-produtos { grid-auto-columns: 62%; margin-inline: calc(-1 * var(--page-margin)); padding-inline: var(--page-margin); scroll-padding-inline: var(--page-margin); } .a2-sensacoes h2 { font-size: 40px; margin-bottom: 12px; } .a2-sensacoes .dc-lead { font-size: 15px; line-height: 22px; margin-bottom: 16px; } .a2-sensacoes .a2-chip { min-height: 44px; } .a2-sensacoes .dc-trilho-produtos { grid-auto-columns: 220px; margin: 0; padding-left: 0; } .a2-sensacoes.is-presa .a2-sensacoes__palco { gap: 20px; } .dc-item__cat, .dc-item__nome { padding-inline: 10px; } .dc-item__rodape { padding: 10px 8px 8px 10px; } } @media (prefers-reduced-motion: reduce) { .a2-selo__anel, .a2-hero__luz i, .a2-esteira__fita { animation: none; } .a2-hero__topo, .a2-selo { transform: none; opacity: 1; } .a2-esteira { overflow-x: auto; } } /* Sacola e avisos no visual claro: véu marsala atrás da gaveta, aviso leve em rosa chá. */ .wc-block-components-drawer__screen-overlay { background-color: #4a121459 !important; } .wc-block-components-notice-banner.is-success, .woocommerce-message { background: var(--rosa-cha) !important; border: 1px solid var(--border-strong) !important; color: var(--text) !important; border-radius: var(--r-in) !important; } .woocommerce-cart .woocommerce-message .button, .woocommerce-cart .wc-block-components-notice-banner .wc-forward { display: none !important; } .wc-block-components-notice-banner:focus, .woocommerce-message:focus { outline: none !important; box-shadow: none !important; } /* ========================================================================== A Dois · rodada 6 (09/11): prefixo a2- (o ad- era escondido por bloqueador de anúncio). Penúltima: foto do casal colada na borda, passos que acendem numa linha do tempo. Última: leque de produtos reais para noivas que abre com a rolagem. ========================================================================== */ /* ---------- Penúltima: como chega até você ---------- */ .a2-discreta { --p: .5; display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); min-height: 100svh; overflow: hidden; } .a2-discreta__foto { position: relative; overflow: hidden; } .a2-discreta__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(calc(1.16 - var(--p) * .16)); transform-origin: 50% 30%; } .a2-discreta__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, var(--vinho)), linear-gradient(0deg, #4a121466, transparent 40%); } .a2-discreta__texto { padding: var(--sec-pad) var(--page-margin) var(--sec-pad) clamp(40px, 6vw, 96px); align-self: center; max-width: 680px; } .a2-discreta h2 { font-size: clamp(40px, 4.6vw, 68px); max-width: 14ch; margin-bottom: var(--space-48); } .a2-caminho { --linha: clamp(0, (var(--p) - .24) * 3.4, 1); list-style: none; margin: 0; padding: 0 0 0 44px; position: relative; display: grid; gap: 28px; counter-reset: passo; } .a2-caminho::before, .a2-caminho::after { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 2px; background: var(--border); } .a2-caminho::after { background: var(--creme); transform-origin: top; transform: scaleY(var(--linha)); } .a2-caminho li { --on: clamp(0, (var(--p) - .28 - var(--n) * .07) * 14, 1); position: relative; display: flex; flex-direction: column; gap: 4px; counter-increment: passo; opacity: calc(.4 + var(--on) * .6); } .a2-caminho li::before { content: counter(passo); position: absolute; left: -44px; top: 0; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 500 12px/1 var(--font-texto); background: var(--vinho); border: 1px solid var(--border-strong); color: var(--creme); transition: background 300ms var(--ease), color 300ms var(--ease); } .a2-caminho li::after { content: ""; position: absolute; left: -44px; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--creme); opacity: var(--on); z-index: 1; } .a2-caminho li > * { position: relative; } .a2-caminho strong { font: 400 26px/1.15 var(--font-titulo); } .a2-caminho span { color: var(--text-muted); } .a2-caminho__duvida { margin: var(--space-48) 0 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--text-muted); } /* ---------- Última: noivas e amigas ---------- */ .a2-eventos { --p: .5; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; max-width: none; min-height: 0; padding: var(--sec-pad) max(var(--page-margin), calc((100% - 1280px) / 2)) !important; background: linear-gradient(180deg, var(--rosa-cha), var(--bg)); overflow: hidden; } .a2-eventos__texto { max-width: 540px; } .a2-eventos h2 { color: var(--text); margin-bottom: 24px; } .a2-eventos .dc-lead { max-width: 48ch; margin: 0 0 32px; color: var(--text-muted); } .a2-eventos .a2-tracos i.is-atual { background: var(--accent); } .a2-leque { --abre: clamp(0, (var(--p) - .12) * 3, 1); --w: 220px; --s: .6; list-style: none; margin: 0; padding: 0; position: relative; height: calc(var(--w) * 1.62); } .a2-leque li { position: absolute; left: 50%; bottom: 0; width: var(--w); margin-left: calc(var(--w) / -2); transform-origin: 50% 160%; transform: translateX(calc(var(--k) * var(--abre) * var(--w) * var(--s))) rotate(calc(var(--k) * var(--abre) * 5deg)) translateY(calc(var(--abre) * (var(--k) * var(--k)) * 10px)); z-index: calc(4 - var(--k) * var(--k)); } .a2-leque a { display: block; position: relative; aspect-ratio: 4 / 5; border-radius: var(--card-r); overflow: hidden; background: var(--media); border: 1px solid var(--border); } .a2-leque img { width: 100%; height: 100%; object-fit: cover; display: block; } .a2-leque__rotulo { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: var(--bg); color: var(--text); font: 500 14px/20px var(--font-texto); transition: background 250ms var(--ease), color 250ms var(--ease); } .a2-leque a:hover .a2-leque__rotulo, .a2-leque a:focus-visible .a2-leque__rotulo { background: var(--vinho); color: var(--creme); } @media (max-width: 1024px) { .a2-discreta { grid-template-columns: minmax(0, 1fr); min-height: 0; } .a2-discreta__foto { height: 58svh; } .a2-discreta__foto::after { background: linear-gradient(180deg, transparent 50%, var(--vinho)); } .a2-discreta__texto { padding: 0 var(--page-margin) var(--sec-pad); margin-top: -64px; position: relative; max-width: none; } .a2-eventos { grid-template-columns: minmax(0, 1fr); gap: 48px; } .a2-leque { --w: 210px; } } @media (max-width: 640px) { .a2-discreta__foto { height: 50svh; } .a2-leque { --w: 140px; --s: .4; } .a2-leque__rotulo { left: 8px; bottom: 8px; padding: 4px 10px; font-size: 14px; line-height: 18px; } .a2-caminho strong { font-size: 22px; } } @media (prefers-reduced-motion: reduce) { .a2-leque { --abre: 1; } .a2-caminho, .a2-caminho li { --linha: 1; --on: 1; } .a2-discreta__foto img { transform: none; } } /* Submenus dos departamentos: categorias do Meu Comércio, no visual da loja (sem sombra). */ .dc-header .wp-block-navigation__submenu-container { background: var(--bg) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: var(--r-in) !important; padding: 8px !important; min-width: 240px !important; box-shadow: none !important; } .dc-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 8px 12px !important; border-radius: 8px; color: var(--text); transition: background 200ms var(--ease); } .dc-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--fill-hover); } .dc-header .dc-nav-tudo .wp-block-navigation-item__content { color: var(--accent); font-weight: 500; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; padding: 4px 0 8px 16px !important; min-width: 0 !important; } /* ========================================================================== A Dois · rodada 7 (09/11): hero da rodada 4 com produtos recortados em cartões brancos, selo girando, manifesto com palavras que acendem, departamentos com recortes, foto do marsala tingida de vermelho. ========================================================================== */ /* Esteira do hero: cartão branco, produto sem fundo, preço embaixo. */ .a2-esteira li { width: clamp(150px, 13vw, 200px); } .a2-esteira a { display: flex; flex-direction: column; aspect-ratio: 4 / 5; background: #fff; border: 1px solid var(--border); border-radius: var(--card-r); overflow: hidden; padding: 16px 16px 12px; box-sizing: border-box; color: var(--text); } .a2-esteira a:hover { border-color: var(--border-strong); background: var(--surface-hover); } .a2-esteira__foto { flex: 1; min-height: 0; position: relative; margin-bottom: 8px; } .a2-esteira img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .a2-esteira__preco { font: 500 14px/20px var(--font-texto); color: var(--accent); } .a2-esteira__preco * { display: inline !important; } .a2-esteira__preco del { color: var(--text-subtle); margin-right: 6px; } .a2-selo { transform: rotate(calc(var(--p) * 140deg)); } /* Departamentos: produto recortado num fundo rosa chá, os cartões sobem em sequência com a rolagem. */ .a2-depto__foto { background: var(--rosa-cha); position: relative; } .a2-depto__foto img { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; transform: rotate(calc((1 - var(--sobe)) * -8deg)) translateY(calc((1 - var(--sobe)) * 18px)); } .a2-deptos__grade > li { --sobe: clamp(0, (var(--p) - .08 - var(--n, 0) * .035) * 5, 1); } /* Manifesto: cena presa, cada palavra acende conforme rola. */ .a2-manifesto { --p: 0; height: 220svh; position: relative; background: var(--bg); } .a2-manifesto__palco { position: sticky; top: var(--hdr-h); height: calc(100svh - var(--hdr-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; padding: 0 var(--page-margin); box-sizing: border-box; text-align: center; } .a2-manifesto .a2-selo { position: relative; inset: auto; align-self: center; flex: none; width: 112px; height: 112px; transform: rotate(calc(var(--p) * 300deg)); } .a2-manifesto__frase { margin: 0; max-width: 18ch; font: 300 clamp(40px, 5.6vw, 88px)/1.08 var(--font-titulo); color: var(--accent); text-wrap: balance; } .a2-manifesto__frase span { opacity: calc(.56 + .44 * clamp(0, var(--p) * (var(--t) + 2) - var(--i), 1)); } .a2-manifesto__frase .is-forte { font-weight: 500; } /* Penúltima: a foto ganha o tom do marsala (mesclagem luminosidade sobre o vinho). */ .a2-discreta__foto { background: var(--vinho); } .a2-discreta__foto img { mix-blend-mode: luminosity; opacity: .92; } @media (max-width: 640px) { .a2-esteira li { width: 132px; } .a2-esteira a { padding: 12px 12px 8px; } .a2-manifesto { height: 200svh; } .a2-manifesto__frase { font-size: 36px; } .a2-manifesto .a2-selo { width: 88px; height: 88px; } } @media (prefers-reduced-motion: reduce) { .a2-manifesto { height: auto; } .a2-manifesto__palco { position: static; height: auto; padding: var(--sec-pad) var(--page-margin); } .a2-manifesto__frase span { opacity: 1; } .a2-deptos__grade > li { --sobe: 1; } .a2-selo { transform: none; } } .a2-hero__topo { grid-template-columns: minmax(0, 1fr) minmax(0, 430px); } .a2-hero__lado .a2-chip { white-space: nowrap; } @media (max-width: 1024px) { .a2-hero__topo { grid-template-columns: minmax(0, 1fr); } } /* Filtro por sensação: texto e contagem, logo acima da grade. */ .a2-sensacao-filtro { display: flex; align-items: center; gap: 16px; margin: 0 0 32px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-in); background: var(--rosa-cha); } .a2-sensacao-filtro__rotulo { font: 400 20px/1 var(--font-titulo); color: var(--accent); flex: none; } .a2-sensacao-filtro .dc-chips a { background: var(--bg); } .a2-sensacao-filtro .dc-chips a[aria-current="page"] { background: var(--vinho); color: var(--creme); border-color: var(--vinho); } .a2-qtd { font-size: 14px; color: var(--text-muted); margin-left: 4px; } @media (max-width: 640px) { .a2-sensacao-filtro { flex-direction: column; align-items: stretch; gap: 12px; margin-inline: calc(-1 * var(--page-margin)); border-radius: 0; border-inline: 0; } .a2-sensacao-filtro .dc-chips { padding: 0; } } .a2-sensacoes__atalhos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .a2-sensacoes__atalhos .is-todos { background: var(--vinho); color: var(--creme); border-color: var(--vinho); } /* ========================================================================== A Dois · rodada 8 (09/11): perguntas frequentes, Sobre, Contato, Ajuda, Termos e privacidade. ========================================================================== */ /* Perguntas em sanfona (details): abrir só muda o fundo, e a cruz vira traço. */ .a2-faq__item { border-bottom: 1px solid var(--border); } .a2-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 4px; font: 400 20px/1.3 var(--font-titulo); color: var(--text); border-radius: 8px; transition: background 200ms var(--ease); } .a2-faq__item summary::-webkit-details-marker { display: none; } .a2-faq__item summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--accent), var(--accent)) center / 14px 1.5px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 1.5px 14px no-repeat; transition: background-size 250ms var(--ease); } .a2-faq__item[open] summary::after { background-size: 14px 1.5px, 1.5px 0; } .a2-faq__item summary:hover { background: var(--fill); } .a2-faq__item p { margin: 0 4px 24px; max-width: 64ch; color: var(--text-muted); } .a2-faq--home { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; max-width: 1280px; margin: 0 auto; } .a2-faq--home .a2-faq__lado { position: sticky; top: calc(var(--hdr-h) + 32px); } .a2-faq--home .a2-faq__lista { border-top: 1px solid var(--border); } .a2-faq__titulo { font: 400 28px/1.2 var(--font-titulo); margin: 56px 0 8px; color: var(--accent); scroll-margin-top: calc(var(--hdr-h) + 24px); } .a2-faq__grupo:first-child .a2-faq__titulo { margin-top: 0; } /* Aberturas das páginas internas: mesmo ritmo da home. */ .a2-sobre-abre, .a2-contato__abre, .a2-ajuda__abre, .a2-politicas__abre { max-width: 1280px; margin: 0 auto; padding: clamp(48px, 9svh, 112px) var(--page-margin) 48px; box-sizing: content-box; } .a2-sobre-abre h1, .a2-contato h1, .a2-ajuda h1, .a2-politicas h1 { font-size: clamp(48px, 7vw, 112px); line-height: .95; margin: 0 0 24px; max-width: 12ch; color: var(--accent); } .a2-sobre-abre .dc-lead, .a2-contato__abre .dc-lead, .a2-politicas__abre .dc-lead { max-width: 52ch; } /* Sobre */ .a2-sobre-abre { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px; } .a2-sobre-abre .a2-selo { width: 160px; height: 160px; grid-column: auto; grid-row: auto; position: relative; inset: auto; } .a2-numeros { max-width: 1280px; margin: 0 auto; padding: 0 var(--page-margin) var(--sec-pad); box-sizing: content-box; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .a2-numeros div { padding: 32px 24px 0 0; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border); } .a2-numeros strong { font: 300 clamp(56px, 7vw, 104px)/1 var(--font-titulo); color: var(--accent); } .a2-numeros span { color: var(--text-muted); } .a2-valores { max-width: 1280px; margin: 0 auto; background: var(--rosa-cha); border-radius: var(--r-moldura); padding: var(--sec-pad) clamp(24px, 6vw, 80px) !important; box-sizing: border-box; } .a2-valores__lista { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: v; } .a2-valores__lista li { counter-increment: v; display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--border-strong); } .a2-valores__lista li::before { content: "0" counter(v); font: 300 14px/1 var(--font-texto); color: var(--text-subtle); } .a2-valores__lista strong { font: 500 clamp(32px, 3.4vw, 48px)/1 var(--font-titulo); color: var(--accent); } .a2-valores__lista span { color: var(--text-muted); } .a2-sobre-foto { --p: .5; margin-top: var(--sec-pad); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 90svh; overflow: hidden; } .a2-sobre-foto__img { position: relative; overflow: hidden; background: var(--vinho); } .a2-sobre-foto__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; mix-blend-mode: luminosity; opacity: .92; transform: scale(calc(1.15 - var(--p) * .15)); } .a2-sobre-foto__texto { padding: var(--sec-pad) var(--page-margin); align-self: center; max-width: 560px; } .a2-sobre-foto__texto h2 { font-size: clamp(36px, 4vw, 60px); margin-bottom: 24px; } .a2-sobre-foto__texto p { color: var(--text-muted); } /* Contato */ .a2-contato { padding-bottom: var(--sec-pad); } .a2-contato__canais { list-style: none; max-width: 1280px; margin: 0 auto; padding: 0 var(--page-margin); box-sizing: content-box; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .a2-contato__canais a { display: flex; flex-direction: column; gap: 8px; height: 100%; box-sizing: border-box; padding: 32px; border: 1px solid var(--border); border-radius: var(--card-r); background: var(--surface); color: var(--text); text-decoration: none; transition: background 250ms var(--ease), border-color 250ms var(--ease); } .a2-contato__canais a:hover { background: var(--surface-hover); border-color: var(--border-strong); } .a2-contato__canais .is-principal { grid-row: span 3; } .a2-contato__canais .is-principal a { background: var(--vinho); color: var(--creme); border-color: var(--vinho); justify-content: flex-end; min-height: 360px; } .a2-contato__canais .is-principal a:hover { background: var(--vinho-fundo); } .a2-contato__rotulo { font-size: 14px; color: var(--text-subtle); } .a2-contato__canais .is-principal span { color: var(--creme); } .a2-contato__canais strong { font: 400 clamp(22px, 2.4vw, 32px)/1.15 var(--font-titulo); overflow-wrap: anywhere; } .a2-contato__canais .is-principal strong { font-size: clamp(36px, 4vw, 56px); } .a2-contato__canais span { color: var(--text-muted); } .a2-contato__canais .a2-contato__ir { margin-top: 12px; font-weight: 500; color: var(--accent); } .a2-contato__canais .is-principal .a2-contato__ir { color: var(--creme); } .a2-contato__ajuda { max-width: 1280px; margin: 32px auto 0; padding: 0 var(--page-margin); box-sizing: content-box; color: var(--text-muted); } /* Ajuda */ .a2-ajuda__temas { margin-top: 32px; } .a2-ajuda__temas .dc-chips { padding: 0; } .a2-faq--pagina { max-width: 860px; margin: 0 auto; padding: 0 var(--page-margin) var(--sec-pad); box-sizing: content-box; } .a2-ajuda__fim { max-width: 1280px; margin: 0 auto var(--sec-pad); box-sizing: border-box; border-radius: var(--r-moldura); padding: clamp(40px, 6vw, 80px); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .a2-ajuda__fim h2 { font-size: clamp(36px, 4vw, 56px); margin: 0; } /* Termos e privacidade */ .a2-politicas__corpo { max-width: 1280px; margin: 0 auto; padding: 0 var(--page-margin) var(--sec-pad); box-sizing: content-box; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 64px; align-items: start; } .a2-politicas__indice { position: sticky; top: calc(var(--hdr-h) + 32px); } .a2-politicas__indice ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); } .a2-politicas__indice a { display: block; padding: 8px 16px; color: var(--text-muted); text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; } .a2-politicas__indice a:hover { color: var(--text); border-left-color: var(--accent); } .a2-politicas__texto { max-width: 68ch; } .a2-politicas__texto h2 { font: 400 32px/1.2 var(--font-titulo); color: var(--accent); margin: 56px 0 16px; scroll-margin-top: calc(var(--hdr-h) + 24px); } .a2-politicas__texto h2:first-child { margin-top: 0; } .a2-politicas__texto li { margin-bottom: 12px; } .a2-politicas__texto, .a2-politicas__texto p, .a2-politicas__texto li { color: var(--text-muted); } .a2-politicas__texto strong { color: var(--text); font-weight: 500; } .a2-politicas__data { margin-top: 48px; font-size: 14px; color: var(--text-subtle); } @media (max-width: 1024px) { .a2-faq--home { grid-template-columns: minmax(0, 1fr); gap: 32px; } .a2-faq--home .a2-faq__lado { position: static; } .a2-sobre-foto { grid-template-columns: minmax(0, 1fr); } .a2-sobre-foto__img { height: 60svh; } .a2-politicas__corpo { grid-template-columns: minmax(0, 1fr); gap: 32px; } .a2-politicas__indice { position: static; } } @media (max-width: 640px) { .a2-sobre-abre { grid-template-columns: minmax(0, 1fr); gap: 24px; } .a2-sobre-abre .a2-selo { width: 104px; height: 104px; } .a2-numeros, .a2-valores__lista, .a2-contato__canais { grid-template-columns: minmax(0, 1fr); } .a2-numeros div { padding-top: 24px; } .a2-valores { border-radius: 0; } .a2-contato__canais .is-principal { grid-row: auto; } .a2-contato__canais .is-principal a { min-height: 0; } .a2-contato__canais a { padding: 24px; } .a2-faq__item summary { font-size: 18px; } .a2-ajuda__fim { border-radius: 0; } } /* ========================================================================== A Dois · rodada 9 (09/11): etapas e confiança na sacola e na finalização; sensações e perguntas no produto. ========================================================================== */ .a2-etapas { list-style: none; margin: 0 0 24px; padding: 0; display: flex; gap: 8px; counter-reset: etapa; flex-wrap: wrap; } .a2-etapas li { counter-increment: etapa; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-subtle); } .a2-etapas li::before { content: counter(etapa); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-strong); font-size: 12px; } .a2-etapas li + li { padding-left: 32px; position: relative; } .a2-etapas li + li::after { content: ""; position: absolute; left: 4px; top: 50%; width: 20px; height: 1px; background: var(--border-strong); } .a2-etapas .is-atual { color: var(--text); font-weight: 500; } .a2-etapas .is-atual::before { background: var(--vinho); border-color: var(--vinho); color: var(--creme); } .a2-etapas .is-feita::before { content: ""; background: var(--rosa-cha) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b2525' stroke-width='2.5'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; } .a2-etapas a { color: inherit; } .a2-compra-confianca { list-style: none; margin: 48px 0 0; padding: 24px 0 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .a2-compra-confianca li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--text-muted); } .a2-compra-confianca strong { display: block; color: var(--text); font-weight: 500; margin-bottom: 2px; } .a2-compra-confianca .dc-ico { flex: none; width: 24px; height: 24px; } .a2-compra-confianca .is-zap a { display: flex; gap: 12px; padding: 12px; margin: -12px 0; border-radius: var(--r-in); color: inherit; text-decoration: none; background: var(--rosa-cha); transition: background 200ms var(--ease); } .a2-compra-confianca .is-zap a:hover { background: var(--bg-subtle); } .a2-produto-sensacoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .a2-produto-sensacoes > span { font: 400 18px/1 var(--font-titulo); color: var(--accent); } .a2-faq--produto { margin-top: 24px; border-top: 1px solid var(--border); } .a2-faq--produto summary { font-size: 17px; padding: 16px 4px; } @media (max-width: 1024px) { .a2-compra-confianca { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .a2-compra-confianca { grid-template-columns: minmax(0, 1fr); } .a2-compra-confianca .is-zap a { margin: 0; } .a2-etapas li + li { padding-left: 24px; } .a2-etapas li + li::after { width: 14px; } .a2-etapas span, .a2-etapas a { font-size: 14px; } } /* ========================================================================== A Dois · rodada 10 (09/11): gaveta da sacola completa e quiz de sensação. ========================================================================== */ /* Gaveta */ .wc-block-components-drawer__close { color: var(--text) !important; } .wc-block-components-drawer__close:hover { background: var(--fill-hover) !important; border-color: var(--border-hover) !important; } .wc-block-components-drawer__close svg { width: 20px; height: 20px; fill: currentColor; } .a2-gaveta { padding: 8px 0 24px; display: grid; gap: 16px; } .a2-gaveta__aviso { margin: 0; display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: var(--r-in); background: var(--rosa-cha); color: var(--text); font-size: 14px; line-height: 20px; } .a2-gaveta__aviso .dc-ico { flex: none; width: 20px; height: 20px; } .a2-gaveta__titulo { margin: 8px 0 0; font: 400 18px/24px var(--font-titulo); color: var(--accent); } .a2-gaveta__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .a2-gaveta__lista a { display: grid; gap: 6px; color: var(--text); text-decoration: none; font-size: 14px; line-height: 20px; } .a2-gaveta__lista img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: var(--r-in); background: #fff; border: 1px solid var(--border); transition: border-color 200ms var(--ease); } .a2-gaveta__lista a:hover img { border-color: var(--border-hover); } .a2-gaveta__nome { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .a2-gaveta__lista strong { font-weight: 500; font-variant-numeric: tabular-nums; } .a2-gaveta__quiz { display: grid; gap: 2px; padding: 16px; border-radius: var(--r-in); border: 1px solid var(--border); color: var(--text); text-decoration: none; font-weight: 500; transition: background 200ms var(--ease), border-color 200ms var(--ease); } .a2-gaveta__quiz span { font-weight: 400; font-size: 14px; color: var(--text-muted); } .a2-gaveta__quiz:hover { background: var(--fill-hover); border-color: var(--border-hover); } .wc-block-mini-cart__empty-cart-wrapper .a2-gaveta { padding: 24px 32px; text-align: left; } /* Atalho do quiz nos filtros e na home */ .a2-sensacao-filtro .is-quiz, .a2-chip.is-quiz { background: var(--vinho) !important; border-color: var(--vinho) !important; color: var(--creme) !important; } .a2-sensacao-filtro .is-quiz:hover, .a2-chip.is-quiz:hover { background: var(--vinho-claro) !important; border-color: var(--vinho-claro) !important; } /* Quiz */ .a2-quiz { max-width: 1280px; margin: 0 auto; padding: clamp(48px, 9svh, 112px) var(--page-margin) 96px; box-sizing: content-box; } .a2-quiz__abre { max-width: 760px; margin-bottom: 48px; } .a2-quiz__form { max-width: 960px; border: 0; } .a2-quiz__barra { height: 4px; border-radius: 4px; background: var(--rosa-cha); margin-bottom: 40px; overflow: hidden; } .a2-quiz__barra i { display: block; height: 100%; width: 0; background: var(--vinho); transition: width 400ms var(--ease); } .a2-quiz:not(.is-js) .a2-quiz__barra { display: none; } .a2-quiz__passo { border: 0; margin: 0 0 48px; padding: 0; min-width: 0; } .a2-quiz.is-js .a2-quiz__passo { margin: 0; animation: a2-quiz-entra 400ms var(--ease); } @keyframes a2-quiz-entra { from { opacity: 0; translate: 0 12px; } } .a2-quiz__passo legend { padding: 0; margin-bottom: 24px; font: 400 clamp(28px, 3.4vw, 40px)/1.15 var(--font-titulo); color: var(--text); text-wrap: pretty; outline: none; } .a2-quiz__num { display: block; font: 400 14px/20px var(--font-texto); color: var(--text-muted); margin-bottom: 8px; } .a2-quiz__opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .a2-quiz__opcao { position: relative; display: grid; gap: 4px; align-content: start; min-height: 120px; padding: 24px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: background 200ms var(--ease), border-color 200ms var(--ease); } .a2-quiz__opcao:hover { background: var(--fill-hover); border-color: var(--border-hover); } .a2-quiz__opcao input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .a2-quiz__opcao:has(input:focus-visible) { outline: 2px solid var(--vinho); outline-offset: 2px; } .a2-quiz__opcao:has(input:checked) { background: var(--rosa-cha); border-color: var(--vinho); } .a2-quiz__nome { font: 400 24px/30px var(--font-titulo); color: var(--accent); } .a2-quiz__dica { font-size: 16px; line-height: 24px; color: var(--text-muted); } .a2-quiz__voltar { margin-top: 24px; background: none; border: 0; padding: 8px 0; font: inherit; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .a2-quiz__voltar:hover { color: var(--text); } .a2-quiz__res { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; animation: a2-quiz-entra 500ms var(--ease); } .a2-quiz__res-topo { display: grid; gap: 16px; justify-items: start; position: sticky; top: calc(var(--hdr-h, 76px) + 24px); } .a2-quiz__res-topo h2 { margin: 0; font-size: clamp(48px, 6vw, 80px); line-height: 1; outline: none; } .a2-quiz__eyebrow { margin: 0; font-size: 14px; color: var(--text-muted); } .a2-quiz__produtos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .a2-quiz__fim { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); } .a2-quiz__tambem { margin: 0 auto 0 0; color: var(--text-muted); } .a2-quiz__tambem a { color: var(--text); text-underline-offset: 3px; } .a2-quiz__fim button.a2-chip { font: inherit; cursor: pointer; } .a2-quiz__sem-js { padding: 0; } @media (max-width: 900px) { .a2-quiz__res { grid-template-columns: minmax(0, 1fr); gap: 32px; } .a2-quiz__res-topo { position: static; } } @media (max-width: 640px) { .a2-quiz__opcoes { grid-template-columns: minmax(0, 1fr); } .a2-quiz__opcao { min-height: 0; padding: 20px; } .a2-quiz__produtos { gap: 12px; } .a2-quiz__tambem { flex-basis: 100%; } } @media (prefers-reduced-motion: reduce) { .a2-quiz.is-js .a2-quiz__passo, .a2-quiz__res { animation: none; } .a2-quiz__barra i { transition: none; } } .a2-quiz [hidden] { display: none !important; } .a2-quiz__form { max-width: none; } .a2-quiz__opcoes { counter-reset: opcao; } .a2-quiz__opcao { min-height: 200px; grid-template-rows: auto auto 1fr; } .a2-quiz__opcao::after { counter-increment: opcao; content: counter(opcao, decimal-leading-zero); align-self: end; justify-self: end; font: 300 56px/1 var(--font-titulo); color: var(--border-strong); transition: color 200ms var(--ease); } .a2-quiz__opcao:has(input:checked)::after { color: var(--vinho); } @media (max-width: 640px) { .a2-quiz__opcao { min-height: 0; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; } .a2-quiz__opcao::after { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 40px; } .a2-quiz__nome, .a2-quiz__dica { grid-column: 1; } } .a2-quiz [tabindex="-1"]:focus { outline: none !important; box-shadow: none !important; } .wc-block-components-drawer__close svg { width: 20px !important; height: 20px !important; } /* ---------- Busca sem resultado (LOJ-11): termo, departamentos, quiz e WhatsApp ---------- */ .a2-sem-busca { display: grid; gap: 16px; padding: var(--space-48) 0; max-width: 720px; } .a2-sem-busca__titulo { margin: 0; font: 300 var(--t-h3-size)/var(--t-h3-lh) var(--font-titulo); letter-spacing: -0.02em; color: var(--text); text-wrap: pretty; } .a2-sem-busca .dc-apoio { margin: 0; } .a2-sem-busca .dc-chips { margin: 8px 0; padding: 0; } /* Contraste mínimo de 3:1 no texto grande antes de acender: 0,56 de opacidade sobre o creme. */ /* ---------- Busca no topo do menu do celular ---------- */ .dc-acoes .dc-nav-mobile .dc-busca-menu { display: block; width: 100%; margin: 0 0 16px; } .dc-nav-mobile .dc-busca-menu .wp-block-search__inside-wrapper { border: 1px solid var(--border-strong); border-radius: var(--r-ctl); background: var(--surface); padding: 4px; } .dc-nav-mobile .dc-busca-menu .wp-block-search__input { border: 0; background: none; color: var(--text); font: 400 16px/24px var(--font-texto); min-height: 44px; padding: 0 12px; } .dc-nav-mobile .dc-busca-menu .wp-block-search__input::placeholder { color: var(--text-subtle); } .dc-nav-mobile .dc-busca-menu .wp-block-search__button { margin: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: calc(var(--r-ctl) - 4px); background: var(--btn-bg); color: var(--btn-text); display: inline-flex; align-items: center; justify-content: center; } .dc-nav-mobile .dc-busca-menu .wp-block-search__button:hover { background: var(--btn-bg-hover); } .dc-nav-mobile .dc-busca-menu .wp-block-search__button svg { width: 22px; height: 22px; fill: currentColor; } .a2-sem-busca a:not(.dc-chips a) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .a2-sem-busca a:not(.dc-chips a):hover { color: var(--text); } /* Sem resultado, contagem, ordem e chips de cima viram ruído: ficam só as sugestões. */ .dc-loja-grade:has(.a2-sem-busca) .dc-filtros, .dc-loja-grade:has(.a2-sem-busca) .a2-sensacao-filtro { display: none !important; } .dc-nav-mobile .dc-busca-menu .wp-block-search__input:focus { outline: none; box-shadow: none; } .dc-nav-mobile .dc-busca-menu .wp-block-search__inside-wrapper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .wp-block-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } /* Produto: perguntas rápidas no mesmo desenho das sanfonas Descrição/Envio/Trocas logo abaixo. */ .a2-faq--produto .a2-faq__item summary { font: 400 var(--t-h5-size)/var(--t-h5-lh) var(--font-texto); letter-spacing: -0.005em; } /* Preço do card alinhado ao nome: a margem de 8px vale só no bloco de fora, não no preço de dentro. */ .wc-block-product-template .wp-block-woocommerce-product-price .wc-block-components-product-price { margin: 0 !important; } /* ---------- Sugestões da busca ---------- */ .wp-block-search { position: relative; } .a2-sugestoes { position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; width: min(400px, calc(100vw - 32px)); max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 2px; padding: 8px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 20px; box-shadow: none; text-align: left; } .a2-sugestoes[hidden] { display: none; } .dc-busca-menu .a2-sugestoes { left: 0; right: 0; width: auto; } .a2-sugestoes__item { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "foto nome" "foto preco"; column-gap: 12px; align-items: center; padding: 8px; border-radius: 12px; color: var(--text); text-decoration: none; transition: background 200ms var(--ease); } .a2-sugestoes__item:hover, .a2-sugestoes__item[aria-selected="true"] { background: var(--fill-hover); } .a2-sugestoes__foto { grid-area: foto; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--media); } .a2-sugestoes__foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .a2-sugestoes__nome { grid-area: nome; font: 400 15px/20px var(--font-texto); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; align-self: end; } .a2-sugestoes__preco { grid-area: preco; font: 500 16px/22px var(--font-titulo); font-variant-numeric: lining-nums; align-self: start; } .a2-sugestoes__vazio { margin: 0; padding: 12px 8px; font-size: 15px; color: var(--text-muted); } .a2-sugestoes__todos { display: block; margin-top: 4px; padding: 12px 8px; border-top: 1px solid var(--border); color: var(--accent); font: 500 15px/20px var(--font-texto); text-decoration: none; border-radius: 0 0 12px 12px; transition: background 200ms var(--ease); } .a2-sugestoes__todos:hover { background: var(--fill-hover); } .dc-busca-menu .a2-sugestoes { position: static; margin-top: 8px; max-height: none; } /* Paginação da loja, categorias e busca (24 por página). */ .a2-paginas { margin: var(--space-48) 0 0 !important; gap: 8px; flex-wrap: wrap; font: 400 16px/24px var(--font-texto); } .a2-paginas a, .a2-paginas .page-numbers { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 16px; box-sizing: border-box; border-radius: var(--r-ctl); border: 1px solid var(--border); background: var(--fill); color: var(--text); text-decoration: none; transition: background-color 250ms var(--ease), border-color 250ms var(--ease); } .a2-paginas a:hover { background: var(--fill-hover); border-color: var(--border-hover); } .a2-paginas .page-numbers.current { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-text); font-weight: 500; } .a2-paginas .page-numbers.dots { border-color: transparent; background: none; min-width: 24px; padding: 0; } .a2-paginas a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } @media (max-width: 640px) { .a2-paginas .page-numbers:not(.current):not(.dots) { padding: 0 12px; } .a2-paginas .wp-block-query-pagination-previous, .a2-paginas .wp-block-query-pagination-next { font-size: 0; gap: 0; padding: 0 12px; } .a2-paginas .wp-block-query-pagination-previous-arrow, .a2-paginas .wp-block-query-pagination-next-arrow { font-size: 16px; margin: 0; } } /* Checkout sem gateway: o aviso leva um botão com o pedido montado para o WhatsApp. */ .a2-zap-pedido { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 16px; padding: 0 24px; border-radius: var(--r-ctl); background: var(--btn-bg); color: var(--btn-text) !important; font: 500 16px/24px var(--font-texto); text-decoration: none !important; transition: background-color 250ms var(--ease); } .a2-zap-pedido:hover { background: var(--btn-bg-hover); } .a2-zap-pedido:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* Menu do celular: submenus em sanfona, fechados até o toque. */ .dc-nav-mobile .has-child > button[data-a2-sanfona] { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left; } .dc-nav-mobile .has-child > button[data-a2-sanfona]::after { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--i-chevron) center / contain no-repeat; mask: var(--i-chevron) center / contain no-repeat; transform: rotate(90deg); transition: transform 250ms var(--ease); } .dc-nav-mobile .has-child > button[data-a2-sanfona][aria-expanded="true"]::after { transform: rotate(-90deg); } .dc-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .has-child > button[data-a2-sanfona][aria-expanded="false"] ~ .wp-block-navigation__submenu-container { display: none !important; } .dc-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 18px !important; line-height: 28px !important; }