/*
 * Animalart — estilos do comedouro (Composite Products), autohospedados no tema.
 * Origem: samuelmarmelo/animalart-product-page, novo-css-animalart-comedouro.css (commit edc6de0).
 * Antes servido de /css-js/ por snippet no wp-admin. Atualizar copiando o arquivo do repositório de origem.
 */
/* ================================================================
   ANIMALART — Comedouro: Layout Customizado Página de Produto
   ================================================================
   Inserir em: Aparência → Customizar → CSS Adicional
   OU: wp-content/themes/flatsome-child/style.css
   ================================================================

   ESTRUTURA ALVO (DESKTOP):
   ┌──────────────────────────────────────────────────────────┐  ┌───────────────┐
   │  Personalize as cores dos anéis conforme desejar:        │  │ R$ 149,00     │
   │  ┌───────────┬──────────────────────┬───────────────┐   │  │ [-] [1] [+]   │
   │  │ [imagens  │ ANEL 1  [▼ Vermelho] │               │   │  │ [ADICIONAR]   │
   │  │  dos anéis│ ANEL 2  [▼ Branco  ] │ [tigela 1]    │   │  └───────────────┘
   │  │  empilha- │ ANEL 3  [▼ Cinza   ] │               │   │
   │  │  das +    │ ...                  │ [tigela 2]    │   │
   │  │  tigela   │                      │               │   │
   │  │  no topo] │                      │               │   │
   │  └───────────┴──────────────────────┴───────────────┘   │
   └──────────────────────────────────────────────────────────┘

   ESTRUTURA ALVO (MOBILE ≤768px):
   ┌────────────────────────────────────────────────────────────┐
   │  ┌──────────────────┐  ┌─────────────────────────────────┐ │
   │  │  [tigela +       │  │  ANEL 1  [▼ Branco]             │ │
   │  │   anéis          │  │  ANEL 2  [▼ Azul  ]             │ │
   │  │   empilhados]    │  │  ANEL 3  [▼ Branco]             │ │
   │  │                  │  │  ...                            │ │
   │  │                  │  │  ANEL N  [▼ Branco]             │ │
   │  └──────────────────┘  └─────────────────────────────────┘ │
   │  Escolha a tigela:                                          │
   │  ┌──────────────────┐                                       │
   │  │ [tigela 1]       │                                       │
   │  │ [tigela 2]       │                                       │
   │  └──────────────────┘                                       │
   └────────────────────────────────────────────────────────────┘

   ARQUITETURA CSS:
   - .add-to-cart-container: position:relative, width:calc(100% - 310px)
   - .composite_data: position:absolute, left:calc(100% + 24px)
   - form.composite_form: grid 3 colunas → [imagem(170px)] [anéis(1fr)] [tigelas(220px)]
   - #comedouro-image-stack: criado pelo JS, grid-column:1
   - .bowl-img-wrapper: tigela selecionada exibida no topo do stack (z-index máximo)
   - grid-row dos thumbnails e data: controlados pelo JS (mobile-aware)
   ================================================================ */


/* ================================================================
   § 1 — BOX CINZA (container dos anéis + tigela)
   ================================================================ */

.add-to-cart-container.form-flat {
    position: relative !important;
    overflow: visible !important;
    width: calc(100% - 310px) !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 4px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    background: #fff !important;
}


/* ================================================================
   § 2 — composite_data: PAINEL À DIREITA DO BOX CINZA
   ================================================================ */

.composite_form.single .composite_data {
    position: absolute !important;
    top: 0 !important;
    left: calc(100% + 24px) !important;
    width: 270px !important;
    transform: none !important;
}

.composite_form.single .composite_data .composite_wrap {
    display: block !important;
    transform: none !important;
}

.composite_form.single .composite_data .composite_message {
    display: none !important;
}

.composite_form.single .composite_data .composite_availability {
    display: none !important;
}

/* Preço */
.composite_form.single .composite_data .composite_price {
    margin-bottom: 10px !important;
}
.composite_form.single .composite_data .composite_price .amount {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #111 !important;
}

/* Texto após preço */
div.composite_price::after {
    content: 'Favor revisar todas as cores e selecionar a tigela para prosseguir ao carrinho:';
    display: block;
    font-size: 11px;
    color: #666;
    margin-top: 8px;
    line-height: 1.4;
}

/*
   Quantidade + botão na MESMA LINHA:
   - quantity: flex:0 0 auto, sem borda externa (apenas separadores internos ─/+)
   - botão: flex:1 1 auto, cresce para preencher o restante da linha
   - nowrap garante linha única independente de override do tema
*/
.composite_form.single .composite_data .composite_button,
.add-to-cart-container .composite_form.single .composite_data .composite_button {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
}

.composite_form.single .composite_data .ux-quantity.quantity {
    flex: 0 0 auto !important;
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    height: 42px !important;
    width: fit-content !important;
}
.composite_form.single .composite_data .ux-quantity__button {
    width: 32px !important;
    height: 42px !important;
    border: none !important;
    background: #f5f5f5 !important;
    font-size: 18px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}
