/* =========================================================
   THIALLY CERÂMICAS
   STYLE.CSS

   Arquivo: public/css/style.css
   Versão: 22
   Atualizado em: 2026-09-17

   Histórico:
   22 - Passo 5H — apresentação promocional na loja:
        - adiciona seção visual dedicada a produtos em promoção na home;
        - reforça hierarquia de preço original/preço promocional;
        - adiciona tratamento visual do filtro promocional no catálogo.
   21 - Passo 5G — cupons temporários:
        - adiciona campo de cupom e desconto no checkout;
        - adiciona gestão administrativa de cupons.
   20 - Passo 5F — adiciona apresentação administrativa do desconto
        direto e histórico promocional nos detalhes do pedido.
   19 - Passo 5E — adiciona resumo de solicitações e visão de
        estoque no dashboard administrativo.
   18 - Passo 5D — adiciona Central Unificada de Atendimento
        para cliente e administração.
   17 - Passo 5C — adiciona interface de MFA TOTP obrigatório no admin.
   16 - Passo 5B.4B — adiciona Central de Privacidade do cliente e gestão administrativa.
   15 - Passo 5B.4A — adiciona páginas de privacidade e cookies.
   14 - Passo 5B.3 — adiciona campo editável de quantidade no carrinho.
   13 - adiciona acompanhamento do pedido/devolução para o cliente.
   12 - adiciona UX de recebimento/inspeção/reembolso da devolução.
   11 - adiciona UX de devolução/logística reversa no admin.
   10 - adiciona UX de cancelamento administrativo de pedido pendente.
   9 - melhora o carrinho com validação visual de disponibilidade e estoque.
   8 - adiciona painel administrativo de gestão, pedidos, pagamentos e logística.
   7 - reorganiza Minha conta e Meus pedidos em áreas
       independentes; adiciona navegação interna, lista lateral
       de pedidos, painel de detalhes, imagens controladas
       e layout responsivo da nova área de pedidos.
   6 - versão anterior do estilo geral da loja.
   ========================================================= */


/* =========================================================
   1. VARIÁVEIS
   ========================================================= */

:root {

    --background: #f7f5f0;
    --surface: #efede7;
    --surface-soft: #f2f0ea;
    --surface-dark: #1e1e1c;

    --text: #1f1f1d;
    --text-soft: #6f6c65;
    --text-light: #d8d5ce;

    --accent: #836f62;
    --accent-dark: #645349;

    --border: #d9d6cf;
    --white: #ffffff;

    --max-width: 1180px;
    --section-space: 110px;

}


/* =========================================================
   2. RESET
   ========================================================= */

*,
*::before,
*::after {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    background: var(--background);
    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 16px;
    line-height: 1.65;

    -webkit-font-smoothing: antialiased;

}


[hidden] {

    display: none !important;

}


img {

    display: block;

    max-width: 100%;

}


a {

    color: inherit;

    text-decoration: none;

}


button,
input,
textarea,
select {

    font: inherit;

}


button {

    color: inherit;

}


/* =========================================================
   3. ESTRUTURA
   ========================================================= */

.container {

    width:
        min(
            92%,
            var(--max-width)
        );

    margin-left: auto;
    margin-right: auto;

}


.section {

    padding:
        var(--section-space)
        0;

}


/* =========================================================
   4. TIPOGRAFIA
   ========================================================= */

h1,
h2,
h3,
h4 {

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 400;
    line-height: 1.08;

}


h1 {

    font-size:
        clamp(
            3.3rem,
            7vw,
            6.5rem
        );

    letter-spacing: -0.045em;

}


h2 {

    font-size:
        clamp(
            2.4rem,
            4.5vw,
            4.1rem
        );

    letter-spacing: -0.035em;

}


h3 {

    font-size: 1.4rem;

    letter-spacing: -0.015em;

}


h4 {

    font-size: 1.15rem;

}


p {

    margin: 0;

    color: var(--text-soft);

}


.eyebrow {

    display: block;

    margin-bottom: 15px;

    color: var(--accent-dark);

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 0.19em;

    text-transform: uppercase;

}


/* =========================================================
   5. HEADER
   ========================================================= */

.site-header {

    position: relative;

    z-index: 10;

    padding:
        15px
        0;

    border-bottom:
        1px solid
        var(--border);

    background:
        var(--background);

}


.header-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

}


/* MARCA */

.brand {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

}


.brand img {

    width: auto;

    height: 44px;

    max-width: 80px;

    object-fit: contain;

}


.brand span {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.08rem;

    white-space: nowrap;

}


/* NAVEGAÇÃO */

.main-nav {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 32px;

}


.main-nav a {

    position: relative;

    font-size: 0.83rem;

    letter-spacing: 0.03em;

}


.main-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -5px;

    width: 0;
    height: 1px;

    background:
        var(--text);

    transition:
        width
        0.2s
        ease;

}


.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after {

    width: 100%;

}


/* CONTA + CARRINHO */

.site-actions {

    display: flex;

    align-items: center;

    gap: 20px;

    flex-shrink: 0;

    font-size: 0.82rem;

}


.account-link {

    white-space: nowrap;

}


.cart-link {

    display: flex;

    align-items: center;

    gap: 7px;

    white-space: nowrap;

}


.cart-count {

    min-width: 23px;
    height: 23px;

    padding:
        0
        6px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 20px;

    background:
        var(--text);

    color:
        var(--background);

    font-size: 0.68rem;

    line-height: 1;

}


/* =========================================================
   6. BOTÕES
   ========================================================= */

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 46px;

    padding:
        12px
        25px;

    border:
        1px solid
        transparent;

    background:
        transparent;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.09em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;

}


.button:hover {

    transform:
        translateY(-1px);

}


.button.primary {

    background:
        var(--text);

    color:
        var(--background);

}


.button.primary:hover {

    background:
        var(--accent-dark);

}


.button.secondary {

    border-color:
        var(--text);

    color:
        var(--text);

}


.button.secondary:hover {

    background:
        var(--text);

    color:
        var(--background);

}


.button:disabled {

    opacity: 0.5;

    cursor: default;

    transform: none;

}


.text-link {

    display: inline-block;

    margin-top: 14px;

    font-size: 0.82rem;

    text-decoration: underline;

    text-underline-offset: 4px;

}


/* =========================================================
   7. HERO
   ========================================================= */

.hero {

    padding:
        65px
        0
        105px;

}


.hero-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 70px;

    align-items: center;

}


.hero-content h1 {

    margin-bottom: 27px;

}


.hero-content p {

    max-width: 500px;

    margin-bottom: 36px;

    font-size: 1.05rem;

}


.hero-image {

    width: 100%;

    height:
        min(
            66vw,
            650px
        );

    min-height: 520px;

    overflow: hidden;

    background:
        var(--surface);

}


.hero-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


/* =========================================================
   8. CABEÇALHO DAS SEÇÕES
   ========================================================= */

.section-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 55px;

}


.section-heading > div {

    max-width: 700px;

}


.section-heading p {

    max-width: 370px;

}


/* =========================================================
   9. CARDS DE PRODUTO
   ========================================================= */

.products-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 28px;

}


.product-card {

    min-width: 0;

}


.product-image {

    position: relative;

    width: 100%;

    aspect-ratio:
        4 / 5;

    margin-bottom: 18px;

    overflow: hidden;

    background:
        var(--surface);

}


.product-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform
        0.5s
        ease;

}


.product-card:hover
.product-image img {

    transform:
        scale(1.025);

}


.product-info {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 18px;

}


.product-info h3 {

    margin-bottom: 5px;

}


.product-info strong {

    flex-shrink: 0;

    font-size: 0.88rem;

}


.product-type {

    display: block;

    color:
        var(--text-soft);

    font-size: 0.76rem;

}


.product-add-button {

    width: 100%;

    margin-top: 18px;

}


.featured-status {

    margin-bottom: 20px;

    font-size: 0.85rem;

}


/* =========================================================
   10. SOBRE
   ========================================================= */

.about {

    background:
        var(--surface);

}


.about .container {

    display: flex;

    justify-content: flex-start;

}


.about-content {

    max-width: 800px;

}


.about-content h2 {

    max-width: 730px;

    margin-bottom: 32px;

}


.about-content p {

    max-width: 650px;

    margin-bottom: 17px;

    font-size: 1.05rem;

}


/* =========================================================
   11. PROCESSO
   ========================================================= */

.process h2 {

    max-width: 730px;

    margin-bottom: 65px;

}


.process-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    border-top:
        1px solid
        var(--border);

}


.process-item {

    padding:
        33px
        28px
        20px
        0;

    border-right:
        1px solid
        var(--border);

}


.process-item:not(:first-child) {

    padding-left: 28px;

}


.process-item:last-child {

    border-right: none;

}


.process-number {

    color:
        var(--accent-dark);

    font-size: 0.7rem;

    font-weight: 700;

}


.process-item h3 {

    margin:
        28px
        0
        13px;

}


.process-item p {

    max-width: 220px;

    font-size: 0.92rem;

}


/* =========================================================
   12. PEÇAS ÚNICAS
   ========================================================= */

.unique {

    padding:
        130px
        0;

    background:
        var(--surface-dark);

    color:
        var(--background);

}


.unique-content {

    max-width: 850px;

    text-align: center;

}


.unique .eyebrow {

    color: #bdb2aa;

}


.unique h2 {

    max-width: 790px;

    margin:
        0
        auto
        28px;

}


.unique p {

    max-width: 660px;

    margin:
        0
        auto
        10px;

    color:
        var(--text-light);

    font-size: 1.03rem;

}


/* =========================================================
   13. CHAMADA PARA A LOJA
   ========================================================= */

.shop-callout {

    border-bottom:
        1px solid
        var(--border);

}


.shop-callout-content {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 70px;

}


.shop-callout h2 {

    max-width: 650px;

    margin-bottom: 20px;

}


.shop-callout p {

    max-width: 520px;

}


/* =========================================================
   14. CONTATO
   ========================================================= */

.contact-content {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 70px;

}


.contact-content > div:first-child {

    max-width: 720px;

}


.contact h2 {

    margin-bottom: 24px;

}


.contact p {

    max-width: 520px;

}


.contact-buttons {

    display: flex;

    gap: 12px;

    flex-shrink: 0;

}


/* =========================================================
   15. CATÁLOGO
   ========================================================= */

.catalog-header {

    padding:
        75px
        0
        42px;

}


.catalog-header h1 {

    margin-bottom: 18px;

}


.catalog-header p {

    max-width: 720px;

    font-size: 1rem;

}


.catalog-controls {

    padding-bottom: 38px;

}


.catalog-toolbar {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    padding-bottom: 20px;

    border-bottom:
        1px solid
        var(--border);

}


.filters {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}


.filter-button {

    padding:
        8px
        14px;

    border:
        1px solid
        var(--border);

    background:
        transparent;

    cursor: pointer;

    font-size: 0.7rem;

    letter-spacing: 0.06em;

    text-transform: uppercase;

}


.filter-button:hover,
.filter-button.active {

    background:
        var(--text);

    border-color:
        var(--text);

    color:
        var(--background);

}


.catalog-sort {

    display: flex;

    flex-direction: column;

    gap: 5px;

    min-width: 180px;

    color:
        var(--text-soft);

    font-size: 0.68rem;

    letter-spacing: 0.05em;

    text-transform: uppercase;

}


.catalog-sort select {

    padding:
        8px
        30px
        8px
        10px;

    border:
        1px solid
        var(--border);

    background:
        var(--background);

    color:
        var(--text);

}


.catalog-section {

    padding:
        10px
        0
        115px;

}


.catalog-meta {

    min-height: 28px;

    display: flex;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 24px;

}


.catalog-status,
.catalog-count {

    color:
        var(--text-soft);

    font-size: 0.8rem;

}


