Controle deslizante de imagem de produto vertical para tema Shopify Dawn com zoom ao passar o mouse

 { % Comente % }
 Renderiza uma galeria de mídia do produto. Deve ser usado com 'media-gallery.js'
 Veja também 'produto-mídia-modal'

 Aceita : 
- produto : { Objeto } Objeto líquido do produto
 - variante_images : { Array } Imagens do produto associadas a uma variante
 - is_duplicate : { Boolean } Impede a renderização de elementos desnecessários e IDs duplicados para instâncias subsequentes

 Uso : 
{ % renderizar 'product-media-gallery' , is_duplicate : true % }
 { % comentário final % }
 { { 'produto principal-vertical.css' | URL_do_asset | folha_de_estilo } }
 { %- líquido 
se seção. configurações . hide_variants e variante_images. tamanho == produto. meios de comunicação . tamanho
 atribuir single_media_visible = verdadeiro
 fim se

 atribuir media_count = produto. meios de comunicação . tamanho 
se seção. configurações . hide_variants e media_count > 1 e variante_images. tamanho > 0
 atribuir media_count = media_count | menos : variante_images. tamanho | mais : 1
 fim se

 se media_count == 1 ou single_media_visible 
atribuir single_media_visible_mobile = verdadeiro
 fim se

 se media_count == 0 ou single_media_visible_mobile ou seção. configurações . mobile_thumbnails == 'show' ou seção. configurações . mobile_thumbnails == 'colunas' e media_count < 3
 atribuir hide_mobile_slider = true
 fim se
 
se seção. configurações . media_size == 'grande'
 atribuir media_width = 0,65
 seção Elif. configurações . media_size == 'médio'
 atribuir media_width = 0,55
 seção Elif. configurações . media_size == 'pequeno'
 atribuir media_width = 0,45
 fim se
 
atribuir id_append = ''
 se for_duplicado
 atribuir id_append = '-duplicado'
 fim se
 -% }
 < mídia - galeria
 id = "MediaGallery- {{ section.id }} {{ id_append }} "
 função = "região" 
{ % se seção. configurações . enable_sticky_info % }
 class = "product__column-sticky"
 { % fim se % }
 aria - label = " {{ 'products.product.media.gallery_viewer' | t }} " 
dados - desktop - layout = " {{ section.settings.gallery_layout }} "
 >
 { %- para mídia no produto. meios de comunicação -% }
 { %- a menos que mídia. id == produto. selecionado_ou_primeira_variável_disponível . destaque_media . eu ia -% } 
{ % atribuir no_thumbails_media = true % }
 { % sem fim % }
 { % fim para % } 
< div id = "GalleryStatus- {{ section.id }} " class = "visualmente oculto" role = "status" </ div >
 < principal - controle deslizante
 id = "GalleryViewer- {{ section.id }} {{ id_append }} " 
class = "slider-mobile-gutter {% unless no_thumbails_media %} mais--media {% endunless %} "
 >
 { %- a menos que seja_duplicado -% }
 <a class = "botão pular para link de conteúdo oculto visualmente, adição rápida oculta" href = "#ProductInfo- {{section.id }} " > _ _ _ _ {{ section.id }} _ 
{ { 'acessibilidade.skip_to_product_info' | } }
 </a> _
 { %- sem fim -% }
 < botão
 tipo = "botão"
 class = "botão deslizante botão deslizante--anterior botão principal--anterior"
 nome = "anterior" 
aria - label = " {{ 'general.slider.previous_slide' | t }} "
 { % se produto. meios de comunicação . tamanho <= 1 % }
 estilo = "display: nenhum"
 { % fim se % }
 > 
< svg class = "icon" viewBox = "0 0 15 15" >
 < classe de caminho = "st0" d = "M1.17,0.78l12.97,6.05c0.14,0.07,0.15,0.26,0.01,0.33L1.08,14.21c-0.2,0.11-0.4-0.13-0.26- 0,29l4,46-6,78
 c0.07-0.08,0,06-0,19-0,01-0,26l-4,34-5,8C0,77,0,94,0,96,0,69,1,17,0,78z" </ caminho >
 </svg> _
 </ botão > 
< ul
 id = "Galeria deslizante- {{ section.id }} {{ id_append }} "
 class = "product__media-list contém grade de mídia de mídia - espiar lista - controle deslizante sem estilo - móvel"
 função = "lista"
 >
 { %- se produto. selecionado_ou_primeira_variável_disponível . destaque_media != nulo -% } 
{ %- atribuir destaque_media = produto. selecionado_ou_primeira_variável_disponível . destaque_media -% }
 < li
 id = "Slide- {{ section.id }} - {{ featured_media.id }} {{ id_append }} " 
class = "product__media-item grid__item slider__slide is-active {% if single_media_visible %} product__media-item--single {% endif %} {% if featured_media.media_type != 'image' %} product__media-item--full {% endif %} {% if section.settings.hide_variants and variant_images contains featured_media.src %} product__media-item--variant {% endif %} "
 dados - mídia - id = " {{ section.id }} - {{ featured_media.id }} "
 > 
{ %- atribuir media_position = 1 -% }
 { % renderizar 'miniatura do produto' ,
 mídia : destaque_media ,
 media_count : media_count ,
 posição : posição_mídia ,
 desktop_layout : seção. configurações . galeria_layout , 
mobile_layout : seção. configurações . miniaturas_móveis ,
 laço : seção. configurações . ativar_video_looping ,
 modal_id : seção. eu ia ,
 xr_button : verdadeiro ,
 largura_mídia : largura_mídia ,
 media_fit : seção. configurações . media_fit , 
constrain_to_viewport : seção. configurações . restringir_to_viewport ,
 carga_preguiçosa : falso
 % }
 </ li >
 { %- fim se -% }
 { %- para mídia no produto. meios de comunicação -% } 
{ %- a menos que mídia. id == produto. selecionado_ou_primeira_variável_disponível . destaque_media . eu ia -% }
 < li
 id = "Slide- {{ section.id }} - {{ media.id }} {{ id_append }} " 
class = "product__media-item grid__item slider__slide {% if single_media_visible %} product__media-item--single {% endif %} {% if product.selected_or_first_available_variant.featured_media == null and forloop.index == 1 %} está ativo {% endif %} {% if media.media_type != 'image' %} product__media-item--full {% endif %} {% if section.settings.hide_variants and variant_images contains media.src %} product__media-item--variant {% endif %} " 
dados - mídia - id = " {{ section.id }} - {{ media.id }} "
 >
 { %- líquido
 atribuir media_position = media_position | padrão : 0 | mais : 1
 atribuir preguiçoso_load = falso 
se posição_mídia > 1
 atribuir preguiçoso_load = verdadeiro
 fim se
 -% }
 { % renderizar 'miniatura do produto' ,
 mídia : mídia ,
 media_count : media_count ,
 posição : posição_mídia , 
desktop_layout : seção. configurações . galeria_layout ,
 mobile_layout : seção. configurações . miniaturas_móveis ,
 laço : seção. configurações . ativar_video_looping ,
 modal_id : seção. eu ia ,
 xr_button : verdadeiro , 
largura_mídia : largura_mídia ,
 media_fit : seção. configurações . media_fit ,
 constrain_to_viewport : seção. configurações . restringir_to_viewport ,
 carga_preguiçosa : carga_preguiçosa
 % }
 </ li >
 { %- sem fim -% } 
{ %- fim para -% }
 </ul> _
 < botão
 tipo = "botão"
 class = "botão deslizante botão deslizante--próximo botão principal--próximo"
 nome = "próximo"
 aria - label = " {{ 'general.slider.next_slide' | t }} " 
{ % se produto. meios de comunicação . tamanho <= 1 % }
 estilo = "display: nenhum"
 { % fim se % }
 >
 < svg class = "icon" viewBox = "0 0 15 15" > 
< classe de caminho = "st0" d = "M1.17,0.78l12.97,6.05c0.14,0.07,0.15,0.26,0.01,0.33L1.08,14.21c-0.2,0.11-0.4-0.13-0.26- 0,29l4,46-6,78
 c0.07-0.08,0,06-0,19-0,01-0,26l-4,34-5,8C0,77,0,94,0,96,0,69,1,17,0,78z" </ caminho >
 </svg> _
 </ botão >
 </ principal - controle deslizante > 
< slider - componente id = "GalleryViewer- {{ section.id }} {{ id_append }} " class = "slider-mobile-gutter" >
 { %- a menos que seja_duplicado -% } 
<a class = "botão pular para link de conteúdo oculto visualmente, adição rápida oculta" href = "#ProductInfo- {{section.id }} " > _ _ _ _ {{ section.id }} _
 { { 'acessibilidade.skip_to_product_info' | } }
 </a> _
 { %- sem fim -% }
 < ul 
id = "Galeria deslizante- {{ section.id }} {{ id_append }} "
 class = "product__media-list contém grade de mídia de mídia - espiar lista - controle deslizante sem estilo - móvel"
 função = "lista"
 >
 { %- se produto. selecionado_ou_primeira_variável_disponível . destaque_media != nulo -% } 
{ %- atribuir destaque_media = produto. selecionado_ou_primeira_variável_disponível . destaque_media -% }
 < li
 id = "Slide- {{ section.id }} - {{ featured_media.id }} {{ id_append }} " 
class = "product__media-item grid__item slider__slide is-active {% if single_media_visible %} product__media-item--single {% endif %} {% if featured_media.media_type != 'image' %} product__media-item--full {% endif %} {% if section.settings.hide_variants and variant_images contains featured_media.src %} product__media-item--variant {% endif %} "
 dados - mídia - id = " {{ section.id }} - {{ featured_media.id }} "
 > 
{ %- atribuir media_position = 1 -% }
 { % renderizar 'miniatura do produto' ,
 mídia : destaque_media ,
 media_count : media_count ,
 posição : posição_mídia ,
 desktop_layout : seção. configurações . galeria_layout , 
mobile_layout : seção. configurações . miniaturas_móveis ,
 laço : seção. configurações . ativar_video_looping ,
 modal_id : seção. eu ia ,
 xr_button : verdadeiro ,
 largura_mídia : largura_mídia ,
 media_fit : seção. configurações . media_fit , 
constrain_to_viewport : seção. configurações . restringir_to_viewport ,
 carga_preguiçosa : falso
 % }
 </ li >
 { %- fim se -% }
 { %- para mídia no produto. meios de comunicação -% } 
{ %- a menos que mídia. id == produto. selecionado_ou_primeira_variável_disponível . destaque_media . eu ia -% }
 < li
 id = "Slide- {{ section.id }} - {{ media.id }} {{ id_append }} " 