.composite_form.single .composite_data .ux-quantity__button:hover {
    background: #e8e8e8 !important;
}
.composite_form.single .composite_data input.qty {
    width: 42px !important;
    height: 42px !important;
    border: none !important;
    border-left: 1px solid #ddd !important;
    border-right: 1px solid #ddd !important;
    text-align: center !important;
    font-size: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    -moz-appearance: textfield !important;
    background: #fff !important;
}
.composite_form.single .composite_data input.qty::-webkit-outer-spin-button,
.composite_form.single .composite_data input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}

/* Botão "Adicionar ao Carrinho" — VERDE, mesma linha da quantidade
   flex: 1 1 auto → cresce para preencher o espaço restante na linha */
.composite_form.single .composite_data button.composite_add_to_cart_button,
.composite_form.single .composite_data button.single_add_to_cart_button {
    flex: 1 1 auto !important;
    order: 2 !important;
    width: auto !important;
    min-width: unset !important;
    min-height: 46px !important;
    height: auto !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.3 !important;
    padding: 10px 12px !important;
    border: none !important;
    border-radius: 4px !important;
    background-color: #2e7d32 !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: background-color 0.15s !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}
.composite_form.single .composite_data button.composite_add_to_cart_button:hover,
.composite_form.single .composite_data button.single_add_to_cart_button:hover {
    background-color: #1b5e20 !important;
}

/* Botão OCULTO enquanto nenhuma tigela está selecionada */
.composite_form.single .composite_data button.disabled,
.composite_form.single .composite_data button:disabled {
    display: none !important;
}

/* Status */
.composite_form.single .composite_data .composite_status {
    font-size: 12px !important;
    color: #666 !important;
    margin-top: 8px !important;
}

.quantity.buttons_added.form-flat { margin-bottom: 0 !important; }
.single_add_to_cart_button { margin-bottom: 0 !important; }


/* ================================================================
   § 3 — FORMULÁRIO: GRID 3 COLUNAS
   Col 1 (170px): imagens empilhadas dos anéis + tigela → criadas pelo JS
   Col 2 (1fr):   dropdowns de cor de cada anel
   Col 3 (220px): seleção da tigela
   ================================================================ */
#comedouro-image-stack {width:300px!important}

.composite_form.single {
    display: grid !important;
    grid-template-columns: 300px 1fr 1fr !important;
    column-gap: 16px !important;
    row-gap: 0 !important;
    align-items: center !important;
    position: static !important;
    /* Força linhas compactas (~38px/linha); stack e thumbnails extravasam via overflow:visible.
       Para 14 anéis: 14×38=532px ≈ totalH=523px, boa correspondência visual. */
    grid-auto-rows: 38px !important;
}

/* Label "Escolha as cores dos anéis:" — col 2, linha 1 */
.composite_form.single::before {
    content: "Escolha as cores dos anéis:";
    display: block !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #222 !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    align-self: start !important;
}

/* Anéis (dropdowns) → col 2 */
.composite_form.single .composite_component.options-style-dropdowns {
    grid-column: 2 !important;
    grid-row: auto !important;
}

/* Tigelas (thumbnails) → col 3
   grid-row controlado pelo JS do plugin via inline style */
.composite_form.single .composite_component.options-style-thumbnails {
    grid-column: 3 !important;
    align-self: start !important;
}


/* ================================================================
   § 4 — COLUNA DE IMAGENS (#comedouro-image-stack)
   Criado pelo JS. Posicionado em grid-column:1, grid-row:2/span N
   ================================================================ */

#comedouro-image-stack {
    grid-column: 1 !important;
    /* grid-row definido pelo JS: '2 / span N' (alinhado com dropdowns) */
    position: relative !important;
    align-self: start !important;
    overflow: visible !important;  /* Anéis visíveis além da grid-area compacta */
    /* width e height definidos pelo JS */
}

/* Cada wrapper de imagem de anel dentro do stack */
#comedouro-image-stack .ring-img-wrapper {
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    pointer-events: none !important;
}

#comedouro-image-stack .ring-img-wrapper img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Wrapper da TIGELA selecionada — posicionada sobre o anel 1.
   top/left/width/transform são controlados pelo JS via style.setProperty('...', 'important'),
   usando BOWL_TOP_OFFSET, BOWL_LEFT_PERCENT, BOWL_WIDTH_PERCENT e BOWL_TRANSLATE_Y.
   Os valores abaixo são fallback caso o JS não carregue — devem espelhar as constantes do JS. */
#comedouro-image-stack .bowl-img-wrapper {
    position: absolute !important;
    left: 10% !important;           /* fallback — espelha JS BOWL_LEFT_PERCENT = 10 */
    top: 0 !important;              /* fallback — espelha JS BOWL_TOP_OFFSET = 0 */
    width: 80% !important;          /* fallback — espelha JS BOWL_WIDTH_PERCENT = 80 */
    pointer-events: none !important;
    /* translateY fixo medido manualmente (desktop). Fallback espelha JS BOWL_TRANSLATE_Y = 120px. */
    transform: translateY(120px) !important;
}