.catalog-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        60px
        28px;

}


.catalog-card {

    width: 100%;

    min-width: 0;

}


.catalog-image {

    position: relative;

    width: 100%;

    aspect-ratio:
        4 / 5;

    overflow: hidden;

    background:
        var(--surface);

}


.catalog-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


.catalog-info {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 18px;

    margin-top: 16px;

}


.catalog-info h2 {

    margin-top: 3px;

    font-size: 1.4rem;

}


.catalog-collection {

    display: block;

    color:
        var(--text-soft);

    font-size: 0.66rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.catalog-price {

    flex-shrink: 0;

    font-size: 0.88rem;

}


.catalog-description {

    margin-top: 11px;

    font-size: 0.85rem;

}


.catalog-stock {

    margin-top: 11px;

    color:
        var(--accent-dark);

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;

}


.catalog-add-button {

    width: 100%;

    margin-top: 17px;

}


.sold-out-label {

    position: absolute;

    top: 12px;
    left: 12px;

    padding:
        6px
        9px;

    background:
        var(--text);

    color:
        var(--white);

    font-size: 0.62rem;

    font-weight: 700;

    text-transform: uppercase;

}


/* =========================================================
   16. CONTA — LOGIN / CADASTRO
   ========================================================= */

.account-page {

    min-height: 70vh;

}


.account-title {

    margin-bottom: 45px;

}


.account-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 55px;

}


.account-panel {

    padding: 38px;

    background:
        var(--surface);

}


.account-panel h2 {

    margin-bottom: 28px;

}


.account-panel form {

    display: flex;

    flex-direction: column;

    gap: 19px;

}


.account-panel label {

    display: flex;

    flex-direction: column;

    gap: 6px;

    font-size: 0.8rem;

    font-weight: 600;

}


.account-panel input {

    width: 100%;

    padding:
        11px
        12px;

    border:
        1px solid
        var(--border);

    background:
        var(--white);

    color:
        var(--text);

}


.account-panel form .button {

    margin-top: 5px;

}


.account-message {

    margin-top: 14px;

    color:
        var(--accent-dark);

    font-size: 0.82rem;

    line-height: 1.5;

}


/* =========================================================
   17. CONTA — ÁREA AUTENTICADA
   ========================================================= */

.account-dashboard {

    min-height: 70vh;

}


.account-dashboard-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;

}


.account-intro {

    max-width: 650px;

    margin:
        20px
        0
        38px;

}


.account-nav {

    display: flex;

    align-items: center;

    gap: 32px;

    margin-bottom: 48px;

    border-bottom:
        1px solid
        var(--border);

}


.account-nav-button {

    position: relative;

    min-height: 50px;

    padding:
        0
        0
        14px;

    border: 0;

    background:
        transparent;

    color:
        var(--text-soft);

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    cursor: pointer;

}


.account-nav-button::after {

    content: "";

    position: absolute;

    right: 0;
    bottom: -1px;
    left: 0;

    height: 2px;

    background:
        transparent;

}


.account-nav-button:hover {

    color:
        var(--text);

}


.account-nav-button.is-active {

    color:
        var(--text);

}


.account-nav-button.is-active::after {

    background:
        var(--text);

}


.account-view {

    width: 100%;

}


/* =========================================================
   18. CONTA — MEUS DADOS
   ========================================================= */

.account-card {

    position: relative;

    margin-bottom: 30px;

    padding: 38px;

    background:
        var(--surface);

}


.account-card-heading {

    max-width:
        calc(
            100%
            -
            180px
        );

}


.account-card-heading .eyebrow {

    margin-bottom: 8px;

}


.account-card h2 {

    margin-bottom: 30px;

    font-size: 2rem;

}


.account-card-actions {

    position: absolute;

    top: 38px;
    right: 38px;

}


.account-edit-button {

    padding:
        0
        0
        4px;

    border: 0;

    border-bottom:
        1px solid
        currentColor;

    background:
        transparent;

    color:
        var(--text);

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    cursor: pointer;

}


.account-edit-button:hover {

    color:
        var(--accent-dark);

}


.account-data-list {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        25px
        40px;

    margin: 0;

}


.account-data-list > div {

    min-width: 0;

}


.account-data-list dt {

    margin-bottom: 5px;

    color:
        var(--text-soft);

    font-size: 0.67rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.account-data-list dd {

    margin: 0;

    overflow-wrap: anywhere;

    font-size: 0.92rem;

}


.account-form-grid,
.address-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        22px
        25px;

    margin-bottom: 25px;

}


.account-card label {

    display: flex;

    flex-direction: column;

    gap: 7px;

    color:
        var(--text);

    font-size: 0.8rem;

    font-weight: 600;

}


.account-card input,
.account-card textarea {

    width: 100%;

    padding:
        11px
        12px;

    border:
        1px solid
        var(--border);

    background:
        var(--white);

    color:
        var(--text);

}


.account-card textarea {

    resize: vertical;

}


.account-card input:disabled {

    background:
        var(--surface-soft);

    color:
        var(--text-soft);

}


.account-form-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 10px;

}


.address-street {

    grid-column:
        span 1;

}


.full-field {

    grid-column:
        1 / -1;

}


.address-view {

    color:
        var(--text);

    font-size: 0.9rem;

}


.address-view p {

    color:
        var(--text);

}


.delivery-copy-option {

    margin:
        0
        0
        25px;

}


.delivery-copy-option label {

    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 10px;

}


.delivery-copy-option input {

    width: auto;

}


.cep-status {

    min-height: 18px;

    color:
        var(--text-soft);

    font-size: 0.72rem;

    font-weight: 400;

}


.cep-help-link {

    width: max-content;

    color:
        var(--text-soft);

    font-size: 0.72rem;

    font-weight: 400;

    text-decoration: underline;

    text-underline-offset: 3px;

}


.account-bottom-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 45px;

}


/* =========================================================
   19. MEUS PEDIDOS — ESTRUTURA
   ========================================================= */

.account-orders-view {

    width: 100%;

}


.orders-layout {

    display: grid;

    grid-template-columns:
        minmax(250px, 330px)
        minmax(0, 1fr);

    min-height: 580px;

    border:
        1px solid
        var(--border);

    background:
        var(--surface-soft);

}


/* =========================================================
   20. MEUS PEDIDOS — COLUNA LATERAL
   ========================================================= */

.orders-sidebar {

    min-width: 0;

    padding:
        30px
        24px;

    border-right:
        1px solid
        var(--border);

    background:
        var(--surface);

}


.orders-sidebar-header {

    margin-bottom: 24px;

}


.orders-sidebar-header .eyebrow {

    margin-bottom: 7px;

}


.orders-sidebar-header h2 {

    font-size: 1.75rem;

}


.orders-sidebar-header p {

    margin-top: 10px;

    font-size: 0.8rem;

}


.orders-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 20px;

}


#orders-status {

    min-height: 20px;

    margin: 0;

    font-size: 0.76rem;

}


#orders-refresh-button {

    flex-shrink: 0;

}


.orders-list {

    display: flex;

    flex-direction: column;

    border-top:
        1px solid
        var(--border);

}


.orders-list-item {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 7px;

    padding:
        19px
        4px;

    border: 0;

    border-bottom:
        1px solid
        var(--border);

    background:
        transparent;

    color:
        var(--text);

    text-align: left;

    cursor: pointer;

    transition:
        padding 0.2s ease,
        background-color 0.2s ease;

}


.orders-list-item:hover {

    padding-left: 10px;

}


.orders-list-item.is-active {

    padding-left: 10px;

    background:
        var(--background);

}


.orders-list-item-top {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}


.orders-list-item-number {

    color:
        var(--accent-dark);

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.12em;

}


.orders-list-item-date {

    color:
        var(--text-soft);

    font-size: 0.7rem;

    white-space: nowrap;

}


.orders-list-item-status {

    display: block;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.03rem;

    font-weight: 400;

    line-height: 1.25;

}


.orders-list-item-total {

    color:
        var(--text);

    font-size: 0.8rem;

    font-weight: 700;

}


.orders-more-wrapper {

    padding-top: 22px;

}


#orders-more-button {

    width: 100%;

}


.orders-more-button {

    width: 100%;

    padding:
        11px
        12px;

    border:
        1px solid
        var(--text);

    background:
        transparent;

    color:
        var(--text);

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    cursor: pointer;

}


.orders-more-button:hover {

    background:
        var(--text);

    color:
        var(--background);

}


/* =========================================================
   21. MEUS PEDIDOS — PAINEL DE DETALHES
   ========================================================= */

.orders-detail {

    min-width: 0;

    padding:
        42px
        48px;

    background:
        var(--background);

}


.orders-detail-placeholder {

    min-height: 430px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    max-width: 520px;

}


.orders-detail-placeholder .eyebrow {

    margin-bottom: 14px;

}


.orders-detail-placeholder-title {

    max-width: 470px;

    margin-bottom: 16px;

    font-size:
        clamp(
            2rem,
            4vw,
            3.5rem
        );

}


.orders-detail-placeholder-text {

    max-width: 420px;

    font-size: 0.95rem;

}


.orders-detail-loading {

    padding:
        60px
        0;

}


/* =========================================================
   22. PEDIDO — CABEÇALHO DO DETALHE
   ========================================================= */

.order-detail-card {

    width: 100%;

}


.order-detail-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 45px;

    padding-bottom: 30px;

    border-bottom:
        1px solid
        var(--border);

}


.order-detail-heading {

    min-width: 0;

}


.order-detail-heading .eyebrow {

    margin-bottom: 10px;

}


.order-detail-title {

    margin-bottom: 12px;

    font-size:
        clamp(
            2rem,
            4vw,
            3.3rem
        );

}


.order-detail-date {

    font-size: 0.85rem;

}


.order-detail-total-block {

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 4px;

    padding-top: 25px;

}


