:root {
  --carmania-red: #dc3545;
  --carmania-red-dark: #b02a37;
  --catalogo-bg: #f8f9fa;
  --catalogo-ink: #212529;
}

body {
  min-width: 320px;
  background: var(--catalogo-bg);
  color: var(--catalogo-ink);
}

.catalogo-header {
  background: #fff;
  border-bottom: 1px solid #e9ecef;
}

.brand { color: var(--catalogo-ink); text-decoration: none; }
.brand-logo { width: 132px; height: 42px; object-fit: contain; }
.brand-label { color: var(--carmania-red); font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.cart-button {
  align-items: center;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: .6rem;
  color: var(--carmania-red-dark);
  display: inline-flex;
  font-weight: 600;
  gap: .45rem;
  padding: .55rem .75rem;
}

.floating-cart-button { align-items: center; background: var(--carmania-red); border: 0; border-radius: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); box-shadow: 0 .35rem .9rem rgba(33, 37, 41, .25); color: #fff; display: flex; height: 3.5rem; justify-content: center; position: fixed; right: 1rem; width: 3.5rem; z-index: 1040; }
.floating-cart-button svg { fill: none; height: 1.65rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 1.65rem; }
.floating-cart-count { align-items: center; background: #212529; border: 2px solid #fff; border-radius: 50%; color: #fff; display: flex; font-size: .7rem; font-weight: 700; height: 1.35rem; justify-content: center; min-width: 1.35rem; padding: 0 .2rem; position: absolute; right: -.2rem; top: -.2rem; }
.cart-count { background: var(--carmania-red); border-radius: 50%; color: #fff; font-size: .75rem; min-width: 1.45rem; padding: .2rem .35rem; text-align: center; }
.catalogo-hero { background: linear-gradient(135deg, #fff 0%, #fff5f5 100%); border-bottom: 1px solid #f1d7da; }
.eyebrow { color: var(--carmania-red); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.catalogo-content { max-width: 1320px; }
.catalogo-toolbar { background: #fff; border: 1px solid #e9ecef; border-radius: .8rem; padding: 1rem; }
.form-label { font-size: .85rem; font-weight: 600; }
.catalogo-status { color: #6c757d; font-size: .8rem; }
.catalogo-status.is-error { color: var(--carmania-red-dark); }
.product-code { color: #6c757d; font-size: .75rem; margin-bottom: .35rem; min-height: 1.1em; }
.product-card { background: #fff; border: 1px solid #e9ecef; border-radius: .8rem; box-shadow: 0 .2rem .8rem rgba(33, 37, 41, .06); overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.product-card:hover { box-shadow: 0 .5rem 1.2rem rgba(33, 37, 41, .12); transform: translateY(-2px); }
.product-image { align-items: center; background: #f1f3f5; display: block; height: 170px; justify-content: center; object-fit: contain; width: 100%; }
.image-placeholder { color: #8b949e; font-size: .8rem; }
.product-body { padding: 1rem; }
.product-name { font-size: 1rem; line-height: 1.35; min-height: 2.7em; }
.product-price { color: #198754; font-size: 1.2rem; font-weight: 700; margin-bottom: .35rem; }
.product-stock { font-size: .8rem; margin-bottom: 1rem; }
.product-stock.is-available { color: #198754; }
.product-stock.is-consult { color: #6c757d; }
.product-actions { align-items: center; display: flex; gap: .5rem; justify-content: space-between; }
.product-actions .btn { font-size: .78rem; white-space: nowrap; }
.quantity-control { align-items: center; display: inline-flex; gap: .4rem; }
.catalogo-footer { color: #6c757d; font-size: .85rem; }

@media (max-width: 575.98px) {
  .brand-logo { width: 112px; }
  .brand-label { font-size: .72rem; }
  .catalogo-hero h1 { font-size: 1.8rem; }
  .product-image { height: 145px; }
  .product-actions { align-items: stretch; flex-direction: column; }
  .product-actions .btn { width: 100%; }
}

.cart-thumb { width: 56px; height: 56px; object-fit: contain; background: #f1f3f5; border-radius: .35rem; }
.cart-item strong { display:block; line-height:1.25; }
#carrinho-itens { max-height: 50vh; }

/* Catálogo compacto e confortável para toque */
.catalogo-notice { background: #fff5f5; border-bottom: 1px solid #f1d7da; color: #6c757d; font-size: .76rem; }
.catalogo-content { padding-top: 1.25rem !important; padding-bottom: 2rem !important; }
.product-card { border-radius: .55rem; box-shadow: 0 .15rem .5rem rgba(33, 37, 41, .05); }
.product-image { height: 105px; }
.product-body { padding: .65rem; }
.product-name { display: -webkit-box; font-size: .88rem; line-height: 1.25; margin-bottom: .3rem; min-height: 2.5em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.product-code { font-size: .68rem; margin-bottom: .2rem; min-height: 1em; }
.product-price { font-size: 1rem; margin-bottom: .2rem; }
.product-stock { font-size: .72rem; margin-bottom: .55rem; }
.product-actions { gap: .3rem; flex-wrap: wrap; }
.product-actions .btn { font-size: .7rem; padding: .4rem .45rem; }
.quantity-control { justify-content: space-between; }
.quantity-button { align-items: center; background: #fff; border: 1px solid #adb5bd; border-radius: .35rem; color: var(--carmania-red-dark); display: inline-flex; flex: 0 0 30px; font-size: 1rem; font-weight: 700; height: 30px; justify-content: center; line-height: 1; min-width: 30px; padding: 0; touch-action: manipulation; }
.quantity-button:disabled { cursor: not-allowed; opacity: .45; }
.quantity-value { align-items: center; display: inline-flex; font-size: .85rem; font-weight: 700; height: 2rem; justify-content: center; min-width: 1.4rem; }
.delivery-notice { background: #fff8e1; border: 1px solid #ffe69c; border-radius: .4rem; color: #664d03; font-size: .8rem; padding: .55rem .65rem; }
/* O formulario tambem e um flex container: assim o body e o unico trecho rolavel. */
#finalizacao-modal .modal-dialog { height: calc(100vh - 3.5rem); height: calc(100dvh - 3.5rem); max-height: calc(100vh - 3.5rem); max-height: calc(100dvh - 3.5rem); }
#finalizacao-modal .modal-content { display: flex; flex-direction: column; height: 100%; max-height: 100%; overflow: hidden; }
#finalizacao-modal .modal-header { flex: 0 0 auto; }
#finalizacao-modal #finalizacao-form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; }
#finalizacao-modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#finalizacao-modal .modal-footer { flex: 0 0 auto; padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }

@media (max-width: 575.98px) {
  .catalogo-header .container { padding-bottom: .45rem !important; padding-top: .45rem !important; }
  .brand-logo { height: 34px; width: 100px; }
  .catalogo-toolbar { padding: .7rem; }
  .catalogo-toolbar .form-select, .catalogo-toolbar .form-control { font-size: .9rem; }
  .product-image { height: 82px; }
  .product-code { display: none; }
  .product-name { font-size: .76rem; line-height: 1.2; min-height: 2.4em; }
  .product-price { font-size: .88rem; }
  .product-stock { font-size: .65rem; margin-bottom: .4rem; min-height: 1.9em; }
  .quantity-control { width: 100%; }
  .product-actions .btn { flex-basis: 100%; font-size: .68rem; min-height: 30px; padding: .25rem .3rem; }
  #finalizacao-modal .modal-dialog { height: calc(100vh - 1rem); height: calc(100dvh - 1rem); margin: .5rem; max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); }
  #finalizacao-modal .modal-footer { gap: .5rem; flex-wrap: wrap; }
  #finalizacao-modal .modal-footer .btn { flex: 1 1 100%; }
}