/*=========================================================
    ÁREA DO CLIENTE — Minha conta, pedidos, favoritos, login e checkout
    Incluído via @push('styles'), portanto carrega DEPOIS de
    mobile.css: as regras de celular destas telas ficam aqui,
    no bloco @media do fim do arquivo.
===========================================================*/

.acc-page { background: #f5f7fa; padding: 28px 0 56px; }
.acc-page h1, .acc-page h2, .acc-page h3 { margin: 0; }

.acc-eyebrow {
    display: block; margin-bottom: 2px;
    font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8;
}
.acc-title { font-size: 24px; font-weight: 800; line-height: 1.2; color: #1e293b; }
.acc-subtitle { margin: 4px 0 0; font-size: 14px; color: #64748b; }

/*------------------------------------------------------
    Cabeçalho da conta
------------------------------------------------------*/
.acc-hero {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 16px; margin-bottom: 24px;
}
.acc-hero-user { display: flex; align-items: center; gap: 14px; min-width: 0; }
.acc-avatar {
    width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary_color); color: #fff; font-size: 20px; font-weight: 700;
}

.acc-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-shortcut {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
    border: 1px solid #e2e8f0; border-radius: 999px; background: #fff;
    color: #475569; font-size: 13px; font-weight: 600; text-decoration: none;
    transition: border-color .15s, color .15s;
}
.acc-shortcut:hover, .acc-shortcut:focus { border-color: var(--primary_color); color: var(--primary_color); text-decoration: none; }
.acc-shortcut .fa { font-size: 14px; }

/*------------------------------------------------------
    Título da seção + filtros
------------------------------------------------------*/
.acc-section-head {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 12px; margin-bottom: 14px;
}
.acc-section-title { font-size: 18px; font-weight: 700; color: #1e293b; }
.acc-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.acc-filter {
    padding: 7px 14px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff;
    color: #475569; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.acc-filter span { margin-left: 4px; color: #94a3b8; font-weight: 500; }
.acc-filter:hover { border-color: #cbd5e1; }
/* escuro fixo: a cor da marca pode ser clara demais para texto branco */
.acc-filter.active { background: #1e293b; border-color: #1e293b; color: #fff; }
.acc-filter.active span { color: rgba(255, 255, 255, .7); }

/*------------------------------------------------------
    Cartões, selos e botões
------------------------------------------------------*/
.acc-card {
    margin-bottom: 16px; overflow: hidden;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.acc-card-header {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 20px; border-bottom: 1px solid #f1f5f9;
}
.acc-card-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #1e293b; }
.acc-card-title .fa { color: #94a3b8; }
.acc-card-aside { font-size: 13px; color: #94a3b8; }
.acc-card-body { padding: 16px 20px; }

.acc-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
    border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.acc-badge:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.acc-badge.tone-warning { background: #fef3c7; color: #92400e; }
.acc-badge.tone-info    { background: #dbeafe; color: #1e40af; }
.acc-badge.tone-primary { background: #ede9fe; color: #5b21b6; }
.acc-badge.tone-sky     { background: #e0f2fe; color: #075985; }
.acc-badge.tone-success { background: #dcfce7; color: #166534; }
.acc-badge.tone-danger  { background: #fee2e2; color: #991b1b; }

.acc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px; border: 1px solid transparent; border-radius: 8px;
    font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
    transition: filter .15s, background .15s, border-color .15s, color .15s;
}
.acc-btn:hover, .acc-btn:focus { text-decoration: none; }
.acc-btn-block { display: flex; width: 100%; }
.acc-btn-primary { background: var(--primary_color); color: #fff; }
.acc-btn-primary:hover, .acc-btn-primary:focus { color: #fff; filter: brightness(1.08); }
.acc-btn-whatsapp { background: #fff; border-color: #bbf7d0; color: #15803d; }
.acc-btn-whatsapp:hover, .acc-btn-whatsapp:focus { background: #f0fdf4; color: #166534; }
.acc-btn-danger-outline { background: #fff; border-color: #fecaca; color: #dc2626; }
.acc-btn-danger-outline:hover, .acc-btn-danger-outline:focus { background: #fef2f2; color: #b91c1c; }
.acc-btn-link-danger { padding-left: 0; padding-right: 0; background: none; color: #dc2626; font-weight: 600; }
.acc-btn-link-danger:hover, .acc-btn-link-danger:focus { color: #991b1b; text-decoration: underline; }

/*------------------------------------------------------
    Lista de pedidos
------------------------------------------------------*/
.acc-order-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 16px 20px 12px;
}
.acc-order-number { font-size: 16px; font-weight: 700; color: #1e293b; text-decoration: none; }
.acc-order-number:hover, .acc-order-number:focus { color: var(--primary_color); text-decoration: none; }
.acc-order-meta { margin: 2px 0 0; font-size: 13px; color: #64748b; }

.acc-order-body { display: flex; align-items: center; gap: 16px; padding: 0 20px 16px; }
.acc-thumbs { display: flex; flex-shrink: 0; }
.acc-thumb {
    width: 56px; height: 56px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff; border-radius: 10px; background: #f8fafc;
    box-shadow: 0 0 0 1px #e2e8f0; color: #94a3b8; font-size: 13px; font-weight: 700;
}
.acc-thumb + .acc-thumb { margin-left: -14px; }
.acc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.acc-order-items { flex: 1; min-width: 0; }
.acc-order-items-name {
    margin: 0; font-size: 14px; font-weight: 600; color: #334155;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acc-order-items-sub { margin: 2px 0 0; font-size: 13px; color: #94a3b8; }
.acc-order-total { flex-shrink: 0; text-align: right; }
.acc-order-total small { display: block; font-size: 12px; color: #94a3b8; }
.acc-order-total strong { font-size: 18px; color: #1e293b; }

.acc-progress { padding: 0 20px 16px; }
.acc-progress-bar { display: flex; gap: 4px; }
.acc-progress-bar i { flex: 1; height: 4px; border-radius: 2px; background: #e2e8f0; }
.acc-progress-bar i.done { background: #16a34a; }
.acc-progress-text { margin: 8px 0 0; font-size: 13px; color: #64748b; }

.acc-order-foot {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px; border-top: 1px solid #f1f5f9; background: #fbfcfd;
}
.acc-order-foot form { margin: 0; }
.acc-order-foot .acc-btn-primary { margin-left: auto; }

.acc-empty { padding: 48px 24px; text-align: center; }
.acc-empty-icon {
    width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #f1f5f9; color: #94a3b8; font-size: 30px;
}
.acc-empty h3 { margin-bottom: 6px; font-size: 18px; color: #1e293b; }
.acc-empty p { margin: 0 0 18px; font-size: 14px; color: #64748b; }

/*------------------------------------------------------
    Detalhe do pedido
------------------------------------------------------*/
.acc-back {
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
    font-size: 13px; font-weight: 600; color: #64748b; text-decoration: none;
}
.acc-back:hover, .acc-back:focus { color: var(--primary_color); text-decoration: none; }

.od-head {
    display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
    gap: 12px; margin-bottom: 20px;
}

/* Rastreio: horizontal no desktop, linha do tempo vertical no celular.
   `.line-done` pinta o traço que sai da etapa rumo à próxima. */
.od-track { padding: 24px 20px 20px; }
.od-steps { display: flex; margin: 0; padding: 0; list-style: none; }
.od-step { position: relative; flex: 1; padding: 0 6px; text-align: center; }
.od-step:after {
    content: ""; position: absolute; top: 21px; left: 50%;
    width: 100%; height: 3px; background: #e2e8f0;
}
.od-step:last-child:after { display: none; }
.od-step.line-done:after { background: #16a34a; }
.od-step-dot {
    position: relative; z-index: 1;
    width: 44px; height: 44px; margin: 0 auto 10px;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid #fff; border-radius: 50%; background: #f1f5f9;
    box-shadow: 0 0 0 1px #e2e8f0; color: #94a3b8; font-size: 17px;
}
.od-step.done .od-step-dot { background: #16a34a; box-shadow: none; color: #fff; }
.od-step.current .od-step-dot { box-shadow: 0 0 0 4px rgba(22, 163, 74, .22); }
.od-step-title { display: block; font-size: 13px; font-weight: 700; color: #94a3b8; }
.od-step.done .od-step-title { color: #1e293b; }
.od-step-date { display: block; min-height: 17px; margin-top: 2px; font-size: 12px; color: #64748b; }

.od-track-note {
    display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 0; padding: 12px 14px;
    border-radius: 10px; background: #f8fafc; color: #475569; font-size: 13px; line-height: 1.5;
}
.od-track-note .fa { margin-top: 2px; color: #16a34a; }

.od-canceled { display: flex; align-items: center; gap: 14px; }
.od-canceled-icon {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fee2e2; color: #dc2626; font-size: 20px;
}
.od-canceled h3 { margin: 0 0 2px; font-size: 16px; color: #991b1b; }
.od-canceled p { margin: 0; font-size: 13px; color: #64748b; }

.od-item { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid #f1f5f9; }
.od-item:last-child { border-bottom: none; }
.od-item-img {
    width: 64px; height: 64px; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; color: #cbd5e1; font-size: 22px;
}
.od-item-img img { width: 100%; height: 100%; object-fit: contain; }
.od-item-info { flex: 1; min-width: 0; }
.od-item-name { display: block; margin: 0 0 4px; font-size: 14px; font-weight: 600; line-height: 1.35; color: #1e293b; }
a.od-item-name:hover, a.od-item-name:focus { color: var(--primary_color); text-decoration: none; }
.od-item-unit { margin: 0; font-size: 13px; color: #94a3b8; }
.od-item-total { font-size: 15px; font-weight: 700; color: #1e293b; white-space: nowrap; }
.od-muted { margin: 0; font-size: 14px; color: #64748b; }

.od-address { display: flex; align-items: flex-start; gap: 14px; }
.od-address-icon {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: #f1f5f9; color: #475569; font-size: 18px;
}
.od-address strong { display: block; margin-bottom: 2px; font-size: 14px; color: #1e293b; }
.od-address p { margin: 0; font-size: 13px; line-height: 1.55; color: #64748b; }

.od-summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; color: #475569; }
.od-summary-row.discount { color: #16a34a; }
.od-summary-free { color: #16a34a; font-weight: 600; }
.od-coupon {
    margin-left: 6px; padding: 2px 6px; border-radius: 4px;
    background: #dcfce7; color: #166534; font-size: 11px; font-weight: 700;
}
.od-summary-total {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-top: 10px; padding-top: 14px; border-top: 1px dashed #e2e8f0;
    font-size: 15px; font-weight: 700; color: #1e293b;
}
.od-summary-total strong { font-size: 22px; }

.od-pay {
    display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px;
    border-radius: 10px; background: #f8fafc;
}
.od-pay-icon {
    width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: 16px;
}
.od-pay small { display: block; font-size: 12px; color: #94a3b8; }
.od-pay strong { font-size: 14px; color: #1e293b; }

.od-help-text { margin: 6px 0 12px; font-size: 13px; line-height: 1.5; color: #64748b; }
.od-cancel { margin: 10px 0 0; }
.od-cancel-hint { margin: 8px 0 0; font-size: 12px; color: #94a3b8; text-align: center; }

/*------------------------------------------------------
    Favoritos
------------------------------------------------------*/
/* flex para os cartões da mesma linha terem a mesma altura (as colunas do BS3 flutuam) */
.fav-grid { display: flex; flex-wrap: wrap; }
.fav-grid:before, .fav-grid:after { display: none; }
.fav-col { display: flex; margin-bottom: 20px; }
.fav-card { display: flex; flex-direction: column; width: 100%; margin-bottom: 0; transition: box-shadow .2s; }
.fav-card:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, .08); }

.fav-media { position: relative; border-bottom: 1px solid #f1f5f9; background: #fff; }
.fav-img {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1 / 1; padding: 16px; color: #cbd5e1; font-size: 36px;
}
.fav-img img { width: 100%; height: 100%; object-fit: contain; }
.fav-card.is-unavailable .fav-img img { opacity: .55; filter: grayscale(.4); }
.fav-flag { position: absolute; top: 10px; left: 10px; }

.fav-remove { position: absolute; top: 8px; right: 8px; margin: 0; }
.fav-remove button {
    width: 36px; height: 36px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #e2e8f0; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08); color: #e11d48; font-size: 16px; cursor: pointer;
    transition: background .15s, transform .15s;
}
.fav-remove button:hover, .fav-remove button:focus { background: #fff1f2; transform: scale(1.06); }

.fav-body { display: flex; flex: 1; flex-direction: column; padding: 14px 16px 16px; }
.fav-category {
    margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: #94a3b8;
}
.fav-name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 38px; font-size: 14px; font-weight: 600; line-height: 1.35; color: #1e293b; text-decoration: none;
}
.fav-name:hover, .fav-name:focus { color: var(--primary_color); text-decoration: none; }
.fav-price { margin: 10px 0 14px; }
.fav-price strong { display: block; font-size: 18px; color: #1e293b; }
.fav-price small { display: block; margin-top: 2px; font-size: 12px; color: #64748b; }
.fav-actions { margin-top: auto; }

/*------------------------------------------------------
    Entrar / criar conta
------------------------------------------------------*/
.auth-head { max-width: 640px; margin: 4px auto 24px; text-align: center; }
.auth-head .acc-title { font-size: 26px; }

.auth-grid { display: flex; align-items: flex-start; gap: 24px; max-width: 980px; margin: 0 auto; }
.auth-card { flex: 1 1 0; min-width: 0; margin-bottom: 0; padding: 28px 28px 24px; }
.auth-card-title { font-size: 18px; font-weight: 700; color: #1e293b; }
.auth-card-text { margin: 4px 0 18px; font-size: 14px; color: #64748b; }

.auth-benefits { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -6px 0 18px; padding: 0; list-style: none; }
.auth-benefits li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #475569; }
.auth-benefits .fa { color: #16a34a; }

.auth-form { margin: 0; }
.auth-field { min-width: 0; margin-bottom: 14px; }
.auth-field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #334155; }
.auth-optional { font-weight: 400; color: #94a3b8; }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.auth-label-row a { margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #64748b; }
.auth-label-row a:hover, .auth-label-row a:focus { color: var(--primary_color); }

.auth-input {
    display: block; width: 100%; height: 46px; padding: 0 14px;
    border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; box-shadow: none;
    color: #1e293b; font-size: 15px; transition: border-color .15s, box-shadow .15s;
}
.auth-input::placeholder { color: #94a3b8; }
.auth-input:focus {
    outline: none; border-color: var(--primary_color);
    box-shadow: 0 0 0 3px rgba(15, 23, 42, .08);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary_color) 22%, transparent);
}
.auth-password { position: relative; }
.auth-password .auth-input { padding-right: 46px; }
.auth-toggle {
    position: absolute; top: 0; right: 0; width: 46px; height: 46px; padding: 0;
    border: none; background: none; color: #94a3b8; font-size: 16px; cursor: pointer;
}
.auth-toggle:hover, .auth-toggle:focus { color: #1e293b; }
.auth-row { display: flex; gap: 12px; }
.auth-row > .auth-field { flex: 1 1 0; }

.auth-submit { margin-top: 6px; padding-top: 13px; padding-bottom: 13px; font-size: 15px; }
.auth-submit:disabled { opacity: .7; cursor: default; }

.auth-switch { margin: 16px 0 0; font-size: 14px; color: #64748b; text-align: center; }
.auth-switch button { padding: 0; border: none; background: none; color: var(--primary_color); font-weight: 700; }

/*------------------------------------------------------
    Checkout: entrega e pagamento
------------------------------------------------------*/
/* vários elementos daqui têm display próprio (flex), que venceria o [hidden] do Bootstrap */
.ck-page [hidden] { display: none !important; }

.acc-btn-ghost { background: #fff; border-color: #cbd5e1; color: #334155; }
.acc-btn-ghost:hover, .acc-btn-ghost:focus { border-color: #94a3b8; color: #0f172a; }

.ck-steps { display: flex; max-width: 560px; margin: 0 auto 24px; padding: 0; list-style: none; }
.ck-steps li { position: relative; flex: 1; font-size: 12px; font-weight: 600; color: #94a3b8; text-align: center; }
.ck-steps li:after {
    content: ""; position: absolute; top: 15px; left: calc(50% + 20px);
    width: calc(100% - 40px); height: 2px; background: #e2e8f0;
}
.ck-steps li:last-child:after { display: none; }
.ck-steps li.done { color: #16a34a; }
.ck-steps li.done:after { background: #16a34a; }
.ck-steps li.current { color: #1e293b; }
.ck-steps a { display: block; color: inherit; text-decoration: none; }
.ck-step-dot {
    width: 32px; height: 32px; margin: 0 auto 6px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #e2e8f0; color: #94a3b8; font-size: 13px; font-weight: 700;
}
.ck-steps li.done .ck-step-dot { background: #16a34a; color: #fff; }
.ck-steps li.current .ck-step-dot {
    background: var(--primary_color); color: #fff;
    box-shadow: 0 0 0 4px rgba(15, 23, 42, .08);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary_color) 20%, transparent);
}

.ck-head { margin-bottom: 20px; }
.ck-layout { display: flex; align-items: flex-start; gap: 24px; }
.ck-main { flex: 1 1 auto; min-width: 0; }
.ck-aside { position: sticky; top: 16px; flex: 0 0 380px; }
.ck-num {
    width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #1e293b; color: #fff; font-size: 12px;
}

/* cartões de opção (entrega e pagamento) */
.ck-options { display: flex; flex-direction: column; gap: 10px; }
.ck-option {
    display: flex; align-items: center; gap: 12px; max-width: none; margin: 0; padding: 14px 16px;
    border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; font-weight: 400; cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.ck-option:hover { border-color: #cbd5e1; }
.ck-option input[type="radio"] { flex-shrink: 0; width: 18px; height: 18px; margin: 0; accent-color: var(--primary_color); cursor: pointer; }
.ck-option.is-selected { border-color: var(--primary_color); box-shadow: 0 0 0 1px var(--primary_color); }
.ck-option.is-disabled { background: #f8fafc; cursor: not-allowed; }
.ck-option.is-disabled .ck-option-body,
.ck-option.is-disabled .ck-option-icon { opacity: .55; }
.ck-option-icon {
    width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; background: #f1f5f9; color: #475569; font-size: 17px;
}
.ck-option-body { flex: 1; min-width: 0; }
.ck-option-body strong { display: block; font-size: 14px; color: #1e293b; }
.ck-option-body small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: #64748b; }
.ck-option-aside { flex-shrink: 0; font-size: 14px; font-weight: 700; color: #1e293b; text-align: right; }
.ck-free { color: #16a34a; }
.ck-was { display: block; font-size: 12px; font-weight: 500; color: #94a3b8; text-decoration: line-through; }
.ck-free-hint { display: block; max-width: 140px; margin-top: 2px; font-size: 11px; font-weight: 600; line-height: 1.3; color: #16a34a; }
.ck-frete-hint { margin: 2px 0 8px; font-size: 12px; font-weight: 600; color: #16a34a; text-align: right; }
.ck-option-warn { display: inline-block; max-width: 120px; font-size: 12px; font-weight: 600; line-height: 1.3; color: #dc2626; }

.ck-add {
    width: 100%; margin-top: 10px; padding: 12px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px dashed #cbd5e1; border-radius: 10px; background: #fff;
    color: #475569; font-size: 14px; font-weight: 600; cursor: pointer;
}
.ck-add:hover, .ck-add:focus { border-color: var(--primary_color); color: var(--primary_color); }
.ck-new-address { margin-top: 12px; padding: 16px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }
.ck-new-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 14px; color: #1e293b; }
.ck-link { padding: 0; border: none; background: none; color: #64748b; font-size: 13px; font-weight: 600; }
.ck-link:hover, .ck-link:focus { color: var(--primary_color); text-decoration: none; }
.ck-alert {
    margin-bottom: 12px; padding: 10px 12px; border: 1px solid #fecaca; border-radius: 8px;
    background: #fef2f2; color: #b91c1c; font-size: 13px;
}
.ck-inline { display: flex; gap: 8px; }
.ck-inline .auth-input { flex: 1; min-width: 0; }
.ck-inline .acc-btn { flex-shrink: 0; }
.ck-status { margin: 6px 0 0; font-size: 13px; color: #64748b; }
.ck-status:empty { display: none; }
.ck-status.is-ok { color: #15803d; }
.ck-status.is-erro { color: #dc2626; }
.auth-row > .auth-field.ck-field-sm { flex: 0 0 130px; }
.auth-row > .auth-field.ck-field-xs { flex: 0 0 80px; }

.ck-pay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ck-pay { padding: 12px 14px; }
.ck-pay .ck-option-icon { width: 34px; height: 34px; font-size: 15px; }
.ck-pay-note { margin-top: 12px; }

/* resumo */
.ck-items { max-height: 320px; margin: 0; padding: 4px 0; overflow-y: auto; border-bottom: 1px solid #f1f5f9; list-style: none; }
.ck-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; }
.ck-item-img {
    width: 48px; height: 48px; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #cbd5e1;
}
.ck-item-img img { width: 100%; height: 100%; object-fit: contain; }
.ck-item-info { flex: 1; min-width: 0; }
.ck-item-info strong {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 13px; font-weight: 600; line-height: 1.35; color: #1e293b;
}
.ck-item-info small { display: block; margin-top: 2px; font-size: 12px; color: #94a3b8; }
.ck-item-total { font-size: 13px; font-weight: 700; color: #1e293b; white-space: nowrap; }

.ck-coupon { margin-bottom: 12px; padding-bottom: 14px; border-bottom: 1px solid #f1f5f9; }
.ck-coupon label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #334155; }
#ck-cupom { text-transform: uppercase; }
#ck-cupom::placeholder { text-transform: none; }
#ck-cupom[readonly] { background: #f0fdf4; border-color: #bbf7d0; color: #166534; font-weight: 700; }
.ck-installments { margin: 6px 0 0; font-size: 13px; color: #64748b; text-align: right; }
.ck-installments strong { color: #15803d; }
.ck-submit { margin-top: 16px; padding-top: 14px; padding-bottom: 14px; font-size: 16px; }
.ck-submit:disabled { opacity: .7; cursor: default; }
.ck-submit-hint { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: #94a3b8; text-align: center; }

/*------------------------------------------------------
    Carrinho
------------------------------------------------------*/
.cart-clear { margin-left: auto; font-size: 13px; }

.cart-list { margin: 0; padding: 0; list-style: none; }
.cart-item {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px; border-top: 1px solid #f1f5f9;
}
.cart-item:first-child { border-top: none; }

.cart-item-img {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; padding: 4px;
    border: 1px solid #e2e8f0; border-radius: 8px; background: #fff;
    color: #cbd5e1; font-size: 20px;
}
.cart-item-img img { width: 100%; height: 100%; object-fit: contain; }

.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name {
    display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: #1e293b;
}
.cart-item-name:hover, .cart-item-name:focus { color: var(--primary_color); text-decoration: none; }
.cart-item-unit { margin: 3px 0 0; font-size: 13px; color: #64748b; }
.cart-item-warn { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: #b45309; }

/* o seletor é um form: cada botão envia a própria quantidade, sem JS */
.cart-qty {
    flex-shrink: 0; display: flex; align-items: center; margin: 0;
    border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden;
}
.cart-qty-btn {
    width: 34px; height: 36px; padding: 0;
    border: none; background: #f8fafc; color: #334155;
    font-size: 16px; font-weight: 700; line-height: 1;
    transition: background .2s, color .2s;
}
.cart-qty-btn:hover:enabled, .cart-qty-btn:focus:enabled { background: #e2e8f0; color: var(--primary_color); }
.cart-qty-btn:disabled { color: #cbd5e1; cursor: default; }
.cart-qty-input {
    width: 38px; height: 36px; padding: 0;
    border: none; border-left: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0;
    background: #fff; color: #1e293b;
    font-size: 14px; font-weight: 700; text-align: center;
}

.cart-item-total { flex-shrink: 0; min-width: 92px; text-align: right; }
.cart-item-total strong { font-size: 15px; color: #1e293b; }

.cart-item-remove { flex-shrink: 0; margin: 0; }
.cart-item-remove button {
    width: 34px; height: 34px; padding: 0;
    border: 1px solid #fecaca; border-radius: 8px; background: #fff;
    color: #dc2626; font-size: 14px;
    transition: background .2s, color .2s;
}
.cart-item-remove button:hover, .cart-item-remove button:focus { background: #fef2f2; color: #b91c1c; }

.cart-foot { padding: 16px 20px; border-top: 1px solid #f1f5f9; }
.cart-next-step { color: #94a3b8; font-size: 13px; }

/* barra fixa do celular: fica acima da tab bar, nunca sobre ela */
.cart-bar {
    position: fixed; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    z-index: 1029; display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; background: #fff;
    border-top: 1px solid #e4e7ed; box-shadow: 0 -2px 10px rgba(15, 23, 42, .08);
}
.cart-bar-total { flex: 1; min-width: 0; line-height: 1.2; }
.cart-bar-total small { display: block; font-size: 11px; color: #94a3b8; }
.cart-bar-total strong { font-size: 18px; color: #1e293b; }
.cart-bar .acc-btn { flex: 0 0 auto; padding: 12px 22px; font-size: 15px; }

/*------------------------------------------------------
    Celular
------------------------------------------------------*/
@media only screen and (max-width: 767px) {
    .acc-page { padding: 16px 0 28px; }

    /* carrinho: grade fixa — a foto ocupa as duas linhas, nome e lixeira em
       cima, seletor e total embaixo. Em flex-wrap cada item quebrava num
       lugar diferente, dependendo do tamanho do nome. */
    .cart-has-bar { padding-bottom: 88px; } /* espaço para a barra fixa do total */
    .cart-item {
        display: grid; align-items: center;
        grid-template-columns: 56px minmax(0, 1fr) auto;
        grid-template-areas: "img info remove" "img qty total";
        column-gap: 12px; row-gap: 10px; padding: 14px 16px;
    }
    .cart-item-img { grid-area: img; align-self: start; width: 56px; height: 56px; }
    .cart-item-info { grid-area: info; }
    .cart-item-remove { grid-area: remove; align-self: start; }
    .cart-qty { grid-area: qty; justify-self: start; }
    .cart-item-total { grid-area: total; min-width: 0; }
    .cart-clear { margin-left: 0; padding: 0; }
    .cart-foot { padding: 14px 16px; }
    .cart-foot .acc-btn { justify-content: center; width: 100%; }
    /* o CTA vive na barra fixa; o resumo fica só com os valores */
    .cart-page .ck-aside .ck-submit { display: none; }
    .cart-page .ck-aside .ck-submit-hint { margin-top: 14px; }

    /* checkout: coluna única, resumo depois do pagamento */
    .ck-steps { margin-bottom: 16px; }
    .ck-steps li { font-size: 11px; }
    .ck-step-dot { width: 28px; height: 28px; font-size: 12px; }
    .ck-steps li:after { top: 13px; left: calc(50% + 18px); width: calc(100% - 36px); }
    .ck-head { margin-bottom: 14px; }
    .ck-layout { display: block; }
    .ck-aside { position: static; }
    .ck-option { align-items: flex-start; gap: 10px; padding: 12px; }
    .ck-option input[type="radio"] { margin-top: 1px; }
    .ck-option-icon { display: none; }
    .ck-option-aside { font-size: 13px; }
    .ck-option-warn { max-width: 90px; }
    .ck-pay-grid { gap: 8px; }
    .ck-pay { align-items: center; padding: 12px 10px; }
    .ck-pay input[type="radio"] { margin-top: 0; }
    .ck-pay .ck-option-body strong { font-size: 13px; line-height: 1.3; }
    .ck-new-address { padding: 12px; }
    .auth-row > .auth-field.ck-field-sm,
    .auth-row > .auth-field.ck-field-xs { flex: none; }
    .ck-items { max-height: none; }
    .ck-item { padding: 10px 16px; }

    /* favoritos: 2 por linha; o gutter curto vem do .mobile-grid do mobile.css */
    .fav-col { margin-bottom: 10px; }
    .fav-img { padding: 10px; }
    .fav-flag { top: 8px; left: 8px; padding: 3px 8px; font-size: 10px; }
    .fav-flag:before { display: none; }
    .fav-remove button { width: 32px; height: 32px; font-size: 14px; }
    .fav-body { padding: 10px 10px 12px; }
    .fav-category { font-size: 10px; }
    .fav-name { min-height: 35px; font-size: 13px; }
    .fav-price { margin: 6px 0 10px; }
    .fav-price strong { font-size: 16px; }
    .fav-price small { font-size: 11px; }
    .fav-actions .acc-btn { padding: 10px 8px; font-size: 13px; }

    /* login: abas no lugar dos dois cartões lado a lado */
    .auth-head { margin: 0 0 16px; text-align: left; }
    .auth-head .acc-title { font-size: 20px; }
    .auth-tabs { display: flex; gap: 4px; margin-bottom: 14px; padding: 4px; border-radius: 12px; background: #e2e8f0; }
    .auth-tab {
        flex: 1; height: 40px; border: none; border-radius: 9px; background: transparent;
        color: #475569; font-size: 14px; font-weight: 700;
    }
    .auth-tab[aria-selected="true"] { background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); color: #1e293b; }
    .auth-grid { display: block; }
    .auth-grid[data-aba-ativa="login"] .auth-card[data-aba="cadastro"],
    .auth-grid[data-aba-ativa="cadastro"] .auth-card[data-aba="login"] { display: none; }
    .auth-card { padding: 20px 16px; }
    .auth-row { flex-direction: column; gap: 0; }
    .auth-input { height: 48px; font-size: 16px; } /* 16px evita o zoom automático do iOS */
    .auth-toggle { height: 48px; }

    .acc-hero { gap: 14px; margin-bottom: 18px; }
    .acc-avatar { width: 44px; height: 44px; font-size: 17px; }
    .acc-title { font-size: 20px; }
    .acc-subtitle { font-size: 13px; }

    /* atalhos e filtros viram faixas roláveis, no mesmo padrão dos chips de categoria */
    .acc-shortcuts,
    .acc-filters {
        flex-wrap: nowrap; overflow-x: auto;
        margin: 0 -12px; padding: 0 12px 2px;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .acc-shortcuts { width: calc(100% + 24px); }
    .acc-shortcuts::-webkit-scrollbar,
    .acc-filters::-webkit-scrollbar { display: none; }
    .acc-shortcut,
    .acc-filter { flex: 0 0 auto; }

    .acc-section-head { flex-direction: column; align-items: stretch; gap: 10px; }

    .acc-card-header,
    .acc-card-body { padding-left: 16px; padding-right: 16px; }

    /* selo desce para baixo do número: lado a lado, o número quebrava e o selo vazava */
    .acc-order-head { flex-direction: column; gap: 8px; padding: 14px 16px 10px; }
    .acc-order-number { font-size: 15px; }
    .acc-order-body { flex-wrap: wrap; gap: 12px; padding: 0 16px 14px; }
    .acc-thumb { width: 48px; height: 48px; }
    .acc-order-total {
        flex: 0 0 100%; display: flex; align-items: baseline; justify-content: space-between;
        padding-top: 10px; border-top: 1px solid #f1f5f9; text-align: left;
    }
    .acc-order-total small { font-size: 13px; }
    .acc-progress { padding: 0 16px 14px; }
    .acc-order-foot { flex-direction: column-reverse; align-items: stretch; gap: 4px; padding: 12px 16px; }
    .acc-order-foot .acc-btn { width: 100%; }
    .acc-order-foot .acc-btn-primary { margin-left: 0; padding-top: 12px; padding-bottom: 12px; }

    .od-head .acc-title { font-size: 20px; }

    .od-track { padding: 18px 16px 16px; }
    .od-steps { flex-direction: column; }
    .od-step { display: flex; align-items: flex-start; gap: 12px; padding: 0 0 20px; text-align: left; }
    .od-step:last-child { padding-bottom: 0; }
    .od-step:after { top: 36px; bottom: 0; left: 17px; width: 3px; height: auto; }
    .od-step-dot { width: 36px; height: 36px; margin: 0; font-size: 14px; }
    .od-step-text { padding-top: 1px; }
    .od-step-title { font-size: 14px; }
    .od-step-date { min-height: 0; }
    .od-track-note { margin-top: 16px; }

    .od-item { align-items: flex-start; gap: 12px; padding: 12px 16px; }
    .od-item-img { width: 56px; height: 56px; }
    .od-item-total { font-size: 14px; }
    .od-summary-total strong { font-size: 20px; }
    .od-cancel .acc-btn,
    .od-help .acc-btn { padding-top: 12px; padding-bottom: 12px; }
}