/* ==========================================================
   Tema DLE Taping: complemento do site público.
   Visual do site original: fundo claro, logo centralizada,
   menu em caixa-alta espaçado, títulos roxos e botões rosa,
   faixa com as cores das bandagens.
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

:root {
    --dle-purple: #913d9c;
    --dle-pink: #e5317f;
    --dle-blue: #00ace4;
    --dle-green: #a2cd00;
    --dle-ribbon: linear-gradient(90deg, #913d9c 0%, #e5317f 35%, #00ace4 68%, #a2cd00 100%);
}

body.site-body { font-family: 'Roboto', system-ui, sans-serif; background: #ffffff; color: #2c2d33; }

/* Cabeçalho: logo no centro, ações à direita, menu embaixo */
.s-header { position: sticky; background: #ffffff; border-bottom: 1px solid #ece2ef; box-shadow: 0 2px 10px rgba(44, 45, 51, .04); }
.s-header::after { content: ""; display: block; height: 4px; background: var(--dle-ribbon); }
.s-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: ". brand actions" "nav nav nav"; height: auto; padding-top: 14px; row-gap: 10px; align-items: center; }
.s-brand { grid-area: brand; justify-self: center; }
.s-brand img { height: 92px; max-height: none; width: auto; }
.s-actions { grid-area: actions; justify-self: end; margin-left: 0; }
.s-nav { grid-area: nav; justify-content: center; gap: 30px; padding: 6px 0 12px; border-top: 1px solid #f1ecf3; flex: none; }
.s-nav a { text-transform: uppercase; letter-spacing: 2px; font-size: 13px; font-weight: 500; color: #6b6474; }
.s-nav a:hover, .s-nav a.active { color: var(--dle-purple); }
.s-cart { color: #2c2d33; }
.s-cart-count { background: var(--dle-pink); color: #fff; }

/* Botões */
.s-btn { border-radius: 6px; font-weight: 600; letter-spacing: .3px; }
.s-btn-primary { background: var(--dle-pink); color: #fff !important; box-shadow: 0 6px 18px rgba(229, 49, 127, .25); }
.s-btn-primary:hover { background: #cc2670; }
.s-btn-outline { color: var(--dle-purple) !important; border-color: var(--dle-purple); }
.s-btn-outline:hover { background: var(--dle-purple); color: #fff !important; }

/* Títulos de seção como no site original */
.s-section-title { color: var(--dle-purple); font-weight: 500; letter-spacing: 2px; }
.s-section-sub { color: #8a8590; letter-spacing: .5px; }
.s-eyebrow { color: var(--dle-pink); }
.s-link { color: var(--dle-purple) !important; }
.s-section:nth-of-type(even) { background: #faf8fb; }

/* Cards claros */
.s-card { background: #ffffff; border: 1px solid #efe8f1; box-shadow: 0 4px 16px rgba(44, 45, 51, .05); }
.s-card:hover { border-color: rgba(145, 61, 156, .45); }
.s-card-title { color: #2c2d33; }
.s-card-img { background: #f6f2f7; }
.s-price { color: var(--dle-purple); }
.s-badge { background: rgba(229, 49, 127, .1); color: var(--dle-pink); border-color: rgba(229, 49, 127, .3); }

/* Hero padrão (quando não é banner) */
.s-hero::before { background: radial-gradient(900px 420px at 80% 0%, rgba(145, 61, 156, .12), transparent 65%); }
.s-hero h1 em { color: var(--dle-pink); }

/* Apresentação */
.s-about { background: #ffffff !important; }
.s-about-text { color: #4b4752; font-size: 15px; }

/* Formulários e painéis */
.s-panel { background: #ffffff; border-color: #efe8f1; }
.s-field input, .s-field select, .s-field textarea, .s-input { background: #ffffff; border-color: #e3d9e6; color: #2c2d33; }

/* Rodapé */
.s-footer { background: #2c2d33; color: #d7d3da; border-top: 4px solid transparent; border-image: var(--dle-ribbon) 1; }
.s-footer-brand, .s-footer-title { color: #ffffff; }
.s-footer-grid a, .s-footer-grid span, .s-footer-bottom { color: #bdb7c2; }
.s-footer-grid a:hover { color: #ffffff; }
.s-social a { border-color: rgba(255, 255, 255, .2); }
.s-footer-bottom { border-top-color: rgba(255, 255, 255, .12); }

@media (max-width: 760px) {
    .s-header-inner { grid-template-columns: auto 1fr auto; grid-template-areas: "brand . actions"; padding: 10px 16px; }
    .s-brand { justify-self: start; }
    .s-brand img { height: 60px; }
    .s-nav { top: 100%; background: #ffffff; border-top: 1px solid #ece2ef; }
    .s-nav a { border-bottom-color: #f1ecf3; }
}