/* Ryan Studios - carrinho mobile corrigido apos video de fundo */

@media (max-width: 768px) {
  body {
    padding-bottom: 96px !important;
  }

  /* Barra fixa inferior do mobile */
  .mobile-checkout {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    height: 78px !important;
    min-height: 78px !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 168px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, rgba(10,10,10,.92), rgba(4,4,4,.98)) !important;
    border-top: 1px solid rgba(255,106,0,.38) !important;
    box-shadow: 0 -16px 42px rgba(0,0,0,.54), 0 -2px 18px rgba(255,91,0,.12) !important;
    z-index: 2147482400 !important;
    transform: none !important;
    margin: 0 !important;
  }

  .mobile-checkout > div {
    min-width: 0 !important;
  }

  .mobile-checkout small {
    display: block !important;
    color: rgba(255,255,255,.70) !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
  }

  .mobile-checkout strong {
    display: block !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
  }

  .mobile-checkout button {
    height: 58px !important;
    min-height: 58px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: linear-gradient(135deg, #ff6a00, #e23a00) !important;
    color: #fff !important;
    box-shadow: 0 12px 30px rgba(255,91,0,.34), inset 0 1px 0 rgba(255,255,255,.18) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }

  .mobile-checkout button:last-child {
    display: none !important;
  }

  .mobile-checkout #mobileCartCount {
    min-width: 25px !important;
    height: 25px !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.32) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  /* Painel do carrinho sempre preso na tela, nao no final da pagina */
  #cartPanel.cart,
  aside#cartPanel.cart {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 0 !important;
    top: auto !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    height: min(82dvh, 760px) !important;
    max-height: min(82dvh, 760px) !important;
    min-height: 360px !important;
    z-index: 2147482600 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-left: 1px solid rgba(255,106,0,.24) !important;
    border-right: 1px solid rgba(255,106,0,.24) !important;
    border-top: 1px solid rgba(255,106,0,.42) !important;
    border-radius: 22px 22px 0 0 !important;
    background: rgba(8,8,8,.98) !important;
    box-shadow: 0 -24px 70px rgba(0,0,0,.72), 0 -8px 42px rgba(255,91,0,.13) !important;
    transform: translateY(112%) !important;
    transition: transform .25s ease !important;
  }

  #cartPanel.cart.open,
  aside#cartPanel.cart.open {
    transform: translateY(0) !important;
  }

  #overlay.overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147482500 !important;
  }

  #cartPanel .cart-header {
    flex: 0 0 auto !important;
    padding: 16px 18px !important;
    background: linear-gradient(90deg, rgba(20,20,20,.98), rgba(6,6,6,.98)) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }

  #cartPanel .cart-header h3 {
    font-size: 20px !important;
    line-height: 1.1 !important;
  }

  #cartPanel #cartItems,
  #cartPanel .cart-items {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 13px 12px !important;
    gap: 10px !important;
  }

  #cartPanel .cart-footer {
    flex: 0 0 auto !important;
    max-height: 46dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom)) !important;
    gap: 12px !important;
    background: linear-gradient(180deg, rgba(12,12,12,.98), rgba(6,6,6,.98)) !important;
    border-top: 1px solid rgba(255,106,0,.16) !important;
  }

  /* Campos maiores e confortaveis */
  #cartPanel input,
  #cartPanel select,
  #cartPanel textarea,
  #cartPanel .cart-footer input,
  #cartPanel .cart-footer select,
  #cartPanel .cart-footer textarea {
    width: 100% !important;
    min-height: 50px !important;
    height: auto !important;
    padding: 14px 15px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    line-height: 1.22 !important;
    color: #fff !important;
    background: rgba(10,10,10,.96) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    outline: none !important;
  }

  #cartPanel textarea {
    min-height: 88px !important;
  }

  #cartPanel input:focus,
  #cartPanel select:focus,
  #cartPanel textarea:focus {
    border-color: rgba(255,106,0,.70) !important;
    box-shadow: 0 0 0 3px rgba(255,106,0,.12) !important;
  }

  #cartPanel .checkout,
  #cartPanel .cart-footer button,
  #cartPanel button.checkout {
    min-height: 52px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  /* Miniatura sem borda/faixa branca */
  #cartPanel .cart-row .mini,
  #cartItems .cart-row .mini {
    position: relative !important;
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    flex: 0 0 62px !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    background: #050505 !important;
    border: 1px solid rgba(255,106,0,.34) !important;
  }

  #cartPanel .cart-row .mini::after,
  #cartItems .cart-row .mini::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    pointer-events: none !important;
    box-shadow:
      inset 5px 0 0 #050505,
      inset -5px 0 0 #050505,
      inset 0 5px 0 #050505,
      inset 0 -7px 0 #050505 !important;
  }

  #cartPanel .cart-row .mini img,
  #cartItems .cart-row .mini img,
  #cartPanel .mini--photo img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 58% !important;
    transform: scale(1.55) !important;
    transform-origin: center center !important;
    background: #050505 !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
  }
}