/* Mobile: translateY menor medido manualmente (JS BOWL_TRANSLATE_Y_MOBILE = 65px).
   O JS aplica via setProperty com 'important' e tem precedência sobre esta regra.
   Esta regra serve apenas como fallback caso o JS não carregue. */
@media (max-width: 768px) {
    #comedouro-image-stack .bowl-img-wrapper {
        transform: translateY(65px) !important;
    }
}

#comedouro-image-stack .bowl-img-wrapper img {
      width: 100% !important;
      height: auto !important;
      display: block !important;
      mix-blend-mode: multiply !important;
  }


/* ================================================================
   § 5 — LAYOUT INTERNO DE CADA ANEL (col 2)
   Flexbox: [ANEL N] [────── select ──────]
   ================================================================ */

.composite_component.options-style-dropdowns {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 3px 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    min-height: 36px !important;
}
/* Título "ANEL N" */
.composite_component.options-style-dropdowns .component_title_wrapper {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    width: 58px !important;
}
.composite_component.options-style-dropdowns h2.component_title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    color: #333 !important;
    line-height: 1 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    display: block !important;
    width: 100% !important;
}
.composite_component.options-style-dropdowns .step_title_text {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #333 !important;
}
.composite_component.options-style-dropdowns .aria_title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
}

/* Área de seleção */
.composite_component.options-style-dropdowns .component_inner {
    flex: 1 !important;
    min-width: 0 !important;
    padding-bottom: 0 !important;
    display: block !important;
}
.composite_component.options-style-dropdowns .component_selections,
.composite_component.options-style-dropdowns .component_options {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ocultar elementos desnecessários */
.composite_component.options-style-dropdowns .component_section_title,
.composite_component.options-style-dropdowns .component_description_wrapper {
    display: none !important;
}

/* component_content: oculto visualmente, mas JS lê as imagens de lá */
.composite_component.options-style-dropdowns .component_content {
    display: none !important;
}

/* Wrapper do select */
.composite_component.options-style-dropdowns .component_options_inner {
    display: block !important;
    float: none !important;
    clear: both !important;
    overflow: visible !important;
}
.composite_component.options-style-dropdowns .component_options_select_wrapper {
    display: block !important;
    margin: 0 !important;
}

/* SELECT */
.composite_component.options-style-dropdowns select.component_options_select {
    display: block !important;
    width: 100% !important;
    min-width: 140px !important;
    height: 30px !important;
    padding: 4px 28px 4px 8px !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 8px 5px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    font-size: 13px !important;
    color: #222 !important;
    cursor: pointer !important;
    position: static !important;
    margin: 0 !important;
}
.composite_component.options-style-dropdowns select.component_options_select:focus {
    outline: none !important;
    border-color: #ffcd00 !important;
    box-shadow: 0 0 0 2px rgba(255,205,0,0.25) !important;
}


/* ================================================================
   § 6 — TIGELAS (col 3 no desktop; col 1 abaixo do stack no mobile)
   ================================================================ */

.composite_component.options-style-thumbnails::before {
    content: "Agora escolha a tigela:";
    display: block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #222 !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #eee !important;
}

.composite_component.options-style-thumbnails .component_title_wrapper,
.composite_component.options-style-thumbnails .component_description_wrapper,
.composite_component.options-style-thumbnails .component_pagination,
.composite_component.options-style-thumbnails .component_options_select_wrapper,
.composite_component.options-style-thumbnails .component_section_title,
.composite_component.options-style-thumbnails .component_content {
    display: none !important;
}

#component_1654692765 .component_option_thumbnails_container {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

#component_1654692765 .component_option_thumbnail_container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#component_1654692765 .component_option_thumbnail {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 8px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    float: none !important;
    max-width: none !important;
    min-height: 0 !important;
    text-align: center !important;
    transition: border-color 0.15s !important;
}
#component_1654692765 .component_option_thumbnail:hover {
    border-color: #ccc !important;
}
#component_1654692765 .component_option_thumbnail.selected {
    border-color: #ffcd00 !important;
    background: #fffef0 !important;
}

#component_1654692765 .thumbnail_image {
    width: 100% !important;
    margin: 0 0 4px !important;
}
#component_1654692765 .thumbnail_image img {
    display: block !important;
    width: 100% !important;
    max-width: 180px !important;
    height: 80px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

#component_1654692765 .thumbnail_description {
    flex: 1 !important;
    padding: 0 !important;
}
#component_1654692765 .thumbnail_title {
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    display: block !important;
    color: #222 !important;
    margin: 0 0 6px !important;
}

