/** Shopify CDN: Minification failed

Line 26:0 All "@import" rules must come first
Line 182:0 Unexpected "@media"

**/
@media screen and (max-width: 749px) {
  #shopify-section-template--21537675936000__section_KTmPGi .section-content-wrapper > .text-block {
    --width: 100% !important;
  }

  #shopify-section-template--21537675936000__section_KTmPGi .section-content-wrapper > .text-block > * {
    width: 100% !important;
    max-inline-size: 100% !important;
  }

  #shopify-section-template--21537675936000__section_KTmPGi .group-block-content .text-block {
    --width: 100% !important;
  }

  #shopify-section-template--21537675936000__section_KTmPGi .group-block-content .text-block > * {
    width: 100% !important;
    max-inline-size: 100% !important;
  }
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

/* Estilo para o título "From Brazil to the World" no index.json */
.text-block--text_RQY3kH > * {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 36px !important;
  line-height: 128% !important;
  letter-spacing: 0% !important;
}

/* Alinhamento da imagem para o eixo y 100% (Correção Definitiva) */
.image-block--image_jE4mKV {
  align-self: stretch !important;
  display: flex !important;
  align-items: flex-end !important;
  margin-top: 0 !important;
}

.image-block--image_jE4mKV img {
  display: block !important;
  margin-top: auto !important;
}

/* Border radius global dos botões */
.button, 
.shopify-payment-button__button {
  border-radius: 0 !important;
}

/* Header: alinhar ao token --normal-page-width (--page-content-width não limita filhos full-width; ver regra abaixo) */
.header-section .header__row {
  --page-content-width: var(--normal-page-width);
  --page-width: calc(var(--page-content-width) + var(--page-margin) * 2);
}

/* Desktop: barra do header (logo + menu + ações) com max-width = --normal-page-width, centrada.
   Filhos de .section--full-width usam grid-column 1 / -1, por isso ignoram a coluna central da grelha. */
@media screen and (min-width: 750px) {
  #header-component .header__row.section--full-width.section--full-width-margin > .header__columns {
    box-sizing: border-box;
    max-width: var(--normal-page-width);
    width: 100%;
    margin-inline: auto;
    justify-self: center;
    /* base.css aplica padding lateral aqui; com max-width isso encolhia o conteúdo útil */
    padding-left: 0;
    padding-right: 0;
  }

  /* Layout grouped: logo à esquerda, menu + resto à direita (espaço flexível entre logo e menu) */
  #header-component .header__columns[data-layout='grouped'] {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    justify-items: stretch;
  }

  #header-component .header__columns[data-layout='grouped'] .header__column--center {
    justify-content: flex-start;
    width: 100%;
  }

  #header-component .header__columns[data-layout='grouped'] .header__column--center header-menu {
    margin-inline-start: auto;
  }

  #header-component header-menu .overflow-menu .menu-list__link-title {
    letter-spacing: 0.12em;
  }

  #header-component .mega-menu .section.section--full-width.section--full-width-margin > .mega-menu__grid {
    width: 100%;
    max-width: var(--normal-page-width);
    margin-inline: auto;
  }

  #header-component .menu-list__submenu-inner {
    width: 100%;
    max-width: var(--normal-page-width);
    margin-inline: auto;
  }
}

/* PDP - Product Detail Page Custom Styles */

/* Alinhar largura de conteúdo ao token global --normal-page-width (1060px).
   Secções full-width não são afetadas (grid-column: 1 / -1). */
.template-product {
  --page-content-width: var(--normal-page-width);
  --page-width: calc(var(--page-content-width) + var(--page-margin) * 2);
}

/* PDP: wider media column on desktop.
   O column-gap sai da coluna de mídia (1fr); a de detalhes mantém a largura. */
@media screen and (min-width: 750px) {
  .product-information__grid.product-information--pdp-asymmetric:not(.product-information--media-none) {
    column-gap: 20px;
  }

  .product-information__grid.product-information--pdp-asymmetric:not(.product-information--media-none).product-information--media-left {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, min(42vw, 420px));
  }

  .product-information__grid.product-information--pdp-asymmetric:not(.product-information--media-none).product-information--media-right {
    grid-template-columns: minmax(0, min(42vw, 420px)) minmax(0, 1.15fr);
  }
}

