.okamy-pc-wrap { container-type: inline-size; container-name: okamypc; min-width: 0; } .okamy-pc, .okamy-pc *, .okamy-pc *::before, .okamy-pc *::after { box-sizing: border-box; } .okamy-pc { position: relative; display: flex; flex-direction: var(--okamy-pc-dir, column); min-width: 0; margin: 0; padding: 0; overflow: hidden; border: var(--okamy-pc-bw, 1px) solid var(--okamy-pc-bd, #ebebf0); border-radius: var(--okamy-pc-radius, 16px); background-color: var(--okamy-pc-bg, #fff); color: #17171a; font-size: 14px; line-height: 1.35; text-align: left; transition: box-shadow .25s, border-color .25s, transform .25s, background-color .25s; } @media (hover:hover) { .okamy-pc:hover { border-color: var(--okamy-pc-bd-h, var(--okamy-pc-bd, #e2e2ea)); background-color: var(--okamy-pc-bg-h, var(--okamy-pc-bg, #fff)); box-shadow: 0 12px 28px rgba(22, 22, 40, .09); transform: translateY(calc(var(--okamy-pc-lift, 3px) * -1)); } } .okamy-pc-media { position: relative; display: flex; flex: 0 0 auto; flex-direction: column; width: var(--okamy-pc-mw, 100%); max-width: 100%; min-width: 0; padding: var(--okamy-pc-inset, 0px); } .okamy-pc .okamy-pc-img { position: relative; display: block; flex: 1 0 auto; width: 100%; overflow: hidden; aspect-ratio: var(--okamy-pc-ratio, 1/1); border-radius: var(--okamy-pc-img-radius, 0px); background-color: var(--okamy-pc-img-bg, #f5f5f7); line-height: 0; } .okamy-pc .okamy-pc-img img.okamy-pc-photo { position: absolute!important; top: 0!important; left: 0!important; display: block!important; width: 100%!important; height: 100%!important; max-width: none!important; max-height: none!important; margin: 0!important; padding: var(--okamy-pc-img-pad, 7%)!important; border: 0!important; border-radius: 0!important; box-shadow: none!important; object-fit: var(--okamy-pc-fit, contain)!important; object-position: center!important; mix-blend-mode: var(--okamy-pc-blend, multiply); transition: transform .45s ease, filter .35s ease; } @media (hover:hover) { .okamy-pc-fx-brighten .okamy-pc:hover img.okamy-pc-photo, .okamy-pc-fx-shine-zoom .okamy-pc:hover img.okamy-pc-photo { filter: brightness(1.06); } .okamy-pc-fx-zoom .okamy-pc:hover img.okamy-pc-photo, .okamy-pc-fx-shine-zoom .okamy-pc:hover img.okamy-pc-photo { transform: scale(1.06); } .okamy-pc-fx-shine .okamy-pc:hover .okamy-pc-img::after, .okamy-pc-fx-shine-zoom .okamy-pc:hover .okamy-pc-img::after { opacity: 1; animation: okamy-pc-shine var(--okamy-pc-shine-t, .8s) ease-out; } } .okamy-pc-fx-shine .okamy-pc-img::after, .okamy-pc-fx-shine-zoom .okamy-pc-img::after { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, var(--okamy-pc-shine, rgba(255, 255, 255, .7)) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-18deg); pointer-events: none; opacity: 0; } @keyframes okamy-pc-shine { from { left: -80%; } to { left: 130%; } } @media (prefers-reduced-motion:reduce) { .okamy-pc-img::after { display: none; } .okamy-pc, .okamy-pc img.okamy-pc-photo { transition: none; } } .okamy-pc-badges { position: absolute; top: var(--okamy-pc-badge-y, 10px); left: var(--okamy-pc-badge-x, 10px); z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; max-width: calc(100% - var(--okamy-pc-badge-rsv, 60px)); pointer-events: none; } .okamy-pc-bside-right .okamy-pc-badges { right: var(--okamy-pc-badge-x, 10px); left: auto; align-items: flex-end; } .okamy-pc-fside-left.okamy-pc-bside-left .okamy-pc-badges, .okamy-pc-fside-right.okamy-pc-bside-right .okamy-pc-badges { top: calc(var(--okamy-pc-fav-y, 8px) + var(--okamy-pc-badge-push, calc(var(--okamy-pc-fav-box, 36px) + 6px))); max-width: calc(100% - 20px); } .okamy-pc .okamy-pc-badge { display: inline-block; max-width: 100%; padding: 5px 10px; overflow: hidden; border-radius: var(--okamy-pc-badge-radius, 999px); background-color: var(--okamy-pc-b-custom-bg, #17171a); color: var(--okamy-pc-b-custom-c, #fff); font-size: 11px; font-weight: 700; letter-spacing: .01em; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .okamy-pc .okamy-pc-badge-sale { background-color: var(--okamy-pc-b-sale-bg, var(--e-global-color-accent, #ff1654)); color: var(--okamy-pc-b-sale-c, #fff); } .okamy-pc .okamy-pc-badge-out { background-color: var(--okamy-pc-b-out-bg, #85858f); color: var(--okamy-pc-b-out-c, #fff); } .okamy-pc .okamy-pc-badge-featured { background-color: var(--okamy-pc-b-featured-bg, #00a8e0); color: var(--okamy-pc-b-featured-c, #fff); } .okamy-pc-fav { position: absolute; top: var(--okamy-pc-fav-y, 8px); right: var(--okamy-pc-fav-x, 8px); z-index: 3; line-height: 0; } .okamy-pc-fside-left .okamy-pc-fav { right: auto; left: var(--okamy-pc-fav-x, 8px); } .okamy-pc-fav button.okamy-fv-btn, .okamy-pc-fav button.okamy-fv-btn:focus, .okamy-pc-fav button.okamy-fv-btn:active { width: var(--okamy-pc-fav-box, 36px); height: var(--okamy-pc-fav-box, 36px); min-width: 0; padding: 0; border: 0; border-radius: 50%; background-color: var(--okamy-pc-fav-bg, #fff); box-shadow: 0 2px 8px rgba(22, 22, 40, .12); color: var(--okamy-pc-fav-c, #3c3c46); transition: color .2s, background-color .2s, transform .15s; } .okamy-pc-fav button.okamy-fv-btn:hover { width: var(--okamy-pc-fav-box, 36px); height: var(--okamy-pc-fav-box, 36px); border: 0; border-radius: 50%; background-color: var(--okamy-pc-fav-bg-h, var(--okamy-pc-fav-bg, #fff)); box-shadow: 0 2px 8px rgba(22, 22, 40, .12); color: var(--okamy-pc-fav-c-h, var(--e-global-color-accent, #ff1654)); } .okamy-pc-fav button.okamy-fv-btn:active { transform: scale(.9); } .okamy-pc-fav button.okamy-fv-btn.okamy-fv-on, .okamy-pc-fav button.okamy-fv-btn.okamy-fv-on:hover { background-color: var(--okamy-pc-fav-bg-on, var(--okamy-pc-fav-bg, #fff)); color: var(--okamy-pc-fav-c-on, var(--e-global-color-accent, #ff1654)); } .okamy-pc-fav button.okamy-fv-btn lord-icon { --lord-icon-primary: currentColor; } .okamy-pc-fav button.okamy-fv-btn .okamy-fv-ico { width: var(--okamy-pc-fav-ico, 19px); height: var(--okamy-pc-fav-ico, 19px); } .okamy-pc a.okamy-pc-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; display: block; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; border-radius: inherit; } .okamy-pc-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--okamy-pc-gap, 5px); min-width: 0; padding: var(--okamy-pc-pad, 12px 14px 14px); } .okamy-pc .okamy-pc-eyebrow { display: block; overflow: hidden; color: var(--okamy-pc-eyebrow-c, var(--e-global-color-accent, #ff1654)); font-size: 11px; font-weight: 700; letter-spacing: .06em; line-height: 1.3; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .okamy-pc .okamy-pc-title-wrap { margin: 0; padding: 0; border: 0; font: inherit; line-height: inherit; letter-spacing: normal; text-transform: none; } .okamy-pc a.okamy-pc-title { display: -webkit-box; overflow: hidden; color: var(--okamy-pc-title-c, #17171a); font-size: 14px; font-weight: 400; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: var(--okamy-pc-lines, 2); line-clamp: var(--okamy-pc-lines, 2); transition: color .2s; } .okamy-pc a.okamy-pc-title:hover, .okamy-pc:hover a.okamy-pc-title { color: var(--okamy-pc-title-c-h, var(--okamy-pc-title-c, #17171a)); text-decoration: none; } .okamy-pc-tfix-yes a.okamy-pc-title { min-height: calc(var(--okamy-pc-lines, 2) * 1.35em); min-height: calc(var(--okamy-pc-lines, 2) * 1lh); } .okamy-pc-labels { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 2px; } .okamy-pc .okamy-pc-label { color: var(--okamy-pc-label-c, #00a650); font-size: 13px; font-weight: 600; line-height: 1.3; } .okamy-pc-prices { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-top: 2px; } .okamy-pc .okamy-pc-offrow { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; line-height: 1.2; } .okamy-pc .okamy-pc-off { display: inline-block; padding: 2px 5px; border-radius: var(--okamy-pc-off-radius, 3px); background-color: var(--okamy-pc-off-bg, #00a650); color: var(--okamy-pc-off-c, #fff); font-size: 12px; font-weight: 700; letter-spacing: 0; line-height: 1.25; white-space: nowrap; } .okamy-pc .okamy-pc-old, .okamy-pc .okamy-pc-old del { color: var(--okamy-pc-old-c, #8a8a94); font-size: 12px; font-weight: 400; text-decoration: line-through; opacity: 1; } .okamy-pc .okamy-pc-old * { color: inherit; font: inherit; } .okamy-pc .okamy-pc-price { display: block; color: var(--okamy-pc-price-c, #17171a); font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; } .okamy-pc .okamy-pc-price ins { background: none; color: inherit; font: inherit; text-decoration: none; } .okamy-pc .okamy-pc-prices .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .okamy-pc-note { padding: 12px; border: 1px dashed #b5b5b5; color: #777; font: 13px/1.4 sans-serif; text-align: center; } @container okamypc (max-width:215px) { .okamy-pc { border-radius: var(--okamy-pc-radius, 14px); } .okamy-pc-body { gap: var(--okamy-pc-gap, 4px); padding: var(--okamy-pc-pad, 10px 10px 12px); } .okamy-pc .okamy-pc-eyebrow { font-size: 10px; } .okamy-pc a.okamy-pc-title { font-size: 13px; } .okamy-pc .okamy-pc-price { font-size: 19px; } .okamy-pc .okamy-pc-old, .okamy-pc .okamy-pc-old del { font-size: 11px; } .okamy-pc .okamy-pc-off { font-size: 11px; } .okamy-pc .okamy-pc-label { font-size: 12px; } .okamy-pc .okamy-pc-badge { padding: 4px 8px; font-size: 10px; } .okamy-pc-badges { top: var(--okamy-pc-badge-y, 7px); left: var(--okamy-pc-badge-x, 7px); gap: 4px; max-width: calc(100% - var(--okamy-pc-badge-rsv, 48px)); } .okamy-pc-bside-right .okamy-pc-badges { right: var(--okamy-pc-badge-x, 7px); left: auto; } .okamy-pc-fav { top: var(--okamy-pc-fav-y, 6px); right: var(--okamy-pc-fav-x, 6px); } .okamy-pc-fside-left .okamy-pc-fav { right: auto; left: var(--okamy-pc-fav-x, 6px); } .okamy-pc-fav button.okamy-fv-btn, .okamy-pc-fav button.okamy-fv-btn:hover, .okamy-pc-fav button.okamy-fv-btn:focus, .okamy-pc-fav button.okamy-fv-btn:active { width: var(--okamy-pc-fav-box, 30px); height: var(--okamy-pc-fav-box, 30px); } .okamy-pc-fav button.okamy-fv-btn .okamy-fv-ico { width: var(--okamy-pc-fav-ico, 16px); height: var(--okamy-pc-fav-ico, 16px); } } .okamy-pc-actions { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; margin-top: var(--okamy-pc-actions-gap, 8px); pointer-events: none; } .okamy-pc-actions > * { pointer-events: auto; } .okamy-pc a.okamy-pc-buy, .okamy-pc span.okamy-pc-buy { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; min-width: 0; height: var(--okamy-pc-buy-h, 40px); margin: 0; padding: 0 14px; overflow: hidden; border: 0; border-radius: var(--okamy-pc-buy-radius, 999px); background-color: var(--okamy-pc-buy-bg, #17171a); box-shadow: none; color: var(--okamy-pc-buy-c, #fff); font-size: 13px; font-weight: 700; line-height: 1; text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; transition: color .2s, background-color .2s, transform .12s; } .okamy-pc a.okamy-pc-buy:hover { background-color: var(--okamy-pc-buy-bg-h, var(--e-global-color-accent, #ff1654)); color: var(--okamy-pc-buy-c-h, #fff); text-decoration: none; } .okamy-pc a.okamy-pc-buy:active { transform: scale(.97); } .okamy-pc a.okamy-pc-buy.okamy-pc-buy-wa { gap: 6px; height: var(--okw-h, var(--okamy-pc-buy-h, 40px)); margin-top: var(--okw-mt, 0); border: var(--okw-bw, 0px) solid var(--okw-bd, transparent); border-radius: var(--okw-radius, var(--okamy-pc-buy-radius, 10px)); background-color: var(--okw-bg, var(--okamy-pc-wa-bg, #1fae5b)); color: var(--okw-c, #fff); font-size: var(--okw-fs, var(--okamy-pc-buy-fs, 14px)); } .okamy-pc a.okamy-pc-buy.okamy-pc-buy-wa:hover { border-color: var(--okw-bd-h, var(--okw-bd, transparent)); background-color: var(--okw-bg-h, var(--okw-bg, var(--okamy-pc-wa-bg, #1fae5b))); color: var(--okw-c-h, var(--okw-c, #fff)); filter: brightness(1.06); } .okamy-pc .okamy-pc-buy-wa .okamy-sc-wa-ico { flex: 0 0 auto; width: var(--okw-ico, 17px); height: var(--okw-ico, 17px); } .okamy-pc a.okamy-pc-wa-mini { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: var(--okamy-pc-buy-h, 40px); height: var(--okamy-pc-buy-h, 40px); margin: 0; padding: 0; border-radius: 50%; background-color: var(--okw-bg, var(--okamy-pc-wa-bg, #1fae5b)); color: var(--okw-c, #fff); text-decoration: none; transition: filter .2s, transform .12s; } .okamy-pc a.okamy-pc-wa-mini:hover { background-color: var(--okw-bg-h, var(--okw-bg, var(--okamy-pc-wa-bg, #1fae5b))); color: var(--okw-c-h, var(--okw-c, #fff)); filter: brightness(1.06); } .okamy-pc a.okamy-pc-wa-mini:active { transform: scale(.94); } .okamy-pc a.okamy-pc-wa-mini .okamy-sc-wa-ico { width: 20px; height: 20px; } .okamy-pc span.okamy-pc-buy.okamy-pc-buy-off { background-color: var(--okamy-pc-buy-off-bg, #ececf0); color: var(--okamy-pc-buy-off-c, #85858f); cursor: default; } .okamy-pc .okamy-pc-fav.okamy-pc-fav-inline { position: relative; top: auto; right: auto; left: auto; z-index: auto; flex: 0 0 auto; margin-left: auto; } .okamy-pc-fav-inline button.okamy-fv-btn, .okamy-pc-fav-inline button.okamy-fv-btn:hover, .okamy-pc-fav-inline button.okamy-fv-btn:focus, .okamy-pc-fav-inline button.okamy-fv-btn:active { width: var(--okamy-pc-fav-box, var(--okamy-pc-buy-h, 40px)); height: var(--okamy-pc-fav-box, var(--okamy-pc-buy-h, 40px)); border: 1px solid var(--okamy-pc-fav-bd, #e2e2ea); box-shadow: none; } @container okamypc (max-width:215px) { .okamy-pc-actions { gap: 6px; } .okamy-pc a.okamy-pc-buy, .okamy-pc span.okamy-pc-buy { height: var(--okamy-pc-buy-h, 36px); padding: 0 8px; font-size: 12px; } .okamy-pc-fav-inline button.okamy-fv-btn, .okamy-pc-fav-inline button.okamy-fv-btn:hover, .okamy-pc-fav-inline button.okamy-fv-btn:focus, .okamy-pc-fav-inline button.okamy-fv-btn:active { width: var(--okamy-pc-fav-box, var(--okamy-pc-buy-h, 36px)); height: var(--okamy-pc-fav-box, var(--okamy-pc-buy-h, 36px)); } } .okamy-pc a.okamy-pc-eyebrow { position: relative; z-index: 2; display: inline-block; align-self: flex-start; max-width: 100%; text-decoration: none; transition: color .2s; } .okamy-pc a.okamy-pc-eyebrow:hover { color: var(--okamy-pc-eyebrow-c-h, var(--okamy-pc-eyebrow-c, var(--e-global-color-accent, #ff1654))); text-decoration: underline; } .okamy-pc-tags { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; margin-top: 1px; pointer-events: none; } .okamy-pc a.okamy-pc-tag { display: inline-block; max-width: 100%; padding: 3px 8px; overflow: hidden; border-radius: var(--okamy-pc-tag-radius, 999px); background-color: var(--okamy-pc-tag-bg, #f1f1f4); color: var(--okamy-pc-tag-c, #55555f); font-size: 11px; font-weight: 500; line-height: 1.3; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; pointer-events: auto; transition: color .2s, background-color .2s; } .okamy-pc a.okamy-pc-tag:hover { background-color: var(--okamy-pc-tag-bg-h, var(--e-global-color-accent, #ff1654)); color: var(--okamy-pc-tag-c-h, #fff); text-decoration: none; } .okamy-pc a.okamy-pc-buy, .okamy-pc span.okamy-pc-buy { border: var(--okamy-pc-buy-bw, 0px) solid var(--okamy-pc-buy-bd, transparent); font-size: var(--okamy-pc-buy-fs, 13px); } .okamy-pc a.okamy-pc-buy:hover { border-color: var(--okamy-pc-buy-bd-h, var(--okamy-pc-buy-bd, transparent)); } .okamy-pc-buyw-auto .okamy-pc a.okamy-pc-buy, .okamy-pc-buyw-auto .okamy-pc span.okamy-pc-buy { flex: 0 1 auto; } @container okamypc (max-width:215px) { .okamy-pc a.okamy-pc-buy, .okamy-pc span.okamy-pc-buy { font-size: var(--okamy-pc-buy-fs, 12px); } .okamy-pc a.okamy-pc-tag { padding: 2px 7px; font-size: 10px; } } /* O widget ocupa a largura inteira do contêiner. Sem isto, o Elementor mede a altura do card como se ele fosse estreito, e sobra um espaço em branco embaixo dele. */ .e-con > .elementor-widget-okamy-card-produto, .e-con-inner > .elementor-widget-okamy-card-produto { width: 100%; } /* iPhone (Safari): as colunas da grade do Loop Grid podem crescer até a largura da foto original e a página fica mais larga que a tela (o Safari então reduz tudo). Com largura mínima zero a coluna respeita a tela, como já acontece no Android. */ .elementor-widget-okamy-card-produto, .elementor-loop-container > .e-loop-item, .elementor-grid > .e-loop-item, .e-loop-item > .e-con, .e-loop-item .elementor-widget-okamy-card-produto > .elementor-widget-container { min-width: 0; max-width: 100%; }