class = "product__media-item grid__item slider__slide {% if single_media_visible %} product__media-item--single {% endif %} {% if product.selected_or_first_available_variant.featured_media == null and forloop.index == 1 %} está ativo {% endif %} {% if media.media_type != 'image' %} product__media-item--full {% endif %} {% if section.settings.hide_variants and variant_images contains media.src %} product__media-item--variant {% endif %} " 
dados - mídia - id = " {{ section.id }} - {{ media.id }} "
 >
 { %- líquido
 atribuir media_position = media_position | padrão : 0 | mais : 1
 atribuir preguiçoso_load = falso 
se posição_mídia > 1
 atribuir preguiçoso_load = verdadeiro
 fim se
 -% }
 { % renderizar 'miniatura do produto' ,
 mídia : mídia ,
 media_count : media_count ,
 posição : posição_mídia , 
desktop_layout : seção. configurações . galeria_layout ,
 mobile_layout : seção. configurações . miniaturas_móveis ,
 laço : seção. configurações . ativar_video_looping ,
 modal_id : seção. eu ia ,
 xr_button : verdadeiro , 
largura_mídia : largura_mídia ,
 media_fit : seção. configurações . media_fit ,
 constrain_to_viewport : seção. configurações . restringir_to_viewport ,
 carga_preguiçosa : carga_preguiçosa
 % }
 </ li >
 { %- sem fim -% } 
{ %- fim para -% }
 </ul> _
 { %- a menos que seja_duplicado -% }
 < div class = "botões deslizantes no-js-hidden quick-add-hidden {% if hide_mobile_slider %} small-hide {% endif %} " >
 < botão
 tipo = "botão" 
class = "botão deslizante botão deslizante--anterior"
 nome = "anterior"
 aria - label = " {{ 'general.slider.previous_slide' | t }} "
 >
 { % renderizar 'ícone-caret' % }
 </ botão > 
< div class = "legenda do contador deslizante" >
 < span class = "slider-counter--current" > 1 </ span >
 < span aria - oculto = "true" > / </ span > 
< span class = "visualmente oculto" > { { 'general.slider.of' | t } } </ span > 
< span class = "slider-counter--total" > { { media_count } } </ span >
 </div> _ _
 < botão
 tipo = "botão"
 class = "botão deslizante botão deslizante--próximo" 
nome = "próximo"
 aria - label = " {{ 'general.slider.next_slide' | t }} "
 >
 { % renderizar 'ícone-caret' % }
 </ botão >
 </div> _ _
 { %- sem fim -% } 
</ controle deslizante - componente >
 { %- se primeiro_3d_model -% }
 < botão
 class = "botão botão - produto de largura total__xr-button"
 tipo = "botão"
 aria - label = " {{ 'products.product.xr_button_label' | t }} "
 dados - shopify - xr 
dados - shopify - model3d - id = " {{ first_3d_model.id }} "
 dados - shopify - title = " {{ product.title | escape }} "
 dados - shopify - xr - oculto
 >
 { % renderizar 'icon-3d-model' % } 
{ { 'produtos.produto.xr_button' | } }
 </ botão >
 { %- fim se -% }
 { %- se media_count > 1
 e seção. configurações . gallery_layout contém 'miniatura' 
ou seção. configurações . mobile_thumbnails == 'mostrar'
 -% }
 < miniatura - controle deslizante
 id = "GalleryThumbnails- {{ section.id }} {{ id_append }} " 
class = "thumbnail-slider slider-mobile-gutter quick-add-hidden {% unless section.settings.gallery_layout contains 'thumbnail' %} médio-ocultar grande-para cima-ocultar {% endunless %} {% if section.settings.mobile_thumbnails != 'show' %} small-hide {% endif %} {% if media_count <= 3 %} miniatura-slider--no-slide {% endif %} "
 >
 < botão
 tipo = "botão" 
class = "botão deslizante botão de miniatura botão deslizante--anterior {% if media_count <= 3 %} small-hide {% endif %} {% if media_count <= 4 %} middle-hide large-up-hide {% endif %} "
 nome = "anterior"
 aria - label = " {{ 'general.slider.previous_slide' | t }} "
 aria -controls = "GalleryThumbnails- {{ section.id }} " 
dados - etapa = "3"
 >
 < svg class = "icon" viewBox = "0 0 15 15" >
 < classe de caminho = "st0" d = "M1.17,0.78l12.97,6.05c0.14,0.07,0.15,0.26,0.01,0.33L1.08,14.21c-0.2,0.11-0.4-0.13-0.26- 0,29l4,46-6,78
 c0.07-0.08,0,06-0,19-0,01-0,26l-4,34-5,8C0,77,0,94,0,96,0,69,1,17,0,78z" </ caminho > 
</svg> _
 </ botão >
 < ul
 id = "Slider-Thumbnails- {{ section.id }} {{ id_append }} "
 class = "lista de miniaturas controle deslizante sem estilo - celular {% if section.settings.gallery_layout == 'thumbnail_slider' %} controle deslizante - tablet-up {% endif %} "
 >
 { %- tamanhos de captura -% } 
( largura mínima : { { configurações.largura_da_página } } px ) calc ( ( { { configurações.largura_da_página | menos : 100 | vezes : largura_da_mídia | redondo } } -4rem ) / 4 ) , 
( largura mínima : 990px ) calc ( ( { { media_width | vezes : 100 } } vw - 4rem ) / 4 ) , 
( largura mínima : 750px ) calc ( ( 100vw - 15rem ) / 8 ) ,
 calcular ( ( 100vw - 8rem ) / 3 )
 { %- captura final -% }
 
{ %- se destaque_media != nulo -% }
 { %- líquido
 capturar media_index
 se destaque_media. media_type == 'modelo'
 incrementar model_index
 elsif destaque_media. media_type == 'vídeo' ou feature_media. media_type == 'external_video' 
incrementar video_index
 elsif destaque_media. media_type == 'imagem'
 incrementar índice_de_imagem
 fim se
 captura final
 atribuir media_index = media_index | mais : 1
 -% }
 < li
 id = "Miniaturas de slides- {{ section.id }} -0 {{ id_append }} " 
class = "thumbnail-list__item slider__slide {% if section.settings.hide_variants and variant_images contains featured_media.src %} thumbnail-list_item--variant {% endif %} "
 dados - alvo = " {{ section.id }} - {{ featured_media.id }} "
 dados - mídia - posição = " {{ media_index }} "
 > 
{ %- capturar miniatura_id -% }
 Miniatura - { { seção. id } } - 0 { { id_append } }
 { %- captura final -% }
 < botão 
class = "thumbnail global-media-settings global-media-settings--no-shadow"
 aria - label = " {%- if featured_media.media_type == 'image' -%} {{ 'products.product.media.load_image' | t: index: media_index }} {%- elsif featured_media.media_type == 'model' -%} {{ 'products.product.media.load_model' | t: index: media_index }} {%- elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video' -%} {{ 'products.product.media.load_video' | t: index: media_index }} {%- endif -%} " 
aria - atual = "verdadeiro"
 aria -controls = "GalleryViewer- {{ section.id }} {{ id_append }} "
 ária - descrita por = " {{ thumbnail_id }} "
 >
 { {
 destaque_media. imagem_visualização
 | URL_da_imagem : largura : 416 
| imagem_tag :
 carregando : 'preguiçoso' ,
 tamanhos : tamanhos ,
 larguras : '54, 74, 104, 162, 208, 324, 416' ,
 id : miniatura_id ,
 alt : destaque_media. alternativo
 | escapar
 } }
 </ botão > 
</ li >
 { %- fim se -% }
 { %- para mídia no produto. meios de comunicação -% }
 { %- a menos que mídia. id == produto. selecionado_ou_primeira_variável_disponível . destaque_media . eu ia -% } 
{ %- líquido
 capturar media_index
 se mídia. media_type == 'modelo'
 incrementar model_index
 mídia Elif. media_type == 'vídeo' ou mídia. media_type == 'external_video'
 incrementar video_index
 mídia Elif. media_type == 'imagem'
 incrementar índice_de_imagem
 fim se
 captura final 
atribuir media_index = media_index | mais : 1
 -% }
 < li
 id = "Miniaturas de slides- {{ section.id }} - {{ forloop.index }} {{ id_append }} "
 class = "thumbnail-list__item slider__slide {% if section.settings.hide_variants and variant_images contains media.src %} thumbnail-list_item--variant {% endif %} " 
dados - alvo = " {{ section.id }} - {{ media.id }} "
 dados - mídia - posição = " {{ media_index }} "
 >
 { %- se mídia. media_type == 'modelo' -% } 
< span class = "thumbnail__badge" ária - oculto = "true" >
 { %- renderizar 'icon-3d-model' -% }
 </span> _ 
{ %- elsif mídia. media_type == 'vídeo' ou mídia. media_type == 'external_video' -% }
 < span class = "thumbnail__badge" ária - oculto = "true" > 
{ %- renderizar 'reprodução de ícone' -% }
 </span> _
 { %- fim se -% }
 { %- capturar miniatura_id -% } 
Miniatura - { { seção. id } } - { { forloop. índice } } { { id_append } }
 { %- captura final -% }
 < botão 
class = "thumbnail global-media-settings global-media-settings--no-shadow"
 aria - label = " {%- if media.media_type == 'image' -%} {{ 'products.product.media.load_image' | t: index: media_index }} {%- elsif media.media_type == 'model' -%} {{ 'products.product.media.load_model' | t: index: media_index }} {%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%} {{ 'products.product.media.load_video' | t: index: media_index }} {%- endif -%} " 
{ % se mídia == produto. selecionado_ou_primeira_variável_disponível . destaque_media
 ou produto. selecionado_ou_primeira_variável_disponível . destaque_media == nulo
 e forloop. índice == 1
 % }
 aria - atual = "verdadeiro" 
{ % fim se % }
 aria -controls = "GalleryViewer- {{ section.id }} {{ id_append }} "
 ária - descrita por = " {{ thumbnail_id }} "
 >
 { {
 meios de comunicação. imagem_visualização 
| URL_da_imagem : largura : 416
 | imagem_tag :
 carregando : 'preguiçoso' ,
 tamanhos : tamanhos ,
 larguras : '54, 74, 104, 162, 208, 324, 416' ,
 id : miniatura_id ,
 alt : mídia. alternativo
 | escapar 
} }
 </ botão >
 </ li >
 { %- sem fim -% }
 { %- fim para -% }
 </ul> _
 < botão
 tipo = "botão" 
class = "botão deslizante botão de miniatura botão deslizante--próximo {% if media_count <= 3 %} small-hide {% endif %} {% if media_count <= 4 %} middle-hide large-up-hide {% endif %} "
 nome = "próximo"
 aria - label = " {{ 'general.slider.next_slide' | t }} "
 aria -controls = "GalleryThumbnails- {{ section.id }} " 