.order-detail-total-label {

    color:
        var(--text-soft);

    font-size: 0.65rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.order-detail-total-value {

    font-size: 1.25rem;

}


/* =========================================================
   23. PEDIDO — SEÇÕES DO DETALHE
   ========================================================= */

.order-detail-section {

    padding:
        30px
        0;

    border-bottom:
        1px solid
        var(--border);

}


.order-detail-section-title {

    margin-bottom: 20px;

    color:
        var(--accent-dark);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}


.order-detail-list {

    margin: 0;

}


.order-detail-row {

    display: grid;

    grid-template-columns:
        minmax(120px, 0.7fr)
        minmax(0, 1.3fr);

    gap:
        20px
        35px;

    padding:
        9px
        0;

}


.order-detail-label {

    color:
        var(--text-soft);

    font-size: 0.75rem;

}


.order-detail-value {

    min-width: 0;

    margin: 0;

    color:
        var(--text);

    font-size: 0.82rem;

    white-space: pre-line;

    overflow-wrap: anywhere;

}


/* =========================================================
   24. PEDIDO — ITENS
   ========================================================= */

.order-detail-items {

    display: flex;

    flex-direction: column;

    gap: 0;

}


.order-detail-item {

    min-width: 0;

    display: grid;

    grid-template-columns:
        96px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 20px;

    padding:
        18px
        0;

    border-bottom:
        1px solid
        var(--border);

}


.order-detail-item:first-child {

    padding-top: 0;

}


.order-detail-item:last-child {

    padding-bottom: 0;

    border-bottom: 0;

}


.order-detail-item-image {

    width: 96px !important;
    height: 96px !important;

    max-width: 96px !important;

    aspect-ratio:
        1 / 1;

    object-fit: cover;

    background:
        var(--surface);

}


.order-detail-item-content {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.order-detail-item-name {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.05rem;

    font-weight: 400;

}


.order-detail-item-meta {

    color:
        var(--text-soft);

    font-size: 0.78rem;

}


.order-detail-item-total {

    flex-shrink: 0;

    font-size: 0.8rem;

}


/* =========================================================
   25. PEDIDO — RESERVA / AÇÕES
   ========================================================= */

.order-reservation-section {

    background:
        transparent;

}


.order-detail-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    padding-top: 30px;

}


.order-detail-actions .button {

    min-width: 190px;

}


.order-action-message {

    margin-top: 18px;

}


/* =========================================================
   26. PEDIDO — DETALHES TÉCNICOS
   ========================================================= */

.order-technical-details {

    margin-top: 30px;

    padding-top: 5px;

}


.order-technical-details summary {

    width: max-content;

    color:
        var(--text-soft);

    font-size: 0.72rem;

    text-decoration: underline;

    text-underline-offset: 3px;

    cursor: pointer;

}


.order-technical-list {

    margin-top: 18px;

    padding:
        20px;

    background:
        var(--surface-soft);

}


.order-technical-list
.order-detail-value {

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 0.72rem;

}

/* =========================================================
   CHECKOUT
   Versão 8

   Restaura a apresentação da página de checkout sem alterar
   sua estrutura HTML ou a lógica do checkout.js.
   ========================================================= */


/* =========================================================
   CHECKOUT — PÁGINA / CABEÇALHO
   ========================================================= */

.checkout-page {

    min-height: 75vh;

}


.checkout-page .section {

    padding-top: 75px;

}


.checkout-heading {

    max-width: 760px;

    margin-bottom: 48px;

}


.checkout-heading .eyebrow {

    margin-bottom: 12px;

}


.checkout-heading h1 {

    margin-bottom: 22px;

}


.checkout-heading p {

    max-width: 620px;

    font-size: 0.98rem;

}


.checkout-status {

    min-height: 24px;

    margin-bottom: 25px;

    color:
        var(--accent-dark);

    font-size: 0.84rem;

}


/* =========================================================
   CHECKOUT — LAYOUT
   ========================================================= */

.checkout-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 390px);

    gap: 48px;

    align-items: start;

}


.checkout-main {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 22px;

}


/* =========================================================
   CHECKOUT — CARDS
   ========================================================= */

.checkout-card {

    padding:
        32px
        34px;

    border:
        1px solid
        var(--border);

    background:
        var(--surface-soft);

}


.checkout-card-heading {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 25px;

    margin-bottom: 27px;

}


.checkout-card-heading > div {

    min-width: 0;

}


.checkout-card-heading h2 {

    margin-top: 6px;

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.25rem
        );

}


.checkout-step {

    display: block;

    color:
        var(--accent-dark);

    font-size: 0.67rem;

    font-weight: 700;

    letter-spacing: 0.12em;

}


.checkout-edit-link {

    flex-shrink: 0;

    padding-bottom: 3px;

    border-bottom:
        1px solid
        currentColor;

    color:
        var(--text);

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;

}


.checkout-edit-link:hover {

    color:
        var(--accent-dark);

}


/* =========================================================
   CHECKOUT — DADOS PESSOAIS
   ========================================================= */

.checkout-data-list {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        21px
        35px;

    margin: 0;

}


.checkout-data-list > div {

    min-width: 0;

}


.checkout-data-list dt {

    margin-bottom: 4px;

    color:
        var(--text-soft);

    font-size: 0.66rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.checkout-data-list dd {

    min-width: 0;

    margin: 0;

    color:
        var(--text);

    font-size: 0.88rem;

    overflow-wrap: anywhere;

}


/* =========================================================
   CHECKOUT — ENDEREÇO
   ========================================================= */

.checkout-address {

    color:
        var(--text);

    font-size: 0.9rem;

    line-height: 1.7;

}


.checkout-address p {

    color:
        var(--text);

}


.checkout-address strong {

    color:
        var(--text);

    font-weight: 600;

}


/* =========================================================
   CHECKOUT — AVISOS
   ========================================================= */

.checkout-warning {

    margin-top: 22px;

    padding:
        14px
        16px;

    border-left:
        3px solid
        var(--accent-dark);

    background:
        var(--background);

    color:
        var(--text);

    font-size: 0.8rem;

    line-height: 1.55;

}


/* =========================================================
   CHECKOUT — FRETE
   ========================================================= */

.shipping-placeholder {

    padding-top: 2px;

}


.shipping-placeholder > p:first-child {

    max-width: 580px;

    margin-bottom: 20px;

    font-size: 0.87rem;

}


.shipping-status {

    min-height: 21px;

    margin-top: 14px;

    color:
        var(--accent-dark);

    font-size: 0.78rem;

}


.shipping-options {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.shipping-option {

    width: 100%;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr);

    gap: 14px;

    align-items: flex-start;

    padding:
        17px
        18px;

    border:
        1px solid
        var(--border);

    background:
        var(--background);

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;

}


.shipping-option:hover {

    border-color:
        var(--accent);

}


.shipping-option:has(input:checked) {

    border-color:
        var(--text);

    background:
        var(--white);

}


.shipping-option input {

    width: 16px;
    height: 16px;

    margin:
        4px
        0
        0;

    accent-color:
        var(--text);

}


.shipping-option-content {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.shipping-option-heading {

    min-width: 0;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

}


.shipping-option-heading strong {

    color:
        var(--text);

    font-size: 0.82rem;

}


.shipping-option-heading strong:last-child {

    flex-shrink: 0;

}


.shipping-option-content > span {

    color:
        var(--text-soft);

    font-size: 0.75rem;

}


/* =========================================================
   CHECKOUT — RESUMO
   ========================================================= */

.checkout-summary {

    position: sticky;

    top: 28px;

    min-width: 0;

    padding:
        32px;

    border:
        1px solid
        var(--border);

    background:
        var(--surface);

}


.checkout-summary .eyebrow {

    margin-bottom: 7px;

}


.checkout-summary > h2 {

    margin-bottom: 28px;

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.35rem
        );

}


/* =========================================================
   CHECKOUT — ITENS
   ========================================================= */

.checkout-items {

    display: flex;

    flex-direction: column;

    border-top:
        1px solid
        var(--border);

}


.checkout-item {

    min-width: 0;

    display: grid;

    grid-template-columns:
        70px
        minmax(0, 1fr)
        auto;

    gap: 15px;

    align-items: center;

    padding:
        18px
        0;

    border-bottom:
        1px solid
        var(--border);

}


.checkout-item img,
.checkout-item-placeholder {

    width: 70px;
    height: 70px;

    max-width: 70px;

    object-fit: cover;

    background:
        var(--surface-soft);

}


.checkout-item-info {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.checkout-item-info strong {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 0.98rem;

    font-weight: 400;

    line-height: 1.25;

}


.checkout-item-info span {

    color:
        var(--text-soft);

    font-size: 0.72rem;

}


.checkout-item-price {

    flex-shrink: 0;

    color:
        var(--text);

    font-size: 0.78rem;

}


/* =========================================================
   CHECKOUT — CUPOM
   ========================================================= */

.checkout-coupon {

    padding:
        22px
        0;

    border-bottom:
        1px solid
        var(--border);

}


.checkout-coupon-label {

    display: block;

    margin-bottom: 8px;

    color:
        var(--text);

    font-size: 0.74rem;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;

}


.checkout-coupon-controls {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 8px;

}


.checkout-coupon-controls input {

    min-width: 0;

    width: 100%;

    min-height: 44px;

    padding:
        10px
        12px;

    border:
        1px solid
        var(--border);

    background:
        var(--background);

    color:
        var(--text);

    text-transform: uppercase;

}


.checkout-coupon-apply {

    min-height: 44px;

    padding:
        9px
        15px;

}


.checkout-coupon-applied {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top: 10px;

    padding:
        9px
        11px;

    background:
        var(--surface-soft);

    font-size: 0.75rem;

}


.checkout-coupon-remove {

    padding: 0;

    border: 0;

    background: transparent;

    color:
        var(--accent-dark);

    font-size: 0.72rem;

    font-weight: 700;

    text-decoration: underline;

    text-underline-offset: 3px;

    cursor: pointer;

}


.checkout-coupon-status {

    min-height: 1.35em;

    margin-top: 8px;

    font-size: 0.72rem;

    line-height: 1.45;

}


.checkout-coupon-status.is-error {

    color: #8a2f2f;

}


.checkout-coupon-status.is-success {

    color: #3f6844;

}


.checkout-coupon-total strong {

    color:
        var(--accent-dark);

}


/* =========================================================
   CHECKOUT — TOTAIS
   ========================================================= */

.checkout-totals {

    padding:
        22px
        0;

}


.checkout-totals > div {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding:
        7px
        0;

}


.checkout-totals span {

    color:
        var(--text-soft);

    font-size: 0.78rem;

}


.checkout-totals strong {

    color:
        var(--text);

    font-size: 0.82rem;

}


.checkout-totals .checkout-total {

    margin-top: 12px;

    padding-top: 18px;

    border-top:
        1px solid
        var(--text);

}


.checkout-total span {

    color:
        var(--text);

    font-weight: 600;

}


.checkout-total strong {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.25rem;

    font-weight: 400;

}


/* =========================================================
   CHECKOUT — PAGAMENTO / VOLTAR
   ========================================================= */

.checkout-payment-button {

    width: 100%;

    min-height: 52px;

}


.checkout-payment-note {

    margin-top: 12px;

    font-size: 0.74rem;

    line-height: 1.5;

}


.checkout-back-link {

    display: inline-block;

    margin-top: 25px;

    color:
        var(--text-soft);

    font-size: 0.77rem;

    text-decoration: underline;

    text-underline-offset: 4px;

}


.checkout-back-link:hover {

    color:
        var(--text);

}


/* =========================================================
   CHECKOUT — CARRINHO VAZIO
   ========================================================= */

.checkout-empty {

    max-width: 650px;

    padding:
        55px
        0
        30px;

}


.checkout-empty h2 {

    margin-bottom: 18px;

}


.checkout-empty p {

    margin-bottom: 28px;

}


/* =========================================================
   CHECKOUT — TABLET
   ========================================================= */

@media (max-width: 950px) {

    .checkout-layout {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(270px, 330px);

        gap: 30px;

    }


    .checkout-card {

        padding:
            28px
            26px;

    }


    .checkout-summary {

        padding:
            28px
            24px;

    }


    .checkout-item {

        grid-template-columns:
            60px
            minmax(0, 1fr);

    }


    .checkout-item img,
    .checkout-item-placeholder {

        width: 60px;
        height: 60px;

        max-width: 60px;

    }


    .checkout-item-price {

        grid-column:
            2;

    }

}


/* =========================================================
   CHECKOUT — MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .checkout-page .section {

        padding-top: 55px;

    }


    .checkout-heading {

        margin-bottom: 36px;

    }


    .checkout-layout {

        grid-template-columns:
            1fr;

        gap: 28px;

    }


    .checkout-summary {

        position: static;

    }


    .checkout-data-list {

        grid-template-columns:
            1fr;

        gap: 17px;

    }


    .checkout-card-heading {

        gap: 18px;

    }

}


/* =========================================================
   CHECKOUT — CELULARES
   ========================================================= */

@media (max-width: 560px) {

    .checkout-card {

        padding:
            25px
            20px;

    }


    .checkout-card-heading {

        flex-direction: column;

        align-items: flex-start;

    }


    .checkout-summary {

        padding:
            26px
            20px;

    }


    .shipping-option {

        padding:
            15px
            14px;

    }


    .shipping-option-heading {

        flex-direction: column;

        gap: 3px;

    }


    .checkout-item {

        grid-template-columns:
            56px
            minmax(0, 1fr);

        gap: 12px;

    }


    .checkout-item img,
    .checkout-item-placeholder {

        width: 56px;
        height: 56px;

        max-width: 56px;

    }


    .checkout-item-price {

        grid-column:
            2;

    }

}

/* =========================================================
   27. CARRINHO
   ========================================================= */

.cart-items {

    margin-top: 45px;

}


.cart-item {

    display: grid;

    grid-template-columns:
        120px
        1fr
        auto;

    gap: 24px;

    align-items: center;

    padding:
        24px
        0;

    border-bottom:
        1px solid
        var(--border);

}


.cart-item img {

    width: 120px;
    height: 120px;

    object-fit: cover;

}


.cart-item-details h3 {

    margin-bottom: 5px;

}


.quantity-control {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 13px;

}


.quantity-control button {

    width: 32px;
    height: 32px;

    border:
        1px solid
        var(--border);

    background:
        transparent;

    cursor: pointer;

}


.cart-quantity-input {

    width: 58px;
    height: 32px;

    padding:
        0
        8px;

    border:
        1px solid
        var(--border);

    background:
        var(--background);

    color:
        var(--text);

    font: inherit;

    font-size:
        0.86rem;

    text-align:
        center;

    appearance:
        textfield;

}


.cart-quantity-input::-webkit-outer-spin-button,
.cart-quantity-input::-webkit-inner-spin-button {

    margin: 0;

    appearance:
        none;

}


.cart-quantity-input:focus {

    outline:
        2px solid
        var(--accent-dark);

    outline-offset:
        2px;

}


.cart-quantity-input:disabled {

    opacity:
        0.55;

    cursor:
        not-allowed;

}


.cart-remove {

    margin-top: 11px;

    padding: 0;

    border: 0;

    background:
        transparent;

    font-size: 0.8rem;

    text-decoration: underline;

    text-underline-offset: 3px;

    cursor: pointer;

}


.cart-summary {

    max-width: 400px;

    margin:
        45px
        0
        0
        auto;

    padding-top: 22px;

    display: grid;

    grid-template-columns:
        1fr
        auto;

    gap: 22px;

    border-top:
        1px solid
        var(--text);

}


.cart-summary .button {

    grid-column:
        1 / -1;

}


/* =========================================================
   28. ADMIN
   ========================================================= */

.admin-page {

    background:
        var(--background);

}


.admin-main {

    min-height: 80vh;

}


.admin-login {

    display: flex;

    justify-content: center;

    padding:
        90px
        20px;

}


.admin-panel {

    width:
        min(
            100%,
            460px
        );

    padding: 42px;

    background:
        var(--surface);

}


.admin-panel h1 {

    margin-bottom: 32px;

}


.admin-panel form {

    display: flex;

    flex-direction: column;

    gap: 20px;

}


.product-form label,
.admin-panel label {

    display: flex;

    flex-direction: column;

    gap: 6px;

    color:
        var(--text);

    font-size: 0.8rem;

    font-weight: 600;

}


.product-form input,
.product-form textarea,
.product-form select,
.admin-panel input {

    width: 100%;

    padding:
        11px
        12px;

    border:
        1px solid
        var(--border);

    background:
        var(--white);

    color:
        var(--text);

}


.product-form textarea {

    resize: vertical;

}


.admin-product-section {

    padding:
        75px
        0
        110px;

}


.admin-heading {

    margin-bottom: 45px;

}


.admin-heading h1 {

    margin-bottom: 18px;

}


.admin-heading p {

    max-width: 550px;

}


.product-form {

    max-width: 900px;

}


.admin-form-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 22px;

}


.admin-image-field {

    display: grid;

    grid-template-columns:
        1fr
        250px;

    gap: 28px;

    align-items: start;

    margin:
        28px
        0;

}


.admin-image-preview {

    width: 250px;

    aspect-ratio:
        1 / 1;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        var(--surface);

    color:
        var(--text-soft);

    font-size: 0.78rem;

}


.admin-image-preview img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


.admin-checks {

    display: flex;

    flex-wrap: wrap;

    gap: 28px;

    margin-bottom: 28px;

}


.admin-checks label {

    flex-direction: row;

    align-items: center;

}


.admin-checks input {

    width: auto;

}


.admin-message {

    margin-top: 16px;

}


/* ADMIN DASHBOARD */

.admin-header-actions {

    display: flex;

    align-items: center;

    gap: 18px;

}


.admin-user-email {

    color:
        var(--text-soft);

    font-size: 0.78rem;

}


.admin-dashboard {

    padding:
        75px
        0
        110px;

}


.admin-dashboard-heading,
.admin-editor-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;

    margin-bottom: 45px;

}


