.okp { --okp-accent: var(--okamy-sec,#111111); --okp-on-accent: var(--okamy-on-sec,#fff); --okp-accent2-bg: #eef1f5; --okp-accent2: var(--okamy-txt,#111111); --okp-link: var(--okamy-pri,#1a8fd0); --okp-sel: var(--okamy-pri,#1a8fd0); --okp-star: #1a8fd0; --okp-tab: #ec2f6b; --okp-green: #00a650; --okp-text: var(--okamy-txt,#1f2328); --okp-muted: #6b7280; --okp-border: #e6e8ec; --okp-bg: #ffffff; --okp-soft: #f5f6f8; --okp-radius: 14px; --okp-btn-r: 8px; --okp-side: 400px; --okp-gap: 40px; --okp-gal-h: 520px; --okp-top: 24px; --okp-pad: 28px; position: relative; color: var(--okp-text); font-size: 15px; line-height: 1.45; -webkit-tap-highlight-color: transparent; } .okp *, .okp *::before, .okp *::after { box-sizing: border-box; } .okp [hidden] { display: none !important; } .okp svg.okp-i { width: 1em; height: 1em; flex: 0 0 auto; } .okp img:not([class*="okamy-"]) { max-width: 100%; height: auto; border: 0; box-shadow: none; } /* Só os elementos da própria página: botões e links do WhatsApp, Perguntas e Avaliações continuam com o visual deles. */ .okp a:not([class*="okamy-"]) { color: var(--okp-link); text-decoration: none; } .okp a:not([class*="okamy-"]):hover { text-decoration: underline; } .okp button[class*="okp-"], .okp button[class*="okp-"]:hover, .okp button[class*="okp-"]:focus, .okp button[class*="okp-"]:active, .okp-lb-thumbs button, .okp-lb-thumbs button:hover { font: inherit; color: inherit; background: transparent; border: 0; margin: 0; padding: 0; box-shadow: none; text-transform: none; letter-spacing: normal; text-decoration: none; line-height: inherit; min-height: 0; border-radius: 0; cursor: pointer; } .okp-green { color: var(--okp-green); } /* ---------- caminho ---------- */ .okp-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 14px; font-size: 13.5px; } .okp-back, .okp-path { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .okp-path svg { font-size: 12px; color: var(--okp-muted); } .okp-sep { color: #c9ccd3; } .okp button.okp-share-text { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--okp-link); font-size: 13.5px; } /* ---------- estrutura ---------- */ .okp-main { display: grid; grid-template-columns: minmax(0, 1fr) var(--okp-side); grid-template-areas: "left head" "left buy" "details buy"; /* A última linha é flexível: a coluna de compra (que pode crescer com o frete) não empurra a descrição para baixo da foto. */ grid-template-rows: auto auto 1fr; column-gap: var(--okp-gap); align-items: start; } .okp-card .okp-main, .okp-card .okp-rel { background: var(--okp-bg); border-radius: var(--okp-radius); padding: var(--okp-pad); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03); } .okp-head { grid-area: head; padding-bottom: 16px; min-width: 0; } .okp-left { grid-area: left; min-width: 0; } .okp-buy { grid-area: buy; align-self: start; position: sticky; top: var(--okp-top); min-width: 0; } .okp-buy.okp-nosticky { position: static; } .okp-details { grid-area: details; min-width: 0; margin-top: 32px; } /* ---------- topo ---------- */ .okp-meta { margin-bottom: 6px; font-size: 13px; color: var(--okp-muted); } .okp-meta i { margin: 0 8px; font-style: normal; color: #c9ccd3; } .okp-titlerow { display: flex; align-items: flex-start; gap: 12px; } .okp h1.okp-title { flex: 1; min-width: 0; margin: 0; padding: 0; color: var(--okp-text); font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; } .okp a.okp-rate { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--okp-muted); font-size: 14px; } .okp a.okp-rate b { color: var(--okp-text); font-weight: 500; } .okp-stars { position: relative; display: inline-flex; line-height: 0; } .okp-stars-off, .okp-stars-on { display: inline-flex; gap: 1px; white-space: nowrap; } .okp-stars-off { color: #d9dce1; } .okp-stars-on { position: absolute; top: 0; left: 0; overflow: hidden; color: var(--okp-star); } .okp-stars svg { font-size: 15px; fill: currentColor; stroke: none; } .okp-sku { margin-top: 6px; font-size: 12.5px; color: var(--okp-muted); } /* ---------- favoritar e botões redondos ---------- */ .okp button.okp-round, .okp button.okp-fav-title { width: 40px; height: 40px; flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--okp-link); font-size: 20px; transition: background 0.15s, transform 0.15s; } .okp button.okp-fav-title:hover { background: var(--okp-soft); } .okp button.okp-round { background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14); color: var(--okp-text); } .okp .okamy-fv-btn .okamy-fv-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; transition: fill 0.2s, transform 0.2s; } .okp .okamy-fv-btn.okamy-fv-on { color: var(--okp-link); } .okp .okamy-fv-btn.okamy-fv-on .okamy-fv-ico { fill: currentColor; animation: okp-pop 0.35s; } @keyframes okp-pop { 50% { transform: scale(1.25); } } /* ---------- galeria ---------- */ .okp-gal { position: relative; display: flex; gap: 12px; } .okp-thumbs { display: flex; flex-direction: column; gap: 8px; flex: 0 0 56px; } .okp button.okp-th { position: relative; width: 56px; height: 56px; padding: 3px; border: 1px solid var(--okp-border); border-radius: 8px; background: #fff; overflow: hidden; } .okp button.okp-th:hover, .okp button.okp-th.is-on { padding: 2px; border: 2px solid var(--okp-sel); } .okp-th img { display: block; width: 100%; height: 100%; object-fit: contain; } .okp .okp-th-x { display: none; } .okp-th-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.82); font-size: 15px; font-weight: 600; } .okp-stage { position: relative; flex: 1; min-width: 0; } .okp-track { display: flex; overflow: hidden; scroll-snap-type: x mandatory; border-radius: 10px; outline: none; scrollbar-width: none; } .okp-track::-webkit-scrollbar { display: none; } .okp-slide { flex: 0 0 100%; height: var(--okp-gal-h); margin: 0; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; background: #fff; cursor: zoom-in; } .okp .okp-slide img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; } .okp-gal[data-zoom="inner"] .okp-slide { overflow: hidden; } .okp-gal[data-zoom="inner"] .okp-slide img { transition: transform 0.12s ease-out; } .okp-flag { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 9px; border-radius: 6px; background: var(--okp-green); color: #fff; font-size: 12px; font-weight: 700; pointer-events: none; } .okp-count, .okp-dots, .okp-gal-actions { display: none; } .okp button.okp-nav { position: absolute; top: 50%; z-index: 3; width: 42px; height: 42px; margin-top: -21px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--okp-text); font-size: 20px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16); opacity: 0; transition: opacity 0.2s; } .okp-stage:hover .okp-nav, .okp-stage .okp-nav:focus-visible { opacity: 1; } .okp-stage .okp-prev { left: 12px; } .okp-stage .okp-next { right: 12px; } .okp-gal.is-zooming .okp-nav { opacity: 0; } .okp-lens { position: absolute; z-index: 4; display: none; border: 1px solid rgba(0, 0, 0, 0.18); background: rgba(255, 255, 255, 0.35); pointer-events: none; } .okp-zoompane { position: absolute; top: 0; left: calc(100% + var(--okp-gap)); z-index: 40; display: none; width: var(--okp-side); height: 100%; border: 1px solid var(--okp-border); border-radius: 12px; background-color: #fff; background-repeat: no-repeat; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16); pointer-events: none; } .okp-gal[data-zoom="side"].is-zooming .okp-lens, .okp-gal[data-zoom="side"].is-zooming .okp-zoompane { display: block; } .okp-zoomhint { position: absolute; left: 50%; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: var(--okp-muted); font-size: 12px; transform: translateX(-50%); pointer-events: none; transition: opacity 0.2s; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08); } .okp-gal[data-zoom="off"] .okp-zoomhint, .okp-gal.is-zooming .okp-zoomhint { opacity: 0; } /* ---------- compra ---------- */ .okp-buybox { padding: 22px; border: 1px solid var(--okp-border); border-radius: 12px; background: var(--okp-bg); } .okp-old { display: block; color: var(--okp-muted); font-size: 16px; line-height: 1.2; text-decoration: line-through; } .okp .okp-money-s { display: inline; white-space: nowrap; } .okp .okp-money-s .okp-sym { margin-right: 0.25em; } .okp .okp-money-s sup.okp-cents { margin-left: 1px; vertical-align: 0.45em; } .okp-money { display: inline-flex; align-items: flex-start; gap: 0.22em; line-height: 1; white-space: nowrap; } .okp sup.okp-cents { position: static; top: auto; margin-top: 0.12em; font-size: 0.5em; line-height: 1; vertical-align: baseline; } .okp-money-l { font-size: 36px; font-weight: 300; color: var(--okp-text); } .okp-nowrow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; } .okp-from { width: 100%; color: var(--okp-muted); font-size: 13px; } .okp-off { color: var(--okp-green); font-size: 18px; font-weight: 500; } .okp-inst { margin-top: 8px; font-size: 16px; } .okp-pix { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 14.5px; } .okp-pix svg { font-size: 16px; color: #32bcad; } .okp-pix em { color: var(--okp-muted); font-style: normal; } .okp button.okp-paylink { margin-top: 10px; color: var(--okp-link); font-size: 14px; } .okp button.okp-paylink:hover { text-decoration: underline; } .okp-ask .okp-asktext { font-size: 26px; font-weight: 500; } /* variações */ .okp-vars { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; } .okp-var-label { margin-bottom: 9px; color: var(--okp-muted); font-size: 14px; } .okp-var-label b { color: var(--okp-text); font-weight: 600; } .okp-var-need { display: none; margin-left: 8px; color: #e5484d; font-size: 13px; font-weight: 500; } .okp-var.is-need .okp-var-need { display: inline; } .okp-var.is-need .okp-var-opts { animation: okp-shake 0.4s; } @keyframes okp-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } } .okp-var-opts { display: flex; flex-wrap: wrap; gap: 8px; } .okp button.okp-opt { position: relative; min-height: 40px; padding: 6px 14px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--okp-border); border-radius: 8px; background: #fff; color: var(--okp-text); font-size: 14px; transition: border-color 0.15s, box-shadow 0.15s; } .okp button.okp-opt:hover { border-color: var(--okp-sel); } .okp button.okp-opt.is-on { border-color: var(--okp-sel); box-shadow: inset 0 0 0 1px var(--okp-sel); font-weight: 600; } .okp button.okp-opt-img { width: 58px; height: 58px; padding: 4px; justify-content: center; } .okp-opt-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 5px; } .okp-dotc { width: 18px; height: 18px; border-radius: 50%; background: var(--c, #d1d5db); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); } .okp button.okp-opt.is-oos { color: var(--okp-muted); background: var(--okp-soft); } .okp button.okp-opt.is-oos .okp-opt-t { text-decoration: line-through; } .okp button.okp-opt.is-oos img, .okp button.okp-opt.is-na img { opacity: 0.45; } .okp button.okp-opt.is-na { border-style: dashed; color: var(--okp-muted); opacity: 0.6; } /* estoque, quantidade e botões */ .okp-stock { margin-top: 20px; font-size: 15px; font-weight: 600; } .okp-stock.okp-low { color: #e8710a; } .okp-stock.okp-out { color: #e5484d; } .okp-form { margin-top: 14px; } .okp-form form.cart, .okp-form .woocommerce-variation-add-to-cart, .okp-form .single_variation_wrap { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; } .okp-form form.cart::before, .okp-form form.cart::after { display: none; } .okp-form table.variations, .okp-form .reset_variations, .okp-form .woocommerce-variation-price, .okp-form .woocommerce-variation-availability, .okp-form .single_variation_wrap > .woocommerce-variation:empty, .okp-buybox > .okp-form p.stock { display: none !important; } .okp-form .woocommerce-variation-description { font-size: 13.5px; color: var(--okp-muted); } .okp-form .woocommerce-variation-description p { margin: 0; } .okp-form .quantity { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; order: 0; margin: 0 0 4px; float: none; } .okp-qty-label { font-size: 15px; } .okp-step { display: inline-flex; align-items: center; height: 40px; border: 1px solid var(--okp-border); border-radius: 8px; overflow: hidden; background: #fff; } .okp .okp-step button { width: 38px; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--okp-link); font-size: 20px; line-height: 1; } .okp .okp-step button:disabled { color: #c9ccd3; cursor: default; } .okp .okp-form input.qty { width: 46px; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--okp-text); font-size: 15px; font-weight: 600; text-align: center; box-shadow: none; outline: none; -moz-appearance: textfield; appearance: textfield; } .okp .okp-form input.qty::-webkit-inner-spin-button, .okp .okp-form input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .okp-qty-note { color: var(--okp-muted); font-size: 13px; } .okp .okp-form button.okp-buynow, .okp .okp-form form.cart button.single_add_to_cart_button, .okp .okp-form form.cart .button { position: relative; width: 100%; height: 48px; margin: 0; padding: 0 16px; display: flex; align-items: center; justify-content: center; border: 0 !important; border-radius: var(--okp-btn-r) !important; font-size: 15.5px; font-weight: 600; line-height: 1; text-transform: none; box-shadow: none !important; transition: filter 0.15s, opacity 0.15s; float: none; } .okp .okp-form button.okp-buynow { order: 1; background: var(--okp-accent) !important; color: var(--okp-on-accent) !important; } .okp .okp-form form.cart button.single_add_to_cart_button, .okp .okp-form form.cart .button { order: 2; background: var(--okp-accent2-bg) !important; color: var(--okp-accent2) !important; } .okp .okp-form button.okp-buynow:hover, .okp .okp-form form.cart button.single_add_to_cart_button:hover { filter: brightness(0.94); } .okp .okp-form form.cart button.disabled { opacity: 0.55; } .okp .okp-form button.is-busy { color: transparent !important; pointer-events: none; } .okp .okp-form button.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid rgba(0, 0, 0, 0.15); border-top-color: var(--okp-accent2); border-radius: 50%; animation: okp-spin 0.7s linear infinite; } @keyframes okp-spin { to { transform: rotate(360deg); } } .okp-form a.added_to_cart { display: none !important; } .okp-form .okamy-wa-box { margin-top: 12px; } .okp .okamy-wa-box.okp-wa-sw .okamy-wa-field:not(.okamy-wa-qtyfield), .okp .okamy-wa-box.okp-wa-sw .okamy-wa-vprice, .okp .okamy-wa-box.okp-wa-sw .okamy-wa-err { display: none !important; } /* frete */ .okp-ship { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--okp-border); } .okp-ship-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15px; font-weight: 600; } .okp-ship-head svg { font-size: 22px; color: var(--okp-green); } .okp-ship-form { display: flex; gap: 8px; margin: 0; } .okp input.okp-cep { flex: 1; min-width: 0; height: 44px; margin: 0; padding: 0 14px; border: 1px solid var(--okp-border); border-radius: 8px; background: #fff; color: var(--okp-text); font: inherit; font-size: 15px; letter-spacing: 0.04em; box-shadow: none; outline: none; } .okp input.okp-cep:focus { border-color: var(--okp-sel); box-shadow: 0 0 0 3px rgba(26, 143, 208, 0.15); } .okp button.okp-cep-btn { height: 44px; padding: 0 18px; border-radius: 8px; background: var(--okp-accent2-bg); color: var(--okp-accent2); font-weight: 600; } .okp a.okp-cep-help { display: inline-block; margin-top: 7px; font-size: 12.5px; } .okp-ship-res:empty { display: none; } .okp-ship-res { margin-top: 12px; } .okp-addr { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 8px; color: var(--okp-muted); font-size: 13px; } .okp-addr svg { margin-top: 2px; font-size: 15px; } .okp-rates { list-style: none; margin: 0; padding: 0; border: 1px solid var(--okp-border); border-radius: 10px; overflow: hidden; } .okp-rates li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; font-size: 14px; } .okp-rates li + li { border-top: 1px solid var(--okp-border); } .okp-rates li > span { flex: 1; min-width: 0; } .okp-rates small { display: block; color: var(--okp-muted); font-size: 12.5px; } .okp-rates b { font-weight: 600; white-space: nowrap; } .okp-rates b.okp-green { color: var(--okp-green); } .okp-ship-msg { color: var(--okp-muted); font-size: 13.5px; } .okp-ship-msg.is-err { color: #e5484d; } .okp-ship-load { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--okp-border); border-top-color: var(--okp-sel); border-radius: 50%; animation: okp-spin 0.7s linear infinite; vertical-align: middle; margin-right: 6px; } /* garantias */ .okp-trust { display: flex; flex-direction: column; gap: 13px; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--okp-border); list-style: none; } .okp-trust li { display: flex; gap: 12px; margin: 0; color: var(--okp-muted); font-size: 13.5px; line-height: 1.45; } .okp-trust svg { margin-top: 1px; font-size: 20px; color: var(--okp-muted); } .okp-trust b { color: var(--okp-link); font-weight: 500; } /* ---------- seções de baixo ---------- */ .okp-sec + .okp-sec { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--okp-border); } .okp h2.okp-h2 { margin: 0 0 18px; padding: 0; color: var(--okp-text); font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; } .okp-hl { margin-bottom: 22px; } .okp-hl h3 { margin: 0 0 10px; font-size: 16px; font-weight: 600; } .okp-hl ul { margin: 0; } .okp-hl li { margin: 0 0 6px; } .okp table.okp-table { width: 100%; max-width: 780px; margin: 0; border: 1px solid var(--okp-border); border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; font-size: 14.5px; } .okp-table th, .okp-table td { padding: 13px 18px; border: 0; border-top: 1px solid var(--okp-border); text-align: left; vertical-align: top; } .okp-table tr:first-child th, .okp-table tr:first-child td { border-top: 0; } .okp-table th { width: 36%; background: var(--okp-soft); color: var(--okp-muted); font-weight: 500; } .okp-table td { background: #fff; color: var(--okp-text); font-weight: 500; } .okp-hl ul { list-style: none; padding-left: 0; } .okp-hl li { position: relative; padding-left: 26px; } .okp-hl li::before { content: ""; position: absolute; left: 2px; top: 0.42em; width: 12px; height: 6px; border-left: 2px solid var(--okp-green); border-bottom: 2px solid var(--okp-green); transform: rotate(-45deg); } .okp-desc-body { position: relative; color: #3d4148; font-size: 15.5px; line-height: 1.7; overflow-wrap: anywhere; } .okp-desc-body > :first-child { margin-top: 0; } .okp-desc-body img { border-radius: 10px; } .okp-desc-body.is-cut:not(.is-open) { max-height: var(--okp-desc-h, 420px); overflow: hidden; } .okp-desc-body.is-cut:not(.is-open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(rgba(255, 255, 255, 0), var(--okp-bg)); } .okp button.okp-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; color: var(--okp-link); font-size: 14.5px; font-weight: 500; } .okp-more .l2, .okp-desc.is-open .okp-more .l1 { display: none; } .okp-desc.is-open .okp-more .l2 { display: inline; } .okp-desc.is-open .okp-more svg { transform: rotate(180deg); } .okp .okamy-qa-h, .okp .okamy-rv-h { display: none; } .okp .okamy-qa-public, .okp .okamy-rv-public { margin: 0; padding: 0; border: 0; } .okp-tabs { margin-top: 4px; } .okp-tablist { display: flex; gap: 30px; margin: 0 0 26px; border-bottom: 1px solid var(--okp-border); overflow-x: auto; scrollbar-width: none; } .okp-tablist::-webkit-scrollbar { display: none; } .okp button.okp-tab { position: relative; flex: 0 0 auto; padding: 2px 0 14px; color: #9aa0a8; font-size: 15.5px; font-weight: 600; white-space: nowrap; transition: color 0.15s; } .okp button.okp-tab:hover, .okp button.okp-tab.is-on { color: var(--okp-text); } .okp button.okp-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--okp-tab); transform: scaleX(0); transition: transform 0.25s; } .okp button.okp-tab.is-on::after { transform: scaleX(1); } /* Abas sem "pulo" no hover: anula qualquer estilo de botão do tema/Elementor em todos os estados. */ .okp .okp-tablist button.okp-tab, .okp .okp-tablist button.okp-tab:hover, .okp .okp-tablist button.okp-tab:focus, .okp .okp-tablist button.okp-tab:active, .okp .okp-tablist button.okp-tab.is-on { margin: 0 !important; padding: 2px 0 14px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important; outline-offset: 2px; font-family: inherit !important; font-size: 15.5px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; vertical-align: top !important; min-height: 0 !important; } .okp .okp-tablist button.okp-tab { color: #9aa0a8 !important; } .okp .okp-tablist button.okp-tab:hover, .okp .okp-tablist button.okp-tab.is-on { color: var(--okp-text) !important; } .okp .okp-tablist button.okp-tab:hover::after { transform: scaleX(1); background: #c7cbd1; } .okp .okp-tablist button.okp-tab.is-on::after { transform: scaleX(1); background: var(--okp-tab); } .okp .okp-tablist button.okp-tab:focus:not(:focus-visible) { outline: none; } .okp-tabn { font-weight: 500; } .okp-tabpanel { animation: okp-fade 0.25s; } .okp-tabpanel .okp-desc-body { max-width: 780px; color: #5b6068; font-size: 15.5px; line-height: 1.8; } .okp-tabpanel .okp-desc-body p { margin: 0 0 1.1em; } .okp-desc-body h2, .okp-desc-body h3, .okp-desc-body h4 { margin: 1.4em 0 0.5em; color: var(--okp-text); font-size: 17px; font-weight: 600; line-height: 1.35; } .okp #woocommerce-correios-calculo-de-frete-na-pagina-do-produto, .okp .containerCalculator { display: none !important; } .okp-rvbox { max-width: 860px; } .okp-rv-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin: 0 0 22px; padding: 0 0 22px; border-bottom: 1px solid var(--okp-border); } .okp-rv-head .okamy-rv-psummary { flex: 1 1 320px; margin: 0; } .okp-rv-empty { display: flex; flex-direction: column; gap: 2px; } .okp-rv-empty-stars { color: #dedee4; font-family: Arial, sans-serif; font-size: 22px; letter-spacing: 2px; line-height: 1.2; } .okp-rv-empty strong { font-size: 17px; } .okp-rv-empty span:last-child { color: var(--okp-muted); font-size: 14px; } .okp-rv-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: var(--okp-muted); font-size: 14px; } .okp .okp-rvbox button.okp-rv-write, .okp .okp-rvbox button.okp-rv-write:hover, .okp .okp-rvbox button.okp-rv-write:focus, .okp .okp-rvbox button.okp-rv-write:active { height: 44px !important; min-height: 0 !important; margin: 0 !important; padding: 0 22px !important; border: 1.5px solid #17171a !important; border-radius: 999px !important; background: #fff !important; color: #17171a !important; font-family: inherit !important; font-size: 14.5px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: normal !important; text-transform: none !important; text-decoration: none !important; box-shadow: none !important; transform: none !important; transition: background 0.15s, color 0.15s; } .okp .okp-rvbox button.okp-rv-write:hover, .okp .okp-rvbox button.okp-rv-write[aria-expanded="true"] { background: #17171a !important; color: #fff !important; } .okp-rv-formwrap { margin: 0 0 22px; } .okp-rv-need { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid var(--okp-border); border-radius: 14px; background: var(--okp-soft); } .okp-rv-need svg.okp-i { flex: 0 0 26px; width: 26px; height: 26px; color: var(--okp-tab); } .okp-rv-need div { display: flex; flex-direction: column; gap: 4px; color: var(--okp-muted); font-size: 14px; } .okp-rv-need strong { color: var(--okp-text); font-size: 15px; } .okp-rv-need a { font-weight: 600; } .okp .okamy-rv-only, .okp .okamy-rv-note { display: none !important; } /* Botão "Perguntar" / "Entrar" das Perguntas: o tema não mexe mais nele ao passar o mouse. */ .okp .okamy-qa-public button.okamy-qa-send, .okp .okamy-qa-public button.okamy-qa-send:hover, .okp .okamy-qa-public button.okamy-qa-send:focus, .okp .okamy-qa-public button.okamy-qa-send:active, .okp .okamy-qa-public a.okamy-qa-send, .okp .okamy-qa-public a.okamy-qa-send:hover, .okp .okamy-qa-public a.okamy-qa-send:focus { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 48px !important; min-height: 0 !important; margin: 0 !important; padding: 0 24px !important; border: 0 !important; border-radius: 999px !important; background: #17171a !important; color: #fff !important; font-family: inherit !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: normal !important; text-transform: none !important; text-decoration: none !important; box-shadow: none !important; transform: none !important; transition: background 0.2s; } .okp .okamy-qa-public button.okamy-qa-send:hover, .okp .okamy-qa-public a.okamy-qa-send:hover { background: #3a3a40 !important; } .okp .okamy-qa-public button.okamy-qa-send[disabled] { opacity: 0.55; } /* ---------- relacionados ---------- */ .okp-rel { margin-top: 24px; } .okp-rel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .okp-rel-head h2.okp-h2 { margin: 0; } .okp-rel-nav { display: flex; gap: 8px; } .okp-rel-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 64px) / 5); gap: 16px; padding: 2px 2px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .okp-rel-track::-webkit-scrollbar { display: none; } .okp-rc { position: relative; display: flex; flex-direction: column; border: 1px solid var(--okp-border); border-radius: 12px; background: #fff; overflow: hidden; scroll-snap-align: start; transition: box-shadow 0.2s; } .okp-rc:hover { box-shadow: 0 8px 26px rgba(0, 0, 0, 0.1); } .okp a.okp-rc-link { position: absolute; inset: 0; z-index: 1; } .okp-rc-img { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 10px; border-bottom: 1px solid var(--okp-border); } .okp .okp-rc-img img { width: 100%; height: 100%; object-fit: contain; } .okp-rc-body { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 16px; } .okp-rc-old { color: var(--okp-muted); font-size: 12.5px; } .okp-rc-price { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 22px; } .okp-rc-price em { color: var(--okp-green); font-size: 13px; font-style: normal; font-weight: 500; } .okp-rc-inst { font-size: 12.5px; } .okp-rc-ask { font-size: 17px; font-weight: 500; } .okp-rc-title { display: -webkit-box; margin-top: 6px; overflow: hidden; color: var(--okp-text); font-size: 13.5px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .okp button.okp-rc-fav { position: absolute; top: 8px; right: 8px; z-index: 2; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--okp-link); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14); opacity: 0; transition: opacity 0.2s; } .okp-rc:hover .okp-rc-fav, .okp .okp-rc-fav.okamy-fv-on { opacity: 1; } /* ---------- tela cheia, janela de pagamento e aviso ---------- */ .okp-lb { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; background: #fff; } .okp-lb-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 14px; color: var(--okp-muted); } .okp button.okp-x { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--okp-soft); color: var(--okp-text); font-size: 20px; } .okp-lb-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; cursor: zoom-in; } .okp-lb.is-zoomed .okp-lb-stage { cursor: grab; } .okp .okp-lb-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; will-change: transform; } .okp-lb .okp-nav { opacity: 1; } .okp-lb .okp-lb-prev { left: 16px; } .okp-lb .okp-lb-next { right: 16px; } .okp-lb-thumbs { display: flex; justify-content: center; gap: 8px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); overflow-x: auto; } .okp-lb-thumbs button { flex: 0 0 56px; width: 56px; height: 56px; padding: 3px !important; border: 1px solid var(--okp-border) !important; border-radius: 8px !important; background: #fff !important; } .okp-lb-thumbs button.is-on { padding: 2px !important; border: 2px solid var(--okp-sel) !important; } .okp-lb-thumbs img { width: 100%; height: 100%; object-fit: contain; } .okp-lb-hint { text-align: center; color: var(--okp-muted); font-size: 12px; } html.okp-lock, html.okp-lock body { overflow: hidden !important; } .okp-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 17, 21, 0.45); animation: okp-fade 0.2s; } @keyframes okp-fade { from { opacity: 0; } } .okp-modal-box { width: min(480px, 100%); max-height: 86vh; overflow: auto; border-radius: 16px; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); animation: okp-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes okp-up { from { transform: translateY(24px); opacity: 0; } } .okp-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--okp-border); font-size: 17px; } .okp-modal-body { padding: 16px 20px 22px; } .okp-modal-body h4 { margin: 18px 0 8px; font-size: 15px; font-weight: 600; } .okp-methods { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .okp-methods li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid var(--okp-border); border-radius: 10px; font-size: 13.5px; } .okp-methods svg { font-size: 17px; color: var(--okp-link); } .okp table.okp-inst-table { width: 100%; margin: 0; border: 0; border-collapse: collapse; font-size: 14px; } .okp-inst-table th, .okp-inst-table td { padding: 9px 4px; border: 0; border-bottom: 1px solid var(--okp-border); background: none; text-align: left; } .okp-inst-table th { color: var(--okp-muted); font-weight: 500; font-size: 12.5px; } .okp-toast { position: fixed; right: 24px; bottom: calc(24px + var(--okp-barh, 0px)); z-index: 100001; width: min(380px, calc(100vw - 24px)); } .okp-toast-box { position: relative; padding: 16px; border-radius: 14px; background: #fff; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22); animation: okp-up 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } .okp-toast .okp-toast-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; font-size: 16px; background: transparent; } .okp-toast-row { display: flex; align-items: center; gap: 12px; padding-right: 26px; } .okp-toast-ic { position: absolute; top: 46px; left: 46px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 50%; background: var(--okp-green); color: #fff; font-size: 12px; } .okp-toast-ic svg { stroke-width: 3; } .okp .okp-toast-img { width: 52px; height: 52px; flex: 0 0 52px; object-fit: contain; border: 1px solid var(--okp-border); border-radius: 10px; background: #fff; } .okp-toast-title { display: block; color: var(--okp-green); font-size: 15px; font-weight: 600; } .okp-toast-name { display: -webkit-box; overflow: hidden; color: var(--okp-muted); font-size: 13px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .okp-toast-acts { display: flex; gap: 8px; margin-top: 14px; } .okp-toast-acts a { flex: 1; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: var(--okp-btn-r); font-size: 14px; font-weight: 600; text-decoration: none !important; } .okp a.okp-btn1 { background: var(--okp-accent); color: var(--okp-on-accent); } .okp a.okp-btn2 { background: var(--okp-accent2-bg); color: var(--okp-accent2); } .okp-toast.is-info .okp-toast-acts, .okp-toast.is-info .okp-toast-img, .okp-toast.is-error .okp-toast-acts, .okp-toast.is-error .okp-toast-img, .okp-toast.is-info .okp-toast-ic, .okp-toast.is-error .okp-toast-ic { display: none; } .okp-toast.is-error .okp-toast-title { color: #e5484d; } .okp-toast.is-info .okp-toast-title { color: var(--okp-text); } .okp-notices .woocommerce-message, .okp-notices .woocommerce-error, .okp-notices .woocommerce-info { margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--okp-border); border-left: 4px solid var(--okp-green); border-radius: 10px; background: #fff; list-style: none; font-size: 14px; } .okp-notices .woocommerce-error { border-left-color: #e5484d; } .okp-notices .woocommerce-message::before, .okp-notices .woocommerce-error::before, .okp-notices .woocommerce-info::before { display: none; } .okp-bar { display: none; }@media (max-width:1024px){.okp { --okp-pad: 16px; font-size: 15px; } .okp-main { grid-template-columns: 100%; grid-template-areas: "head" "left" "buy" "details"; grid-template-rows: auto; } .okp-card .okp-main, .okp-card .okp-rel { border-radius: 12px; } .okp-buy { position: static; } .okp-buybox { margin-top: 18px; padding: 0; border: 0; border-radius: 0; } .okp-head { padding-bottom: 12px; } .okp h1.okp-title { font-size: 18px; } .okp button.okp-fav-title, .okp-crumbs .okp-sep, .okp-crumbs .okp-path, .okp button.okp-share-text, .okp-zoomhint, .okp-thumbs, .okp-lens, .okp-zoompane, .okp .okp-stage .okp-nav { display: none !important; } .okp-gal { display: block; } .okp-track { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .okp-slide { height: auto; aspect-ratio: 1 / 1; max-height: 72vh; cursor: default; } .okp-count { position: absolute; top: 12px; left: 12px; z-index: 2; display: block; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); font-size: 12px; } .okp-flag { top: auto; bottom: 12px; } .okp-gal-actions { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; flex-direction: column; gap: 10px; } .okp-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; } .okp-dot { width: 6px; height: 6px; border-radius: 999px; background: #d5d8de; transition: width 0.2s, background 0.2s; } .okp-dot.is-on { width: 18px; background: var(--okp-sel); } .okp-money-l { font-size: 32px; } .okp-details { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--okp-border); } .okp h2.okp-h2 { font-size: 19px; } .okp-table th { width: 42%; } .okp-tablist { gap: 22px; margin-bottom: 20px; } .okp button.okp-tab, .okp .okp-tablist button.okp-tab, .okp .okp-tablist button.okp-tab:hover, .okp .okp-tablist button.okp-tab.is-on { font-size: 15px !important; } .okp-rel-nav { display: none; } .okp-rel-track { grid-auto-columns: 44%; gap: 12px; } .okp-rc-price { font-size: 19px; } .okp button.okp-rc-fav { opacity: 1; } .okp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9980; display: flex; align-items: center; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12); transform: translateY(110%); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } .okp-bar.is-on { transform: none; } .okp .okp-bar img { width: 44px; height: 44px; flex: 0 0 44px; object-fit: contain; border: 1px solid var(--okp-border); border-radius: 8px; } .okp-bar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .okp-bar-name { overflow: hidden; color: var(--okp-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; } .okp-bar-price { font-size: 19px; line-height: 1.2; } .okp button.okp-bar-btn { height: 44px; padding: 0 18px; border-radius: var(--okp-btn-r); background: var(--okp-accent); color: var(--okp-on-accent); font-size: 14.5px; font-weight: 600; white-space: nowrap; } .okp-modal { align-items: flex-end; padding: 0; } .okp-modal-box { width: 100%; border-radius: 18px 18px 0 0; } .okp-toast { left: 12px; right: 12px; bottom: calc(12px + var(--okp-barh, 0px)); width: auto; } .okp-lb .okp-nav { display: none; }}@media (max-width:767px){.okp-rel-track{grid-auto-columns:46%}.okp-crumbs{display:none}}