/* Mobile (a maioria dos acessos é por celular, então isso é prioridade, não
   um ajuste cosmético por último). Breakpoint em 720px: acima disso o menu
   cabe inteiro numa linha só (mesmo o de staff, o mais cheio); abaixo disso
   colapsa num menu hamburger — ver .nav-toggle/.nav-links acima e o JS em
   base.html. */
@media (max-width: 720px) {
    /* Campos compactos (filtros, edição em massa) também vão a 16px no celular:
       abaixo disso o iPhone dá zoom ao tocar no campo. */
    .product-filters .pf-number,
    .product-filters .pf-select,
    .bulk-select {
        font-size: 16px;
    }

    .cart-checkout-actions .btn-checkout {
        display: block;
        text-align: center;
    }

    /* Logo, carrinho e ☰ ficam sempre na mesma linha (nowrap) e o menu aberto
       é um painel sobreposto logo abaixo do cabeçalho (position: absolute). Antes
       o painel fazia parte do fluxo do <nav>: abrir o menu ou um grupo mudava a
       largura do <nav>, que pulava para baixo do logo — o ☰ e o carrinho mudavam
       de lugar a cada toque. */
    .header-inner {
        padding: 0.6rem 1rem;
        position: relative;
        flex-wrap: nowrap;
    }

    .site-header nav {
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: var(--space-2);
    }

    /* Com "Comprar" e "Alugar" na barra, o carrinho fica só com o ícone e o número no celular. */
    .nav-cart-label {
        display: none;
    }

    .brand img {
        height: 44px;
    }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
    }

    .nav-search-label {
        display: none;
    }

    .nav-search-form {
        left: 1rem;
        right: 1rem;
        width: auto;
    }

    /* Submenus de "Comprar"/"Alugar" da equipe: painel sobre a linha do cabeçalho, na largura toda. */
    .nav-split {
        position: static;
    }

    .nav-split-toggle {
        padding: 0.5rem 0.4rem;
    }

    .nav-split-menu {
        left: 1rem;
        right: 1rem;
        top: calc(100% + 4px);
        padding-top: 0;
        min-width: 0;
        max-height: calc(100vh - 5rem);
        overflow-y: auto;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    }

    .nav-links {
        display: none;
        position: absolute;
        top: calc(100% + 4px);  /* abaixo da borda dourada do cabeçalho */
        left: 0;
        right: 0;
        z-index: 60;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: 0.9rem 1rem 1.1rem;
        background: var(--navy);
        border-bottom: 4px solid var(--gold);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
        max-height: calc(100vh - 5rem);
        overflow-y: auto;
    }

    .nav-links.nav-links-open {
        display: flex;
    }

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

    .nav-logout {
        width: 100%;
        text-align: left;
    }

    /* No desktop é um dropdown flutuante; empilhado dentro do menu mobile
       ele fica melhor como uma lista simples abaixo do "Cadastros". */
    .nav-dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        padding: 0.25rem 0 0 0.75rem;
        min-width: 0;
    }

    main {
        padding: 0 1rem 2.5rem;
    }

    .hero {
        margin: 1.25rem 0;
    }

    .hero-slide {
        min-height: 300px;
        padding: 1.75rem 1.75rem 4rem;
        align-items: flex-start;
    }

    .hero-text h2 {
        font-size: var(--fs-2xl);
    }

    .page-header {
        padding: 1rem 1.25rem;
        margin: 1.25rem 0;
    }

    .product-detail {
        padding: 1.25rem;
    }

    .product-detail-main {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .dashboard-card {
        min-width: 0;
        flex: 1 1 100%;
    }

    /* Consolidado do painel: o total em linha própria e os demais lado a lado (menos rolagem no celular). */
    #consolidated { gap: var(--space-2); }
    #consolidated .dashboard-card { flex: 1 1 calc(50% - .6rem); padding: .8rem 1rem; }
    #consolidated .dashboard-card:first-child { flex-basis: 100%; }
    #consolidated .dashboard-card-value { font-size: var(--fs-xl); }

    .order-timeline {
        flex-direction: column;
        gap: 0;
    }

    .order-timeline-step {
        min-height: 4.5rem;
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }

    .order-timeline-step::before {
        top: auto;
        right: auto;
        bottom: 50%;
        left: calc(1rem - 1.5px);
        width: 3px;
        height: 100%;
    }

    .order-timeline-content {
        margin: 0.2rem 0 0 0.75rem;
        padding: 0;
    }

    /* Estilo "Amazon" no mobile: card vira uma linha (imagem pequena à
       esquerda, informações à direita) em vez de empilhar a imagem acima —
       mostra mais produtos por rolagem e ainda reconhecível de relance. No
       desktop o card continua com a imagem quadrada inteira acima do texto
       (regra fora deste media query). */
    .product-card {
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }

    .product-card-image {
        width: 6.5rem;
        max-width: none;
        margin: 0;
        aspect-ratio: 1 / 1;
        flex-shrink: 0;
        padding: 0.5rem;
    }

    .product-card-body {
        flex: 1;
        min-width: 0;
        padding: 0.75rem 0.9rem;
    }
}