dados - etapa = "3"
 >
 < svg class = "icon" viewBox = "0 0 15 15" >
 < classe de caminho = "st0" d = "M1.17,0.78l12.97,6.05c0.14,0.07,0.15,0.26,0.01,0.33L1.08,14.21c-0.2,0.11-0.4-0.13-0.26- 0,29l4,46-6,78
 c0.07-0.08,0,06-0,19-0,01-0,26l-4,34-5,8C0,77,0,94,0,96,0,69,1,17,0,78z" </ caminho > 
</svg> _
 </ botão >
 </ miniatura - controle deslizante >
 { %- fim se -% }
 </ mídia - galeria >

 . produtos , 
. produto__título > * {
 margem : 0 ;
 }
 . produtos . grade {
 lacuna : 0 ;
 }
 . produto -- não - mídia {
 largura máxima : 57rem ; 
margem : 0 automático ;
 }
 . produto__media - wrapper ,
 . produto -form__input . formulário__rótulo ,
 . produto - sem mídia. produto__info - wrapper {
 preenchimento - esquerda : 0 ;
 } 
@media screen e ( largura mínima : 750px ) {
 controle deslizante - componente. controle deslizante - celular - medianiz {
 exibição : flexível ;
 }
 . product__column - fixo {
 exibição : bloco ;
 posição : pegajosa ;
 superior : 3rem ; 
índice z : 2 ;
 }
 . produto - miniatura. miniatura - lista ,
 . produto__mídia - lista {
 padding - right : var ( -media - shadow - horizontal - offset ) ;
 } 
. produto__info - wrapper {
 preenchimento : 0 0 0 5rem ;
 }
 . product__info - wrapper -- extra - preenchimento {
 preenchimento : 0 0 0 8rem ;
 } 
. produto - certo. produto__info - wrapper {
 preenchimento : 0 5rem 0 0 ;
 }
 . produto - certo. product__info - wrapper -- extra - preenchimento {
 preenchimento : 0 8rem 0 0 ; 
}
 . produto - certo. produto__mídia - lista {
 margem inferior : 2rem ;
 }
 . produto__media -contêiner . controle deslizante - botões , 
. produto - miniatura. product__media - item : not ( .is - active ) ,
 . produto - miniatura_slider. product__media - item : not ( .is - active ) ,
 . produto - mídia - modal__content 
> . produto__media - item - variante. produto__media - item - variante ,
 . product__modal - opener : não ( .produto__modal - opener --image ) ,
 . produto - empilhado. miniatura - lista , 
. produto__media - wrapper. controle deslizante - móvel - calha . controle deslizante - botão ,
 . produto - mídia - contêiner
 . product__modal - opener : not ( .produto__modal - opener --image ) {
 Mostrar nenhum ;
 } 
. produto__info -contêiner {
 largura máxima : 60rem ;
 }
 . produto__info -contêiner . preço - à venda. preço - item -- normal {
 tamanho da fonte : 1,6rem ;
 } 
. product__info - container > *: primeiro - filho {
 margem - topo : 0 ;
 }
 . produto - miniatura. produto__media - lista ,
 . produto - miniatura_slider. produto__mídia - lista { 
preenchimento - inferior : calc (
 var ( -media - shadow - vertical - offset ) * var ( -media - shadow - visible )
 ) ;
 }
 . produto__mídia - lista { 
preenchimento - direita : calc (
 var ( -media - shadow - horizontal - offset ) * var ( -media - shadow - visible )
 ) ;
 } 
. produto - mídia - modal__content > . product__media - item - variante : primeiro filho ,
 . product - media - modal__content > *: not ( .active ) , 
. produto__media - lista. adiado - mídia {
 exibição : bloco ;
 }
 . grid__item . produto__media - item - completo ,
 . produto - mídia - modal__content > *, 
. produto__media - item : primeiro - filho {
 largura : 100 %;
 }
 . produto - colunas 
. produto__media - item : não ( .produto__media - item --single ) : não ( : único - filho ) { 
largura máxima : calc ( 50 % -var ( -grid - desktop - horizontal - espaçamento ) / 2 ) ;
 }
 . produto - grande. produto - colunas 
. produto__media - item -- completo
 . adiado - media__poster - botão {
 altura : 5rem ;
 largura : 5rem ;
 }
 . produto - médio. produto - colunas
 . produto__media - item -- completo 
. adiado - media__poster - botão {
 altura : 4,2rem ;
 largura : 4,2rem ;
 }
 . produto - médio. produto - colunas
 . produto__media - item -- completo
 . adiado - media__poster - botão
 . ícone { 
largura : 1,8rem ;
 altura : 1,8rem ;
 }
 . produto - pequeno. produto - colunas
 . produto__media - item -- completo
 . adiado - media__poster - botão {
 altura : 3,6rem ;
 largura : 3,6rem ;
 } 
. produto - pequeno. produto - colunas
 . produto__media - item -- completo
 . adiado - media__poster - botão
 . ícone {
 largura : 1,6rem ;
 altura : 1,6rem ;
 }
 . produto - mídia - modal__content { 
preenchimento - inferior : 2rem ;
 }
 . produto - mídia - modal__content {
 preenchimento : 2rem 11rem ;
 }
 . produto - mídia - modal__content > * + * {
 margem - topo : 2rem ;
 } 
. produto - mídia - modal__toggle {
 direita : 5rem ;
 superior : 2,2rem ;
 }
 . produto - pop-up - modal__content {
 preenchimento - direita : 1,5rem ;
 margem - topo : 10rem ;
 largura : 70 %; 
preenchimento : 0 3rem ;
 }
 . produto - mídia - modal__dialog . global - mídia - configurações -- no - shadow {
 estouro : visível ! importante ;
 }
 . miniatura - lista {
 exibição : grade ; 
grid - template - colunas : repita ( 4 , 1fr ) ;
 }
 . produto - miniatura_slider. miniatura - controle deslizante {
 exibição : flexível ;
 alinhar - itens : centro ;
 } 
. miniatura - controle deslizante . miniatura - lista. controle deslizante -- tablet - para cima {
 exibição : flexível ;
 flexível : 1 ;
 scroll - preenchimento - esquerda : 0,5rem ;
 } 
. produto - miniatura_slider. controle deslizante - móvel - calha . controle deslizante - botão {
 exibição : flexível ;
 }
 . produto : não ( .produto - pequeno ) . miniatura__badge {
 altura : 3rem ;
 largura : 3rem ; 
}
 . produto : não ( .produto - pequeno ) . miniatura__badge . ícone {
 largura : 1,2rem ;
 altura : 1,2rem ;
 } 
. produto : não ( .produto - pequeno ) . miniatura__badge . ícone - 3d - modelo {
 largura : 1,4rem ;
 altura : 1,4rem ;
 }
 . produto - mídia - contêiner { 
máx - largura : 100 %;
 }
 . produto - media - container : não ( .media - type - image ) {
 --proporção : var ( -proporção ) ;
 } 
. produto - mídia - recipiente. restringir - altura {
 --deslocamento da janela de visualização : 170px ;
 --constrained - min - height : 500px ;
 }
 . produto - mídia - recipiente. mídia - ajuste - capa , 
. produto - mídia - recipiente. mídia - fit - capa. produto__modal - abridor ,
 . produto - mídia - recipiente. mídia - fit - capa. meios de comunicação ,
 . controle deslizante - celular - medianiz { 
altura : 100 %;
 }
 . produto - mídia - recipiente. mídia - fit - capa. adiado - media__poster img {
 ajuste ao objeto : capa ;
 largura : 100 %;
 } 
. produto - miniatura. produto__media - galeria ,
 . produto - miniatura_slider. produto__media - galeria ,
 . produto - empilhado. product__info -contêiner -- pegajoso {
 exibição : flexível ;
 posição : pegajosa ;
 superior : 3rem ; 
índice z : 2 ;
 lacuna : braçadeira ( 1rem , 3vw , 3rem ) ;
 }
 . produto__info - wrapper {
 preenchimento - esquerda : 5rem ;
 }
 . product__info - wrapper -- extra - preenchimento { 
preenchimento - esquerda : 8rem ;
 }
 . produto - miniatura. produto__media - lista ,
 . produto - miniatura_slider. produto__mídia - lista { 
padding - bottom : var ( -media - shadow - vertical - offset ) ;
 }
 . produto - miniatura_slider. miniatura - controle deslizante {
 exibição : flexível ;
 flex - direction : coluna ;
 } 
. miniatura - controle deslizante . miniatura - lista. controle deslizante -- tablet - para cima {
 exibição : flexível ;
 flex - direction : coluna ;
 flexível : 1 ;
 alinhar - itens : centro ;
 }
 } 
@media screen e ( largura mínima : 990px ) {
 . produto - grande : não ( . produto - sem mídia ) . produto__media - wrapper {
 máx. - largura : 65 %; 
largura : calc ( 65 % -var ( -grid - desktop - horizontal - espaçamento ) / 2 ) ;
 } 
. produto - grande : não ( . produto - sem mídia ) . produto__info - wrapper {
 preenchimento : 0 0 0 4rem ;
 máx. - largura : 35 %; 
largura : calc ( 35 % -var ( -grid - desktop - horizontal - espaçamento ) / 2 ) ;
 } 
. produto - grande : não ( . produto - sem mídia ) . produto - certo
 . produto__info - wrapper {
 preenchimento : 0 4rem 0 0 ;
 } 
. produto - meio : não ( .produto - sem mídia ) . produto__media - wrapper ,
 . produto - pequeno : não ( .produto - sem mídia ) . produto__info - invólucro , 
. produto - meio : não ( .produto - sem mídia ) . produto__media - wrapper ,
 . produto - pequeno : não ( .produto - sem mídia ) . produto__info - wrapper { 
máx. - largura : 55 %;
 largura : calc ( 55 % -var ( -grid - desktop - horizontal - espaçamento ) / 2 ) ;
 } 
. produto - meio : não ( .produto - sem mídia ) . produto__info - invólucro ,
 . produto - pequeno : não ( .produto - sem mídia ) . produto__media - wrapper , 
. produto - meio : não ( .produto - sem mídia ) . produto__info - invólucro ,
 . produto - pequeno : não ( .produto - sem mídia ) . produto__media - wrapper { 
máx. - largura : 45 %;
 largura : calc ( 45 % -var ( -grid - desktop - horizontal - espaçamento ) / 2 ) ;
 } 
. produto - empilhado. produto__mídia - item {
 largura máxima : calc ( 50 % -var ( -grid - desktop - horizontal - espaçamento ) / 2 ) ;
 } 
. produto : não ( . produto - colunas )
 . produto__mídia - lista
 . produto__media - item : primeiro - filho ,
 . produto : não ( . produto - colunas )
 . produto__mídia - lista 
. produto__media - item -- completo {
 largura : 100 %;
 máx - largura : 100 %;
 }
 . produto__modal - abridor. produto__media - ícone {
 opacidade : 0 ;
 } 
. product__modal -opener : hover. produto__media - ícone ,
 . product__modal - opener : foco. produto__media - ícone ,
 . product__modal -opener : hover. produto__media - ícone , 
. product__modal - opener : foco. produto__media - ícone {
 opacidade : 1 ;
 }
 . produto - mídia - modal__content {
 preenchimento : 2rem 11rem ;
 } 
. produto - mídia - modal__content > * + * {
 margem - topo : 1,5rem ;
 }
 . produto - mídia - modal__content {
 preenchimento inferior : 1,5rem ;
 } 
. produto - mídia - modal__toggle {
 direita : 5rem ;
 }
 . miniatura - lista {
 grid - template - colunas : repita ( 4 , 1fr ) ;
 } 
. produto - médio. miniatura - lista {
 grid - template - colunas : repita ( 5 , 1fr ) ;
 }
 . produto - grande. miniatura - lista { 
grid - template - colunas : repita ( 6 , 1fr ) ;
 }
 . produto - grande : não ( . produto - sem mídia ) . produto__info - wrapper {
 preenchimento - esquerda : 4rem ; 
máx. - largura : 35 %;
 largura : calc ( 35 % -var ( -grid - desktop - horizontal - espaçamento ) / 2 ) ;
 }
 . miniatura - lista { 
margem - esquerda : 0 ;
 grid - template - colunas : repita ( 4 , 1fr ) ;
 }
 }
 . shopify - pagamento - button__button {
 família de fontes : herdar ; 
altura mínima : 4,6rem ;
 }
 . shopify - pagamento - botão__button [ role = "botão" ] . focado , 
