/* ══════════════════════════════════════════════════════════════════════
   Gestor Store — Shell compartilhado (v3.9.0)
   Moldura "painel único" (cabeçalho + menu lateral + conteúdo), baseada no
   kit WP Sidebar Layout v1.8. Usada por:
     • telas de administração da Loja (AdminLayout, v3.8.0)
     • Loja do cliente: Loja / Meus Produtos / Meus Pedidos (ClientLayout, v3.9.0)
   Antes vivia dentro de admin.css; foi movida sem alteração de regras para
   poder ser carregada também fora das telas de administração da Loja.
   ══════════════════════════════════════════════════════════════════════ */

.gs-shell {
    --gs-shell-primary:      var(--gs-admin-primary, #c0392b);
    --gs-shell-primary-dark: var(--gs-admin-primary-dark, #96281b);
    --gs-shell-primary-tint: var(--gs-admin-primary-light, #fdf2f0);
    --gs-shell-text:         var(--gs-admin-text, #1d2327);
    --gs-shell-muted:        #6b7280;
    --gs-shell-subtle:       #9ca3af;
    --gs-shell-border:       #e5e7eb;
    --gs-shell-surface:      #ffffff;
    --gs-shell-surface-alt:  #f9fafb;
    --gs-shell-radius:       10px;
    --gs-shell-radius-sm:    6px;
    --gs-shell-shadow:       0 1px 3px rgba(0,0,0,.06);
    /* v3.8.1: ocupa toda a largura disponível (antes limitado a 1400px e
       podendo herdar largura/float/margem de temas/plugins do painel). */
    box-sizing: border-box;
    width: auto; max-width: none; float: none;
    margin: 0 20px 0 0;
    color: var(--gs-shell-text);
}
.gs-shell *, .gs-shell *::before, .gs-shell *::after { box-sizing: border-box; }
.gs-shell .gs-shell-content input[type="text"],
.gs-shell .gs-shell-content select { max-width: 100%; }

.gs-shell-panel {
    /* v3.8.1: altura mínima = tela inteira menos barra do WP (32px), rodapé
       (~65px) e margens; o painel deixa de "terminar no meio" em páginas curtas. */
    display: flex; flex-direction: column;
    min-height: calc(100vh - 32px - 65px - 36px);
    margin: 18px 0;
    background: var(--gs-shell-surface);
    border: 1px solid var(--gs-shell-border);
    border-radius: var(--gs-shell-radius);
    box-shadow: var(--gs-shell-shadow);
    overflow: hidden;
}

/* Cabeçalho */
.gs-shell-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--gs-shell-border);
}
.gs-shell-header-title { display: flex; align-items: center; gap: 14px; }
.gs-shell-header-icon-wrap {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: var(--gs-shell-radius-sm);
    background: var(--gs-shell-primary-tint);
}
.gs-shell-header-icon { font-size: 18px; width: 18px; height: 18px; color: var(--gs-shell-primary); }
.gs-shell-title { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--gs-shell-text); }
.gs-shell-subtitle { margin: 2px 0 0; font-size: 13px; color: var(--gs-shell-muted); }
.gs-shell-version { font-size: 12px; font-weight: 500; color: var(--gs-shell-subtle); white-space: nowrap; }

/* Corpo: menu + conteúdo */
.gs-shell-layout { display: flex; align-items: stretch; flex: 1 1 auto; }

.gs-shell-sidebar {
    flex: 0 0 220px;
    background: var(--gs-shell-surface-alt);
    border-right: 1px solid var(--gs-shell-border);
    padding: 0;
    align-self: stretch; /* v3.8.1: a coluna do menu acompanha a altura total do painel */
}
.gs-shell-sidebar-inner {
    padding: 14px 10px;
    position: sticky; top: 40px; /* menu acompanha a rolagem em páginas longas */
}
.gs-shell-group + .gs-shell-group { margin-top: 18px; }
.gs-shell-group-title {
    padding: 0 8px 8px;
    font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--gs-shell-subtle);
}
.gs-shell-link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; margin-top: 1px;
    border: 1px solid transparent; border-left: 3px solid transparent;
    border-radius: var(--gs-shell-radius-sm);
    font-size: 13px; font-weight: 500; text-decoration: none;
    color: var(--gs-shell-muted);
    transition: color 140ms ease, background-color 140ms ease;
    outline-offset: -2px;
}
.gs-shell-link .dashicons {
    width: 16px; height: 16px; font-size: 16px; flex-shrink: 0;
    color: var(--gs-shell-subtle); transition: color 140ms ease;
}
.gs-shell-link-label { flex: 1; line-height: 1.3; }
.gs-shell-link:hover { color: var(--gs-shell-text); }
.gs-shell-link:hover .dashicons { color: var(--gs-shell-primary); }
.gs-shell-link:focus-visible { outline: 2px solid var(--gs-shell-primary); }
.gs-shell-link.is-active {
    background: var(--gs-shell-surface);
    border-color: var(--gs-shell-border);
    border-left-color: var(--gs-shell-primary);
    box-shadow: var(--gs-shell-shadow);
    color: var(--gs-shell-primary-dark); font-weight: 600;
}
.gs-shell-link.is-active .dashicons { color: var(--gs-shell-primary); }

