/* ================================================================
   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;
    }
}