/* Ryan Studios - ajuste seguro do carrinho mobile */

@media (max-width: 768px) {
  #cartItems .cart-row,
  .cart-row {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) 72px !important;
    align-items: start !important;
    gap: 10px !important;
    min-height: 92px !important;
    padding: 10px 8px !important;
    overflow: hidden !important;
  }

  #cartItems .cart-row .mini,
  .cart-row .mini {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    flex: 0 0 58px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #050505 !important;
    border: 1px solid rgba(255,106,0,.34) !important;
    z-index: 2 !important;
  }

  #cartItems .cart-row .mini img,
  .cart-row .mini img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 58% !important;
    transform: scale(1.46) !important;
    transform-origin: center center !important;
    background: #050505 !important;
    display: block !important;
  }

  #cartItems .cart-product-info,
  .cart-product-info {
    grid-column: 2 / 4 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 74px 0 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    z-index: 1 !important;
  }

  #cartItems .cart-product-info strong,
  .cart-product-info strong {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    max-height: 2.45em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    font-size: 12.5px !important;
    line-height: 1.18 !important;
    letter-spacing: -.02em !important;
    margin: 0 0 3px 0 !important;
  }

  #cartItems .cart-product-info small,
  .cart-product-info small {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    color: rgba(255,255,255,.62) !important;
  }

  #cartItems .cart-product-info .qty,
  .cart-product-info .qty {
    margin-top: 8px !important;
    position: relative !important;
    z-index: 4 !important;
  }

  #cartItems .cart-row-right,
  .cart-row-right {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 68px !important;
    min-width: 68px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    margin: 0 !important;
    z-index: 5 !important;
  }

  #cartItems .cart-row-right .remove-cart,
  .cart-row-right .remove-cart,
  #cartItems .remove-cart,
  .remove-cart {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  #cartItems .cart-row-right b,
  .cart-row-right b {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 68px !important;
    padding: 5px 7px !important;
    border-radius: 999px !important;
    background: rgba(255,106,0,.13) !important;
    border: 1px solid rgba(255,106,0,.38) !important;
    color: #ff6a00 !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}


/* Ryan fix definitivo - texto unico no botao do carrinho mobile */
@media (max-width: 768px) {
  .mobile-checkout button::before,
  .mobile-checkout button::after,
  #mobileCheckout button::before,
  #mobileCheckout button::after,
  .mobile-cart-bar button::before,
  .mobile-cart-bar button::after,
  .rs-mobile-cart-bar button::before,
  .rs-mobile-cart-bar button::after,
  .cart-mobile-fixed button::before,
  .cart-mobile-fixed button::after {
    content: none !important;
    display: none !important;
  }

  .mobile-checkout button,
  #mobileCheckout button,
  .mobile-cart-bar button,
  .rs-mobile-cart-bar button,
  .cart-mobile-fixed button {
    font-size: 0 !important;
    gap: 8px !important;
  }

  .mobile-checkout button .ryan-cart-label-clean,
  #mobileCheckout button .ryan-cart-label-clean,
  .mobile-cart-bar button .ryan-cart-label-clean,
  .rs-mobile-cart-bar button .ryan-cart-label-clean,
  .cart-mobile-fixed button .ryan-cart-label-clean {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    color: #fff !important;
    white-space: nowrap !important;
  }

  .mobile-checkout button #mobileCartCount,
  #mobileCheckout button #mobileCartCount,
  .mobile-cart-bar button #mobileCartCount,
  .rs-mobile-cart-bar button #mobileCartCount,
  .cart-mobile-fixed button #mobileCartCount {
    font-size: 12px !important;
  }
}

/* Ryan ajuste final - espaco no carrinho */
.cart-drawer input,
.cart-drawer textarea,
.cart-drawer select,
.cart-panel input,
.cart-panel textarea,
.cart-panel select,
#cartDrawer input,
#cartDrawer textarea,
#cartDrawer select,
#cartPanel input,
#cartPanel textarea,
#cartPanel select,
#cart input,
#cart textarea,
#cart select,
.drawer-cart input,
.drawer-cart textarea,
.drawer-cart select,
.side-cart input,
.side-cart textarea,
.side-cart select,
.cart-modal input,
.cart-modal textarea,
.cart-modal select {
  min-height: 42px !important;
  padding: 11px 14px !important;
  margin-bottom: 10px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
}

.cart-drawer .delivery-box,
.cart-panel .delivery-box,
#cartDrawer .delivery-box,
#cartPanel .delivery-box,
#cart .delivery-box,
.drawer-cart .delivery-box,
.side-cart .delivery-box,
.cart-modal .delivery-box,
.cart-drawer [class*="delivery"],
.cart-panel [class*="delivery"],
#cartDrawer [class*="delivery"],
#cartPanel [class*="delivery"],
#cart [class*="delivery"],
.drawer-cart [class*="delivery"],
.side-cart [class*="delivery"],
.cart-modal [class*="delivery"] {
  margin-top: 12px !important;
  margin-bottom: 14px !important;
}

.cart-drawer .delivery-option,
.cart-panel .delivery-option,
#cartDrawer .delivery-option,
#cartPanel .delivery-option,
#cart .delivery-option,
.drawer-cart .delivery-option,
.side-cart .delivery-option,
.cart-modal .delivery-option,
.cart-drawer [class*="retirada"],
.cart-panel [class*="retirada"],
#cartDrawer [class*="retirada"],
#cartPanel [class*="retirada"],
#cart [class*="retirada"] {
  margin-top: 10px !important;
  margin-bottom: 12px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
}

