/**
 * product-page.css
 * Página de produto do design system (marmitissima-design, produto.html +
 * assets/css/product-page.css): trilha, galeria (a do Magento/Bluesky, com o
 * visual do design) + coluna de informações, abas, "Você também pode gostar"
 * e barra fixa de compra.
 * Carregado só no produto (Magento_Catalog/layout/catalog_product_view.xml do
 * tema commerce_templates). Valores em px (design em rem, raiz 16px).
 * O "+ Adicionar"/stepper e os cards vêm de product-finder.css (.mm-pf).
 */
.mm-product-page {
  --color-accent: #ed3237;
  --color-accent-dark: #be282c;
  --color-accent-soft: #fde6e7;
  --color-primary-dark: #000000;
  --color-text: #201e1e;
  --color-text-secondary: #6e6c6c;
  --color-text-inverse: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #f4f4f4;
  --color-border: #e4e4e4;
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.06);
  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;
}

.mm-product-page .page-main,
.mm-product-page .product-page__sticky-bar {
  font-family: 'Manrope', sans-serif;
}

/* ===== Trilha (mesmo estilo da categoria, ver category-page.css) ===== */
.mm-product-page .product-page-breadcrumb {
  padding: 20px 0 0;
}

.mm-product-page .category-banner__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: #6e6c6c;
}

.mm-product-page .category-banner__breadcrumb a {
  color: #6e6c6c;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.mm-product-page .category-banner__breadcrumb a:hover {
  color: var(--color-accent-dark);
  text-decoration: none;
}

.mm-product-page .category-banner__breadcrumb span[aria-current] {
  font-weight: 700;
  color: #201e1e;
}

/* ===== Galeria + informações (grade 1fr 1fr, 64px entre as colunas) ===== */
.mm-product-page .product-main-content {
  padding: 24px 0 64px;
}

.mm-product-page .product-main-content > .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: flex-start;
  margin: 0;
}

.mm-product-page .product-main-content > .row > [class*="col-"] {
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
}

/* Foto principal: moldura do design (cantos 24px, fundo cinza, sombra suave) */
.mm-product-page .product.media .col_thumb {
  position: relative;
}

.mm-product-page .product.media #gallery-images {
  border-radius: 24px;
  overflow: hidden;
  background-color: var(--color-surface-alt);
  box-shadow: var(--shadow-soft);
}

.mm-product-page .product.media .gallery-img img {
  object-fit: cover;
}

.mm-product-page .product.media .col_nav .gallery-img {
  border-radius: 10px;
  overflow: hidden;
}

.mm-product-page .product-page__media-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 3;
  padding: 8px 16px;
  border-radius: 999px;
  background-color: var(--color-primary-dark);
  color: var(--color-text-inverse);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}

.mm-product-page .product-page__media-badge[hidden] {
  display: none;
}

/* ===== Coluna de informações ===== */
.mm-product-page .product-info-main {
  width: 100%;
  float: none;
}

.mm-product-page .product-page__info {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.mm-product-page .product-page__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  text-decoration: none;
  transition: gap var(--transition-fast);
}

.mm-product-page .product-page__eyebrow:hover {
  gap: 10px;
  color: var(--color-accent-dark);
  text-decoration: none;
}

.mm-product-page .product-page__eyebrow svg {
  width: 13px;
  height: 13px;
  transform: rotate(180deg);
}

.mm-product-page .product-page__title {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-primary-dark);
}

.mm-product-page .product-page__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mm-product-page .product-page__tag {
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-alt);
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Macros: versão maior dos cardzinhos vermelhos do card de produto */
.mm-product-page .product-page__macros {
  display: flex;
  gap: 10px;
}

.mm-product-page .product-page__macro {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  border-radius: 14px;
  background-color: var(--color-accent);
}

.mm-product-page .product-page__macro-value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-text-inverse);
}