. não - js. shopify - pagamento - button__button [ role = "botão" ] : foco ,
 . shopify - pagamento - botão__button [ role = "botão" ] . focado , 
. não - js. shopify - pagamento - botão__button [ role = "botão" ] : foco {
 contorno : 0,2rem sólido rgba ( var ( -color - foreground ) , 0,5 ) ! importante ; 
deslocamento do contorno : 0,3rem ;
 box - shadow : 0 0 0 0.1rem rgba ( var ( -botão colorido ) , var ( -botão alfa - borda ) ) , 
0 0 0 0,3rem rgb ( var ( -- cor - fundo ) ) ,
 0 0 0,5rem 0,4rem rgba ( var ( -cor - foreground ) , 0,3 ) ! importante ;
 } 
. shopify - pagamento - botão__button [ role = "botão" ] : foco : não ( : foco - visível ) {
 contorno : 0 ;
 box - shadow : nenhum ! importante ;
 } 
. shopify - pagamento - botão__button [ role = "botão" ] : foco - visível {
 contorno : 0,2rem sólido rgba ( var ( -color - foreground ) , 0,5 ) ! importante ; 
box - shadow : 0 0 0 0.1rem rgba ( var ( -botão colorido ) , var ( -botão alfa - borda ) ) , 
0 0 0 0,3rem rgb ( var ( -- cor - fundo ) ) ,
 0 0 0,5rem 0,4rem rgba ( var ( -cor - foreground ) , 0,3 ) ! importante ;
 } 
. shopify - pagamento - button__button -- sem marca {
 cor de fundo : rgba ( var ( -botão de cor ) , var ( -botão alfa - fundo ) ) ; 
cor : rgb ( var ( -cor - botão - texto ) ) ;
 tamanho da fonte : 1,4rem ; 
altura da linha : calc ( 1 + 0.2 / var ( -font - body - scale ) ) ;
 espaçamento entre letras : 0,07rem ;
 } 
. shopify - pagamento - button__button -- sem marca :: seleção {
 cor de fundo : rgba ( var ( -cor - botão - texto ) , 0.3 ) ;
 } 
. shopify -pagamento -botão__button - sem marca : pairar ,
 . shopify -payment - button__button -- sem marca : hover : not ( [ desabilitado ] ) ,
 . shopify -pagamento -botão__button - sem marca : pairar , 
. shopify -payment - button__button -- sem marca : hover : not ( [ desativado ] ) { 
cor de fundo : rgba ( var ( -botão de cor ) , var ( -botão alfa - fundo ) ) ;
 }
 . shopify - pagamento - botão__mais - opções { 
margem : 1,6rem 0 1rem ;
 tamanho da fonte : 1,2rem ;
 altura da linha : calc ( 1 + 0.5 / var ( -font - body - scale ) ) ;
 espaçamento entre letras : 0,05rem ; 
decoração de texto : sublinhado ;
 texto - sublinhado - deslocamento : 0,3rem ;
 }
 . shopify - pagamento - botão__button + . shopify - pagamento - button__button - oculto ,
 . produto - formulário__input 
entrada [ type = "radio" ] : não ( . desativado )
 + rótulo
 > . visualmente - oculto ,
 . produto__título > a ,
 . produtos . preço – esgotado . price__badge - venda , 
. produto__mídia - item. produto__media - item - variante ,
 . product - media - modal__content > *: not ( .active ) ,
 . produto__media - lista. diferido - mídia , 
. thumbnail - list_item – variante : not ( : first - child ) ,
 . product__modal - opener --imagem . produto__media - zoom - nenhum ,
 . produto__media - ícone - nenhum , 
. produto : não ( .produto em destaque ) . produto__view - detalhes ,
 . não - js. destinatário - caixa de seleção ,
 . js . destinatário - campos ,
 . destinatário - formulário 
> input [ type = "checkbox" ] : não ( : verificado ,: desabilitado )
 ~ . destinatário - campos ,
 . destinatário - e-mail - rótulo ,
 . shopify - pagamento - button__button - oculto , 
. produto -form__submit [ aria -disable = "true" ] + . shopify - botão de pagamento ,
 . produto - form__submit [ desabilitado ] + . shopify - botão de pagamento , 
. product - media - modal__content > *: not ( .active ) ,
 . produto__media - lista. diferido - mídia ,
 . produto__media - lista. produto__media - alternar ,
 . celular - controle deslizante { 
Mostrar nenhum ;
 }
 . produto - forma ,
 variante - rádios ,
 variante - seleciona ,
 . product__media - item - variante : primeiro filho ,
 . produto__inventário . visibilidade - oculto : vazio ,
 variante - rádios , 
variante - seleciona {
 exibição : bloco ;
 }
 . produto - form__error - message - wrapper : not ( [ oculto ] ) {
 exibição : flexível ;
 alinhar - itens : flex - start ; 
tamanho da fonte : 1,2rem ;
 margem inferior : 1,5rem ;
 }
 . produto - form__error - mensagem - wrapper svg {
 flex - encolher : 0 ;
 largura : 1,2rem ;
 altura : 1,2rem ;
 margem - direita : 0,7rem ; 
margem superior : 0,5rem ;
 }
 . produto - formulário__input {
 flexível : 0 0 100 %;
 preenchimento : 0 ;
 margem : 0 0 1,2rem ;
 largura máxima : 44rem ; 
min - largura : ajuste - conteúdo ;
 borda : nenhuma ;
 }
 . produto -form__input --dropdown {
 margem inferior : 1,6rem ;
 }
 conjunto de campos. produto -form__input . formulário__rótulo {
 margem inferior : 0,2rem ;
 } 
. produto - form__input entrada [ tipo = "rádio" ] {
 clipe : rect ( 0 , 0 , 0 , 0 ) ;
 estouro : oculto ;
 posição : absoluta ;
 altura : 1px ; 
largura : 1px ;
 }
 . produto - form__input entrada [ tipo = "rádio" ] + rótulo {
 borda : var ( -variant - pils - border - width ) sólido 
rgba ( var ( -color - foreground ) , var ( -variant - pils - border - opacity ) ) ;
 cor de fundo : rgb ( var ( -color - fundo ) ) ; 
cor : rgba ( var ( -color - foreground ) ) ;
 border - radius : var ( -variant - pils - radius ) ;
 cor : rgb ( var ( -color - foreground ) ) ; 
display : bloco embutido ;
 margem : 0,7rem 0,5rem 0,2rem 0 ;
 preenchimento : 1rem 2rem ;
 tamanho da fonte : 1,4rem ;
 espaçamento entre letras : 0,1rem ;
 altura da linha : 1 ;
 alinhamento de texto : centro ; 
transição : border var ( -duration - short ) facilidade ;
 cursor : ponteiro ;
 posição : relativa ;
 }
 . produto - form__input input [ type = "radio" ] + rótulo : antes de { 
contente : "" ;
 posição : absoluta ;
 topo : calc ( var ( -variant - pils - border - width ) * - 1 ) ; 
direita : calc ( var ( -variant - pils - border - width ) * - 1 ) ; 
parte inferior : calc ( var ( -variant - pils - border - width ) * - 1 ) ; 
esquerda : calc ( var ( -variant - pils - border - width ) * - 1 ) ;
 z - índice : -1 ; 
border - radius : var ( -variant - pils - radius ) ;
 box - shadow : var ( -variant - pils - shadow - horizontal - offset ) 
var ( -variant - pils - shadow - vertical - offset )
 var ( -variante - pílulas - sombra - desfoque - raio ) 
rgba ( var ( -color - shadow ) , var ( -variant - pils - shadow - opacity ) ) ;
 }
 . produto - form__input input [ type = "radio" ] + rótulo : hover { 
cor da borda : rgb ( var ( -color - foreground ) ) ;
 }
 . produto - form__input input [ type = "radio" ] : verificado + rótulo { 
cor de fundo : rgb ( var ( -color - foreground ) ) ;
 cor : rgb ( var ( -color - fundo ) ) ;
 }
 @media screen e ( cores forçadas : ativas ) { 
. produto - form__input input [ type = "radio" ] : verificado + rótulo {
 decoração de texto : sublinhado ;
 }
 . produto -form__submit [ aria -disable = "true" ] {
 cor : Janela ; 
}
 . destinatário - campos > hr {
 border - top : 0,1rem rgb sólido ( var ( -color - background ) ) ;
 }
 . destinatário - caixa de seleção > svg {
 cor de fundo : herdar ; 
borda : 0,1rem rgb sólido ( var ( -color - background ) ) ;
 }
 . destinatário - formulário > entrada [ type = "checkbox" ] : verificado + rótulo. ícone - marca de seleção {
 borda : nenhuma ; 
}
 }
 . produto - form__input input [ type = "radio" ] : verificado + rótulo :: seleção {
 cor de fundo : rgba ( var ( -color - fundo ) , 0.3 ) ; 
}
 . produto - form__input input [ type = "radio" ] : desativado + rótulo ,
 . produto - form__input entrada [ type = "radio" ] . desativado + rótulo { 
cor da borda : rgba ( var ( -color - foreground ) , 0.1 ) ;
 cor : rgba ( var ( -color - foreground ) , 0,6 ) ; 
decoração de texto : line - through ;
 }
 . produto - form__input entrada [ type = "radio" ] . desativado : verificado + rótulo , 
