/* ==========================================================================
   Couros Martins - Área do Cliente
   Camada de estilo moderna (carregada depois do tema original)
   Agência JS
   ========================================================================== */

:root{
    --brand:#471a1a;
    --brand-700:#5c2323;
    --brand-900:#2c0f0f;
    --accent:#ffbb06;
    --accent-600:#e0a204;

    --bg:#f4f1ee;
    --surface:#ffffff;
    --surface-2:#faf7f4;
    --ink:#20191a;
    --ink-2:#4a403c;
    --muted:#7d716c;
    --line:#e8e1db;

    --ok:#1f9d55;
    --danger:#d0342c;
    --info:#2b7fb8;

    --r-lg:16px;
    --r-md:12px;
    --r-sm:10px;

    --shadow-sm:0 1px 2px rgba(35,20,18,.05), 0 1px 3px rgba(35,20,18,.05);
    --shadow-md:0 6px 20px -6px rgba(35,20,18,.14);
    --shadow-lg:0 22px 48px -18px rgba(35,20,18,.32);

    --ease:.18s cubic-bezier(.4,0,.2,1);
}

/* --------------------------------------------------------------- base --- */

html{ -webkit-text-size-adjust:100%; }

body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
    background:var(--bg);
    color:var(--ink);
    font-family:"Inter","Titillium Web",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:15px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

a{ color:var(--brand); transition:color var(--ease); }
a:hover,a:focus{ color:var(--brand-700); text-decoration:none; }

::selection{ background:rgba(255,187,6,.35); }

/* elementos decorativos do tema antigo */
.zigzag-bottom{ display:none !important; }

/* ------------------------------------------------------------- header --- */

.site-branding-area{
    position:sticky;
    top:0;
    z-index:1030;
    background:transparent;
    padding:0;
    margin:0;
}

.js-header{
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--line);
}

.js-header__inner{
    display:flex;
    align-items:center;
    gap:18px;
    min-height:76px;
}

.js-brand{ display:inline-flex; align-items:center; }
.js-brand img{ height:46px; width:auto; display:block; }

.js-nav{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:4px;
}

.js-nav a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 15px;
    border-radius:999px;
    font-size:14px;
    font-weight:600;
    color:var(--ink-2);
    white-space:nowrap;
    transition:background var(--ease), color var(--ease);
}
.js-nav a i{ font-size:13px; opacity:.7; }
.js-nav a:hover{ background:var(--surface-2); color:var(--brand); }
.js-nav a.is-active{ background:var(--brand); color:#fff; }
.js-nav a.is-active i{ color:var(--accent); opacity:1; }

.js-nav__user{
    border:1px solid var(--line);
    background:var(--surface);
}
.js-nav__exit{ color:var(--muted); }
.js-nav__exit:hover{ background:#fdeceb; color:var(--danger); }

.js-nav__toggle{
    display:none;
    margin-left:auto;
    width:44px;
    height:44px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface);
    color:var(--brand);
    font-size:17px;
    line-height:1;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    padding:0;
}

/* --------------------------------------------------------------- hero --- */

.product-big-title-area{
    position:relative;
    overflow:hidden;
    background:linear-gradient(115deg,#2c0f0f 0%,#471a1a 52%,#63292a 100%);
}
.product-big-title-area:before{
    content:"";
    position:absolute;
    inset:0;
    background:url("../img/crossword.png") repeat 0 0;
    opacity:.10;
}
.product-big-title-area:after{
    content:"";
    position:absolute;
    right:-90px;
    top:-140px;
    width:340px;
    height:340px;
    border-radius:50%;
    background:radial-gradient(circle at center,rgba(255,187,6,.28),transparent 68%);
}
.product-big-title-area .container{ position:relative; z-index:2; }

.product-bit-title h2{
    font-family:inherit;
    font-size:34px;
    font-weight:700;
    letter-spacing:-.02em;
    color:#fff;
    padding:38px 0 40px;
    margin:0;
}
.product-bit-title h2:after{
    content:"";
    display:block;
    width:54px;
    height:3px;
    border-radius:3px;
    margin:16px auto 0;
    background:var(--accent);
}

/* --------------------------------------------------------- área útil --- */

body > *{ flex-shrink:0; }

.single-product-area{
    flex:1 0 auto;
    padding:34px 0 72px;
    background:transparent;
}

/* rodapé sempre no fim da página, mesmo com pouco conteúdo */
.footer-top-area{ margin-top:auto; }

/* --------------------------------------------------- menu do cliente --- */

#menu{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    padding:10px;
    box-shadow:var(--shadow-sm);
    position:sticky;
    top:96px;
    margin-bottom:24px;
}

#menu .list-group-item{
    display:flex;
    align-items:center;
    gap:11px;
    border:0;
    border-radius:11px;
    padding:11px 14px;
    margin:0;
    background:transparent;
    color:var(--ink-2);
    font-size:14px;
    font-weight:600;
    transition:background var(--ease), color var(--ease);
}
#menu .list-group-item i{
    width:18px;
    text-align:center;
    font-size:14px;
    color:var(--brand);
    opacity:.55;
}
#menu .list-group-item:hover{ background:var(--surface-2); color:var(--brand); }
#menu .list-group-item:hover i{ opacity:.9; }
#menu .list-group-item.is-active{
    background:var(--brand);
    color:#fff;
    box-shadow:var(--shadow-sm);
}
#menu .list-group-item.is-active i{ color:var(--accent); opacity:1; }
#menu .list-group-item:last-child{
    margin-top:6px;
    border-top:1px solid var(--line);
    border-radius:0 0 11px 11px;
    padding-top:14px;
    color:var(--muted);
}
#menu .list-group-item:last-child:hover{ background:#fdeceb; color:var(--danger); }
#menu .list-group-item:last-child:hover i{ color:var(--danger); }