.mm-product-page .product-page__macro-label {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mm-product-page .product-page__description {
  margin: 0;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.mm-product-page .product-page__divider {
  width: 100%;
  margin: 0;
  border: none;
  border-top: 1px solid var(--color-border);
}

.mm-product-page .product-page__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.mm-product-page .product-page__price,
.mm-product-page .product-page__price .price {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-primary-dark);
}

.mm-product-page .product-page__price .price-box {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
}

.mm-product-page .product-page__price .price-label {
  display: none;
}

.mm-product-page .product-page__price .old-price .price {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: line-through;
}

.mm-product-page .product-page__portion {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-secondary);
}

/* "+ Adicionar" maior (56px), mesmo padrão botão → stepper do card */
.mm-product-page .product-page__add {
  position: relative;
  height: 56px;
}

.mm-product-page .product-page__add .product-add {
  --add-chip-size: 56px;
  height: 56px;
}

.mm-product-page .product-page__add .product-add__button,
.mm-product-page .product-page__add .product-add__qty {
  font-size: 15px;
}

.mm-product-page .product-page__add .product-add__button svg {
  width: 18px;
  height: 18px;
}

/* Sem o contorno preto de foco do tema (fica só o foco de teclado) */
.product-page__add .product-add__button,
.product-page__add .product-add__btn,
.product-page__sticky-add .product-add__button,
.product-page__sticky-add .product-add__btn {
  outline: none;
  box-shadow: none !important;
}

.product-page__add .product-add__btn:focus-visible,
.product-page__sticky-add .product-add__btn:focus-visible {
  outline: 2px solid #201e1e;
  outline-offset: 2px;
}

.mm-product-page .product-page__add .product-add__btn svg {
  width: 18px;
  height: 18px;
}

/* Formulário do Magento (produtos com opções), com o visual do design */
.mm-product-page .product-page__form.is-hidden {
  display: none;
}

.mm-product-page .product-page__form .product-add-form {
  margin: 0;
  padding: 0;
}

.mm-product-page .product-page__form .product-options-wrapper .label {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text);
}

.mm-product-page .product-page__form select,
.mm-product-page .product-page__form input[type="text"],
.mm-product-page .product-page__form input[type="number"] {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  font-family: inherit;
}

.mm-product-page .product-page__form .box-tocart .actions {
  flex: 1;
}

.mm-product-page .product-page__form .action.tocart {
  width: 100%;
  height: 56px;
  border: none;
  border-radius: 999px;
  background-color: var(--color-accent);
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  box-shadow: none;
  transition: background-color var(--transition-fast);
}

.mm-product-page .product-page__form .action.tocart:hover,
.mm-product-page .product-page__form .action.tocart:focus {
  border: none;
  background-color: var(--color-accent-dark);
  color: #ffffff;
}

/* "Compre agora" do Bluesky e ícones de pagamento não existem no design */
.mm-product-page .product-page__form .buy-now,
.mm-product-page .product-page__form [class*="buynow"],
.mm-product-page .product-page__form [class*="buy_now"],
.mm-product-page .trust_seal {
  display: none !important;
}

/* ===== Kit (produto bundle + "Monte seu Kit" do Doma_Catalog) =====
   Fluxo padrão do Magento_Bundle (catalog_product_view_type_bundle.xml do
   tema): na coluna fica o "Personalizar e adicionar ao carrinho"; ao clicar,
   abre embaixo (.bundle-options-container) o "Monte seu Kit" à esquerda e o
   resumo (quantidade, "Adicionar ao carrinho", mensagens) à direita. */
.mm-product-page .product-page__price .price-to {
  display: none;
}

.mm-product-page .product-page__price .price-from {
  margin: 0;
}

/* Botão "Personalizar e adicionar ao carrinho" = "+ Adicionar" do design */
.mm-product-page .product-page__customize {
  height: auto;
}

.mm-product-page .product-page__customize .bundle-actions {
  margin: 0;
}

.mm-product-page .product-page__customize #bundle-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0 24px;
  border: none !important;
  border-radius: 999px !important;
  background: var(--color-accent) !important;
  color: #ffffff !important;
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  text-transform: none;
  box-shadow: none !important;
  transition: background-color var(--transition-fast);
}