. produto - form__input input [ type = "radio" ] : desabilitado : verificado + rótulo {
 cor : rgba ( var ( -cor - fundo ) , 0,6 ) ;
 } 
. produto - form__input input [ type = "radio" ] : foco - visível + rótulo ,
 . produto - form__input entrada [ type = "radio" ] . focado + rótulo , 
. não - js. shopify - pagamento - button__button [ role = "button" ] : foco + rótulo ,
 . produto - form__input entrada [ type = "radio" ] . focado + rótulo , 
. não - js. shopify - pagamento - botão__button [ role = "botão" ] : foco + rótulo {
 box - shadow : 0 0 0 0,3rem rgb ( var ( -color - background ) ) , 
0 0 0 0,5rem rgba ( var ( -cor - foreground ) , 0,55 ) ;
 }
 . não - js
 . produto - formulário__input 
input [ type = "radio" ] : foco : não ( : foco - visível )
 + rótulo {
 box - shadow : nenhum ;
 }
 . produto -form__input . selecione {
 largura máxima : 25rem ;
 } 
. produto - formulário__submit {
 margem inferior : 1rem ;
 }
 . não - js. produto - formulário__submit. botão -- secundário { 
--botão de cor : var ( -color - base - accent - 1 ) ;
 --color - botão - texto : var ( -color - base - solid - botão - rótulos ) ; 
--alfa - botão - fundo : 1 ;
 }
 . produto - form__submit [ aria - desativado = "true" ]
 + . shopify - pagamento - botão 
. shopify -pagamento -botão__button [ desativado ] ,
 . produto - form__submit [ desabilitado ]
 + . shopify - pagamento - botão
 . shopify - pagamento - button__button [ desativado ] {
 cursor : não permitido ; 
opacidade : 0,5 ;
 }
 . shopify - pagamento - botão__mais - opções {
 cor : rgb ( var ( -color - foreground ) ) ;
 }
 . shopify - pagamento - button__button { 
tamanho da fonte : 1,5rem ;
 espaçamento entre letras : 0,1rem ;
 }
 . produto__info -contêiner > * + * {
 margem : 1,5rem 0 ;
 }
 . product__info - iframe do contêiner , 
. produto - no - media noscript. produto - form__input ,
 . produto - sem mídia. botão compartilhar ,
 . produto - pop-up - modal__content img ,
 . produto - no - media noscript. produto - form__input , 
. produto - sem mídia. compartilhar - botão {
 máx - largura : 100 %;
 }
 . produto__info -contêiner . produto - forma ,
 . produto__info -contêiner . Descrição do produto , 
. produto__info -contêiner . ícone - com - texto ,
 . produto__info -contêiner . produto - forma ,
 . produto__info -contêiner . Descrição do produto {
 margem : 2,5rem 0 ;
 }
 . produto__texto { 
margem - inferior : 0 ;
 }
 a. produto__texto {
 exibição : bloco ;
 decoração de texto : nenhuma ;
 cor : rgba ( var ( -color - foreground ) , 0,75 ) ;
 } 
. produto__texto . legenda - com - letra - espaçamento {
 transformação de texto : maiúscula ;
 }
 . produto__título {
 quebra de palavra : quebra de palavra ;
 margem inferior : 1,5rem ;
 } 
. produto__título + . produto__texto . legenda - com - letra - espaçamento {
 margem - topo : - 1,5rem ;
 }
 . produto__texto . legenda - com - espaçamento entre letras + . produto__título { 
margem - topo : 0 ;
 }
 . produto__acordeão . acordeão__content {
 preenchimento : 0 1rem ;
 }
 . produtos . preço . distintivo ,
 . produtos . preço__container {
 margem inferior : 0,5rem ;
 } 
. produtos . preço dl {
 margem superior : 0,5rem ;
 margem inferior : 0,5rem ;
 }
 . produtos . preço – esgotado . price__badge - esgotado {
 fundo : transparente ; 
cor : rgb ( var ( -color - base - text ) ) ;
 cor da borda : transparente ;
 }
 . produto__descrição - título {
 peso da fonte : 600 ;
 } 
. produto - sem mídia. produto__título ,
 . produto - sem mídia. produto__texto ,
 . produto - no - media noscript. produto - form__input ,
 . produto - sem mídia. produto__imposto , 
. produto - sem mídia. produto__sku ,
 . produto - sem mídia shopify - condições de pagamento ,
 . produto - sem mídia. preço ,
 . produto - sem mídia. produto__título , 
. produto - sem mídia. produto__texto ,
 . produto - no - media noscript. produto - form__input ,
 . produto - sem mídia. produto__imposto {
 alinhamento de texto : centro ;
 } 
. produto - sem mídia. produto__media - wrapper ,
 . produto - sem mídia. produto__info - wrapper {
 preenchimento : 0 ;
 }
 . produto__imposto {
 margem - topo : - 1,4rem ;
 } 
. produto - não - conjunto de campos de mídia. produto - form__input ,
 . produto - sem mídia. produto - forma__quantidade ,
 . produto - sem mídia. produto - form__input - menu suspenso , 
. produto - sem mídia. botão compartilhar ,
 . produto - sem mídia. produto__view - detalhes ,
 . produto - sem mídia. product__pickup - disponibilidades , 
. produto - sem mídia. produto - forma ,
 . produto - não - conjunto de campos de mídia. produto - form__input ,
 . produto - sem mídia. produto - forma__quantidade , 
. produto - sem mídia. produto - form__input - menu suspenso ,
 . produto - sem mídia. botão compartilhar ,
 . produto - sem mídia. produto__view - detalhes , 
. produto - sem mídia. product__pickup - disponibilidades ,
 . produto - sem mídia. produto - formulário {
 exibição : flexível ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 alinhamento de texto : centro ; 
}
 . produto - sem mídia. produto - formulário {
 flex - direction : coluna ;
 }
 . produto - sem mídia. produto - formulário > . forma {
 largura máxima : 30rem ; 
largura : 100 %;
 }
 . produto - sem mídia. produto - forma__quantidade ,
 . produto - sem mídia. produto - form__input - menu suspenso ,
 . produto - sem mídia. produto - forma__quantidade , 
. produto - sem mídia. produto -form__input --dropdown {
 flex - direction : coluna ;
 máx - largura : 100 %;
 }
 . produto - forma__quantidade. formulário__rótulo {
 margem inferior : 0,6rem ;
 } 
. produto -form__quantidade -top . formulário__rótulo {
 margem inferior : 1,2rem ;
 }
 . produto - não - conjunto de campos de mídia. produto - formulário__input {
 flex - wrap : wrap ;
 margem : 0 automático 1,2rem ;
 } 
. produto -form__buttons {
 largura máxima : 44rem ;
 }
 . produto - sem mídia. product__info - contêiner > modal - abridor {
 exibição : bloco ;
 alinhamento de texto : centro ;
 } 
. produto - sem mídia. produto - pop-up - modal__button {
 preenchimento - direita : 0 ;
 }
 . product__media - lista de vídeo { 
raio - da - borda : calc ( var ( -raio - media ) -var ( -largura - borda - media ) ) ;
 }
 @media screen e ( largura máxima : 749px ) {
 . produto__mídia - lista { 
margem - esquerda : - 2,5rem ;
 margem inferior : 3rem ;
 largura : calc ( 100 % + 4rem ) ;
 } 
. product__media -wrapper slider - component : not ( .miniatura - slider - no - slide ) ,
 . product__media -wrapper main - slider : not ( .miniatura - slider --no - slide ) { 
margem - esquerda : - 1,5rem ;
 margem - direita : - 1,5rem ;
 }
 . controle deslizante . produto__media - lista ::- webkit - barra de rolagem {
 altura : 0,2rem ;
 largura : 0,2rem ;
 } 
. produto__media - lista ::- webkit - barra de rolagem - polegar {
 cor de fundo : rgb ( var ( -color - foreground ) ) ;
 }
 . produto__media - lista ::- webkit - barra de rolagem - faixa { 
cor de fundo : rgba ( var ( -color - foreground ) , 0.2 ) ;
 }
 . produto__media - lista. produto__mídia - item { 
largura : calc ( 100 % -3rem - var ( -grid - mobile - horizontal - espaçamento ) ) ;
 }
 . produto - colunas móveis . produto__mídia - item { 
largura : calc ( 50 % -1.5rem - var ( -grid - mobile - horizontal - espaçamento ) ) ;
 }
 . produto - miniatura
 . está ativo 
. product__modal - opener : não ( .produto__modal - opener --image ) ,
 . produto - miniatura_slider
 . está ativo
 . product__modal - opener : não ( .produto__modal - opener --image ) , 
miniatura - controle deslizante. vertical - ocultar ,
 . produto - miniatura
 . está ativo
 > . product__modal - opener : não ( .produto__modal - opener --image ) ,
 . produto - miniatura_slider
 . está ativo 
> . product__modal - opener : not ( .produto__modal - opener --image ) {
 Mostrar nenhum ;
 }
 . produto - miniatura. está ativo . diferido - mídia , 
. produto - miniatura_slider. está ativo . diferido - mídia ,
 . produto - miniatura. está ativo . diferido - mídia ,
 . produto - miniatura_slider. está ativo . adiado - mídia { 
exibição : bloco ;
 largura : 100 %;
 }
 . produto - pop-up - tabela modal__content {
 exibição : bloco ;
 max - width : fit - content ;
 estouro -x : automático ;
 espaço em branco : nowrap ; 
margem : 0 ;
 }
 . produto - mídia - modal__dialog . configurações globais de mídia ,
 . produto - mídia - modal__dialog . vídeo de configurações de mídia global , 
. produto - mídia - modal__dialog . global - mídia - configurações modelo - visualizador ,
 . produto - mídia - modal__dialog . global - media - configurações iframe ,
 . produto - mídia - modal__dialog . global - mídia - configurações img , 
. produto - mídia - modal__dialog . configurações globais de mídia ,
 . produto - mídia - modal__dialog . vídeo de configurações de mídia global ,
 . produto - mídia - modal__dialog . global - mídia - configurações modelo - visualizador , 
. produto - mídia - modal__dialog . global - media - configurações iframe ,
 . produto - mídia - modal__dialog . global - mídia - configurações img {
 borda : nenhuma ;
 raio da borda : 0 ;
 } 
. produto - pop-up - modal__content - informações > * {
 máx - altura : 100 %;
 }
 . produto__mídia - item ,
 . miniatura - controle deslizante {
 exibição : flexível ;
 alinhar - itens : centro ; 
}
 . produto__modal - abridor {
 largura : 100 %;
 }
 . miniatura - controle deslizante . miniatura - lista. controle deslizante {
 exibição : flexível ;
 preenchimento : 0,5rem ;
 flexível : 1 ; 
scroll - preenchimento - esquerda : 0,5rem ;
 }
 . miniatura - list__item. slider__slide {
 largura : calc ( 33 % - 0,6rem ) ;
 }
 . product__media - zoom - pairar , 
. produto__media - ícone - pairar ,
 controle deslizante - componente. celular - controle deslizante {
 exibição : flexível ;
 }
 . produto - mídia - recipiente. mídia - ajuste - capa {
 exibição : flexível ;
 alinhar - self : esticar ; 
}
 . produto - mídia - recipiente. mídia - fit - capa. meios de comunicação {
 posição : inicial ;
 }
 . produto__mídia - lista {
 largura : calc ( 100 % + 4rem ) ;
 } 
principal - controle deslizante . celular - ocultar {
 Mostrar nenhum ! importante ;
 }
 . produto__media - lista. produto__mídia - item {
 largura : calc ( 100 % -3rem ) ;
 } 
. produto__media - wrapper {
 preenchimento - inferior : 1rem ;
 }
 . produto__media - item - variante : primeiro - filho {
 preenchimento - direita : 1,5rem ;
 }
 . controle deslizante móvel . miniatura - lista. controle deslizante , 
. miniatura - controle deslizante . miniatura - lista. controle deslizante {
 exibição : flexível ;
 flexível : 1 ;
 scroll - preenchimento - esquerda : 0,5rem ;
 }
 } 