.admin-dashboard-heading p {

    max-width: 500px;

    margin-top: 15px;

}


.admin-products-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        45px
        25px;

    margin-top: 30px;

}


.admin-product-card {

    min-width: 0;

    background:
        var(--surface);

}


.admin-product-card-image {

    display: block;

    width: 100%;

    aspect-ratio:
        4 / 3;

    object-fit: cover;

    background:
        var(--surface-soft);

}


.admin-product-card-body {

    padding: 20px;

}


.admin-product-card-body h2 {

    margin:
        8px
        0
        7px;

    font-size: 1.35rem;

}


.admin-product-card-body p {

    font-size: 0.82rem;

}


.admin-product-category {

    margin-top: 4px;

}


.admin-product-status {

    display: inline-block;

    padding:
        4px
        8px;

    font-size: 0.62rem;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;

}


.admin-product-status.active {

    background: #e4ebe2;

    color: #3d5639;

}


.admin-product-status.inactive {

    background: #e7e4df;

    color:
        var(--text-soft);

}


.admin-product-actions {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 20px;

}


.admin-product-actions .button {

    min-height: 38px;

    padding:
        8px
        15px;

}


.admin-delete-button {

    padding: 0;

    border: 0;

    background:
        transparent;

    color: #8d3d36;

    font-size: 0.75rem;

    text-decoration: underline;

    text-underline-offset: 3px;

    cursor: pointer;

}


.admin-form-actions {

    display: flex;

    gap: 12px;

    margin-top: 10px;

}


/* =========================================================
   29. FOOTER
   ========================================================= */

.site-footer {

    padding:
        45px
        0
        50px;

    border-top:
        1px solid
        var(--border);

}


.footer-content {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 55px;

}


.site-footer .brand img {

    width: auto;

    height: 38px;

    max-width: 70px;

}


.site-footer .brand span {

    font-size: 0.98rem;

}


.footer-content p {

    margin-top: 12px;

    font-size: 0.8rem;

}


.footer-links {

    display: flex;

    flex-wrap: wrap;

    gap: 23px;

    padding-top: 12px;

}


.footer-links a {

    font-size: 0.8rem;

}


.footer-links a:hover {

    opacity: 0.55;

}


/* =========================================================
   30. ACESSIBILIDADE
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {

    outline:
        2px solid
        var(--accent-dark);

    outline-offset: 3px;

}


/* =========================================================
   31. TABLET
   ========================================================= */

@media (max-width: 950px) {

    :root {

        --section-space: 90px;

    }


    .header-content {

        gap: 22px;

    }


    .main-nav {

        gap: 20px;

    }


    .hero-grid {

        grid-template-columns:
            1fr
            1fr;

        gap: 42px;

    }


    .hero-image {

        min-height: 480px;

    }


    .process-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .process-item:nth-child(2) {

        border-right: none;

    }


    .process-item:nth-child(3),
    .process-item:nth-child(4) {

        border-top:
            1px solid
            var(--border);

    }


    .contact-content,
    .shop-callout-content {

        align-items: flex-start;

        flex-direction: column;

        gap: 38px;

    }


    .catalog-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .account-grid {

        gap: 30px;

    }


    /* PEDIDOS */

    .orders-layout {

        grid-template-columns:
            minmax(220px, 280px)
            minmax(0, 1fr);

    }


    .orders-sidebar {

        padding:
            26px
            20px;

    }


    .orders-detail {

        padding:
            35px
            30px;

    }


    .order-detail-header {

        gap: 25px;

    }

}


/* =========================================================
   32. MOBILE
   ========================================================= */

@media (max-width: 760px) {

    :root {

        --section-space: 75px;

    }


    /* HEADER */

    .site-header {

        padding:
            12px
            0;

    }


    .header-content {

        flex-wrap: wrap;

    }


    .brand img {

        height: 40px;

        max-width: 70px;

    }


    .main-nav {

        display: none;

    }


    .site-actions {

        margin-left: auto;

    }


    /* HERO */

    .hero {

        padding:
            50px
            0
            75px;

    }


    .hero-grid {

        grid-template-columns:
            1fr;

        gap: 42px;

    }


    .hero-image {

        height: auto;

        min-height: auto;

        aspect-ratio:
            4 / 5;

    }


    /* SEÇÕES */

    .section-heading {

        flex-direction: column;

        align-items: flex-start;

        gap: 22px;

        margin-bottom: 38px;

    }


    /* PRODUTOS */

    .products-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            38px
            18px;

    }


    /* PROCESSO */

    .process-grid {

        grid-template-columns:
            1fr;

    }


    .process-item,
    .process-item:not(:first-child) {

        padding:
            27px
            0
            28px;

        border-right: none;

        border-bottom:
            1px solid
            var(--border);

    }


    .process-item:nth-child(3),
    .process-item:nth-child(4) {

        border-top: none;

    }


    .process-item:last-child {

        border-bottom: none;

    }


    /* CATÁLOGO */

    .catalog-toolbar {

        flex-direction: column;

        align-items: stretch;

    }


    .catalog-sort {

        width: 100%;

    }


    .catalog-meta {

        flex-direction: column;

        gap: 4px;

    }


    /* LOGIN */

    .account-grid {

        grid-template-columns:
            1fr;

    }


    /* CONTA */

    .account-dashboard-header {

        align-items: flex-start;

        flex-direction: column;

    }


    .account-nav {

        gap: 24px;

        margin-bottom: 35px;

    }


    .account-card-heading {

        max-width: none;

    }


    .account-card-actions {

        position: static;

        margin-bottom: 25px;

    }


    .account-data-list {

        grid-template-columns:
            1fr;

    }


    .account-form-grid,
    .address-grid {

        grid-template-columns:
            1fr;

    }


    .full-field {

        grid-column:
            auto;

    }


    /* PEDIDOS */

    .orders-layout {

        grid-template-columns:
            1fr;

        min-height: 0;

    }


    .orders-sidebar {

        border-right: none;

        border-bottom:
            1px solid
            var(--border);

    }


    .orders-detail {

        min-height: 400px;

        padding:
            35px
            28px;

    }


    .orders-detail-placeholder {

        min-height: 310px;

    }


    .order-detail-header {

        flex-direction: column;

        gap: 12px;

    }


    .order-detail-total-block {

        align-items: flex-start;

        padding-top: 0;

    }


    .order-detail-row {

        grid-template-columns:
            1fr;

        gap: 3px;

        padding:
            11px
            0;

    }


    /* ADMIN */

    .admin-form-grid {

        grid-template-columns:
            1fr;

    }


    .admin-image-field {

        grid-template-columns:
            1fr;

    }


    .admin-image-preview {

        width: 100%;

        max-width: 300px;

    }


    .admin-products-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    /* FOOTER */

    .footer-content {

        flex-direction: column;

        gap: 32px;

    }


    .footer-links {

        padding-top: 0;

    }

}


/* =========================================================
   33. CELULARES
   ========================================================= */