.mm-product-page .product-page__customize #bundle-slide::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mm-product-page .product-page__customize #bundle-slide:hover,
.mm-product-page .product-page__customize #bundle-slide:focus {
  background: var(--color-accent-dark) !important;
}

.mm-product-page .product-page__customize #bundle-slide span {
  color: #ffffff;
}

/* Seção do kit (aberta pelo botão) */
.mm-product-page .bundle-options-container {
  clear: both;
  font-family: 'Manrope', sans-serif;
}

.mm-product-page .bundle-options-container .product-add-form {
  padding: 8px 0 64px;
}

.mm-product-page .bundle-options-container #product_addtocart_form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 40px;
  align-items: start;
}

.mm-product-page .bundle-options-container #product_addtocart_form > input,
.mm-product-page .bundle-options-container #product_addtocart_form > script {
  display: none;
}

.mm-product-page .bundle-options-container .bundle-options-wrapper,
.mm-product-page .bundle-options-container .block-bundle-summary {
  float: none;
  order: 0;
  width: auto !important;
  margin: 0;
  padding: 0;
}

/* Posição fixa na grade (o tema muda a ordem do resumo) */
.mm-product-page .bundle-options-container .bundle-options-wrapper {
  grid-column: 1;
  grid-row: 1;
}

.mm-product-page .bundle-options-container .block-bundle-summary {
  grid-column: 2;
  grid-row: 1;
}

@media (max-width: 991px) {
  .mm-product-page .bundle-options-container .block-bundle-summary {
    grid-column: 1;
    grid-row: 2;
  }
}

.mm-product-page .bundle-options-container .product-options-wrapper,
.mm-product-page .bundle-options-container .fieldset-bundle-options,
.mm-product-page .bundle-options-container .product-options-bottom {
  margin: 0;
  padding: 0;
  border: none;
}

/* Título "Personalizar <produto>" → mesmo título de seção do design */
.mm-product-page .bundle-options-container .fieldset-bundle-options > legend {
  display: block;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  border: none;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-primary-dark);
}

.mm-product-page .bundle-options-container .fieldset-bundle-options > legend + br {
  display: none;
}

/* "Voltar para detalhes do produto" = link "Voltar para…" do design */
.mm-product-page .bundle-options-container .action.back.customization {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 20px;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  color: var(--color-accent-dark);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
}

.mm-product-page .bundle-options-container .action.back.customization::before {
  content: '←';
}

.mm-product-page .bundle-options-container .action.back.customization:hover {
  border: none;
  background: none;
  color: var(--color-accent-dark);
}

.mm-product-page .bundle-options-container .product-options-wrapper p.required {
  display: none;
}

/* Resumo à direita: cartão fixo ao rolar (sticky do próprio Magento) */
.mm-product-page .bundle-options-container .block-bundle-summary {
  padding: 22px !important;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.mm-product-page .bundle-options-container .block-bundle-summary > .title {
  display: block;
  margin: 0 0 16px;
  padding: 0;
  border: none;
}

.mm-product-page .bundle-options-container .block-bundle-summary > .title strong {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-text);
}

.mm-product-page .bundle-options-container .bundle-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

.mm-product-page .bundle-options-container .bundle-info > .product-image-container {
  display: none;
}

.mm-product-page .bundle-options-container .bundle-info .product-details {
  width: 100%;
  margin: 0;
  padding: 0;
}

.mm-product-page .bundle-options-container .bundle-info .product.name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
}

.mm-product-page .bundle-options-container .bundle-info .stock {
  margin: 4px 0 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-secondary);
}

/* O preço/resumo do bundle não acompanha o "Monte seu Kit" (ele marca os
   checkboxes por JS) — o total certo fica no próprio "Monte seu Kit" */
.mm-product-page .bundle-options-container .block-bundle-summary .price-box,
.mm-product-page .bundle-options-container .bundle-summary,
.mm-product-page .bundle-options-container #instant-purchase {
  display: none !important;
}

.mm-product-page .bundle-options-container .box-tocart {
  margin: 0;
}

.mm-product-page .bundle-options-container .box-tocart .fieldset {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
  margin: 0;
}