@media screen e ( largura mínima : 750px ) e ( largura máxima : 989px ) {
 . produto__media - lista. produto__media - item : primeiro - filho {
 preenchimento - esquerda : 0 ;
 } 
. produto - miniatura_slider. produto__mídia - lista {
 margem - esquerda : 0 ;
 }
 . produto__media - lista. produto__mídia - item {
 largura : 100 %;
 } 
. produto__media - lista. produto__mídia - item {
 preenchimento : 0 0 0,5rem ;
 largura : 100 %;
 }
 }
 . produto__media - ícone . ícone {
 largura : 1,2rem ;
 altura : 1,4rem ;
 } 
. produto__media - ícone ,
 . miniatura__badge {
 cor de fundo : rgb ( var ( -color - fundo ) ) ;
 borda - raio : 50 %; 
borda : 0,1rem sólido rgba ( var ( -color - foreground ) , 0,1 ) ;
 cor : rgb ( var ( -color - foreground ) ) ;
 exibição : flexível ;
 alinhar - itens : centro ; 
justificar - conteúdo : centro ;
 altura : 3rem ;
 largura : 3rem ;
 posição : absoluta ;
 esquerda : 1,2rem ;
 superior : 1,2rem ;
 índice z : 1 ; 
transição : color var ( -duration - short ) facilidade ,
 opacidade var ( -duração - curta ) facilidade ;
 }
 . produto__mídia - vídeo. produto__media - ícone {
 opacidade : 1 ;
 } 
. product__modal - opener --imagem . product__media - alternar : passar o mouse ,
 . imagem - ampliar - passar o mouse {
 cursor : ampliar ;
 }
 . product__modal -opener : hover. produto__media - ícone { 
borda : 0,1rem sólido rgba ( var ( -color - foreground ) , 0,1 ) ;
 }
 . produto__mídia - item > *,
 . produto - mídia - contêiner. produto__modal - abridor {
 exibição : bloco ; 
posição : relativa ;
 }
 . produto__media - alternar {
 exibição : flexível ;
 borda : nenhuma ;
 cor de fundo : transparente ;
 cor : cor atual ;
 preenchimento : 0 ;
 } 
. product__media - alternar :: depois de {
 contente : "" ;
 cursor : ponteiro ;
 exibição : bloco ;
 margem : 0 ;
 preenchimento : 0 ;
 posição : absoluta ; 
topo : calc ( var ( -largura da borda ) * - 1 ) ;
 direita : calc ( var ( -largura da borda ) * - 1 ) ; 
parte inferior : calc ( var ( -largura da borda ) * - 1 ) ;
 esquerda : calc ( var ( -largura da borda ) * - 1 ) ; 
índice z : 2 ;
 }
 . produto__media - alternar : foco - visível ,
 . produto__media - alternar. focado {
 contorno : 0 ;
 box - shadow : nenhum ;
 } 
@media ( cores forçadas : ativas ) {
 . produto__media - alternar : foco - visível ,
 . product__media -toggle : foco -visível : depois , 
. produto - form__input input [ type = "radio" ] : foco - visível + rótulo {
 contorno : sólido transparente 1px ;
 contorno - deslocamento : 2px ;
 }
 . miniatura [ aria - atual ] : foco , 
. miniatura . focado {
 contorno : sólido transparente 1px ;
 }
 }
 . product__media -toggle : foco -visível : depois ,
 . produto__media - alternar. focado : depois de { 
box - shadow : 0 0 0 0,3rem rgb ( var ( -color - background ) ) ,
 0 0 0,5rem rgba ( var ( -cor - foreground ) , 0,5 ) ; 
raio - da-borda : var ( -raio - media ) ;
 }
 . produto - mídia - modal {
 cor de fundo : rgb ( var ( -color - fundo ) ) ;
 altura : 100 %; 
posição : fixa ;
 topo : 0 ;
 esquerda : 0 ;
 largura : 100 %;
 visibilidade : oculta ;
 opacidade : 0 ;
 z - índice : -1 ;
 } 
. produto - mídia - modal [ aberto ] {
 visibilidade : visível ;
 opacidade : 1 ;
 índice z : 101 ;
 }
 . produto - mídia - modal__dialog {
 exibição : flexível ; 
alinhar - itens : centro ;
 altura : 100vh ;
 }
 . produto - mídia - modal__content {
 altura máxima : 100vh ;
 largura : 100 %;
 estouro : automático ;
 } 
. produto - mídia - modal__content > * {
 exibição : bloco ;
 altura : automático ;
 margem : automática ;
 }
 . produto - mídia - modal__content . meios de comunicação {
 plano de fundo : nenhum ;
 } 
. produto - mídia - modal__model ,
 . produto - mídia - modal__content . diferido - mídia ,
 . miniatura - lista. controle deslizante - tablet para cima. miniatura - list__item. slider__slide {
 largura : 100 %;
 } 
. produto - mídia - modal__toggle {
 cor de fundo : rgb ( var ( -color - fundo ) ) ;
 borda : 0,1rem sólido rgba ( var ( -color - foreground ) , 0,1 ) ; 
borda - raio : 50 %;
 cor : rgba ( var ( -color - foreground ) , 0,55 ) ;
 exibição : flexível ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ; 
cursor : ponteiro ;
 direita : 2rem ;
 preenchimento : 1,2rem ;
 posição : fixa ;
 índice z : 2 ;
 superior : 2rem ;
 largura : 4rem ;
 }
 . produto - mídia - modal__toggle : pairar , 
. produto - pop-up - modal__toggle : hover {
 cor : rgba ( var ( -color - foreground ) , 0,75 ) ;
 }
 . produto - mídia - modal__toggle . ícone , 
. produto - pop-up - modal__toggle . ícone {
 altura : automático ;
 margem : 0 ;
 largura : 2,2rem ;
 }
 . produto - pop-up - modal {
 dimensionamento da caixa : caixa de borda ; 
opacidade : 0 ;
 posição : fixa ;
 visibilidade : oculta ;
 z - índice : -1 ;
 margem : 0 automático ;
 topo : 0 ;
 esquerda : 0 ;
 estouro : automático ; 
largura : 100 %;
 plano de fundo : rgba ( var ( -color - foreground ) , 0,2 ) ;
 altura : 100 %;
 }
 . produto - pop-up - modal [ abrir ] { 
opacidade : 1 ;
 visibilidade : visível ;
 índice z : 101 ;
 }
 . produto - pop-up - modal__content {
 border - radius : var ( -popup - corner - radius ) ; 
cor de fundo : rgb ( var ( -color - fundo ) ) ;
 estouro : automático ;
 altura : 80 %;
 margem : 0 automático ;
 esquerda : 50 %; 
transformar : traduzirX ( -50 % ) ;
 margem - topo : 5rem ;
 largura : 92 %;
 posição : absoluta ;
 topo : 0 ;
 preenchimento : 0 1,5rem 0 3rem ; 
border - color : rgba ( var ( -color - foreground ) , var ( -popup - border - opacity ) ) ;
 estilo de borda : sólido ; 
largura da borda : var ( -popup - largura da borda ) ;
 box - shadow : var ( -popup - shadow - horizontal - offset ) 
var ( -popup - shadow - vertical - offset ) var ( -popup - shadow - blur - radius ) 
rgba ( var ( -color - shadow ) , var ( -popup - shadow - opacity ) ) ;
 }
 . produto - pop-up - modal__content. focado , 
. produto - pop-up - modal__content : foco - visível {
 box - shadow : 0 0 0 0,3rem rgb ( var ( -color - background ) ) , 
0 0 0,5rem.4rem rgba ( var ( -- cor de primeiro plano ) , 0,3 ) ,
 var ( -popup - shadow - horizontal - offset ) var ( -popup - shadow - vertical - offset ) 
var ( -popup - sombra - desfoque - raio )
 rgba ( var ( -color - shadow ) , var ( -popup - shadow - opacity ) ) ;
 }
 . produto - pop-up - modal__opener { 
display : bloco embutido ;
 }
 . produto - pop-up - modal__button {
 tamanho da fonte : 1,6rem ;
 preenchimento - direita : 1,3rem ;
 preenchimento - esquerda : 0 ;
 altura mínima : 4,4rem ; 
texto - sublinhado - deslocamento : 0,3rem ;
 texto - decoração - espessura : 0,1rem ;
 transição : text - decoration - espessura var ( -duração - curta ) facilidade ;
 }
 . produto - pop-up - modal__button : hover { 
texto - decoração - espessura : 0,2rem ;
 }
 . produto - pop-up - modal__content - informações {
 preenchimento - direita : 4,4rem ;
 }
 . produto - pop-up - modal__content - informações > * {
 altura : automático ; 
margem : 0 automático ;
 máx - largura : 100 %;
 largura : 100 %;
 }
 . produto - pop-up - modal__toggle {
 cor de fundo : rgb ( var ( -color - fundo ) ) ; 
borda : 0,1rem sólido rgba ( var ( -color - foreground ) , 0,1 ) ;
 borda - raio : 50 %;
 cor : rgba ( var ( -color - foreground ) , 0,55 ) ; 
exibição : flexível ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 cursor : ponteiro ;
 posição : pegajosa ;
 preenchimento : 1,2rem ;
 índice z : 2 ;
 superior : 1,5rem ;
 largura : 4rem ; 
margem : 0 0 0 automático ;
 }
 . produto__media - lista. mídia > * {
 estouro : oculto ;
 }
 . miniatura - lista {
 flex - wrap : wrap ;
 lacuna na grade : 1rem ; 
}
 . controle deslizante - móvel. miniatura - lista : depois de {
 conteúdo : nenhum ;
 }
 . miniatura {
 posição : absoluta ;
 topo : 0 ;
 esquerda : 0 ;
 exibição : bloco ; 
altura : 100 %;
 largura : 100 %;
 preenchimento : 0 ;
 cor : rgb ( var ( -color - base - text ) ) ;
 cursor : ponteiro ;
 cor de fundo : transparente ;
 } 