/* -------------------------------------------------- título de seção --- */

.cart-collaterals{
    overflow:visible;
    margin-bottom:18px;
}
.cart-collaterals h2{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    font-size:23px;
    font-weight:700;
    letter-spacing:-.015em;
    text-transform:none;
    color:var(--ink);
    margin:0;
}
.cart-collaterals h2 .pull-right{
    float:none !important;
    margin-left:auto;
}
.cart-collaterals h2 .pull-right .form-control{ min-width:230px; }

/* --------------------------------------------------------------- card --- */

.js-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-sm);
    padding:26px 22px 22px;
    margin-bottom:22px;
}

/* -------------------------------------------------------- formulários --- */

.js-form{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-sm);
    padding:26px 12px 20px;
    margin-bottom:26px;
    overflow:hidden;
}

.form-group{ margin-bottom:18px; }

label{
    display:block;
    font-size:12px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:7px;
}

.form-control{
    height:46px;
    padding:10px 14px;
    font-size:15px;
    color:var(--ink);
    background-color:#fff;
    border:1px solid var(--line);
    border-radius:var(--r-sm);
    box-shadow:none;
    transition:border-color var(--ease), box-shadow var(--ease);
}
.form-control:focus{
    border-color:var(--brand);
    box-shadow:0 0 0 4px rgba(71,26,26,.10);
    outline:0;
}
.form-control::placeholder{ color:#b3a9a3; }
.form-control[disabled],.form-control[readonly]{ background:var(--surface-2); color:var(--muted); }

select.form-control{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    padding-right:40px;
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%237d716c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
}
select.form-control::-ms-expand{ display:none; }

textarea.form-control{ height:auto; min-height:120px; padding-top:12px; }

/* opções em formato de chip */
.radio-inline,.checkbox-inline{
    display:inline-flex !important;
    align-items:center;
    gap:9px;
    padding:9px 15px !important;
    margin:0 8px 8px 0 !important;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
    color:var(--ink);
    font-size:14px;
    font-weight:600;
    line-height:1.1;
    text-transform:none;
    letter-spacing:0;
    cursor:pointer;
    transition:border-color var(--ease), background var(--ease), box-shadow var(--ease);
}
.radio-inline input[type="radio"],
.checkbox-inline input[type="checkbox"]{
    position:static !important;
    margin:0 !important;
    width:16px;
    height:16px;
    accent-color:var(--brand);
    cursor:pointer;
}
.radio-inline:hover,.checkbox-inline:hover{ border-color:#c9bcb4; background:var(--surface-2); }
.radio-inline:has(input:checked),
.checkbox-inline:has(input:checked){
    border-color:var(--brand);
    background:rgba(71,26,26,.055);
    box-shadow:inset 0 0 0 1px var(--brand);
    color:var(--brand);
}

/* blocos condicionais (aparecem conforme a escolha) */
#mostrabordado,#mostra1,#mostra2,#mostra3,#mostra4,#mostra5,
#mostra6,#mostra7,#mostra8,#mostra9,#mostra10,#mostra11{
    clear:both;
    overflow:hidden;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-left:3px solid var(--accent);
    border-radius:var(--r-md);
    padding:18px 4px 2px;
    margin:0 15px 20px;
}

/* seletor de concessionária do pedido */
.loja-picker{ clear:both; }
.loja-picker .form-group{
    background:linear-gradient(180deg,#fffdf7,#fff8e8);
    border:1px solid #f2e2b6;
    border-radius:var(--r-md);
    padding:16px 18px 14px;
    margin-bottom:22px;
}
.loja-picker label{ color:#8a6a12; }
.loja-picker .form-control{ background:#fff; border-color:#eddcb2; }
.loja-picker small{
    display:block;
    margin-top:8px;
    font-size:12.5px;
    color:#94773a;
}

/* barra de ação do formulário */
.js-actions{
    clear:both;
    display:flex;
    justify-content:flex-end;
    gap:10px;
    border-top:1px solid var(--line);
    margin:6px 15px 0;
    padding-top:20px;
}
.js-actions .btn{ float:none !important; }
.js-form button[type="submit"]{
    padding:14px 30px;
    font-size:15px;
    border-radius:var(--r-md);
}

/* ------------------------------------------------------------ botões --- */

.btn{
    border-radius:var(--r-sm);
    border:1px solid transparent;
    padding:11px 18px;
    font-size:14px;
    font-weight:600;
    line-height:1.3;
    box-shadow:var(--shadow-sm);
    transition:background var(--ease), border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.btn:focus,.btn:active:focus{ outline:0; box-shadow:0 0 0 4px rgba(71,26,26,.14); }
.btn:hover{ box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(1px); }

.btn-primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{ background:var(--brand-700); border-color:var(--brand-700); color:#fff; }

.btn-success{ background:var(--ok); border-color:var(--ok); color:#fff; }
.btn-success:hover,.btn-success:focus,.btn-success:active{ background:#1b8749; border-color:#1b8749; color:#fff; }

.btn-info{ background:var(--info); border-color:var(--info); color:#fff; }
.btn-info:hover,.btn-info:focus,.btn-info:active{ background:#256d9e; border-color:#256d9e; color:#fff; }

.btn-danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn-danger:hover,.btn-danger:focus,.btn-danger:active{ background:#b52c25; border-color:#b52c25; color:#fff; }

.btn-default{ background:#fff; border-color:var(--line); color:var(--ink-2); }
.btn-default:hover,.btn-default:focus{ background:var(--surface-2); border-color:#d6cabf; color:var(--brand); }

.btn-xs{ padding:6px 11px; font-size:12px; border-radius:8px; }
.btn-sm{ padding:8px 14px; font-size:13px; }

/* ------------------------------------------------------------ alertas --- */

.alert{
    border:0;
    border-left:4px solid transparent;
    border-radius:var(--r-md);
    padding:14px 18px;
    font-size:14.5px;
    box-shadow:var(--shadow-sm);
    margin-bottom:20px;
}
.alert-success{ background:#eaf7ef; border-color:#2ea25f; color:#186b3a; }
.alert-danger{ background:#fdeceb; border-color:var(--danger); color:#9b2620; }
.alert-info{ background:#eaf2f9; border-color:var(--info); color:#1d5f8a; }
.alert-warning{ background:#fff8e6; border-color:var(--accent-600); color:#8a6a12; }

/* ------------------------------------------------- barra de pesquisa --- */

.box-header{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-sm);
    padding:16px 8px 4px;
    margin-bottom:20px;
}
.box-header .box-tools{ float:none; }
.box-header .form-group{ margin-bottom:10px; }
.box-header .input-group-sm > .form-control{
    height:44px;
    font-size:14.5px;
    border-radius:var(--r-sm) 0 0 var(--r-sm);
}
.box-header .input-group-btn .btn{
    height:44px;
    border-radius:0 var(--r-sm) var(--r-sm) 0;
    padding:0 18px;
}

/* ------------------------------------------------------------ tabelas --- */

.js-table{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-sm);
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin-bottom:24px;
}
.js-table > .table{ margin-bottom:0; }

.table{ background:transparent; }
.table > thead > tr > th{
    background:var(--surface-2);
    border-bottom:1px solid var(--line);
    padding:14px 16px;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted);
    white-space:nowrap;
}
.table > tbody > tr > td,
.table > tbody > tr > th{
    padding:15px 16px;
    border-top:1px solid var(--line);
    vertical-align:middle;
    font-size:14.5px;
    color:var(--ink-2);
}
.table > tbody > tr > th{ font-weight:700; color:var(--brand); white-space:nowrap; }
.table > tbody > tr:first-child > td,
.table > tbody > tr:first-child > th{ border-top:0; }
.table > tbody > tr:hover{ background:#fdfbf9; }
.table .btn-xs{ margin-left:4px; }

/* selo de status */
.js-status{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    background:var(--surface-2);
    border:1px solid var(--line);
    font-size:12.5px;
    font-weight:600;
    color:var(--ink-2);
    white-space:nowrap;
}

/* ---------------------------------------------------------------login --- */

#login-form-wrap{
    max-width:440px;
    margin:0 auto 30px;
    padding:36px 32px 28px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:var(--shadow-lg);
    text-align:left;
}
#login-form-wrap h2{
    font-size:24px;
    font-weight:700;
    letter-spacing:-.02em;
    color:var(--ink);
    margin:0 0 6px;
    text-transform:none;
}
#login-form-wrap > p{
    color:var(--muted);
    font-size:14px;
    margin-bottom:4px;
}
#login-form-wrap .form-row{ margin-bottom:16px; }
#login-form-wrap label{ margin-bottom:7px; }
#login-form-wrap .required{ color:var(--danger); }
#login-form-wrap .input-text{
    width:100% !important;
    height:48px;
    padding:10px 14px;
    font-size:15px;
    color:var(--ink);
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--r-sm);
    transition:border-color var(--ease), box-shadow var(--ease);
    margin-bottom:0 !important;
}
#login-form-wrap .input-text:focus{
    border-color:var(--brand);
    box-shadow:0 0 0 4px rgba(71,26,26,.10);
    outline:0;
}
#login-form-wrap .button{
    display:block;
    width:100%;
    height:50px;
    background:var(--brand);
    border:0;
    border-radius:var(--r-md);
    color:#fff;
    font-size:15px;
    font-weight:700;
    letter-spacing:.02em;
    box-shadow:var(--shadow-md);
    transition:background var(--ease), transform var(--ease);
}
#login-form-wrap .button:hover{ background:var(--brand-700); }
#login-form-wrap .button:active{ transform:translateY(1px); }
#login-form-wrap .lost_password{ text-align:center; margin:16px 0 0; }
#login-form-wrap .lost_password a{ font-size:14px; font-weight:600; color:var(--brand); }

/* medidor de forca da nova senha (tela de redefinicao) */
#login-form-wrap .senha-forca{ margin:0 0 18px; text-align:left; }
#login-form-wrap .senha-forca__barra{
    height:6px;
    border-radius:99px;
    background:#e7e0da;
    overflow:hidden;
}
#login-form-wrap .senha-forca__barra span{
    display:block;
    width:0;
    height:100%;
    border-radius:99px;
    background:#c0392b;
    transition:width .18s ease, background .18s ease;
}
#login-form-wrap .senha-forca__barra .nivel-3{ background:#e0a800; }
#login-form-wrap .senha-forca__barra .nivel-4{ background:#2e7d32; }
#login-form-wrap .senha-regras{
    margin:10px 0 0;
    padding:0;
    list-style:none;
    font-size:13px;
    color:var(--muted);
}
#login-form-wrap .senha-regras li{ position:relative; padding-left:20px; line-height:1.9; }
#login-form-wrap .senha-regras li:before{
    content:"○";
    position:absolute;
    left:2px;
    color:#b5aaa3;
}
#login-form-wrap .senha-regras li.ok{ color:#2e7d32; }
#login-form-wrap .senha-regras li.ok:before{ content:"✓"; color:#2e7d32; font-weight:700; }

/* manter conectado: fica entre a senha e o botao de entrar */
#login-form-wrap .js-login-manter{ margin-bottom:14px; text-align:left; }
/* o label dos campos e caixa-alta; aqui e uma opcao, entao volta ao normal */
#login-form-wrap .js-login-manter label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:0;
    font-size:14px;
    font-weight:500;
    letter-spacing:0;
    text-transform:none;
    color:var(--ink);
    cursor:pointer;
}
#login-form-wrap .js-login-manter input[type="checkbox"]{
    width:16px;
    height:16px;
    margin:0;
    accent-color:var(--brand);
}

.js-login-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    margin-bottom:18px;
    border-radius:16px;
    background:linear-gradient(140deg,var(--brand),var(--brand-900));
    color:var(--accent);
    font-size:20px;
    box-shadow:var(--shadow-md);
}

/* -------------------------------------------------------------- rodapé --- */

.footer-top-area{ background:transparent; }

.footer-bottom-area{
    background:var(--brand-900);
    padding:26px 0;
    border:0;
}
.footer-bottom-area .copyright p{
    margin:0;
    font-size:13.5px;
    color:rgba(255,255,255,.68);
}
.footer-bottom-area .copyright a{ color:var(--accent); font-weight:600; }

/* ---------------------------------------------------------- responsivo --- */

@media (max-width:991px){
    #menu{ position:static; }
}

@media (max-width:767px){
    .js-header__inner{ min-height:64px; flex-wrap:wrap; }
    .js-brand img{ height:38px; }

    .js-nav__toggle{ display:inline-flex; }
    .js-nav{
        display:none;
        order:3;
        width:100%;
        flex-direction:column;
        align-items:stretch;
        gap:2px;
        margin:0 0 12px;
        padding-top:8px;
        border-top:1px solid var(--line);
    }
    .js-nav.is-open{ display:flex; }
    .js-nav a{ border-radius:var(--r-sm); padding:13px 14px; }

    .product-bit-title h2{ font-size:25px; padding:26px 0 28px; }
    .product-bit-title h2:after{ margin-top:12px; }

    .single-product-area{ padding:22px 0 50px; }

    .cart-collaterals h2{ font-size:19px; }
    .cart-collaterals h2 .pull-right{ width:100%; margin-left:0; }
    .cart-collaterals h2 .pull-right .form-control{ min-width:0; width:100%; }

    /* formulários longos em coluna única no celular */
    .js-form [class*="col-xs-"]{ width:100%; float:none; }

    .js-form{ padding:20px 8px 16px; }
    .js-actions{ margin:6px 15px 0; }
    .js-actions .btn{ width:100%; }

    #mostrabordado,#mostra1,#mostra2,#mostra3,#mostra4,#mostra5,
    #mostra6,#mostra7,#mostra8,#mostra9,#mostra10,#mostra11{ margin:0 15px 18px; }

    .table > thead > tr > th,
    .table > tbody > tr > td,
    .table > tbody > tr > th{ white-space:nowrap; }

    #login-form-wrap{ padding:28px 20px 22px; }
}

@media print{
    .js-header,.product-big-title-area,#menu,.footer-bottom-area,.js-actions{ display:none !important; }
    .single-product-area{ padding:0; }
    .js-card,.js-form,.js-table{ box-shadow:none; border-color:#ddd; }
}

/* ======================================================= detalhe do pedido === */

#order_review_heading{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    font-size:20px;
    font-weight:700;
    letter-spacing:-.01em;
    color:var(--ink);
    text-transform:none;
    margin:0 0 4px !important;
}
#order_review_heading .pull-right{ float:none !important; margin-left:auto; }

#order_review{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-sm);
    padding:22px 8px 12px;
    overflow:hidden;
}
#order_review h2{
    clear:both;
    font-size:17px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--brand);
    margin:8px 15px 16px;
}
#order_review hr{ border-top:1px solid var(--line); margin:16px 15px; }
#order_review .form-group{
    margin-bottom:12px;
    font-size:14.5px;
    color:var(--ink);
}
#order_review .form-group label{
    display:inline;
    margin:0;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--muted);
}
#order_review img{ border-radius:var(--r-sm); }