#component_1654692765 .thumbnail_buttons {
    display: block !important;
}
#component_1654692765 .component_option_thumbnail_select {
    display: inline-block !important;
    background-color: #ffcd00 !important;
    color: #000 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}
  /* Tigela SELECIONADA — botao exibe checkmark (✓) em vez de "SELECIONAR" */
  #component_1654692765 .component_option_thumbnail.selected .component_option_thumbnail_select {
      background-color: #ffcd00 !important;
      font-size: 0 !important;
      letter-spacing: 0 !important;
      width: 36px !important;
      height: 28px !important;
      padding: 0 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 4px !important;
      position: relative !important;
  }
  #component_1654692765 .component_option_thumbnail.selected .component_option_thumbnail_select::after {
      content: "✓";
      font-size: 16px !important;
      font-weight: 900 !important;
      color: #222 !important;
      line-height: 1 !important;
      display: block !important;
  }


/* ================================================================
   § 7 — SUBSTITUIÇÃO DE TEXTOS
   ================================================================ */

.options-style-dropdowns .component_section_title .select_label {
    font-size: 0 !important;
    line-height: 0 !important;
}
.options-style-dropdowns .component_section_title .select_label::before {
    content: "Cor do anel:";
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important;
    line-height: 1.4 !important;
}

.options-style-thumbnails .component_section_title .select_label {
    font-size: 0 !important;
    line-height: 0 !important;
}
.options-style-thumbnails .component_section_title .select_label::before {
    content: "Escolha a tigela:";
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #222 !important;
    line-height: 1.4 !important;
}


/* ================================================================
   § 8 — CORREÇÕES GERAIS
   ================================================================ */

.composite_form.single .cp_clearfix::after,
.composite_form.single .cp_clearfix::before {
    display: none !important;
}
div.component_inner { padding-bottom: 0 !important; }
div.component_option_thumbnail { gap: 0 !important; }
form.cart { gap: 0 !important; }
div.composite_component { margin-bottom: 0 !important; padding-bottom: 0 !important; }
div.composite_message { display: none !important; }

.add-to-cart-container.form-flat {min-height:36em}


/* ================================================================
   § 9 — RESPONSIVIDADE
   ================================================================ */

@media (max-width: 1000px) {
    .composite_form.single {
        grid-template-columns: 180px 1fr 200px !important;
    }
    .add-to-cart-container.form-flat {
        width: calc(100% - 290px) !important;
    }
    .composite_form.single .composite_data {
        width: 250px !important;
        left: calc(100% + 16px) !important;
    }
}

/*
   MOBILE (≤768px)
   ───────────────
   Layout: 2 colunas
     Col 1 (130px): pilha de anéis (com tigela no topo) — alinhada à esquerda
     Col 2 (1fr):   seletores de cor (ANEL 1 … ANEL N) — alinhados à direita

   Tigelas: fluem abaixo do stack na col 1 (grid-row: auto via CSS !important,
   pois o JS respeita a flag isMobile() e não seta inline grid-row nesse caso)

   composite_data (preço + botão): abaixo de tudo, position:static
*/
@media (max-width: 768px) {
    /* Box cinza: largura total, padding reduzido para ganhar espaço */
    .add-to-cart-container.form-flat {
        width: 100% !important;
        padding: 8px !important;
    }

    /*
      Grid 2 colunas: ~42% para a pilha de anéis (proporcional à tela) + resto para seletores.
      Usar % em vez de px fixo faz a coluna da imagem crescer/diminuir com a tela,
      mantendo a proporção visual da referência em qualquer celular.
    */
    .composite_form.single {
        grid-template-columns: 42% 1fr !important;
        column-gap: 8px !important;
        grid-auto-rows: auto !important; /* desktop usa 38px fixo; mobile usa altura natural do conteúdo */
    }

    /* Label "Escolha as cores dos anéis:" → col 2 */
    .composite_form.single::before {
        grid-column: 2 !important;
        grid-row: 1 !important;
        font-size: 10px !important;
        margin-bottom: 2px !important;
    }

    /* Dropdowns (anéis) → col 2, mais compactos */
    .composite_form.single .composite_component.options-style-dropdowns {
        grid-column: 2 !important;
        grid-row: auto !important;
        min-height: 28px !important;
        padding: 1px 0 !important;
    }

    /* Título ANEL N: ~20% mais estreito que desktop (58px → 46px) */
    .composite_component.options-style-dropdowns .component_title_wrapper {
        width: 46px !important;
    }
    .composite_component.options-style-dropdowns h2.component_title,
    .composite_component.options-style-dropdowns .step_title_text {
        font-size: 10px !important;
    }

    /* Select: menor para caber no espaço reduzido */
    .composite_component.options-style-dropdowns select.component_options_select {
        min-width: 0 !important;
        font-size: 11px !important;
        height: 26px !important;
        padding: 2px 20px 2px 6px !important;
    }

    /*
      Tigelas → LARGURA TOTAL (col 1 / -1), abaixo do stack.
      Spanning ambas as colunas garante espaço suficiente para as cards lado a lado.
    */
    .composite_form.single .composite_component.options-style-thumbnails {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        align-self: start !important;
        border-top: 1px solid #eee !important;
        padding-top: 10px !important;
        margin-top: 4px !important;
    }

    /* Rótulo das tigelas no mobile */
    .composite_component.options-style-thumbnails::before {
        content: "Escolha a tigela:" !important;
        font-size: 11px !important;
        margin-bottom: 8px !important;
        padding-bottom: 6px !important;
    }

    /* Tigelas: lado a lado (2 por linha) em container de largura total */
    #component_1654692765 .component_option_thumbnails_container {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    #component_1654692765 .component_option_thumbnail_container {
        width: calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
    }

    #component_1654692765 .thumbnail_image img {
        height: 70px !important;
        max-width: none !important;
    }

    #component_1654692765 .component_option_thumbnail {
        padding: 8px !important;
    }

    #component_1654692765 .thumbnail_title {
        font-size: 11px !important;
    }

    #component_1654692765 .component_option_thumbnail_select {
        font-size: 10px !important;
        padding: 5px 10px !important;
    }

    /* composite_data → abaixo de tudo, largura total */
    .composite_form.single .composite_data {
        position: static !important;
        width: 100% !important;
        left: auto !important;
        margin-top: 12px !important;
        border-top: 1px solid #e0e0e0 !important;
        padding-top: 12px !important;
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    /* Image stack: col 1, largura forçada a 100% da coluna
       (o JS define inline width:155px — o !important aqui o sobrescreve) */
    #comedouro-image-stack {
        grid-column: 1 !important;
        width: 100% !important;
        overflow: hidden !important;
        /* grid-row: 2 / span N definido pelo JS */
    }

    #comedouro-image-stack .ring-img-wrapper {
        width: 100% !important;
        left: 0 !important;
    }

    /* Botão full-width no mobile */
    .composite_form.single .composite_data button.composite_add_to_cart_button,
    .composite_form.single .composite_data button.single_add_to_cart_button {
        font-size: 13px !important;
        min-height: 50px !important;
        height: auto !important;
    }
}