.mm-product-page .bundle-options-container .box-tocart .field.qty {
  flex-shrink: 0;
  align-items: center;
  height: 56px;
  margin: 0;
  padding: 0 4px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #ffffff;
}

.mm-product-page .bundle-options-container .box-tocart .field.qty .input-text.qty {
  width: 36px;
  height: 44px;
  border: none;
  background: none;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
}

.mm-product-page .bundle-options-container .box-tocart .field.qty a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--color-text);
}

.mm-product-page .bundle-options-container .box-tocart .actions {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0;
}

.mm-product-page .bundle-options-container .action.tocart {
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0 16px;
  border: none !important;
  border-radius: 999px !important;
  background: var(--color-accent) !important;
  color: #ffffff !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  text-transform: none;
  box-shadow: none !important;
}

.mm-product-page .bundle-options-container .action.tocart:hover,
.mm-product-page .bundle-options-container .action.tocart:focus {
  background: var(--color-accent-dark) !important;
}

.mm-product-page .bundle-options-container .action.tocart span {
  color: #ffffff;
}

@media (max-width: 991px) {
  .mm-product-page .bundle-options-container #product_addtocart_form {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* No celular o resumo não gruda: fica no fim da lista */
  .mm-product-page .bundle-options-container .block-bundle-summary {
    position: static !important;
    top: auto !important;
  }
}

/* "Monte seu Kit" */
.mm-product-page .doma-kit-builder {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  font-family: 'Manrope', sans-serif;
}

.mm-product-page .doma-kit-builder__title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 800;
  color: var(--color-text);
}

.mm-product-page .doma-kit-builder__hint {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.mm-product-page .doma-kit-builder__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mm-product-page .doma-kit-builder__row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: #ffffff;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.mm-product-page .doma-kit-builder__row--selected {
  border-color: var(--color-accent);
  background-color: #fff8f8;
}

.mm-product-page .doma-kit-builder__image {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  background-color: var(--color-surface-alt);
}

.mm-product-page .doma-kit-builder__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.mm-product-page .doma-kit-builder__name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
}

.mm-product-page .doma-kit-builder__description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.mm-product-page .doma-kit-builder__additional {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background-color: var(--color-accent-soft);
  color: var(--color-accent-dark);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}

.mm-product-page .doma-kit-builder__available {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.mm-product-page .doma-kit-builder__stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mm-product-page .doma-kit-builder__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  min-width: 0;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.mm-product-page .doma-kit-builder__btn:hover,
.mm-product-page .doma-kit-builder__btn:focus {
  border: none;
  background-color: var(--color-accent-dark);
  color: #ffffff;
  box-shadow: none;
}

.mm-product-page .doma-kit-builder__btn:active {
  transform: scale(0.92);
}

.mm-product-page .doma-kit-builder__btn:disabled {
  background-color: var(--color-surface-alt);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}

.mm-product-page .doma-kit-builder__qty {
  min-width: 24px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--color-primary-dark);
}

.mm-product-page .doma-kit-builder__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--color-border);
  font-size: 13px;
  color: var(--color-text-secondary);
}

.mm-product-page .doma-kit-builder__summary strong {
  color: var(--color-text);
}

.mm-product-page .doma-kit-builder__total-price {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-primary-dark) !important;
}

.mm-product-page .doma-kit-builder__message:not(:empty) {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent-dark);
}

@media (max-width: 480px) {
  .mm-product-page .doma-kit-builder__row {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .mm-product-page .doma-kit-builder__image {
    width: 52px;
    height: 52px;
  }

  .mm-product-page .doma-kit-builder__stepper {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* Cotação de frete (CotaFrete) */
.mm-product-page .product-page__shipping {
  margin: 0;
}

.mm-product-page .product-page__shipping > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* Selos de confiança */
.mm-product-page .product-page__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.mm-product-page .product-page__trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-secondary);
}

.mm-product-page .product-page__trust-item svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-accent-dark);
}

/* ===== Abas ===== */
.mm-product-page .product-tabs {
  padding: 8px 0 64px;
  font-family: 'Manrope', sans-serif;
}