#payment{
    clear:both;
    border-top:1px solid var(--line);
    margin:10px 15px 0;
    padding-top:18px;
    overflow:hidden;
}

/* botão genérico do tema (imprimir, login) */
.button{
    display:inline-block;
    padding:12px 24px;
    background:var(--brand);
    border:0;
    border-radius:var(--r-sm);
    color:#fff;
    font-size:14px;
    font-weight:600;
    box-shadow:var(--shadow-sm);
    transition:background var(--ease), box-shadow var(--ease), transform var(--ease);
}
.button:hover{ background:var(--brand-700); color:#fff; box-shadow:var(--shadow-md); }
.button:active{ transform:translateY(1px); }

/* ============================================================ upload === */

input[type="file"].form-control{
    height:auto;
    padding:11px 14px;
    line-height:1.4;
    background:var(--surface-2);
}
.js-card .box-body{ padding:0; }
.js-card .box-footer{
    border-top:1px solid var(--line);
    margin-top:6px;
    padding-top:18px;
    background:transparent;
}

@media print{
    #payment,#botaoarquivo{ display:none !important; }
    #order_review{ box-shadow:none; border-color:#ddd; }
}

/* =============================================== ajustes finais de layout === */

/* títulos de seção dentro do formulário longo */
.js-form h2{
    clear:both;
    font-size:17px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--brand);
    margin:6px 15px 18px;
}
.js-form hr{
    clear:both;
    border-top:1px solid var(--line);
    margin:8px 15px 18px;
}
.js-form br{ line-height:0; }

/* coluna de ações das listagens não quebra linha */
.js-table td:last-child{ white-space:nowrap; }
.js-table td:last-child .btn{ margin-bottom:0; }

/* mensagens das telas centralizadas (login / recuperar senha) */
.single-product-area .col-md-12.text-center > .alert{
    max-width:440px;
    margin:0 auto 20px;
    text-align:left;
}

/* menu do cliente vira faixa de atalhos no tablet/celular */
@media (max-width:991px){
    #menu{
        display:flex;
        gap:8px;
        padding:8px;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
    #menu .list-group-item{
        flex:0 0 auto;
        border-radius:999px;
        padding:9px 14px;
        font-size:13px;
        white-space:nowrap;
        background:var(--surface-2);
    }
    #menu .list-group-item:last-child{
        margin-top:0;
        padding-top:9px;
        border-top:0;
        border-radius:999px;
    }
    #menu .list-group-item i{ width:auto; }
}

/* barra de ação dentro de card simples (sem grade de colunas) */
.js-card .js-actions{ margin:6px 0 0; }
.js-card hr{ border-top:1px solid var(--line); margin:4px 0 18px; }