/*
   ── Telas estreitas (≤480px): reduz coluna de imagem mas MANTÉM o stack visível.
   A pilha de anéis deve aparecer em qualquer celular, inclusive iPhones de 375px.
   O layout 2 colunas é mantido — apenas a col de imagem fica mais compacta.
*/
@media (max-width: 480px) {
    /* Mantém a proporção 42%/1fr também em telas menores (375px).
       Coluna de imagem proporcional garante a aparência visual da referência. */
    .composite_form.single {
        grid-template-columns: 42% 1fr !important;
        column-gap: 6px !important;
    }

    /* Select de cor dos anéis: remove min-width para caber na coluna estreita */
    .composite_component.options-style-dropdowns select.component_options_select {
        min-width: 0 !important;
        font-size: 12px !important;
    }

    /* Título ANEL N: diminui width para deixar mais espaço ao select */
    .composite_component.options-style-dropdowns .component_title_wrapper {
        width: 48px !important;
    }

    /* Tigelas: mantém lado a lado mesmo em telas estreitas */
    #component_1654692765 .component_option_thumbnails_container {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    #component_1654692765 .component_option_thumbnail_container {
        width: calc(50% - 3px) !important;
        max-width: calc(50% - 3px) !important;
    }

    #component_1654692765 .thumbnail_image img {
        height: 60px !important;
    }
}

/*
   ── Telas muito estreitas (≤320px): último recurso — layout 1 coluna e stack oculto.
   Cobre apenas aparelhos muito antigos/compactos.
*/
@media (max-width: 320px) {
    .composite_form.single {
        grid-template-columns: 1fr !important;
    }

    .composite_form.single::before,
    .composite_form.single .composite_component.options-style-dropdowns,
    .composite_form.single .composite_component.options-style-thumbnails,
    .composite_form.single .composite_data {
        grid-column: 1 !important;
    }

    #comedouro-image-stack {
        display: none !important;
    }
}

/* ================================================================
   § 10 — COMEDOURO PRÓPRIO (plugin Animalart Core, frente R4)
   Formulário nativo `form.animalart-comedouro-form`, carregado só com a
   chave `animalart_comedouro_nativo` ligada. Mesma grade do Composite:
   Col 1: pilha (#comedouro-image-stack, criada pelo mesmo JS)
   Col 2: uma linha por anel com as amostras de cor
   Col 3: tigelas
   Preço e botão: painel à direita do box, como o composite_data.
   As regras do Composite acima não mudam.
   ================================================================ */

.animalart-comedouro-form {
    display: grid !important;
    grid-template-columns: 300px minmax(0, 1.3fr) minmax(0, 1fr) !important;
    column-gap: 16px !important;
    row-gap: 0 !important;
    align-items: start !important;
    position: static !important;
    margin: 0 !important;
}

