/* ======================================
   ORDER DETAILS
====================================== */

.order-details-page {
    padding: 80px 0;
}

.order-details-container {
    width: min(1200px, 90%);
    margin: 0 auto;
}

.order-details-heading {
    margin-bottom: 50px;
}

.order-details-heading p {
    font-size: 0.8rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #777;
}

.order-details-heading h1 {
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: .9;
    text-transform: uppercase;
    margin: 20px 0;
}

.order-summary-card {
    background: #fff;
    border-radius: 28px;
    padding: 40px;
    border: 1px solid #e5e5e5;
}

.order-summary-grid {
    display:grid;
    grid-template-columns:
    repeat(3,1fr);
    gap:20px;
}

.order-summary-item {
    background:#f5f5f2;
    padding:25px;
    border-radius:18px;
}

.order-summary-item span {
    display:block;
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#777;
    margin-bottom:10px;
}

.order-summary-item strong {
    font-size:1.3rem;
    text-transform:uppercase;
}

/* ======================================
   ORDER DETAILS
====================================== */

.account-page {
    padding: 80px 0;
}

.account-container {
    width: min(1200px, 90%);
    margin: 0 auto;
}

.account-heading {
    margin-bottom: 50px;
}

.account-heading p {
    font-size: .75rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #777;
}

.account-heading h1 {
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: .95;
    text-transform: uppercase;
    margin: 20px 0;
}

.account-card {
    background:#fff;
    border-radius:28px;
    padding:32px;
    border:1px solid #e5e5e5;
    margin-bottom:30px;
}

.account-card-heading h2 {
    font-size:2rem;
    text-transform:uppercase;
    margin-bottom:30px;
}

.account-stats {
    display:grid;
    grid-template-columns:
    repeat(3,1fr);
    gap:20px;
}

.account-stats > div {
    background:#f5f5f2;
    padding:20px;
    border-radius:18px;
}

.account-stats span {
    display:block;
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#777;
    margin-bottom:10px;
}

.account-stats strong {
    font-size:1.4rem;
    text-transform:uppercase;
}

/* ======================================
   ORDER DETAILS - FIX CONTRASTE
====================================== */

.account-stats > div strong {
    color:#111;
}

.account-stats > div span {
    color:#777;
}

.account-card {
    color:#111;
}

.account-card h2 {
    color:#111;
}

/* ======================================
   ORDER ITEMS
====================================== */