/* Lista de pedidos do staff: seções por prioridade (orders/staff_board.py) */
.order-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 1rem 0;
}

.order-summary-chip {
    background: #F5F2E9;
    border-radius: var(--radius-pill);
    padding: 0.4rem 0.9rem;
    font-size: var(--fs-md);
}

.order-summary-chip--attention {
    background: #FCEFC7;
    color: var(--warn);
}

.order-section {
    margin: 1.5rem 0;
}

.order-section h3,
.order-section > summary {
    font-size: var(--fs-lg);
    font-weight: 700;
}

.order-section > summary {
    cursor: pointer;
    padding: 0.5rem 0;
}

.order-section--attention {
    border-left: 4px solid var(--gold-dark);
    padding-left: 0.9rem;
}

.order-section-count {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0 0.45rem;
    margin-left: 0.35rem;
    border-radius: var(--radius-pill);
    background: var(--navy);
    color: #fff;
    font-size: var(--fs-sm);
    text-align: center;
}

.order-row--attention td:first-child {
    font-weight: 700;
}

.order-row-email,
.order-row-action {
    display: block;
    color: #6B665A;
    font-size: var(--fs-sm);
}

.order-row-action {
    color: var(--gold-dark);
    font-weight: 600;
}

/* Avisos push do staff (static/js/staff-push.js) */
.push-settings {
    background: #F5F2E9;
    border-radius: var(--radius-sm);
    padding: 0.9rem 1rem;
    margin: 1rem 0;
}

.push-settings [hidden] {
    display: none !important;
}

.push-settings p {
    margin: 0.25rem 0;
}

.push-settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: 0.5rem;
}

/* Tela de precificação: filtros, ordenação e barra de salvar única */
.pricing-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin: 1rem 0 0.35rem;
}

.pricing-filter {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--navy);
}

.pricing-filter input,
.pricing-filter select {
    min-width: 10rem;
}

.pricing-count {
    margin: 0 0 0.75rem;
    color: #6B6357;
    font-size: var(--fs-sm);
}

.pricing-errors {
    background: #FDE5E1;
    color: #A62A1E;
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.9rem;
    margin: 0.75rem 0;
    font-weight: 600;
}

.pricing-errors ul {
    margin: 0;
    padding-left: 1.1rem;
}

.pricing-required {
    color: #A62A1E;
    font-weight: 700;
}

.pricing-row[hidden] {
    display: none;
}

.pricing-row--changed td {
    background: #FFF8DC;
}

.pricing-card-price {
    color: #6B6357;
}

.pricing-clear-hint {
    display: block;
    margin-top: 0.25rem;
    color: #6B6357;
    font-size: var(--fs-xs);
}

/* "Renovar": pílula pequena ao lado da situação da oferta, com contraste
   próprio (texto navy sobre fundo claro; navy com texto branco quando marcada). */
.renew-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--navy);
    font-size: var(--fs-xs);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.renew-toggle input {
    width: auto;
    margin: 0;
    padding: 0;
}