.animalart-comedouro-form__rotulo,
.animalart-comedouro-tigelas__rotulo {
    display: block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #222 !important;
    margin: 0 0 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.animalart-comedouro-form__rotulo {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

/* Anéis: um bloco na col 2, linha 2 (a pilha ocupa as linhas 2..N+1 da col 1) */
.animalart-comedouro-aneis {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
}

/* Linha do anel: [ANEL N] [cor escolhida] / amostras */
.animalart-comedouro-anel {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 8px !important;
    padding: 4px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    min-height: 36px !important;
}

.animalart-comedouro-anel__titulo {
    flex: 0 0 58px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    color: #333 !important;
}

.animalart-comedouro-anel__cor {
    flex: 1 1 auto !important;
    font-size: 13px !important;
    color: #222 !important;
}

.animalart-comedouro-anel__opcoes {
    flex: 1 1 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

.animalart-comedouro-opcao {
    position: relative !important;
    display: inline-flex !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    overflow: hidden !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s !important;
}

.animalart-comedouro-opcao:hover {
    border-color: #ccc !important;
}

.animalart-comedouro-opcao.is-selected,
.animalart-comedouro-opcao:has(input:checked) {
    border-color: #ffcd00 !important;
    box-shadow: 0 0 0 2px rgba(255, 205, 0, 0.35) !important;
}

.animalart-comedouro-opcao:has(input:focus-visible),
.animalart-comedouro-tigela:has(input:focus-visible) {
    outline: 2px solid #222 !important;
    outline-offset: 2px !important;
}

.animalart-comedouro-opcao.is-esgotado,
.animalart-comedouro-tigela.is-esgotado {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}

.animalart-comedouro-opcao__input,
.animalart-comedouro-tigela__input {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: 0 !important;
    cursor: inherit !important;
}

.animalart-comedouro-opcao__amostra,
.animalart-comedouro-opcao__amostra img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.animalart-comedouro-opcao__amostra img {
    object-fit: cover !important;
    transform: scale(1.6) !important;
}

/* Tigelas → col 3 (grid-row definido pelo JS: 1 / span N+1) */
.animalart-comedouro-tigelas {
    grid-column: 3 !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.animalart-comedouro-tigelas__rotulo {
    margin-bottom: 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #eee !important;
}

.animalart-comedouro-tigela {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 8px !important;
    margin: 0 !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    text-align: center !important;
    transition: border-color 0.15s !important;
}

.animalart-comedouro-tigela:hover {
    border-color: #ccc !important;
}

.animalart-comedouro-tigela.is-selected,
.animalart-comedouro-tigela:has(input:checked) {
    border-color: #ffcd00 !important;
    background: #fffef0 !important;
}

.animalart-comedouro-tigela__imagem {
    width: 100% !important;
    margin: 0 0 4px !important;
}

.animalart-comedouro-tigela__imagem img {
    display: block !important;
    width: 100% !important;
    max-width: 180px !important;
    height: 80px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

.animalart-comedouro-tigela__titulo {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #222 !important;
    margin: 0 0 6px !important;
}

.animalart-comedouro-tigela__botao {
    display: inline-block !important;
    background-color: #ffcd00 !important;
    color: #000 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
}

/* Tigela escolhida: botão vira ✓ (como no Composite) */
.animalart-comedouro-tigela.is-selected .animalart-comedouro-tigela__botao,
.animalart-comedouro-tigela:has(input:checked) .animalart-comedouro-tigela__botao {
    font-size: 0 !important;
    letter-spacing: 0 !important;
    width: 36px !important;
    height: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.animalart-comedouro-tigela.is-selected .animalart-comedouro-tigela__botao::after,
.animalart-comedouro-tigela:has(input:checked) .animalart-comedouro-tigela__botao::after {
    content: "\2713";
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #222 !important;
    line-height: 1 !important;
}

/* Preço + quantidade + botão: painel à direita do box cinza */
.animalart-comedouro-dados {
    position: absolute !important;
    top: 0 !important;
    left: calc(100% + 24px) !important;
    width: 270px !important;
}

.animalart-comedouro-dados__preco {
    margin-bottom: 10px !important;
}

.animalart-comedouro-dados__preco .amount {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #111 !important;
}

.animalart-comedouro-dados__aviso {
    font-size: 11px !important;
    color: #666 !important;
    margin: 0 0 10px !important;
    line-height: 1.4 !important;
}

.animalart-comedouro-dados__botao {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
}

.animalart-comedouro-dados__botao .quantity {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.animalart-comedouro-dados__botao input.qty {
    width: 56px !important;
    height: 46px !important;
    text-align: center !important;
    font-size: 15px !important;
}

.animalart-comedouro-dados__botao button.single_add_to_cart_button {
    flex: 1 1 auto !important;
    min-height: 46px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    padding: 10px 12px !important;
    border: none !important;
    border-radius: 4px !important;
    background-color: #2e7d32 !important;
    color: #fff !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.animalart-comedouro-dados__botao button.single_add_to_cart_button:hover {
    background-color: #1b5e20 !important;
}

@media (max-width: 1000px) {
    .animalart-comedouro-form {
        grid-template-columns: 180px minmax(0, 1fr) 200px !important;
    }
    .animalart-comedouro-dados {
        width: 250px !important;
        left: calc(100% + 16px) !important;
    }
}

@media (max-width: 768px) {
    .animalart-comedouro-form {
        grid-template-columns: 42% minmax(0, 1fr) !important;
        column-gap: 8px !important;
    }

    .animalart-comedouro-form__rotulo {
        font-size: 10px !important;
        margin-bottom: 2px !important;
    }

    .animalart-comedouro-anel__titulo {
        flex-basis: 46px !important;
        font-size: 10px !important;
    }

    .animalart-comedouro-opcao {
        width: 26px !important;
        height: 26px !important;
    }

    .animalart-comedouro-tigelas {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        border-top: 1px solid #eee !important;
        padding-top: 10px !important;
        margin-top: 4px !important;
    }

    .animalart-comedouro-tigelas__rotulo {
        flex: 1 1 100% !important;
        font-size: 11px !important;
    }

    .animalart-comedouro-tigela {
        width: calc(50% - 5px) !important;
    }

    .animalart-comedouro-tigela__imagem img {
        height: 70px !important;
        max-width: none !important;
    }

    .animalart-comedouro-dados {
        position: static !important;
        width: 100% !important;
        grid-column: 1 / -1 !important;
        margin-top: 12px !important;
        border-top: 1px solid #e0e0e0 !important;
        padding-top: 12px !important;
    }
}

@media (max-width: 320px) {
    .animalart-comedouro-form {
        grid-template-columns: 1fr !important;
    }

    .animalart-comedouro-form__rotulo,
    .animalart-comedouro-aneis,
    .animalart-comedouro-tigelas,
    .animalart-comedouro-dados {
        grid-column: 1 !important;
    }

    .animalart-comedouro-form #comedouro-image-stack {
        display: none !important;
    }
}


/* ================================================================
   § 11 — PÁGINA DO COMEDOURO PRÓPRIO (frente R4)
   Cópia do layout da página do produto composto de
   assets/css/modules/product.css (seções "produto composto em duas
   colunas" e "referência exata do montador composite"), trocando
   product-type-composite por product-type-animalart_comedouro e as classes
   do Composite pelas do formulário nativo. Esta folha só carrega no
   comedouro (composto ou próprio com a chave ligada).
   ================================================================ */

/* ---------- Animalart: produto composto em duas colunas ----------
 *
 * O produto de comedouro tem duas experiências visuais próprias: o mockup
 * criado dentro do `composite_form` e o painel nativo de compra (`composite_data`).
 * A galeria WooCommerce continua presente no DOM para que o motor de variações
 * e seus fallbacks permaneçam seguros, mas não participa da apresentação.
 */
.single-product div.product.product-type-animalart_comedouro {
	grid-template-columns: minmax(0, 1fr);
}

.single-product div.product.product-type-animalart_comedouro > .woocommerce-product-gallery {
	display: none !important;
}

.single-product div.product.product-type-animalart_comedouro > .summary {
	grid-column: 1 / -1;
	grid-row: 1;
	width: 100% !important;
}

.single-product div.product.product-type-animalart_comedouro > :not(.woocommerce-product-gallery):not(.summary) {
	grid-column: 1 / -1;
}

@media (max-width: 782px) {
	.single-product div.product.product-type-animalart_comedouro {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.single-product div.product.product-type-animalart_comedouro > .summary {
		display: block;
		grid-column: 1 / -1;
	}

	/* Composto: uma coluna na ordem do DOM (resumo, relacionados,
	   características, prova social, galeria), sem as linhas fixas do
	   produto simples. */
	.single-product div.product.product-type-animalart_comedouro > :not(.summary) {
		grid-row: auto;
	}

	.single-product div.product.product-type-animalart_comedouro > .summary > * {
		grid-column: auto;
		grid-row: auto;
	}

	.single-product div.product.product-type-animalart_comedouro > .summary > .product_title {
		white-space: normal;
		text-wrap: balance;
	}
}

/* ---------- Animalart: referência exata do montador composite ----------
 *
 * Desktop: o formulário ocupa a caixa esquerda e seu `composite_data` fica
 * na coluna de compra à direita. A ordem do summary é: form/compra, frete,
 * compartilhar, salvar e informações adicionais.
 */
@media (min-width: 783px) {
	.single-product div.product.product-type-animalart_comedouro {
		display: block;
		max-width: 1440px;
		padding: 64px 16px 72px;
	}

	.single-product div.product.product-type-animalart_comedouro > .summary {
		display: block;
		position: relative;
	}

	.single-product div.product.product-type-animalart_comedouro > .summary > .woocommerce-breadcrumb,
	.single-product div.product.product-type-animalart_comedouro > .summary > .woocommerce-product-rating,
	.single-product div.product.product-type-animalart_comedouro > .summary > .animalart-product-artist,
	.single-product div.product.product-type-animalart_comedouro > .summary > p.price,
	.single-product div.product.product-type-animalart_comedouro > .summary > .product_meta {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		margin: -1px !important;
		padding: 0 !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0) !important;
		clip-path: inset(50%) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	.single-product div.product.product-type-animalart_comedouro > .summary > .product_title {
		max-width: none;
		margin: 0 0 14px;
		color: #222;
		font-size: clamp(24px, 2.2vw, 30px);
		font-weight: 900;
		line-height: 1.1;
		letter-spacing: 0;
		text-transform: uppercase;
	}

	.single-product div.product.product-type-animalart_comedouro > .summary > .product_title::before {
		content: "";
		display: block;
		width: 150px;
		height: 3px;
		margin: 0 0 16px;
		background: #ffcd00;
	}

	.single-product div.product.product-type-animalart_comedouro > .summary > .woocommerce-product-details__short-description {
		max-width: none;
		margin: 0 0 28px;
		color: #222;
		font-size: 13px;
		line-height: 1.5;
	}

	.single-product div.product.product-type-animalart_comedouro > .summary > .yith-add-to-wishlist-button-block--single {
		display: none !important;
	}

	.single-product div.product.product-type-animalart_comedouro > .summary > .animalart-comedouro-intro {
		margin: 0 0 16px;
		color: #222;
		font-size: 16px;
		font-weight: 400;
		line-height: 1.3;
	}

	.single-product div.product.product-type-animalart_comedouro > .summary > .animalart-comedouro-container {
		position: relative !important;
		box-sizing: border-box !important;
		width: calc(100% - 300px) !important;
		min-height: 574px !important;
		margin: 0 !important;
		padding: 16px 14px 18px !important;
		border: 1px solid #d0d0d0 !important;
		border-radius: 4px !important;
		background: #fff !important;
	}

	.single-product div.product.product-type-animalart_comedouro > .summary > .animalart-comedouro-container > form.animalart-comedouro-form {
		position: relative !important;
		box-sizing: border-box !important;
		display: grid !important;
		width: 100% !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
	}

	.single-product div.product.product-type-animalart_comedouro > .summary > .animalart-comedouro-container > form.animalart-comedouro-form .animalart-comedouro-dados {
		top: 24px !important;
		left: calc(100% + 24px) !important;
		z-index: 3;
		grid-row: 1 !important;
		grid-column: 3 !important;
		width: 270px !important;
	}

	.single-product div.product.product-type-animalart_comedouro > .summary > .animalart-product-shipping-calculator {
		width: 100%;
		margin: 42px 0 0;
	}

		.single-product div.product.product-type-animalart_comedouro > .summary > .share-widget,
		.single-product div.product.product-type-animalart_comedouro > .summary > .animalart-favorite-btn--single,
		.single-product div.product.product-type-animalart_comedouro > .summary > .animalart-product-social-row {
			margin-top: 14px;
			margin-bottom: 0;
		}

	.single-product div.product.product-type-animalart_comedouro > .summary > .animalart-product-content {
		margin-top: 52px;
		padding-top: 0;
		border-top: 0;
	}

	.single-product div.product.product-type-animalart_comedouro .animalart-product-content__description {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0) !important;
		clip-path: inset(50%) !important;
		white-space: nowrap !important;
	}

	.single-product div.product.product-type-animalart_comedouro .animalart-product-content__additional {
		position: relative;
		margin-top: 0;
		padding: 52px 0 0;
		border-top: 0;
	}

	.single-product div.product.product-type-animalart_comedouro .animalart-product-content__additional::before {
		content: "";
		position: absolute;
		top: 20px;
		left: 0;
		width: 168px;
		height: 3px;
		background: #ffcd00;
	}

	.single-product div.product.product-type-animalart_comedouro .animalart-product-content__additional h2 {
		margin: 0 0 32px;
		font-size: 14px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.2px;
	}
}

@media (max-width: 782px) {
	.single-product div.product.product-type-animalart_comedouro > .summary > .animalart-comedouro-container {
		width: 100% !important;
		margin-top: 56px !important;
		border: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	.single-product div.product.product-type-animalart_comedouro > .summary > .product_title {
		font-size: 22px;
	}

	.single-product div.product.product-type-animalart_comedouro > .summary > .woocommerce-product-details__short-description {
		font-size: 12px;
	}

	.single-product div.product.product-type-animalart_comedouro > .summary > .animalart-comedouro-intro {
		margin-bottom: 12px;
		font-size: 14px;
	}

	.single-product div.product.product-type-animalart_comedouro > .summary > .animalart-comedouro-container > form.animalart-comedouro-form {
		width: 100% !important;
		min-height: 0 !important;
		padding: 0 !important;
	}

	.single-product div.product.product-type-animalart_comedouro > .summary > .animalart-comedouro-container > form.animalart-comedouro-form .animalart-comedouro-dados {
		position: static !important;
		grid-row: auto !important;
		grid-column: 1 / -1 !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
	}

	.single-product div.product.product-type-animalart_comedouro > .summary > .animalart-product-shipping-calculator {
		margin-top: 28px;
	}

	.single-product div.product.product-type-animalart_comedouro .animalart-product-content__additional {
		padding-top: 42px;
	}
}