@media (max-width: 560px) {

    h1 {

        font-size:
            clamp(
                3rem,
                15vw,
                4.3rem
            );

    }


    h2 {

        font-size:
            clamp(
                2.25rem,
                11vw,
                3.3rem
            );

    }


    .container {

        width:
            min(
                90%,
                var(--max-width)
            );

    }


    /* HEADER */

    .brand span {

        display: none;

    }


    .site-actions {

        gap: 12px;

    }


    /* HOME */

    .products-grid {

        grid-template-columns:
            1fr;

        gap: 42px;

    }


    /* CATÁLOGO */

    .catalog-grid {

        grid-template-columns:
            1fr;

        gap: 48px;

    }


    /* CONTATO */

    .contact-buttons {

        width: 100%;

        flex-direction: column;

    }


    .contact-buttons .button {

        width: 100%;

    }


    /* LOGIN */

    .account-panel {

        padding:
            30px
            22px;

    }


    /* CONTA */

    .account-nav {

        width: 100%;

        justify-content: space-between;

        gap: 15px;

    }


    .account-nav-button {

        flex:
            1
            1
            0;

        text-align: center;

    }


    .account-card {

        padding:
            28px
            22px;

    }


    .account-form-actions {

        flex-direction: column;

    }


    .account-form-actions .button {

        width: 100%;

    }


    .account-bottom-actions {

        flex-direction: column;

    }


    .account-bottom-actions .button {

        width: 100%;

    }


    /* PEDIDOS */

    .orders-sidebar {

        padding:
            25px
            18px;

    }


    .orders-toolbar {

        align-items: flex-start;

        flex-direction: column;

    }


    .orders-list-item {

        padding:
            17px
            3px;

    }


    .orders-list-item-top {

        align-items: flex-start;

        flex-direction: column;

        gap: 2px;

    }


    .orders-list-item-date {

        white-space: normal;

    }


    .orders-detail {

        padding:
            30px
            20px;

    }


    .order-detail-item {

        grid-template-columns:
            76px
            minmax(0, 1fr);

        gap: 15px;

    }


    .order-detail-item-image {

        width: 76px !important;
        height: 76px !important;

        max-width: 76px !important;

    }


    .order-detail-item-total {

        grid-column:
            2;

    }


    .order-detail-actions {

        flex-direction: column;

    }


    .order-detail-actions .button {

        width: 100%;

        min-width: 0;

    }


    .order-technical-list {

        padding:
            16px;

    }


    /* CARRINHO */

    .cart-item {

        grid-template-columns:
            85px
            1fr;

        gap: 16px;

    }


    .cart-item img {

        width: 85px;
        height: 85px;

    }


    .cart-item > strong {

        grid-column:
            2;

    }


    .cart-summary {

        max-width: none;

    }


    /* ADMIN */

    .admin-panel {

        padding:
            30px
            22px;

    }


    .admin-products-grid {

        grid-template-columns:
            1fr;

    }


    .admin-dashboard-heading,
    .admin-editor-heading {

        flex-direction: column;

        align-items: flex-start;

    }


    .admin-header-actions {

        margin-left: auto;

    }


    .admin-user-email {

        display: none;

    }


    .admin-form-actions {

        flex-direction: column;

    }

}


/* =========================================================
   34. REDUÇÃO DE MOVIMENTO
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    html {

        scroll-behavior: auto;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}

/* =========================================================
   35. ADMIN — GESTÃO / PEDIDOS
   Versão 8
   ========================================================= */

.admin-management-header {

    max-width: 760px;

    margin-bottom: 34px;

}


.admin-management-header h1 {

    margin-bottom: 18px;

}


.admin-management-header p {

    max-width: 620px;

}


.admin-nav {

    display: flex;

    align-items: center;

    gap: 30px;

    margin-bottom: 48px;

    border-bottom:
        1px solid
        var(--border);

}


.admin-nav-button {

    position: relative;

    min-height: 52px;

    padding:
        0
        0
        15px;

    border: 0;

    background: transparent;

    color:
        var(--text-soft);

    font-size: 0.73rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    cursor: pointer;

}


.admin-nav-button::after {

    content: "";

    position: absolute;

    right: 0;
    bottom: -1px;
    left: 0;

    height: 2px;

    background: transparent;

}


.admin-nav-button:hover,
.admin-nav-button.is-active {

    color:
        var(--text);

}


.admin-nav-button.is-active::after {

    background:
        var(--text);

}


.admin-view {

    width: 100%;

}


.admin-view-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 35px;

    margin-bottom: 30px;

}


.admin-view-heading h2 {

    font-size:
        clamp(
            2.2rem,
            4vw,
            3.6rem
        );

}


.admin-view-heading p {

    max-width: 620px;

    margin-top: 12px;

}


.admin-section-heading-compact {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 25px;

    margin-bottom: 20px;

}


.admin-section-heading-compact .eyebrow {

    margin-bottom: 7px;

}


.admin-section-heading-compact h3 {

    font-size: 1.7rem;

}


/* RESUMO */

.admin-summary-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 16px;

    margin-top: 26px;

}


.admin-summary-card {

    min-height: 132px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 20px;

    padding: 23px;

    border:
        1px solid
        var(--border);

    background:
        var(--surface-soft);

}


.admin-summary-card span {

    color:
        var(--text-soft);

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;

}


.admin-summary-card strong {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 2rem;

    font-weight: 400;

    line-height: 1;

}


.admin-summary-card-wide {

    grid-column:
        span 2;

}


.admin-recent-section {

    margin-top: 55px;

}


.admin-recent-orders {

    border-top:
        1px solid
        var(--border);

}


.admin-recent-order-row {

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(190px, 1.5fr)
        110px
        minmax(160px, 0.8fr)
        110px;

    gap: 20px;

    align-items: center;

    padding:
        18px
        4px;

    border: 0;

    border-bottom:
        1px solid
        var(--border);

    background: transparent;

    color:
        var(--text);

    text-align: left;

    cursor: pointer;

}


.admin-recent-order-row:hover {

    background:
        var(--surface-soft);

}


.admin-recent-order-main {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.admin-recent-order-main strong {

    color:
        var(--accent-dark);

    font-size: 0.72rem;

    letter-spacing: 0.08em;

}


.admin-recent-order-main span {

    overflow: hidden;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1rem;

    text-overflow: ellipsis;

    white-space: nowrap;

}


.admin-empty-state {

    padding:
        24px
        0;

    font-size: 0.85rem;

}


/* BADGES */

.admin-status-badge {

    width: max-content;

    max-width: 100%;

    display: inline-flex;

    align-items: center;

    min-height: 27px;

    padding:
        5px
        9px;

    border-radius: 999px;

    background:
        #e7e4df;

    color:
        var(--text-soft);

    font-size: 0.61rem;

    font-weight: 700;

    letter-spacing: 0.04em;

    line-height: 1.25;

    text-transform: uppercase;

}


.admin-status-badge.status-confirmed,
.admin-status-badge.status-payment-approved,
.admin-status-badge.status-purchased,
.admin-status-badge.status-generated,
.admin-status-badge.status-posted,
.admin-status-badge.status-delivered {

    background: #e4ebe2;

    color: #3d5639;

}


.admin-status-badge.status-pending-payment,
.admin-status-badge.status-payment-pending,
.admin-status-badge.status-preparing,
.admin-status-badge.status-cart-ready {

    background: #eee8dc;

    color: #6c5a34;

}


.admin-status-badge.status-cancelled,
.admin-status-badge.status-payment-cancelled,
.admin-status-badge.status-payment-rejected,
.admin-status-badge.status-payment-refunded,
.admin-status-badge.status-payment-charged-back,
.admin-status-badge.status-error,
.admin-status-badge.status-exception {

    background: #efe1df;

    color: #7c3731;

}


/* PEDIDOS — LAYOUT */

.admin-orders-layout {

    display: grid;

    grid-template-columns:
        minmax(310px, 390px)
        minmax(0, 1fr);

    min-height: 720px;

    border:
        1px solid
        var(--border);

    background:
        var(--surface-soft);

}


.admin-orders-sidebar {

    min-width: 0;

    padding:
        28px
        22px;

    border-right:
        1px solid
        var(--border);

    background:
        var(--surface);

}


.admin-orders-filters {

    display: flex;

    flex-direction: column;

    gap: 16px;

    padding-bottom: 24px;

    border-bottom:
        1px solid
        var(--border);

}


.admin-orders-filters label {

    display: flex;

    flex-direction: column;

    gap: 6px;

    color:
        var(--text);

    font-size: 0.72rem;

    font-weight: 700;

}


.admin-orders-filters input,
.admin-orders-filters select {

    width: 100%;

    padding:
        10px
        11px;

    border:
        1px solid
        var(--border);

    background:
        var(--white);

    color:
        var(--text);

}


.admin-orders-filter-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 12px;

}


.admin-orders-filter-actions {

    display: flex;

    gap: 9px;

}


.admin-orders-filter-actions .button {

    min-height: 40px;

    flex:
        1
        1
        0;

    padding:
        9px
        10px;

}


.admin-orders-list {

    margin-top: 8px;

    border-top:
        1px solid
        var(--border);

}


.admin-order-list-item {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 9px;

    padding:
        18px
        5px;

    border: 0;

    border-bottom:
        1px solid
        var(--border);

    background: transparent;

    color:
        var(--text);

    text-align: left;

    cursor: pointer;

    transition:
        padding 0.2s ease,
        background-color 0.2s ease;

}


.admin-order-list-item:hover,
.admin-order-list-item.is-active {

    padding-left: 11px;

    background:
        var(--background);

}


.admin-order-list-top,
.admin-order-list-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

}


.admin-order-list-top strong {

    color:
        var(--accent-dark);

    font-size: 0.69rem;

    letter-spacing: 0.09em;

}


.admin-order-list-top span,
.admin-order-list-footer span {

    color:
        var(--text-soft);

    font-size: 0.68rem;

}


.admin-order-list-customer {

    overflow: hidden;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.02rem;

    text-overflow: ellipsis;

    white-space: nowrap;

}


.admin-order-list-badges {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

}


.admin-order-list-footer strong {

    font-size: 0.76rem;

}


/* PEDIDOS — DETALHE */

.admin-order-detail {

    min-width: 0;

    padding:
        38px
        42px;

    background:
        var(--background);

}


.admin-order-detail-placeholder {

    min-height: 520px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    max-width: 480px;

}


.admin-order-detail-placeholder h3 {

    margin-bottom: 13px;

    font-size:
        clamp(
            2rem,
            4vw,
            3.2rem
        );

}


.admin-order-detail-card {

    width: 100%;

}


.admin-order-detail-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 35px;

    padding-bottom: 25px;

    border-bottom:
        1px solid
        var(--border);

}


.admin-order-detail-header h2 {

    margin-bottom: 8px;

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

}


.admin-order-detail-total {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 3px;

    padding-top: 25px;

}


.admin-order-detail-total span {

    color:
        var(--text-soft);

    font-size: 0.65rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.admin-order-detail-total strong {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.35rem;

    font-weight: 400;

}


.admin-order-status-strip {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    padding:
        20px
        0;

    border-bottom:
        1px solid
        var(--border);

}


.admin-order-detail-section {

    padding:
        28px
        0;

    border-bottom:
        1px solid
        var(--border);

}


.admin-order-detail-section > h3 {

    margin-bottom: 18px;

    color:
        var(--accent-dark);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}


.admin-detail-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        18px
        32px;

    margin: 0;

}


.admin-detail-grid > div {

    min-width: 0;

}


.admin-detail-grid dt,
.admin-logistics-label dt {

    margin-bottom: 4px;

    color:
        var(--text-soft);

    font-size: 0.64rem;

    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;

}


.admin-detail-grid dd,
.admin-logistics-label dd {

    min-width: 0;

    margin: 0;

    color:
        var(--text);

    font-size: 0.81rem;

    overflow-wrap: anywhere;

}


.admin-detail-preline {

    white-space: pre-line;

}


.admin-logistics-labels {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 20px;

}


.admin-logistics-label {

    padding: 18px;

    border:
        1px solid
        var(--border);

    background:
        var(--surface-soft);

}