.renew-toggle:has(input:checked) {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.pricing-bulk-renew {
    margin: 0 0 0.5rem;
}

.btn-small {
    padding: 0.3rem 0.7rem;
    font-size: var(--fs-sm);
}

.sort-button {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}

.sort-button::after {
    content: " " attr(data-dir);
    font-size: var(--fs-xs);
}

.sort-button--active {
    color: var(--gold-dark);
}

.th-sort {
    color: inherit;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
}

.th-sort:hover {
    text-decoration: underline;
}

.th-sort--active {
    color: var(--gold-dark);
}

.bulk-table th,
.bulk-table td {
    padding: 0.6rem 0.5rem;
}

/* Lista de produtos: campos só do tamanho do conteúdo, para a tabela caber
   sem barra de rolagem horizontal. */
.bulk-stock {
    width: 3.4rem;
    padding: 0.4rem 0.35rem;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.bulk-stock::-webkit-inner-spin-button,
.bulk-stock::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bulk-select {
    padding: 0.4rem 0.3rem;
    font-size: var(--fs-sm);
}

.bulk-select--condition {
    width: 9.5rem;
}

.bulk-select--package {
    width: 6.5rem;
}

/* Barra de confirmação fixa no rodapé da tela: o botão de salvar fica sempre à
   mão, sem precisar rolar a página inteira. `padding-right` deixa espaço para o
   botão flutuante do WhatsApp (só clientes o veem). */
.pricing-savebar,
.sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--paper);
    border-top: 2px solid var(--border);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

.sticky-actions {
    padding-right: 5.5rem;
}

.sticky-actions > * {
    margin: 0;
}

/* Botão à esquerda da barra (ex.: "Alterar senha"), os demais ficam à direita */
.sticky-actions .sticky-actions-start,
.pricing-savebar .sticky-actions-start {
    margin-right: auto;
}

.sticky-actions button,
.sticky-actions .btn-secondary,
.sticky-actions .btn--secondary {
    padding: 0.6rem 1.2rem;
    font-size: var(--fs-md);
}

/* Formulário de produto em seções: o essencial primeiro, detalhes gerais depois */
.form-section {
    margin: 1.25rem 0;
    padding: 0.25rem 1.1rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
}

.form-section > h3 {
    margin: 0.9rem 0 0.4rem;
    color: var(--navy);
}

.form-section--details {
    background: #FAF8F2;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    column-gap: 1rem;
}

.tag-group {
    margin: 0.75rem 0;
    padding: 0.5rem 0.9rem 0.75rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
}

.tag-group legend {
    padding: 0 0.35rem;
    font-weight: 700;
    color: var(--navy);
}

.tag-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: 0.4rem;
}

.tag-option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: #fff;
    cursor: pointer;
    font-weight: 600;
}

.tag-option input {
    width: auto;
    margin: 0;
}

.tag-option:has(input:checked) {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

#pricing-pending {
    margin-right: auto;
    color: #6B6357;
    font-size: var(--fs-md);
}

#pricing-pending.pricing-pending--dirty {
    color: var(--gold-dark);
    font-weight: 700;
}

/* Filtro "Ofertas" na faixa de tipos e botão "Ver todas as ofertas" */
.categories .offer-pill {
    color: #A62A1E;
    background: #FDE5E1;
    font-weight: 700;
}

.categories .offer-pill.active {
    background: #A62A1E;
    color: #fff;
}

.page-header-offer {
    margin-left: 0.5rem;
    padding: 0.1rem 0.6rem;
    border-radius: var(--radius-pill);
    background: #FDE5E1;
    color: #A62A1E;
    font-size: var(--fs-xs);
    font-weight: 700;
    vertical-align: middle;
}

.offers-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.offers-see-all {
    margin-left: auto;
}


/* Aviso de email não confirmado */
.profile-alert .inline-form {
    display: inline;
    margin-left: 0.4rem;
}

.profile-alert .link-button {
    color: var(--navy-dark);
    text-decoration: underline;
}

.email-block {
    margin: 1rem 0;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--gold);
    border-radius: var(--radius-md);
    background: #FFF8DC;
    color: var(--navy-dark);
}

.email-block p {
    margin: 0 0 0.6rem;
}

/* Carrinho e checkout no estilo dos marketplaces: foto pequena, nome, unidade
   e, à direita, o preço no Pix em destaque com o do cartão riscado. */
.cart-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cart-item {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    grid-template-areas:
        "img name name"
        "img qty price";
    gap: 0.4rem 1rem;
    align-items: start;
    position: relative;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
}

