/* =========================================
   DESATIVAR STICKY do Resumo/Finalizar Pedido
   (para não acompanhar o scroll)
   ========================================= */
@media (min-width: 1024px) {

  /* coluna do resumo (sidebar) */
  .checkout-index-index #checkout
  .amcheckout-main-container.am-submit-summary
  .amcheckout-column.-sidebar {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    align-self: flex-start;
  }

  /* container do resumo */
  .checkout-index-index #checkout
  .amcheckout-main-container.am-submit-summary
  .opc-block-summary.amcheckout-summary-container {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* bloco do botão "Finalizar Pedido" */
  .checkout-index-index #checkout
  .amcheckout-main-container.am-submit-summary
  .checkout-payment-method.submit {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    transform: none !important;
  }
}

/* =========================================================
   Amasty One Step Checkout (OSC) - Layout Volvo + Preto
   Escopado só no checkout
   ========================================================= */
.checkout-index-index #checkout {
  --osc-black: #000;
  --osc-border: #d9d9d9;
  --osc-bg-title: #f2f2f2;
}

/* ---------- (A) VOLTAR IMAGEM NO RESUMO + CONTROLAR TAMANHO ---------- */
.checkout-index-index #checkout .opc-block-summary .product-image-container{
  display: inline-block !important;
  width: 60px !important;
  height: 60px !important;
  vertical-align: top;
}

.checkout-index-index #checkout .opc-block-summary .product-image-container .product-image-wrapper{
  width: 60px !important;
  height: 60px !important;
}

.checkout-index-index #checkout .opc-block-summary .product-image-container img{
  width: 60px !important;
  height: 60px !important;
  object-fit: contain;
}

.checkout-index-index #checkout .opc-block-summary .product-item .product{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.checkout-index-index #checkout .opc-block-summary .product-item-details{
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- (B) LAYOUT 2 COLUNAS MAIS “ABERTO” ---------- */
@media (min-width: 1024px){
  .checkout-index-index #checkout .amcheckout-main-container.-layout-2columns{
    display: flex;
    gap: 40px;
    align-items: flex-start;
  }

  .checkout-index-index #checkout .amcheckout-column.-main{
    flex: 1 1 auto;
    min-width: 0;
  }

  .checkout-index-index #checkout .amcheckout-column.-sidebar{
    flex: 0 0 380px;
  }
}

/* ---------- (C) FRETE EM 1 COLUNA ---------- */
.checkout-index-index #checkout table.table-checkout-shipping-method.amcheckout-shipping-methods{
  border: 0;
  width: 100%;
}

.checkout-index-index #checkout table.table-checkout-shipping-method.amcheckout-shipping-methods thead{
  display: none;
}

.checkout-index-index #checkout table.table-checkout-shipping-method.amcheckout-shipping-methods tr.amcheckout-method{
  flex: 0 0 100% !important;
  max-width: 100% !important;
  display: grid;
  grid-template-columns: 34px 110px 1fr 160px;
  align-items: center;
  gap: 8px 14px;
  width: 100%;
  margin: 0 0 12px;
  padding: 16px;
  border: 1px solid var(--osc-border);
  background: #fff;
  cursor: pointer;
}

.checkout-index-index #checkout table.table-checkout-shipping-method.amcheckout-shipping-methods tr.amcheckout-method > td{
  padding: 0 !important;
  border: 0 !important;
}

.checkout-index-index #checkout table.table-checkout-shipping-method.amcheckout-shipping-methods tr.amcheckout-method > td:nth-child(1){ grid-column: 1; }
.checkout-index-index #checkout table.table-checkout-shipping-method.amcheckout-shipping-methods tr.amcheckout-method > td:nth-child(2){ grid-column: 2; }
.checkout-index-index #checkout table.table-checkout-shipping-method.amcheckout-shipping-methods tr.amcheckout-method > td:nth-child(3){ grid-column: 3; }
.checkout-index-index #checkout table.table-checkout-shipping-method.amcheckout-shipping-methods tr.amcheckout-method > td:nth-child(4){ grid-column: 4; }

.checkout-index-index #checkout table.table-checkout-shipping-method.amcheckout-shipping-methods tr.amcheckout-method.-selected,
.checkout-index-index #checkout table.table-checkout-shipping-method.amcheckout-shipping-methods tr.amcheckout-method:hover{
  border-color: var(--osc-black);
}

@media (max-width: 768px){
  .checkout-index-index #checkout table.table-checkout-shipping-method.amcheckout-shipping-methods tr.amcheckout-method{
    grid-template-columns: 34px 1fr;
  }
  .checkout-index-index #checkout table.table-checkout-shipping-method.amcheckout-shipping-methods tr.amcheckout-method > td:nth-child(2){
    grid-column: 2;
    justify-self: start;
  }
  .checkout-index-index #checkout table.table-checkout-shipping-method.amcheckout-shipping-methods tr.amcheckout-method > td:nth-child(3),
  .checkout-index-index #checkout table.table-checkout-shipping-method.amcheckout-shipping-methods tr.amcheckout-method > td:nth-child(4){
    grid-column: 1 / -1;
    margin-left: 34px;
  }
}