/* PDP: subtítulo do produto (bloco text_subtitle_wf) */
.template-product .text-block--text_subtitle_wf,
.template-product .text-block--text_subtitle_wf p {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 18px !important;
  line-height: 128% !important;
  letter-spacing: 0 !important;
}

/* PDP: preço principal em negrito (bloco price + fallback se block.id ≠ price_standalone_wf) */
.template-product .product-details product-price .price,
.template-product .text-block--price_standalone_wf .price {
  font-weight: 700 !important;
}

/* Category label */
.text-block--text_category_wf p {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / 0.5);
  margin: 0;
}

/* Rating stars row */
.text-block--text_rating_sku_wf p {
  margin: 0;
  font-size: 16px;
  letter-spacing: 2px;
  color: #222;
}

/* "SOBRE O PRODUTO" heading */
.text-block--text_desc_heading_wf p strong {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Guia de medidas — bloco wallford-size-helper */
.template-product .wf-size-helper,
/* PDP mobile: a coluna de detalhes (item de grid) e o group-block (item flex) têm
   min-width: auto e cresciam com o filho mais largo (fileira de tamanhos), gerando
   scroll horizontal na página e texto cortado. Mesmo princípio de .product-information__media. */
@media screen and (max-width: 749px) {
  .template-product .product-details,
  .template-product .product-details > .group-block {
    min-width: 0;
    max-width: 100%;
  }
}

.product-details .wf-size-helper {
  width: 100%;
}

/* 30px acima da linha, 20px abaixo */
.template-product .wf-size-helper__divider,
.product-details .wf-size-helper__divider {
  margin: 0;
  padding-top: 30px;
  padding-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.template-product .wf-size-helper__divider-line,
.product-details .wf-size-helper__divider-line {
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid #d4d4d4;
}

.template-product .wf-size-helper__row,
.product-details .wf-size-helper__row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.template-product a.wf-size-helper__btn,
.product-details a.wf-size-helper__btn,
a.wf-size-helper__btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  /* Mesmo tamanho do Add to Bag (202×50 no desktop), estilo outlined. */
  width: 202px;
  height: 50px;
  margin: 0;
  padding: 12px 16px;
  opacity: 1;
  border: 1px solid #d4d4d4 !important;
  border-radius: 0 !important;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  text-decoration: none !important;
  text-underline-offset: 0 !important;
  box-shadow: none !important;
  color: #000000 !important;
  --button-color: #000000;
  background-color: #ffffff !important;
  background-image: none !important;
  box-sizing: border-box;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

/* Mobile: o Add to Bag ocupa a largura toda; os dois botões dividem a linha. */
@media screen and (max-width: 749px) {
  .template-product a.wf-size-helper__btn,
  .product-details a.wf-size-helper__btn,
  a.wf-size-helper__btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}

.template-product a.wf-size-helper__btn:hover,
.product-details a.wf-size-helper__btn:hover,
a.wf-size-helper__btn:hover {
  color: #ffffff !important;
  --button-color: #ffffff !important;
  background-color: #000000 !important;
  border-color: #000000 !important;
  text-decoration: none !important;
}

.template-product a.wf-size-helper__btn:focus-visible,
.product-details a.wf-size-helper__btn:focus-visible,
a.wf-size-helper__btn:focus-visible {
  outline: 2px solid #737373;
  outline-offset: 2px;
}

/* COLOR AVAILABLE — título acima das amostras de cor (variant picker) */
.text-block--text_color_label_wf p,
.wf-color-available-heading {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}

.variant-picker__form .variant-option + .wf-color-option-group {
  margin-block-start: var(--padding-lg);
}

/* PDP: tamanho/outras opções em cima, cores sempre abaixo (útil quando o app injeta cor antes no DOM).
   flex-direction: column + order (não column-reverse sozinho — isso inverteria o output do Liquid). */
.template-product .variant-picker__form {
  display: flex;
  flex-direction: column;
  gap: var(--padding-lg);
}

/* Todos os filhos order 1 (inclui <script> JSON para não ficar order 0 antes do tamanho). */
.template-product .variant-picker__form > * {
  order: 1;
}

.template-product .variant-picker__form > .wf-color-option-group {
  order: 2;
}

/* Blocos de app como filho direto do form (swatches) — manter abaixo do tamanho */
.template-product .variant-picker__form > [id^='shopify-block-'],
.template-product .variant-picker__form > .shopify-app-block {
  order: 2;
}

.template-product .variant-picker__form .variant-option + .variant-option,
.template-product .variant-picker__form .variant-option + .wf-color-option-group {
  margin-block-start: 0;
}

/* PDP: botão flutuante "Size Chart" do app Kiwi Sizing. O modal é aberto pelo
   botão do block wallford-size-helper, que dispara o .ks-chart-modal-link. */
.ks-chart-float-button {
  opacity: 0;
  pointer-events: none;
}

/* PDP: opção Tamanho — botões retangulares (Figma), linha única */
.template-product fieldset.variant-option--kind-size.variant-option--buttons:not(.variant-option--swatches) {
  --options-border-radius: 0;
  /* fieldset tem min-inline-size: min-content por padrão; sem isso ele cresce
     com os botões e gera scroll horizontal na página em vez de rolar aqui. */
  min-inline-size: 0;
  max-inline-size: 100%;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 3px;
}
.template-product fieldset.variant-option--kind-size.variant-option--buttons::-webkit-scrollbar { display: none; }

.template-product .variant-option--kind-size .variant-option__button-label:not(.variant-option__button-label--has-swatch) {
  --options-border-radius: 0;
  /* Mobile/tablet: os botões dividem a linha (como 1fr), entre 32px e 72px.
     Desktop (abaixo): 44px fixos, a fileira com 8 tamanhos cabe na coluna. */
  flex: 1 1 0;
  width: auto;
  height: 42px;
  min-width: 32px;
  max-width: 72px;
  min-height: 0;
  max-height: none;
  padding: 0;
  box-sizing: border-box;
  border-radius: 0 !important;
  justify-content: center;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0;
}
@media screen and (min-width: 750px) {
  .template-product .variant-option--kind-size .variant-option__button-label:not(.variant-option__button-label--has-swatch) {
    flex: 0 0 auto;
    width: 44px;
    min-width: 0;
    max-width: none;
  }
}
.template-product .variant-option--kind-size .variant-option__button-label:not(.variant-option__button-label--has-swatch)::before,
.template-product .variant-option--kind-size .variant-option__button-label:not(.variant-option__button-label--has-swatch)::after {
  border-radius: 0 !important;
}
.template-product .variant-option--kind-size .variant-option__button-label__text { text-align: center; }
.template-product .variant-option--kind-size .variant-option__button-label__pill {
  transform: none !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  opacity: 0;
  transition: opacity .2s;
}
.template-product .variant-option--kind-size .variant-option__button-label:has(:checked) .variant-option__button-label__pill { opacity: 1; }

/* Cartões em grade: sem swatches de cor (SA Variants / Variant King no embed global) */
.product-card__content variant-king-combined-listing {
  display: none !important;
}

/* PDP: com Variant King (bloco pode vir dentro de .shopify-block, não como filho direto — :has(>) falhava). Esconder todo o UI nativo do variant-picker; mantém só o JSON para o JS. */
.product-details .group-block-content:has(variant-king-combined-listing) .variant-picker__form > *:not(script[type='application/json']) {
  display: none !important;
}

/* PDP: ordem no grid — tamanho → guia → Variant King (app pode vir fora de ordem no DOM) */
.product-details > .group-block > .group-block-content > .variant-picker {
  order: 1;
}

/* O block vem dentro do wrapper div#shopify-block-…; sem o :has() a regra não se aplicava. */
.product-details > .group-block > .group-block-content > :is(.wf-size-helper, :has(> .wf-size-helper)) {
  order: 2;
}

.product-details > .group-block > .group-block-content > variant-king-combined-listing {
  display: block;
  order: 3;
  width: 100%;
}

.product-details > .group-block > .group-block-content > .buy-buttons-block {
  order: 4;
}

.product-details > .group-block > .group-block-content > .buy-buttons-block + * {
  order: 5;
}

.product-details > .group-block > .group-block-content > .accordion {
  order: 6;
}

/* Divisória entre Find Your Size / Size Chart e Add to Bag: mesmo order do guia, vem logo depois dele no DOM. */
.product-details > .group-block > .group-block-content > :has(> .wf-size-helper) + .divider {
  order: 2;
}

/*
 * PDP: espaçamento uniforme entre os grupos de detalhes (preço, cor, tamanho, compra).
 * Cada divisória tem --wf-details-section-gap acima e abaixo; os blocks entre elas ficam sem
 * padding vertical (o padding do editor variava de block para block). O gap do grid (--gap)
 * é descontado da margem para o total ficar exato.
 */
.product-details > .group-block > .group-block-content {
  --wf-details-section-gap: 16px;
}

.product-details > .group-block > .group-block-content > .divider {
  margin-block: calc(var(--wf-details-section-gap) - var(--gap, 0px));
}

.product-details > .group-block > .group-block-content > .divider ~ :not(.divider, .buy-buttons-block, .buy-buttons-block ~ *),
.product-details > .group-block > .group-block-content > :has(> .wf-size-helper) > .wf-size-helper {
  padding-block: 0;
}

/* Tamanho → Find Your Size / Size Chart: mesmo espaço, sem divisória (mesmo grupo). */
.product-details > .group-block > .group-block-content > :has(> .wf-size-helper) {
  margin-block-start: calc(var(--wf-details-section-gap) - var(--gap, 0px));
}

/* Variant King (app): título imediatamente acima da lista de swatches */
.product-details variant-king-combined-listing ul.swatch-view.swatch-view-custom-image::before {
  content: "COLOR AVALIABLE";
  display: block;
  width: 100%;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 var(--margin-xs) 0;
  color: inherit;
}

/* CTA Row - buy buttons and wishlist side by side via CSS grid */
.product-details > .group-block > .group-block-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}

/* Align buy-buttons-block children to top so Add to cart sits at same Y as wishlist */
.product-details > .group-block > .group-block-content > .buy-buttons-block {
  align-self: start;
  justify-self: start;
}

.product-details > .group-block > .group-block-content > .buy-buttons-block + * {
  align-self: start;
  justify-self: start;
}

.product-details > .group-block > .group-block-content > * {
  grid-column: span 2;
}

.product-details > .group-block > .group-block-content > .buy-buttons-block,
.product-details > .group-block > .group-block-content > .buy-buttons-block + * {
  grid-column: span 1;
}

.product-details > .group-block > .group-block-content > .buy-buttons-block + * {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
  min-width: 0;
  border-radius: 0;
}

.product-details > .group-block > .group-block-content > .buy-buttons-block .product-form-buttons {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.product-details > .group-block > .group-block-content > .buy-buttons-block {
  display: flex;
  flex-direction: column;
}

.product-details > .group-block > .group-block-content > .buy-buttons-block,
.product-details > .group-block > .group-block-content > .buy-buttons-block product-form-component,
.product-details > .group-block > .group-block-content > .buy-buttons-block form,
.product-details > .group-block > .group-block-content > .buy-buttons-block .product-form-buttons,
.product-details > .group-block > .group-block-content > .buy-buttons-block .product-form-button.s,
.product-details > .group-block > .group-block-content > .buy-buttons-block .spacing-style,
.product-details > .group-block > .group-block-content > .buy-buttons-block .spacing-style > span,
.product-details > .group-block > .group-block-content > .buy-buttons-block add-to-cart-component {
  margin: 0 !important;
  padding: 0 !important;
}

.product-details > .group-block > .group-block-content > .buy-buttons-block .add-to-cart-button {
  width: 100%;
}

/* PDP: carrinho — altura do tema (fora do template produto principal, ex. modais) */
.product-details .buy-buttons-block .add-to-cart-button.button {
  box-sizing: border-box;
  height: var(--height-buy-buttons);
  min-height: var(--height-buy-buttons);
  padding-block: calc(var(--button-padding-block) * 0.5);
  padding-inline: calc(var(--button-padding-inline) * 0.5);
}

/* PDP: product-form-component — 202×50, gap 10px, padding 16/24 no CTA */
.template-product .product-details > .group-block > .group-block-content > .buy-buttons-block product-form-component {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 202px;
  max-width: 100%;
  opacity: 1;
  box-sizing: border-box;
}

.template-product .product-details > .group-block > .group-block-content > .buy-buttons-block .add-to-cart-button {
  width: 202px;
  max-width: 100%;
}

.template-product .product-details .buy-buttons-block .add-to-cart-button.button {
  height: 50px;
  min-height: 50px;
  max-height: 50px;
  padding: 16px 24px;
}

/* PDP: Adicionar à lista — mesma altura que Add to cart; align-self evita stretch em layout-panel-flex--row */
.product-details a.size-style.button-secondary[class*="wishlist_btn_wf"],
.product-details > .group-block > .group-block-content > .buy-buttons-block + * a.size-style.button-secondary {
  box-sizing: border-box;
  flex: 0 0 auto;
  align-self: flex-start;
  height: var(--height-buy-buttons) !important;
  min-height: var(--height-buy-buttons);
  max-height: var(--height-buy-buttons);
  padding-block: calc(var(--button-padding-block) * 0.5);
  padding-inline: calc(var(--button-padding-inline) * 0.5);
  --size-style-height: var(--height-buy-buttons);
}

/* PDP: wishlist — mesmas specs que product-form / Add to cart (202×50, 16/24) */
.template-product .product-details a.size-style.button-secondary[class*="wishlist_btn_wf"],
.template-product
  .product-details
  > .group-block
  > .group-block-content
  > .buy-buttons-block
  + *
  a.size-style.button-secondary {
  width: 202px !important;
  max-width: 100%;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  padding: 16px 24px !important;
  opacity: 1;
  --size-style-width: 202px !important;
  --size-style-height: 50px !important;
  --size-style-width-mobile: 202px !important;
  --size-style-width-mobile-min: 0 !important;
}

@media screen and (max-width: 749px) {
  /* minmax(0, 1fr): com 1fr a coluna não encolhe abaixo do filho mais largo
     (fileira de tamanhos) e o conteúdo passava da borda direita. */
  .product-details > .group-block > .group-block-content {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .product-details > .group-block > .group-block-content > * {
    grid-column: span 1 !important;
  }

  .product-details > .group-block > .group-block-content > .buy-buttons-block,
  .product-details > .group-block > .group-block-content > .buy-buttons-block + * {
    grid-column: span 1 !important;
    width: 100% !important;
  }

  .product-details > .group-block > .group-block-content > .buy-buttons-block + * {
    order: 4;
  }

  .product-details > .group-block > .group-block-content > .buy-buttons-block {
    order: 5;
  }

  .template-product .product-details > .group-block > .group-block-content > .buy-buttons-block product-form-component {
    width: 100%;
  }

  .template-product .product-details > .group-block > .group-block-content > .buy-buttons-block .add-to-cart-button {
    width: 100%;
  }

  .template-product .product-details a.size-style.button-secondary[class*="wishlist_btn_wf"],
  .template-product .product-details > .group-block > .group-block-content > .buy-buttons-block + * a.size-style.button-secondary {
    width: 100% !important;
    --size-style-width: 100% !important;
    --size-style-width-mobile: 100% !important;
    --size-style-width-mobile-min: 0 !important;
  }
}

/* PDP: Adicionar ao carrinho — preto sólido */
.product-details .buy-buttons-block .add-to-cart-button.button {
  --button-color: #ffffff;
  --button-background-color: #000000;
  --button-border-color: #000000;
}

.product-details .buy-buttons-block .add-to-cart-button.button:hover:not(:disabled) {
  --button-color: #ffffff;
  --button-background-color: #222222;
  --button-border-color: #222222;
}

/* Adicionar à lista: branco, texto preto, borda sólida preta, cantos retos; texto centrado */
.product-details a.size-style.button-secondary[class*="wishlist_btn_wf"],
.product-details > .group-block > .group-block-content > .buy-buttons-block + * a.size-style.button-secondary {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  margin-top: 11px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: normal;
  color: #000000;
  background-color: #ffffff;
  border: 1.5px solid #000000;
  border-radius: 0 !important;
  box-shadow: none !important;
  --style-border-radius-buttons-secondary: 0;
  --button-color: #000000;
  --button-background-color: #ffffff;
  --button-border-color: #000000;
  --text-align: center;
}

.product-details a.size-style.button-secondary[class*="wishlist_btn_wf"] .button__label,
.product-details > .group-block > .group-block-content > .buy-buttons-block + * a.size-style.button-secondary .button__label {
  display: block;
  width: 100%;
  text-align: center;
  flex: 0 0 auto;
}

.product-details a.size-style.button-secondary[class*="wishlist_btn_wf"]:hover,
.product-details > .group-block > .group-block-content > .buy-buttons-block + * a.size-style.button-secondary:hover {
  color: #ffffff;
  background-color: #000000;
  border-color: #000000;
  border-radius: 0 !important;
  --button-color: #ffffff;
  --button-background-color: #000000;
  --button-border-color: #000000;
}

.product-details a.size-style.button-secondary[class*="wishlist_btn_wf"]:focus-visible,
.product-details > .group-block > .group-block-content > .buy-buttons-block + * a.size-style.button-secondary:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
  border-radius: 0 !important;
}

/* PDP gallery: wishlist + slide counter overlay */
.product-media-gallery__outer {
  position: relative;
  width: 100%;
}

.product-media-gallery__wishlist {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  text-decoration: none;
  color: var(--color-foreground);
}

.product-media-gallery__wishlist-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgb(var(--color-background-rgb));
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.08);
}