.mm-product-page .product-tabs__nav {
  display: flex;
  gap: 28px;
  margin-bottom: 28px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-bottom: 1px solid var(--color-border);
}

.mm-product-page .product-tabs__nav::-webkit-scrollbar {
  display: none;
}

.mm-product-page .product-tabs__btn {
  flex-shrink: 0;
  margin: 0 0 -1px;
  padding: 14px 6px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.mm-product-page .product-tabs__btn:hover,
.mm-product-page .product-tabs__btn:focus {
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--color-text);
}

.mm-product-page .product-tabs__btn.is-active,
.mm-product-page .product-tabs__btn.is-active:hover,
.mm-product-page .product-tabs__btn.is-active:focus {
  color: var(--color-accent-dark);
  border-bottom-color: var(--color-accent);
}

/* O tema põe borda preta em botão com foco — nas abas só vale a linha de baixo */
.mm-product-page .product-tabs .product-tabs__btn {
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  outline: none;
  box-shadow: none !important;
}

.mm-product-page .product-tabs .product-tabs__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* Avaliações: formulário e lista do Magento com o visual do design */
.mm-product-page .product-tabs__panel--reviews .review-legend,
.mm-product-page .product-tabs__panel--reviews .review-title {
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  color: var(--color-text);
}

.mm-product-page .product-tabs__panel--reviews input[type="text"],
.mm-product-page .product-tabs__panel--reviews textarea {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  font-family: inherit;
}

.mm-product-page .product-tabs__panel--reviews input[type="text"]:focus,
.mm-product-page .product-tabs__panel--reviews textarea:focus {
  border-color: var(--color-accent);
  box-shadow: none;
}

.mm-product-page .product-tabs__panel--reviews .action.submit {
  min-width: 200px;
  height: 48px;
  padding: 0 28px;
  border: none;
  border-radius: 999px;
  background-color: var(--color-accent);
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  box-shadow: none;
  transition: background-color var(--transition-fast);
}

.mm-product-page .product-tabs__panel--reviews .action.submit:hover,
.mm-product-page .product-tabs__panel--reviews .action.submit:focus {
  border: none;
  background-color: var(--color-accent-dark);
  color: #ffffff;
}

.mm-product-page .product-tabs__btn .counter {
  font-size: 12px;
}

.mm-product-page .product-tabs__btn .counter::before {
  content: '(';
}

.mm-product-page .product-tabs__btn .counter::after {
  content: ')';
}

.mm-product-page .product-tabs__panel {
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.mm-product-page .product-tabs__panel[data-tab-panel="ingredientes"] {
  max-width: 640px;
}

.mm-product-page .product-tabs__panel--reviews {
  max-width: 820px;
}

.mm-product-page .product-tabs__panel[hidden] {
  display: none;
}

.mm-product-page .product-tabs__panel p {
  margin: 0 0 12px;
}

.mm-product-page .product-tabs__description > :last-child {
  margin-bottom: 0;
}

/* Ingredientes: grade de 2 colunas, cada um com um selo circular */
.mm-product-page .product-tabs__ingredient-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mm-product-page .product-tabs__ingredient-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.mm-product-page .product-tabs__ingredient-icon {
  display: flex;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-accent-soft);
  color: var(--color-accent-dark);
}

.mm-product-page .product-tabs__ingredient-icon svg {
  width: 18px;
  height: 18px;
}

.mm-product-page .product-tabs__note {
  margin-top: 22px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* Modo de preparo: passos numerados */
.mm-product-page .product-tabs__steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.mm-product-page .product-tabs__steps li {
  display: flex;
  gap: 14px;
  margin: 0;
  counter-increment: step;
}

.mm-product-page .product-tabs__steps li::before {
  content: counter(step);
  display: flex;
  flex: 0 0 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-accent-soft);
  color: var(--color-accent-dark);
  font-size: 13px;
  font-weight: 800;
}

/* Vídeo: thumbnail do YouTube; o player entra no clique (product-page.js) */
.mm-product-page .product-tabs__video {
  margin-top: 26px;
  max-width: 420px;
}

.mm-product-page .product-tabs__video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background-color: var(--color-surface-alt);
  box-shadow: var(--shadow-soft);
}