. miniatura : passar o mouse {
 opacidade : 0,7 ;
 }
 . miniatura . global - mídia - configurações img {
 raio da borda : 0 ;
 }
 . miniatura [ ária - atual ] { 
box - shadow : 0 0 0 0.1rem rgb ( var ( -color - foreground ) ) ;
 cor da borda : rgb ( var ( -color - foreground ) ) ;
 } 
. imagem - ampliar - tamanho real {
 cursor : diminuir zoom ;
 índice z : 1 ;
 margem : 0 ; 
raio - da - borda : calc ( var ( -raio - media ) -var ( -largura - borda - media ) ) ;
 }
 . produto__modal - abridor > . carregando - overlay__spinner { 
superior : 50 %;
 esquerda : 50 %;
 transformar : traduzir ( -50 % , -50 % ) ;
 posição : absoluta ;
 exibição : flexível ;
 alinhar - itens : centro ; 
altura : 48px ;
 largura : 48px ;
 }
 . produto__modal - abridor. caminho {
 traço : rgb ( var ( -color - base - accent - 1 ) ) ;
 opacidade : 0,75 ;
 } 
@media ( hover : hover ) {
 . product__media - zoom - pairar ,
 . produto__media - ícone -- hover {
 Mostrar nenhum ;
 }
 }
 . js . produto__mídia {
 estouro : oculto ! importante ;
 } 
. miniatura [ aria - atual ] : foco - visível {
 box - shadow : 0 0 0 0,3rem rgb ( var ( -color - background ) ) , 
0 0 0,5rem rgba ( var ( -cor - foreground ) , 0,5 ) ;
 }
 . miniatura [ aria - atual ] : foco ,
 . miniatura . focado , 
. miniatura [ aria - atual ] : foco ,
 . miniatura . focado {
 contorno : 0 ;
 box - shadow : 0 0 0 0,3rem rgb ( var ( -color - background ) ) , 
0 0 0,5rem rgba ( var ( -cor - foreground ) , 0,5 ) ;
 }
 . miniatura [ aria - atual ] : foco : não ( : foco - visível ) { 
contorno : 0 ;
 box - shadow : 0 0 0 0.1rem rgb ( var ( -color - foreground ) ) ;
 }
 . imagem em miniatura {
 ajuste ao objeto : capa ;
 largura : 100 %; 
altura : 100 %;
 eventos de ponteiro : nenhum ;
 }
 . miniatura__badge . ícone {
 largura : 1rem ;
 altura : 1rem ;
 }
 . miniatura__badge . ícone - 3d - modelo {
 largura : 1,2rem ; 
altura : 1,2rem ;
 }
 . miniatura__badge {
 cor : rgb ( var ( -color - foreground ) , 0,6 ) ;
 altura : 2rem ;
 largura : 2rem ;
 esquerda : automático ; 
direita : calc ( 0.4rem + var ( -media - border - width ) ) ;
 topo : calc ( 0.4rem + var ( -media - border - width ) ) ;
 }
 . miniatura - list__item , 
miniatura - controle deslizante {
 posição : relativa ;
 }
 . miniatura - list__item :: antes {
 contente : "" ;
 exibição : bloco ;
 preenchimento - inferior : 100 %;
 }
 . produto__view - detalhes { 
exibição : bloco ;
 decoração de texto : nenhuma ;
 }
 . product__view - detalhes : hover {
 decoração de texto : sublinhado ;
 texto - sublinhado - deslocamento : 0,3rem ;
 }
 . produto__view - detalhes. ícone { 
largura : 1,2rem ;
 margem - esquerda : 1,2rem ;
 flex - encolher : 0 ;
 }
 . produto__inventário {
 exibição : flexível ;
 alinhar - itens : centro ;
 lacuna : 0,5rem ;
 } 
. produto - sem mídia. produto__inventário {
 justificar - conteúdo : centro ;
 }
 . produto__inventário . visibilidade - oculto : vazio :: depois ,
 . produto__sku . visibilidade - oculto :: depois de { 
contente : "#" ;
 }
 . ícone - com - texto {
 --tamanho do ícone : calc ( var ( -escala - título - da - fonte ) * 3rem ) ; 
- espaçamento de ícones : calc ( var ( -escala de título de fonte ) * 1rem ) ;
 }
 . ícone - com - texto -- horizontal {
 exibição : flexível ;
 justificar - conteúdo : centro ; 
coluna - gap : 3rem ;
 flex - direction : linha ;
 }
 . ícone - com - texto -- vertical {
 --tamanho do ícone : calc ( var ( -escala - título - da - fonte ) * 2rem ) ; 
}
 . ícone - com - texto. ícone {
 fill : rgb ( var ( -color - foreground ) ) ;
 altura : var ( -tamanho do ícone ) ; 
largura : var ( -tamanho do ícone ) ;
 }
 . ícone - com - texto – horizontal. ícone ,
 . ícone - com - texto -- horizontal img { 
margem - inferior : var ( -espaçamento de ícones ) ;
 }
 . ícone - com - texto – vertical. ícone {
 altura mínima : var ( -tamanho do ícone ) ; 
largura mínima : var ( -tamanho do ícone ) ;
 margem - direita : var ( -espaçamento de ícones ) ;
 }
 . ícone - com - texto img { 
altura : var ( -tamanho do ícone ) ;
 largura : var ( -tamanho do ícone ) ;
 ajuste de objeto : contém ;
 }
 . ícone - com - texto -- vertical img { 
margem - direita : var ( -espaçamento de ícones ) ;
 }
 . ícone - com - texto – horizontal. h4 { 
padding - top : calc ( var ( -tamanho do ícone ) + var ( -espaçamento do ícone ) ) ;
 alinhamento de texto : centro ;
 } 
. ícone - com - texto --horizontal svg + . h4 ,
 . ícone - com - texto --horizontal img + . h4 , 
. ícone - com - texto - horizontal. ícone com texto – somente texto . h4 {
 preenchimento - topo : 0 ;
 }
 . ícone - com - text__item {
 exibição : flexível ; 
alinhar - itens : centro ;
 }
 . ícone - com - texto – horizontal. ícone - com - text__item {
 flex - direction : coluna ;
 largura : 33 %;
 } 
. ícone - com - texto – vertical. ícone - com - text__item {
 margem - inferior : var ( -tamanho do ícone ) ;
 }
 . produto - mídia - contêiner { 
--proporção de aspecto : var ( -proporção de visualização ) ;
 -- proporção - porcentagem : calc ( 1 / var ( -- proporção de aspecto ) * 100 % ) ; 
posição : relativa ;
 largura : 100 %;
 largura máxima : calc ( 100 % -calc ( var ( -media - border - width ) * 2 ) ) ;
 } 
. produto - mídia - recipiente. restringir - altura {
 --deslocamento da janela de visualização : 400px ;
 --constrained - min - height : 300px ;
 -- restrito - altura : max ( 
var ( -constringed - min - height ) ,
 calc ( 100vh - var ( -viewport - offset ) )
 ) ;
 margem - direita : automático ;
 margem - esquerda : automático ;
 } 
. produto - mídia - recipiente. restringir - altura. mídia - ajustar - conter {
 --largura contida : calc ( var ( -altura restrita ) * var ( -proporção de aspecto ) ) ; 
largura : min ( var ( -largura contida ) , 100 % ) ;
 }
 . produto - mídia - contêiner. meios de comunicação {
 padding - top : var ( -proporção - porcentagem ) ; 
}
 . produto - mídia - recipiente. restringir - altura. meios de comunicação {
 padding - top : min ( var ( -altura restrita ) , var ( -proporção - porcentagem ) ) ;
 } 
. destinatário - formulário {
 - destinatário - caixa de seleção - margem - topo : 0,64rem ;
 exibição : bloco ;
 posição : relativa ;
 largura máxima : 44rem ;
 margem inferior : 2,5rem ;
 } 
. destinatário - formulário - campo - rótulo {
 margem : 0,6rem 0 ;
 }
 . destinatário - formulário - campo - rótulo -- espaço - entre {
 exibição : flexível ;
 justificar - conteúdo : espaço entre ;
 } 
. destinatário - caixa de seleção {
 flex - crescer : 1 ;
 tamanho da fonte : 1,6rem ;
 exibição : flexível ;
 quebra de palavra : quebra de palavra ;
 alinhar - itens : flex - start ; 
largura máxima : herdar ;
 posição : relativa ;
 }
 . destinatário - formulário > entrada [ type = "caixa de seleção" ] {
 posição : absoluta ;
 largura : 1,6rem ;
 altura : 1,6rem ; 
margem : var ( -destinatário - caixa de seleção - margem - topo ) 0 ;
 topo : 0 ;
 esquerda : 0 ;
 z - índice : -1 ;
 aparência : nenhuma ; 
-webkit -aparência : nenhum ;
 }
 . destinatário - campos__campo {
 margem : 0 0 2rem ;
 }
 . campos do destinatário . Legenda do campo {
 espaço em branco : nowrap ;
 estouro de texto : reticências ; 
largura máxima : calc ( 100 % - 3,5rem ) ;
 estouro : oculto ;
 }
 . destinatário - caixa de seleção > svg {
 margem - topo : var ( -destinatário - caixa de seleção - margem - topo ) ; 
margem - direita : 1,2rem ;
 flex - encolher : 0 ;
 }
 . destinatário - formulário . ícone - marca de seleção {
 visibilidade : oculta ;
 posição : absoluta ;
 esquerda : 0,28rem ;
 índice z : 5 ; 
topo : 0,4rem ;
 }
 . destinatário - formulário > entrada [ type = "checkbox" ] : verificado + rótulo. ícone - marca de seleção {
 visibilidade : visível ;
 }
 . destinatário - campos hr {
 margem : 1,6rem automático ; 
}
 . destinatário - formulário > entrada [ type = "checkbox" ] : verificado ~. destinatário - campos {
 exibição : bloco ;
 animação : animateMenuOpen var ( -duration - default ) facilidade ;
 } 
. js . destinatário - email - rótulo. obrigatório ,
 . não - js. destinatário - email - rótulo. opcional ,
 . destinatário - formulário ul a {
 exibição : embutido ;
 }
 . destinatário - formulário ul { 
altura da linha : calc ( 1 + 0.6 / var ( -font - body - scale ) ) ;
 preenchimento - esquerda : 4,4rem ;
 alinhamento de texto : esquerda ;
 } 
