/* Vitrine moderna (React): mini-carrinho, busca com sugestões, visualização rápida, toasts.
   Cores herdam as variáveis do tema (personalizáveis no painel). Tudo em alta definição:
   Inter variável, suavização de fonte, números tabulares e imagens nas dimensões originais. */

:root {
  --sf-accent: var(--storefront-primary, #10182f);
  --sf-accent-hover: var(--storefront-primary-hover, #0a0f22);
  --sf-ok: var(--storefront-accent, #159b67);
  --sf-danger: var(--storefront-red, #e3343f);
  --sf-line: var(--storefront-border, #e2e8f0);
  --sf-soft: #f3f4f9;
  --sf-muted: #6b7280;
  --sf-radius: 12px;
  --sf-shadow: 0 1px 2px rgba(16, 24, 47, .06), 0 8px 28px rgba(16, 24, 47, .10);
  --sf-ease: cubic-bezier(.22, .8, .24, 1);
}

/* ---------- Fonte em alta definição ---------- */
body.theme-storefront {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-optical-sizing: auto;
  font-feature-settings: 'cv11', 'ss03', 'calt';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -.003em;
}
body.theme-storefront h1, body.theme-storefront h2, body.theme-storefront h3 { letter-spacing: -.02em; }
.sf-num, .storefront-product-card [class*="price"], .cart-badge-count { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum', 'cv11'; }
body.theme-storefront img { image-rendering: auto; -ms-interpolation-mode: bicubic; }
body.sf-lock { overflow: hidden; }

/* ---------- Cabeçalho e cards mais refinados ---------- */
.storefront-header { transition: box-shadow .25s var(--sf-ease); }
.storefront-product-card { border-radius: var(--sf-radius); transition: transform .25s var(--sf-ease), box-shadow .25s var(--sf-ease); }
.storefront-product-card:hover { transform: translateY(-3px); box-shadow: var(--sf-shadow); }
.storefront-product-card .card-img-wrap { position: relative; overflow: hidden; border-radius: 10px; background: var(--sf-soft); }
.storefront-product-card .card-img-wrap img { transition: transform .5s var(--sf-ease); backface-visibility: hidden; }
.storefront-product-card:hover .card-img-wrap img { transform: scale(1.04); }
.btn-card-buy { transition: transform .15s var(--sf-ease), filter .2s; }
.btn-card-buy:active { transform: scale(.97); }
.btn-card-buy.is-loading { opacity: .7; pointer-events: none; }
.cart-badge-count.is-bump { animation: sf-bump .45s var(--sf-ease); }
@keyframes sf-bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

.sf-quick {
  position: absolute; left: 50%; bottom: 10px; z-index: 3; transform: translate(-50%, 8px); opacity: 0;
  border: 0; border-radius: 999px; padding: 7px 14px; font: 600 .78rem/1 'Inter', system-ui, sans-serif;
  background: rgba(255, 255, 255, .94); color: #111827; box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  backdrop-filter: blur(6px); cursor: pointer; white-space: nowrap; transition: opacity .2s, transform .25s var(--sf-ease);
}
.sf-quick:hover { background: #fff; }
.storefront-product-card:hover .sf-quick, .sf-quick:focus-visible { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .sf-quick { opacity: 1; transform: translate(-50%, 0); padding: 6px 11px; } }

/* ---------- Camadas (gaveta e modal) ---------- */
.sf-layer { position: fixed; inset: 0; z-index: 2000; pointer-events: none; visibility: hidden; transition: visibility 0s .3s; }
.sf-layer.is-open { pointer-events: auto; visibility: visible; transition-delay: 0s; }
.sf-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); opacity: 0; transition: opacity .3s; }
.is-open > .sf-backdrop { opacity: 1; }
.sf-x { border: 0; background: var(--sf-soft); width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: #374151; transition: background .15s; }
.sf-x:hover { background: #e5e7ef; }

.sf-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: #fff; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .35s var(--sf-ease); box-shadow: -12px 0 40px rgba(15, 23, 42, .18); outline: none;
}
.is-open > .sf-drawer { transform: none; }
.sf-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--sf-line); }
.sf-drawer-head h2 { margin: 0; font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.sf-pill { background: var(--sf-soft); color: var(--sf-accent); font-size: .78rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }

.sf-lines { list-style: none; margin: 0; padding: 4px 20px; overflow-y: auto; flex: 1; }
.sf-line { display: grid; grid-template-columns: 84px 1fr 32px; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--sf-line); animation: sf-in .3s var(--sf-ease); }
.sf-line:last-child { border-bottom: 0; }
@keyframes sf-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sf-line-img { width: 84px; height: 84px; border-radius: 10px; background: var(--sf-soft); display: grid; place-items: center; overflow: hidden; color: #cbd5e1; font-size: 1.6rem; }
.sf-line-img img { width: 100%; height: 100%; object-fit: contain; }
.sf-line-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sf-line-name { font-weight: 600; font-size: .92rem; line-height: 1.3; color: #111827; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-line-var { font-size: .8rem; color: var(--sf-muted); }
.sf-line-row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; }
.sf-line-row strong { font-size: .98rem; }
.sf-trash { border: 0; background: transparent; color: #9ca3af; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; transition: color .15s, background .15s; }
.sf-trash:hover:not(:disabled) { color: #fff; background: var(--sf-danger); }

.sf-step { display: inline-flex; align-items: center; border: 1px solid var(--sf-line); border-radius: 10px; overflow: hidden; background: #fff; }
.sf-step button { width: 30px; height: 32px; border: 0; background: var(--sf-soft); cursor: pointer; font-size: 1.05rem; line-height: 1; color: #111827; transition: background .15s; }
.sf-step button:hover:not(:disabled) { background: #e5e7ef; }
.sf-step button:disabled { opacity: .4; cursor: not-allowed; }
.sf-step output { min-width: 36px; text-align: center; font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; }
.sf-step-lg button { width: 38px; height: 44px; } .sf-step-lg output { min-width: 44px; }

.sf-drawer-foot { padding: 16px 20px 20px; border-top: 1px solid var(--sf-line); display: grid; gap: 10px; background: #fff; }
.sf-drawer-foot small { color: var(--sf-muted); }
.sf-sum { display: flex; justify-content: space-between; align-items: baseline; color: var(--sf-muted); }
.sf-sum strong { color: #111827; font-size: 1.3rem; }
.sf-btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 10px; border: 0; font: 600 .95rem/1 'Inter', system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: transform .15s var(--sf-ease), background .2s, opacity .2s; }
.sf-btn:active { transform: scale(.98); }
.sf-btn:disabled { opacity: .55; cursor: not-allowed; }
.sf-btn-primary { background: var(--sf-accent); color: #fff; } .sf-btn-primary:hover:not(:disabled) { background: var(--sf-accent-hover); color: #fff; }
.sf-btn-soft { background: var(--sf-soft); color: #111827; } .sf-btn-soft:hover { background: #e5e7ef; color: #111827; }
.sf-grow { flex: 1; }
.sf-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 30px; color: var(--sf-muted); }
.sf-empty i { font-size: 3rem; color: #cbd5e1; }

/* ---------- Esqueletos ---------- */
.sf-skel { display: block; border-radius: 8px; min-height: 14px; background: linear-gradient(100deg, #eceef5 30%, #f7f8fc 50%, #eceef5 70%); background-size: 200% 100%; animation: sf-shine 1.2s linear infinite; }
@keyframes sf-shine { to { background-position: -200% 0; } }
.sf-skel-list { padding: 8px 20px; }
.sf-skel-line { display: grid; grid-template-columns: 84px 1fr; gap: 14px; padding: 16px 0; }
.sf-skel-line .sf-skel:first-child { height: 84px; }

/* ---------- Modal de visualização rápida ---------- */
.sf-layer-center { display: grid; place-items: center; padding: 16px; }
.sf-modal { position: relative; background: #fff; border-radius: 16px; width: min(900px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 24px; box-shadow: var(--sf-shadow); opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .25s, transform .3s var(--sf-ease); outline: none; }
.is-open > .sf-modal { opacity: 1; transform: none; }
.sf-modal-x { position: absolute; top: 14px; right: 14px; z-index: 2; }
.sf-modal-msg { padding: 30px; text-align: center; }
.sf-qv { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.sf-qv-main { aspect-ratio: 1; background: var(--sf-soft); border-radius: 14px; display: grid; place-items: center; overflow: hidden; color: #cbd5e1; font-size: 4rem; }
.sf-qv-main img { width: 100%; height: 100%; object-fit: contain; }
.sf-qv-skel { aspect-ratio: 1; border-radius: 14px; }
.sf-thumbs { display: flex; gap: 8px; margin-top: 10px; }
.sf-thumbs button { width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 10px; background: var(--sf-soft); overflow: hidden; cursor: pointer; }
.sf-thumbs button.is-on { border-color: var(--sf-accent); }
.sf-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.sf-qv-info { display: flex; flex-direction: column; gap: 10px; padding-right: 30px; }
.sf-qv-info h2 { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.sf-kicker { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--sf-muted); }
.sf-price { display: flex; align-items: baseline; gap: 10px; }
.sf-price strong { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
.sf-price s { color: var(--sf-muted); font-size: 1rem; }
.sf-pix { display: inline-flex; align-items: center; gap: 6px; width: fit-content; background: var(--storefront-pix-bg, #e5f6ee); color: var(--storefront-pix, #159b67); font-weight: 600; font-size: .85rem; padding: 5px 11px; border-radius: 999px; }
.sf-desc { color: #4b5563; font-size: .92rem; line-height: 1.55; margin: 0; }
.sf-field { display: grid; gap: 6px; font-weight: 600; font-size: .85rem; }
.sf-field select { height: 44px; border: 1px solid var(--sf-line); border-radius: 10px; padding: 0 12px; font: inherit; font-weight: 500; background: #fff; }
.sf-buy { display: flex; gap: 10px; margin-top: 6px; }
.sf-buy .sf-btn { height: 46px; }
.sf-more { color: var(--sf-accent); font-weight: 600; font-size: .9rem; text-decoration: none; }
.sf-more:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .sf-qv { grid-template-columns: 1fr; gap: 16px; } .sf-qv-info { padding-right: 0; } .sf-modal { padding: 16px; }
  .sf-qv-main { max-height: 300px; aspect-ratio: auto; height: 260px; }
}

/* ---------- Sugestões da busca ---------- */
.sf-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1500; background: #fff; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); box-shadow: var(--sf-shadow); overflow: hidden; animation: sf-in .2s var(--sf-ease); text-align: left; }
.sf-sg { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 9px 14px; text-decoration: none; color: #111827; }
.sf-sg:hover, .sf-sg.is-on { background: var(--sf-soft); color: #111827; }
.sf-sg-img { width: 48px; height: 48px; border-radius: 8px; background: var(--sf-soft); display: grid; place-items: center; overflow: hidden; color: #cbd5e1; }
.sf-sg-img img { width: 100%; height: 100%; object-fit: contain; }
.sf-sg-txt { min-width: 0; display: grid; }
.sf-sg-txt b { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-sg-txt small { color: var(--sf-muted); font-size: .76rem; }
.sf-sg-price { display: grid; text-align: right; font-size: .9rem; } .sf-sg-price s { color: var(--sf-muted); font-size: .75rem; }
.sf-sg-skel .sf-skel:first-child { height: 48px; } .sf-sg-skel { grid-template-columns: 48px 1fr; }
.sf-sg-none { padding: 18px; color: var(--sf-muted); text-align: center; font-size: .9rem; }
.sf-sg-all { display: block; padding: 11px 14px; text-align: center; font-weight: 600; font-size: .86rem; background: var(--sf-soft); color: var(--sf-accent); text-decoration: none; }

/* ---------- Avisos ---------- */
.sf-toasts { position: fixed; z-index: 2100; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; gap: 8px; pointer-events: none; width: min(92vw, 420px); }
.sf-toast { background: #111827; color: #fff; padding: 12px 16px; border-radius: 12px; font-weight: 500; font-size: .9rem; box-shadow: var(--sf-shadow); display: flex; gap: 9px; align-items: center; animation: sf-in .3s var(--sf-ease); }
.sf-toast i { color: #34d399; } .sf-toast.is-err i { color: #f87171; }

:focus-visible { outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .sf-layer *, .sf-layer, .sf-toast, .sf-suggest, .storefront-product-card, .storefront-product-card * , .cart-badge-count, .sf-skel { animation: none !important; transition-duration: .01ms !important; }
}

/* ---------- Paginação (estilo em pílulas, ativo em destaque) ---------- */
.sf-pager { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 32px; }
.sf-pager a, .sf-pager > span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #374151; text-decoration: none; background: transparent; transition: background .15s, color .15s, transform .15s var(--sf-ease); }
.sf-pager a:hover { background: var(--sf-soft); color: #111827; }
.sf-pager a:active { transform: scale(.96); }
.sf-pager a.active { background: var(--sf-accent); color: #fff; box-shadow: 0 4px 12px rgba(16, 24, 47, .22); }
.sf-pager .sf-pager-gap { min-width: 24px; padding: 0; color: var(--sf-muted); }
.sf-pager .sf-pager-nav { color: var(--sf-accent); }
.sf-pager .sf-pager-nav.is-disabled { color: #b8bdc9; }
@media (max-width: 480px) { .sf-pager .sf-pager-nav span { display: none; } }
.sf-pager a span, .sf-pager > span span { border: 0; padding: 0; min-width: 0; height: auto; border-radius: 0; background: none; }
.sf-pager .sf-pager-nav.is-disabled { border: 0; }

/* ---------- Cartões, selos pastel e tabelas (padrão dos modelos) ---------- */
.sf-card { background: #fff; border: 0; border-radius: var(--sf-radius); box-shadow: 0 1px 2px rgba(16, 24, 47, .05), 0 2px 12px rgba(16, 24, 47, .04); overflow: hidden; }
.sf-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--sf-line); }
.sf-card-title { position: relative; margin: 0; padding-left: 12px; font-size: 1rem; font-weight: 700; color: #111827; }
.sf-card-title::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--sf-accent), #7dd3fc); }
.sf-tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: .74rem; font-weight: 600; line-height: 1.2; }
.sf-tag-primary { background: #ecebfb; color: #5b4bd6; }
.sf-tag-success { background: #e4f6ef; color: #12a06d; }
.sf-tag-danger { background: #fdebe8; color: #e2503a; }
.sf-tag-warning { background: #fef4e2; color: #d98d0b; }
.sf-tag-info { background: #e3f4fd; color: #1f8fd0; }

.sf-table { --bs-table-bg: transparent; margin: 0; }
.sf-table thead th { background: #fff; color: #111827; font-weight: 700; font-size: .88rem; padding: 14px 12px; border-bottom: 1px solid var(--sf-line); white-space: nowrap; }
.sf-table tbody td { padding: 16px 12px; border-bottom: 1px solid var(--sf-line); vertical-align: middle; }
.sf-table tbody tr:last-child td { border-bottom: 0; }
.sf-table tbody tr { transition: background .15s; } .sf-table tbody tr:hover { background: #fafbff; }
.sf-thumb { flex: none; width: 76px; height: 76px; border-radius: 10px; background: var(--sf-soft); display: grid; place-items: center; overflow: hidden; color: #cbd5e1; font-size: 1.6rem; }
.sf-cart .cart-table .sf-thumb img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; padding: 6px; object-fit: contain !important; }
.sf-item-name { font-weight: 600; font-size: .95rem; color: #111827; text-decoration: none; line-height: 1.3; }
.sf-item-name:hover { color: var(--sf-accent); }
.sf-item-attr { font-size: .82rem; color: #111827; } .sf-item-attr span { color: var(--sf-muted); }
.sf-cell-price { font-weight: 700; color: #111827; white-space: nowrap; }

/* stepper do carrinho (form) */
.sf-cart .qty-form.sf-step { display: inline-flex; }
.sf-cart .qty-form .qty-step { width: 32px; height: 38px; border: 0; background: var(--sf-soft); font-size: 1.05rem; cursor: pointer; color: #111827; transition: background .15s; }
.sf-cart .qty-form .qty-step:hover { background: #e5e7ef; }
.sf-step-input { width: 52px; height: 38px; border: 0; text-align: center; font: 600 .9rem 'Inter', system-ui, sans-serif; font-variant-numeric: tabular-nums; background: #fff; -moz-appearance: textfield; appearance: textfield; }
.sf-step-input::-webkit-outer-spin-button, .sf-step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ações quadradas (ver / remover) */
.sf-actions { display: flex; gap: 8px; justify-content: flex-end; }
.sf-actions form { margin: 0; }
.sf-act { width: 36px; height: 36px; border: 0; border-radius: 8px; display: inline-grid; place-items: center; color: #fff; text-decoration: none; cursor: pointer; font-size: .95rem; transition: transform .15s var(--sf-ease), filter .15s; }
.sf-act:hover { filter: brightness(1.08); color: #fff; } .sf-act:active { transform: scale(.94); }
.sf-act-view { background: var(--sf-ok); } .sf-act-danger { background: var(--sf-danger); }

/* resumo do pedido */
.sf-summary { padding: 0; }
.sf-summary > :not(.sf-card-head) { margin-left: 20px; margin-right: 20px; }
.sf-summary > .sf-card-head { margin: 0; }
.sf-summary > .sf-coupon { margin-top: 18px; }
.sf-summary .d-flex.justify-content-between > span:first-child { color: var(--sf-muted); }
.sf-summary .d-flex.justify-content-between > span:last-child { font-weight: 700; color: #111827; font-variant-numeric: tabular-nums; }
.sf-summary .border-top { border-color: var(--sf-line) !important; }
.sf-summary .border-top > span:first-child { color: #111827 !important; font-weight: 700; }
.sf-summary #summary-total { color: var(--sf-accent) !important; font-size: 1.25rem; }
.sf-summary > .btn-finish-cart { margin-bottom: 20px; }
.sf-summary > p:last-child, .sf-summary > a:last-child { margin-bottom: 20px; }
.sf-coupon { display: flex; }
.sf-coupon input { flex: 1; min-width: 0; height: 44px; border: 1px solid var(--sf-line); border-right: 0; border-radius: 10px 0 0 10px; padding: 0 14px; font: inherit; font-size: .9rem; background: #fff; }
.sf-coupon input:focus { outline: 0; border-color: var(--sf-accent); }
.sf-coupon button { height: 44px; padding: 0 20px; border: 0; border-radius: 0 10px 10px 0; background: var(--sf-accent); color: #fff; font: 600 .9rem 'Inter', system-ui, sans-serif; cursor: pointer; transition: background .15s; }
.sf-coupon button:hover { background: var(--sf-accent-hover); }
.sf-cart .btn-finish-cart { display: flex; align-items: center; height: 48px; border-radius: 10px; background: var(--sf-accent); font-weight: 600; text-decoration: none; transition: transform .15s var(--sf-ease), background .2s; }
.sf-cart .btn-finish-cart:hover { background: var(--sf-accent-hover); color: #fff; } .sf-cart .btn-finish-cart:active { transform: scale(.98); }
.sf-cart .btn-clear-cart { border-radius: 8px; background: #fdebe8; color: #e2503a; padding: 9px 14px; transition: background .15s, color .15s; }
.sf-cart .btn-clear-cart:hover { background: var(--sf-danger); color: #fff; }
@media (max-width: 768px) { .sf-thumb { width: 60px; height: 60px; } .sf-table thead th, .sf-table tbody td { padding: 12px 8px; } }

/* ---------- Página do produto (mesmo padrão dos cartões e selos) ---------- */
.product-info-panel { border-radius: var(--sf-radius); }
.product-title { font-weight: 700; letter-spacing: -.02em; }
.card-price-regular, .pix-banner-amount { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.gallery-main-view { border-radius: var(--sf-radius); background: var(--sf-soft); }
.gallery-main-view img { image-rendering: auto; backface-visibility: hidden; }
.gallery-thumb { border-radius: 10px; background: var(--sf-soft); transition: border-color .15s, transform .15s var(--sf-ease); }
.gallery-thumb:hover { transform: translateY(-1px); }

.buy-action-row .qty-selector { border: 1px solid var(--sf-line); background: #fff; border-radius: 10px; }
.buy-action-row .qty-btn { width: 40px; background: var(--sf-soft); color: #111827; }
.buy-action-row .qty-btn:hover { background: #e5e7ef; }
.buy-action-row .qty-input { font-variant-numeric: tabular-nums; }
.btn-storefront-buy { border-radius: 10px; font-weight: 700; letter-spacing: 0; background: var(--storefront-accent, #159b67); box-shadow: 0 6px 16px rgba(21, 155, 103, .28); }
.btn-storefront-buy:hover { background: var(--storefront-accent, #159b67); filter: brightness(.94); box-shadow: 0 8px 20px rgba(21, 155, 103, .34); }
.btn-storefront-buy:disabled { background: #9aa3b5; filter: none; }

.availability-text { display: flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; margin: 0 auto 16px; padding: 6px 12px; border-radius: 8px; background: #e4f6ef; color: #12a06d; font-weight: 600; }
.availability-text:has(.text-danger) { background: #fdebe8; }
.availability-text .text-danger { color: #e2503a !important; }

.storefront-accordion-item { border: 0; border-radius: var(--sf-radius); box-shadow: 0 1px 2px rgba(16, 24, 47, .05), 0 2px 12px rgba(16, 24, 47, .04); }
.storefront-accordion-header { position: relative; background: #fff; padding: 16px 20px; font-weight: 700; }
.storefront-accordion-header::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--sf-accent), #7dd3fc); }
.storefront-accordion-body { border-top: 1px solid var(--sf-line); color: #4b5563; }
.shipping-calc-box { border-radius: var(--sf-radius); }

/* ---------- Checkout (cartões por etapa, campos e opções de entrega) ---------- */
.checkout-step-card { border: 0; border-radius: var(--sf-radius); box-shadow: 0 1px 2px rgba(16, 24, 47, .05), 0 2px 12px rgba(16, 24, 47, .04); }
.checkout-step-card .step-header-title { position: relative; padding-left: 12px; font-size: 1rem; font-weight: 700; text-transform: none; letter-spacing: -.01em; }
.checkout-step-card .step-header-title::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--sf-accent), #7dd3fc); }
.sf-cart .checkout-step-card .step-header-title::before { display: none; }
.step-number-badge { background: var(--sf-accent); font-variant-numeric: tabular-nums; }
.checkout-step-card .form-label { font-weight: 600; color: #374151; }
.checkout-step-card .form-control, .checkout-step-card .form-select { min-height: 44px; border-color: var(--sf-line); border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
.checkout-step-card .form-control:focus, .checkout-step-card .form-select:focus { border-color: var(--sf-accent); box-shadow: 0 0 0 3px rgba(16, 24, 47, .10); }
.theme-storefront .shipping-option { border-radius: 10px; border-color: var(--sf-line); transition: border-color .15s, background .15s, box-shadow .15s; }
.theme-storefront .shipping-option:hover { border-color: #b8bdc9; }
.theme-storefront .shipping-option.active { border-color: var(--sf-accent); background: #f6f7fb; box-shadow: 0 0 0 1px var(--sf-accent); }
.sf-summary > .btn-finish-cart { width: auto !important; }

/* ---------- Frete no carrinho (calcular, escolher a opção, levar ao checkout) ---------- */
.sf-ship { margin: 18px 20px 4px; padding: 16px; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); background: #fafbff; }
.sf-ship-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sf-ship-head b { display: block; font-size: .95rem; color: #111827; }
.sf-ship-head small { display: block; color: var(--sf-muted); font-size: .78rem; line-height: 1.3; }
.sf-ship-ico { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #ecebfb; color: #5b4bd6; font-size: 1.15rem; }
.sf-ship-link { display: inline-block; margin-top: 8px; font-size: .8rem; font-weight: 600; color: var(--sf-accent); text-decoration: none; }
.sf-ship-link:hover { text-decoration: underline; }
.sf-ship-body #cart-shipping-results { display: grid; gap: 8px; margin-top: 12px; }
.sf-ship-msg { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--sf-soft); color: #4b5563; font-size: .85rem; }
.sf-ship-msg.is-err { background: #fdebe8; color: #e2503a; }
.sf-ship-msg .bi-arrow-repeat { display: inline-block; animation: sf-spin 1s linear infinite; }
@keyframes sf-spin { to { transform: rotate(360deg); } }
.sf-ship-opt { position: relative; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--sf-line); border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.sf-ship-opt:hover { border-color: #b8bdc9; }
.sf-ship-opt.is-on { border-color: var(--sf-accent); box-shadow: 0 0 0 1px var(--sf-accent); background: #f6f7fb; }
.sf-ship-opt input { position: absolute; opacity: 0; pointer-events: none; }
.sf-ship-opt:has(input:focus-visible) { outline: 2px solid var(--sf-accent); outline-offset: 2px; }
.sf-ship-radio { width: 18px; height: 18px; border: 2px solid #b8bdc9; border-radius: 50%; display: grid; place-items: center; transition: border-color .15s; }
.sf-ship-opt.is-on .sf-ship-radio { border-color: var(--sf-accent); }
.sf-ship-opt.is-on .sf-ship-radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sf-accent); }
.sf-ship-name { display: grid; min-width: 0; }
.sf-ship-name b { font-size: .9rem; color: #111827; }
.sf-ship-name small { color: var(--sf-muted); font-size: .78rem; }
.sf-ship-price { font-variant-numeric: tabular-nums; color: #111827; white-space: nowrap; }
.sf-ship-price.is-free { color: #12a06d; }
@media (max-width: 480px) { .sf-ship { margin-left: 16px; margin-right: 16px; padding: 14px; } }

/* ---------- Toque: alvos de pelo menos ~32–36 px no celular e em telas de toque ---------- */
@media (pointer: coarse), (max-width: 820px) {
  .sf-quick { min-height: 34px; padding: 9px 14px; }
  footer a[href] { display: inline-block; padding-block: 7px; }
  .storefront-logo-link, .shipping-help-link { display: inline-block; padding-block: 7px; }
}

/* ---------- Conta no cabeçalho, janela de entrar/cadastrar e formulários de cadastro ---------- */
.sf-acc-pop { position: fixed; z-index: 1900; width: min(560px, calc(100vw - 16px)); display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-radius: 12px; box-shadow: 0 2px 6px rgba(16, 24, 47, .08), 0 18px 48px rgba(16, 24, 47, .22); padding: 26px 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .22s var(--sf-ease), visibility 0s .22s; }
.sf-acc-pop.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sf-acc-left { display: flex; flex-direction: column; align-items: center; padding: 0 28px; border-right: 1px solid var(--sf-line); }
.sf-acc-avatar { width: 92px; height: 92px; border-radius: 50%; border: 3px solid #2b2f3a; color: #2b2f3a; overflow: hidden; display: block; background: #fff; }
.sf-acc-hello { margin: 12px 0 14px; text-align: center; font-size: 1.35rem; line-height: 1.15; color: #64748b; }
.sf-acc-hello span { display: block; font-weight: 500; }
.sf-acc-btn { display: block; width: 100%; text-align: center; padding: 9px 12px; border-radius: 6px; background: var(--sf-accent); color: #fff !important; font-weight: 700; text-decoration: none; transition: background .15s; }
.sf-acc-btn:hover { background: var(--sf-accent-hover); }
.sf-acc-list { list-style: none; margin: 0; padding: 4px 28px; display: grid; align-content: center; gap: 4px; }
.sf-acc-list a, .sf-acc-list button { display: flex; align-items: center; gap: 14px; padding: 9px 0; color: #374151; text-decoration: none; background: none; border: 0; font: inherit; width: 100%; text-align: left; cursor: pointer; }
.sf-acc-list a:hover, .sf-acc-list button:hover { color: var(--sf-accent); }
.sf-acc-list i { font-size: 1.35rem; line-height: 1; }
.sf-acc-list form { margin: 0; }
@media (max-width: 991px) { .sf-acc-pop { display: none; } }

.sf-auth-modal { width: min(460px, 100%); padding: 22px 26px 26px; transition: width .25s var(--sf-ease), opacity .25s, transform .3s var(--sf-ease); }
.sf-auth-modal.is-wide { width: min(880px, 100%); }
.sf-auth-tabs { display: flex; gap: 6px; margin: 0 44px 18px 0; border-bottom: 1px solid var(--sf-line); }
.sf-auth-tabs button { border: 0; background: none; padding: 10px 14px; font-weight: 700; color: var(--sf-muted); border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; min-height: 44px; }
.sf-auth-tabs button.is-on { color: var(--sf-accent); border-bottom-color: var(--sf-accent); }
.sf-auth-skel { padding: 8px 0 24px; }

.sf-auth-page { display: flex; justify-content: center; margin-top: 12px; }
.sf-auth-page .checkout-step-card { width: min(460px, 100%); padding: 26px; }
.sf-auth-page.is-register .checkout-step-card { width: min(920px, 100%); padding: 28px 32px; }

.sf-af-title { font-size: 1.7rem; font-weight: 800; color: #0b1a24; margin: 0 0 4px; }
.sf-af-sub { color: var(--sf-muted); margin: 0 0 18px; }
.sf-af-sec { font-size: 1.5rem; font-weight: 500; color: #5b6b7b; margin: 26px 0 2px; }
.sf-af-hint { font-size: .8rem; color: var(--sf-muted); margin: 0 0 16px; }
.sf-af-or { display: flex; align-items: center; gap: 12px; color: var(--sf-muted); font-size: .85rem; margin-bottom: 16px; }
.sf-af-or::before, .sf-af-or::after { content: ''; flex: 1; height: 1px; background: var(--sf-line); }
.sf-af-google { max-width: 380px; }
.sf-af-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 16px; align-items: start; margin-bottom: 14px; }
.sf-af-row > label { text-align: right; font-weight: 700; color: #1f2a37; padding-top: 11px; }
.sf-af-row > label span { color: var(--sf-danger); }
.sf-af-stack { margin-bottom: 14px; }
.sf-af-stack label { display: block; font-size: .85rem; font-weight: 600; color: #374151; margin-bottom: 4px; }
.sf-af .form-control, .sf-af .form-select { min-height: 46px; border-color: #d5dbe5; border-radius: 8px; }
.sf-af .form-control:focus, .sf-af .form-select:focus { border-color: var(--sf-accent); box-shadow: 0 0 0 3px rgba(16, 24, 47, .12); }
.sf-af .form-control[readonly] { background: #f3f4f9; color: #6b7280; }
.sf-af-err { min-height: 0; font-size: .8rem; color: var(--sf-danger); margin-top: 4px; }
.sf-af-err:empty { display: none; }
.is-invalid > .sf-af-ctl .form-control, .is-invalid > .sf-af-ctl .form-select, .sf-af-stack.is-invalid .form-control { border-color: var(--sf-danger); }
.is-invalid > .sf-af-ctl .form-control:focus, .sf-af-stack.is-invalid .form-control:focus { box-shadow: 0 0 0 3px rgba(227, 52, 63, .15); }
.sf-af-row.is-loading .form-control { background-image: linear-gradient(90deg, transparent, rgba(16, 24, 47, .06), transparent); background-size: 200% 100%; animation: sf-shine 1s linear infinite; }
.sf-af-msg { display: none; margin: 4px 0 14px; padding: 10px 14px; border-radius: 8px; background: #fdecee; color: #a11a25; font-size: .9rem; }
.sf-af-msg.is-on { display: block; }
.sf-af-actions { display: flex; justify-content: center; margin-top: 8px; }
.sf-af-actions .btn-storefront-buy { min-width: 240px; }
.sf-af .btn-storefront-buy.is-loading { opacity: .7; cursor: progress; }
.sf-af-switch { text-align: center; margin: 18px 0 0; color: var(--sf-muted); font-size: .9rem; }
.sf-af-switch a { font-weight: 700; color: var(--sf-accent); }
@media (max-width: 720px) {
  .sf-af-row { grid-template-columns: 1fr; row-gap: 4px; }
  .sf-af-row > label { text-align: left; padding-top: 0; font-size: .85rem; }
  .sf-auth-modal, .sf-auth-modal.is-wide { padding: 18px 16px 22px; }
  .sf-af-title { font-size: 1.4rem; } .sf-af-sec { font-size: 1.25rem; }
  .sf-auth-page.is-register .checkout-step-card { padding: 20px 16px; }
  .sf-af-actions .btn-storefront-buy { width: 100%; }
}

/* ---------- Checkout express em tela única e progressivo ---------- */
.sf-prog { display: flex; list-style: none; padding: 0; margin: 4px 0 18px; counter-reset: p; }
.sf-prog li { flex: 1; position: relative; }
.sf-prog li + li::before { content: ''; position: absolute; left: -50%; right: 50%; top: 17px; height: 3px; background: var(--sf-line); z-index: 0; transition: background .3s; }
.sf-prog li.is-done + li::before, .sf-prog li.is-current::before, .sf-prog li.is-done::before { background: var(--sf-ok); }
.sf-prog button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; background: none; border: 0; padding: 0; color: var(--sf-muted); font-size: .8rem; font-weight: 600; cursor: pointer; }
.sf-prog button:disabled { cursor: default; }
.sf-prog-n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--sf-line); font-weight: 800; transition: all .25s; }
.sf-prog li.is-current .sf-prog-n { border-color: var(--sf-accent); background: var(--sf-accent); color: #fff; box-shadow: 0 0 0 4px rgba(16, 24, 47, .12); }
.sf-prog li.is-current button { color: var(--sf-accent); }
.sf-prog li.is-done .sf-prog-n { border-color: var(--sf-ok); background: var(--sf-ok); color: #fff; font-size: 0; }
.sf-prog li.is-done .sf-prog-n::after { content: '\2713'; font-size: 1rem; }
.sf-express { display: flex; gap: 12px; align-items: center; background: #ecfaf3; border: 1px solid #bfe9d3; color: #0f6b46; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; }
.sf-express[hidden] { display: none; }
.sf-express i { font-size: 1.5rem; }
.sf-express span { display: block; font-size: .88rem; }

#checkout-form.sf-progressive { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: repeat(4, max-content) 1fr; gap: 0 24px; align-items: start; margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; }
#checkout-form.sf-progressive > .sf-col { display: contents; }
#checkout-form.sf-progressive .checkout-step-card[data-step] { grid-column: 1; margin: 0 0 14px !important; width: auto; max-width: none; }
#checkout-form.sf-progressive [data-sf-summary] { grid-column: 2; grid-row: 1 / span 5; position: sticky; top: 90px; align-self: start; margin: 0; }
.sf-sc { transition: box-shadow .25s, opacity .25s; }
.sf-sc.is-open { box-shadow: 0 0 0 2px var(--sf-accent), var(--sf-shadow); }
.sf-sc.is-todo { opacity: .55; }
.sf-sc-head { display: flex; align-items: center; gap: 12px; min-height: 34px; }
.sf-sc-head .step-header-title { margin: 0; flex: none; }
.sf-sc-sum { flex: 1; min-width: 0; color: #4b5563; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: none; }
.sf-sc.is-done .sf-sc-sum { display: block; }
.sf-sc-edit { border: 0; background: none; color: var(--sf-accent); font-weight: 700; text-decoration: underline; padding: 6px 4px; min-height: 36px; margin-left: auto; }
.sf-sc-edit[hidden] { display: none; }
.sf-sc.is-done .step-number-badge { background: var(--sf-ok); color: #fff; font-size: 0; }
.sf-sc.is-done .step-number-badge::after { content: '\2713'; font-size: .85rem; }
.sf-sc-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--sf-ease); }
.sf-sc.is-open .sf-sc-collapse { grid-template-rows: 1fr; }
.sf-sc-body { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s .32s; }
.sf-sc.is-open .sf-sc-body { visibility: visible; transition-delay: 0s; padding: 16px 3px 3px; margin: 0 -3px; }
.sf-sc-note { color: var(--sf-danger); font-size: .85rem; margin: 10px 0 0; }
.sf-sc-note:empty { display: none; }
.sf-sc-next { margin-top: 16px; }
.sf-sc.was-validated .form-control:invalid, .sf-sc.was-validated .form-select:invalid { border-color: var(--sf-danger); }
.sf-final { margin-top: 16px; display: grid; gap: 10px; }
.sf-final button[type="submit"] { width: 100%; justify-content: center; min-height: 54px; font-size: 1.05rem; opacity: .75; transition: opacity .2s, transform .2s; }
.is-ready .sf-final button[type="submit"] { opacity: 1; }
.sf-final button.is-loading { cursor: progress; opacity: .7; }
.sf-final .d-block { margin-top: 0 !important; }
.sf-final-trust { margin: 0; text-align: center; font-size: .8rem; color: var(--sf-muted); }
.sf-final-trust i { color: var(--sf-ok); }
.sf-bar { display: none; }
@media (max-width: 991px) {
  #checkout-form.sf-progressive { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  #checkout-form.sf-progressive [data-sf-summary] { grid-column: 1; grid-row: auto; position: static; order: 5; }
  #checkout-form.sf-progressive [data-step="pagamento"] { order: 4; }
  .sf-sc-sum { white-space: normal; font-size: .82rem; }
  .sf-sc-head { flex-wrap: wrap; }
  .sf-sc.is-done .sf-sc-sum { order: 3; flex-basis: 100%; }
  .sf-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -6px 24px rgba(16, 24, 47, .14); transform: translateY(110%); transition: transform .3s var(--sf-ease); }
  .sf-bar.is-on { transform: none; }
  .sf-bar small { display: block; color: var(--sf-muted); line-height: 1; }
  .sf-bar strong { font-size: 1.15rem; }
  .sf-bar .btn-storefront-buy { padding: 0 22px; min-height: 48px; opacity: .8; }
  .sf-bar.is-ready .btn-storefront-buy { opacity: 1; }
  .sf-prog-t { font-size: .72rem; }
}

/* Selo de disponibilidade da página do produto: só "Pronta entrega · Envio imediato" (sem quantidade em estoque) */
.availability-text:not(:has(.text-danger)) { background: linear-gradient(135deg, #e9f9f1, #d9f3e6); color: #0d6b45; border: 1px solid #b9e6d1; border-radius: 999px; padding: 7px 16px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; }
.availability-text:not(:has(.text-danger)) i { color: #0d9b62; font-size: 1rem; }

/* ---------- Pagar / trocar a forma de pagamento pela área do cliente ---------- */
.sf-pay-mount:not(:empty) ~ .sf-pay-fallback { display: none; }
.sf-pay { background: #fff; border: 1px solid var(--sf-line); border-radius: 16px; box-shadow: var(--sf-shadow); padding: 20px; margin-bottom: 20px; }
.sf-pay-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sf-pay-head h2 { font-size: 1.2rem; font-weight: 800; margin: 0 0 2px; }
.sf-pay-head p { margin: 0; color: var(--sf-muted); font-size: .9rem; }
.sf-pay-box { background: var(--sf-soft); border-radius: 14px; padding: 18px; text-align: center; }
.sf-pay-box h3 { font-size: 1.05rem; font-weight: 800; margin: 0 0 10px; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.sf-pay-steps { text-align: left; max-width: 420px; margin: 0 auto 14px; padding-left: 1.2rem; color: #4b5563; font-size: .9rem; }
.sf-pay-qr { display: inline-block; padding: 12px; background: #fff; border-radius: 14px; border: 1px solid var(--sf-line); margin: 4px 0 12px; min-height: 248px; min-width: 248px; }
.sf-pay-qr img, .sf-pay-qr canvas { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.sf-pay-copy { max-width: 560px; margin: 0 auto; display: grid; gap: 8px; }
.sf-pay-copy textarea { width: 100%; resize: none; border: 1px solid var(--sf-line); border-radius: 10px; padding: 10px; font-size: .78rem; font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all; background: #fff; }
.sf-pay-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 10px; border: 0; background: var(--sf-accent); color: #fff !important; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .15s, transform .15s; }
.sf-pay-btn:hover { background: var(--sf-accent-hover); }
.sf-pay-btn.is-ghost { background: #fff; color: var(--sf-accent) !important; border: 1px solid var(--sf-accent); }
.sf-pay-btn.is-ghost:hover { background: var(--sf-soft); }
.sf-pay-link { border: 0; background: none; color: var(--sf-accent); font-weight: 700; text-decoration: underline; padding: 0; }
.sf-pay-note { color: #4b5563; font-size: .9rem; margin: 0 0 12px; }
.sf-pay-err { color: #a11a25; background: #fdecee; border-radius: 8px; padding: 8px 12px; font-size: .88rem; }
.sf-pay-wait { margin: 14px 0 0; font-size: .85rem; color: var(--sf-muted); display: flex; gap: 8px; align-items: center; justify-content: center; }
.sf-pay-dot { width: 9px; height: 9px; border-radius: 50%; background: #f5a524; animation: sf-pulse 1.4s ease-in-out infinite; }
@keyframes sf-pulse { 50% { transform: scale(1.5); opacity: .4; } }
.sf-pay-ok, .sf-pay-off { display: flex; gap: 14px; align-items: center; border-radius: 14px; padding: 16px 18px; }
.sf-pay-ok { background: #e9f9f1; color: #0d6b45; } .sf-pay-off { background: #f3f4f9; color: #4b5563; }
.sf-pay-ok i, .sf-pay-off i { font-size: 2rem; } .sf-pay-ok span, .sf-pay-off span { display: block; font-size: .9rem; }
.sf-pay-opts { display: grid; gap: 10px; }
.sf-pay-opt { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border: 1.5px solid var(--sf-line); border-radius: 12px; background: #fff; cursor: pointer; min-height: 64px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.sf-pay-opt:hover:not(:disabled) { border-color: var(--sf-accent); box-shadow: 0 4px 16px rgba(16, 24, 47, .1); transform: translateY(-1px); }
.sf-pay-opt.is-current { border-color: var(--sf-ok); background: #f3fbf7; }
.sf-pay-opt:disabled { opacity: .6; cursor: progress; }
.sf-pay-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--sf-soft); display: grid; place-items: center; font-size: 1.4rem; color: var(--sf-accent); }
.sf-pay-txt b { display: block; } .sf-pay-txt small { color: var(--sf-muted); }
.sf-pay-go { color: var(--sf-muted); font-weight: 700; font-size: .85rem; }
.sf-spin { display: inline-block; animation: sf-rot .8s linear infinite; } @keyframes sf-rot { to { transform: rotate(360deg); } }
@media (max-width: 720px) { .sf-pay { padding: 14px; border-radius: 14px; } .sf-pay-btn { width: 100%; } .sf-pay-qr { min-width: 0; width: 100%; min-height: 0; } .sf-pay-head .sf-pay-btn { width: 100%; } }

/* Logos oficiais de gateways (biblioteca: public/assets/brands) */
.sf-brand-sep { color: var(--sf-muted); margin: 0 2px; }
.sf-pay-txt small .sf-brand-wrap, .sf-pay-txt small .sf-brand-chip { margin-top: 2px; }
.sf-ship-opt .sf-brand, .shipping-option .sf-brand { margin-right: 2px; }

.sf-pay-opts[hidden] { display: none; }
.sf-pay-cpf { background: var(--sf-soft); border-radius: 14px; padding: 16px; display: grid; gap: 8px; max-width: 460px; }
.sf-pay-cpf label { font-weight: 700; font-size: .9rem; }
.sf-pay-cpf .sf-pay-note { margin: 0 0 4px; }
.sf-pay-cpf-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.sf-payer-cpf .alert { margin-bottom: 8px; }
@media (max-width: 720px) { .sf-pay-cpf-actions .sf-pay-btn { flex: 1; } }

/* ---------- Área do cliente (resumo, pedidos, mensagens) ---------- */
.acc-layout { align-items: start; }
.acc-layout.is-loading .acc-main { opacity: .55; transition: opacity .15s; pointer-events: none; }
.acc-nav { position: sticky; top: 96px; border-radius: 16px !important; padding: 12px !important; box-shadow: var(--sf-shadow); background: #fff; }
.acc-nav a, .acc-nav .account-nav-logout { display: flex !important; align-items: center; gap: 10px; min-height: 44px; }
.acc-nav a span { flex: 1; }
.acc-nav-user { display: flex; align-items: center; gap: 12px; padding: 8px 8px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--sf-line); }
.acc-nav-user small { display: block; color: var(--sf-muted); line-height: 1; }
.acc-nav-user strong { font-size: 1.05rem; }
.acc-nav-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--sf-accent); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; }
.acc-badge { background: var(--sf-danger); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 800; font-style: normal; margin-left: 6px; }
.acc-badge[hidden] { display: none; }
.acc-sub { display: block; font-size: .9rem; font-weight: 500; color: var(--sf-muted); margin-top: 4px; }
.acc-back { margin: 0 0 8px; font-size: .9rem; }
.acc-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.acc-card { display: grid; gap: 2px; padding: 16px; background: #fff; border: 1px solid var(--sf-line); border-radius: 14px; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.acc-card:hover { transform: translateY(-2px); box-shadow: var(--sf-shadow); }
.acc-card i { font-size: 1.4rem; color: var(--sf-accent); }
.acc-card b { font-size: 1.8rem; line-height: 1.1; }
.acc-card span { color: var(--sf-muted); font-size: .85rem; }
.acc-card.is-warn { border-color: #f5c56b; background: #fffaf0; } .acc-card.is-warn i { color: #d98c00; }
.acc-card.is-info { border-color: #9cc4ff; background: #f3f8ff; }
.acc-panel { background: #fff; border: 1px solid var(--sf-line); border-radius: 16px; padding: 18px; margin-bottom: 16px; }
.acc-panel.is-warn { border-color: #f5c56b; }
.acc-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.acc-panel-head h2 { font-size: 1.1rem; font-weight: 800; margin: 0; display: flex; gap: 8px; align-items: center; }
.acc-panel-head a { font-size: .9rem; font-weight: 700; }
.acc-alert { display: flex; gap: 14px; align-items: center; background: #fff6e0; border: 1px solid #f5c56b; border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; flex-wrap: wrap; }
.acc-alert > i { font-size: 1.6rem; color: #d98c00; } .acc-alert div { flex: 1; min-width: 200px; } .acc-alert b { display: block; } .acc-alert span { font-size: .9rem; color: #5b4a1c; }
.acc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--sf-line); background: #fff; color: var(--sf-accent); font-weight: 700; text-decoration: none; cursor: pointer; transition: background .15s; }
.acc-btn:hover { background: var(--sf-soft); }
.acc-btn.is-primary { background: var(--sf-accent); color: #fff; border-color: var(--sf-accent); } .acc-btn.is-primary:hover { background: var(--sf-accent-hover); }
.acc-btn.is-ghost { border-color: transparent; background: transparent; padding: 0 10px; }
.acc-btn:disabled, .acc-btn.is-loading { opacity: .6; cursor: progress; }
.acc-link { border: 0; background: none; color: var(--sf-muted); text-decoration: underline; font-size: .85rem; padding: 6px 0; }
.acc-empty { text-align: center; padding: 34px 16px; color: var(--sf-muted); } .acc-empty i { font-size: 2.4rem; display: block; margin-bottom: 8px; }
.acc-last { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.acc-track, .acc-safe { font-size: .88rem; color: var(--sf-muted); margin: 12px 0 0; } .acc-safe i { color: var(--sf-ok); }
.acc-dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; margin: 0; } .acc-dl dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sf-muted); } .acc-dl dd { margin: 0; font-weight: 600; word-break: break-word; }
/* linha do tempo do pedido */
.acc-steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 0; margin: 4px 0 0; position: relative; }
.acc-steps::before { content: ''; position: absolute; left: 10%; right: 10%; top: 19px; height: 4px; border-radius: 4px; background: var(--sf-line); }
.acc-steps::after { content: ''; position: absolute; left: 10%; top: 19px; height: 4px; border-radius: 4px; background: var(--sf-ok); width: calc(80% * var(--pct, 0%) / 100%); transition: width .6s var(--sf-ease); }
.acc-steps li { position: relative; z-index: 1; text-align: center; display: grid; justify-items: center; gap: 6px; }
.acc-step-dot { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 3px solid var(--sf-line); display: grid; place-items: center; color: var(--sf-muted); font-size: 1.05rem; }
.acc-steps .is-done .acc-step-dot { background: var(--sf-ok); border-color: var(--sf-ok); color: #fff; }
.acc-steps .is-current .acc-step-dot { border-color: var(--sf-accent); color: var(--sf-accent); box-shadow: 0 0 0 5px rgba(16, 24, 47, .12); animation: sf-pulse-ring 1.8s ease-in-out infinite; }
@keyframes sf-pulse-ring { 50% { box-shadow: 0 0 0 9px rgba(16, 24, 47, .04); } }
.acc-step-label { font-weight: 700; font-size: .85rem; } .acc-steps .is-todo .acc-step-label { color: var(--sf-muted); font-weight: 600; }
.acc-step-hint { font-size: .75rem; color: var(--sf-muted); max-width: 150px; }
.acc-steps.is-compact .acc-step-dot { width: 30px; height: 30px; font-size: .85rem; border-width: 2px; } .acc-steps.is-compact::before, .acc-steps.is-compact::after { top: 14px; height: 3px; } .acc-steps.is-compact .acc-step-label { font-size: .72rem; }
.acc-cancelled { display: flex; align-items: center; gap: 8px; color: #a11a25; background: #fdecee; padding: 10px 14px; border-radius: 10px; font-weight: 700; }
/* lista de pedidos */
.acc-toolbar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.acc-tabs { display: flex; gap: 6px; flex-wrap: wrap; overflow-x: auto; }
.acc-tabs a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--sf-line); background: #fff; color: #374151; font-weight: 600; font-size: .88rem; white-space: nowrap; text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
.acc-tabs a span { background: var(--sf-soft); border-radius: 999px; padding: 0 8px; font-size: .75rem; }
.acc-tabs a.active { background: var(--sf-accent); color: #fff; border-color: var(--sf-accent); } .acc-tabs a.active span { background: rgba(255, 255, 255, .2); }
.acc-search { position: relative; } .acc-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--sf-muted); }
.acc-search input { min-height: 42px; padding: 0 12px 0 36px; border: 1px solid var(--sf-line); border-radius: 10px; min-width: 240px; }
.acc-orders { display: grid; gap: 12px; }
.acc-order { background: #fff; border: 1px solid var(--sf-line); border-radius: 16px; padding: 16px; }
.acc-order header, .acc-order footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.acc-order-items { color: #4b5563; font-size: .9rem; margin: 6px 0 14px; }
.acc-order footer { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--sf-line); }
.acc-order-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acc-chip { background: var(--sf-soft); border-radius: 999px; padding: 4px 10px; font-size: .8rem; }
/* mensagens */
.acc-msgs-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .acc-msgs-head p { margin: 0; color: #4b5563; flex: 1; min-width: 220px; }
.acc-threads { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.acc-thread-row { width: 100%; display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 12px; background: #fff; border: 1px solid var(--sf-line); border-radius: 14px; cursor: pointer; min-height: 68px; }
.acc-thread-row:hover { border-color: var(--sf-accent); } .acc-thread-row.is-unread { background: #f3f8ff; border-color: #9cc4ff; }
.acc-thread-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--sf-soft); display: grid; place-items: center; font-size: 1.2rem; color: var(--sf-accent); }
.acc-thread-body b { display: block; } .acc-thread-body small { color: var(--sf-muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.acc-thread-meta { display: grid; justify-items: end; gap: 4px; } .acc-thread-meta small { color: var(--sf-muted); }
.acc-status { font-size: .72rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--sf-soft); color: #4b5563; }
.acc-status.is-open { background: #fff3d6; color: #8a5a00; } .acc-status.is-answered { background: #e3f6ec; color: #0d6b45; }
.acc-newmsg { background: #fff; border: 1px solid var(--sf-line); border-radius: 16px; padding: 18px; display: grid; gap: 8px; max-width: 680px; }
.acc-newmsg h2 { font-size: 1.15rem; font-weight: 800; margin: 0 0 4px; } .acc-newmsg label { font-weight: 700; font-size: .88rem; } .acc-newmsg label small { font-weight: 500; color: var(--sf-muted); }
.acc-newmsg-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .acc-count { text-align: right; font-size: .75rem; color: var(--sf-muted); margin-top: -4px; }
.acc-err { color: #a11a25; background: #fdecee; border-radius: 8px; padding: 8px 12px; font-size: .88rem; margin: 6px 0 0; }
.acc-thread { background: #fff; border: 1px solid var(--sf-line); border-radius: 16px; padding: 14px; display: grid; gap: 10px; }
.acc-thread header { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; } .acc-thread header h2 { font-size: 1.05rem; font-weight: 800; margin: 0; } .acc-thread header small { color: var(--sf-muted); }
.acc-bubbles { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; min-height: 160px; overflow-y: auto; padding: 6px; background: var(--sf-soft); border-radius: 12px; }
.acc-bubble { max-width: 82%; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 47, .08); }
.acc-bubble b { font-size: .75rem; color: var(--sf-muted); } .acc-bubble p { margin: 2px 0 4px; white-space: pre-wrap; word-break: break-word; } .acc-bubble time { font-size: .7rem; color: var(--sf-muted); display: block; text-align: right; }
.acc-bubble.is-me { align-self: flex-end; background: var(--sf-accent); color: #fff; border-bottom-right-radius: 4px; } .acc-bubble.is-me b, .acc-bubble.is-me time { color: rgba(255, 255, 255, .75); }
.acc-bubble.is-them { align-self: flex-start; border-bottom-left-radius: 4px; }
.acc-reply { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; } .acc-reply textarea { border: 1px solid var(--sf-line); border-radius: 12px; padding: 10px 12px; resize: vertical; min-height: 56px; }
.acc-closed { font-size: .85rem; color: var(--sf-muted); margin: 0; text-align: center; }
@media (max-width: 991px) {
  .acc-nav { position: static; display: flex !important; gap: 6px; overflow-x: auto; padding: 8px !important; }
  .acc-nav-user { display: none; } .acc-nav a, .acc-nav .account-nav-logout { flex: none; white-space: nowrap; padding: 0 14px; border-radius: 999px; min-height: 44px; }
  .acc-nav form { flex: none; }
  .acc-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .acc-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } .acc-step-label { font-size: .68rem !important; } .acc-step-hint { display: none; }
  .acc-dl { grid-template-columns: 1fr; } .acc-search input { min-width: 0; width: 100%; } .acc-search { width: 100%; }
  .acc-thread-row { grid-template-columns: 40px 1fr; } .acc-thread-meta { grid-column: 1 / -1; grid-auto-flow: column; justify-content: space-between; justify-items: start; }
  .acc-thread-body small { max-width: 30ch; } .acc-bubble { max-width: 92%; } .acc-reply { grid-template-columns: 1fr; }
  .acc-order footer { flex-direction: column; align-items: stretch; } .acc-order-actions .acc-btn { flex: 1; }
}

/* ---------- Cartão de Crédito Manual (checkout): parcelamento + dados do cartão + cartão visual 3D ---------- */
.sf-cm { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
.sf-cm[hidden] { display: none; }
.sf-cm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.sf-cm-h1 { font-weight: 700; font-size: .95rem; color: #0f172a; }
.sf-cm-h2 { font-size: .9rem; color: #475569; margin-top: 6px; }
.sf-cm-edit { border: 0; background: none; padding: 4px 0; min-height: 32px; font-weight: 700; font-size: .82rem; color: var(--sf-edit, #ea6a0a); cursor: pointer; }
.sf-cm-edit[hidden] { display: none; }
.sf-cm-edit:hover { text-decoration: underline; }
.sf-cm-panel { border: 1px solid var(--sf-line); border-radius: 12px; padding: 16px 16px 14px; margin-bottom: 14px; background: #fff; }
.sf-cm-title { font-weight: 700; font-size: .9rem; margin-bottom: 12px; color: #0f172a; }
.sf-cm .form-label { font-weight: 600; font-size: .85rem; margin-bottom: 6px; color: #1e293b; }
.sf-cm .form-control, .sf-cm .form-select { min-height: 46px; border-radius: 8px; }
.sf-cm .form-text { font-size: .76rem; }
.sf-req { color: var(--sf-edit, #ea6a0a); font-weight: 700; }
.sf-cm .form-control.is-touched:invalid, .sf-cm .form-select.is-touched:invalid { border-color: var(--sf-danger); box-shadow: 0 0 0 3px rgba(227, 52, 63, .12); }
.sf-cm-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.sf-cm-trio { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.6fr); gap: 10px; align-items: end; }
.sf-cm-trio .form-label { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-cm-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.sf-cm-note { font-size: .78rem; color: var(--sf-muted); margin: 14px 0 0; line-height: 1.45; }
.sf-cm-note i { color: var(--sf-ok); margin-right: 4px; }
.sf-cm-info { display: flex; gap: 8px; align-items: flex-start; background: #f8fafc; border: 1px solid var(--sf-line); border-radius: 10px; padding: 10px 12px; font-size: .82rem; color: #475569; }
.sf-cm-info i { color: #64748b; margin-top: 2px; }
.sf-cm-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sf-cm-flags img { height: 24px; width: auto; border-radius: 3px; opacity: .8; box-shadow: 0 0 0 1px var(--sf-line); transition: opacity .2s, box-shadow .2s, transform .2s; }
.sf-cm-flags.has-brand img:not(.is-on) { opacity: .25; }
.sf-cm-flags img.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--sf-accent); transform: translateY(-1px); }
.sf-cm-on:not(.sf-cm-editing) .shipping-option { display: none; }
.sf-cm-editing .sf-cm { display: none; }

.sf-cc { container-type: inline-size; perspective: 1100px; width: 100%; max-width: 340px; aspect-ratio: 1.586 / 1; }
.sf-cc-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.4, .1, .2, 1); }
.sf-cc.is-flipped .sf-cc-in { transform: rotateY(180deg); }
.sf-cc-face { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; color: #fff; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(135deg, #2a2a2f 0%, #0d0d10 52%, #2d2d33 100%); box-shadow: 0 14px 30px rgba(15, 23, 42, .32), 0 2px 6px rgba(15, 23, 42, .22); }
.sf-cc-face::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .16), transparent 55%), radial-gradient(90% 70% at 100% 100%, rgba(255, 255, 255, .06), transparent 60%); }
.sf-cc-front { display: flex; flex-direction: column; justify-content: space-between; padding: 6.5cqw 7cqw; font-size: 15px; font-size: 4.3cqw; }
.sf-cc-top { display: flex; align-items: center; gap: 4cqw; }
.sf-cc-chip { width: 15cqw; height: 11.4cqw; border-radius: 2cqw; position: relative; background: linear-gradient(135deg, #f3d27a, #c99a2e 55%, #f0cf7a); box-shadow: inset 0 0 0 .3cqw rgba(0, 0, 0, .25); }
.sf-cc-chip::before, .sf-cc-chip::after { content: ''; position: absolute; left: 0; right: 0; height: .3cqw; background: rgba(0, 0, 0, .28); top: 33%; }
.sf-cc-chip::after { top: 66%; }
.sf-cc-nfc { width: 6cqw; height: 6cqw; color: rgba(255, 255, 255, .75); }
.sf-cc-brand { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .8); }
.sf-cc-brand svg { width: 9cqw; height: auto; }
.sf-cc-brand.has-brand { background: #fff; border-radius: 1.6cqw; padding: .6cqw; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.sf-cc-brand img { display: block; width: 14cqw; height: auto; border-radius: 1cqw; }
.sf-cc-num { font-family: Consolas, 'SF Mono', Menlo, monospace; font-size: 5.6cqw; letter-spacing: .5cqw; white-space: nowrap; text-shadow: 0 1px 1px rgba(0, 0, 0, .5); }
.sf-cc-num .on { color: #fff; }
.sf-cc-num .off { color: rgba(255, 255, 255, .28); }
.sf-cc-bot { display: flex; justify-content: space-between; align-items: flex-end; gap: 3cqw; }
.sf-cc-bot small { display: block; font-size: 2.3cqw; letter-spacing: .25cqw; color: rgba(255, 255, 255, .5); margin-bottom: .6cqw; font-weight: 600; }
.sf-cc-bot b { display: block; font-family: Consolas, 'SF Mono', Menlo, monospace; font-size: 3.9cqw; font-weight: 600; letter-spacing: .3cqw; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56cqw; }
.sf-cc-exp { text-align: right; flex: none; }
.sf-cc-exp b { max-width: none; }
.sf-cc-back { transform: rotateY(180deg); }
.sf-cc-mag { position: absolute; left: 0; right: 0; top: 11%; height: 17%; background: #000; }
.sf-cc-sign { position: absolute; left: 7%; right: 7%; top: 40%; height: 17%; display: flex; align-items: center; justify-content: space-between; padding: 0 3%; border-radius: 1.2cqw;
  background: repeating-linear-gradient(135deg, #f8f8f5, #f8f8f5 1.2cqw, #e7e5df 1.2cqw, #e7e5df 2.4cqw); color: #6b7280; font-size: 2.6cqw; font-style: italic; }
.sf-cc-sign b { background: #fff; color: #111; font-family: Consolas, 'SF Mono', Menlo, monospace; font-style: normal; font-size: 4cqw; padding: .6cqw 2.6cqw; border-radius: 1cqw; min-width: 11cqw; text-align: center; letter-spacing: .4cqw; }
.sf-cc-legal { position: absolute; left: 7%; right: 7%; bottom: 8%; color: rgba(255, 255, 255, .4); font-size: 2.4cqw; letter-spacing: .2cqw; }
.sf-co-alert { margin: 0 0 10px; font-size: .9rem; }
.sf-co-alert[hidden] { display: none; }
@media (max-width: 640px) {
  .sf-cm-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sf-cc { margin: 0 auto; }
  .sf-cm-duo { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .sf-cc-in { transition-duration: .01ms; } }

/* Descrições com formatação (editor visual do painel): fotos e tabelas nunca passam da largura da tela. */
.sf-rich img { max-width: 100%; height: auto; border-radius: 6px; }
.sf-rich table { max-width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.sf-rich td, .sf-rich th { border: 1px solid var(--sf-line); padding: .35rem .6rem; }
.sf-rich ul, .sf-rich ol { padding-left: 1.4rem; }
.sf-rich h2, .sf-rich h3, .sf-rich h4, .sf-rich h5 { font-size: 1.05rem; font-weight: 700; margin: 1rem 0 .4rem; }
.sf-rich p { margin: 0 0 .7rem; }
.sf-rich a { color: inherit; text-decoration: underline; }