.order-items-list{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.order-item-card{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#f5f5f2;
    border-radius:20px;
    padding:28px;
}

.order-item-info{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.order-item-info strong{
    font-size:1.1rem;
    color:#111;
}

.order-item-info span{
    color:#777;
    font-size:.9rem;
}

.order-item-price{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
}

.order-item-price span{
    font-size:.8rem;
    color:#777;
    text-transform:uppercase;
    letter-spacing:2px;
}

.order-item-price strong{
    font-size:1.3rem;
    color:#111;
}

/* ======================================
   ORDER ADDRESS
====================================== */

.order-address-card{
    background:#f5f5f2;
    border-radius:20px;
    padding:30px;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.order-address-card strong{
    font-size:1.1rem;
    color:#111;
}

.order-address-card span{
    color:#555;
    font-size:.95rem;
}

/* ======================================
   ORDER TIMELINE
====================================== */

.order-timeline{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.timeline-item{
    display:flex;
    gap:18px;
}

.timeline-dot{
    width:14px;
    height:14px;
    border-radius:50%;
    background:#111;
    margin-top:6px;
}

.timeline-content{
    background:#f5f5f2;
    padding:20px;
    border-radius:18px;
    flex:1;
}

.timeline-content strong{
    display:block;
    text-transform:uppercase;
    font-size:.9rem;
}

.timeline-content span{
    color:#777;
    font-size:.8rem;
}

.timeline-content p{
    margin-top:8px;
    color:#555;
}

/* ======================================
   ORDER TIMELINE
====================================== */

.order-timeline{
    display:flex;
    flex-direction:column;
    gap:28px;
    margin-top:30px;
}

.timeline-item{
    display:flex;
    gap:20px;
}

.timeline-dot{
    width:16px;
    height:16px;
    background:#111;
    border-radius:50%;
    margin-top:8px;
    flex-shrink:0;
}

.timeline-content{
    background:#f5f5f2;
    padding:24px 28px;
    border-radius:22px;
    flex:1;
}

.timeline-content strong{
    display:block;
    font-size:1rem;
    text-transform:uppercase;
    margin-bottom:8px;
}

.timeline-content span{
    font-size:.8rem;
    color:#777;
}

.timeline-content p{
    margin-top:12px;
    color:#555;
}

.account-sidebar-divider{
    height:1px;
    background:#e8e8e8;
    margin:20px 0;
}

.account-logout-form{
    width:100%;
}

.account-logout-button{
    width:100%;
    border:none;
    background:#111;
    color:white;
    padding:14px 18px;
    border-radius:999px;
    font-weight:700;
    cursor:pointer;
    transition:.3s ease;
}

.account-logout-button:hover{
    background:#d60000;
    transform:translateY(-2px);
}

/* ======================================
   AJUSTE FINAL - MINHA CONTA PRINCIPAL
====================================== */

.account-home-page .account-container {
    width: min(1450px, 94%);
    max-width: 1450px;
}

.account-home-page .account-layout {
    gap: 40px;
}

.account-home-page .account-content {
    flex: 1;
}

.account-home-page .account-card {
    padding: 34px;
}

.account-home-page .account-heading h1 {
    max-width: none;
    font-size: clamp(
        4rem,
        6vw,
        6rem
    );
    line-height: .95;
    white-space: nowrap;
}

.account-home-page .account-sidebar {
    min-width: 300px;
}

/* ======================================
   BOTÃO VOLTAR - DETALHES DO PEDIDO
====================================== */

.account-back-button {

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:30px;

    color:#555;

    font-size:.85rem;

    font-weight:600;

    text-decoration:none;

    transition:.3s ease;

}


.account-back-button:hover {

    color:#111;

    transform:translateX(-4px);

}

/* ======================================
   FAVORITES PAGE - WISC ACCOUNT
====================================== */

.favorites-account-card {
    min-height: 520px;
}

.favorites-account-card .account-card-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-bottom:34px;
}

.favorites-back-store {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:13px 22px;
    border-radius:999px;

    background:#111;
    color:#fff;

    text-decoration:none;
    font-size:.75rem;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;

    transition:.25s ease;
}

.favorites-back-store:hover {
    transform:translateY(-2px);
    background:#222;
}

.favorites-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:26px;
}

.favorite-card {
    background:#f6f6f2;
    border:1px solid #e5e5e0;
    border-radius:26px;
    overflow:hidden;

    transition:.3s ease;
}

.favorite-card:hover {
    transform:translateY(-4px);
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.favorite-card-image {
    position:relative;

    /*
       Fase 10.5.17 — a caixa volta a ser deitada.

       Nos favoritos a foto e' a LARGA, com frente e costas na mesma
       imagem (image_role "pair"). Uma caixa vertical deixaria a peca
       minuscula no meio de duas faixas de fundo.

       Esta e' a unica tela que usa essa foto. Catalogo, home e pagina
       do produto continuam com as verticais, e nada aqui as alcanca:
       a regra e' de .favorite-card-image, classe que so' existe no
       card de favorito.
    */
    height:clamp(200px, 22vw, 268px);

    background:linear-gradient(
        145deg,
        #f8f8f4,
        #e8e8e2
    );

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
}

.favorite-card-image img {
    width:100%;
    height:100%;

    /*
       "contain" mostra as duas peças inteiras. "cover" cortaria
       justamente as bordas, que e' onde as mangas ficam.
    */
    object-fit:contain;
    object-position:center;

    padding:12px;
    display:block;
}

.favorite-card-placeholder {
    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:1.4rem;
    font-weight:900;
    letter-spacing:8px;
    color:#111;
}

.favorite-card-heart {
    position:absolute !important;
    top:18px !important;
    right:18px !important;
}

.favorite-card-info {
    padding:26px;
}

.favorite-card-info p {
    margin:0 0 8px;

    font-size:.7rem;
    font-weight:900;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#777;
}

.favorite-card-info h3 {
    margin:0 0 18px;

    font-size:1.15rem;
    line-height:1.25;
    color:#111;
}

.favorite-card-price {
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-bottom:22px;
}

.favorite-card-price strong {
    font-size:1.1rem;
    color:#111;
}

.favorite-card-price span {
    font-size:.9rem;
    color:#555;
}

.favorite-card-info > a {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:100%;

    padding:14px 18px;
    border-radius:999px;

    background:#111;
    color:#fff;

    text-decoration:none;
    font-size:.72rem;
    font-weight:900;
    letter-spacing:2px;
    text-transform:uppercase;

    transition:.25s ease;
}

.favorite-card-info > a:hover {
    background:#222;
    transform:translateY(-2px);
}

.favorites-empty-state {
    min-height:360px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;

    padding:60px 30px;

    background:#f6f6f2;
    border:1px solid #e5e5e0;
    border-radius:26px;
}

.favorites-empty-state span {
    font-size:3rem;
    margin-bottom:18px;
}

.favorites-empty-state strong {
    font-size:1.4rem;
    color:#111;
    margin-bottom:10px;
}

.favorites-empty-state p {
    max-width:430px;
    color:#666;
    line-height:1.6;
    margin-bottom:24px;
}

.favorites-empty-state a {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:14px 24px;
    border-radius:999px;

    background:#111;
    color:#fff;

    text-decoration:none;
    font-size:.75rem;
    font-weight:900;
    letter-spacing:2px;
    text-transform:uppercase;
}

@media(max-width:900px) {
    .favorites-grid {
        grid-template-columns:1fr;
    }

    .favorites-account-card .account-card-heading {
        align-items:flex-start;
        flex-direction:column;
    }
}

/* ======================================
   FAVORITES PAGE - ACCOUNT LAYOUT FIX
====================================== */

.favorites-page {
    padding-top: 90px;
}

.favorites-page .account-container {
    width: min(1320px, 92%);
}

.favorites-page .account-heading {
    margin-bottom: 44px;
}

.favorites-page .account-heading h1 {
    font-size: clamp(4rem, 7vw, 6.6rem);
    line-height: .9;
    color: #fff;
}

.favorites-page .account-heading p,
.favorites-page .account-heading span {
    color: rgba(255,255,255,.78);
}

.favorites-page .account-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}

.favorites-page .account-sidebar {
    background: #fff;
    border: 1px solid #e8e8e4;
    border-radius: 28px;
    padding: 28px;
    color: #111;
}

.favorites-page .account-user {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e7e7e2;
    margin-bottom: 24px;
}

.favorites-page .account-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #111;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 900;
}

.favorites-page .account-user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.favorites-page .account-user-info strong {
    color: #111;
    font-size: .95rem;
}

.favorites-page .account-user-info span {
    color: #666;
    font-size: .78rem;
    word-break: break-word;
}

.favorites-page .account-user-info small {
    color: #999;
    font-size: .68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.favorites-page .account-sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.favorites-page .account-sidebar nav a {
    display: flex;
    align-items: center;

    padding: 14px 16px;
    border-radius: 999px;

    color: #333;
    text-decoration: none;
    font-weight: 800;
    font-size: .9rem;

    transition: .25s ease;
}

.favorites-page .account-sidebar nav a:hover,
.favorites-page .account-sidebar nav a.active {
    background: #111;
    color: #fff;
}

.favorites-page .account-sidebar-divider {
    height: 1px;
    background: #e7e7e2;
    margin: 16px 0;
}

.favorites-page .account-logout-button {
    width: 100%;
    border: none;
    background: #111;
    color: #fff;

    padding: 14px 18px;
    border-radius: 999px;

    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    cursor: pointer;
    transition: .25s ease;
}

.favorites-page .account-logout-button:hover {
    background: #d60000;
    transform: translateY(-2px);
}

.favorites-page .account-content {
    min-width: 0;
}

.favorites-page .account-card {
    background: #fff;
    border-radius: 30px;
    border: 1px solid #e7e7e2;
    padding: 34px;
    color: #111;
}

@media(max-width: 980px) {
    .favorites-page .account-layout {
        grid-template-columns: 1fr;
    }
}

/* ======================================
   FAVORITES FINAL POLISH
====================================== */

.favorites-card-subtitle {
    display:block;
    margin-top:8px;

    color:#666;
    font-size:.92rem;
    line-height:1.5;
}

.favorites-page .favorites-grid {
    margin-top:10px;
}

.favorites-page .favorite-card {
    background:#f7f7f3;
}

.favorites-page .favorite-card-info h3 {
    min-height:48px;
}

.favorites-page .favorite-card-info > a {
    margin-top:auto;
}

.favorites-page .favorite-card-info {
    min-height:210px;
    display:flex;
    flex-direction:column;
}

.favorites-page .favorite-card-price {
    margin-top:auto;
}

.favorites-heading-actions {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.favorites-back-account {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:13px 22px;
    border-radius:999px;

    background:#f1f1ed;
    color:#111;

    text-decoration:none;
    font-size:.75rem;
    font-weight:900;
    letter-spacing:2px;
    text-transform:uppercase;

    transition:.25s ease;
}

.favorites-back-account:hover {
    transform:translateY(-2px);
    background:#e7e7df;
}

/* ======================================
   ACCOUNT MOBILE FINAL FIX
====================================== */

@media(max-width: 760px) {

    .account-page {
        padding: 46px 0 70px;
        overflow-x: hidden;
    }

    .account-container,
    .account-home-page .account-container,
    .favorites-page .account-container {
        width: min(100% - 28px, 100%);
        max-width: 100%;
        margin: 0 auto;
    }

    .account-heading {
        margin-bottom: 32px;
    }

    .account-heading h1,
    .account-home-page .account-heading h1,
    .favorites-page .account-heading h1 {
        white-space: normal;
        max-width: 100%;

        font-size: clamp(3rem, 15vw, 4.5rem);
        line-height: .88;

        overflow-wrap: normal;
        word-break: normal;
    }

    .account-heading span,
    .account-home-page .account-heading span,
    .favorites-page .account-heading span {
        display: block;
        max-width: 100%;
        font-size: .95rem;
        line-height: 1.6;
    }

    .account-layout,
    .account-home-page .account-layout,
    .favorites-page .account-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 22px;
        width: 100%;
    }

    .account-sidebar,
    .account-home-page .account-sidebar,
    .favorites-page .account-sidebar {
        width: 100%;
        min-width: 0;
        max-width: 100%;

        border-radius: 24px;
        padding: 24px;
    }

    .account-user,
    .favorites-page .account-user {
        align-items: center;
    }

    .account-user-info {
        min-width: 0;
    }

    .account-user-info span {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .account-content,
    .account-home-page .account-content,
    .favorites-page .account-content {
        width: 100%;
        min-width: 0;
    }

    .account-card,
    .favorites-page .account-card {
        width: 100%;
        border-radius: 24px;
        padding: 24px;
    }

    .account-stats {
        grid-template-columns: 1fr;
    }

    .account-orders {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .account-order-item {
        grid-template-columns: 1fr;
        gap: 14px;
        align-items: flex-start;
    }

    .favorites-account-card .account-card-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .favorites-heading-actions {
        width: 100%;
    }

    .favorites-heading-actions a {
        width: 100%;
    }

    .favorites-grid {
        grid-template-columns: 1fr;
    }
}

/* ======================================
   FAVORITES REMOVE BUTTON
====================================== */

.favorite-remove-button {
    position: static !important;

    width: 100% !important;
    height: auto !important;

    margin-top: 12px;
    padding: 13px 18px !important;

    border-radius: 999px !important;
    border: 1px solid rgba(0,0,0,.12) !important;

    background: #f1f1ed !important;
    color: #111 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    font-size: .72rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;

    cursor: pointer;

    transition: .25s ease !important;
}

.favorite-remove-button .favorite-icon {
    width: 16px !important;
    height: 16px !important;

    fill: #111 !important;
    stroke: #111 !important;
}

.favorite-remove-button:hover {
    background: #111 !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
}

.favorite-remove-button:hover .favorite-icon {
    fill: #fff !important;
    stroke: #fff !important;
}

/* ======================================
   FAVORITES MOBILE TITLE FIX
====================================== */

@media(max-width:760px){

    .favorites-page .account-heading h1{

        white-space:normal;

        font-size:
        clamp(3rem,12vw,4.2rem);

        line-height:.9;

        max-width:100%;

    }


    .favorites-page .account-heading{

        overflow:hidden;

    }


}

/* ======================================
   ACCOUNT SIDEBAR USER NAME FIX
====================================== */

.account-user {
    display: flex;
    align-items: center;
    gap: 16px;
}

.account-user-info {
    min-width: 0;
    flex: 1;
}

.account-user-info strong {
    display: block;

    max-width: 100%;

    font-size: .95rem;
    line-height: 1.25;

    overflow-wrap: anywhere;
    word-break: normal;
}

.account-user-info span {
    display: block;

    max-width: 100%;

    font-size: .78rem;
    line-height: 1.35;

    overflow-wrap: anywhere;
    word-break: break-word;
}

.account-user-info small {
    display: block;
    margin-top: 4px;
}

/* ======================================
   CHANGE PASSWORD
====================================== */

.account-back-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:24px;
    color:#111;
    text-decoration:none;
    font-size:.9rem;
    font-weight:600;
    transition:.25s ease;
}

.account-back-link:hover{
    opacity:.65;
}

.password-card{
    max-width:520px;
}

.password-card form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.password-card button{
    margin-top:10px;
    height:48px;
    border:none;
    border-radius:12px;
    background:#111;
    color:white;
    font-weight:700;
    cursor:pointer;
    transition:.25s ease;
}

.password-card button:hover{
    transform:translateY(-2px);
    opacity:.9;
}

/* ======================================
   CHANGE PASSWORD WISC
====================================== */

.password-card{
    max-width:560px;
}

.password-card form{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.password-field{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.password-field label{
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:#111;
}

.password-field input{
    width:100%;
    height:52px;
    border-radius:14px;
    border:1px solid #ddd;
    padding:0 18px;
    font-size:1rem;
    background:#fff;
    transition:.25s ease;
}

.password-field input:focus{
    outline:none;
    border-color:#111;
    box-shadow:
    0 0 0 3px rgba(0,0,0,.08);
}

.password-card button{
    margin-top:8px;
    height:52px;
    border-radius:14px;
    background:#111;
    color:#fff;
    border:none;
    font-weight:700;
    letter-spacing:.12em;
    cursor:pointer;
    transition:.25s ease;
}

.password-card button:hover{
    transform:translateY(-2px);
    opacity:.9;
}

.auth-message.success{
    padding:16px;
    border-radius:14px;
    background:#f1f1ed;
    font-weight:600;
}

.auth-message.error{
    padding:16px;
    border-radius:14px;
    background:#fff0f0;
    color:#8b0000;
    font-weight:600;
}


/* ================================================================
   WISC — ORDER DETAILS RESPONSIVO
   Fase 10.7.11.4.1

   Tudo escopado em .order-details-page de proposito: essa pagina
   NAO carrega auth.css (o controller nao manda pageCss), entao as
   regras precisam morar aqui. O escopo tambem garante que elas nao
   vazem para /minha-conta nem para a tela de senha.
================================================================ */

.order-details-page .account-content{
    display:grid;
    gap:20px;
}

.order-details-page .account-card{
    margin-bottom:0;
}

.order-details-page .timeline-content{
    min-width:0;
}

.order-details-page .timeline-content strong,
.order-details-page .timeline-content p,
.order-details-page .order-item-info strong,
.order-details-page .order-address-card span{
    overflow-wrap:anywhere;
}


@media(max-width:768px){

    .order-details-page.account-page{
        padding:112px 0 60px;
    }

    .order-details-page .account-container{
        width:min(1200px, 100% - 24px);
    }

    .order-details-page .account-back-button{
        margin-bottom:22px;
        font-size:.82rem;
    }


    /* --- cabecalho --- */

    .order-details-page .account-heading{
        margin-bottom:28px;
    }

    .order-details-page .account-heading p{
        font-size:.66rem;
        letter-spacing:.24em;
    }

    .order-details-page .account-heading h1{
        font-size:clamp(2rem,8vw,2.8rem);
        margin:14px 0;
        overflow-wrap:anywhere;
    }

    .order-details-page .account-heading span{
        font-size:.9rem;
    }


    /* --- cards --- */

    .order-details-page .account-card{
        padding:20px 16px;
        border-radius:22px;
    }

    .order-details-page .account-card-heading p{
        font-size:.62rem;
        letter-spacing:.22em;
    }

    .order-details-page .account-card-heading h2{
        font-size:1.15rem;
        letter-spacing:.04em;
        margin-bottom:18px;
    }


    /* --- resumo: 3 colunas viram 1 --- */

    .order-details-page .account-stats{
        grid-template-columns:minmax(0,1fr);
        gap:10px;
    }

    .order-details-page .account-stats div{
        padding:14px 16px;
        min-width:0;
    }

    .order-details-page .account-stats span{
        font-size:.64rem;
        letter-spacing:.18em;
    }

    .order-details-page .account-stats strong{
        font-size:1rem;
        overflow-wrap:anywhere;
    }


    /* --- itens do pedido --- */

    .order-details-page .order-items-list{
        gap:14px;
    }

    .order-details-page .order-item-card{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
        padding:18px 16px;
        border-radius:18px;
    }

    .order-details-page .order-item-info strong{
        font-size:.96rem;
    }

    .order-details-page .order-item-info span{
        font-size:.8rem;
    }

    .order-details-page .order-item-price{
        align-items:flex-start;
    }

    .order-details-page .order-item-price span{
        font-size:.66rem;
        letter-spacing:.12em;
    }

    .order-details-page .order-item-price strong{
        font-size:1.05rem;
    }


    /* --- endereco --- */

    .order-details-page .order-address-card{
        padding:18px 16px;
        border-radius:18px;
        gap:8px;
    }

    .order-details-page .order-address-card strong{
        font-size:.96rem;
    }

    .order-details-page .order-address-card span{
        font-size:.85rem;
    }


    /* --- linha do tempo --- */

    .order-details-page .order-timeline{
        gap:18px;
        margin-top:20px;
    }

    .order-details-page .timeline-item{
        gap:12px;
    }

    .order-details-page .timeline-dot{
        width:12px;
        height:12px;
        margin-top:6px;
        flex-shrink:0;
    }

    .order-details-page .timeline-content{
        flex:1;
        min-width:0;
        padding:16px 14px;
        border-radius:16px;
    }

    .order-details-page .timeline-content strong{
        font-size:.78rem;
        letter-spacing:.05em;
        line-height:1.45;
    }

    .order-details-page .timeline-content span{
        font-size:.74rem;
    }

    .order-details-page .timeline-content p{
        margin-top:6px;
        font-size:.85rem;
        line-height:1.6;
    }

}


@media(max-width:390px){

    .order-details-page.account-page{
        padding:106px 0 48px;
    }

    .order-details-page .account-container{
        width:min(1200px, 100% - 20px);
    }

    .order-details-page .account-heading h1{
        font-size:1.75rem;
    }

    .order-details-page .account-card{
        padding:18px 13px;
    }

    .order-details-page .account-card-heading h2{
        font-size:1.02rem;
        margin-bottom:16px;
    }

    .order-details-page .account-stats div{
        padding:13px 14px;
    }

    .order-details-page .order-item-card,
    .order-details-page .order-address-card{
        padding:16px 13px;
    }

    .order-details-page .timeline-item{
        gap:10px;
    }

    .order-details-page .timeline-content{
        padding:14px 12px;
    }

    .order-details-page .timeline-content strong{
        font-size:.72rem;
        letter-spacing:.03em;
    }

    .order-details-page .timeline-content p{
        font-size:.82rem;
    }

}


/* ================================================================
   AVISOS DE PAGAMENTO NO PEDIDO — Fase 10.6.1
================================================================ */

.order-payment-aviso{
    grid-column:1 / -1;
    margin-bottom:18px;
    padding:18px 20px;

    border-radius:18px;
    background:#f8f8f6;
    border:1px solid rgba(0,0,0,.09);
}

.order-payment-aviso strong{
    display:block;
    margin-bottom:6px;

    font-family:var(--font-title);
    font-size:.74rem;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#111;
}

.order-payment-aviso p{
    font-size:.9rem;
    line-height:1.6;
    color:#555;
}

/* Esperando confirmacao: amarelo de "em andamento", nao de erro. */
.order-payment-aviso-espera{
    background:#fdf8ee;
    border-color:rgba(160,120,20,.22);
}

.order-payment-aviso-espera strong{ color:#6d5310; }
.order-payment-aviso-espera p{ color:#7a5c12; }

.order-payment-aviso-ok{
    background:rgba(30,58,43,.06);
    border-color:rgba(30,58,43,.22);
}

.order-payment-aviso-ok strong{ color:var(--color-green-deep); }

.order-payment-aviso a{
    color:var(--color-green-deep);
    font-weight:600;
}

.order-payment-aviso button{
    margin-top:14px;
    min-height:48px;
    padding:14px 28px;

    border:none;
    border-radius:999px;
    background:#050505;
    color:#fff;

    font-family:var(--font-title);
    font-size:.74rem;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;

    cursor:pointer;
    transition:background .22s ease;
}

.order-payment-aviso button:hover{ background:#2a2a2a; }

.order-payment-aviso button:focus-visible{
    outline:2px solid var(--color-gold);
    outline-offset:3px;
}


/* ==================================================================
   RASTREIO NA TELA DO CLIENTE — Frenet · Fase B2 · 13/09/2026

   Reaproveita .order-payment-aviso (o bloco de largura inteira dentro
   de .account-stats, com grid-column:1/-1). Aqui so' entram as
   diferencas: a cor por situacao e a caixinha do codigo.

   Nao ha' cor de ERRO em nenhuma situacao. Nenhuma delas e' culpa do
   cliente nem problema dele: ou o pedido esta' a caminho, ou vai ser
   entregue em maos, ou ainda esta' sendo preparado.
================================================================== */

/* A caminho: verde da marca, o mesmo do "pagamento confirmado". */
.order-rastreio.order-rastreio-codigo {
    background: rgba(30, 58, 43, .06);
    border-color: rgba(30, 58, 43, .22);
}

.order-rastreio.order-rastreio-codigo strong {
    color: var(--color-green-deep);
}

/* Entrega propria e "ainda preparando": neutro. Nao e' novidade, e' o
   estado normal do pedido. */
.order-rastreio.order-rastreio-propria,
.order-rastreio.order-rastreio-aguardando {
    background: #f8f8f6;
}

/* Saiu e o numero nao foi lancado: amarelo de "em andamento", o mesmo
   do "estamos confirmando seu pagamento". E' uma pendencia nossa, e a
   cor admite isso sem alarmar. */
.order-rastreio.order-rastreio-enviado-sem-codigo {
    background: #fdf8ee;
    border-color: rgba(160, 120, 20, .22);
}

.order-rastreio.order-rastreio-enviado-sem-codigo strong {
    color: #6d5310;
}

/* ------------------------------------------------------------------
   A CAIXINHA DO CODIGO

   O codigo existe para ser COPIADO e colado no site dos Correios, ou
   digitado no celular. Por isso vem em <code>, com fonte monoespacada:
   em fonte de texto, 0 e O, 1 e l se confundem -- e um caractere
   errado devolve "objeto nao encontrado", que o cliente le' como
   "meu pedido sumiu".

   user-select:all faz um toque (ou um clique) selecionar o codigo
   inteiro, em vez de obrigar a arrastar o dedo sobre 13 caracteres.
------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   CHAMAVA-SE .order-rastreio-codigo E COLIDIA — 14/09/2026

   O <div> do bloco recebe a classe do TIPO: order-rastreio-<tipo>.
   Quando o tipo e' "codigo", ele vira .order-rastreio-codigo -- que
   era exatamente o nome que este <p> de dentro usava.

   Duas coisas diferentes com o mesmo nome. O efeito pratico:

       .order-rastreio-codigo span { ... }

   deixava de valer so' para o rotulo do numero e passava a valer para
   QUALQUER span dentro do bloco inteiro. Hoje nao quebrava nada,
   porque nao existe outro span ali -- era uma armadilha para quem
   acrescentasse o proximo.

   Agora o <p> se chama .order-rastreio-numero: o bloco e' o "codigo",
   o pedaco de dentro e' o "numero".
------------------------------------------------------------------ */
.order-rastreio-numero {
    margin-top: 12px;
}

.order-rastreio-numero span {
    display: block;
    margin-bottom: 6px;

    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #777;
}

.order-rastreio-numero code,
.account-order-rastreio code {
    display: inline-block;
    padding: 10px 14px;

    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .12);

    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1rem;
    letter-spacing: .08em;
    color: #111;

    user-select: all;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------
   A FAIXA DE ENVIO NA LISTA DE PEDIDOS

   grid-column: 1/-1 e' o que faz este bloco ocupar uma linha inteira
   por baixo das quatro colunas do .account-order-item, em vez de
   disputar uma coluna com elas. Ver o comentario em
   account-orders.ejs: o grid tem exatamente quatro colunas, e este
   elemento e' condicional.

   A borda de cima e' o que diz "isto pertence ao pedido acima", e nao
   e' um pedido novo.
------------------------------------------------------------------ */
.account-order-rastreio {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.account-order-rastreio span {
    display: block;
    margin-bottom: 6px;

    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .15em;
    opacity: .6;
}

.account-order-rastreio strong {
    display: block;
    font-size: 15px;
    line-height: 1.45;

    /* frase de uma situacao sem codigo ("A WISC entrega em maos") nao
       pode estourar a caixa em 390px */
    overflow-wrap: anywhere;
}

.account-order-rastreio code {
    font-size: .92rem;
    padding: 8px 12px;
}

/* ==================================================================
   CANCELAR O PEDIDO E PAGAR NA LISTA — Fases A.1 e A.2 · 19/09/2026
================================================================== */

/* ------------------------------------------------------------------
   O <details> do cancelamento.

   Ele vive DENTRO do .order-payment-aviso, junto do botao de pagar.
   A linha de cima o separa sem criar um segundo card: as duas saidas
   do pedido pendente sao a mesma decisao, e nao dois assuntos.

   Nada aqui compete com o "Pagar agora": sem fundo, sem borda, texto
   menor e cinza. Cancelar tem que estar disponivel, nao convidativo.
------------------------------------------------------------------ */
.order-cancelar{
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid rgba(0,0,0,.09);
}

.order-cancelar summary{
    cursor:pointer;
    width:fit-content;

    font-size:.86rem;
    color:#6f6f68;
    text-decoration:underline;
    text-underline-offset:3px;
}

.order-cancelar summary:hover{ color:#444; }

/* O foco pelo teclado precisa aparecer: e o unico jeito de quem nao
   usa mouse saber onde esta antes de abrir uma acao irreversivel. */
.order-cancelar summary:focus-visible{
    outline:2px solid #111;
    outline-offset:3px;
    border-radius:4px;
}

.order-cancelar p{
    margin:14px 0 16px 0;
    font-size:.88rem;
    line-height:1.6;
    color:#666;
}

/* ------------------------------------------------------------------
   A caixa de confirmacao.

   DUAS ARMADILHAS JA' CONHECIDAS DESTE PROJETO, evitadas aqui:

   1. MAIUSCULA VAZADA. Em 13/09/2026 uma frase inteira saiu em caixa
      alta no admin porque ".admin-status-form label" (0,1,1) ganhava
      de ".admin-status-note" (0,1,0). Aqui a classe esta' NO PROPRIO
      label e o texto tem text-transform:none escrito, para nao
      depender de nenhuma regra de fora continuar como esta' hoje.

   2. ITEM FLEX ANONIMO. Texto solto dentro de um flex vira uma coluna
      separada, e a frase quebra letra a letra numa tira estreita. Por
      isso o texto esta' num <span>, que e' quem recebe o flex:1 e o
      min-width:0.
------------------------------------------------------------------ */
label.order-cancelar-confirma{
    display:flex;
    align-items:flex-start;
    gap:10px;

    margin-bottom:16px;
    cursor:pointer;

    text-transform:none;
    letter-spacing:normal;
}

label.order-cancelar-confirma input{
    flex:none;
    width:18px;
    height:18px;
    margin-top:1px;
    accent-color:#8a2b2b;
    cursor:pointer;
}

label.order-cancelar-confirma span{
    flex:1;
    min-width:0;

    font-family:var(--font-body, inherit);
    font-size:.88rem;
    font-weight:400;
    line-height:1.5;
    color:#555;
    text-transform:none;
    letter-spacing:normal;
}

/* ------------------------------------------------------------------
   O botao.

   Vermelho escuro, contornado e nao preenchido. Acao destrutiva tem
   que ser reconhecivel sem ser o elemento mais pesado da tela -- o
   mais pesado continua sendo o "Pagar agora", que e' o que a WISC
   quer que aconteca.

   min-height:44px porque em 390px o dedo precisa de alvo, e alvo
   pequeno em botao que nao se desfaz e' erro esperando acontecer.
------------------------------------------------------------------ */
.order-cancelar-botao{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:44px;
    padding:12px 22px;

    border:1px solid rgba(138,43,43,.45);
    border-radius:8px;
    background:transparent;

    font-family:var(--font-title, inherit);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:#8a2b2b;

    cursor:pointer;
    transition:background .18s ease, color .18s ease;
}

.order-cancelar-botao:hover{
    background:#8a2b2b;
    color:#fff;
}

.order-cancelar-botao:focus-visible{
    outline:2px solid #8a2b2b;
    outline-offset:3px;
}

/* O recado depois do cancelamento herda o card de aviso e so' troca
   a cor, para nao existir um quarto desenho de caixa nesta tela. */
.order-cancelar-recado{
    background:#f6f6f4;
    border-color:rgba(0,0,0,.12);
}

/* ------------------------------------------------------------------
   PAGAR AGORA NA LISTA — A.2

   grid-column:1 / -1 pelo mesmo motivo do .account-order-rastreio: o
   .account-order-item tem EXATAMENTE quatro colunas para quatro
   filhos, e este bloco e' condicional. Ocupando a linha inteira como
   ultimo filho, as quatro colunas de cima ficam intactas.

   Se um dia os dois blocos aparecerem juntos (pedido pendente que ja'
   tem envio), eles empilham -- cada um na sua faixa.
------------------------------------------------------------------ */
.account-order-pagar{
    grid-column:1 / -1;
    margin-top:4px;
    padding-top:16px;
    border-top:1px solid rgba(0,0,0,.08);

    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
}

.account-order-pagar span{
    flex:1;
    min-width:0;

    font-size:.88rem;
    line-height:1.45;
    color:#6f6f68;
}

.account-order-pagar form{ flex:none; }

.account-order-pagar button{
    min-height:44px;
    padding:12px 22px;

    border:none;
    border-radius:8px;
    background:#111;

    font-family:var(--font-title, inherit);
    font-size:.76rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:#fff;

    cursor:pointer;
}

.account-order-pagar button:hover{ background:#000; }

.account-order-pagar button:focus-visible{
    outline:2px solid #111;
    outline-offset:3px;
}

/* Em 390px o texto e o botao nao cabem lado a lado: o flex-wrap ja'
   quebra, e aqui o botao passa a ocupar a largura toda em vez de
   ficar uma ilha estreita no canto. */
@media (max-width: 480px){

    .account-order-pagar{ gap:14px; }

    .account-order-pagar span{ flex:1 1 100%; }

    .account-order-pagar form{ flex:1 1 100%; }

    .account-order-pagar button{ width:100%; }

    .order-cancelar-botao{ width:100%; }
}

/* ==================================================================
   O CANAL HUMANO NO PEDIDO PAGO — Fase A.4 · 20/09/2026

   Pedido pago nao tem botao de cancelar, e isso e' decisao, nao
   esquecimento: pode ter NF-e autorizada, estoque baixado, dinheiro a
   estornar e peca na rua.

   Mas "sem botao" nao pode parecer "sem saida". Este bloco e' a
   saida -- e por isso ele NAO se esconde como o cancelar do pedido
   pendente: aqui o objetivo e' que a pessoa ache, nao que ela pense
   duas vezes. Falar com gente nao e' acao irreversivel.

   Fundo verde WISC em vez do cinza dos outros avisos: ele nao e'
   alerta, e' convite.
================================================================== */
.order-ajuda{
    background:rgba(30,58,43,.05);
    border-color:rgba(30,58,43,.18);
}

.order-ajuda strong{ color:var(--color-green-deep, #1e3a2b); }

.order-ajuda-botao{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:44px;
    margin-top:14px;
    padding:12px 24px;

    border-radius:8px;
    background:var(--color-green-deep, #1e3a2b);

    font-family:var(--font-title, inherit);
    font-size:.76rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:#fff;
    text-decoration:none;
}

.order-ajuda-botao:hover{ opacity:.88; }

.order-ajuda-botao:focus-visible{
    outline:2px solid var(--color-green-deep, #1e3a2b);
    outline-offset:3px;
}

/* A letra miuda vem DEPOIS do botao e menor que o resto: ela informa
   quem ja' decidiu falar, nao disputa a decisao. */
.order-ajuda .order-ajuda-rodape{
    margin-top:14px;
    font-size:.82rem;
    color:#5a6b60;
}

.order-ajuda .order-ajuda-rodape a{
    color:inherit;
    text-decoration:underline;
    text-underline-offset:2px;
}

@media (max-width: 480px){
    .order-ajuda-botao{ width:100%; }
}

/* ==================================================================
   TROCAR O ENDERECO — Fase A.3 · 20/09/2026
================================================================== */

/* O link fica entre o "Pagar agora" e o "Não quero mais este pedido":
   e' a saida do MEIO -- menos definitiva que cancelar, menos urgente
   que pagar. A ordem na tela e' a ordem da decisao. */
.order-trocar-endereco{
    margin-top:16px;
    font-size:.88rem;
    color:#6f6f68;
}

.order-trocar-endereco a{
    color:#2b2b2b;
    font-weight:600;
    text-decoration:underline;
    text-underline-offset:3px;
}

/* ------------------------------------------------------------------
   O aviso da recusa, na tela de trocar.

   Amarelo de "olha isto", e nao vermelho de erro: a pessoa nao errou
   nada -- ela pediu uma coisa que vira um pedido novo. Vermelho aqui
   faria parecer defeito do site.
------------------------------------------------------------------ */
.troca-endereco-aviso{
    margin-bottom:24px;
    padding:18px 20px;

    border-radius:14px;
    background:#fdf8ee;
    border:1px solid rgba(160,120,20,.24);
}

.troca-endereco-aviso strong{
    display:block;
    margin-bottom:8px;

    font-family:var(--font-title, inherit);
    font-size:.74rem;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#6d5310;
}

.troca-endereco-aviso p{
    font-size:.92rem;
    line-height:1.65;
    color:#7a5c12;
}

.troca-endereco-saidas{ margin-top:14px; }

.troca-endereco-saidas a{
    font-size:.88rem;
    font-weight:600;
    color:#6d5310;
    text-decoration:underline;
    text-underline-offset:3px;
}

.troca-endereco-form{ max-width:520px; }

.troca-endereco-rodape{
    margin-top:18px;
    font-size:.84rem;
    line-height:1.6;
    color:#6f6f68;
}

.troca-endereco-rodape a{
    color:#2b2b2b;
    text-decoration:underline;
    text-underline-offset:2px;
}