.product-media-gallery__wishlist-circle svg {
  flex-shrink: 0;
}

.product-media-gallery__counter-display {
  position: absolute;
  bottom: 120px;
  left: 16px;
  z-index: 2;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-foreground);
  pointer-events: none;
}

@media screen and (max-width: 749px) {
  .product-media-gallery__counter-display {
    bottom: 100px;
  }
}

/* Desktop: logo abaixo da última miniatura (posição calculada em pdp-media-gallery-counter.js). */
.product-media-gallery__counter-display.is-below-thumbnails {
  top: calc(var(--counter-top) + 8px);
  bottom: auto;
  left: var(--counter-left);
  transform: translateX(-50%);
  white-space: nowrap;
}

/* PDP desktop: imagem principal com altura fixa, para as miniaturas (abaixo dela) terminarem
   alinhadas com os botões Add to Bag / Talk to us nos sapatos. A imagem se encaixa pelo
   "Media fit" da galeria (contain). Zoom e mobile seguem a proporção do editor. */
@media screen and (min-width: 750px) {
  .template-product .product-information__media {
    --wf-pdp-media-height: 527px;
  }

  /* O .product-media-container é o próprio <slideshow-slide>. */
  .template-product .product-information__media slideshow-slide.product-media-container,
  .template-product .product-information__media slideshow-slide .product-media {
    aspect-ratio: auto;
    height: var(--wf-pdp-media-height);
  }
}

