/** Shopify CDN: Minification failed

Line 222:6 Unexpected "{"
Line 222:7 Expected identifier but found "%"
Line 223:62 Expected identifier but found whitespace
Line 228:7 Expected identifier but found "%"

**/
      body.template-product .product__color-swatches--grouped {
        --swatch-width: 36px;
        margin-bottom: 22px;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
      }

      body.template-product .product__color-swatches--grouped .product__swatch-group {
        width: 100%;
        margin-bottom: 16px;
      }

      .product__color-swatches--grouped .product__swatch-group:last-child {
        margin-bottom: 0;
      }

      .product__color-swatches--grouped .product__swatch-group-label {
        display: block;
        margin-bottom: 8px;
        font-size: 13px;
      }

      .product__color-swatches--grouped .product__color-swatches--inner {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0;
      }

      .product__color-swatches--grouped .product__color-swatch {
        position: relative;
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        max-width: 36px;
        max-height: 36px;
        margin: 0;
        outline: 0;
        overflow: visible !important;
        border-radius: 999px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 0 !important;
        background-color: transparent !important;
        background-image: none !important;
      }

      /* STP-6304: com `body.template-product`, como o resto do bloco: a regra de
         cima nao tem prefixo e tambem vale no quick view (body de colecao/carrinho),
         onde a caixa 44x56 viraria retangulo. Fora da PDP nada muda. */
      body.template-product .product__color-swatches--grouped .product__color-swatch {
        position: relative;
        /* STP-6304 — a area clicavel deixa de ser o circulo: 44x56 (44 de largura
           preserva o touch target minimo; 56 = 5 topo + 34 circulo + 8 gap + 3
           barra + 6 base). `!important` porque o tema trava o swatch em 36x36. */
        width: 44px !important;
        height: 56px !important;
        min-width: 44px !important;
        min-height: 56px !important;
        max-width: 44px !important;
        max-height: 56px !important;
        margin: 0;
        outline: 0;
        overflow: visible !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 5px !important;
        line-height: 0 !important;
        background-color: transparent !important;
        background-image: none !important;
        /* STP-6304: no stepper o <a> vem de pdp-spe-swatch.liquid SEM
           `transparent_swatch_wrapper`, entao carrega o fundo da cor inline com
           `!important`, que nenhuma regra daqui vence. Com a caixa em 44x56 isso
           pintava um retangulo atras da bolinha. `background-clip: text` recorta o
           fundo ao texto do <a>, que nao tem texto: nada e pintado. Quem desenha a
           cor e o fill. */
        -webkit-background-clip: text !important;
        background-clip: text !important;
      }

      body.template-product .product__color-swatches--grouped .product__color-swatch > .product__color-swatch-fill,
      body.template-product .product__color-swatches--grouped .product__color-swatch > .product__color-swatch-image,
      body.template-product .product__color-swatches--grouped .product__color-swatch > img.product__color-swatch-image {
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        /* 34px nos DOIS estados: o circulo nao encolhe mais ao ser selecionado. */
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        /* `!important` obrigatorio: o fill tem `border-radius: inherit` inline e o
           container agora e retangular — sem isto a bolinha virava um quadrado. */
        border-radius: 999px !important;
        transform: none !important;
        flex: 0 0 34px !important;
        margin: 0 !important;
        object-fit: cover !important;
        object-position: center !important;
        box-sizing: border-box !important;
        display: block !important;
        /* Contorno das cores claras (Ivory, Butter): ja vem do `swatch_ring` que o
           product-swatch.liquid poe inline no fill (box-shadow inset 1px). Nao somar
           outro hairline aqui: os dois caem no mesmo pixel e escurecem o anel. */
      }

      body.template-product .product__color-swatches--grouped .product__color-swatch > img.product__color-swatch-image + .product__color-swatch-fill {
        display: none !important;
      }

      /* STP-6304: as duas regras abaixo ficam como no main porque, sem prefixo, sao
         elas que desenham o swatch do quick view (body de colecao/carrinho). Na PDP
         quem manda sao as regras com `body.template-product` deste bloco e do tema. */
      .product__color-swatches--grouped .product__color-swatch::before,
      .product__color-swatches--grouped .product__color-swatch:hover:not(.selected)::before,
      .product__color-swatches--grouped .product__color-swatch.selected::before {
        box-shadow: none;
      }

      .product__color-swatches--grouped .product__color-swatch.selected {
        outline: none !important;
        outline-offset: 0 !important;
        border: 2px solid #111 !important;
        box-shadow: none !important;
      }

      /* O tema desenha o anel de selecao no ::before com box-shadow inset. Aqui ele
         vira a barra rosa: 34x3 ancorada abaixo do circulo. O espaco fica reservado
         em todos os swatches (fundo transparente quando nao selecionado) para nada
         deslocar na troca de cor.
         O seletor com [style*="background-image"] e defensivo, herdado do BR: o <a>
         do stepper (pdp-spe-swatch.liquid) leva o fundo da cor em style inline, e
         uma regra do tema que mire esse atributo nao pode redesenhar o anel na barra. */
      body.template-product .product__color-swatches--grouped .product__color-swatch::before,
      body.template-product .product__color-swatches--grouped .product__color-swatch:hover:not(.selected)::before,
      body.template-product .product__color-swatches--grouped .product__color-swatch.selected::before,
      body.template-product .product__color-swatches--grouped .product__color-swatch[style*="background-image"]::before {
        content: "" !important;
        position: absolute !important;
        /* 5 do padding-top + 34 do circulo + 8 de gap */
        top: 47px !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 34px !important;
        height: 3px !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transition: background-color 0.2s ease-in-out !important;
      }

      body.template-product .product__color-swatches--grouped .product__color-swatch.selected::before,
      body.template-product .product__color-swatches--grouped .product__color-swatch.selected[style*="background-image"]::before {
        background: var(--pdp-swatch-selected-bar) !important;
      }

      /* STP-6304 — o `outline: 0` do swatch apaga o anel de foco do navegador, e a
         barra rosa marca selecao, nao foco. Restaura com `:focus-visible`, que so
         acende na navegacao por teclado e nao no clique de mouse (WCAG 2.4.7).
         Offset NEGATIVO: a faixa de cores tem `overflow-y: hidden` do tamanho da
         caixa, e um anel por fora dela perdia topo e base. Por dentro ele cabe na
         folga de 5px ate o circulo e de 6px abaixo da barra. */
      body.template-product .product__color-swatches--grouped .product__color-swatch:focus-visible,
      body.template-product .product__color-swatches--grouped .product__color-swatch.selected:focus-visible {
        outline: 2px solid var(--color-text, #111) !important;
        outline-offset: -2px !important;
      }
      .product__color-swatches--grouped .pdp-spe-color-group__subtitle {
        display: block;
        margin: 0 0 14px 18px;
        color: #666;
        line-height: 1.25;
      }
      .product__color-swatches--grouped .pdp-spe-color-group__subtitle[hidden] {
        display: none !important;
      }
      .product__color-swatches--grouped .pdp-spe-color-group__row {
        position: relative;
        width: 100%;
      }
      body.template-product .product__color-swatches--grouped [data-pdp-spe-group-items] {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px;
        margin: 0;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 0;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
      }
      body.template-product .product__color-swatches--grouped [data-pdp-spe-group-items]::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
      }
      {%- comment -%}
        NAO reintroduzir um botao sobreposto a faixa de cores. O antigo "+" ficava
        `position: absolute; right: 0; z-index: 2` e a protecao contra sobreposicao
        era `padding-right` no PROPRIO container flex com `overflow-x: auto` — que o
        navegador ignora no fim do scroll. Resultado: rolando ate o fim, a ultima cor
        ficava embaixo do botao e nao dava para clicar. A faixa rola por arraste.
      {%- endcomment -%}
      .product__color-swatches--grouped .pdp-spe-color-group[hidden],
      .product__color-swatches--grouped .pdp-spe-swatch[hidden],
      .product__color-swatches--grouped .pdp-spe-swatch-pool[hidden] {
        display: none !important;
      }
      .product__color-swatches--grouped .product__swatch-group-status {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        flex: 0 0 10px;
        display: inline-block;
      }
      .product__color-swatches--grouped .product__swatch-group-status--ready {
        background: #31a852;
      }
      .product__color-swatches--grouped .product__swatch-group-status--preorder {
        background: #e93f84;
      }
      .pdp-step-picker:not([data-pdp-step-picker-ready]) .pdp-step-picker__color-toolbar {
        display: none !important;
      }
      .product__color-swatches--grouped .pdp-spe-swatch-pool {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      /* Suppress only theme badges; preserve swatch wrappers, labels and subtitles. */
      .product__color-swatches--grouped .pdp-spe-swatch-pool .product-badge,
      .product__color-swatches--grouped .pdp-spe-swatch-pool .product-badges,
      .product__color-swatches--grouped .pdp-spe-color-group .product-badge,
      .product__color-swatches--grouped .pdp-spe-color-group .product-badges {
        display: none !important;
      }

      /* Keep merchandising tags out of the picker without hiding swatch structure. */
      .pdp-step-picker .product__color-swatches--grouped .pdp-spe-swatch > .pdp-spe-swatch__merch-label {
        display: none !important;
      }

      /* FIX #1: Small fancy badges for HEADER (not swatches) */
      body.template-product .product__block--product-header .product-badge {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        padding: 4px 8px;
        border-radius: 12px;
        background: #000;
        color: #fff;
        border: none;
        line-height: 1.2;
        white-space: nowrap;
      }
      body.template-product .product__block--product-header .product-badge--new {
        background: #000;
        color: #fff;
      }
      body.template-product .product__block--product-header .product-badge--sale {
        background: #e74c3c;
        color: #fff;
      }
      body.template-product .product__block--product-header .product-badges {
        gap: 6px;
        margin-bottom: 8px;
      }

      /* FIX #2: Gray out unavailable colors + add strike overlay */
      .pdp-spe-swatch-pool [data-unavailable="true"],
      .pdp-spe-color-group [data-unavailable="true"] {
        opacity: 0.35 !important;
        pointer-events: none !important;
        filter: grayscale(70%);
        position: relative;
      }

      /* Keep the unavailable marker inside the circle despite theme.css's
         shared disabled-swatch width/inset/rotation overrides. */
      body.template-product .product__color-swatches.product__color-swatches--grouped .product__color-swatch[data-unavailable="true"]::after {
        content: '';
        position: absolute;
        /* STP-6304: centro da bolinha (5 + 34/2), nao 50% da caixa de 56px. */
        top: 22px !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: 2px !important;
        height: 28px !important;
        background: rgba(0, 0, 0, 0.6);
        transform: translate(-50%, -50%) rotate(45deg) !important;
        pointer-events: none;
        z-index: 10;
      }

      /* FIX #3: Ensure size selector remains interactive after color selection */
      body.template-product .pdp-step-picker__tab {
        cursor: pointer;
        pointer-events: auto !important;
      }
      body.template-product .pdp-step-picker[data-step="color"] .pdp-step-picker__tab[data-pdp-step-tab="size"] {
        cursor: pointer;
        pointer-events: auto !important;
        opacity: 1 !important;
      }
      body.template-product .pdp-step-picker__tab.is-disabled {
        cursor: default;
      }
      body.template-product .pdp-step-picker__size-hint {
        margin: 6px 0 0;
        font-size: 13px;
        line-height: 1.3;
      }
      body.template-product .pdp-step-picker__size-hint[hidden] {
        display: none;
      }
      body.template-product .pdp-step-picker[data-has-size] .pdp-step-picker__change-size {
        display: inline-flex !important;
        cursor: pointer;
        pointer-events: auto !important;
      }
      /* PATH A: Pool stays visible after size selection (unavailable colors grayed out) */
      /* REMOVED: .pdp-step-picker[data-pdp-step-picker-ready][data-has-size] .pdp-spe-swatch-pool { display: none !important; } */
      /* Pool always visible - unavailable swatches grayed via data-unavailable attribute */

      /* Show pool when no size selected, hide groups */
      .pdp-step-picker[data-pdp-step-picker-ready]:not([data-has-size]) .pdp-spe-color-group {
        display: none !important;
      }

      /* ESPACAMENTO DOS GRUPOS — 2026-09-03.
         O `.product__swatch-group:last-child { margin-bottom: 0 }` deixou de valer
         quando o pool passou a ficar sempre no DOM (fail-safe): o pool virou o
         :last-child, entao o ultimo grupo VISIVEL seguia com 16px de sobra embaixo.

         Em vez de caçar o ultimo com seletor, o espacamento passa a vir do `gap` do
         container flex — que NAO cria espaco para item `display:none`. Um grupo
         escondido nao gera gap, e o ultimo visivel nao deixa sobra. */
      body.template-product .pdp-step-picker .pdp-spe-color-groups {
        gap: 10px;
      }
      body.template-product .pdp-step-picker .pdp-spe-color-group {
        margin-bottom: 0 !important;
      }

      /* O bloco de cor herda `margin-bottom: 24px` da classe generica
         `product__block--medium` do tema. Sendo o ULTIMO elemento do painel, essa
         margem vira 24px de vazio antes do botao de compra — somados aos 14px de
         padding do painel, 38px de nada. Zera so o ultimo bloco do painel do stepper;
         a classe generica segue intacta no resto da PDP. */
      body.template-product .pdp-step-picker__color-panel > .product__block:last-child {
        margin-bottom: 0;
      }
      /* O card rosa de prazo (product-form__spe-availability-card) fica DENTRO do
         stepper e repete, palavra por palavra, o subtitulo do grupo selecionado —
         "Shipping in early November" aparecia duas vezes na mesma tela. Com o stepper
         ativo ele e ruido.

         Condicionar ao `-ready` importa: SEM JS o stepper nao agrupa e o card volta a
         ser a UNICA fonte de prazo da pagina. Esconder incondicionalmente tiraria a
         informacao de quem nao tem JS. */
      body:has(.pdp-step-picker[data-pdp-step-picker-ready]) .product-form__spe-availability-card {
        display: none !important;
      }
      .pdp-step-picker[data-pdp-step-picker-ready] .product-form__spe-availability-card {
        display: none !important;
      }
      /* Keep tab row height before JS marks -ready (display:none caused ~58px CLS). */
      .pdp-step-picker:not([data-pdp-step-picker-ready]) .pdp-step-picker__tabs {
        visibility: hidden;
        pointer-events: none;
      }
      .pdp-step-picker:not([data-pdp-step-picker-ready]) .pdp-spe-swatch[hidden] {
        display: inline-flex !important;
      }
      .product__color-swatches--grouped .pdp-spe-swatch {
        display: inline-flex;
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
      }

  /* STP-6304 — tokens do estado selecionado do swatch de cor. Ficam como custom
     property para que a troca do rosa seja num lugar so; o tema nao tem token
     de marca para esta cor. Declarado so aqui: este bloco de estilo sai sempre que o
     picker renderiza (inclusive no caminho agrupado), e o :root vale para o
     documento inteiro. */
  :root {
    --pdp-swatch-selected-bar: #e9519f;
  }

  body.template-product .product__color-swatches--pdp-normalized .product__color-swatches--inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
  }

  body.template-product .product__color-swatches--pdp-normalized .product__color-swatch {
    position: relative;
    /* STP-6304 — a area clicavel deixa de ser o circulo: 44x56 (44 de largura
       preserva o touch target minimo; 56 = 5 topo + 34 circulo + 8 gap + 3
       barra + 6 base). `!important` porque o tema trava o swatch em 36x36. */
    width: 44px !important;
    height: 56px !important;
    min-width: 44px !important;
    min-height: 56px !important;
    max-width: 44px !important;
    max-height: 56px !important;
    margin: 0;
    outline: 0;
    overflow: visible !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 5px !important;
    line-height: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    /* STP-6304: no stepper o <a> vem de pdp-spe-swatch.liquid SEM
       `transparent_swatch_wrapper`, entao carrega o fundo da cor inline com
       `!important`, que nenhuma regra daqui vence. Com a caixa em 44x56 isso
       pintava um retangulo atras da bolinha. `background-clip: text` recorta o
       fundo ao texto do <a>, que nao tem texto: nada e pintado. Quem desenha a
       cor e o fill. */
    -webkit-background-clip: text !important;
    background-clip: text !important;
  }

  body.template-product .product__color-swatches--pdp-normalized .product__color-swatch > .product__color-swatch-fill,
  body.template-product .product__color-swatches--pdp-normalized .product__color-swatch > .product__color-swatch-image,
  body.template-product .product__color-swatches--pdp-normalized .product__color-swatch > img.product__color-swatch-image {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    /* 34px nos DOIS estados: o circulo nao encolhe mais ao ser selecionado. */
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    /* `!important` obrigatorio: o fill tem `border-radius: inherit` inline e o
       container agora e retangular — sem isto a bolinha virava um quadrado. */
    border-radius: 999px !important;
    transform: none !important;
    flex: 0 0 34px !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    box-sizing: border-box !important;
    display: block !important;
    /* Contorno das cores claras (Ivory, Butter): ja vem do `swatch_ring` que o
       product-swatch.liquid poe inline no fill (box-shadow inset 1px). Nao somar
       outro hairline aqui: os dois caem no mesmo pixel e escurecem o anel. */
  }

  body.template-product .product__color-swatches--pdp-normalized .product__color-swatch > img.product__color-swatch-image + .product__color-swatch-fill {
    display: none !important;
  }

  /* O tema desenha o anel de selecao no ::before com box-shadow inset. Aqui ele
     vira a barra rosa: 34x3 ancorada abaixo do circulo. O espaco fica reservado
     em todos os swatches (fundo transparente quando nao selecionado) para nada
     deslocar na troca de cor.
     O seletor com [style*="background-image"] e defensivo, herdado do BR: o <a>
     do stepper (pdp-spe-swatch.liquid) leva o fundo da cor em style inline, e
     uma regra do tema que mire esse atributo nao pode redesenhar o anel na barra. */
  body.template-product .product__color-swatches--pdp-normalized .product__color-swatch::before,
  body.template-product .product__color-swatches--pdp-normalized .product__color-swatch:hover:not(.selected)::before,
  body.template-product .product__color-swatches--pdp-normalized .product__color-swatch.selected::before,
  body.template-product .product__color-swatches--pdp-normalized .product__color-swatch[style*="background-image"]::before {
    content: "" !important;
    position: absolute !important;
    /* 5 do padding-top + 34 do circulo + 8 de gap */
    top: 47px !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 34px !important;
    height: 3px !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease-in-out !important;
  }

  body.template-product .product__color-swatches--pdp-normalized .product__color-swatch.selected::before,
  body.template-product .product__color-swatches--pdp-normalized .product__color-swatch.selected[style*="background-image"]::before {
    background: var(--pdp-swatch-selected-bar) !important;
  }

  /* STP-6304 — o `outline: 0` do swatch apaga o anel de foco do navegador, e a
     barra rosa marca selecao, nao foco. Restaura com `:focus-visible`, que so
     acende na navegacao por teclado e nao no clique de mouse (WCAG 2.4.7).
     Offset NEGATIVO: a faixa de cores tem `overflow-y: hidden` do tamanho da
     caixa, e um anel por fora dela perdia topo e base. Por dentro ele cabe na
     folga de 5px ate o circulo e de 6px abaixo da barra. */
  body.template-product .product__color-swatches--pdp-normalized .product__color-swatch:focus-visible,
  body.template-product .product__color-swatches--pdp-normalized .product__color-swatch.selected:focus-visible {
    outline: 2px solid var(--color-text, #111) !important;
    outline-offset: -2px !important;
  }

  @media (min-width: 720px) {
    body.template-product .product__color-chips[data-option-buttons] {
      gap: 12px !important;
    }
  }

  body.template-product .pdp-step-picker {
    width: 100%;
    margin: 18px 0 0;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
  }

  body.template-product .pdp-step-picker__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid #ececec;
    background: #f8f8f8;
  }

  body.template-product .pdp-step-picker__tab {
    min-width: 0;
    min-height: 58px;
    padding: 0 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #6d6d6d;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
  }

  body.template-product .pdp-step-picker__tab.is-active {
    border-bottom-color: #e93f84;
    background: #fff;
    color: #e93f84;
  }

  body.template-product .pdp-step-picker__color-panel,
  body.template-product .pdp-step-picker .product__variants-wrapper {
    margin: 0;
    padding: 16px;
  }

  body.template-product .pdp-step-picker__color-toolbar {
    display: grid;
    grid-template-columns: minmax(110px, 148px) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
  }

  body.template-product .pdp-step-picker__size-select {
    min-width: 0;
  }

  body.template-product .pdp-step-picker__size-select select {
    min-height: 52px;
    padding-top: 7px;
    padding-bottom: 7px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
  }

  body.template-product .pdp-step-picker__guide {
    display: flex;
    align-items: center;
    min-width: 0;
  }

  body.template-product .pdp-step-picker__guide:empty {
    display: none;
  }

  body.template-product .pdp-step-picker__guide .product__variant-popup-trigger,
  body.template-product .pdp-step-picker__size-guide-source .product__variant-popup-trigger {
    margin: 0 !important;
  }

  body.template-product .pdp-step-picker__change-size {
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #111;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
  }

  body.template-product .pdp-step-picker__change-size .icon {
    width: 14px;
    height: 14px;
  }

  body.template-product .pdp-step-picker__size-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
  }

  body.template-product .pdp-step-picker__size-title {
    color: #111;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.25;
  }

  /* LRD-BOOT-FIT (2026-09-29): shaft + calf measurement anchors below "Select your size" */
  body.template-product .pdp-step-picker__size-measurements {
    margin: 0;
    font-size: 12px;
    color: #767676;
    line-height: 1.4;
    letter-spacing: 0.01em;
  }

  /* 2026-09-28 (defect reported by Danusia on the live PDP): the tabs are real steps
     again. Step 1 ("Choose your size") shows only the size chips; step 2 ("Choose your
     color") shows only the colour panel, whose toolbar carries the chosen size and the
     "Change size" way back. The 09-25 source wave had made both panels always visible
     ("stay available together") and the 09-28 go-live capture then re-ordered the two
     panels in the DOM on every step change (`orderPanels`) — the customer saw the size
     grid twice, three size controls, and the page jumping up and down on each size pick.
     `scripts/ci/theme-esteira/qa/qa_browser_stepper.py` asserts this one-panel-per-step
     contract; the BR theme never lost it.

     Fail-safe kept: both panels stay in the DOM. Without JavaScript the picker never
     reaches `-ready` and `data-step` stays "size", so size chips and colours render
     together, as before. */
  body.template-product .pdp-step-picker[data-step="color"] .product__option--pdp-size {
    display: none;
  }

  body.template-product .pdp-step-picker[data-pdp-step-picker-ready][data-step="size"] .pdp-step-picker__color-panel {
    display: none;
  }

  /* 2026-10-09 (Marina, 10-08 review: the Bardot Pump showed no colour swatches on first view):
     the 09-28 rule above hides the colour panel on step "size", so every style whose colours live
     in a swatch set (about 780 active products) hid its other colours until a size was picked.
     Show the colour panel on step "size" as well, but only while no size is chosen and only when
     the swatch pool holds at least two swatches (a single-colour style is left as it is). In that
     state the panel toolbar (size + "Change size") and the grouped rows are already hidden, so the
     size grid is not repeated, and the panel drops its bottom padding so the swatches sit close to
     the size heading. After a size pick the picker moves to step "color" exactly as before.
     The :has() guard fails closed to the 09-28 behaviour on a browser without :has() support.
     Rollback: delete this rule. */
  body.template-product .pdp-step-picker[data-pdp-step-picker-ready][data-step="size"]:not([data-has-size]) .pdp-step-picker__color-panel:has([data-pdp-spe-swatch-pool] [data-pdp-spe-swatch]:nth-child(2)) {
    display: block;
    padding-bottom: 0;
  }

  body.template-product .pdp-step-picker[data-step="color"] .pdp-step-picker__color-panel {
    display: block;
  }

  body.template-product .pdp-step-picker[data-step="color"] .product__variants-wrapper {
    padding: 0;
  }

  body.template-product .pdp-step-picker[data-step="color"] .product__variants-wrapper > .product__option:empty {
    display: none;
  }

  body.template-product .pdp-step-picker:not([data-has-size]) .pdp-step-picker__color-toolbar {
    display: none;
  }

  /* @larroude/pdp-step-picker — STP-6409 (08/10/2026): o rótulo "Select your size" do botão de
     compra volta a aparecer no passo de tamanho. A regra de 29/09 que o deixava visualmente oculto
     (para não repetir o título acima dos tamanhos) fazia o botão parecer vazio e quebrado.
     Rollback: recolocar aquela regra (visually-hidden em [data-add-to-cart-text] no passo "size"). */

  @media (min-width: 960px) {
    body.template-product .pdp-step-picker {
      margin-top: 20px;
    }

    body.template-product .pdp-step-picker__tab {
      min-height: 62px;
      font-size: 16px;
    }

    body.template-product .pdp-step-picker__color-panel,
    body.template-product .pdp-step-picker .product__variants-wrapper {
      padding: 18px 20px 20px;
    }

    body.template-product .pdp-step-picker__color-toolbar {
      grid-template-columns: minmax(128px, 160px) minmax(160px, 1fr) auto;
      gap: 18px;
      margin-bottom: 18px;
    }
  }

  @media (max-width: 480px) {
    body.template-product .pdp-step-picker {
      margin-top: 16px;
      border-radius: 7px;
    }

    body.template-product .pdp-step-picker__tab {
      min-height: 54px;
      padding: 0 8px;
      font-size: 14px;
    }

    body.template-product .pdp-step-picker__color-panel,
    body.template-product .pdp-step-picker .product__variants-wrapper {
      padding: 14px;
    }

    body.template-product .pdp-step-picker__color-toolbar {
      grid-template-columns: minmax(96px, 122px) minmax(0, 1fr) auto;
      gap: 10px;
    }

    body.template-product .pdp-step-picker__guide .product__variant-popup-trigger,
    body.template-product .pdp-step-picker__size-guide-source .product__variant-popup-trigger {
      padding: 0 !important;
      border: 0 !important;
      font-size: 13px !important;
      white-space: nowrap;
    }

    body.template-product .pdp-step-picker__change-size {
      font-size: 13px;
    }
  }