:root { --bm-accent: var(--bm-accent-500); --bm-accent-dark: var(--bm-accent-600); --bm-fg: var(--bm-gray-900); --bm-bg: #ffffff; --bm-header-bg: #252525; --bm-nav-bg: var(--bm-accent-900); --bm-footer-bg: #0d0f0f; } html, body { margin: 0; padding: 0; font-family: var(--body-font); font-size: var(--font-base); color: var(--bm-fg); background: var(--bm-bg); line-height: var(--bm-leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color var(--bm-transition-fast); } a:hover { color: var(--bm-accent); } :focus-visible { outline: 2px solid var(--bm-accent-500); outline-offset: 2px; border-radius: var(--bm-radius-sm); } .skip-link { position: absolute; top: -100px; left: var(--bm-space-2); z-index: 9999; padding: var(--bm-space-3) var(--bm-space-4); background: var(--bm-accent-700); color: #fff; font-weight: 600; border-radius: var(--bm-radius-md); text-decoration: none; transition: top var(--bm-transition-fast); } .skip-link:focus, .skip-link:focus-visible { top: var(--bm-space-2); color: #fff; } .container { max-width: 1140px; margin: 0 auto; padding: 0 var(--bm-space-4); } .btn-primary, .btn-secondary, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: var(--bm-space-2); padding: var(--bm-space-3) var(--bm-space-6); border-radius: var(--bm-radius-md); font-family: inherit; font-size: var(--bm-text-sm); font-weight: var(--bm-weight-semibold); letter-spacing: var(--bm-tracking-wide); text-transform: uppercase; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: all var(--bm-transition-fast); line-height: 1; } .btn-primary { background: var(--bm-accent-500); color: #fff; border-color: var(--bm-accent-500); box-shadow: var(--bm-shadow-sm); } .btn-primary:hover { background: var(--bm-accent-600); border-color: var(--bm-accent-600); box-shadow: var(--bm-shadow-md); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); box-shadow: var(--bm-shadow-sm); } .btn-secondary { background: #fff; color: var(--bm-gray-800); border-color: var(--bm-gray-300); } .btn-secondary:hover { background: var(--bm-gray-50); border-color: var(--bm-gray-400); color: var(--bm-gray-900); } .btn-ghost { background: transparent; color: var(--bm-accent-700); border-color: transparent; } .btn-ghost:hover { background: var(--bm-accent-50); color: var(--bm-accent-800); } .btn-primary[disabled], .btn-secondary[disabled], .btn-ghost[disabled], .btn-primary:disabled, .btn-secondary:disabled, .btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; } .btn-sm { padding: var(--bm-space-2) var(--bm-space-4); font-size: var(--bm-text-xs); } .btn-lg { padding: var(--bm-space-4) var(--bm-space-8); font-size: var(--bm-text-base); } .is-loading { position: relative; pointer-events: none; opacity: 0.7; } .is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; border: 3px solid var(--bm-gray-200); border-top-color: var(--bm-accent-500); border-radius: var(--bm-radius-full); animation: bm-spin 0.8s linear infinite; } @keyframes bm-spin { to { transform: rotate(360deg); } } .skeleton { background: linear-gradient(90deg, var(--bm-gray-100) 25%, var(--bm-gray-200) 50%, var(--bm-gray-100) 75%); background-size: 200% 100%; animation: bm-shimmer 1.4s ease infinite; border-radius: var(--bm-radius-sm); } @keyframes bm-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .site-header { background: var(--bm-header-bg); color: #fff; } .header-top { padding: 12px 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; max-width: 1400px; margin: 0 auto; padding-left: 16px; padding-right: 16px; } .header-search input { width: 100%; max-width: 400px; padding: 10px 14px; background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 22px; font-size: 14px; } .header-search input::placeholder { color: rgba(255,255,255,0.6); } .header-logo img { max-height: 72px; width: auto; margin: 0 auto; } .header-utility { display: flex; gap: 18px; justify-content: flex-end; align-items: center; font-size: 14px; } .header-utility a { color: #fff; transition: color 0.2s; } .header-utility a:hover { color: var(--bm-accent); } .header-utility .utility-account small { display: block; font-size: 11px; opacity: 0.75; } .utility-cart { display: inline-flex; gap: 6px; align-items: center; } .utility-cart .cart-count { background: var(--bm-accent); color: #fff; border-radius: 10px; padding: 2px 7px; font-size: 11px; font-weight: 700; } .main-nav { background: var(--bm-nav-bg); } .nav-menu { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-menu > li > a { color: #fff; text-transform: uppercase; font-weight: 700; font-size: 14px; padding: 14px 16px; display: block; letter-spacing: 0.5px; transition: background 0.2s; } .nav-menu > li > a:hover, .nav-menu > li.active > a { background: rgba(255,255,255,0.08); color: var(--bm-accent); } .nav-menu li.has-dropdown { position: relative; } .nav-menu .dropdown { display: none; position: absolute; top: 100%; left: 0; background: var(--bm-nav-bg); list-style: none; margin: 0; padding: 0; min-width: 200px; z-index: 100; box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .nav-menu li.has-dropdown:hover .dropdown, .nav-menu li.has-dropdown:focus-within .dropdown, .nav-menu li.has-dropdown[aria-expanded="true"] .dropdown { display: block; } .nav-menu .dropdown li a { padding: 12px 16px; color: #fff; display: block; } .nav-menu .dropdown li a:hover { background: rgba(255,255,255,0.1); color: var(--bm-accent); } .nav-menu li.has-dropdown[aria-expanded="true"] > a { background: rgba(255,255,255,0.08); color: var(--bm-accent); } .hero-swiper { width: 100%; aspect-ratio: 1920 / 708; height: auto; max-height: 720px; } .hero-swiper .swiper-wrapper, .hero-swiper .swiper-slide { height: auto; aspect-ratio: 1920 / 708; } .hero-swiper .swiper-slide { position: relative; overflow: hidden; } .hero-swiper .swiper-slide a { display: block; width: 100%; height: 100%; } .hero-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform var(--bm-transition-slow); } .hero-swiper .swiper-slide:hover img { transform: scale(1.02); } .hero-slide__overlay { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.1) 100% ); pointer-events: none; z-index: var(--bm-z-base); } .hero-slide__content { position: absolute; top: 50%; left: 0; transform: translateY(-50%); max-width: 600px; padding: var(--bm-space-8) var(--bm-space-12); color: #fff; z-index: calc(var(--bm-z-base) + 1); } .hero-slide__title { font-size: clamp(var(--bm-text-3xl), 5vw, var(--bm-text-5xl)); font-weight: var(--bm-weight-bold); line-height: var(--bm-leading-tight); letter-spacing: var(--bm-tracking-tight); margin: 0 0 var(--bm-space-4); color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } .hero-slide__subtitle { font-size: clamp(var(--bm-text-base), 1.8vw, var(--bm-text-xl)); font-weight: var(--bm-weight-regular); line-height: var(--bm-leading-normal); margin: 0 0 var(--bm-space-6); color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); max-width: 480px; } .hero-slide__cta { box-shadow: var(--bm-shadow-lg); } .hero-slide__cta:hover { box-shadow: var(--bm-shadow-xl); } @media (max-width: 768px) { .hero-slide__content { padding: var(--bm-space-6); max-width: 100%; } .hero-slide__subtitle { font-size: var(--bm-text-sm); } .hero-slide__overlay { background: linear-gradient( 180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.65) 100% ); } } .section-informative-banners { padding: 0; } .informative-banner-item { text-align: center; padding: 16px 12px; } .informative-banner-item .banner-icon { font-size: 40px; margin-bottom: 8px; } .informative-banner-item h3 { margin: 8px 0 4px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; } .informative-banner-item p { font-size: 14px; opacity: 0.7; margin: 0; } .informative-banner-item h3 a { color: inherit; } .section-categories-home { padding: var(--bm-space-2) 0 var(--bm-space-4); } .section-title { text-align: center; margin: 0 0 var(--bm-space-8); font-size: var(--bm-text-3xl); font-weight: var(--bm-weight-bold); letter-spacing: var(--bm-tracking-tight); line-height: var(--bm-leading-tight); color: var(--bm-gray-900); text-transform: none; position: relative; padding-bottom: var(--bm-space-3); } .section-title::after { content: ""; display: block; width: 48px; height: 3px; background: var(--bm-accent-500); margin: var(--bm-space-3) auto 0; border-radius: var(--bm-radius-full); } @media (max-width: 600px) { .section-title { font-size: var(--bm-text-2xl); } } .categories-row { display: flex; gap: 12px; justify-content: space-between; flex-wrap: nowrap; } .category-btn { flex: 1; text-align: center; padding: 16px 12px; background: var(--bm-accent); color: #fff !important; border-radius: 4px; font-weight: 700; letter-spacing: 1px; font-size: 14px; text-transform: uppercase; transition: background 0.2s; } .category-btn:hover { background: var(--bm-accent-dark); } .section-featured-products-home, .section-sale-products-home { padding: 32px 0; } .products-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 992px) { .products-row { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .products-row { grid-template-columns: repeat(2, 1fr); } } .product-card { background: #fff; border: 1px solid var(--bm-gray-200); border-radius: var(--bm-radius-lg); padding: var(--bm-space-3); box-shadow: var(--bm-shadow-sm); transition: box-shadow var(--bm-transition-base), transform var(--bm-transition-base), border-color var(--bm-transition-base); position: relative; display: flex; flex-direction: column; } .product-card:hover { box-shadow: var(--bm-shadow-lg); transform: translateY(-3px); border-color: var(--bm-accent-200); } .product-card .product-image { aspect-ratio: 1; overflow: hidden; margin-bottom: var(--bm-space-3); position: relative; border-radius: var(--bm-radius-md); background: var(--bm-gray-50); } .product-card .product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--bm-transition-slow); } .product-card:hover .product-image img { transform: scale(1.04); } .product-card .onsale { position: absolute; top: var(--bm-space-2); left: var(--bm-space-2); background: var(--bm-accent-500); color: #fff; padding: var(--bm-space-1) var(--bm-space-3); font-size: var(--bm-text-xs); font-weight: var(--bm-weight-bold); border-radius: var(--bm-radius-full); text-transform: uppercase; letter-spacing: var(--bm-tracking-wide); box-shadow: var(--bm-shadow-sm); } .product-card .product-name { font-size: var(--bm-text-sm); line-height: var(--bm-leading-normal); margin: 0 0 var(--bm-space-2); height: 60px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; color: var(--bm-gray-800); font-weight: var(--bm-weight-medium); } .product-card .price-old { text-decoration: line-through; color: var(--bm-gray-400); font-size: var(--bm-text-xs); margin-right: var(--bm-space-2); } .product-card .price-current { font-size: var(--bm-text-xl); font-weight: var(--bm-weight-bold); color: var(--bm-gray-900); letter-spacing: var(--bm-tracking-tight); } .btn-comprar { display: inline-flex; align-items: center; justify-content: center; gap: var(--bm-space-2); padding: var(--bm-space-3) var(--bm-space-6); background: var(--bm-accent-500); color: #fff; border: 1px solid var(--bm-accent-500); border-radius: var(--bm-radius-md); font-family: inherit; font-weight: var(--bm-weight-semibold); text-transform: uppercase; font-size: var(--bm-text-sm); letter-spacing: var(--bm-tracking-wide); line-height: 1; cursor: pointer; transition: background var(--bm-transition-fast), border-color var(--bm-transition-fast), box-shadow var(--bm-transition-fast), transform var(--bm-transition-fast); box-shadow: var(--bm-shadow-sm); text-decoration: none; } .btn-comprar:hover { background: var(--bm-accent-600); border-color: var(--bm-accent-600); box-shadow: var(--bm-shadow-md); } .btn-comprar:active { transform: translateY(0); box-shadow: var(--bm-shadow-sm); } .btn-comprar:disabled, .btn-comprar[disabled], .btn-comprar[aria-disabled="true"] { background: var(--bm-gray-300); border-color: var(--bm-gray-300); color: var(--bm-gray-600); cursor: not-allowed; box-shadow: none; transform: none; } .product-card .btn-comprar { display: flex; align-items: center; justify-content: center; gap: var(--bm-space-2); width: 100%; padding: var(--bm-space-3); background: var(--bm-accent-500); color: #fff; border: none; border-radius: var(--bm-radius-md); font-weight: var(--bm-weight-semibold); text-transform: uppercase; font-size: var(--bm-text-sm); letter-spacing: var(--bm-tracking-wide); cursor: pointer; margin-top: var(--bm-space-3); transition: all var(--bm-transition-fast); box-shadow: var(--bm-shadow-sm); } .product-card .btn-comprar::after { content: "→"; font-size: var(--bm-text-base); transition: transform var(--bm-transition-fast); } .product-card .btn-comprar:hover { background: var(--bm-accent-600); box-shadow: var(--bm-shadow-md); } .product-card .btn-comprar:hover::after { transform: translateX(3px); } .product-card .btn-comprar:disabled, .product-card .btn-comprar[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; } .section-banners-home { padding: 24px 0; } .section-banners-home img { width: 100%; height: auto; border-radius: 8px; display: block; transition: transform 0.3s ease; } .section-banners-home a:hover img { transform: scale(1.02); } @media (max-width: 768px) { .section-banners-home .row { grid-template-columns: 1fr; } } .section-brands-home { padding: 32px 0; text-align: center; background: #fafafa; } .brands-list { font-weight: 700; letter-spacing: 1px; opacity: 0.7; font-size: 14px; text-transform: uppercase; } .section-instafeed-home { padding: 48px 0; text-align: center; } .instagram-cta { color: var(--bm-accent); font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; } .instagram-cta:hover { color: var(--bm-accent-dark); } .site-footer { background: var(--bm-footer-bg); color: rgba(255,255,255,0.82); padding: var(--bm-space-12) 0 0; margin-top: var(--bm-space-12); font-size: var(--bm-text-sm); line-height: var(--bm-leading-relaxed); } .site-footer .footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--bm-space-8); } @media (max-width: 1024px) { .site-footer .footer-cols { gap: var(--bm-space-6); } } @media (max-width: 768px) { .site-footer .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .site-footer .footer-cols { grid-template-columns: 1fr; } } .footer-title { color: #fff; text-transform: uppercase; letter-spacing: var(--bm-tracking-wider); font-size: var(--bm-text-xs); font-weight: var(--bm-weight-bold); margin: 0 0 var(--bm-space-4); padding-bottom: var(--bm-space-3); position: relative; } .footer-title::after { content: ""; position: absolute; bottom: 0; left: 0; width: 32px; height: 2px; background: var(--bm-accent-500); border-radius: var(--bm-radius-full); } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer ul li { padding: var(--bm-space-1) 0; } .site-footer a { color: rgba(255,255,255,0.82); transition: color var(--bm-transition-fast); } .site-footer a:hover { color: var(--bm-accent-300); } .site-footer p { margin: var(--bm-space-2) 0; } .newsletter-form { display: flex; gap: var(--bm-space-2); margin-bottom: var(--bm-space-4); } .newsletter-form input { flex: 1; padding: var(--bm-space-3) var(--bm-space-4); border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #fff; border-radius: var(--bm-radius-md); font-size: var(--bm-text-sm); font-family: inherit; transition: border-color var(--bm-transition-fast), background var(--bm-transition-fast); } .newsletter-form input::placeholder { color: rgba(255,255,255,0.5); } .newsletter-form input:focus { outline: none; border-color: var(--bm-accent-500); background: rgba(255,255,255,0.1); box-shadow: 0 0 0 3px rgba(129,209,70,0.35); } .newsletter-form input:focus-visible { outline: 2px solid var(--bm-accent-500); outline-offset: 2px; } .newsletter-form button { padding: var(--bm-space-3) var(--bm-space-5); background: var(--bm-accent-500); color: #fff; border: none; border-radius: var(--bm-radius-md); font-weight: var(--bm-weight-bold); font-size: var(--bm-text-sm); text-transform: uppercase; letter-spacing: var(--bm-tracking-wide); cursor: pointer; transition: background var(--bm-transition-fast); } .newsletter-form button:hover { background: var(--bm-accent-600); } .footer-social a { font-size: 14px; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding: 16px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 600px) { .footer-bottom { grid-template-columns: 1fr; } } .payment-icons, .shipping-icons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .bm-pay-badge { background: #fff; color: #1a1f36; border-radius: 4px; padding: 4px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; display: inline-flex; align-items: center; min-height: 22px; line-height: 1; } .bm-pay-badge.bm-pay-visa { background: linear-gradient(180deg, #1A1F71, #0e1452); color: #fff; } .bm-pay-badge.bm-pay-master { background: linear-gradient(180deg, #EB001B, #F79E1B); color: #fff; } .bm-pay-badge.bm-pay-elo { background: #000; color: #fff; } .bm-pay-badge.bm-pay-amex { background: #006FCF; color: #fff; } .bm-pay-badge.bm-pay-hiper { background: #b22033; color: #fff; } .bm-pay-badge.bm-pay-pix { background: #32BCAD; color: #fff; } .bm-pay-badge.bm-pay-boleto { background: #fff; color: #1a1f36; border: 1px solid #1a1f36; } .site-info { background: var(--bm-footer-bg); color: rgba(255,255,255,0.5); padding: 16px 0; font-size: 12px; text-align: center; } .bm-whatsapp-float { position: fixed; bottom: var(--bm-space-6); right: var(--bm-space-6); z-index: var(--bm-z-toast); background: #25D366; width: 56px; height: 56px; border-radius: var(--bm-radius-full); display: flex; align-items: center; justify-content: center; box-shadow: var(--bm-shadow-lg); transition: transform var(--bm-transition-base); animation: bm-wa-pulse 2s infinite; } .bm-whatsapp-float:hover { transform: scale(1.08); } @keyframes bm-wa-pulse { 0% { box-shadow: 0 4px 12px rgba(37,211,102,0.5), 0 0 0 0 rgba(37,211,102,0.5); } 50% { box-shadow: 0 4px 12px rgba(37,211,102,0.3), 0 0 0 12px rgba(37,211,102,0); } 100% { box-shadow: 0 4px 12px rgba(37,211,102,0.5), 0 0 0 0 rgba(37,211,102,0); } } @media (max-width: 600px) { .bm-whatsapp-float { bottom: 80px; right: var(--bm-space-3); } } @media (max-width: 768px) { .header-top { grid-template-columns: 1fr; gap: 12px; text-align: center; } .nav-menu { flex-direction: column; } .header-utility { flex-direction: row; justify-content: center; flex-wrap: wrap; } } .section-listing { padding: 40px 0; } .listing-header { margin-bottom: 24px; } .page-title { font-size: 28px; font-weight: 700; margin: 0 0 8px; color: #333; } .category-description { color: #666; margin: 0 0 16px; } .listing-meta { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #eee; } .results-count { color: #666; font-size: 14px; } .sort-form select { padding: 6px 12px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; } .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; margin-top: 24px; } .pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding: 24px 0; border-top: 1px solid #eee; } .pagination a { color: var(--bm-accent, #81d146); font-weight: 600; text-decoration: none; } .pagination a:hover { text-decoration: underline; } .pag-current { color: #666; font-size: 14px; } .empty-state { text-align: center; padding: 60px 0; color: #999; font-size: 18px; } .section-product { padding: 32px 0 64px; } .breadcrumb { font-size: 14px; color: #666; margin-bottom: 24px; } .breadcrumb a { color: var(--bm-accent, #81d146); text-decoration: none; } .breadcrumb .bc-sep { margin: 0 8px; color: #ccc; } .breadcrumb .bc-current { color: #333; } .product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 48px; } .product-detail .col-md-6 { width: 100%; } .product-gallery .gallery-main { position: relative; background: #fafafa; border: 1px solid #eee; border-radius: 8px; overflow: hidden; } .product-gallery .gallery-main img { width: 100%; height: auto; display: block; } .product-gallery .gallery-main .onsale { position: absolute; top: 16px; left: 16px; background: #e74c3c; color: #fff; padding: 6px 12px; font-size: 12px; font-weight: 700; border-radius: 4px; } .gallery-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .gallery-thumbs .thumb { width: 72px; height: 72px; padding: 0; border: 2px solid transparent; background: #fafafa; cursor: pointer; border-radius: 4px; overflow: hidden; } .gallery-thumbs .thumb.is-active { border-color: var(--bm-accent, #81d146); } .gallery-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; } .product-info .product-title { font-size: 24px; font-weight: 700; margin: 0 0 8px; } .product-info .product-sku { font-size: 14px; color: #999; margin: 0 0 16px; } .product-price-block { margin: 16px 0 24px; } .product-price-block .price-old { font-size: 16px; color: #999; text-decoration: line-through; display: block; } .product-price-block .price-current { font-size: 30px; font-weight: 700; color: #2c3e50; } .installments { font-size: 14px; color: #666; margin: 4px 0 0; } .stock-info { padding: 8px 12px; border-radius: 4px; font-size: 14px; margin-bottom: 16px; display: inline-block; } .stock-info.in-stock { background: #e8f8e9; color: #2d8c34; } .stock-info.out-stock { background: #fdecea; color: #c0392b; } .product-short-description { color: #555; margin-bottom: 24px; line-height: 1.6; } .add-to-cart { padding: 16px; background: #f9f9f9; border-radius: 8px; margin-bottom: 24px; } .qty-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .qty-row label { font-weight: 600; } .qty-row input[type="number"] { width: 80px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; text-align: center; } .add-to-cart .btn-comprar { width: 100%; padding: 14px; } .shipping-calc { padding: 16px; border: 1px solid #eee; border-radius: 8px; } .shipping-calc h3 { font-size: 15px; margin: 0 0 12px; } .shipping-calc form { display: flex; gap: 8px; } .shipping-calc input[type="text"] { flex: 1; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; } .shipping-calc button { padding: 8px 16px; background: var(--bm-accent, #81d146); color: #fff; border: 0; border-radius: 4px; cursor: pointer; } #frete-result { margin-top: 12px; } .product-description { padding: 32px 0; border-top: 1px solid #eee; max-height: none; overflow: visible; } .product-description h2 { font-size: 20px; margin-bottom: 16px; } .description-content { line-height: 1.7; color: #444; } .description-content img { max-width: 100%; height: auto; } .related-products { padding: 32px 0; border-top: 1px solid #eee; } .related-products .section-title { font-size: 20px; margin-bottom: 24px; } @media (max-width: 768px) { .product-detail { grid-template-columns: 1fr; gap: 24px; } .products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .listing-meta { flex-direction: column; align-items: stretch; gap: 12px; } } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .section-cart { padding: 40px 0; } .cart-empty { text-align: center; padding: 80px 0; } .cart-empty p { font-size: 18px; color: #666; margin-bottom: 24px; } .cart-table { border: 1px solid #eee; border-radius: 8px; overflow: hidden; } .cart-row { display: grid; grid-template-columns: 3fr 1fr 1fr 1fr 0.4fr; gap: 12px; align-items: center; padding: 16px; border-bottom: 1px solid #f0f0f0; } .cart-row.cart-header { background: #fafafa; font-weight: 600; font-size: 14px; color: #666; text-transform: uppercase; } .cart-row:last-child { border-bottom: 0; } .cart-row .col-prod { display: flex; align-items: center; gap: 12px; } .cart-row .col-prod img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; } .cart-row .col-prod a { color: #333; text-decoration: none; font-weight: 500; } .cart-row .col-prod a:hover { color: var(--bm-accent, #81d146); } .qty-update { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .qty-stepper { display: inline-flex; align-items: stretch; } .qty-btn { width: 34px; min-height: 34px; padding: 0; border: 1px solid #ccc; background: #f7f7f7; color: #333; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; user-select: none; } .qty-btn:hover { background: #ececec; } .qty-btn:active { background: #e0e0e0; } .qty-dec { border-radius: 4px 0 0 4px; } .qty-inc { border-radius: 0 4px 4px 0; } .qty-stepper .qty-input { width: 46px; padding: 6px 2px; text-align: center; border: 1px solid #ccc; border-left: 0; border-right: 0; border-radius: 0; -moz-appearance: textfield; appearance: textfield; } .qty-stepper .qty-input::-webkit-outer-spin-button, .qty-stepper .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty-submit-fallback { padding: 6px 10px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; } .card-form { border: 1px solid #e0e0e0; border-radius: 8px; padding: 14px 14px 10px; background: #fafafa; } .card-form .form-label { font-size: 13px; } .card-error { color: #c0201a; font-weight: 700; font-size: 14px; border: 1px solid #f0b4b0; background: #fdecec; border-radius: 6px; padding: 9px 12px; margin-bottom: 12px; } .addr-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid #e0e0e0; border-radius: 6px; margin-bottom: 8px; cursor: pointer; } .addr-option:hover { border-color: #bbb; background: #fafafa; } .addr-option input { margin-top: 3px; flex-shrink: 0; } .addr-option .addr-desc { font-size: 14px; line-height: 1.4; } .addr-option-new { border-style: dashed; } .addr-option:has(input:checked) { border-color: var(--bm-accent, #81d146); background: #f6fbef; } .btn-remove { background: transparent; border: 0; color: #999; font-size: 18px; cursor: pointer; padding: 4px 8px; } .btn-remove:hover { color: #e74c3c; } .cart-totals { margin-top: var(--bm-space-6); } .cart-totals-lines { display: flex; flex-direction: column; gap: 0; } .cart-total-row { display: flex; justify-content: space-between; padding: var(--bm-space-3) 0; font-size: var(--bm-text-md); border-top: 1px solid var(--bm-gray-200); } .cart-total-row:first-child { border-top: 0; } .cart-total-row.cart-total-pix .value { color: var(--bm-accent-700); } .cart-total-row.cart-total-total { margin-top: var(--bm-space-2); padding-top: var(--bm-space-4); font-size: var(--bm-text-lg); font-weight: var(--bm-weight-bold); border-top: 2px solid var(--bm-gray-800); } .total-value { color: var(--bm-accent-700); font-family: var(--bm-font-mono); letter-spacing: var(--bm-tracking-tight); } .cart-total-row.cart-total-coupon { font-weight: var(--bm-weight-bold, 700); } .cart-total-row.cart-total-coupon .value { color: var(--bm-accent-700); } .cart-coupon-form { border-top: 1px solid var(--bm-gray-200); padding-top: var(--bm-space-3); } .cart-coupon-row { display: flex; gap: var(--bm-space-2); align-items: stretch; } .cart-coupon-row .form-control { flex: 1 1 auto; min-width: 0; background-color: var(--bm-gray-100, #eef0f3); color: var(--bm-gray-900, #1b1b1b); border: 1px solid var(--bm-gray-300, #c8ccd1); } .cart-coupon-row .form-control::placeholder { color: var(--bm-gray-500, #8b949e); } .cart-coupon-row .form-control:focus { background-color: #fff; border-color: var(--bm-accent-500, #81d146); outline: none; box-shadow: 0 0 0 3px rgba(129, 209, 70, .18); } .cart-coupon-row .btn { flex: 0 0 auto; } .cart-coupon-applied { color: var(--bm-accent-700); font-size: var(--bm-text-base, 16px); font-weight: var(--bm-weight-medium, 600); } .cart-coupon-error { color: #d33; } .cart-cep-calc { margin-top: var(--bm-space-5); padding: var(--bm-space-4); background: var(--bm-gray-50); border-radius: var(--bm-radius-md); } .cart-cep-calc h3 { margin: 0 0 var(--bm-space-3); font-size: var(--bm-text-md); } #cart-cep-form { display: flex; gap: var(--bm-space-2); flex-wrap: wrap; } #cart-cep-input { flex: 1 1 200px; min-width: 160px; padding: var(--bm-space-3); border: 1px solid var(--bm-gray-300); border-radius: var(--bm-radius-md); font: inherit; } #cart-cep-form button { padding: var(--bm-space-3) var(--bm-space-5); background: var(--bm-accent-700); color: #fff; border: 0; border-radius: var(--bm-radius-md); font-weight: 600; cursor: pointer; } .cart-cep-quotes { list-style: none; margin: var(--bm-space-3) 0 0; padding: 0; } .cart-cep-quotes li { padding: var(--bm-space-2) 0; border-top: 1px solid var(--bm-gray-200); } .cart-cep-quotes li:first-child { border-top: 0; } .cart-cep-quotes label { display: flex; align-items: center; gap: var(--bm-space-2); cursor: pointer; } .cart-cep-error { color: var(--bm-danger-600, #c0392b); margin: var(--bm-space-3) 0 0; } .cart-actions { display: flex; justify-content: space-between; margin-top: var(--bm-space-6); gap: var(--bm-space-3); flex-wrap: wrap; } .section-checkout { padding: 0 0 64px; } .checkout-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; margin-top: 24px; } .checkout-grid > [class*="col-"] { max-width: 100%; flex: initial; padding-left: 0; padding-right: 0; } .checkout-fields fieldset { border: 1px solid #eee; border-radius: 8px; padding: 20px; margin-bottom: 20px; } .checkout-fields legend { font-weight: 700; padding: 0 8px; } .checkout-fields label { display: block; margin-bottom: 12px; font-size: 14px; } .checkout-fields label.radio-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .checkout-fields label.span-2 { grid-column: span 2; } .checkout-fields input[type="text"], .checkout-fields input[type="email"], .checkout-fields input[type="tel"], .checkout-fields select, .checkout-fields textarea { width: 100%; padding: var(--bm-space-3); border: 1px solid var(--bm-gray-300); border-radius: var(--bm-radius-md); margin-top: var(--bm-space-1); font-family: inherit; font-size: var(--bm-text-sm); transition: border-color var(--bm-transition-fast), box-shadow var(--bm-transition-fast); background: #fff; } .checkout-fields input[type="text"]:focus, .checkout-fields input[type="email"]:focus, .checkout-fields input[type="tel"]:focus, .checkout-fields select:focus, .checkout-fields textarea:focus { outline: none; border-color: var(--bm-accent-500); box-shadow: 0 0 0 3px var(--bm-accent-50); } .checkout-fields input[type="text"]:focus-visible, .checkout-fields input[type="email"]:focus-visible, .checkout-fields input[type="tel"]:focus-visible, .checkout-fields select:focus-visible, .checkout-fields textarea:focus-visible { outline: 2px solid var(--bm-accent-500); outline-offset: 2px; } .checkout-summary { background: #fafafa; border-radius: 8px; padding: 20px; position: sticky; top: 20px; height: fit-content; } .checkout-summary h2 { font-size: 18px; margin: 0 0 16px; } .summary-lines { list-style: none; padding: 0; margin: 0 0 var(--bm-space-4); } .summary-lines li { display: grid; grid-template-columns: 2fr 0.4fr 1fr; gap: var(--bm-space-2); padding: var(--bm-space-3) var(--bm-space-2); border-bottom: 1px solid var(--bm-gray-200); font-size: var(--bm-text-sm); } .summary-lines li:nth-child(odd) { background: var(--bm-gray-50); border-radius: var(--bm-radius-sm); } .line-sub { text-align: right; font-family: var(--bm-font-mono); } .summary-totals { padding: var(--bm-space-4) 0; border-top: 2px solid var(--bm-gray-800); } .summary-totals > div { display: flex; justify-content: space-between; padding: var(--bm-space-1) 0; font-size: var(--bm-text-sm); } .summary-totals > div > span:last-child { font-family: var(--bm-font-mono); } .summary-totals .total { font-size: var(--bm-text-lg); font-weight: var(--bm-weight-bold); margin-top: var(--bm-space-2); padding-top: var(--bm-space-3); border-top: 1px solid var(--bm-gray-200); color: var(--bm-gray-900); } .btn-full { width: 100%; } .checkout-note { font-size: 12px; color: #666; margin-top: 12px; text-align: center; } .section-order-success { padding: 80px 0; } .success-card { max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 40px; text-align: center; } .success-card h1 { color: var(--bm-accent, #81d146); font-size: 32px; margin: 0 0 16px; } .success-card .big { font-size: 18px; color: #333; margin-bottom: 12px; } .order-summary { text-align: left; margin: 32px 0; padding: 20px; background: #fafafa; border-radius: 8px; } .order-summary h2 { font-size: 16px; margin: 0 0 12px; } .order-summary ul { list-style: none; padding: 0; margin: 0; } .order-summary li { padding: 6px 0; border-bottom: 1px solid #eee; } .order-total { margin-top: 12px; font-size: 18px; } @media (max-width: 768px) { .cart-row { grid-template-columns: 1fr; gap: 8px; } .cart-row.cart-header { display: none; } .checkout-grid { grid-template-columns: 1fr; } } .section-auth { padding: 60px 0; } .auth-card { max-width: 420px; margin: 0 auto; background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 32px; } .auth-card h1 { margin: 0 0 16px; font-size: 22px; } .auth-error { background: #fdecea; color: #c0392b; padding: 12px; border-radius: 4px; margin-bottom: 16px; font-size: 14px; } .auth-form label { display: block; margin-bottom: 12px; font-size: 14px; } .auth-form input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; margin-top: 4px; font-family: inherit; font-size: 14px; } .auth-link { margin-top: 16px; font-size: 14px; text-align: center; color: #666; } .auth-link a { color: var(--bm-accent, #81d146); text-decoration: none; font-weight: 600; } .section-account { padding: 40px 0 64px; } .account-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; } .account-header h1 { margin: 0; } .account-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; } .account-info { background: #fafafa; border-radius: 8px; padding: 20px; } .account-info h2 { margin: 0 0 12px; font-size: 16px; } .account-info dl { margin: 0; } .account-info dt { font-size: 12px; color: #666; margin-top: 8px; text-transform: uppercase; } .account-info dd { margin: 0 0 4px; font-weight: 500; } .account-orders h2 { margin: 0 0 16px; } .orders-table { width: 100%; border-collapse: collapse; } .orders-table th, .orders-table td { padding: 12px; text-align: left; border-bottom: 1px solid #eee; } .orders-table th { background: #fafafa; font-size: 14px; color: #666; text-transform: uppercase; } .order-status { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; } .status-pending { background: #fff4e0; color: #b86d00; } .status-paid { background: #e8f8e9; color: #2d8c34; } .status-shipped { background: #e1ecff; color: #1a5dc8; } .status-delivered { background: #e8f8e9; color: #2d8c34; } .status-cancelled { background: #fdecea; color: #c0392b; } .status-refunded { background: #f0e6ff; color: #6b3fa0; } .status-in_mediation { background: #fff0d6; color: #a15c00; } .status-charged_back { background: #fdd9d5; color: #a01008; font-weight: 700; } @media (max-width: 768px) { .account-grid { grid-template-columns: 1fr; } } .section-search { padding: 40px 0 64px; } .search-page-form { display: flex; gap: 8px; max-width: 600px; margin: 16px 0 24px; } .search-page-form input[type="search"] { flex: 1; padding: 12px 16px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; } .search-meta { color: #666; margin-bottom: 24px; font-size: 15px; } .search-hint { color: #999; font-style: italic; } .section-admin { padding: 20px 0 60px; background: #f5f5f5; min-height: 80vh; } .section-admin .container-fluid { padding: 0 24px; max-width: 1400px; margin: 0 auto; } .admin-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 0 24px; border-bottom: 1px solid #ddd; margin-bottom: 24px; } .admin-header h1 { margin: 0; font-size: 22px; } .admin-nav { display: flex; gap: 16px; align-items: center; } .admin-nav a { color: #555; text-decoration: none; font-weight: 500; padding: 6px 12px; border-radius: 4px; } .admin-nav a:hover { background: #e8e8e8; color: var(--bm-accent, #81d146); } .admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin-bottom: 32px; } .stat-card { background: #fff; padding: 16px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); display: flex; flex-direction: column; gap: 4px; } .stat-card.stat-wide { grid-column: span 2; } .stat-label { font-size: 12px; color: #888; text-transform: uppercase; font-weight: 600; } .stat-value { font-size: 24px; font-weight: 700; color: #333; } .admin-table { width: 100%; background: #fff; border-collapse: collapse; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05); } .admin-table th, .admin-table td { padding: 12px; text-align: left; border-bottom: 1px solid #f0f0f0; } .admin-table th { background: #fafafa; font-size: 14px; color: #666; text-transform: uppercase; } .admin-table a { color: var(--bm-accent, #81d146); text-decoration: none; font-weight: 600; } .admin-filter { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .admin-filter a { padding: 6px 12px; background: #fff; border: 1px solid #ddd; border-radius: 16px; color: #555; text-decoration: none; font-size: 14px; } .admin-filter a.is-active { background: var(--bm-accent, #81d146); color: #fff; border-color: var(--bm-accent, #81d146); } .admin-order-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; margin-bottom: 32px; } .admin-order-info, .admin-order-items, .admin-order-update { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); } .admin-order-info dl { margin: 0; } .admin-order-info dt { font-size: 12px; color: #888; text-transform: uppercase; margin-top: 8px; } .admin-order-info dd { margin: 0 0 4px; } .status-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: end; } .status-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; } .status-form select, .status-form input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; } @media (max-width: 768px) { .admin-order-grid { grid-template-columns: 1fr; } .status-form { grid-template-columns: 1fr; } .stat-card.stat-wide { grid-column: span 1; } } .section-page { padding: 0 0 64px; } .page-content { max-width: 800px; margin: 0 auto; } .page-body { line-height: 1.7; color: #333; } .page-body h2 { margin-top: 28px; font-size: 22px; } .page-body h3 { margin-top: 20px; font-size: 18px; } .page-body p { margin: 12px 0; } .page-body ul, .page-body ol { margin: 12px 0; padding-left: 24px; } .page-body a { color: var(--bm-accent, #81d146); } .frete-loading { color: #666; font-size: 14px; margin: 8px 0; } .frete-error { color: #c0392b; background: #fdecea; padding: 8px 12px; border-radius: 4px; font-size: 14px; } .frete-hint { color: #999; font-size: 14px; font-style: italic; } .frete-dest { font-size: 14px; margin: 8px 0; color: #555; } .frete-quotes { list-style: none; padding: 0; margin: 8px 0; } .frete-quotes li { display: flex; justify-content: space-between; padding: 8px 12px; background: #fafafa; border: 1px solid #eee; border-radius: 4px; margin-bottom: 4px; font-size: 14px; } .frete-quotes .frete-days { color: #888; font-size: 12px; } .shipping-quotes-list .shipping-quote { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 6px; cursor: pointer; align-items: center; } .shipping-quotes-list .shipping-quote:has(input:checked) { border-color: var(--bm-accent, #81d146); background: #f5fff0; } .shipping-quotes-list .sq-days { color: #666; font-size: 12px; } .bm-lgpd-banner { position: fixed; bottom: 16px; left: 16px; right: 16px; z-index: 9998; background: #1a1f36; color: #fff; border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,0.25); padding: 16px 20px; max-width: 720px; margin: 0 auto; } .bm-lgpd-content { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .bm-lgpd-content p { margin: 0; font-size: 14px; flex: 1; min-width: 240px; line-height: 1.45; } .bm-lgpd-content a { color: var(--bm-accent, #81d146); text-decoration: underline; } .bm-lgpd-btn { background: var(--bm-accent, #81d146); color: #fff; border: 0; padding: 10px 24px; border-radius: 4px; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 14px; transition: filter 0.2s; } .bm-lgpd-btn:hover { filter: brightness(1.1); } @media (max-width: 768px) { .bm-lgpd-banner { position: fixed; bottom: 0; left: 0; right: 0; top: auto; transform: none; max-width: 100%; margin: 0; border-radius: 0; padding: 12px 14px; z-index: var(--bm-z-modal, 1000); box-shadow: 0 -4px 12px rgba(0,0,0,0.15); } .bm-lgpd-content { flex-direction: column; align-items: stretch; } .bm-lgpd-btn { width: 100%; } } .btn-whats-pdp { display: inline-block; margin-top: 8px; padding: 12px 18px; background: #25d366; color: #fff; font-weight: 600; text-decoration: none; border-radius: 6px; transition: background 0.2s; } .btn-whats-pdp:hover { background: #128c7e; } .btn-whats-pdp:focus-visible { outline: 3px solid #128c7e; outline-offset: 2px; } .frete-gratis-bar { margin: 16px 0; padding: 12px 16px; background: #f5fff0; border: 1px solid #c6e8a8; border-radius: 8px; font-size: 14px; color: #2d5212; } .frete-gratis-bar.frete-gratis-done { background: #2d5212; color: #fff; text-align: center; font-size: 15px; border-color: #2d5212; } .frete-gratis-msg { margin-bottom: 8px; } .frete-gratis-progress { background: #e0e0e0; border-radius: 999px; height: 8px; overflow: hidden; } .frete-gratis-fill { height: 100%; background: linear-gradient(90deg, #81d146 0%, #2d5212 100%); border-radius: 999px; transition: width 0.3s ease; } .payment-option-pix .badge-pix-off { display: inline-block; margin-left: 8px; padding: 2px 8px; background: #2d5212; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; } .payment-option .payment-hint { display: block; margin-left: 24px; color: #666; font-size: 12px; } .summary-pix-discount { display: flex; justify-content: space-between; color: #2d5212; font-weight: 600; } .summary-pix-discount span:last-child { color: #2d5212; } .footer-empresa { font-size: 14px; opacity: 0.85; margin-top: 12px; margin-bottom: 8px; } .footer-empresa p { margin: 4px 0; } .footer-empresa strong { color: #fff; } .footer-lgpd-links h4 { color: var(--bm-accent); text-transform: uppercase; letter-spacing: 1px; font-size: 14px; font-weight: 700; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 8px; } .footer-lgpd-links ul { list-style: none; padding: 0; margin: 0; } .footer-lgpd-links li { margin: 6px 0; font-size: 14px; } .footer-lgpd-links a:hover { color: var(--bm-accent); text-decoration: underline; } .bm-lgpd .bm-lgpd-content { flex-direction: column; align-items: stretch; } .bm-lgpd #bm-lgpd-title { margin: 0 0 6px; font-size: 16px; color: #fff; } .bm-lgpd-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .bm-lgpd-form label { font-size: 14px; display: flex; align-items: center; gap: 8px; } .bm-lgpd-form > a { color: var(--bm-accent, #81d146); font-size: 12px; margin-top: 6px; text-decoration: underline; } .bm-lgpd-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .bm-lgpd-actions button { padding: 8px 14px; font-size: 14px; border-radius: 4px; cursor: pointer; border: 1px solid var(--bm-accent, #81d146); font-family: inherit; } .bm-lgpd-actions .btn-primary { background: var(--bm-accent, #81d146); color: #fff; font-weight: 700; } .bm-lgpd-actions .btn-secondary { background: transparent; color: var(--bm-accent, #81d146); } .bm-lgpd-actions .btn-secondary:hover { background: rgba(129,209,70,0.12); } @media (max-width: 600px) { .bm-lgpd-actions { flex-direction: column; } .bm-lgpd-actions button { width: 100%; } } .header-search .search-form { position: relative; } .search-suggestions { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-width: 400px; z-index: var(--bm-z-dropdown); background: var(--bm-bg); color: var(--bm-fg); border: 1px solid var(--bm-gray-200); border-radius: var(--bm-radius-md); box-shadow: var(--bm-shadow-lg); overflow: hidden; text-align: left; } .search-suggestion { display: flex; align-items: center; justify-content: space-between; gap: var(--bm-space-3); padding: var(--bm-space-3) var(--bm-space-4); font-size: var(--bm-text-sm); color: var(--bm-fg); border-bottom: 1px solid var(--bm-gray-100); transition: background var(--bm-transition-fast); } .search-suggestion:last-child { border-bottom: 0; } .search-suggestion:hover { background: var(--bm-gray-50); color: var(--bm-accent-700); } .search-suggestion__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-suggestion__price { font-weight: var(--bm-weight-semibold); color: var(--bm-accent-700); white-space: nowrap; } .installment-badge { display: inline-block; margin-left: var(--bm-space-2); padding: 2px var(--bm-space-2); border-radius: var(--bm-radius-full); background: var(--bm-success-50); color: var(--bm-success-700); font-size: var(--bm-text-xs); font-weight: var(--bm-weight-bold); letter-spacing: var(--bm-tracking-wide); text-transform: uppercase; vertical-align: middle; line-height: 1.6; } .instafeed-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--bm-space-3); min-height: 120px; margin: var(--bm-space-6) 0; } .instafeed-tile { aspect-ratio: 1 / 1; border-radius: var(--bm-radius-md); } @media (max-width: 768px) { .instafeed-grid { grid-template-columns: repeat(3, 1fr); min-height: 0; } } @media (prefers-color-scheme: dark) { :root:not(.theme-light) { --bm-bg: #14160f; --bm-fg: #e8e8e3; --bm-header-bg: #0f110b; --bm-nav-bg: var(--bm-accent-900); --bm-footer-bg: #0a0c07; --bm-gray-50: #1c1f17; --bm-gray-100: #23271d; --bm-gray-200: #2e3325; --bm-gray-300: #3c4231; --bm-gray-400: #5c6450; --bm-gray-500: #8a9180; --bm-gray-600: #aab19f; --bm-gray-700: #c6ccba; --bm-gray-800: #dde2d4; --bm-gray-900: #eef0e8; --bm-success-50: #14241a; --bm-danger-50: #2a1714; --bm-warning-50: #2a2012; --bm-info-50: #14202e; } :root:not(.theme-light) .btn-secondary { background: var(--bm-gray-100); color: var(--bm-gray-800); border-color: var(--bm-gray-300); } :root:not(.theme-light) .btn-secondary:hover { background: var(--bm-gray-200); color: var(--bm-gray-900); } :root:not(.theme-light) .product-card, :root:not(.theme-light) .add-to-cart, :root:not(.theme-light) .section-brands-home, :root:not(.theme-light) .shipping-calc { background: var(--bm-gray-100); } :root:not(.theme-light) .price-current, :root:not(.theme-light) .product-info .product-title { color: var(--bm-fg); } :root:not(.theme-light) img, :root:not(.theme-light) picture { filter: brightness(0.92); } } .container--narrow { max-width: 720px; } .contact-form-section, .lgpd-alert, .contact-alert { margin-top: var(--bm-space-6); } .contact-form-section h2 { font-size: var(--bm-text-xl); margin-bottom: var(--bm-space-4); } .contact-form, .lgpd-form { display: flex; flex-direction: column; gap: var(--bm-space-4); max-width: 560px; } .contact-form label, .lgpd-form label { display: flex; flex-direction: column; gap: var(--bm-space-1); font-weight: 500; } .contact-form label .hint, .lgpd-form label .hint { font-weight: 400; color: var(--bm-gray-500); font-size: var(--bm-text-sm); } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea, .lgpd-form input[type="email"], .lgpd-form textarea { padding: var(--bm-space-3); border: 1px solid var(--bm-gray-300); border-radius: var(--bm-radius-md); font: inherit; font-size: 16px; background: #fff; } .contact-form textarea, .lgpd-form textarea { resize: vertical; min-height: 120px; } .contact-form input:focus, .contact-form textarea:focus, .lgpd-form input:focus, .lgpd-form textarea:focus { outline: none; border-color: var(--bm-accent-500); box-shadow: 0 0 0 3px var(--bm-accent-50); } .contact-form input:focus-visible, .contact-form textarea:focus-visible, .lgpd-form input:focus-visible, .lgpd-form textarea:focus-visible { outline: 2px solid var(--bm-accent-500); outline-offset: 2px; } .contact-alert, .lgpd-alert { padding: var(--bm-space-4); border-radius: var(--bm-radius-md); border: 1px solid transparent; } .contact-alert--ok, .lgpd-alert--ok { background: var(--bm-accent-50); border-color: var(--bm-accent-200, var(--bm-accent-500)); color: var(--bm-accent-900, var(--bm-gray-900)); } .contact-alert--err, .lgpd-alert--err { background: #fdecea; border-color: #f5c6cb; color: #842029; } .site-header { position: sticky; top: 0; z-index: 90; } .header-burger { display: none; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; font-size: 28px; padding: 0; color: inherit; min-width: 44px; min-height: 44px; position: absolute; top: var(--bm-space-3); left: var(--bm-space-3); z-index: 5; } .mobile-drawer { position: fixed; top: 0; left: 0; height: 100vh; width: 85%; max-width: 320px; background: var(--bm-bg); box-shadow: 2px 0 14px rgba(0,0,0,0.15); transform: translateX(-100%); transition: transform 0.3s ease; z-index: 1000; overflow-y: auto; display: flex; flex-direction: column; } .mobile-drawer.open { transform: translateX(0); } .mobile-drawer[hidden] { display: none; } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--bm-space-4); border-bottom: 1px solid var(--bm-gray-200); } .drawer-title { font-weight: 700; font-size: var(--bm-text-lg); } .drawer-close { background: transparent; border: 0; font-size: 32px; line-height: 1; cursor: pointer; min-width: 44px; min-height: 44px; color: inherit; } .drawer-nav { padding: var(--bm-space-2) 0 var(--bm-space-6); flex: 1; } .drawer-nav ul { list-style: none; margin: 0; padding: 0; } .drawer-nav li.drawer-sep { height: 1px; background: var(--bm-gray-200); margin: var(--bm-space-2) var(--bm-space-4); } .drawer-nav a { display: block; padding: var(--bm-space-3) var(--bm-space-5); color: var(--bm-fg); border-bottom: 1px solid var(--bm-gray-100); font-size: var(--bm-text-md); min-height: 44px; } .drawer-nav a:hover, .drawer-nav a:focus-visible { background: var(--bm-accent-50); color: var(--bm-accent-700); } .mobile-drawer-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 999; opacity: 0; transition: opacity 0.3s ease; } .mobile-drawer-backdrop.open { opacity: 1; } .mobile-drawer-backdrop[hidden] { display: none; } body.drawer-open { overflow: hidden; } .pdp-mobile-cta { display: none; } @media (max-width: 991px) { .header-burger { display: inline-flex; } .main-nav { display: none; } .header-top { padding-left: 56px; } } @media (max-width: 768px) { .pdp-mobile-cta { display: flex; gap: var(--bm-space-2); position: fixed; bottom: 0; left: 0; right: 0; z-index: 80; padding: var(--bm-space-3) var(--bm-space-4); background: var(--bm-bg); border-top: 1px solid var(--bm-gray-200); box-shadow: 0 -2px 12px rgba(0,0,0,0.08); } .pdp-mobile-cta .btn-comprar { flex: 2; min-height: 44px; } .pdp-mobile-cta .btn-whats-pdp { flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .section-product { padding-bottom: 80px; } } .logo-img { width: 120px; max-width: none; max-height: none; } .head-main.compress .logo-img { max-width: 100px; max-height: 75px; } .head-main .menu-and-banners-row { visibility: visible; overflow: visible; height: auto; } .section-brands-home .home-circle-image { border-radius: 8px 0; overflow: visible; } .section-brands-home .home-circle-image-md { width: 160px; height: 62px; } .section-brands-home .home-circle-image img { position: static; width: 100%; height: 100%; transform: none; object-fit: contain; } .section-brands-home .opacity-10-line { border: none; } .section-brands-home .col-md-2 h2.h6 { max-width: 100%; color: #707980; font-size: 18px; font-weight: 500; line-height: 28px; letter-spacing: 1.44px; text-transform: uppercase; } @media (max-width: 800px) { .section-brands-home .home-circle-image-md { width: 90px; height: 40px; } } .section-categories-home .categories-pills { gap: 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .section-categories-home .categories-pills .btn-primary { width: 140px; flex: 0 0 140px; height: 61px; padding: 0; background: var(--nav-desktop-background); color: var(--nav-desktop-foreground); border-radius: 8px 0; font-style: italic; font-weight: 700; letter-spacing: 1px; display: inline-flex; align-items: center; justify-content: center; text-align: center; font-size: 14px; line-height: 1.1; } .section-categories-home .categories-pills .btn-primary:hover { background: var(--accent-color); color: var(--main-foreground); } .section-categories-home .col-md-2 h2.h6 { color: #707980; font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 500; } .swiper-slide > .product-card { flex: 1 1 100%; max-width: 100%; padding-left: 0; padding-right: 0; } .products-grid > .product-card, .products-row > .product-card { max-width: 100%; flex: initial; padding-left: 0; padding-right: 0; } .js-item-image-padding > a > .product-item-image-featured, .js-item-image-padding .item-image-featured { position: absolute; top: 0; left: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; margin: 0; border-radius: 0; background: transparent; transform: none; -webkit-transform: none; } .item-image:not(.item-image-slider):hover img.product-item-image-featured, .item-image:not(.item-image-slider):hover img.img-absolute-centered { transform: scale(1.04) !important; -webkit-transform: scale(1.04) !important; } .pdp-gallery-main { position: relative; aspect-ratio: 1 / 1; width: 100%; border: 1px solid var(--bm-gray-200); border-radius: var(--bm-radius-lg); overflow: hidden; background: #fff; } .pdp-gallery-main .pdp-main-link { display: block; width: 100%; height: 100%; } .pdp-gallery-main img { width: 100%; height: 100%; object-fit: contain; display: block; } .pdp-onsale { position: absolute; top: var(--bm-space-3); left: var(--bm-space-3); z-index: 2; background: var(--accent-color, var(--bm-accent-500)); color: #fff; padding: var(--bm-space-1) var(--bm-space-3); border-radius: var(--bm-radius-md); font-size: var(--bm-text-xs); font-weight: var(--bm-weight-bold); text-transform: uppercase; letter-spacing: var(--bm-tracking-wide); } .pdp-gallery-thumbs { display: flex; flex-wrap: wrap; gap: var(--bm-space-2); margin-top: var(--bm-space-3); } .pdp-thumb { width: 72px; height: 72px; padding: 0; border: 1px solid var(--bm-gray-200); border-radius: var(--bm-radius-md); overflow: hidden; background: #fff; cursor: pointer; transition: border-color var(--bm-transition-fast); } .pdp-thumb:hover { border-color: var(--accent-color, var(--bm-accent-500)); } .pdp-thumb.is-active { border-color: var(--accent-color, var(--bm-accent-500)); border-width: 2px; } .pdp-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .hero-swiper--mobile, .hero-swiper--mobile .swiper-wrapper, .hero-swiper--mobile .swiper-slide { aspect-ratio: 820 / 1000; max-height: none; } body.admin-mode footer, body.admin-mode .js-search-form, body.admin-mode .js-menu-and-banners-row, body.admin-mode .mobile-drawer, body.admin-mode .mobile-drawer-backdrop, body.admin-mode .bm-whatsapp-float, body.admin-mode .bm-lgpd-banner, body.admin-mode .skip-link { display: none !important; } body.admin-mode { background: #eef0f2; } .adm { display: flex; min-height: 100vh; font-family: var(--bm-font-sans, sans-serif); color: #1f2329; } .adm-side { width: 232px; flex: 0 0 232px; background: #1c2128; color: #c9d1d9; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .adm-brand { padding: 20px 18px; font-size: 18px; font-weight: 700; border-bottom: 1px solid #2d333b; } .adm-brand a { color: #fff; text-decoration: none; } .adm-brand span { color: var(--accent-color, #81d146); } .adm-nav { display: flex; flex-direction: column; padding: 10px 0; flex: 1; overflow-y: auto; } .adm-nav a { display: flex; align-items: center; gap: 10px; padding: 11px 18px; color: #c9d1d9; text-decoration: none; font-size: 14px; font-weight: 500; border-left: 3px solid transparent; } .adm-nav a:hover { background: #262c34; color: #fff; } .adm-nav a.is-active { background: #262c34; color: #fff; border-left-color: var(--accent-color, #81d146); } .adm-ico { width: 20px; text-align: center; font-size: 15px; } .adm-badge { margin-left: auto; background: var(--accent-color, #81d146); color: #0d0f0f; border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 700; } .adm-side-foot { padding: 14px 18px; border-top: 1px solid #2d333b; display: flex; flex-direction: column; gap: 8px; } .adm-side-foot a { color: #8b949e; text-decoration: none; font-size: 14px; } .adm-side-foot a:hover { color: #fff; } .adm-side-foot button { background: none; border: 1px solid #444c56; color: #c9d1d9; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; } .adm-side-foot button:hover { background: #b62324; border-color: #b62324; color: #fff; } .adm-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .adm-top { display: flex; align-items: center; gap: 14px; background: #fff; padding: 14px 26px; border-bottom: 1px solid #e1e4e8; position: sticky; top: 0; z-index: 10; } .adm-title { margin: 0; font-size: 20px; font-weight: 700; } .adm-user { margin-left: auto; font-size: 14px; color: #57606a; } .adm-burger { display: none; background: none; border: 0; font-size: 22px; cursor: pointer; } .adm-main { padding: 24px 26px 60px; max-width: 1200px; width: 100%; } .adm-flash { margin: 0 26px; margin-top: 16px; padding: 12px 16px; border-radius: 8px; font-size: 14px; } .adm-flash--ok { background: #e6f4ea; color: #1a7f37; border: 1px solid #b7e0c2; } .adm-flash--err { background: #fdecea; color: #b62324; border: 1px solid #f5c2c0; } .adm-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; } .adm-search { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; } .adm-search input[type="search"] { flex: 1; min-width: 200px; padding: 9px 12px; border: 1px solid #d0d7de; border-radius: 7px; font: inherit; } .adm-search select, .adm-form select { padding: 9px 10px; border: 1px solid #d0d7de; border-radius: 7px; font: inherit; background: #fff; } .adm-count { color: #57606a; font-size: 14px; margin: 0 0 12px; } .adm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1px solid #d0d7de; border-radius: 7px; background: #fff; color: #24292f; text-decoration: none; font-size: 14px; font-weight: 500; cursor: pointer; } .adm-btn:hover { background: #f3f4f6; } .adm-btn--primary { background: var(--accent-color, #81d146); border-color: var(--accent-color, #81d146); color: #0d0f0f; font-weight: 600; } .adm-btn--primary:hover { filter: brightness(0.95); background: var(--accent-color, #81d146); } .adm-btn--danger { background: #fff; border-color: #f5c2c0; color: #b62324; } .adm-btn--danger:hover { background: #b62324; color: #fff; } .adm-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e1e4e8; border-radius: 10px; overflow: hidden; font-size: 14px; } .adm-table th { text-align: left; background: #f6f8fa; padding: 11px 14px; font-weight: 600; color: #57606a; border-bottom: 1px solid #e1e4e8; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; } .adm-table td { padding: 11px 14px; border-bottom: 1px solid #eef0f2; vertical-align: middle; } .adm-table tr:last-child td { border-bottom: 0; } .adm-table tr:hover td { background: #fafbfc; } tr[data-href] { cursor: pointer; } .admin-table tbody tr[data-href]:hover td { background: #fafbfc; } .orders-table tbody tr[data-href]:hover td { background: #fafbfc; } tr.linked-row { position: relative; cursor: pointer; } .orders-table tbody tr.linked-row:hover td, .admin-table tbody tr.linked-row:hover td { background: #fafbfc; } a.row-link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .adm-thumb { width: 48px; } .adm-thumb img { width: 40px; height: 40px; object-fit: contain; border: 1px solid #eee; border-radius: 6px; background: #fff; } .adm-link { color: #0969da; text-decoration: none; font-weight: 500; } .adm-link:hover { text-decoration: underline; } .adm-mono { font-variant-numeric: tabular-nums; } .adm-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; } .adm-pill--ok { background: #e6f4ea; color: #1a7f37; } .adm-pill--off { background: #fdecea; color: #b62324; } .adm-pill--muted { background: #eef0f2; color: #57606a; } .adm-tag { font-size: 10px; padding: 1px 6px; border-radius: 4px; } .adm-tag--sale { background: var(--accent-color, #81d146); color: #0d0f0f; } .adm-pager { display: flex; align-items: center; gap: 14px; justify-content: center; margin-top: 20px; font-size: 14px; color: #57606a; } .adm-empty { background: #fff; border: 1px dashed #d0d7de; border-radius: 10px; padding: 40px; text-align: center; color: #57606a; } .adm-alert { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; margin: 0 0 14px; } .adm-alert--warn { background: #fff8e1; color: #8a6500; border: 1px solid #f0d98c; } .adm-form-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; } .adm-form-main, .adm-form-side { display: flex; flex-direction: column; gap: 16px; } .adm-field { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 600; color: #1f2329; } .adm-field input[type="text"], .adm-field input[type="number"], .adm-field input[type="email"], .adm-field input[type="search"], .adm-field textarea, .adm-field select { padding: 9px 12px; border: 1px solid #d0d7de; border-radius: 7px; font: inherit; font-weight: 400; background: #fff; } .adm-field textarea { resize: vertical; } .adm-field small { font-weight: 400; color: #8b949e; } .adm-fieldset { border: 1px solid #e1e4e8; border-radius: 10px; padding: 16px; background: #fff; display: flex; flex-direction: column; gap: 14px; } .adm-fieldset legend { font-weight: 700; font-size: 14px; padding: 0 6px; } .adm-checks { display: flex; flex-direction: column; gap: 7px; max-height: 240px; overflow-y: auto; } .adm-check { font-weight: 400; font-size: 14px; display: flex; align-items: center; gap: 8px; } .adm-img-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .adm-img-grid img { width: 100%; aspect-ratio: 1; object-fit: contain; border: 1px solid #eee; border-radius: 6px; } .adm-form-actions { display: flex; gap: 12px; margin-top: 22px; align-items: center; } .adm-danger { margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; } .adm-img-manager { margin-top: 24px; } .adm-img-manager-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin-bottom: 16px; } .adm-img-card { border: 1px solid #d0d7de; border-radius: 8px; padding: 8px; position: relative; background: #fff; } .adm-img-card.is-hidden { opacity: 0.5; } .adm-img-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .adm-img-zoom img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 6px; } .adm-img-card-tag { position: absolute; top: 12px; left: 12px; } .adm-img-card-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; } .adm-btn--small { padding: 4px 8px; font-size: 12px; } .adm-img-upload { display: flex; gap: 10px; align-items: center; } .adm-img-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.85); } .adm-img-lightbox[hidden] { display: none; } .adm-img-lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; } .adm-img-lightbox-close { position: absolute; top: 16px; right: 24px; border: 0; background: none; color: #fff; font-size: 36px; line-height: 1; cursor: pointer; } .adm-banner-manager-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 8px; } .adm-banner-card { display: flex; flex-direction: column; gap: 8px; } .adm-banner-preview { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 6px; background: #f6f8fa; } .adm-banner-form { display: flex; flex-direction: column; gap: 8px; } .adm-banner-form .adm-field { font-size: 12px; gap: 3px; } .adm-banner-form input[type="text"] { padding: 6px 8px; border: 1px solid #d0d7de; border-radius: 6px; font: inherit; } .adm-banner-form input[type="file"] { font-size: 12px; } .adm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-bottom: 28px; } .adm-card { background: #fff; border: 1px solid #e1e4e8; border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 4px; } .adm-card-label { font-size: 12px; color: #57606a; text-transform: uppercase; letter-spacing: .03em; } .adm-card-value { font-size: 26px; font-weight: 700; color: #1f2329; } .adm-card a { color: #0969da; text-decoration: none; font-size: 12px; } .adm-main .order-status { font-size: 11px; } @media (max-width: 900px) { .adm-form-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .adm-burger { display: inline-block; } .adm-side { position: fixed; left: 0; top: 0; z-index: 1000; transform: translateX(-100%); transition: transform .25s; } .adm-side.is-open { transform: translateX(0); } .adm-main { padding: 16px; } } .footer-instagram-cta { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px; border-radius: 12px; color: #fff !important; text-decoration: none; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); box-shadow: 0 4px 14px rgba(220, 39, 67, 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .footer-instagram-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(220, 39, 67, 0.5); filter: brightness(1.05); color: #fff !important; } .footer-instagram-cta svg { flex: 0 0 auto; } .footer-instagram-cta-text { display: flex; flex-direction: column; line-height: 1.25; } .footer-instagram-cta-text strong { font-size: 15px; font-weight: 700; } .footer-instagram-cta-text span { font-size: 13px; opacity: 0.95; } .footer-inovamind-cta { background: linear-gradient(45deg, #0a3d62 0%, #1d78c9 50%, #81d146 130%); box-shadow: 0 4px 14px rgba(10, 61, 98, 0.35); } .footer-inovamind-cta:hover { box-shadow: 0 6px 20px rgba(10, 61, 98, 0.5); } .footer-credit { font-size: var(--font-smallest, 12px); } .footer-credit a { color: var(--accent-color, #81d146); text-decoration: none; font-weight: 600; } .footer-credit a:hover { text-decoration: underline; } .category-header { padding: var(--bm-space-4) 0 var(--bm-space-2); } .category-header-title { margin: 0; font-size: var(--font-largest, 23px); font-weight: 700; color: #252525; letter-spacing: 0.5px; } .category-header .category-description { margin: 6px 0 0; color: var(--bm-gray-600, #666); font-size: var(--font-base, 16px); } .footer-map { margin-top: 10px; max-width: 320px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); } .footer-map iframe { display: block; width: 100%; height: 180px; border: 0; } .page-map { margin-top: 10px; max-width: 420px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.12); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .page-map iframe { display: block; width: 100%; height: 220px; border: 0; } .pdp-main-link { cursor: zoom-in; display: block; } .pdp-lightbox { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.9); cursor: zoom-out; } .pdp-lightbox.is-open { display: flex; } .pdp-lightbox-img { max-width: 95vw; max-height: 92vh; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.6); background: #fff; cursor: default; } .pdp-lightbox-close { position: absolute; top: 16px; right: 22px; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; transition: background 0.15s ease; } .pdp-lightbox-close:hover { background: rgba(255, 255, 255, 0.32); } body.pdp-lightbox-open { overflow: hidden; } .breadcrumbs { font-size: 15px; line-height: 1.4; } .breadcrumbs .crumb { color: var(--accent-color, #81d146); text-decoration: none; } .breadcrumbs a.crumb:hover { text-decoration: underline; } .breadcrumbs .crumb.active { color: #333; font-weight: 600; } .breadcrumbs .separator { margin: 0 8px; color: #aaa; } .js-sort-form { display: flex; align-items: center; gap: 10px; } .js-sort-form label { margin: 0; white-space: nowrap; } .js-sort-form select { width: auto; min-width: 210px; } .js-sort-form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #ccc; border-radius: 6px; padding: 8px 38px 8px 12px; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; color: #333; font: inherit; } .js-sort-form select:hover { border-color: #999; } .js-sort-form select:focus { border-color: var(--accent-color, #81d146); outline: none; box-shadow: 0 0 0 2px rgba(129, 209, 70, 0.25); } .pdp-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 36px; line-height: 1; cursor: pointer; transition: background 0.15s ease; } .pdp-lightbox-nav:hover { background: rgba(255, 255, 255, 0.34); } .pdp-lightbox-prev { left: 16px; } .pdp-lightbox-next { right: 16px; } .phone-mention { display: inline-flex; align-items: center; gap: 8px; } .phone-mention-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, 0.06); color: inherit; flex: 0 0 auto; transition: background 0.15s ease, color 0.15s ease; } .phone-mention-icon:hover { background: var(--accent-color, #81d146); color: #fff; } .phone-mention-icon--whatsapp:hover { background: #25d366; color: #fff; } .adm-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; } .adm-stats-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .adm-stats-row { display: flex; align-items: center; gap: 10px; } .adm-stats-rank { width: 20px; flex: 0 0 auto; font-weight: 700; color: #8b949e; font-size: 13px; text-align: center; } .adm-stats-thumb { width: 32px; height: 32px; object-fit: contain; border: 1px solid #eee; border-radius: 4px; background: #fff; flex: 0 0 auto; } .adm-stats-info { flex: 1 1 auto; min-width: 0; } .adm-stats-info .adm-link { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adm-stats-bar-track { background: #eef0f2; border-radius: 4px; height: 5px; margin-top: 4px; overflow: hidden; } .adm-stats-bar { background: var(--accent-color, #81d146); height: 100%; border-radius: 4px; } .adm-stats-count { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; font-size: 13px; } .account-page .form-control, .account-page select.form-control { background-color: #fff; color: var(--main-foreground, #1b1b1b); border: 1px solid #c8ccd1; } .account-page .form-control:focus, .account-page select.form-control:focus { border-color: var(--accent-color, #81d146); outline: none; box-shadow: 0 0 0 3px rgba(129, 209, 70, .18); } .account-group { border: 2px solid; border-radius: 12px; overflow: hidden; } .account-group .account-group-title { padding-bottom: 8px; border-bottom: 2px solid currentColor; } .account-group--data { border-color: #2f80ed; } .account-group--data .account-group-title { color: #2f80ed; } .account-group--email { border-color: #e08a16; } .account-group--email .account-group-title { color: #e08a16; } .account-group--senha { border-color: #27ae60; } .account-group--senha .account-group-title { color: #27ae60; } .adm-chart { display: block; max-width: 100%; height: auto; margin: 0 auto 16px; overflow: visible; font-family: inherit; } .adm-chart a { text-decoration: none; } .adm-chart-bar { fill: var(--accent-color, #81d146); transition: fill .15s ease; } .adm-chart-bar:hover { fill: #5fae2c; } .adm-chart-baseline { stroke: #d4d8dd; stroke-width: 1; } .adm-chart-count { fill: #1b1b1b; font-size: 11px; font-weight: 700; text-anchor: middle; } .adm-chart-rank { fill: #8b949e; font-size: 11px; font-weight: 700; text-anchor: middle; } .adm-chart-cap { fill: #707980; font-size: 11px; text-anchor: middle; } .form-field-error { display: block; margin-top: 6px; color: #d33; font-size: 13px; font-weight: 600; } .account-page .form-control[readonly] { background-color: #f1f3f5; color: #6b7280; cursor: not-allowed; border-color: #dcdfe3; } .pix-box { margin: 24px auto; max-width: 420px; text-align: center; padding: 20px; border: 1px solid #e1e4e8; border-radius: 10px; background: #fff; } .pix-qr { display: block; margin: 0 auto 12px; image-rendering: pixelated; } .pix-valor { font-size: 18px; margin: 8px 0 16px; } .pix-label { display: block; text-align: left; font-size: 13px; color: #666; margin-bottom: 4px; } .pix-code { width: 100%; font-family: monospace; font-size: 12px; word-break: break-all; resize: none; padding: 8px; border: 1px solid #ddd; border-radius: 6px; background: #fafbfc; } .pix-box .btn { margin-top: 12px; width: 100%; } .pix-expira { font-size: 13px; color: #666; margin-top: 12px; } .pix-hint { font-size: 13px; color: #555; margin-top: 12px; text-align: left; } .pix-expirado { color: #b00020; margin: 0; } .admin-hint { color: #555; font-size: 14px; background: #f6f8fa; border-left: 3px solid #ddd; padding: 10px 14px; border-radius: 6px; margin: 0 0 16px; } .alert-danger:not([hidden]), .alert-success:not([hidden]), .alert-info:not([hidden]), .alert-warning:not([hidden]) { display: flex; align-items: center; gap: 8px; } .alert-danger > p, .alert-success > p, .alert-info > p, .alert-warning > p { margin: 0; }