/* PDP: miniaturas do carrossel — quadradas, no tamanho do setting "Thumbnail width" da galeria
   (--thumbnail-width, hoje 72px), o mesmo usado no zoom. */
.template-product .product-information__media .slideshow-controls__thumbnails .slideshow-control.slideshow-controls__thumbnail {
  width: var(--thumbnail-width, 72px) !important;
  height: var(--thumbnail-width, 72px) !important;
  min-width: var(--thumbnail-width, 72px);
  min-height: var(--thumbnail-width, 72px);
  max-width: var(--thumbnail-width, 72px);
  max-height: var(--thumbnail-width, 72px);
  aspect-ratio: 1;
  box-sizing: border-box;
}

.template-product .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
  width: 118px !important;
  height: 118px !important;
  min-width: 118px;
  min-height: 118px;
  max-width: 118px;
  max-height: 118px;
  aspect-ratio: 1;
  box-sizing: border-box;
}

/* Mobile: justify text across multiple sections */
@media screen and (max-width: 749px) {
  /* PDP product description metafield */
  .product-information .metafield-multi_line_text_field {
    text-align: justify;
  }

  /* Slideshow slides — text content */
  .slide__content .rte p,
  .slide__content .text-block p {
    text-align: justify;
  }

  /* Slideshow hero — custom typography text */
  .slideshow--wallford-hero .slide__content .custom-typography p {
    text-align: justify;
  }

  /* Split showcase sidebar */
  .split-showcase__sidebar-content p {
    text-align: justify;
  }

  /* Hero container text */
  .hero__container {
    text-align: justify;
  }

  /* Blog excerpt */
  .blog-jhon__excerpt {
    text-align: justify;
  }

  /* PLP intro body */
  .wallford-plp-intro__body p span {
    text-align: justify;
    display: inline-block;
    width: 100%;
  }

  /* Section text blocks (BmUpYz) */
  #shopify-section-template--21537675936000__section_BmUpYz .text-block p {
    text-align: justify;
  }

  /* History/story section (BCnbVA) */
  #shopify-section-template--22153742516480__section_BCnbVA .rte p {
    text-align: justify;
  }

  #shopify-section-template--22153742516480__section_BCnbVA .text-block--ATzYzZFcyNFM1VmVyO__text_cBYLPm {
    --width: 100% !important;
    --max-width: 100% !important;
  }
}

/* Page template: pull first hero behind transparent header.
   Overrides --header-group-height on the element so base.css's
   body:has(.header[transparent]) rule computes the correct -66px offset. */
.template-page .content-for-layout > .shopify-section:first-child {
  --header-group-height: var(--header-height);
}