/* Marca presente, sem faixas promocionais extras. */
.topbar {
  height: 72px;
  padding: 0 17px;
  background: #fffffff5;
  border-bottom: 1px solid #e9edf2;
  box-shadow: 0 2px 14px #22334d04;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 5px 0;
}
.wordmark .header-logo {
  height: 42px;
  width: 42px;
  object-fit: contain;
  border-radius: 12px;
  background: #080807;
  border: 1px solid #27231b;
  box-shadow: 0 3px 9px #28201a12;
  flex-shrink: 0;
}
.wordmark .header-brand { display: flex; flex-direction: column; gap: 5px; }
.wordmark .header-brand-name {
  display: block;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.5px;
  color: #262932;
}
.header-brand-name em { font-weight: 800; font-style: normal; color: #e5252a; }
.wordmark .header-brand-caption {
  display: block;
  font-size: 6.5px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 1.4px;
  color: #9299a4;
}
.topbar .icon-button { width: 35px; height: 35px; border-radius: 12px; border-color: #e9edf2; color: #667182; }
.topbar .icon-button svg { width: 18px; height: 18px; }
.categories { top: 72px; }
.ribbon { font-size: 10px; font-weight: 700; padding: 8px 12px; letter-spacing: .2px; }
.reference-cover { background-size: 340px; }
.reference-store { box-shadow: 0 8px 26px #192d4609; }
.store-features > div { background: #f8f9fb; border-color: #f1f3f6; }
.store-tags span { background: #f4f6f8; color: #798292; font-weight: 500; }
.search { border-radius: 13px; }
.categories button { border-radius: 11px; }
.catalog-section { padding-top: 23px; }
.section-heading { padding: 0 1px; margin-bottom: 14px; }
.section-heading h2 { font-size: 21px; letter-spacing: -.7px; }
.category-caption { margin-top: 5px; font-size: 10px; color: #949daa; }
.product-list { gap: 12px; }
.product-card { box-shadow: 0 3px 13px #23355004; border-color: #e8ecf1; border-radius: 17px; }
.product-card:hover { border-color: #efb5b9; box-shadow: 0 5px 18px #b3272d07; }
.product-card h3 { letter-spacing: -.35px; font-weight: 800; }
.product-card .description { color: #8b94a2; }
.product-price strong { font-size: 19px; letter-spacing: -.6px; }
.product-price del { color: #aeb4bf; font-size: 10px; }
.product-benefit { color: #459c72; }
.directory-grid button { border-radius: 12px; padding: 14px 12px; box-shadow: 0 2px 5px #23355002; }
.directory-grid button > svg { border-radius: 9px; padding: 7px; box-sizing: content-box; background: #fff2f2; width: 15px; height: 15px; }
.directory-grid span { font-size: 11px; font-weight: 650; }
.directory-grid small { font-size: 9px; }
.footer { margin-top: 29px; }
.menu-links button { position: relative; border: 1px solid #edf0f4; padding: 15px; border-radius: 12px; color: #515c6e; font-size: 12px; background: #fafbfd; }
.menu-links button:after { content: '›'; position: absolute; right: 15px; color: #d8474d; font-size: 21px; top: 8px; }
.menu-links button:hover { background: #fff6f6; border-color: #f0d2d4; }
@media(max-width:370px) {
  .topbar { padding: 0 12px; }
  .wordmark { gap: 7px; }
  .wordmark .header-logo { height: 37px; width: 37px; border-radius: 10px; }
  .wordmark .header-brand-name { font-size: 13px; }
  .wordmark .header-brand-caption { font-size: 5.5px; letter-spacing: 1.15px; }
  .directory-grid button { padding: 12px 9px; gap: 7px; }
  .directory-grid button > svg { padding: 5px; width: 13px; height: 13px; }
}

.form .payment-unavailable{color:#9da5b1;background:#f8f9fb;border-style:dashed;cursor:not-allowed}.payment-unavailable span{font-size:9px;margin-left:auto;color:#9da5b1;font-weight:400}
.payment-card > span { margin-left: auto; color: #9a8490; font-size: 9px; font-weight: 400; }
.payment-dialog { padding: 36px 26px 25px; position: relative; text-align: center; }
.payment-dialog .close-dialog { top: 12px; right: 12px; border-color: #eef0f4; box-shadow: none; color: #929aa7; }
.payment-dialog-icon { display: grid; place-items: center; width: 70px; height: 70px; margin: 4px auto 23px; border-radius: 23px; border: 1px solid #f4dfe1; background: #fff2f3; color: #e5252a; }
.payment-dialog-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.payment-dialog-label { color: #a1a7b1; font-size: 8px; letter-spacing: 1.5px; font-weight: 700; margin-bottom: 8px; }
.payment-dialog h2 { color: #303744; font-size: 24px; font-weight: 800; letter-spacing: -.7px; line-height: 1.2; }
.payment-dialog-message { margin-top: 13px; color: #8b94a2; font-size: 12px; line-height: 1.75; }
.payment-no-charge { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 20px 0 23px; padding: 10px; background: #f7f9fb; border-radius: 10px; color: #8692a2; font-size: 10px; }
.payment-no-charge svg { width: 15px; height: 15px; color: #6b987e; }
.payment-dialog .btn { min-height: 46px; font-size: 12px; }
.payment-dialog .btn > svg { width: 17px; height: 17px; }