.gs-shell-footer {
    margin-top: 18px; padding: 12px 8px 2px;
    border-top: 1px solid var(--gs-shell-border);
    font-size: 11px; color: var(--gs-shell-subtle);
}

/* Área de conteúdo */
.gs-shell-content { flex: 1 1 auto; min-width: 0; width: 100%; padding: 26px 28px; background: var(--gs-shell-surface); }

/* As views já trazem seu próprio <div class="wrap gs-admin"> + <h1>. Dentro
   da moldura o .wrap deixa de ser "página" e vira apenas conteúdo: sem
   margem/largura próprias; o <h1> vira o título da seção. */
.gs-shell-content > .wrap.gs-admin,
.gs-shell-content .wrap.gs-admin {
    margin: 0; padding: 0; max-width: none;
}
.gs-shell-content .wrap.gs-admin > h1 {
    margin: 0 0 16px; padding: 0;
    font-size: 20px; font-weight: 600; line-height: 1.3;
}

/* Botão primário sempre sólido dentro da moldura (mesma garantia da v1.8.1 do kit) */
.gs-shell .gs-shell-content .button-primary,
.gs-shell .gs-shell-content input[type="submit"].button-primary {
    background: var(--gs-shell-primary) !important;
    border-color: var(--gs-shell-primary-dark) !important;
    color: #fff !important; text-shadow: none; box-shadow: none;
}
.gs-shell .gs-shell-content .button-primary:hover,
.gs-shell .gs-shell-content .button-primary:focus {
    background: var(--gs-shell-primary-dark) !important;
}

/* Responsivo */
@media (max-width: 900px) {
    .gs-shell-layout { flex-direction: column; }
    .gs-shell-sidebar {
        width: 100%; flex-basis: auto;
        border-right: none; border-bottom: 1px solid var(--gs-shell-border);
    }
    .gs-shell-sidebar-inner { position: static; }
    .gs-shell-panel { min-height: 0; }
}
@media (max-width: 600px) {
    .gs-shell-header { flex-wrap: wrap; gap: 10px; padding: 16px; }
    .gs-shell-content { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .gs-shell-link, .gs-shell-link .dashicons { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════
   v3.9.0 — Variantes para a Loja do cliente (ClientLayout)
   ══════════════════════════════════════════════════════════════════════ */

/* Fora do wp-admin da Loja (shortcode no front-end, aba embutida no painel do
   plugin principal): sem a margem lateral do .wrap e sem altura mínima
   baseada na barra do WP — o tema/painel hospedeiro é quem manda na altura. */
.gs-shell--embedded { margin: 0; }
.gs-shell--embedded .gs-shell-panel { min-height: 0; margin: 0; }
.gs-shell--embedded .gs-shell-sidebar-inner { top: 20px; }

/* Temas costumam estilizar <a> (sublinhado, cor, sombra) — o menu usa links. */
.gs-shell a.gs-shell-link,
.gs-shell a.gs-shell-link:hover,
.gs-shell a.gs-shell-link:focus { text-decoration: none; }
.gs-shell a.gs-shell-link { cursor: pointer; }

/* Na Loja do cliente o conteúdo já é branco: a caixa de filtros deixa de ter
   sombra própria e ganha o cinza suave do menu, para não virar "cartão sobre cartão". */
.gs-shell-content .gs-filters-box {
    background: var(--gs-shell-surface-alt);
    border-color: var(--gs-shell-border);
    box-shadow: none;
}

/* Menu de poucos itens: no mobile vira uma linha de botões em vez de uma
   coluna alta empilhada acima do conteúdo. */
@media (max-width: 900px) {
    .gs-shell--client .gs-shell-sidebar-inner {
        display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 10px;
    }
    .gs-shell--client .gs-shell-group { display: contents; }
    .gs-shell--client .gs-shell-group + .gs-shell-group { margin-top: 0; }
    .gs-shell--client .gs-shell-group-title { display: none; }
    .gs-shell--client .gs-shell-link { margin-top: 0; }
}