.cart-item-image {
    grid-area: img;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: #F5F2E9;
    font-size: var(--fs-2xl);
    text-decoration: none;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cart-item-name {
    grid-area: name;
    padding-right: 2.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-weight: 600;
    color: var(--navy-dark);
    text-decoration: none;
}

/* Fora da grade (canto superior direito) para o nome poder usar a largura
   toda, em vez de ficar espremido pela coluna do preço no celular. */
.cart-item-remove-form {
    position: absolute;
    top: 0.7rem;
    right: 0;
    margin: 0;
}

.cart-item-remove {
    padding: 0.3rem;
    border-radius: var(--radius-sm);
    background: none;
    color: #6B6357;
    line-height: 0;
}

.cart-item-remove:hover {
    background: #FBEAE8;
    color: var(--red);
    opacity: 1;
}

.cart-item-quantity {
    grid-area: qty;
    align-self: center;
}

.cart-item-qty {
    display: inline-block;
    padding: 0.55rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--paper);
    font-weight: 600;
}

.cart-item-price {
    grid-area: price;
    text-align: right;
}

.pix-off {
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-xs);
    background: #17803F;
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 800;
    white-space: nowrap;
}

.money-cents {
    margin-left: 0.1em;
    font-size: 0.5em;
    line-height: 1.4;
    vertical-align: top;
}

.cart-row-blocked .cart-item-name {
    color: var(--red);
}

.cart-item.cart-row-blocked {
    padding-inline: 0.6rem;
    border-radius: var(--radius-sm);
}

/* Item que não pode ser comprado agora (indisponível, esgotado, pouco estoque). */
.cart-item--problem {
    padding-inline: 0.6rem;
    border-radius: var(--radius-sm);
    background: #FBEAE8;
}

.cart-item-problem {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    color: var(--red);
}

.cart-item-fix {
    margin: 0;
}

/* Sugestões (expansão e bomboniere): mesma disposição nas duas — foto, nome
   (e detalhe) à esquerda, preço e o botão "Adicionar" sempre na coluna da
   direita, o botão logo abaixo do preço. */
.cart-item--suggestion {
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    grid-template-areas:
        "img name price"
        "img qty action";
}

.cart-item--suggestion .cart-item-name {
    padding-right: 0;
}

.cart-item--suggestion .cart-item-price {
    grid-area: price;
}

.cart-item--suggestion .cart-item-fix {
    grid-area: action;
    justify-self: end;
    align-self: end;
}