.mm-product-page .product-tabs__video-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mm-product-page .product-tabs__video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.mm-product-page .product-tabs__video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(20, 12, 10, 0.55);
  color: var(--color-text-inverse);
  box-shadow: none;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.mm-product-page .product-tabs__video-frame:hover .product-tabs__video-play,
.mm-product-page .product-tabs__video-play:focus {
  border: none;
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
  transform: translate(-50%, -50%) scale(1.08);
}

.mm-product-page .product-tabs__video-play svg {
  width: 20px;
  height: 20px;
  margin-left: 3px;
}

.mm-product-page .product-tabs__video-label {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}

/* Tabela nutricional */
.mm-product-page .product-tabs__table {
  width: 100%;
  max-width: 420px;
  border-collapse: collapse;
}

.mm-product-page .product-tabs__table caption {
  display: table-caption;
  margin-top: 14px;
  padding: 0;
  caption-side: bottom;
  text-align: left;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.mm-product-page .product-tabs__table th,
.mm-product-page .product-tabs__table td {
  padding: 12px 4px;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: none;
}

.mm-product-page .product-tabs__table th {
  text-align: left;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.mm-product-page .product-tabs__table td {
  text-align: right;
  font-weight: 700;
  color: var(--color-primary-dark);
  font-variant-numeric: tabular-nums;
}

/* ===== "Você também pode gostar" ===== */
.mm-product-page .product-page__related {
  padding-bottom: 64px;
}

/* ===== Barra fixa de compra ===== */
.product-page__sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  opacity: 0;
  transform: translateY(100%);
  background-color: #ffffff;
  border-top: 1px solid #e4e4e4;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
  transition: transform 240ms ease, opacity 240ms ease;
}

.product-page__sticky-bar.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.product-page__sticky-bar-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  box-sizing: border-box;
  width: 95%;
  max-width: var(--layout__max-width, 1440px);
  margin: 0 auto;
  padding: 14px 15px;
}

.product-page__sticky-media {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f4f4f4;
}

.product-page__sticky-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-page__sticky-info {
  flex: 1;
  min-width: 0;
}

.product-page__sticky-name,
.product-page__sticky-price {
  margin: 0;
}

.product-page__sticky-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: #201e1e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-page__sticky-price {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  color: #000000;
}

.product-page__sticky-add {
  flex-shrink: 0;
  width: 200px;
}

/* "Voltar ao topo" do tema sobe junto com a barra */
body.mm-sticky-bar-visible #back-top {
  bottom: 176px;
  transition: bottom 240ms ease;
}

@media (min-width: 769px) {
  body.mm-sticky-bar-visible #back-top {
    bottom: 100px;
  }
}

.product-page__sticky-add .product-add {
  --add-chip-size: 46px;
  height: 46px;
}

.product-page__sticky-add .product-add__button {
  font-size: 15px;
}

/* ===== Responsivo ===== */
@media (max-width: 1024px) {
  .mm-product-page .product-main-content > .row {
    gap: 40px;
  }

  .mm-product-page .product-page__title {
    font-size: 26px;
  }
}

@media (max-width: 768px) {
  .mm-product-page .product-main-content {
    padding: 16px 0 48px;
  }

  .mm-product-page .product-main-content > .row {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .mm-product-page .product-tabs {
    padding-bottom: 48px;
  }

  /* Fica acima da barra inferior fixa do tema (.fixed-bottom, 50px) */
  .product-page__sticky-bar {
    bottom: 50px;
  }

  .product-page__sticky-bar-inner {
    width: 100%;
    padding-block: 10px;
  }

  .product-page__sticky-add {
    width: 140px;
  }

  .product-page__sticky-name {
    display: none;
  }
}

@media (max-width: 480px) {
  .mm-product-page .product-page__title {
    font-size: 22px;
  }

  .mm-product-page .product-page__price,
  .mm-product-page .product-page__price .price {
    font-size: 32px;
  }

  .mm-product-page .product-tabs__ingredient-list {
    grid-template-columns: 1fr;
  }
}