.admin-logistics-label > div:first-child {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 14px;

}


.admin-logistics-label > div:first-child span {

    color:
        var(--text-soft);

    font-size: 0.69rem;

}


.admin-logistics-label dl {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 15px;

    margin: 0;

}


/* PRODUTOS DO PEDIDO */

.admin-order-products {

    display: flex;

    flex-direction: column;

}


.admin-order-product {

    display: grid;

    grid-template-columns:
        76px
        minmax(0, 1fr)
        auto;

    gap: 16px;

    align-items: center;

    padding:
        15px
        0;

    border-bottom:
        1px solid
        var(--border);

}


.admin-order-product:last-child {

    border-bottom: 0;

}


.admin-order-product img,
.admin-order-product-placeholder {

    width: 76px;
    height: 76px;

    object-fit: cover;

    background:
        var(--surface);

}


.admin-order-product > div {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.admin-order-product > div > strong {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1rem;

    font-weight: 400;

}


.admin-order-product span,
.admin-order-product small {

    color:
        var(--text-soft);

    font-size: 0.72rem;

}


.admin-order-product > strong {

    font-size: 0.78rem;

}


/* AÇÕES / AVISOS */

.admin-alert {

    margin:
        0
        0
        18px;

    padding:
        13px
        15px;

    border-left:
        3px solid
        var(--accent-dark);

    background:
        var(--surface-soft);

    color:
        var(--text);

    font-size: 0.78rem;

}


.admin-alert.success {

    border-left-color: #526d4d;

}


.admin-alert.error {

    border-left-color: #8d3d36;

}


.admin-order-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}


.admin-order-actions .button {

    min-height: 42px;

    padding:
        9px
        14px;

}


.admin-technical-details {

    margin-top: 28px;

}


.admin-technical-details summary {

    width: max-content;

    color:
        var(--text-soft);

    font-size: 0.72rem;

    text-decoration: underline;

    text-underline-offset: 3px;

    cursor: pointer;

}


.admin-detail-grid-technical {

    margin-top: 18px;

    padding: 18px;

    background:
        var(--surface-soft);

}


.admin-detail-grid-technical dd {

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 0.7rem;

}


/* =========================================================
   36. ADMIN — GESTÃO RESPONSIVA
   ========================================================= */

@media (max-width: 1050px) {

    .admin-summary-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .admin-orders-layout {

        grid-template-columns:
            minmax(270px, 330px)
            minmax(0, 1fr);

    }


    .admin-order-detail {

        padding:
            34px
            28px;

    }


    .admin-recent-order-row {

        grid-template-columns:
            minmax(170px, 1.4fr)
            100px
            minmax(145px, 0.8fr)
            90px;

        gap: 13px;

    }

}


@media (max-width: 820px) {

    .admin-orders-layout {

        grid-template-columns:
            1fr;

    }


    .admin-orders-sidebar {

        border-right: 0;

        border-bottom:
            1px solid
            var(--border);

    }


    .admin-order-detail-placeholder {

        min-height: 300px;

    }


    .admin-recent-order-row {

        grid-template-columns:
            minmax(0, 1fr)
            auto;

    }


    .admin-recent-order-row > :nth-child(2),
    .admin-recent-order-row > :nth-child(3) {

        display: none;

    }

}


@media (max-width: 620px) {

    .admin-nav {

        width: 100%;

        justify-content: space-between;

        gap: 12px;

    }


    .admin-nav-button {

        flex:
            1
            1
            0;

        font-size: 0.65rem;

        text-align: center;

    }


    .admin-view-heading,
    .admin-section-heading-compact {

        align-items: flex-start;

        flex-direction: column;

    }


    .admin-summary-grid {

        grid-template-columns:
            1fr;

    }


    .admin-summary-card-wide {

        grid-column:
            auto;

    }


    .admin-orders-filter-grid,
    .admin-detail-grid,
    .admin-logistics-label dl {

        grid-template-columns:
            1fr;

    }


    .admin-orders-filter-actions,
    .admin-order-actions {

        flex-direction: column;

    }


    .admin-orders-filter-actions .button,
    .admin-order-actions .button {

        width: 100%;

    }


    .admin-order-detail {

        padding:
            28px
            20px;

    }


    .admin-order-detail-header {

        flex-direction: column;

        gap: 10px;

    }


    .admin-order-detail-total {

        align-items: flex-start;

        padding-top: 0;

    }


    .admin-order-product {

        grid-template-columns:
            64px
            minmax(0, 1fr);

    }


    .admin-order-product img,
    .admin-order-product-placeholder {

        width: 64px;
        height: 64px;

    }


    .admin-order-product > strong {

        grid-column:
            2;

    }

}
/* =========================================================
   CARRINHO — VALIDAÇÃO DE DISPONIBILIDADE / ESTOQUE
   Versão 9
   ========================================================= */

.cart-item.is-invalid {

    margin-top: 12px;

    padding:
        24px
        18px;

    border:
        1px solid
        var(--border);

    background:
        var(--surface-soft);

}


.cart-item.is-invalid + .cart-item.is-invalid {

    margin-top: 0;

    border-top: 0;

}


.cart-item-image-placeholder {

    width: 120px;
    height: 120px;

    background:
        var(--surface);

}


.cart-item-warning {

    max-width: 520px;

    margin-top: 14px;

    padding:
        12px
        14px;

    border-left:
        3px solid
        var(--accent-dark);

    background:
        var(--background);

}


.cart-item-warning strong {

    display: block;

    margin-bottom: 3px;

    color:
        var(--text);

    font-size: 0.72rem;

    letter-spacing: 0.06em;

    text-transform: uppercase;

}


.cart-item-warning p {

    color:
        var(--text-soft);

    font-size: 0.78rem;

    line-height: 1.5;

}


.cart-item-quantity-note {

    margin-top: 12px;

    font-size: 0.78rem;

}


.cart-adjust-button {

    width: max-content;

    margin-top: 12px;

    padding: 0;

    border: 0;
    border-bottom:
        1px solid
        currentColor;

    background:
        transparent;

    color:
        var(--accent-dark);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.04em;

    cursor: pointer;

}


.cart-adjust-button:hover {

    color:
        var(--text);

}


.cart-item-line-total {

    align-self: center;

}


.cart-validation-message {

    margin-top: 28px;

    padding:
        14px
        16px;

    border-left:
        3px solid
        var(--accent-dark);

    background:
        var(--surface);

    color:
        var(--text);

    font-size: 0.82rem;

    line-height: 1.55;

}


.cart-validation-message.is-error {

    color: #7f342f;

}


#checkout-button.is-disabled,
#checkout-button[aria-disabled="true"] {

    opacity: 0.45;

    cursor: not-allowed;

    pointer-events: none;

    transform: none;

}


@media (max-width: 560px) {

    .cart-item.is-invalid {

        padding:
            20px
            14px;

    }


    .cart-item-image-placeholder {

        width: 85px;
        height: 85px;

    }


    .cart-adjust-button {

        width: auto;

        text-align: left;

    }

}
/* =========================================================
   ADMIN — CANCELAMENTO DE PEDIDO PENDENTE
   Versão 10
   ========================================================= */

.admin-danger-button {

    border-color: #8d3d36 !important;

    color: #8d3d36 !important;

}


.admin-danger-button:hover {

    background: #8d3d36 !important;

    color: var(--white) !important;

}


.admin-order-cancel-panel {

    margin-top: 18px;

    padding: 20px;

    border:
        1px solid
        var(--border);

    background:
        var(--surface-soft);

}


.admin-order-cancel-panel label {

    display: block;

    margin-bottom: 7px;

    color:
        var(--text);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.05em;

    text-transform: uppercase;

}


.admin-order-cancel-panel textarea {

    width: 100%;

    min-height: 96px;

    padding:
        11px
        12px;

    border:
        1px solid
        var(--border);

    background:
        var(--white);

    color:
        var(--text);

    resize: vertical;

}


.admin-order-cancel-panel > p {

    max-width: 720px;

    margin-top: 10px;

    font-size: 0.76rem;

    line-height: 1.55;

}


.admin-order-cancel-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 16px;

}


.admin-order-cancel-actions .button {

    min-height: 40px;

    padding:
        9px
        14px;

}


@media (max-width: 620px) {

    .admin-order-cancel-actions {

        flex-direction: column;

    }


    .admin-order-cancel-actions .button {

        width: 100%;

    }

}
/* =========================================================
   ADMIN — DEVOLUÇÃO / LOGÍSTICA REVERSA
   Versão 11
   ========================================================= */

.admin-return-fields {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        14px;

    margin-top:
        16px;

}


.admin-return-fields label {

    margin-bottom:
        0;

}


.admin-return-fields label:first-child {

    grid-column:
        1 / -1;

}


.admin-return-fields input,
.admin-return-fields select {

    width:
        100%;

    margin-top:
        7px;

    min-height:
        42px;

    padding:
        10px
        12px;

    border:
        1px solid
        var(--border);

    background:
        var(--white);

    color:
        var(--text);

}


.admin-return-panel {

    border-left:
        3px solid
        var(--accent);

}


@media (max-width: 620px) {

    .admin-return-fields {

        grid-template-columns:
            1fr;

    }


    .admin-return-fields label:first-child {

        grid-column:
            auto;

    }

}
/* =========================================================
   ADMIN — PASSO 4C / INSPEÇÃO DA DEVOLUÇÃO
   ========================================================= */

.admin-return-confirmation {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin:
        14px 0 18px;

    font-weight: 600;

}


.admin-return-confirmation input {

    width: auto;

    min-height: auto;

    margin-top: 3px;

}


#admin-return-restock-decision {

    width: 100%;

    min-height: 42px;

    margin:
        7px 0 16px;

    padding:
        10px 12px;

    border:
        1px solid var(--border);

    background:
        var(--white);

    color:
        var(--text);

}


#admin-return-inspection-note {

    width: 100%;

    margin-top: 7px;

}
/* =========================================================
   PASSO 5A — ACOMPANHAMENTO DO CLIENTE
   ========================================================= */

.customer-order-summary {

    margin:
        24px 0 0;

    padding:
        22px;

    border:
        1px solid var(--border);

    background:
        var(--surface-soft);

}


.customer-order-summary-label {

    margin:
        0 0 6px;

    color:
        var(--text-soft);

    font-size:
        0.67rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


.customer-order-summary-title {

    margin:
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        1.35rem;

    font-weight:
        400;

}


.customer-order-summary-text {

    max-width:
        620px;

    margin:
        8px 0 0;

    color:
        var(--text-soft);

    font-size:
        0.85rem;

    line-height:
        1.6;

}


.customer-order-timeline {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        0;

    margin:
        4px 0 0;

}


.customer-order-timeline.has-return {

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

}


.customer-order-timeline-step {

    position:
        relative;

    min-width:
        0;

    padding:
        30px 18px 0 0;

}


.customer-order-timeline-step::before {

    content:
        "";

    position:
        absolute;

    top:
        8px;
    left:
        7px;

    z-index:
        2;

    width:
        11px;
    height:
        11px;

    border:
        2px solid var(--border);

    border-radius:
        999px;

    background:
        var(--background);

}


.customer-order-timeline-step::after {

    content:
        "";

    position:
        absolute;

    top:
        13px;
    left:
        18px;
    right:
        0;

    height:
        1px;

    background:
        var(--border);

}


.customer-order-timeline-step:last-child::after {

    display:
        none;

}


.customer-order-timeline-step.is-complete::before,
.customer-order-timeline-step.is-current::before {

    border-color:
        var(--accent-dark);

    background:
        var(--accent-dark);

}


.customer-order-timeline-step.is-complete::after {

    background:
        var(--accent-dark);

}


.customer-order-timeline-label {

    display:
        block;

    color:
        var(--text);

    font-size:
        0.75rem;

    font-weight:
        700;

    line-height:
        1.35;

}


.customer-order-timeline-date {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--text-soft);

    font-size:
        0.68rem;

    line-height:
        1.35;

}


