.header-cart {
  display: flex !important;
  align-items: center;
  gap: 6px;
}
.header-cart-icon {
  display: none;
}
.header-cart b {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 20px;
  background: var(--orange);
  color: #111;
  display: grid;
  place-items: center;
  font-size: 10px;
}
.cart-page {
  max-width: 1280px;
  margin: auto;
  padding: 50px 5vw 100px;
}
.cart-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.65fr;
  gap: 22px;
  align-items: start;
}
.cart-items {
  padding: 8px 22px;
}
.cart-item {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.cart-item:last-of-type {
  border-bottom: 0;
}
.cart-item-image {
  width: 130px;
  height: 120px;
  border-radius: 12px;
  background: center/cover;
}
.cart-item-info h2 {
  font-size: 29px;
  margin: 3px 0 7px;
}
.cart-item-info > p {
  color: var(--muted);
  font-size: 12px;
}
.cart-item-info label {
  max-width: 440px;
}
.cart-item-info input {
  padding: 9px;
}
.cart-item-controls {
  min-width: 125px;
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: space-between;
}
.cart-item-controls > strong {
  font: 800 24px "Barlow Condensed";
}
.qty.large {
  gap: 5px;
}
.qty.large button {
  width: 31px;
  height: 31px;
}
.remove-item {
  border: 0;
  background: none;
  color: #b44a3e;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.cart-totals {
  position: sticky;
  top: 20px;
}
.cart-totals h2 {
  font-size: 29px;
}
.cart-totals > div {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #eee8df;
}
.cart-totals small {
  color: var(--muted);
}
.cart-totals .cart-total {
  border-top: 2px solid var(--ink);
  border-bottom: 0;
  margin-top: 8px;
}
.cart-total strong {
  font: 800 28px "Barlow Condensed";
}
.cart-totals .btn {
  margin: 12px 0;
}
.cart-totals > small {
  display: block;
  text-align: center;
  font-size: 10px;
}
.empty-cart-icon {
  display: block;
  font-size: 45px;
  color: var(--orange);
}
.delivery-fields {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.location-box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  background: #111;
  color: #fff;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 18px;
}
.location-box > div {
  display: flex;
  flex-direction: column;
}
.location-box small {
  color: #aaa;
  font-size: 10px;
}
.location-button {
  border: 1px solid #4a3c28;
  background: #2a2117;
  color: var(--orange);
  border-radius: 9px;
  padding: 10px 13px;
  font-weight: 800;
  cursor: pointer;
}
.location-button:disabled {
  opacity: 0.6;
  cursor: wait;
}
.location-status {
  grid-column: 1/-1;
  margin: 0;
  font-size: 11px;
  color: #bbb;
}
.location-status.success {
  color: #7fe2aa;
}
.location-status.warning {
  color: #ffd17a;
}
.location-status.error {
  color: #ff968d;
}
.address-grid {
  display: grid;
  grid-template-columns: 0.55fr 1.5fr 0.45fr 1fr;
  gap: 13px;
}
.street-field {
  grid-column: span 2;
}
.ticket-address {
  font-size: 10px;
  background: #f3eee6;
  border-radius: 8px;
  padding: 9px;
  color: #625a50;
}
.ticket-address a {
  color: var(--orange2);
  font-weight: 800;
}
.form-intro {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f6efe4;
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 12px;
}
.fee-preview {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff8e9;
  border: 1px solid #f1d8a8;
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 15px;
  color: #6b5a40;
}
.fee-preview span {
  flex: 1;
  font-size: 12px;
}
.fee-preview > strong {
  font: 800 22px "Barlow Condensed";
  color: var(--orange2);
}
.summary-line {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  color: var(--muted);
  font-size: 12px;
}
.payment-detail {
  border-radius: 11px;
  padding: 14px;
  margin: -2px 0 17px;
}
.pix-detail,
.pix-after-order {
  background: #eefaf3;
  border: 1px solid #bfe4ce;
}
.cash-detail {
  background: #fff6e5;
  border: 1px solid #efd49a;
}
.payment-detail > span,
.pix-after-order > span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 7px;
}
.copy-field {
  display: flex;
  align-items: center;
  border: 1px solid #b8d8c5;
  background: #fff;
  border-radius: 9px;
  overflow: hidden;
}
.copy-field code {
  flex: 1;
  padding: 11px 12px;
  overflow: auto;
  color: #174d32;
  font-weight: 700;
}
.copy-field button {
  align-self: stretch;
  border: 0;
  border-left: 1px solid #b8d8c5;
  background: #e0f3e8;
  color: #17603b;
  padding: 0 13px;
  font-weight: 800;
  cursor: pointer;
}
.payment-detail p,
.pix-after-order p {
  margin: 9px 0 0;
  font-size: 10px;
  color: #3b7657;
}
.payment-detail[hidden] {
  display: none;
}
.ticket-payment {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  background: #f4efe7;
  border-radius: 8px;
  padding: 9px;
  margin: 10px 0;
  font-size: 10px;
}
.whatsapp-confirm {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: #e6f7ed;
  border: 1px solid #a8dbbc;
  border-radius: 14px;
  padding: 15px 17px;
  margin: 24px 0;
}
.whatsapp-confirm > i {
  font-size: 29px;
  color: #168b4b;
}
.whatsapp-confirm > div {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.whatsapp-confirm small {
  color: #4f7560;
  font-size: 10px;
}
.btn.whatsapp {
  background: #1ca858;
  color: #fff;
  padding: 11px 14px;
}
.pix-after-order {
  text-align: left;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
}
.field-status {
  min-height: 15px;
  font-size: 9px;
  font-weight: 600;
  color: var(--muted);
}
.field-status.loading {
  color: #9a6a18;
}
.field-status.success {
  color: var(--green);
}
.field-status.error {
  color: #b4433a;
}
input:invalid:not(:placeholder-shown) {
  border-color: #d96b61;
}
input:valid:not(:placeholder-shown) {
  border-color: #79b99c;
}
.kanban {
  grid-template-columns: repeat(4, 1fr);
}
.kanban-column.pending > header {
  border-color: #d97706;
}
.approval-form {
  background: #fff7e7;
  border: 1px solid #efd49b;
  border-radius: 9px;
  padding: 10px;
  margin-top: 10px;
}
.approval-form label {
  margin-bottom: 8px;
}
.approval-form label > div {
  display: flex;
  align-items: center;
  gap: 7px;
}
.approval-form input {
  padding: 8px;
}
.approval-form label span {
  font-size: 10px;
  color: var(--muted);
}
.ticket-action.approve {
  background: var(--green);
}
.status.pending {
  background: #fff0d2;
  color: #915708;
}
.success-mark.pending-mark {
  background: #fff0d2;
  color: #b66b08;
}
.success-mark.pending-mark .bi {
  font-size: 25px;
}
.tracking-steps {
  grid-template-columns: repeat(5, 1fr);
}
.success-mark.cancelled-mark { background: #fee3df; color: #b33f35; }
.customer-flow { display: grid; grid-template-columns: repeat(4,1fr); margin: 34px 0 18px; position: relative; }
.customer-flow:before { content: ''; position: absolute; left: 10%; right: 10%; top: 21px; height: 3px; background: #ddd6cb; }
.flow-step { display: flex; align-items: center; flex-direction: column; gap: 7px; color: #aaa; position: relative; z-index: 1; }
.flow-step > i { width: 45px; height: 45px; border: 3px solid var(--paper); border-radius: 50%; display: grid; place-items: center; background: #ddd7ce; font-size: 17px; }
.flow-step > span { font-size: 10px; font-weight: 800; text-transform: uppercase; }
.flow-step.done { color: var(--ink); }
.flow-step.done > i { background: var(--orange); color: #17120a; }
.flow-step.current > i { box-shadow: 0 0 0 6px rgba(245,158,11,.2); }
.customer-estimate { margin: 0 0 24px; }
.cancelled-client { display: flex; gap: 12px; text-align: left; background: #fff0ed; border: 1px solid #efbbb5; border-radius: 12px; padding: 15px; margin: 24px 0; color: #83352f; }
.cancelled-client > i { font-size: 20px; }
.cancelled-client p { margin: 3px 0 0; font-size: 11px; }
.flow-not-started { display: flex; gap: 10px; text-align: left; background: #fff7e2; border: 1px solid #ecd294; border-radius: 12px; padding: 14px; margin: 22px 0; color: #745725; }
.flow-not-started p { margin: 0; font-size: 11px; }
.whatsapp-required { border-width: 2px; box-shadow: 0 10px 28px rgba(28,168,88,.13); }
.whatsapp-required button:disabled { opacity: .7; cursor: wait; }
.bi {
  line-height: 1;
}
.spin {
  display: inline-block;
  animation: icon-spin 0.8s linear infinite;
}
@keyframes icon-spin {
  to {
    transform: rotate(360deg);
  }
}
.choice b .bi,
.eyebrow .bi {
  margin-right: 5px;
}
.metric-icon .bi {
  font-size: 17px;
}
.success-mark .bi {
  font-size: 30px;
}
.store-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--green);
  border-radius: 13px;
  padding: 17px 20px;
  margin-bottom: 17px;
}
.store-control.is-closed {
  border-left-color: #d34f43;
  background: #fffafa;
}
.store-control-status {
  display: flex;
  align-items: center;
  gap: 14px;
}
.store-control-status > i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 7px rgba(37, 147, 102, 0.12);
}
.is-closed .store-control-status > i {
  background: #d34f43;
  box-shadow: 0 0 0 7px rgba(211, 79, 67, 0.12);
}
.store-control-status > div {
  display: flex;
  flex-direction: column;
}
.store-control-status span {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.store-control-status strong {
  font: 800 24px "Barlow Condensed";
}
.store-control-status small {
  color: var(--muted);
}
.store-control .btn {
  padding: 11px 18px;
}
.close-store {
  border: 1px solid #e3b5b0;
  background: #fff;
  color: #a83b32;
}
.open-store {
  border: 0;
  background: var(--green);
  color: #fff;
}
.closed-now i {
  background: #e45b50;
  box-shadow: 0 0 0 5px rgba(228, 91, 80, 0.12);
}
.product-buy .closed-product {
  background: #aaa;
  cursor: not-allowed;
}
.product-buy .closed-product:hover {
  background: #aaa;
  color: #fff;
  transform: none;
}
.store-closed-notice {
  display: flex !important;
  flex-direction: column !important;
  background: #fff0ed;
  border: 1px solid #f0c1bc !important;
  border-radius: 10px;
  padding: 13px !important;
  margin: 12px 0 !important;
  color: #913a32;
}
.store-closed-notice small {
  color: #8b5c56 !important;
}
@media (max-width: 1050px) {
  .cart-grid {
    grid-template-columns: 1fr;
  }
  .cart-totals {
    position: static;
  }
  .address-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .kanban {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .whatsapp-confirm {
    align-items: stretch;
    flex-direction: column;
  }
  .whatsapp-confirm > i {
    display: none;
  }
  .whatsapp-confirm .btn {
    width: 100%;
  }
  .copy-field code {
    max-width: 190px;
  }
  .fee-preview {
    align-items: flex-start;
  }
}
@media (max-width: 760px) {
  .site-header nav {
    gap: 10px;
  }
  .site-header nav > .store-access {
    display: none;
  }
  .site-header nav > .header-cart {
    position: relative;
    width: 44px;
    height: 44px;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.06);
  }
  .header-cart-label {
    display: none;
  }
  .header-cart-icon {
    display: inline-block;
    color: #fff;
    font-size: 20px;
  }
  .header-cart b {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 18px;
    height: 18px;
  }
  .checkout-page,
  .cart-page {
    padding: 30px 16px 80px;
  }
  .address-grid {
    grid-template-columns: 1fr;
  }
  .street-field {
    grid-column: auto;
  }
  .location-box {
    grid-template-columns: 1fr;
  }
  .location-status {
    grid-column: auto;
  }
  .cart-items {
    padding: 5px 14px;
  }
  .cart-item {
    grid-template-columns: 85px 1fr;
  }
  .cart-item-image {
    width: 85px;
    height: 85px;
  }
  .cart-item-controls {
    grid-column: 1/-1;
    flex-direction: row;
    align-items: center;
  }
  .store-control {
    align-items: flex-start;
    flex-direction: column;
  }
  .store-control form,
  .store-control .btn {
    width: 100%;
  }
}