/* Current product page styles */
/* Product detail: Figma 6024:24244 / 4028:9453. Native gallery and commerce widgets. */
body.catalog-product-view .nav-sections { margin-bottom:0; }
body.catalog-product-view .breadcrumbs { max-width:1150px; box-sizing:border-box; padding:48px 20px 0; margin:0 auto 32px; }
body.catalog-product-view .breadcrumbs .items { color:#767676; font:400 12px/23px Montserrat,sans-serif; }
body.catalog-product-view .breadcrumbs a { color:#767676; }
body.catalog-product-view #maincontent { width:100%; max-width:1150px; padding:0 20px 48px; margin:0 auto; box-sizing:border-box; font-family:Montserrat,sans-serif; }
body.catalog-product-view #maincontent .columns > .column.main { width:100%; float:none; margin:0; padding:0; }
body.catalog-product-view .product-info-main { position:relative; box-sizing:border-box; }
body.catalog-product-view .product-info-main .page-title-wrapper { margin:0 0 8px; }
body.catalog-product-view .product-info-main .page-title { margin:0; color:#393939; font:600 24px/29px Montserrat,sans-serif; }
body.catalog-product-view .product-info-main > .product.attribute.sku { display:flex; align-items:baseline; gap:4px; margin:0 0 8px; color:#7e7e7e; font:400 12px/18px Montserrat,sans-serif; }
body.catalog-product-view .product-info-main .sku .type { font-weight:400; }
body.catalog-product-view .product-info-main .sku .type::after { content:':'; }
body.catalog-product-view .product-info-main .product.attribute.overview { display:block; margin:0 0 24px; padding:0; }
body.catalog-product-view .product-info-main .df-pdp-details-title { display:block; margin:0 0 6px; color:#5b5d5d; font:600 14px/19px Montserrat,sans-serif; }
body.catalog-product-view .product-info-main .overview .value { color:#929292; font:400 12px/15px Montserrat,sans-serif; }
body.catalog-product-view .product-info-main .overview .value p { margin:0; }
body.catalog-product-view .product-info-main.df-pdp-has-overview .p_short_description { display:none; }
body.catalog-product-view .product-info-main .product-reviews-summary.empty { display:none; }
body.catalog-product-view .product-info-main .product-info-price { display:block; width:auto; margin:0; padding:0; border:0; }
body.catalog-product-view .product-info-main .product-info-price .price-box { display:block; width:auto; padding:0; margin:0 0 16px; }
body.catalog-product-view .product-info-main .product-info-price .price-box:empty { display:none; }
body.catalog-product-view .product-info-main .price-box .price { color:#202020 !important; font:700 32px/39px Montserrat,sans-serif; }
body.catalog-product-view .product-info-main .price-box .old-price .price { color:#929292 !important; font:400 12px/15px Montserrat,sans-serif; }
body.catalog-product-view .product-info-main .product-add-form { padding:0; margin:0; }
body.catalog-product-view .product-info-main .box-tocart { margin:0 0 24px; width:100%; }
body.catalog-product-view .product-info-main .box-tocart .fieldset { display:flex; gap:16px; align-items:flex-start; margin:0; }
body.catalog-product-view .product-info-main .box-tocart .field.qty { flex:0 0 81px; margin:0; }
body.catalog-product-view .product-info-main .box-tocart .actions { flex:1; display:block; margin:0; padding:0; }
body.catalog-product-view .product-info-main .action.tocart,
body.catalog-product-view .product-info-main .df-pdp-consult { display:flex; align-items:center; justify-content:center; width:100%; min-height:52px; margin:0; padding:8px 16px; border:0; border-radius:0; background:#f26522; color:#fff; text-decoration:none; text-align:center; box-sizing:border-box; font:700 20px/25px Montserrat,sans-serif; text-transform:uppercase; }
body.catalog-product-view .product-info-main .action.tocart:hover,
body.catalog-product-view .product-info-main .df-pdp-consult:hover { background:#df581b; color:#fff; }
body.catalog-product-view .product-info-main .b2b-price-message:has(.df-pdp-consult) { margin:0; padding:0; background:none; border:0; }
body.catalog-product-view .product-info-main .product-info-stock-sku { margin:0 0 8px; font:400 12px/18px Montserrat,sans-serif; }
body.catalog-product-view .product-info-main:has(.b2b-price-message) .stock.available { display:none; }
body.catalog-product-view .product-info-main .product-social-links { margin:0; padding:0; }
body.catalog-product-view .product-info-main .product-addto-links .action.towishlist { position:absolute; top:0; right:0; display:block; width:22px; height:20px; min-width:0; margin:0; padding:0; border:0; background:transparent url('../images/df-pdp/favorite.svg') center/22px 20px no-repeat; }
body.catalog-product-view .product-info-main .product-addto-links .action.towishlist::before { content:none; }
body.catalog-product-view .product-info-main .product-addto-links .action.towishlist span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
body.catalog-product-view .product-info-main .action.tocompare { display:none; }
body.catalog-product-view .product.media { margin:0; min-width:0; }
body.catalog-product-view .product.media .fotorama__thumb-border { border-color:#f26522; }
body.catalog-product-view .product.media .fotorama__nav-wrap { margin-top:10px; }
body.catalog-product-view .df-pdp-description { position:relative; padding:32px 0; margin:0; background:#e9e9e9; box-shadow:0 0 0 100vmax #e9e9e9; clip-path:inset(0 -100vmax); }
body.catalog-product-view .df-pdp-description .description > .type { display:block; color:#000; font:700 16px/20px Montserrat,sans-serif; margin:0 0 16px; }
body.catalog-product-view .df-pdp-description .value { color:#5b5d5d; font:400 12px/15px Montserrat,sans-serif; }
body.catalog-product-view .df-pdp-description .value p { margin:0 0 8px; }
body.catalog-product-view .df-pdp-description .value > :last-child { margin-bottom:0; }
body.catalog-product-view .product.info.detailed { margin:0; clear:both; }
body.catalog-product-view .product.data.items > .item.title > .switch { font:600 14px/40px Montserrat,sans-serif; color:#393939; }
body.catalog-product-view .product.data.items > .item.content { font:400 14px/21px Montserrat,sans-serif; border-color:#e0e0e0; }
body.catalog-product-view .product-info-main .shipping-calculation .input-text { height:45px; border:1px solid #eee; box-shadow:0 3px 6px #0000001a; font:400 14px/20px Montserrat,sans-serif; }
body.catalog-product-view .product-info-main .cal_title h2 { color:#8e8e8e; font:600 14px/19px Montserrat,sans-serif; }
body.catalog-product-view .product-info-main :is(a,button,input,select):focus-visible { outline:2px solid #f26522; outline-offset:3px; }
@media (min-width:1024px) {
body.catalog-product-view #maincontent .columns > .column.main { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:30px; row-gap:48px; align-items:start; }
body.catalog-product-view #maincontent .column.main > * { grid-column:1 / -1; }
body.catalog-product-view #maincontent .column.main > .product.media { grid-column:1; grid-row:1; width:100%; float:none; }
body.catalog-product-view #maincontent .column.main > .product-info-main { grid-column:2; grid-row:1; width:100%; float:none; min-height:519px; padding:0 95px 0 0; }
body.catalog-product-view .product-info-main .overview .value { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
}
@media (max-width:1023px) {
body.catalog-product-view .breadcrumbs { padding-top:24px; margin-bottom:24px; }
body.catalog-product-view #maincontent .column.main > .product.media,
body.catalog-product-view #maincontent .column.main > .product-info-main { float:none; width:100%; margin-bottom:32px; }
body.catalog-product-view .product-info-main { padding-right:32px; }
body.catalog-product-view .df-pdp-description,body.catalog-product-view .product.info.detailed { margin-bottom:32px; }
}
/* Related products remain supplied by the catalog and the existing Owl widget. */
body.catalog-product-view #maincontent .block.related { margin:0; min-width:0; }
body.catalog-product-view #maincontent .block.related > .block-title { display:table; background:#f26522; color:#fff; padding:10px 32px; margin:0 0 38px; border:0; font:700 20px/25px Montserrat,sans-serif; }
body.catalog-product-view #maincontent .block.related > .block-title strong { font:inherit; color:inherit; }
body.catalog-product-view #maincontent .block.related .product-items { margin:0; padding:0; }
body.catalog-product-view #maincontent .block.related .product-item { width:100%; margin:0; padding:0; }
body.catalog-product-view #maincontent .block.related .product-item-info { width:100%; min-height:448px; background:#fff; border:0; box-shadow:none; padding:0; margin:0; }
body.catalog-product-view #maincontent .block.related .product-item-photo { display:block; line-height:0; }
body.catalog-product-view #maincontent .block.related .product-image-container { width:100% !important; }
body.catalog-product-view #maincontent .block.related .product-image-wrapper { height:240px; padding-bottom:0 !important; }
body.catalog-product-view #maincontent .block.related img.product-image-photo { height:206px; width:100%; top:28px; object-fit:contain; }
body.catalog-product-view #maincontent .block.related .product-item-details { display:flex; flex-direction:column; box-sizing:border-box; min-height:208px; padding:8px 16px 16px; }
body.catalog-product-view #maincontent .block.related .product-item-name { margin:0 0 8px; height:40px; }
body.catalog-product-view #maincontent .block.related .product-item-link { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; color:#393939; font:600 16px/20px Montserrat,sans-serif; }
body.catalog-product-view #maincontent .block.related .df-related-consult { display:flex; align-items:center; justify-content:center; width:100%; min-height:46px; margin-top:auto; background:#f26522; color:#fff; font:700 18px/22px Montserrat,sans-serif; text-decoration:none; opacity:0; pointer-events:none; transition:opacity 300ms ease-out; }
body.catalog-product-view #maincontent .block.related .product-item-info:is(:hover,:focus-within) .df-related-consult { opacity:1; pointer-events:auto; }
body.catalog-product-view #maincontent .block.related .product-item-info:has(.df-related-consult) :is(.b2b-price-message,.actions-primary) { display:none; }
body.catalog-product-view #maincontent .block.related .owl-nav button { position:absolute; top:197px; width:54px; height:54px; border:0; border-radius:0; margin:0; padding:0; box-shadow:0 2px 6px #00000026; background:#fff url('../images/df-home/arrow.svg') center/18px 19px no-repeat; }
body.catalog-product-view #maincontent .block.related .owl-nav button span { font-size:0; }
body.catalog-product-view #maincontent .block.related .owl-prev { left:-30px; }
body.catalog-product-view #maincontent .block.related .owl-next { right:-30px; transform:rotate(180deg); }
body.catalog-product-view #maincontent .block.related .owl-dots { display:none; }
body.catalog-product-view #maincontent .block.related .owl-nav.disabled { display:none; }
@media (max-width:1023px) {
body.catalog-product-view #maincontent .block.related { margin:32px 0; }
body.catalog-product-view #maincontent .block.related .owl-prev { left:0; }
body.catalog-product-view #maincontent .block.related .owl-next { right:0; }
body.catalog-product-view #maincontent .block.related .df-related-consult { font-size:13px; }
}
@media (hover:none) { body.catalog-product-view #maincontent .block.related .df-related-consult { opacity:1; pointer-events:auto; } }
@media (prefers-reduced-motion:reduce) { body.catalog-product-view #maincontent .block.related .df-related-consult { transition:none; } }
/* Reuse the existing newsletter module and its required fields. */
body.catalog-product-view .page-wrapper > .page-bottom { margin:0; padding:0; width:100%; max-width:none; }
body.catalog-product-view .page-bottom .block.newsletter { width:100%; max-width:none; background:#333; margin:0; padding:0; border:0; }
body.catalog-product-view .page-bottom .block.newsletter > .footer.content { display:flex; align-items:center; gap:32px; width:100%; max-width:1150px; min-height:71px; padding:0 20px; margin:0 auto; box-sizing:border-box; border:0; }
body.catalog-product-view .page-bottom .newsletterColunaEsquerda { display:flex; align-items:center; flex:0 0 523px; min-height:71px; width:auto; margin:0; padding:0 0 0 110px; box-sizing:border-box; background:url('../images/df-home/plane.svg') 32px 0/67px 67px no-repeat,url('../images/df-home/envelope.svg') 4px 6px/74px 74px no-repeat; }
body.catalog-product-view .page-bottom .newsletterColunaEsquerda .blocoTexto { width:auto; margin:0; padding:0; }
body.catalog-product-view .page-bottom .newsletter .blocoTexto h4 { margin:0; color:#fff; font:400 16px/20px Montserrat,sans-serif; text-align:left; }
body.catalog-product-view .page-bottom .newsletterColunaDireita { flex:1; min-width:0; width:auto; margin:0; padding:0; }
body.catalog-product-view .page-bottom .block.newsletter .form.subscribe { display:flex; align-items:flex-start; gap:11px; padding:0; margin:0; width:100%; }
body.catalog-product-view .page-bottom .block.newsletter .field { flex:1; min-width:0; width:auto; margin:0; }
body.catalog-product-view .page-bottom .block.newsletter .field.firstname { flex:0 0 120px; }
body.catalog-product-view .page-bottom .block.newsletter .control { width:100%; }
body.catalog-product-view .page-bottom .block.newsletter input { width:100%; height:42px; margin:0; border:1px solid #ddd; border-radius:0; padding:0 12px; box-sizing:border-box; background:#fff; font:400 14px/20px Montserrat,sans-serif; color:#2f2f2f; }
body.catalog-product-view .page-bottom .block.newsletter .actions { flex:0 0 128px; width:auto; padding:0; margin:0; }
body.catalog-product-view .page-bottom .block.newsletter .action.primary { width:100%; height:42px; padding:0; margin:0; border:0; border-radius:0; background:#f26522; color:#fff; font:700 16px/20px Montserrat,sans-serif; text-shadow:none; }
body.catalog-product-view .page-bottom .block.newsletter div.mage-error { color:#fff; }
@media (max-width:1199px) {
body.catalog-product-view .page-bottom .block.newsletter > .footer.content { flex-wrap:wrap; gap:16px; padding-top:16px; padding-bottom:16px; }
body.catalog-product-view .page-bottom .newsletterColunaEsquerda { flex-basis:100%; }
body.catalog-product-view .page-bottom .newsletterColunaDireita { flex-basis:100%; }
}
@media (max-width:479px) {
body.catalog-product-view .page-bottom .block.newsletter .form.subscribe { flex-wrap:wrap; }
body.catalog-product-view .page-bottom .block.newsletter .field.firstname { flex:1 0 100%; }
body.catalog-product-view .page-bottom .newsletterColunaEsquerda { padding-left:90px; }
}
@media (min-width:1200px) {
body.catalog-product-view .page-bottom .newsletterColunaEsquerda { flex-basis:555px; }
body.catalog-product-view .page-bottom .newsletter .blocoTexto h4 { white-space:nowrap; }
}
body.catalog-product-view #maincontent .column.main > div:empty { display:none; }
body.catalog-product-view .product-info-main .b2b-price-message:has(.df-pdp-consult) { display:block; font-size:0; line-height:0; }
body.catalog-product-view .product.media .fotorama__thumb-border { border-color:#f26522 !important; }
/* Keep the gallery ratio stable while Magento handles viewport changes. Fullscreen is untouched. */
body.catalog-product-view .product.media .fotorama:not(.fotorama--fullscreen) .fotorama__stage { height:auto !important; aspect-ratio:540 / 436.235; }
body.catalog-product-view .product.media .fotorama:not(.fotorama--fullscreen) .fotorama__stage__shaft { height:100%; }
body.catalog-product-view .product.media .fotorama:not(.fotorama--fullscreen) .fotorama__stage .fotorama__img { max-height:100%; max-width:100%; object-fit:contain; }
body.catalog-product-view .product-info-main:has(> .b2b-price-message) .product-add-form form { margin:0; }
body.catalog-product-view .product-info-main:has(> .b2b-price-message) .product-info-stock-sku:has(> .stock.available):not(:has(.stock.unavailable)) { display:none; }
body.catalog-product-view .product-info-main .tags-destaques-produto:has(> .center-tags-destaques-produto:empty) { display:none; }
/* Related shelf: same four-card geometry and controls as the home shelves. */
body.catalog-product-view #maincontent .block.related picture.product-image-photo{position:static;display:contents}
body.catalog-product-view #maincontent .block.related .action.towishlist span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
body.catalog-product-view #maincontent .block.related{clear:both;width:100%;margin:48px 0}
body.catalog-product-view #maincontent .block.related > .block-title{box-sizing:border-box;height:40px;padding:8px 32px;font:700 20px/24px Montserrat,sans-serif}
body.catalog-product-view #maincontent .block.related .product-items:not(.owl-loaded){display:flex;gap:30px;overflow-x:auto}
body.catalog-product-view #maincontent .block.related .product-items:not(.owl-loaded)>.product-item{flex:0 0 calc((100% - 90px)/4)}
body.catalog-product-view #maincontent .block.related .owl-stage-outer{padding:8px 0 9px;margin:-8px 0 -9px;overflow:hidden}
body.catalog-product-view #maincontent .block.related .owl-stage{display:flex}
body.catalog-product-view #maincontent .block.related .owl-item{flex-shrink:0;float:none}
body.catalog-product-view #maincontent .block.related .product-item{display:block;float:none}
body.catalog-product-view #maincontent .block.related .product-item-info{display:flex;flex-direction:column;height:448px;position:relative;isolation:isolate}
body.catalog-product-view #maincontent .block.related .product-item-info:hover{padding:0;margin:0;border:0;box-shadow:none}
body.catalog-product-view #maincontent .block.related .product-item-details{position:relative;flex:1;overflow:visible;z-index:2}
body.catalog-product-view #maincontent .block.related .product-item-photo{position:relative;z-index:0}
body.catalog-product-view #maincontent .block.related .product-item-inner{position:static;width:auto;height:auto;clip:auto;overflow:visible;border:0;box-shadow:none;padding:0;margin:0}
body.catalog-product-view #maincontent .block.related .product-item-actions{position:static;margin:0}
body.catalog-product-view #maincontent .block.related .actions-secondary{position:absolute;right:12px;top:-210px;z-index:4}
body.catalog-product-view #maincontent .block.related .action.tocompare{display:none}
body.catalog-product-view #maincontent .block.related .owl-nav{position:static;margin:0}
body.catalog-product-view #maincontent .block.related .owl-nav button{top:197px;z-index:5}
body.catalog-product-view #maincontent .block.related .owl-prev{left:-15px}
body.catalog-product-view #maincontent .block.related .owl-next{right:-15px}
body.catalog-product-view #maincontent .block.related .owl-nav .disabled{opacity:.35;cursor:default}
body.catalog-product-view #maincontent .block.related .block-actions{display:none}
@media(max-width:767px){
body.catalog-product-view #maincontent .block.related .owl-prev{left:0}
body.catalog-product-view #maincontent .block.related .owl-next{right:0}
body.catalog-product-view #maincontent .block.related .product-items:not(.owl-loaded)>.product-item{flex-basis:calc((100% - 16px)/2)}
}
/* A faixa da descricao so existe quando ha descricao cadastrada. Sem conteudo, o
container do layout desenhava uma tarja cinza de 64px em toda a largura
(padding 32px 0 + box-shadow full-bleed) em todas as PDPs.
:not(:has(*)) cobre tambem o caso de haver apenas espaco em branco. */
body.catalog-product-view .df-pdp-description:not(:has(*)) { display: none; }
/* ===== PDP mobile, conforme Figma 6164:9646 "Produto - Valor Oculto" (428x3233) ===== */
/* O Luma esconde o breadcrumb abaixo de 768px (styles-m.css). O Figma mostra,
em y=142, logo acima da galeria. Reposto apenas na PDP. */
@media (max-width:768px) {
body.catalog-product-view .breadcrumbs { display:block; padding:26px 20px 0; margin:0 0 16px; }
}
@media (max-width:1023px) {
/* A reserva de 32px existia para o coracao, que e absoluto no topo direito.
Ela encurtava tambem o CONSULTAR VALOR. Passa a valer so na linha do titulo. */
body.catalog-product-view .product-info-main { padding-right:0; }
body.catalog-product-view .product-info-main .page-title-wrapper { padding-right:32px; }
/* Figma: faixa do titulo ocupa a largura toda (388), 45px de altura,
texto recuado 16px, e 16px ate a vitrine. */
body.catalog-product-view #maincontent .block.related > .block-title {
display:block; width:100%; box-sizing:border-box; height:45px; padding:10px 16px; margin:0 0 16px; text-align:left; }
/* O card reservava 208px de detalhes com o botao empurrado por margin-top:auto,
o que abria 98px de vazio entre o nome e o botao. No mobile o botao esta sempre
visivel (hover:none), entao ele encosta no nome. */
body.catalog-product-view #maincontent .block.related .product-item-info { height:auto; min-height:0; }
body.catalog-product-view #maincontent .block.related .product-item-details { min-height:0; padding-bottom:16px; }
body.catalog-product-view #maincontent .block.related .df-related-consult { margin-top:12px; }
/* A seta desabilitada ficava a 35% de opacidade por cima do primeiro card. */
body.catalog-product-view #maincontent .block.related .owl-nav button.disabled { display:none; }
/* A aba de atributos vinha em x=5, fora do alinhamento de 20px dos demais blocos. */
body.catalog-product-view .product.info.detailed,
body.catalog-product-view .product.data.items { margin-left:0; margin-right:0; }
body.catalog-product-view .product.data.items > .item.title,
body.catalog-product-view .product.data.items > .item.content { margin-left:0; margin-right:0; }
}
/* ============================================================
PDP: remocoes pedidas no QA de 19/09
============================================================ */
/* ---- Bloco "Mais informacoes" (Cor, Marcas) ----
Remove a aba inteira: o rotulo e o conteudo. */
body.catalog-product-view #tab-label-additional,
body.catalog-product-view #tab-label-additional-title,
body.catalog-product-view #additional,
body.catalog-product-view .additional-attributes-wrapper,
body.catalog-product-view #product-attribute-specs-table {
display: none !important;
}
/* Sem nenhuma aba restante, o contentor das abas nao deve ocupar espaco. */
body.catalog-product-view .product.info.detailed:not(:has(.data.item.title:not(#tab-label-additional))) {
display: none !important;
}
/* ---- Bloco "Frete e Prazo" duplicado ----
O primeiro (com o botao CONFIRMAR, do modulo Eninteractive) e duplicata do
"Frete e Prazo de Entrega" que vem logo abaixo. */
body.catalog-product-view #product-shipping-form,
body.catalog-product-view .product-social-links #product-shipping-form,
body.catalog-product-view #product-shipping-button {
display: none !important;
}
/* ---- Rede de seguranca para os "undefined" ----
O JS remove os elementos; esta regra evita que pisquem antes disso. */
body.catalog-product-view .product-info-main .df-undefined-oculto {
display: none !important;
}
/* ---- Botao da calculadora de frete ----
O botao tem 92px e o rotulo muda para "CALCULANDO..." durante o calculo,
que precisa de 117px: o texto estourava para fora. Damos largura minima
suficiente para o rotulo mais longo e impedimos a quebra. */
body.catalog-product-view .block-content.shipping-calculation .actions-toolbar,
body.catalog-product-view .block-content.shipping-calculation .actions-primary,
body.catalog-product-view .block-content.shipping-calculation button.action.calculate {
box-sizing: border-box !important;
min-width: 132px !important;
white-space: nowrap !important;
}
body.catalog-product-view .block-content.shipping-calculation button.action.calculate {
padding-right: 12px !important;
padding-left: 12px !important;
text-overflow: clip !important;
overflow: visible !important;
}
/* ============================================================
Coluna de compra e blocos vazios da PDP
============================================================ */
/* A coluna de compra tem 540px, mas um padding-right de 95px fazia todo o
conteudo - titulo, preco, Compartilhar, Frete e Prazo, CEP e CALCULAR -
parar em 445px, deixando uma faixa morta a direita. */
body.catalog-product-view #maincontent .product-info-main {
padding-right: 0 !important;
}
/* Bloco de relacionados ou vendas adicionais sem nenhum produto. A classe vem
do df-pdp.js; o :has cobre o intervalo antes de o JS rodar. */
body.catalog-product-view #maincontent .block.related.df-bloco-vazio,
body.catalog-product-view #maincontent .block.upsell.df-bloco-vazio,
body.catalog-product-view #maincontent .block.crosssell.df-bloco-vazio,
body.catalog-product-view #maincontent .block.upsell:not(:has(.product-item)),
body.catalog-product-view #maincontent .block.crosssell:not(:has(.product-item)) {
display: none !important;
}
/* Native purchase actions and consistent related cards on the PDP. */
body.catalog-product-view #maincontent .block.related .owl-item .product-item-info {
display:flex; flex-direction:column; box-sizing:border-box; height:448px; min-height:448px;
width:100%; padding:0; margin:0; background:#fff; border:0; box-shadow:none;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-item-info:is(:hover,:focus-within) {
box-shadow:0 2px 8px #00000024;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-item-photo {
display:block; flex:0 0 240px; width:100%;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-image-wrapper {
display:block; box-sizing:border-box; height:240px; width:100%; padding-bottom:0!important;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-item-details {
display:flex; flex:1 1 auto; flex-direction:column; box-sizing:border-box;
min-height:0; padding:8px 16px 16px; overflow:visible;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-item-name {
flex:none; height:40px; min-height:40px; margin:0 0 8px;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-item-details > :is(.price-box,.backendorf-installment) {
margin-top:auto;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-item-inner {
position:static; display:block; flex:none; width:100%; height:auto; min-height:46px;
margin:12px 0 0; padding:0; border:0; background:none; box-shadow:none;
opacity:0; pointer-events:none; transition:opacity .2s ease;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-item-info:is(:hover,:focus-within) .product-item-inner {
opacity:1; pointer-events:auto;
}
body.catalog-product-view #maincontent .block.related .owl-item .actions-primary,
body.catalog-product-view #maincontent .block.related .owl-item .actions-primary form {
display:block; width:100%; margin:0;
}
body.catalog-product-view #maincontent .block.related .owl-item .action.tocart,
body.catalog-product-view #maincontent .block.related .owl-item .action.todetails {
display:flex!important; align-items:center; justify-content:center; box-sizing:border-box;
width:100%; height:46px!important; min-height:46px!important; margin:0; padding:8px 4px; border:0; border-radius:0;
background:#f26522; color:#fff; font:700 18px/22px Montserrat,sans-serif;
text-align:center; text-decoration:none; text-transform:uppercase;
}
body.catalog-product-view #maincontent .block.related .owl-item :is(.action.tocart,.action.todetails):hover {
background:#df581b; color:#fff;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-item-info:has(.df-related-consult) .product-item-inner,
body.catalog-product-view #maincontent .block.related .owl-item .product-item-info:has(.b2b-price-message) .product-item-inner {
display:none;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-item-info:has(.df-related-consult) .df-related-consult {
margin-top:auto;
}
@media (hover:none),(pointer:coarse) {
body.catalog-product-view #maincontent .block.related .owl-item .product-item-inner {opacity:1;pointer-events:auto}
}
@media (max-width:767px) {
body.catalog-product-view #maincontent .block.related .owl-item .product-item-info {height:370px;min-height:370px}
body.catalog-product-view #maincontent .block.related .owl-item .product-item-photo {flex-basis:160px}
body.catalog-product-view #maincontent .block.related .owl-item .product-image-wrapper {height:160px}
body.catalog-product-view #maincontent .block.related .owl-item img.product-image-photo {height:140px;top:12px}
body.catalog-product-view #maincontent .block.related .owl-item .product-item-details {padding:8px 8px 12px}
body.catalog-product-view #maincontent .block.related .owl-item :is(.action.tocart,.action.todetails) {font-size:13px}
}
@media (prefers-reduced-motion:reduce) {
body.catalog-product-view #maincontent .block.related .owl-item .product-item-inner {transition:none}
}
/* Current product page adjustments */
/* Related carousel follows the same mobile card rhythm as the home. */
@media (max-width:767px) {
body.catalog-product-view #maincontent .block.related .owl-item .product-item-info:has(.df-related-consult) {
display:flex!important;
flex-direction:column!important;
min-height:0!important;
height:auto!important;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-item-info:has(.df-related-consult) .product-item-photo {
flex:0 0 172px!important;
height:172px!important;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-item-info:has(.df-related-consult) .product-image-wrapper {
box-sizing:border-box!important;
height:172px!important;
padding-bottom:0!important;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-item-info:has(.df-related-consult) picture.product-image-photo {
position:relative!important;
display:block!important;
width:calc(100% - 30px)!important;
height:140px!important;
min-height:0!important;
max-height:140px!important;
margin:32px auto 0!important;
overflow:hidden!important;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-item-info:has(.df-related-consult) picture.product-image-photo img.product-image-photo {
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
max-height:100%!important;
object-fit:cover!important;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-item-info:has(.df-related-consult) .product-item-details {
display:flex!important;
flex:0 0 auto!important;
flex-direction:column!important;
min-height:0!important;
height:auto!important;
padding:8px 0 0!important;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-item-info:has(.df-related-consult) .price-box {
display:none!important;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-item-info:has(.df-related-consult) .actions-secondary {
top:-145px!important;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-item-info:has(.df-related-consult) .product-item-name {
box-sizing:border-box!important;
height:40px!important;
min-height:40px!important;
margin:0!important;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-item-info:has(.df-related-consult) .product-item-link {
font:400 14px/20px Montserrat,sans-serif!important;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-item-info:has(.df-related-consult) .df-related-consult {
box-sizing:border-box!important;
width:100%!important;
min-height:38px!important;
height:38px!important;
margin:16px 0 0!important;
padding:6px 4px!important;
font:700 clamp(13px,3.8vw,16px)/22px Montserrat,sans-serif!important;
opacity:1!important;
pointer-events:auto!important;
}
body.catalog-product-view #maincontent .block.related .owl-nav button {
top:88px!important;
width:36px!important;
height:36px!important;
z-index:5!important;
background-size:13px 14px!important;
}
body.catalog-product-view #maincontent .block.related .owl-prev {left:0!important;}
body.catalog-product-view #maincontent .block.related .owl-next {right:0!important;}
body.catalog-product-view #maincontent .block.related .owl-nav button.disabled {display:none!important;}
}
@media (min-width:1024px) {
body.catalog-product-view #maincontent .block.related .owl-item .product-item-info {
height:448px!important;
min-height:448px!important;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-image-wrapper {
height:240px!important;
aspect-ratio:auto!important;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-image-wrapper > picture.product-image-photo {
position:relative!important;
display:block!important;
width:100%!important;
max-width:100%!important;
height:212px!important;
min-height:0!important;
margin:28px auto 0!important;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-image-wrapper > picture.product-image-photo > img.product-image-photo {
position:absolute!important;
inset:0!important;
width:100%!important;
max-width:100%!important;
height:100%!important;
object-fit:contain!important;
}
body.catalog-product-view #maincontent .block.related .owl-item .product-item-link {
font:600 16px/20px Montserrat,sans-serif!important;
}
body.catalog-product-view #maincontent .block.related .owl-item .df-related-consult {
font:700 16px/22px Montserrat,sans-serif!important;
opacity:1!important;
pointer-events:auto!important;
}
}
body.catalog-product-view .breadcrumbs .items,body.catalog-product-view .breadcrumbs .item{display:flex;align-items:center}
body.catalog-product-view #product-shipping-form,body.catalog-product-view #product-shipping-form .fieldset{width:100%;max-width:100%;box-sizing:border-box}
body.catalog-product-view #product-shipping-form .fieldset>.field:has(#product-shipping-postcode){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:stretch}
body.catalog-product-view #product-shipping-postcode{box-sizing:border-box;width:100%;min-width:0;height:45px}
body.catalog-product-view #product-shipping-button{box-sizing:border-box;min-width:132px;height:45px;margin:0;white-space:nowrap}
body.catalog-product-view #maincontent .block.related .product-item-info:has(.b2b-price-message) .stock.available{display:none!important}
body.catalog-product-view #maincontent .block.related .actions-secondary .action.towishlist{display:flex;align-items:center;justify-content:center;width:36px;height:36px}
@media(min-width:1024px) and (hover:hover) and (pointer:fine){
body.catalog-product-view #maincontent .block.related .product-item-info :is(.df-related-consult,.product-item-inner,.action.towishlist){opacity:0!important;pointer-events:none!important;transition:opacity 180ms ease-out}
body.catalog-product-view #maincontent .block.related .product-item-info:is(:hover,:focus-within) :is(.df-related-consult,.product-item-inner,.action.towishlist){opacity:1!important;pointer-events:auto!important}
}
@media(max-width:767px){
body.catalog-product-view .breadcrumbs{box-sizing:border-box;width:100%;padding-right:20px;padding-left:20px}
body.catalog-product-view #maincontent{padding-right:20px;padding-left:20px;overflow:visible}
body.catalog-product-view #product-shipping-form .fieldset>.field:has(#product-shipping-postcode){grid-template-columns:minmax(0,1fr) 118px;gap:8px}
body.catalog-product-view #product-shipping-button{width:118px;min-width:0;padding-right:8px;padding-left:8px;font-size:13px}
body.catalog-product-view #maincontent .block.related picture.product-image-photo img.product-image-photo{object-fit:contain!important}
body.catalog-product-view #maincontent .block.related :is(.df-related-consult,.product-item-inner,.action.towishlist){opacity:1!important;pointer-events:auto!important}
body.catalog-product-view #maincontent .block.related .product-item-details{min-height:178px!important}
body.catalog-product-view #maincontent .block.related .owl-nav button{top:86px!important}
}
@media(max-width:359px){
body.catalog-product-view #product-shipping-form .fieldset>.field:has(#product-shipping-postcode){grid-template-columns:1fr}
body.catalog-product-view #product-shipping-button{width:100%}
}
@media(max-width:767px){body.catalog-product-view #maincontent .block.related .product-image-wrapper img.product-image-photo{object-fit:contain!important}}
@media(max-width:767px){html body.catalog-product-view #maincontent .block.related .owl-carousel .owl-item .product-item-info picture.product-image-photo img.product-image-photo{object-fit:contain!important}}
/* ============================================================
v4.4 - PDP: linha do Pix e galeria
============================================================ */
/* ---- 1) A linha do Pix sai da PDP ----
O modulo Backendorf imprime "R$90,25 5% no PIX" dentro de
.discounts. No card da vitrine esse bloco ja ficava oculto (a linha do Pix
de la e montada pelo df-global.js); aqui ele estava aparecendo cru, com o
valor e o "5% no PIX" em pesos diferentes. */
body.catalog-product-view #maincontent :is(.product-info-main, .product-info-price) .backendorf-installment .discounts,
body.catalog-product-view #maincontent :is(.product-info-main, .product-info-price) .discounts {
display: none !important;
}
/* ---- 2) Galeria: sem setas e com a imagem alinhada a esquerda ----
O Fotorama centralizava a imagem (436px) dentro de um palco de 540px, o que
deixava 52px de sobra de cada lado e desencontrava a foto dos thumbs, que
comecam na borda esquerda da coluna. As setas de navegacao ocupavam essa
sobra a direita. Com as setas fora e a imagem ancorada a esquerda, foto e
miniaturas partem da mesma linha. */
body.catalog-product-view #maincontent .fotorama__arr,
body.catalog-product-view #maincontent .fotorama__arr--prev,
body.catalog-product-view #maincontent .fotorama__arr--next,
body.catalog-product-view #maincontent .fotorama__thumb__arr {
display: none !important;
}
body.catalog-product-view #maincontent .fotorama__stage__frame .fotorama__img {
left: 0 !important;
right: auto !important;
margin-left: 0 !important;
/* O Fotorama centraliza a foto com top:50% + translate(-50%, -50%). Zerar o
transform inteiro (v4.4) tirava tambem o -50% vertical e a foto descia
metade da propria altura. Aqui so o eixo horizontal e neutralizado. */
transform: translateY(-50%) !important;
}
/* ---- 3) "Compre tambem": o botao estourava o card ----
Este arquivo fixa a altura dos cards do bloco (info 448, conteudo 208), medida
quando o bloco de precos era mais baixo. Com a linha do Pix da v4.1 o preco
passou a ocupar 92px e o conteudo precisa de 230: o botao vazava 22px para
fora do card. As alturas passam a seguir o conteudo - a altura minima do
bloco de precos (v4.3) ja mantem todos os cards iguais entre si. */
body.catalog-product-view #maincontent :is(.block.related, .block.upsell) .product-item-info {
height: auto !important;
min-height: 0 !important;
}
body.catalog-product-view #maincontent :is(.block.related, .block.upsell) .product-item-details {
height: auto !important;
min-height: 0 !important;
}
/* A altura tambem e fixada numa regra propria do carrossel (.owl-item), com
!important a partir de 1024px - por isso as duas repeticoes abaixo. */
body.catalog-product-view #maincontent :is(.block.related, .block.upsell) .owl-item .product-item-info,
body.catalog-product-view #maincontent :is(.block.related, .block.upsell) .owl-item .product-item-details {
height: auto !important;
min-height: 0 !important;
}
@media (min-width: 1024px) {
body.catalog-product-view #maincontent :is(.block.related, .block.upsell) .owl-item .product-item-info,
body.catalog-product-view #maincontent :is(.block.related, .block.upsell) .owl-item .product-item-details {
height: auto !important;
min-height: 0 !important;
}
}
/* ---- v4.5: a imagem do "Compre tambem" igual a do card da home ----
Este arquivo fixava height:240px na moldura e top:28px na foto, o que deixava
uma faixa branca de 28px acima da imagem (alem dos 28px da tag) e a encolhia
dentro da moldura. A moldura volta a 255x212 como na home, e a foto ocupa a
moldura com os mesmos 83,9% de largura do componente. */
body.catalog-product-view #maincontent :is(.block.related, .block.upsell) .product-image-wrapper {
height: auto !important;
aspect-ratio: 255 / 212 !important;
overflow: hidden !important;
}
body.catalog-product-view #maincontent :is(.block.related, .block.upsell) .product-image-wrapper > :is(picture, img) {
position: static !important;
top: auto !important;
display: block !important;
box-sizing: border-box !important;
width: 83.9% !important;
max-width: 83.9% !important;
height: 100% !important;
margin: 0 auto !important;
object-fit: contain !important;
}
body.catalog-product-view #maincontent :is(.block.related, .block.upsell) .product-image-wrapper picture > img {
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
margin: 0 !important;
}
/* As mesmas medidas sao fixadas de novo no seletor do carrossel (.owl-item),
com !important a partir de 1024px - dai a repeticao. */
@media (min-width: 1024px) {
body.catalog-product-view #maincontent :is(.block.related, .block.upsell) .owl-item .product-image-wrapper {
height: auto !important;
aspect-ratio: 255 / 212 !important;
overflow: hidden !important;
}
body.catalog-product-view #maincontent :is(.block.related, .block.upsell) .owl-item .product-image-wrapper > :is(picture, img) {
position: static !important;
top: auto !important;
width: 83.9% !important;
max-width: 83.9% !important;
height: 100% !important;
margin: 0 auto !important;
object-fit: contain !important;
}
body.catalog-product-view #maincontent :is(.block.related, .block.upsell) .owl-item .product-image-wrapper picture > img {
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
margin: 0 !important;
}
}
/* O ainda recebia margin-top: 28px (a faixa da tag, que neste tema ja
vem do padding do .product-item-photo): com ela a foto descia e era cortada
embaixo pelo overflow da moldura. */
body.catalog-product-view #maincontent :is(.block.related, .block.upsell) .product-image-wrapper > picture.product-image-photo,
body.catalog-product-view #maincontent :is(.block.related, .block.upsell) .product-image-wrapper > img.product-image-photo {
margin: 0 auto !important;
width: 83.9% !important;
max-width: 83.9% !important;
}
@media (min-width: 1024px) {
body.catalog-product-view #maincontent :is(.block.related, .block.upsell) .owl-item .product-image-wrapper > picture.product-image-photo,
body.catalog-product-view #maincontent :is(.block.related, .block.upsell) .owl-item .product-image-wrapper > img.product-image-photo {
margin: 0 auto !important;
width: 83.9% !important;
max-width: 83.9% !important;
height: 100% !important;
}
}
/* ---- v4.6: o botao CALCULAR vazava a tela no mobile ----
Campo e botao tinham larguras fixas (242 + 132 = 374 mais o espaco entre
eles), e o conjunto passava dos 390px: a pagina ficava 410px de largura.
A linha vira flex, o campo ocupa o que sobra e o botao encolhe ate caber. */
@media (max-width: 767px) {
body.catalog-product-view #maincontent :is(.df-pdp-shipping, .block.shipping, .shipping-estimation) :is(.field, .control, form, .fieldset) {
box-sizing: border-box !important;
max-width: 100% !important;
}
body.catalog-product-view #maincontent :is(.df-pdp-shipping, .block.shipping, .shipping-estimation) :is(.actions-toolbar, .field.zip, .control) {
min-width: 0 !important;
}
body.catalog-product-view #product-shipping-button,
body.catalog-product-view .block-content.shipping-calculation button.action.calculate {
box-sizing: border-box !important;
width: auto !important;
min-width: 0 !important;
max-width: 40% !important;
padding: 8px 12px !important;
white-space: nowrap !important;
}
body.catalog-product-view :is(#product-shipping-form, #product-shipping-form .fieldset, .block-content.shipping-calculation) {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
}
body.catalog-product-view #product-shipping-form .fieldset > .field:has(#product-shipping-postcode) {
grid-template-columns: minmax(0, 1fr) auto !important;
max-width: 100% !important;
}
body.catalog-product-view #product-shipping-postcode {
min-width: 0 !important;
}
body.catalog-product-view #maincontent :is(.df-pdp-shipping, .block.shipping, .shipping-estimation) input[type="text"] {
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
}
}
/* ---- v4.7: o botao CALCULAR ficou pequeno demais ----
A v4.6 limitou o botao a 40% da linha para ele nao vazar; com isso ele caiu
para 53px e o texto "CALCULAR" passou a ser cortado. O certo e o oposto: o
botao fica com a largura do proprio texto (a coluna "auto" da grade) e quem
encolhe e o campo de CEP. */
@media (max-width: 767px) {
body.catalog-product-view #product-shipping-button,
body.catalog-product-view .block-content.shipping-calculation button.action.calculate {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
flex: 0 0 auto !important;
padding: 8px 14px !important;
}
}
/* Um modal fechado do Magento ficava posicionado 390px a direita e esticava o
documento para 410px: a pagina inteira ganhava 20px de rolagem horizontal, e
era isso que empurrava a linha do frete para fora da tela. Fechado, ele volta
para dentro da area visivel (continua invisivel por visibility). */
@media (max-width: 767px) {
body.catalog-product-view .modal-popup:not(._show),
body.catalog-product-view .modal-slide:not(._show) {
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
body.catalog-product-view .modal-popup:not(._show) .modal-inner-wrap,
body.catalog-product-view .modal-slide:not(._show) .modal-inner-wrap {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
}
}
/* ---- v4.8: a raiz do estouro da PDP no mobile ----
Medido: numa tela de 390px o innerWidth da pagina era 410. O Chrome expande a
area de layout quando algo estoura, e o que estourava era um modal FECHADO do
Magento: .modal-inner-wrap com 410px de largura posicionado em x=410. Com a
pagina 20px mais larga que a tela, a linha do frete (campo + CALCULAR) ficava
parcialmente fora. Tentei reposicionar na v4.7 e nao bastou: fechado, o modal
sai do fluxo por completo. O Magento poe ._show antes de abrir, entao o
display volta no momento em que o modal e usado. */
@media (max-width: 767px) {
body.catalog-product-view .modals-wrapper .modal-popup:not(._show),
body.catalog-product-view .modals-wrapper .modal-slide:not(._show) {
display: none !important;
}
/* O segundo culpado: o palco do carrossel de "Compre tambem" tem a largura
de todos os itens somados (732px) e o container nao estava cortando. */
body.catalog-product-view .owl-stage-outer,
body.catalog-product-view :is(.block.related, .block.upsell) .owl-carousel {
overflow: hidden !important;
max-width: 100% !important;
}
/* Sobravam ainda os quadros da galeria, que o Fotorama posiciona fora da
area visivel de proposito. Como o Chrome amplia a area de layout quando
qualquer coisa estoura (e era por isso que a pagina media 410px numa tela
de 390), a pagina passa a cortar o que sai pela lateral. */
body.catalog-product-view,
body.catalog-product-view .page-wrapper {
overflow-x: hidden !important;
max-width: 100% !important;
}
}
/* ============================================================
v4.12 - PDP mobile: imagem de ponta a ponta e a linha do frete
============================================================ */
@media (max-width: 767px) {
/* ---- A foto ocupa toda a largura do conteudo ----
O respiro lateral de 20px da pagina fica (e o que a referencia mostra):
o que nao pode e a faixa branca que sobrava a direita, porque a foto
ficava com 315px dentro de uma area de 350. Palco quadrado, foto
preenchendo o quadro. Sem transform aqui: com top e left zerados ela nao
depende do -50% do Fotorama, que foi o que derrubou a foto na v4.4. */
body.catalog-product-view #maincontent .product.media,
body.catalog-product-view #maincontent .product.media :is(.gallery-placeholder, .fotorama, .fotorama__wrap, .fotorama__stage, .fotorama__nav-wrap) {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body.catalog-product-view #maincontent .fotorama__stage {
height: auto !important;
aspect-ratio: 1 / 1 !important;
overflow: hidden !important;
}
body.catalog-product-view #maincontent .fotorama__stage__frame {
width: 100% !important;
height: 100% !important;
}
body.catalog-product-view #maincontent .fotorama__stage__frame .fotorama__img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
margin: 0 !important;
transform: none !important;
object-fit: contain !important;
}
/* ---- A linha do CEP ----
O botao visivel nao e o #product-shipping-button (esse fica oculto) e sim
um button.calculate dentro de form#form-estimation-, que o tema
monta numa grade de colunas fixas: 250px para o campo e 92px para o
botao. So que o botao mede 107px: ele estourava a coluna e chegava a
x=410 numa tela de 390. A grade passa a ser "o que sobra" + "o tamanho do
botao", entao o campo encolhe e nada passa da borda. */
body.catalog-product-view #maincontent :is(form[id^="form-estimation"], .shipping-calculation form) {
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
}
body.catalog-product-view #maincontent :is(form[id^="form-estimation"], .shipping-calculation form) :is(input[id^="zip-"], input.input-text) {
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
}
body.catalog-product-view #maincontent :is(form[id^="form-estimation"], .shipping-calculation form) :is(.actions-toolbar, .actions-primary, .primary) {
box-sizing: border-box !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.catalog-product-view #maincontent :is(form[id^="form-estimation"], .shipping-calculation form) button.calculate,
body.catalog-product-view #maincontent .block-content.shipping-calculation button.action.calculate {
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
padding: 8px 12px !important;
white-space: nowrap !important;
}
/* O campo e o botao do bloco antigo (#product-shipping-form), caso ele
apareca em algum produto, seguem a mesma logica. */
body.catalog-product-view #product-shipping-form .fieldset > .field {
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
}
body.catalog-product-view #product-shipping-postcode {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
}
body.catalog-product-view #product-shipping-button {
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
}
}
/* ============================================================
v4.28 - A PDP em 42px
Medido, de bloco a bloco da coluna principal:
desktop galeria/info -> descricao ....... 71px
descricao -> "Compre tambem" .... 96px
"Compre tambem" mt/mb ........... 48px / 48px
mobile galeria -> info ................. 32px
info -> descricao ............... 32px
descricao -> "Compre tambem" .... 80px
Sete valores diferentes. O detalhe que explica a mistura: a coluna principal
nao usa o mesmo mecanismo nos dois tamanhos - no desktop ela e um GRID com
row-gap de 48px, e no mobile e um flex sem gap, onde quem separa sao as
margens. Por isso margem sozinha nao resolvia no desktop: ela se somava aos
48px do grid.
Cada um e ajustado pelo seu proprio mecanismo, e os dois fecham em 42px.
Fica de fora o respiro interno da coluna de informacao (titulo -> SKU ->
resumo, 8px): e o espacamento dentro de um mesmo bloco, e leva-lo a 42px
separaria o titulo do proprio SKU. O padding de 32px da descricao tambem
fica: ela tem fundo cinza proprio, entao aquilo e recheio do bloco, nao vao
entre blocos.
============================================================ */
@media (min-width: 768px) {
body.catalog-product-view #maincontent .column.main {
row-gap: 42px !important;
}
body.catalog-product-view #maincontent .column.main > :is(.product.media, .product-info-main, .df-pdp-description, .block.related, .block.upsell, .product.info.detailed) {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
@media (max-width: 767px) {
body.catalog-product-view #maincontent .column.main > :is(.product.media, .product-info-main, .df-pdp-description, .block.related, .block.upsell, .product.info.detailed) {
margin-top: 0 !important;
margin-bottom: 42px !important;
}
body.catalog-product-view #maincontent .column.main > :last-child {
margin-bottom: 0 !important;
}
}
/* O titulo do "Compre tambem" seguia o ritmo antigo (38px no desktop, 16px no
mobile, ate a vitrine). */
body.catalog-product-view #maincontent :is(.block.related, .block.upsell) .block-title {
margin-top: 0 !important;
margin-bottom: 42px !important;
}
/* ---- v4.33: a borda das miniaturas da galeria ----
No Figma a miniatura nao selecionada tem borda; no site ela nao tinha
nenhuma. A selecionada ja recebe uma borda laranja de 2px, desenhada por um
elemento sobreposto (.fotorama__thumb-border), que continua como esta.
A borda cinza entra como sombra interna, e nao como border: o Fotorama
calcula a largura das miniaturas em pixel, e um border de verdade mudaria a
conta e deslocaria a fila. A sombra ocupa o mesmo lugar e some por baixo da
borda laranja na miniatura ativa. */
body.catalog-product-view #maincontent .fotorama__nav__frame .fotorama__thumb {
box-shadow: inset 0 0 0 2px #e3e6ea !important;
}
body.catalog-product-view #maincontent .fotorama__thumb-border {
border-color: #f26522 !important;
}