.cart-drawer .summary,
.cart-panel .summary,
#cartDrawer .summary,
#cartPanel .summary,
#cart .summary,
.drawer-cart .summary,
.side-cart .summary,
.cart-modal .summary,
.cart-drawer .cart-summary,
.cart-panel .cart-summary,
#cartDrawer .cart-summary,
#cartPanel .cart-summary,
#cart .cart-summary {
  margin-top: 16px !important;
  padding-top: 12px !important;
}

.cart-drawer .checkout-btn,
.cart-panel .checkout-btn,
#cartDrawer .checkout-btn,
#cartPanel .checkout-btn,
#cart .checkout-btn,
.drawer-cart .checkout-btn,
.side-cart .checkout-btn,
.cart-modal .checkout-btn,
.cart-drawer button[class*="whatsapp"],
.cart-panel button[class*="whatsapp"],
#cartDrawer button[class*="whatsapp"],
#cartPanel button[class*="whatsapp"],
#cart button[class*="whatsapp"] {
  margin-top: 16px !important;
  min-height: 58px !important;
  border-radius: 18px !important;
}

@media (max-width: 768px) {
  .cart-drawer input,
  .cart-drawer textarea,
  .cart-drawer select,
  .cart-panel input,
  .cart-panel textarea,
  .cart-panel select,
  #cartDrawer input,
  #cartDrawer textarea,
  #cartDrawer select,
  #cartPanel input,
  #cartPanel textarea,
  #cartPanel select,
  #cart input,
  #cart textarea,
  #cart select,
  .drawer-cart input,
  .drawer-cart textarea,
  .drawer-cart select,
  .side-cart input,
  .side-cart textarea,
  .side-cart select,
  .cart-modal input,
  .cart-modal textarea,
  .cart-modal select {
    min-height: 46px !important;
    font-size: 16px !important;
    margin-bottom: 11px !important;
  }
}

/* Ryan fix rapido - X do produto no carrinho mobile */
@media (max-width: 768px) {
  #cartItems .cart-row,
  .cart-row {
    position: relative !important;
    overflow: hidden !important;
    padding-right: 54px !important;
  }

  #cartItems .cart-product-info,
  .cart-product-info {
    padding-right: 42px !important;
    max-width: calc(100% - 42px) !important;
  }

  #cartItems .cart-row-right,
  .cart-row-right {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    z-index: 30 !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  #cartItems .remove-cart,
  #cartItems .cart-row-right .remove-cart,
  .cart-row .remove-cart,
  .cart-row-right .remove-cart {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(255, 91, 0, .12) !important;
    border: 1px solid rgba(255, 91, 0, .55) !important;
    color: #ff6a00 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 40 !important;
  }

  #cartItems .cart-row-right b,
  .cart-row-right b {
    position: absolute !important;
    right: 0 !important;
    top: 40px !important;
    max-width: 82px !important;
    transform: translateX(0) !important;
    white-space: nowrap !important;
    z-index: 31 !important;
  }
}