. destinatário - formulário . erro - mensagem :: primeira - letra {
 transformação de texto : capitalizar ;
 }
 . produto__info - wrapper {
 preenchimento - esquerda : 0 ;
 preenchimento - inferior : 0 ; 
}
 . produto - formulário__input {
 flexível : 0 0 100 %;
 preenchimento : 0 ;
 margem : 0 0 1,2rem ;
 largura máxima : 37rem ;
 min - largura : ajuste - conteúdo ; 
borda : nenhuma ;
 }
 . produto - form__input input [ type = "radio" ] : desabilitado + rótulo {
 cor da borda : rgba ( var ( -color - foreground ) , 0.1 ) ; 
cor : rgba ( var ( -color - foreground ) , 0,4 ) ;
 decoração de texto : line - through ;
 }
 . produto__media - ícone ,
 . miniatura__badge { 
cor de fundo : rgb ( var ( -color - fundo ) ) ;
 borda - raio : 50 %;
 borda : 0,1rem sólido rgba ( var ( -color - foreground ) , 0,1 ) ; 
cor : rgb ( var ( -color - foreground ) ) ;
 exibição : flexível ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 altura : 3rem ;
 largura : 3rem ;
 posição : absoluta ; 
esquerda : calc ( 0.4rem + var ( -media - border - width ) ) ;
 topo : calc ( 0.4rem + var ( -media - border - width ) ) ;
 índice z : 1 ; 
transição : color var ( -duration - short ) facilidade ,
 opacidade var ( -duração - curta ) facilidade ;
 }
 . produto__mídia - item {
 margem : automática ;
 } 
. product__media - alternar :: depois de {
 contente : "" ;
 cursor : ponteiro ;
 exibição : bloco ;
 margem : 0 ;
 preenchimento : 0 ;
 posição : absoluta ;
 topo : 0 ; 
esquerda : 0 ;
 índice z : 2 ;
 altura : 100 %;
 largura : 100 %;
 }
 . product__media -toggle : focus -visível : depois de { 
box - shadow : 0 0 0 0,3rem rgb ( var ( -color - background ) ) ,
 0 0 0,5rem rgba ( var ( -cor - foreground ) , 0,5 ) ; 
border - radius : var ( -media - radius ) -var ( -media - border - width ) ;
 }
 . product__media -toggle : focus -visível : depois de { 
raio - da-borda : var ( -raio - media ) ;
 }
 . produto - pop-up - modal__button {
 tamanho da fonte : 1,6rem ;
 preenchimento - direita : 1,3rem ;
 preenchimento - esquerda : 0 ; 
altura : 4,4rem ;
 texto - sublinhado - deslocamento : 0,3rem ;
 texto - decoração - espessura : 0,1rem ;
 transição : text - decoration - espessura var ( -duração - curta ) facilidade ;
 }
 . imagem em miniatura { 
eventos de ponteiro : nenhum ;
 }
 . miniatura -- imagem estreita {
 altura : 100 %;
 largura : automático ;
 máx - largura : 100 %;
 }
 . miniatura -- img largo {
 altura : automático ; 
largura : 100 %;
 }
 . controle deslizante - celular - medianiz {
 largura : 100 %;
 posição : relativa ;
 exibição : bloco ;
 }
 . controle deslizante - móvel - calha . controle deslizante -- celular { 
posição : relativa ;
 flex - wrap : herdar ;
 estouro -x : automático ;
 scroll - snap - type : x obrigatório ;
 comportamento de rolagem : suave ;
 - webkit - overflow - rolagem : toque ; 
margem - inferior : 0 ;
 }
 . miniatura - controle deslizante {
 largura : calc ( 100 % / 5 ) ;
 }
 principal - controle deslizante . botão - ícone {
 superior : 50 %; 
largura : 50px ! importante ;
 altura : 50px ! importante ;
 transformar : traduzirY ( -50 % ) ;
 exibição : bloco ;
 }
 . principal - botão -- anterior {
 esquerda : 0 ;
 } 
componente deslizante . celular - botão {
 plano de fundo : rgba ( 0 , 0 , 0 , 0,3 ) ;
 máx - altura : 100 %;
 altura : não definido ;
 largura : 5vw ; 
posição : relativa ;
 }
 componente deslizante . botão móvel > . ícone {
 altura : 15px ;
 preencha : var ( -btn - color ) ;
 }
 . controle deslizante móvel . miniatura - lista { 
margem : automático 10px ;
 }
 . botão deslizante [ desabilitado ] . ícone {
 fill : rgba ( var ( -color - foreground ) , 0.3 ) ;
 } 
Tela @media somente e ( largura mínima : 750px ) {
 . controle deslizante - móvel - calha . controle deslizante - botões {
 Mostrar nenhum ! importante ;
 }
 . controle deslizante - móvel - calha . grade__item {
 largura : 100 %; 
}
 }
 Tela @media somente e ( largura máxima : 749px ) {
 . controle deslizante - celular - medianiz {
 largura : 80 %;
 margem : automático ! importante ;
 } 
. produto__media -item : não ( : primeiro - filho ) {
 margem : 1rem ! importante ;
 }
 . controle deslizante . controle deslizante -- celular {
 margem - inferior : 0 ! importante ;
 } 
. controle deslizante - botões. não - js - oculto. rápido - adicionar - oculto {
 exibição : flexível ! importante ;
 altura : 50px ;
 largura : 100 % ! importante ;
 }
 } 
principal - controle deslizante . botão principal -- anterior > . ícone ,
 . celular - botão. botão deslizante - anterior. ícone ,
 principal - controle deslizante . botão principal -- próximo > . ícone , 
. celular - botão. botão deslizante – próximo . ícone {
 girar : 90 graus ;
 escala : 3 ;
 }
 . principal - botão -- próximo {
 direita : 0 ;
 } 
. controle deslizante - móvel - calha . botão - ícone {
 plano de fundo : rgba ( 0 , 0 , 0 , 0,3 ) ;
 posição : absoluta ! importante ;
 largura : 100 %; 
altura : 5 %;
 índice z : 1 ! importante ;
 }
 . controle deslizante - móvel - calha . ícone de botão : não ( [ desativado ] ) : hover {
 fundo : #000;
 } 
. controle deslizante - botão [ desativado ] {
 plano de fundo : rgba ( 255 , 255 , 255 , 0,5 ) ;
 }
 . botão - ícone . ícone { 
preencha : var ( -btn - color ) ;
 altura : 15px ! importante ;
 exibição : flexível ;
 margem : automática ;
 } 
principal - controle deslizante . botão principal - anterior : não ( [ desabilitado ] ) : pairar > . ícone , 
. celular - botão. botão deslizante - anterior : não ( [ desabilitado ] ) : pairar. ícone , 
principal - controle deslizante . botão principal - próximo : não ( [ desabilitado ] ) : pairar > . ícone , 
. celular - botão. botão deslizante - próximo : não ( [ desabilitado ] ) : pairar. ícone , 
miniatura - controle deslizante . botão deslizante - anterior : não ( [ desabilitado ] ) : pairar. ícone ,
 miniatura - controle deslizante . botão deslizante - próximo : não ( [ desabilitado ] ) : pairar. ícone { 
escala : 3,1 ;
 }
 . miniatura - botão. botão deslizante -- anterior > . ícone ,
 . miniatura - botão. botão deslizante - próximo > . ícone {
 gire : - 180 graus ; 
escala : 3 ;
 }
 . miniatura - botão. controle deslizante - botão - anterior ,
 . miniatura - botão. controle deslizante - botão -- próximo {
 largura : 100 %;
 altura : 30px ;
 borda : 1px sólido ; 
}
 botão. controle deslizante - botão. miniatura - botão. controle deslizante - botão -- anterior {
 largura : 100 %;
 altura : 30px ;
 borda : 1px sólido ;
 }
 
. miniatura - lista. controle deslizante . controle deslizante -- tablet - para cima {
 estouro -y : automático ! importante ;
 scroll - snap - type : y obrigatório ! importante ;
 comportamento de rolagem : suave ; 
scroll - preenchimento - esquerda : 1rem ;
 largura : 100 %;
 }
 . miniatura - controle deslizante . controle deslizante - botão -- próximo {
 inferior : 0 ;
 }
 . produto__media - lista. produto__media - ícone { 
Mostrar nenhum ! importante ;
 }
 . miniatura - controle deslizante {
 largura máxima : 7vw ;
 altura máxima : 38vw ;
 largura mínima : 75px ;
 altura mínima : 415px ;
 largura : 150px ;
 altura : 580px ; 
}
 @supports ( -webkit -touch -callout : nenhum ) {
 . botão principal - anterior ,
 . botão principal - próximo ,
 [ controle deslizante móvel ] ,
 . controle deslizante - botões , 
miniatura - controle deslizante {
 Mostrar nenhum ! importante ;
 }
 . controle deslizante . controle deslizante -- celular {
 overflow -x : rolagem ! importante ;
 }
 . produto__mídia - item {
 largura : 400px ! importante ;
 }
 } 
/* Código adicional */
 @media screen e ( largura mínima : 750px ) {
 controle deslizante - componente. controle deslizante - celular - medianiz {
 Mostrar nenhum ;
 }
 principal - controle deslizante. controle deslizante - celular - medianiz {
 exibição : flexível ;
 } 
}
 @media screen e ( largura máxima : 749px ) {
 principal - controle deslizante. controle deslizante - celular - medianiz {
 Mostrar nenhum ;
 }
 controle deslizante - componente. controle deslizante - celular - medianiz {
 exibição : bloco ;
 lacuna : 1rem ; 
}
 }
 Galeria de mídia. product__column - fixo {
 exibição : flexível ;
 }
 principal - controle deslizante. controle deslizante - móvel - calha. mais -- mídia {
 largura : 80 %;
 } 
principal - controle deslizante. controle deslizante - celular - medianiz {
 altura : 100 %;
 alinhar - itens : centro ;
 justificar - conteúdo : espaço entre ;
 }
 miniatura - controle deslizante. miniatura - controle deslizante {
 largura : 20 %; 
}
 rua. produto__mídia - lista. contém - mídia ,
 miniatura - controle deslizante. miniatura - controle deslizante. controle deslizante - móvel - calha . miniatura - list__item. slider__slide , 
miniatura - controle deslizante . miniatura - lista. lista - sem estilo. controle deslizante {
 largura : 100 %;
 }
 miniatura - controle deslizante. miniatura - controle deslizante . miniatura - lista. controle deslizante -- tablet - para cima { 
scroll - padding - top : 0,5rem ;
 }
 . está ativo {
 exibição : bloquear ! importante ;
 }