/* ---------- (D) TÍTULOS E ÍCONE ---------- */
.checkout-index-index #checkout .amcheckout-title{
  background: var(--osc-bg-title);
}

.checkout-index-index #checkout .amcheckout-title > .amcheckout-icon,
.checkout-index-index #checkout .amcheckout-title > .amcheckout-icon:before,
.checkout-index-index #checkout .amcheckout-title > .amcheckout-icon:after{
  border-color: var(--osc-black) !important;
}

/* ---------- (E) RADIOS / CHECKBOX ---------- */
.checkout-index-index #checkout input[type="radio"],
.checkout-index-index #checkout input[type="checkbox"]{
  accent-color: var(--osc-black);
}

.checkout-index-index #checkout input[type="radio"] + label:before,
.checkout-index-index #checkout input[type="checkbox"] + label:before{
  border-color: var(--osc-black) !important;
}

.checkout-index-index #checkout input[type="radio"]:checked + label:after{
  background: var(--osc-black) !important;
}

.checkout-index-index #checkout input[type="checkbox"]:checked + label:before{
  background: var(--osc-black) !important;
  border-color: var(--osc-black) !important;
}

/* ---------- (F) LINKS / TOGGLES / TOOLTIP ---------- */
.checkout-index-index #checkout a,
.checkout-index-index #checkout a:hover,
.checkout-index-index #checkout a:visited,
.checkout-index-index #checkout a:focus,
.checkout-index-index #checkout .action-toggle,
.checkout-index-index #checkout .action-toggle:after,
.checkout-index-index #checkout .field-tooltip-action:before{
  color: var(--osc-black) !important;
}

.amcheckout-step-container .shipping-address-items .shipping-address-item.selected-item{
  border-color: #000000;
}

.amcheckout-step-container .amcheckout-button:not(.braintree-googlepay-button, .ui-datepicker-trigger, .gpay-card-info-container),
.amcheckout-step-container button:not(.braintree-googlepay-button, .ui-datepicker-trigger, .gpay-card-info-container){
  background: #000000;
}

.amcheckout-step-container .checkout-payment-method .amcheckout-payment-methods .payment-method._active{
  border-color: #000000;
}

/* =========================================================
   BOTÃO "NOVO ENDEREÇO" – remover azul no hover
   ========================================================= */
.checkout-index-index #checkout
.amcheckout-button.-new-address,
.checkout-index-index #checkout
.amcheckout-button.-new-address:hover,
.checkout-index-index #checkout
.amcheckout-button.-new-address:focus,
.checkout-index-index #checkout
.amcheckout-button.-new-address:active {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

/* remove outline azul do focus (tab / click) */
.checkout-index-index #checkout
.amcheckout-button.-new-address:focus {
  box-shadow: 0 0 0 2px rgba(0,0,0,.2) !important;
  outline: none !important;
}

/* =========================================================
   TOOLTIP "?" – corrigir sobreposição no modal de endereço
   ========================================================= */

/* o container correto para referência */
.checkout-index-index #checkout
.modal-content
.field .control._with-tooltip {
  position: relative;
}

/* cria espaço no input para o ícone */
.checkout-index-index #checkout
.modal-content
.field .control._with-tooltip input {
  padding-right: 42px !important;
}

/* posiciona corretamente o ícone "?" */
.checkout-index-index #checkout
.modal-content
.field .control._with-tooltip .field-tooltip {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

/* garante tamanho e alinhamento do ícone */
.checkout-index-index #checkout
.modal-content
.field .control._with-tooltip .field-tooltip-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  line-height: 1;
}


/* =========================================================
   CHECKOUT – OCULTAR SIZE (RESUMO DO PEDIDO)
   ========================================================= */

/* esconde bloco de opções (Size) ao clicar em "Ver Detalhes" */
.checkout-index-index #checkout
.opc-block-summary
.product.options {
  display: none !important;
}

/* esconde lista de opções (fallback) */
.checkout-index-index #checkout
.opc-block-summary
dl.item-options {
  display: none !important;
}


/* =========================================================
   CHECKOUT – OCULTAR TOOLTIP (?)
   ========================================================= */

/* esconde ícone de tooltip */
.checkout-index-index #checkout
.field-tooltip {
  display: none !important;
}


/* =========================================================
   BOTÃO GERAR BOLETO – PRETO
   ========================================================= */

a[href*="/payments/boleto/"] {
  background-color: #000 !important;
  color: #fff !important;
  border-radius: 5px;
  transition: background-color 0.2s ease;
}

/* hover */
a[href*="/payments/boleto/"]:hover {
  background-color: #111 !important; /* preto levemente mais claro */
  color: #fff !important;
}


/* =========================================================
   CHECKBOX PRETO + CHECK BRANCO (SVG OVERRIDE)
   ========================================================= */

.checkout-index-index #checkout
input[type="checkbox"]:checked + label:before {
  background-color: #000 !important;
  border-color: #000 !important;

  /* SVG do check em branco */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath fill='white' d='M5.5 11.5L0 6l1.4-1.4L5.5 8.7 14.6 0 16 1.4z'/%3E%3C/svg%3E") !important;

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 10px 8px !important;
}