.hm-offcanvas-panel { width: 100%; max-width: 390px; padding: 34px 24px 28px; font-family: "DM Sans", sans-serif; color: #23120c; background: linear-gradient(180deg, rgba(244, 219, 170, 0.52), rgba(255, 255, 255, 0) 34%), #fff; box-sizing: border-box;
}

.hm-offcanvas-logo { display: block; width: 260px; margin: 0 0 24px;
}

.hm-offcanvas-logo img { display: block; width: 100%; height: auto;
}

.hm-offcanvas-intro { margin-bottom: 22px;
}

.hm-offcanvas-kicker { display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; margin-bottom: 12px; border-radius: 999px; color: #42270d; background: rgba(237, 197, 135, 0.52); font-size: 0.78rem; font-weight: 800; text-transform: uppercase;
}

.hm-offcanvas-intro h3 { margin: 0 0 12px; color: #23120c; font-size: 1.55rem; line-height: 1.12; font-weight: 800;
}

.hm-offcanvas-intro p { margin: 0; color: #5f534d; font-size: 0.96rem; line-height: 1.75; font-weight: 400;
}

.hm-offcanvas-media { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 178px; margin: 0 0 24px; border-radius: 8px; color: rgba(35, 18, 12, 0.52); background: linear-gradient(135deg, rgba(66, 39, 13, 0.08), rgba(237, 197, 135, 0.32)), #d9d9d9; box-shadow: inset 0 0 0 1px rgba(66, 39, 13, 0.08); font-size: 0.9rem; font-weight: 800;
}

.hm-offcanvas-media img { display: block; width: 100%; height: 100%; min-height: 178px; object-fit: cover; border-radius: 8px;
}

.hm-offcanvas-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px;
}

.hm-offcanvas-action { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 14px; border-radius: 999px; color: #fff; background: #42270d; text-decoration: none; font-size: 0.9rem; font-weight: 800; transition: background 0.2s ease, color 0.2s ease;
}

.hm-offcanvas-action span { color: #fff;
}

.hm-offcanvas-action i { color: #edc587; font-size: 1rem;
}

.hm-offcanvas-action--whatsapp { background: #128c2e;
}

.hm-offcanvas-action--whatsapp i { font-size: 1.15rem;
}

.hm-offcanvas-action:hover { color: #42270d; background: #edc587;
}

.hm-offcanvas-action:hover i { color: #42270d;
}

.hm-offcanvas-contact { display: grid; gap: 14px; margin-bottom: 26px;
}

.hm-offcanvas-contact-item { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 13px; color: #23120c; text-decoration: none;
}

.hm-offcanvas-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; color: #edc587; background: #42270d; box-shadow: 0 10px 20px rgba(35, 18, 12, 0.14);
}

.hm-offcanvas-contact-item strong,
.hm-offcanvas-contact-item em { display: block; font-style: normal;
}

.hm-offcanvas-contact-item strong { margin-bottom: 3px; color: #23120c; font-size: 0.94rem; line-height: 1.2; font-weight: 800;
}

.hm-offcanvas-contact-item em { color: #6c625d; font-size: 0.9rem; line-height: 1.35; font-weight: 400;
}

@media (max-width: 420px) {
  .hm-offcanvas-panel { padding: 28px 20px 24px;
  }

  .hm-offcanvas-logo { width: 230px;
  }

  .hm-offcanvas-intro h3 { font-size: 1.38rem;
  }

  .hm-offcanvas-actions { grid-template-columns: 1fr;
  }
}