.customer-tracking-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

}


.customer-tracking-card {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap:
        18px;

    align-items:
        center;

    padding:
        17px 18px;

    border:
        1px solid var(--border);

    background:
        var(--surface-soft);

}


.customer-tracking-card strong {

    display:
        block;

    margin-bottom:
        4px;

    font-size:
        0.84rem;

}


.customer-tracking-code {

    color:
        var(--text-soft);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;

    font-size:
        0.76rem;

}


.customer-return-card {

    padding:
        22px;

    border-left:
        3px solid var(--accent-dark);

    background:
        var(--surface-soft);

}


.customer-return-card h4 {

    margin:
        0 0 8px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        1.2rem;

    font-weight:
        400;

}


.customer-return-card p {

    margin:
        0;

    font-size:
        0.84rem;

    line-height:
        1.6;

}


@media (max-width: 760px) {

    .customer-order-timeline,
    .customer-order-timeline.has-return {

        grid-template-columns:
            1fr;

    }


    .customer-order-timeline-step {

        padding:
            0 0 24px 34px;

    }


    .customer-order-timeline-step::before {

        top:
            3px;

    }


    .customer-order-timeline-step::after {

        top:
            14px;
        bottom:
            0;
        left:
            12px;
        right:
            auto;

        width:
            1px;
        height:
            auto;

    }


    .customer-tracking-card {

        grid-template-columns:
            1fr;

    }

}

/* =========================================================
   PASSO 5B.4A — PRIVACIDADE / LGPD
   ========================================================= */

.privacy-page {
    padding: 56px 0 80px;
}

.privacy-header {
    max-width: 760px;
    margin-bottom: 42px;
}

.privacy-header h1 {
    margin: 8px 0 14px;
}

.privacy-header p {
    max-width: 680px;
    color: var(--text-soft);
    line-height: 1.7;
}

.privacy-content {
    display: grid;
    gap: 28px;
    max-width: 860px;
}

.privacy-section {
    padding: 24px 0;
    border-top: 1px solid var(--border);
}

.privacy-section:first-child {
    border-top: 0;
    padding-top: 0;
}

.privacy-section h2 {
    margin: 0 0 12px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    font-weight: 400;
}

.privacy-section h3 {
    margin: 20px 0 8px;
    font-size: 0.92rem;
}

.privacy-section p,
.privacy-section li {
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.7;
}

.privacy-section ul {
    margin: 12px 0 0;
    padding-left: 20px;
}

.privacy-note {
    padding: 18px;
    border: 1px solid var(--border);
    background: var(--surface-soft);
}

.privacy-note p {
    margin: 0;
}

.privacy-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.footer-links a.privacy-link {
    white-space: nowrap;
}


/* =========================================================
   PASSO 5B.4B — CENTRAL DE PRIVACIDADE
   ========================================================= */

.account-privacy-view {

    max-width:
        980px;

}


.privacy-center-intro {

    max-width:
        760px;

    line-height:
        1.7;

}


.privacy-center-policy-links {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        18px;

    margin:
        14px 0
        24px;

}


.privacy-request-form {

    display:
        grid;

    gap:
        18px;

    max-width:
        760px;

}


.privacy-request-form label {

    display:
        grid;

    gap:
        8px;

}


.privacy-request-form select,
.privacy-request-form textarea {

    width:
        100%;

}


.privacy-request-note {

    margin:
        0;

    padding:
        14px 16px;

    border:
        1px solid
        var(--border);

    font-size:
        0.86rem;

    line-height:
        1.6;

}


.privacy-requests-list {

    display:
        grid;

    gap:
        16px;

}


.privacy-requests-empty {

    margin:
        0;

}


.privacy-request-card {

    padding:
        18px;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

}


.privacy-request-card-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;

}


.privacy-request-card-header h3 {

    margin:
        4px 0
        0;

    font-size:
        1rem;

}


.privacy-request-protocol {

    font-size:
        0.76rem;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;

    opacity:
        0.68;

}


.privacy-request-status {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        5px 9px;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    font-size:
        0.76rem;

    white-space:
        nowrap;

}


.privacy-request-status.status-completed {

    font-weight:
        700;

}


.privacy-request-status.status-rejected,
.privacy-request-status.status-cancelled {

    opacity:
        0.68;

}


.privacy-request-meta {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        10px 22px;

    margin:
        18px 0;

}


.privacy-request-meta div {

    display:
        grid;

    gap:
        3px;

}


.privacy-request-meta dt {

    font-size:
        0.72rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.05em;

    opacity:
        0.64;

}


.privacy-request-meta dd {

    margin:
        0;

    font-size:
        0.86rem;

}


.privacy-request-copy,
.privacy-request-response {

    margin-top:
        14px;

    padding:
        14px;

    border:
        1px solid
        var(--border);

}


.privacy-request-copy p,
.privacy-request-response p {

    margin:
        7px 0
        0;

    white-space:
        pre-line;

    line-height:
        1.6;

}


.privacy-request-response {

    background:
        var(--surface-soft);

}


.privacy-request-cancel {

    margin-top:
        16px;

}


/* Administração */

.admin-privacy-layout {

    display:
        grid;

    grid-template-columns:
        minmax(280px, 0.8fr)
        minmax(0, 1.4fr);

    gap:
        24px;

    align-items:
        start;

}


.admin-privacy-sidebar,
.admin-privacy-detail {

    min-width:
        0;

}


.admin-privacy-list {

    display:
        grid;

    gap:
        8px;

}


.admin-privacy-list-item {

    width:
        100%;

    padding:
        14px;

    border:
        1px solid
        var(--border);

    background:
        transparent;

    color:
        inherit;

    text-align:
        left;

    cursor:
        pointer;

}


.admin-privacy-list-item.is-active {

    border-color:
        currentColor;

}


.admin-privacy-list-item:hover {

    background:
        var(--surface-soft);

}


.admin-privacy-events {

    display:
        grid;

    gap:
        10px;

    margin:
        0;

    padding-left:
        20px;

}


.admin-privacy-events li {

    line-height:
        1.5;

}


.admin-privacy-events li strong {

    display:
        block;

    font-size:
        0.8rem;

}


.admin-privacy-response-preview {

    margin-top:
        16px;

    padding:
        16px;

    border:
        1px solid
        var(--border);

}


.admin-privacy-response-preview p {

    margin:
        8px 0
        0;

    white-space:
        pre-line;

}


#admin-privacy-review-form {

    display:
        grid;

    gap:
        14px;

    margin-top:
        18px;

}


#admin-privacy-review-form label {

    font-size:
        0.84rem;

    font-weight:
        700;

}


#admin-privacy-review-form select,
#admin-privacy-review-form textarea {

    width:
        100%;

}


@media (max-width: 760px) {

    .privacy-request-card-header {

        display:
            grid;

    }


    .privacy-request-meta {

        grid-template-columns:
            1fr;

    }


    .admin-privacy-layout {

        grid-template-columns:
            1fr;

    }

}


/* =========================================================
   PASSO 5C — MFA OBRIGATÓRIO DO ADMIN
   ========================================================= */

.admin-mfa-section {

    min-height:
        calc(100vh - 90px);

}


.admin-mfa-panel {

    max-width:
        520px;

}


.admin-mfa-intro {

    margin:
        0 0
        22px;

    color:
        var(--text-soft);

    line-height:
        1.65;

}


.admin-mfa-qr-wrapper {

    display:
        flex;

    justify-content:
        center;

    margin:
        18px 0;

}


.admin-mfa-qr {

    width:
        min(
            260px,
            100%
        );

    height:
        auto;

    padding:
        12px;

    border:
        1px solid
        var(--border);

    background:
        #ffffff;

}


.admin-mfa-secret-wrapper {

    display:
        grid;

    gap:
        6px;

    margin:
        0 0
        20px;

    padding:
        14px;

    border:
        1px solid
        var(--border);

    background:
        var(--surface-soft);

}


.admin-mfa-secret-wrapper span {

    font-size:
        0.75rem;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;

    color:
        var(--text-soft);

}


.admin-mfa-secret-wrapper code {

    display:
        block;

    overflow-wrap:
        anywhere;

    font-size:
        0.9rem;

}


#admin-mfa-setup-form,
#admin-mfa-challenge-form {

    display:
        grid;

    gap:
        16px;

    margin-bottom:
        16px;

}


#admin-mfa-setup-form label,
#admin-mfa-challenge-form label {

    display:
        grid;

    gap:
        8px;

}


#admin-mfa-setup-code,
#admin-mfa-challenge-code {

    max-width:
        180px;

    font-size:
        1.2rem;

    letter-spacing:
        0.2em;

    text-align:
        center;

}


.admin-mfa-recovery-note {

    margin:
        8px 0
        18px;

    padding:
        14px;

    border:
        1px solid
        var(--border);

    color:
        var(--text-soft);

    font-size:
        0.82rem;

    line-height:
        1.6;

}


/* =========================================================
   PASSO 5D — CENTRAL UNIFICADA DE ATENDIMENTO
   ========================================================= */

.account-support-view {

    width:
        100%;

}


.support-center-intro {

    max-width:
        760px;

    margin:
        0 0
        22px;

    line-height:
        1.7;

}


.support-request-form {

    display:
        grid;

    gap:
        18px;

}


.support-request-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        16px;

}


.support-request-form label,
.support-privacy-fields label {

    display:
        grid;

    gap:
        8px;

}


.support-request-form select,
.support-request-form input,
.support-request-form textarea,
.support-privacy-fields select {

    width:
        100%;

}


.support-privacy-fields {

    display:
        grid;

    gap:
        12px;

    padding:
        16px;

    border:
        1px solid
        var(--border);

    background:
        var(--surface-soft);

}


.support-privacy-note {

    margin:
        0;

    font-size:
        0.84rem;

    line-height:
        1.6;

    color:
        var(--text-soft);

}


.support-center-layout {

    display:
        grid;

    grid-template-columns:
        minmax(250px, 0.8fr)
        minmax(0, 1.4fr);

    gap:
        22px;

    align-items:
        start;

}


.support-list {

    display:
        grid;

    gap:
        8px;

}


.support-list-item {

    display:
        grid;

    gap:
        8px;

    width:
        100%;

    padding:
        14px;

    border:
        1px solid
        var(--border);

    background:
        transparent;

    color:
        inherit;

    text-align:
        left;

    cursor:
        pointer;

}


.support-list-item:hover,
.support-list-item.is-active {

    background:
        var(--surface-soft);

}


.support-list-item.is-active {

    border-color:
        currentColor;

}


.support-list-item-top {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        12px;

    font-size:
        0.78rem;

}


.support-list-item-title {

    font-weight:
        700;

}


.support-list-item-meta {

    font-size:
        0.82rem;

    color:
        var(--text-soft);

}


.support-case-status {

    display:
        inline-flex;

    width:
        fit-content;

    align-items:
        center;

    padding:
        5px 9px;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    font-size:
        0.75rem;

}


.support-case-status.status-resolved,
.support-case-status.status-completed {

    font-weight:
        700;

}


.support-case-status.status-closed,
.support-case-status.status-cancelled,
.support-case-status.status-rejected {

    opacity:
        0.68;

}


.support-detail {

    min-width:
        0;

}


.support-detail-placeholder,
.support-detail-card {

    padding:
        20px;

    border:
        1px solid
        var(--border);

}


.support-detail-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        18px;

    margin-bottom:
        22px;

}


.support-detail-header h3 {

    margin:
        6px 0;

}


.support-detail-header p {

    margin:
        0;

    color:
        var(--text-soft);

}