/* Expansão alugada junto com o jogo base (carrinho e pagamento do aluguel). */
.cart-item-addon {
    grid-column: 1 / -1;
    font-size: var(--fs-md);
    padding-left: 0.6rem;
    border-left: 3px solid var(--gold, #c9a227);
}

/* Expansão no carrinho: linha filha do jogo (foto menor, recuada, barra dourada), com o preço na
   mesma coluna do preço do jogo e o subtotal do aluguel (jogo + expansão) logo abaixo. O jogo reserva
   a coluna da lixeira (--addon-gutter) para o preço dele e o da expansão terminarem alinhados. */
.cart-item--with-addons {
    --addon-gutter: 1.75rem;
    padding-right: var(--addon-gutter);
}

.cart-item--with-addons .cart-item-name {
    padding-right: 0;
}

.cart-item--with-addons .cart-item-remove-form {
    right: 0;
}

.cart-item--with-addons .cart-item-addon {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto var(--addon-gutter);
    grid-template-areas:
        "img name price remove"
        "img note price remove";
    --addon-gap: 0.8rem;
    gap: 0.15rem var(--addon-gap);
    align-items: center;
    margin: 0 calc(var(--addon-gutter) * -1) 0 2.25rem;
    padding: 0.6rem 0 0.6rem 0.8rem;
    font-size: var(--fs-md);
}

.cart-item-addon-image {
    grid-area: img;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: #F5F2E9;
}

.cart-item-addon-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cart-item-addon-name {
    grid-area: name;
    font-weight: 600;
    color: var(--navy-dark);
    overflow-wrap: anywhere;
}

.cart-item-addon-note {
    grid-area: note;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.cart-item-addon-price {
    grid-area: price;
    text-align: right;
    /* come o espaço entre colunas: o preço termina na mesma linha do preço do jogo */
    margin-right: calc(var(--addon-gap) * -1);
}

.cart-item-addon-remove {
    grid-area: remove;
    justify-self: end;
    margin: 0;
}

.cart-item-subtotal {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-4);
    margin-right: calc(-0.9rem - 1px);
    padding: 0.7rem 0.9rem;
    background: var(--paper);
    border: 1px dashed #D9CFB4;
    border-radius: var(--radius-sm);
}

.cart-item-subtotal .price-pair {
    flex-shrink: 0;
}

.cart-item-subtotal-label {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.cart-item-subtotal-label strong {
    display: block;
    color: var(--navy-dark);
    font-size: var(--fs-md);
}

@media (max-width: 720px) {
    .cart-item--with-addons .cart-item-addon {
        grid-template-columns: 2.75rem minmax(0, 1fr) auto var(--addon-gutter);
        --addon-gap: 0.6rem;
        margin-left: 1rem;
        padding-left: 0.6rem;
    }

    .cart-item-addon-image {
        width: 2.75rem;
    }

    .cart-item-addon-name {
        font-size: var(--fs-sm);
    }

    /* Celular: foto menor e nada espremido. O preço usa a largura toda do nome
       (cartão em letra menor, sem quebrar) e os detalhes (datas do aluguel,
       "para alugar junto…") ocupam a largura inteira abaixo da foto. */
    .cart-item {
        grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    }

    .cart-item-image {
        width: 4.5rem;
    }

    .cart-item .price-pair-alt,
    .cart-item .price-pair-each {
        font-size: var(--fs-xs);
    }

    .cart-item--rental {
        grid-template-areas:
            "img name name"
            "img price price"
            "qty qty qty";
    }

    .cart-item--rental .cart-item-quantity,
    .cart-item--suggestion .cart-item-quantity {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .cart-item--suggestion {
        grid-template-columns: 4.5rem minmax(0, 1fr) auto;
        grid-template-areas:
            "img name name"
            "img qty qty"
            "img price action";
        align-items: end;
    }

    .cart-item--suggestion .cart-item-image {
        align-self: start;
    }

    .cart-item--suggestion .cart-item-name {
        -webkit-line-clamp: 3;
    }

    .cart-item--suggestion .cart-item-price {
        text-align: left;
    }

    .cart-item--suggestion .price-pair {
        text-align: left;
    }
}

.rental-expansions {
    margin: 0.8rem 0;
    padding: 0.7rem 0.9rem;
    border: 1px solid #ddd;
    border-radius: var(--radius-sm);
}

.rental-expansions legend {
    font-weight: 700;
    color: var(--navy);
    padding: 0 0.3rem;
}

/* Cada expansão é uma linha compacta e selecionável, no mesmo visual das opções de pagamento. */
.expansion-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0.4rem 0;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--paper);
    cursor: pointer;
}

.expansion-option:has(input:checked) {
    border-color: var(--navy);
    background: var(--cream);
}

.expansion-option:has(input:disabled) {
    opacity: 0.65;
    cursor: not-allowed;
}

.expansion-option input {
    flex-shrink: 0;
    margin: 0;
}

.expansion-option-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.expansion-option-name {
    color: var(--navy);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.expansion-option-price {
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
}

.expansion-option-price small {
    display: block;
    color: #6B6357;
}

.rental-expansion-note {
    font-size: var(--fs-sm);
    color: #6B6357;
}

.rental-expansion-note:empty {
    display: none;
}

/* Checkout: mesma linha, sem o botão de remover. */
.cart-items--checkout .cart-item {
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    padding: 0.7rem 0;
}

.cart-items--checkout .cart-item-name {
    padding-right: 0;
}

.cart-items--checkout .cart-item-image {
    width: 4.5rem;
}

.cart-summary {
    max-width: 28rem;
    margin: 1.25rem 0 1.25rem auto;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--paper);
}

.cart-summary h3 {
    margin: 0 0 0.6rem;
}

.summary-line,
.summary-total {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    margin: 0.25rem 0;
    text-align: left;
}

.summary-line[hidden] {
    display: none;
}

.cart-checkout-actions {
    text-align: right;
}

.summary-total--pix {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
    color: #17803F;
    font-size: var(--fs-xl);
    font-weight: 800;
}

.summary-total--card {
    color: var(--navy);
    font-weight: 600;
}

.summary-saving {
    margin: 0.4rem 0;
    color: #17803F;
    font-weight: 700;
}

.summary-saving[hidden] {
    display: none;
}

.cart-summary .form-hint {
    margin: 0.6rem 0 0;
}