.support-messages,
.admin-support-messages {

    display:
        grid;

    gap:
        12px;

}


.support-message,
.admin-support-message {

    padding:
        14px;

    border:
        1px solid
        var(--border);

}


.support-message-admin,
.admin-support-message-admin {

    background:
        var(--surface-soft);

}


.support-message header,
.admin-support-message header {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        8px;

    font-size:
        0.78rem;

}


.support-message p,
.admin-support-message p {

    margin:
        0;

    white-space:
        pre-line;

    line-height:
        1.6;

}


.support-reply-form {

    display:
        grid;

    gap:
        12px;

    margin-top:
        20px;

    padding-top:
        20px;

    border-top:
        1px solid
        var(--border);

}


.support-reply-form textarea {

    width:
        100%;

}


.support-closed-note,
.support-waiting-note {

    margin:
        18px 0
        0;

    padding:
        14px;

    border:
        1px solid
        var(--border);

    color:
        var(--text-soft);

}


.support-privacy-detail {

    display:
        grid;

    gap:
        14px;

}


.support-privacy-detail > div {

    padding:
        14px;

    border:
        1px solid
        var(--border);

}


.support-privacy-detail p {

    margin:
        8px 0
        0;

    white-space:
        pre-line;

    line-height:
        1.6;

}


.support-privacy-response {

    background:
        var(--surface-soft);

}


.support-policy-links {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        18px;

    margin-top:
        18px;

    font-size:
        0.86rem;

}


.support-empty-state {

    margin:
        0;

    color:
        var(--text-soft);

}


/* Ajuda vinculada ao pedido */

.order-support-section p {

    margin:
        0 0
        14px;

    line-height:
        1.6;

}


/* Administração */

.admin-support-layout {

    display:
        grid;

    grid-template-columns:
        minmax(300px, 0.8fr)
        minmax(0, 1.4fr);

    gap:
        24px;

    align-items:
        start;

}


.admin-support-list {

    display:
        grid;

    gap:
        8px;

}


.admin-support-list-item {

    width:
        100%;

    padding:
        14px;

    border:
        1px solid
        var(--border);

    background:
        transparent;

    color:
        inherit;

    text-align:
        left;

    cursor:
        pointer;

}


.admin-support-list-item:hover,
.admin-support-list-item.is-active {

    background:
        var(--surface-soft);

}


.admin-support-list-item.is-active {

    border-color:
        currentColor;

}


.admin-support-list-title {

    display:
        block;

    margin:
        8px 0;

    font-weight:
        700;

}


.admin-support-detail {

    min-width:
        0;

}


#admin-support-reply-form,
#admin-support-status-form,
#admin-unified-privacy-form {

    display:
        grid;

    gap:
        14px;

}


#admin-support-reply-form textarea,
#admin-support-status-form select,
#admin-unified-privacy-form select,
#admin-unified-privacy-form textarea {

    width:
        100%;

}


#admin-support-reply-form textarea,
#admin-unified-privacy-form textarea {

    resize:
        vertical;

}


@media (max-width: 820px) {

    .support-request-grid,
    .support-center-layout,
    .admin-support-layout {

        grid-template-columns:
            1fr;

    }


    .support-detail-header {

        display:
            grid;

    }

}


/* =========================================================
   PASSO 5E — DASHBOARD ADMIN: SOLICITAÇÕES E ESTOQUE
   ========================================================= */

.admin-recent-requests {

    border-top:
        1px solid
        var(--border);

}


.admin-recent-request-row {

    width:
        100%;

    display:
        grid;

    grid-template-columns:
        minmax(190px, 1.4fr)
        minmax(170px, 1fr)
        minmax(150px, 0.8fr)
        minmax(150px, 0.8fr);

    gap:
        18px;

    align-items:
        center;

    padding:
        18px
        4px;

    border:
        0;

    border-bottom:
        1px solid
        var(--border);

    background:
        transparent;

    color:
        var(--text);

    text-align:
        left;

    cursor:
        pointer;

}


.admin-recent-request-row:hover {

    background:
        var(--surface-soft);

}


.admin-recent-request-main {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.admin-recent-request-main strong {

    color:
        var(--accent-dark);

    font-size:
        0.72rem;

    letter-spacing:
        0.04em;

}


.admin-recent-request-main span {

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.admin-stock-overview
.admin-section-heading-compact p {

    margin:
        6px 0
        0;

    color:
        var(--text-soft);

    font-size:
        0.82rem;

}


.admin-stock-summary-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        14px;

    margin:
        20px 0
        24px;

}


.admin-stock-summary-card {

    min-height:
        108px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    gap:
        16px;

    padding:
        18px;

    border:
        1px solid
        var(--border);

    background:
        var(--surface-soft);

}


.admin-stock-summary-card span {

    color:
        var(--text-soft);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;

}


.admin-stock-summary-card strong {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        1.8rem;

    font-weight:
        400;

}


.admin-stock-list {

    border-top:
        1px solid
        var(--border);

}


.admin-stock-row {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        100px
        150px;

    gap:
        18px;

    align-items:
        center;

    padding:
        14px
        4px;

    border-bottom:
        1px solid
        var(--border);

}


.admin-stock-row-header {

    color:
        var(--text-soft);

    font-size:
        0.7rem;

    font-weight:
        700;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;

}


.admin-stock-state {

    display:
        inline-flex;

    width:
        fit-content;

    padding:
        5px
        8px;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    font-size:
        0.75rem;

}


.admin-stock-state.stock-esgotado {

    font-weight:
        700;

}


.admin-stock-state.stock-estoque-baixo {

    font-weight:
        700;

}


@media (max-width: 1050px) {

    .admin-recent-request-row {

        grid-template-columns:
            minmax(170px, 1.4fr)
            minmax(150px, 1fr)
            minmax(140px, 0.8fr);

    }


    .admin-recent-request-row > :nth-child(4) {

        display:
            none;

    }


    .admin-stock-summary-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }

}


@media (max-width: 820px) {

    .admin-recent-request-row {

        grid-template-columns:
            minmax(0, 1fr)
            auto;

    }


    .admin-recent-request-row > :nth-child(2),
    .admin-recent-request-row > :nth-child(4) {

        display:
            none;

    }


    .admin-stock-row {

        grid-template-columns:
            minmax(0, 1fr)
            80px;

    }


    .admin-stock-row > :nth-child(3) {

        grid-column:
            1 / -1;

    }

}


@media (max-width: 560px) {

    .admin-stock-summary-grid {

        grid-template-columns:
            1fr;

    }

}

/* =========================================================
   PASSO 5F — DESCONTOS DIRETOS POR PRODUTO
   ========================================================= */

.admin-promotion-help {

    grid-column: 1 / -1;

    margin:
        -4px
        0
        20px;

    color: var(--text-soft);

    font-size: 0.9rem;

}


.admin-product-promo {

    margin-top: -4px !important;

    color: var(--accent-dark) !important;

    font-size: 0.86rem;
    font-weight: 600;

}


.order-detail-item-discount {

    display: block;

    margin-top: 3px;

    color: var(--accent-dark);

    font-size: 0.82rem;
    line-height: 1.4;

}


.admin-order-product-discount {

    display: block;

    color: var(--accent-dark) !important;

    font-weight: 600;

}


.cart-item-discount {

    margin-top: -8px;

    color: var(--accent-dark);

    font-size: 0.84rem;
    font-weight: 600;

}

.product-discount-badge {

    position: absolute;
    top: 14px;
    right: 14px;

    z-index: 2;

    padding: 6px 9px;

    border-radius: 999px;

    background: var(--surface-dark);
    color: var(--white);

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;

}


.product-price-group,
.catalog-price-group {

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    flex-shrink: 0;

    line-height: 1.35;

}


.product-price-original {

    color: var(--text-soft);

    font-size: 0.78rem;

    text-decoration: line-through;

}


.product-price-current {

    color: var(--text);

}


/* =========================================================
   PASSO 5G — ADMIN / CUPONS
   ========================================================= */

.admin-coupons-layout {

    display: grid;

    grid-template-columns:
        minmax(300px, 0.8fr)
        minmax(0, 1.2fr);

    gap: 30px;

    align-items: start;

    margin-top: 28px;

}


.admin-coupon-form-panel,
.admin-coupon-list-panel {

    padding: 28px;

    border:
        1px solid
        var(--border);

    background:
        var(--surface);

}


.admin-coupon-form-panel h3,
.admin-coupon-list-panel h3 {

    margin-bottom: 20px;

}


.admin-coupon-form {

    display: flex;

    flex-direction: column;

    gap: 16px;

}


.admin-coupon-form-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

}


.admin-coupon-form label {

    display: flex;

    flex-direction: column;

    gap: 6px;

    color:
        var(--text-soft);

    font-size: 0.76rem;

    font-weight: 600;

}


.admin-coupon-form label.full-field {

    grid-column:
        1 / -1;

}


.admin-coupon-form input,
.admin-coupon-form select,
.admin-coupon-form textarea {

    width: 100%;

    padding:
        10px
        11px;

    border:
        1px solid
        var(--border);

    background:
        var(--background);

    color:
        var(--text);

}


.admin-coupon-form-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}


.admin-coupon-list {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


.admin-coupon-card {

    padding: 18px;

    border:
        1px solid
        var(--border);

    background:
        var(--background);

}


.admin-coupon-card-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 18px;

}


.admin-coupon-code {

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 1rem;

    letter-spacing: 0.05em;

}


.admin-coupon-status-badge {

    display: inline-flex;

    padding:
        4px
        8px;

    border:
        1px solid
        var(--border);

    border-radius: 999px;

    color:
        var(--text-soft);

    font-size: 0.64rem;

    font-weight: 700;

    letter-spacing: 0.05em;

    text-transform: uppercase;

}


.admin-coupon-status-badge.is-active {

    color: #3f6844;

    border-color: #8cab91;

}


.admin-coupon-status-badge.is-expired,
.admin-coupon-status-badge.is-inactive {

    opacity: 0.75;

}


.admin-coupon-meta {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        6px
        18px;

    margin-top: 14px;

    color:
        var(--text-soft);

    font-size: 0.73rem;

}


.admin-coupon-card-actions {

    display: flex;

    gap: 10px;

    margin-top: 14px;

}


.admin-coupon-card-actions button {

    padding: 0;

    border: 0;

    background: transparent;

    color:
        var(--accent-dark);

    font-size: 0.72rem;

    font-weight: 700;

    text-decoration: underline;

    text-underline-offset: 3px;

    cursor: pointer;

}


@media (max-width: 900px) {

    .admin-coupons-layout {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 560px) {

    .checkout-coupon-controls,
    .admin-coupon-form-grid,
    .admin-coupon-meta {

        grid-template-columns:
            1fr;

    }

    .checkout-coupon-apply {

        width: 100%;

    }

}

/* =========================================================
   PASSO 5H — APRESENTAÇÃO PROMOCIONAL NA LOJA
   ========================================================= */

.promotion-section {

    border-top:
        1px solid
        var(--border);

    border-bottom:
        1px solid
        var(--border);

    background:
        var(--surface-soft);

}


.promotion-section .section-heading {

    margin-bottom: 42px;

}


.promotion-grid .product-card {

    padding: 14px;

    background:
        var(--background);

}


.promotion-grid .product-image {

    margin-bottom: 14px;

}


.promotion-grid .product-price-current,
.catalog-card .product-price-current {

    font-weight: 700;

}


.promotion-grid .product-price-original,
.catalog-card .product-price-original {

    opacity: 0.82;

}


.filter-button[data-category="promocoes"] {

    border-style: dashed;

}


.filter-button[data-category="promocoes"].active {

    border-style: solid;

}


@media (max-width: 760px) {

    .promotion-grid .product-card {

        padding: 10px;

    }

}