/* ==========================================================================
   Delivery Premium BR - estilos da loja

   REGRA FUNDAMENTAL: nenhuma cor, fonte ou raio literal neste arquivo.
   Tudo consome as custom properties --dp-* injetadas pelo ThemeEngine a partir
   da tabela `theme_tokens`. E isso que permite trocar a identidade visual
   inteira - de padaria para farmacia - sem editar uma linha de CSS.

   As unicas excecoes sao valores neutros de estrutura (branco puro em sombra,
   transparencias) que nao pertencem a identidade da marca.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

body.dp-body {
    margin: 0;
    background: var(--dp-background);
    color: var(--dp-text);
    font-family: var(--dp-font-sans);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    /* Espaco para a barra fixa do carrinho no celular. */
    padding-bottom: env(safe-area-inset-bottom);
}

body.has-cartbar { padding-bottom: 5.5rem; }

h1, h2, h3, h4 {
    font-family: var(--dp-font-display);
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -.01em;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--dp-primary); }

img { max-width: 100%; height: auto; display: block; }

svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

button { font: inherit; cursor: pointer; }

:focus-visible {
    outline: 2px solid var(--dp-primary);
    outline-offset: 2px;
    border-radius: var(--dp-radius-sm);
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.dp-skip-link {
    position: absolute; left: -999px; top: 0; z-index: 999;
    padding: .75rem 1.25rem;
    background: var(--dp-primary); color: var(--dp-surface);
    border-radius: 0 0 var(--dp-radius) 0;
}
.dp-skip-link:focus { left: 0; color: var(--dp-surface); }

.dp-container {
    width: 100%;
    max-width: var(--dp-container);
    margin-inline: auto;
    padding-inline: 1rem;
}

.dp-narrow { max-width: 46rem; }

.dp-muted { color: var(--dp-text-muted); }

/* --------------------------------------------------------------------------
   2. Botoes
   -------------------------------------------------------------------------- */

.dp-btn {
    --btn-bg: transparent;
    --btn-fg: var(--dp-text);
    --btn-border: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.35rem;
    border: 1.5px solid var(--btn-border);
    border-radius: var(--dp-radius-pill, 999px);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1;
    text-align: center;
    transition: filter .18s ease, transform .12s ease, background-color .18s ease;
}

.dp-btn:hover:not(:disabled) { filter: brightness(1.08); color: var(--btn-fg); }
.dp-btn:active:not(:disabled) { transform: translateY(1px); }
.dp-btn:disabled { opacity: .5; cursor: not-allowed; }
.dp-btn svg { width: 1.1em; height: 1.1em; }

.dp-btn--primary { --btn-bg: var(--dp-primary); --btn-fg: var(--dp-surface); }
.dp-btn--accent  { --btn-bg: var(--dp-accent);  --btn-fg: var(--dp-surface); }
.dp-btn--outline { --btn-border: var(--dp-border); --btn-fg: var(--dp-text); background: var(--dp-surface); }
.dp-btn--ghost   { --btn-fg: var(--dp-text-muted); }
.dp-btn--ghost:hover { --btn-fg: var(--dp-primary); background: var(--dp-surface-alt); }
.dp-btn--ghost.is-active { --btn-fg: var(--dp-danger); }
.dp-btn--muted   { --btn-bg: var(--dp-surface-alt); --btn-fg: var(--dp-text-muted); }

.dp-btn--sm    { padding: .5rem 1rem; font-size: .875rem; }
.dp-btn--lg    { padding: .95rem 1.75rem; font-size: 1.05rem; }
.dp-btn--block { display: flex; width: 100%; }

.dp-icon-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem .7rem;
    border: 0; background: transparent;
    color: var(--dp-text); border-radius: var(--dp-radius);
    transition: background-color .18s ease;
}
.dp-icon-btn:hover { background: var(--dp-surface-alt); color: var(--dp-primary); }
.dp-icon-btn svg { width: 1.35rem; height: 1.35rem; }
.dp-icon-btn__label { font-size: .875rem; font-weight: 500; }

@media (max-width: 640px) {
    .dp-icon-btn__label { display: none; }
}

/* --------------------------------------------------------------------------
   3. Cabecalho
   -------------------------------------------------------------------------- */

.dp-header {
    position: sticky; top: 0; z-index: 100;
    background: var(--dp-surface);
    box-shadow: var(--dp-shadow-sm, 0 1px 2px rgba(0,0,0,.06));
}

.dp-header__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-block: .85rem;
}

.dp-brand { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
.dp-brand__logo { height: 2.5rem; width: auto; }

.dp-brand__mark {
    display: grid; place-items: center;
    width: 2.5rem; height: 2.5rem;
    background: var(--dp-primary); color: var(--dp-surface);
    border-radius: var(--dp-radius);
    font-family: var(--dp-font-display);
    font-size: 1.35rem; font-weight: 600;
}

.dp-brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.dp-brand__name { font-family: var(--dp-font-display); font-size: 1.05rem; }
.dp-brand__tagline { color: var(--dp-text-muted); font-size: .75rem; }

.dp-header__actions { display: flex; align-items: center; gap: .35rem; margin-left: auto; }

@media (max-width: 900px) {
    .dp-brand__tagline { display: none; }
    .dp-header__inner { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   4. Busca
   -------------------------------------------------------------------------- */

.dp-search { position: relative; flex: 1 1 22rem; max-width: 34rem; }

.dp-search__input {
    width: 100%;
    padding: .75rem 2.5rem .75rem 2.75rem;
    border: 1.5px solid var(--dp-border);
    border-radius: var(--dp-radius-pill, 999px);
    background: var(--dp-surface-alt);
    color: var(--dp-text);
    font-size: .95rem;
    transition: border-color .18s ease, background-color .18s ease;
}
.dp-search__input::placeholder { color: var(--dp-text-muted); }
.dp-search__input:focus {
    outline: none;
    border-color: var(--dp-primary);
    background: var(--dp-surface);
}
/* Remove o X nativo do Chrome: temos o nosso. */
.dp-search__input::-webkit-search-cancel-button { display: none; }

.dp-search__icon {
    position: absolute; left: 1rem; top: 50%;
    transform: translateY(-50%);
    width: 1.15rem; height: 1.15rem;
    color: var(--dp-text-muted);
    pointer-events: none;
}

.dp-search__clear {
    position: absolute; right: .85rem; top: 50%;
    transform: translateY(-50%);
    width: 1.5rem; height: 1.5rem;
    border: 0; border-radius: 50%;
    background: var(--dp-border); color: var(--dp-text);
    font-size: 1rem; line-height: 1;
    display: grid; place-items: center;
}

.dp-suggest {
    position: absolute; top: calc(100% + .5rem); left: 0; right: 0;
    z-index: 120;
    max-height: 70vh; overflow-y: auto;
    background: var(--dp-surface);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg);
    box-shadow: var(--dp-shadow-lg, 0 12px 32px rgba(0,0,0,.12));
    padding: .5rem;
}

.dp-suggest__group + .dp-suggest__group { border-top: 1px solid var(--dp-border); margin-top: .5rem; padding-top: .5rem; }

.dp-suggest__title {
    padding: .35rem .75rem;
    font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--dp-text-muted);
}

.dp-suggest__item {
    display: flex; align-items: center; gap: .75rem;
    padding: .55rem .75rem;
    border-radius: var(--dp-radius);
    transition: background-color .15s ease;
}
.dp-suggest__item:hover,
.dp-suggest__item.is-highlighted { background: var(--dp-surface-alt); }

.dp-suggest__thumb {
    width: 2.75rem; height: 2.75rem;
    border-radius: var(--dp-radius-sm);
    object-fit: cover; flex-shrink: 0;
    background: var(--dp-surface-alt);
}

.dp-suggest__body { flex: 1; min-width: 0; }
.dp-suggest__name {
    display: block; font-weight: 500; font-size: .92rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp-suggest__meta { font-size: .78rem; color: var(--dp-text-muted); }
.dp-suggest__price { font-weight: 600; color: var(--dp-primary); white-space: nowrap; }

.dp-suggest__all {
    display: block; text-align: center;
    padding: .7rem; margin-top: .25rem;
    border-radius: var(--dp-radius);
    background: var(--dp-surface-alt);
    font-weight: 600; font-size: .9rem; color: var(--dp-primary);
}

.dp-suggest__empty { padding: 1.5rem 1rem; text-align: center; color: var(--dp-text-muted); font-size: .9rem; }

/* --------------------------------------------------------------------------
   5. Faixa de status
   -------------------------------------------------------------------------- */

.dp-status { font-size: .82rem; border-top: 1px solid var(--dp-border); }
.dp-status--open   { background: var(--dp-surface-alt); }
.dp-status--closed { background: var(--dp-surface-alt); }

.dp-status__inner {
    display: flex; align-items: center; gap: 1rem;
    padding-block: .5rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.dp-status__inner::-webkit-scrollbar { display: none; }

.dp-status__badge {
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 600; white-space: nowrap;
}

.dp-status__dot {
    width: .5rem; height: .5rem; border-radius: 50%;
    background: var(--dp-text-muted);
}
.dp-status--open .dp-status__dot {
    background: var(--dp-success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dp-success) 25%, transparent);
}
.dp-status--closed .dp-status__dot { background: var(--dp-danger); }

.dp-status__item {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--dp-text-muted); white-space: nowrap;
}
.dp-status__item svg { width: .95rem; height: .95rem; }
.dp-status__item--highlight { color: var(--dp-accent); font-weight: 600; }

.dp-status__link {
    display: inline-flex; align-items: center; gap: .2rem;
    margin-left: auto; font-weight: 600; color: var(--dp-primary); white-space: nowrap;
}
.dp-status__link svg { width: .9rem; height: .9rem; }

/* --------------------------------------------------------------------------
   6. Menu de categorias
   -------------------------------------------------------------------------- */

.dp-catnav { background: var(--dp-surface); border-top: 1px solid var(--dp-border); }

.dp-catnav__list {
    display: flex; gap: .35rem;
    margin: 0; padding: .5rem 0; list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}
.dp-catnav__list::-webkit-scrollbar { display: none; }

.dp-catnav__item {
    --cat-color: var(--dp-primary);
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .9rem;
    border-radius: var(--dp-radius-pill, 999px);
    font-size: .9rem; font-weight: 500;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: background-color .18s ease, color .18s ease;
}
.dp-catnav__item:hover { background: var(--dp-surface-alt); color: var(--cat-color); }
.dp-catnav__item.is-active { background: var(--cat-color); color: var(--dp-surface); }

.dp-catnav__count {
    font-size: .7rem; opacity: .7;
    padding: .1rem .35rem;
    border-radius: var(--dp-radius-pill, 999px);
    background: color-mix(in srgb, currentColor 12%, transparent);
}

/* --------------------------------------------------------------------------
   7. Secoes e cabecalhos de pagina
   -------------------------------------------------------------------------- */

.dp-main { min-height: 50vh; padding-bottom: 3rem; }

.dp-section { padding-block: 2.5rem; }
.dp-section--flush { padding-block: 1.25rem; }
.dp-section--alt { background: var(--dp-surface-alt); }

.dp-section__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.25rem;
}
.dp-section__title { font-size: clamp(1.25rem, 3vw, 1.6rem); }
.dp-section__subtitle { margin: .25rem 0 0; color: var(--dp-text-muted); font-size: .92rem; }

.dp-section__link {
    display: inline-flex; align-items: center; gap: .25rem;
    font-weight: 600; font-size: .9rem; color: var(--dp-primary);
    white-space: nowrap;
}
.dp-section__link svg { width: 1rem; height: 1rem; }

.dp-page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; margin: 1.5rem 0 1.25rem;
}
.dp-page-title { font-size: clamp(1.5rem, 4vw, 2.1rem); }
.dp-page-subtitle { margin: .35rem 0 0; color: var(--dp-text-muted); }
.dp-page-count { color: var(--dp-text-muted); font-size: .9rem; white-space: nowrap; }

.dp-breadcrumb {
    display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
    padding-block: 1rem;
    font-size: .85rem; color: var(--dp-text-muted);
}
.dp-breadcrumb svg { width: .85rem; height: .85rem; opacity: .5; }
.dp-breadcrumb a:hover { color: var(--dp-primary); }
.dp-breadcrumb [aria-current] { color: var(--dp-text); font-weight: 500; }

.dp-panel {
    background: var(--dp-surface);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg);
    padding: 1.5rem;
    margin-block: 1.5rem;
}
.dp-panel__title { font-size: 1.15rem; margin-bottom: 1rem; }

.dp-prose { line-height: 1.7; color: var(--dp-text); }
.dp-prose p { margin: 0 0 1rem; }

/* --------------------------------------------------------------------------
   8. Banners e carrosseis
   -------------------------------------------------------------------------- */

.dp-carousel { position: relative; border-radius: var(--dp-radius-lg); overflow: hidden; }

.dp-carousel__track {
    display: flex;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.dp-carousel__track::-webkit-scrollbar { display: none; }

.dp-banner { position: relative; flex: 0 0 100%; scroll-snap-align: center; }
.dp-banner__image { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; }

@media (max-width: 640px) {
    .dp-banner__image { aspect-ratio: 3 / 2; }
}

.dp-banner__content {
    position: absolute; inset: auto 0 0 0;
    padding: 2rem 1.5rem 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,.62), transparent);
    color: #fff; /* estrutural: sobre gradiente escuro na imagem */
}
.dp-banner__title { font-size: clamp(1.2rem, 3.5vw, 2rem); color: #fff; /* estrutural */ }
.dp-banner__subtitle { margin: .35rem 0 1rem; opacity: .92; font-size: .95rem; }

.dp-carousel__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 2.5rem; height: 2.5rem;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: var(--dp-surface); color: var(--dp-text);
    box-shadow: var(--dp-shadow);
    opacity: .92;
}
.dp-carousel__nav--prev { left: .75rem; }
.dp-carousel__nav--next { right: .75rem; }
.dp-carousel__nav svg { width: 1.2rem; height: 1.2rem; }

.dp-carousel__dots {
    position: absolute; bottom: .75rem; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: .4rem;
}
.dp-carousel__dot {
    width: .5rem; height: .5rem; padding: 0;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,.5);
}
.dp-carousel__dot.is-active { background: #fff; /* estrutural: sobre a imagem do banner */ width: 1.4rem; border-radius: 999px; }

/* Vitrine horizontal de produtos */
.dp-scroller { position: relative; }

.dp-scroller__track {
    display: flex; gap: 1rem;
    margin: 0; padding: .25rem 0 1rem; list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.dp-scroller__track::-webkit-scrollbar { display: none; }

.dp-scroller__item { flex: 0 0 15rem; scroll-snap-align: start; }

@media (max-width: 640px) {
    .dp-scroller__item { flex-basis: 63vw; }
}

.dp-scroller__nav {
    position: absolute; top: 40%; transform: translateY(-50%);
    width: 2.5rem; height: 2.5rem;
    display: grid; place-items: center;
    border: 1px solid var(--dp-border); border-radius: 50%;
    background: var(--dp-surface); color: var(--dp-text);
    box-shadow: var(--dp-shadow);
    z-index: 2;
}
.dp-scroller__nav--prev { left: -1rem; }
.dp-scroller__nav--next { right: -1rem; }
.dp-scroller__nav svg { width: 1.1rem; height: 1.1rem; }

@media (max-width: 1240px) {
    .dp-scroller__nav { display: none; }
}

/* --------------------------------------------------------------------------
   9. Grades
   -------------------------------------------------------------------------- */

.dp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem;
    margin: 0; padding: 0; list-style: none;
}

@media (max-width: 560px) {
    .dp-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
}

.dp-catgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: .85rem;
    margin: 0; padding: 0; list-style: none;
}

.dp-catgrid__item {
    --cat-color: var(--dp-primary);
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: 1rem .75rem;
    background: var(--dp-surface);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg);
    text-align: center;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dp-catgrid__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--dp-shadow);
    border-color: var(--cat-color);
}

.dp-catgrid__media {
    display: grid; place-items: center;
    width: 3.5rem; height: 3.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cat-color) 12%, var(--dp-surface-alt));
    overflow: hidden;
}
.dp-catgrid__media img { width: 100%; height: 100%; object-fit: cover; }

.dp-catgrid__initial {
    font-family: var(--dp-font-display);
    font-size: 1.4rem; color: var(--cat-color);
}

.dp-catgrid__name { font-size: .88rem; font-weight: 600; line-height: 1.25; }
.dp-catgrid__count { font-size: .72rem; color: var(--dp-text-muted); }

.dp-brands {
    display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
    margin: 0; padding: 0; list-style: none;
}
.dp-brands__item {
    display: grid; place-items: center;
    width: 7rem; height: 4rem; padding: .75rem;
    background: var(--dp-surface);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius);
    filter: grayscale(1); opacity: .7;
    transition: filter .18s ease, opacity .18s ease;
}
.dp-brands__item:hover { filter: none; opacity: 1; }

/* --------------------------------------------------------------------------
   10. Card de produto
   -------------------------------------------------------------------------- */

.dp-card {
    display: flex; flex-direction: column; height: 100%;
    background: var(--dp-surface);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.dp-card:hover { transform: translateY(-3px); box-shadow: var(--dp-shadow); }
.dp-card.is-unavailable { opacity: .62; }

.dp-card__media { position: relative; display: block; background: var(--dp-surface-alt); }
.dp-card__image { width: 100%; aspect-ratio: 1; object-fit: cover; }

.dp-card__badges {
    position: absolute; top: .6rem; left: .6rem;
    display: flex; flex-direction: column; gap: .3rem; align-items: flex-start;
}

.dp-card__fav {
    position: absolute; top: .5rem; right: .5rem;
    width: 2.1rem; height: 2.1rem;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: color-mix(in srgb, var(--dp-surface) 88%, transparent);
    color: var(--dp-text-muted);
    backdrop-filter: blur(4px);
    transition: color .18s ease, transform .15s ease;
}
.dp-card__fav:hover { color: var(--dp-danger); transform: scale(1.08); }
.dp-card__fav.is-active { color: var(--dp-danger); }
.dp-card__fav.is-active svg { fill: currentColor; }
.dp-card__fav svg { width: 1.1rem; height: 1.1rem; }

.dp-card__body {
    display: flex; flex-direction: column; gap: .4rem;
    padding: .85rem; flex: 1;
}

.dp-card__category {
    font-size: .7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--dp-text-muted);
}

.dp-card__title { font-family: var(--dp-font-sans); font-size: .95rem; font-weight: 600; line-height: 1.3; }

.dp-card__summary {
    margin: 0; font-size: .82rem; color: var(--dp-text-muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

.dp-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; margin-top: auto; }
.dp-card__action { margin-top: .6rem; }

.dp-price__old { font-size: .8rem; color: var(--dp-text-muted); text-decoration: line-through; }
.dp-price__now { font-size: 1.15rem; font-weight: 700; color: var(--dp-primary); }
.dp-price__now--lg { font-size: 2rem; }
.dp-price__unit { font-size: .78rem; color: var(--dp-text-muted); }
.dp-price__save {
    font-size: .8rem; font-weight: 600; color: var(--dp-success);
    padding: .15rem .5rem; border-radius: var(--dp-radius-pill, 999px);
    background: color-mix(in srgb, var(--dp-success) 12%, transparent);
}

/* --------------------------------------------------------------------------
   11. Selos
   -------------------------------------------------------------------------- */

.dp-badge {
    display: inline-flex; align-items: center;
    padding: .2rem .55rem;
    border-radius: var(--dp-radius-pill, 999px);
    font-size: .72rem; font-weight: 700;
    letter-spacing: .01em;
    background: var(--dp-surface-alt); color: var(--dp-text);
}
.dp-badge--discount { background: var(--dp-danger);  color: var(--dp-on-accent); }
.dp-badge--new      { background: var(--dp-accent);  color: var(--dp-on-accent); }
.dp-badge--low      { background: var(--dp-warning); color: var(--dp-on-accent); }
.dp-badge--out      { background: var(--dp-text-muted); color: var(--dp-on-accent); }
.dp-badge--today    { background: var(--dp-primary); color: var(--dp-on-accent); margin-left: .5rem; }
.dp-badge--verified { background: color-mix(in srgb, var(--dp-success) 15%, transparent); color: var(--dp-success); }
.dp-badge--attribute {
    background: var(--dp-surface-alt);
    color: var(--dp-primary);
    border: 1px solid var(--dp-border);
    font-weight: 600;
    padding: .3rem .7rem;
}

/* --------------------------------------------------------------------------
   12. Avaliacoes
   -------------------------------------------------------------------------- */

.dp-rating { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; }

.dp-rating__stars {
    --rating: 0;
    display: inline-block;
    width: 5.5rem; height: 1rem;
    background:
        linear-gradient(90deg, var(--dp-warning) calc(var(--rating) / 5 * 100%), var(--dp-border) 0);
    -webkit-mask: repeat-x left center / 1.1rem 1rem
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l3 6.5 7 1-5 4.9 1.2 7L12 18l-6.2 3.4L7 14.4 2 9.5l7-1z'/%3E%3C/svg%3E");
    mask: repeat-x left center / 1.1rem 1rem
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l3 6.5 7 1-5 4.9 1.2 7L12 18l-6.2 3.4L7 14.4 2 9.5l7-1z'/%3E%3C/svg%3E");
}
.dp-rating--sm .dp-rating__stars { width: 4.4rem; height: .8rem; }

.dp-reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.dp-review { padding-bottom: 1.25rem; border-bottom: 1px solid var(--dp-border); }
.dp-review:last-child { border-bottom: 0; padding-bottom: 0; }

.dp-review__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .85rem; }
.dp-review__head time { color: var(--dp-text-muted); margin-left: auto; }
.dp-review__title { display: block; margin-top: .5rem; }
.dp-review__text { margin: .35rem 0 0; color: var(--dp-text); }

.dp-review__reply {
    margin-top: .75rem; padding: .75rem 1rem;
    background: var(--dp-surface-alt);
    border-left: 3px solid var(--dp-primary);
    border-radius: 0 var(--dp-radius) var(--dp-radius) 0;
    font-size: .9rem;
}
.dp-review__reply p { margin: .25rem 0 0; }

.dp-review-form { display: grid; gap: .75rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--dp-border); }
.dp-review-form__title { font-size: 1rem; }

/* Estrelas em ordem inversa no HTML para permitir o seletor de irmao. */
.dp-stars-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.dp-stars-input input { position: absolute; opacity: 0; width: 0; }
.dp-stars-input label { font-size: 1.75rem; color: var(--dp-border); cursor: pointer; transition: color .12s ease; }
.dp-stars-input input:checked ~ label,
.dp-stars-input label:hover,
.dp-stars-input label:hover ~ label { color: var(--dp-warning); }

/* --------------------------------------------------------------------------
   13. Catalogo e filtros
   -------------------------------------------------------------------------- */

.dp-catalog { display: grid; grid-template-columns: 16rem 1fr; gap: 1.75rem; align-items: start; }

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

.dp-catalog__aside {
    position: sticky; top: 9rem;
    background: var(--dp-surface);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg);
    padding: 1.25rem;
}

.dp-drawer__close { display: none; }

/* No celular os filtros viram uma gaveta lateral. */
@media (max-width: 900px) {
    .dp-catalog__aside {
        position: fixed; inset: 0 auto 0 0; z-index: 200;
        width: min(20rem, 88vw);
        border-radius: 0; border-width: 0 1px 0 0;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: var(--dp-shadow-lg);
    }
    .dp-catalog__aside.is-open { transform: none; }

    .dp-drawer__close {
        display: grid; place-items: center;
        position: absolute; top: .75rem; right: .75rem;
        width: 2rem; height: 2rem;
        border: 0; border-radius: 50%;
        background: var(--dp-surface-alt); font-size: 1.25rem; line-height: 1;
    }
}

.dp-filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.dp-filters__title { font-size: 1rem; }
.dp-filters__clear { font-size: .82rem; color: var(--dp-danger); font-weight: 600; }

.dp-filters__group { border: 0; padding: 0; margin: 0 0 1.25rem; }
.dp-filters__legend { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--dp-text-muted); margin-bottom: .5rem; }

.dp-filters__options { display: grid; gap: .3rem; max-height: 14rem; overflow-y: auto; }
.dp-filters__options--swatch { display: flex; flex-wrap: wrap; gap: .5rem; }

.dp-filters__range { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--dp-text-muted); }

.dp-filters__submit { margin-top: .5rem; }

.dp-check { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; cursor: pointer; font-size: .9rem; }
.dp-check input { accent-color: var(--dp-primary); width: 1rem; height: 1rem; }
.dp-check__label { flex: 1; }
.dp-check__count { color: var(--dp-text-muted); font-size: .78rem; }

.dp-swatch { cursor: pointer; }
.dp-swatch input { position: absolute; opacity: 0; }
.dp-swatch__dot {
    display: block; width: 1.75rem; height: 1.75rem;
    border-radius: 50%; border: 2px solid var(--dp-border);
    transition: box-shadow .15s ease, transform .15s ease;
}
.dp-swatch input:checked + .dp-swatch__dot {
    box-shadow: 0 0 0 2px var(--dp-surface), 0 0 0 4px var(--dp-primary);
    transform: scale(1.05);
}

.dp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.dp-toolbar__filter { position: relative; }
.dp-toolbar__dot {
    position: absolute; top: -.2rem; right: -.2rem;
    width: .55rem; height: .55rem; border-radius: 50%;
    background: var(--dp-danger);
}

@media (min-width: 901px) {
    .dp-toolbar__filter { display: none; }
}

.dp-select {
    padding: .5rem 2rem .5rem .85rem;
    border: 1.5px solid var(--dp-border);
    border-radius: var(--dp-radius-pill, 999px);
    background: var(--dp-surface) no-repeat right .7rem center / .85rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    color: var(--dp-text); font-size: .875rem;
    appearance: none;
}

.dp-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.dp-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .4rem .85rem;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-pill, 999px);
    background: var(--dp-surface);
    font-size: .85rem;
}
.dp-chip:hover { border-color: var(--dp-primary); color: var(--dp-primary); }
.dp-chip small { color: var(--dp-text-muted); font-size: .72rem; }

/* --------------------------------------------------------------------------
   14. Ficha do produto
   -------------------------------------------------------------------------- */

.dp-product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }

@media (max-width: 900px) {
    .dp-product { grid-template-columns: 1fr; gap: 1.5rem; }
}

.dp-product__gallery { position: sticky; top: 9rem; }

@media (max-width: 900px) {
    .dp-product__gallery { position: static; }
}

.dp-gallery__main {
    position: relative;
    border-radius: var(--dp-radius-lg);
    overflow: hidden;
    background: var(--dp-surface-alt);
}
.dp-gallery__image { width: 100%; aspect-ratio: 1; object-fit: cover; }
.dp-gallery__badge { position: absolute; top: 1rem; left: 1rem; font-size: .85rem; padding: .3rem .75rem; }

.dp-gallery__thumbs {
    display: flex; gap: .5rem; margin: .75rem 0 0; padding: 0; list-style: none;
    overflow-x: auto; scrollbar-width: none;
}
.dp-gallery__thumbs::-webkit-scrollbar { display: none; }

.dp-gallery__thumb {
    width: 4.5rem; height: 4.5rem; padding: 0;
    border: 2px solid transparent; border-radius: var(--dp-radius);
    overflow: hidden; background: var(--dp-surface-alt);
    flex-shrink: 0;
}
.dp-gallery__thumb.is-active { border-color: var(--dp-primary); }
.dp-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.dp-product__brand { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--dp-accent); }
.dp-product__title { font-size: clamp(1.4rem, 4vw, 2.1rem); margin: .35rem 0 .6rem; }

.dp-product__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: .85rem; color: var(--dp-text-muted); }
.dp-product__summary { margin: 1rem 0; color: var(--dp-text-muted); font-size: 1rem; }

.dp-product__badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; padding: 0; list-style: none; }

.dp-product__pricing { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0; }

.dp-product__form { display: grid; gap: 1.25rem; }

.dp-options { border: 1px solid var(--dp-border); border-radius: var(--dp-radius-lg); padding: 1rem; margin: 0; }
.dp-options__legend { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; padding: 0; }
.dp-options__name { font-weight: 600; }
.dp-options__required { font-size: .72rem; font-weight: 700; color: var(--dp-danger); text-transform: uppercase; }
.dp-options__optional { font-size: .72rem; color: var(--dp-text-muted); text-transform: uppercase; }
.dp-options__hint { margin: .35rem 0 0; font-size: .82rem; color: var(--dp-text-muted); }
.dp-options__list { display: grid; gap: .3rem; margin-top: .75rem; }

.dp-option {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .75rem;
    border-radius: var(--dp-radius);
    cursor: pointer;
    transition: background-color .15s ease;
}
.dp-option:hover { background: var(--dp-surface-alt); }
.dp-option input { accent-color: var(--dp-primary); width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.dp-option:has(input:checked) { background: color-mix(in srgb, var(--dp-primary) 8%, transparent); }
.dp-option__body { flex: 1; display: flex; flex-direction: column; }
.dp-option__name { font-size: .95rem; }
.dp-option__desc { font-size: .8rem; color: var(--dp-text-muted); }
.dp-option__price { font-weight: 600; color: var(--dp-primary); font-size: .9rem; white-space: nowrap; }

.dp-field { display: grid; gap: .35rem; }
.dp-field__label { font-size: .85rem; font-weight: 600; }

.dp-input {
    width: 100%;
    padding: .7rem .9rem;
    border: 1.5px solid var(--dp-border);
    border-radius: var(--dp-radius);
    background: var(--dp-surface);
    color: var(--dp-text);
    font-family: inherit; font-size: .95rem;
    transition: border-color .18s ease;
}
.dp-input:focus { outline: none; border-color: var(--dp-primary); }
.dp-input--sm { padding: .45rem .6rem; font-size: .85rem; }

.dp-product__buy { display: flex; gap: .75rem; align-items: stretch; }

.dp-qty {
    display: inline-flex; align-items: center;
    border: 1.5px solid var(--dp-border);
    border-radius: var(--dp-radius-pill, 999px);
    background: var(--dp-surface);
    padding: .2rem;
    flex-shrink: 0;
}
.dp-qty__btn {
    width: 2.4rem; height: 2.4rem;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: var(--dp-surface-alt); color: var(--dp-primary);
    font-size: 1.2rem; line-height: 1;
}
.dp-qty__btn:disabled { opacity: .35; }
.dp-qty__input { width: 3rem; border: 0; text-align: center; font-weight: 600; background: transparent; color: var(--dp-text); }
.dp-qty__input:focus { outline: none; }
.dp-qty__unit { font-size: .8rem; color: var(--dp-text-muted); padding-right: .5rem; }

.dp-product__submit { flex: 1; justify-content: space-between; }
.dp-product__submit-total { font-weight: 700; }
.dp-product__stock { font-size: .85rem; color: var(--dp-warning); font-weight: 600; margin: 0; }

.dp-product__actions { display: flex; gap: .5rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--dp-border); }

.dp-specs { margin: 0; display: grid; gap: .5rem; }
.dp-specs__row { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--dp-border); }
.dp-specs__row:last-child { border-bottom: 0; }
.dp-specs dt { font-weight: 600; color: var(--dp-text-muted); font-size: .9rem; }
.dp-specs dd { margin: 0; }

@media (max-width: 560px) {
    .dp-specs__row { grid-template-columns: 1fr; gap: .15rem; }
}

.dp-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.dp-table th, .dp-table td { padding: .65rem .5rem; text-align: left; border-bottom: 1px solid var(--dp-border); }
.dp-table th { font-weight: 600; color: var(--dp-text-muted); width: 40%; }
.dp-table tr:last-child th, .dp-table tr:last-child td { border-bottom: 0; }
.dp-table--hours tr.is-today { background: var(--dp-surface-alt); font-weight: 600; }

.dp-list { margin: 0; padding-left: 1.25rem; display: grid; gap: .35rem; }

/* --------------------------------------------------------------------------
   15. Barra do carrinho
   -------------------------------------------------------------------------- */

.dp-cartbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    padding: .75rem 0 calc(.75rem + env(safe-area-inset-bottom));
    background: var(--dp-primary);
    box-shadow: 0 -4px 20px rgba(0,0,0,.15);
    animation: dp-slide-up .25s ease;
}

@keyframes dp-slide-up {
    from { transform: translateY(100%); }
    to { transform: none; }
}

.dp-cartbar__inner { display: flex; align-items: center; gap: 1rem; color: var(--dp-surface); }
.dp-cartbar__inner:hover { color: var(--dp-surface); }

.dp-cartbar__icon { position: relative; display: grid; place-items: center; }
.dp-cartbar__icon svg { width: 1.6rem; height: 1.6rem; }

.dp-cartbar__count {
    position: absolute; top: -.4rem; right: -.5rem;
    min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--dp-accent); color: var(--dp-on-accent);
    font-size: .72rem; font-weight: 700;
}

.dp-cartbar__info { display: flex; flex-direction: column; line-height: 1.25; }
.dp-cartbar__info small { opacity: .8; font-size: .78rem; }

.dp-cartbar__total { display: flex; align-items: center; gap: .35rem; margin-left: auto; font-size: 1.1rem; }
.dp-cartbar__total svg { width: 1.1rem; height: 1.1rem; }

/* --------------------------------------------------------------------------
   16. Alertas, vazio, paginacao
   -------------------------------------------------------------------------- */

.dp-alert {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .9rem 1rem; margin: 1rem 0;
    border-radius: var(--dp-radius);
    border-left: 4px solid currentColor;
    background: var(--dp-surface);
    font-size: .92rem;
}
.dp-alert svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; margin-top: .1rem; }
.dp-alert--success { color: var(--dp-success); background: color-mix(in srgb, var(--dp-success) 8%, var(--dp-surface)); }
.dp-alert--error   { color: var(--dp-danger);  background: color-mix(in srgb, var(--dp-danger) 8%, var(--dp-surface)); }
.dp-alert--warning { color: var(--dp-warning); background: color-mix(in srgb, var(--dp-warning) 8%, var(--dp-surface)); }
.dp-alert--info    { color: var(--dp-primary); background: color-mix(in srgb, var(--dp-primary) 8%, var(--dp-surface)); }
.dp-alert > span, .dp-alert > div { color: var(--dp-text); flex: 1; }
.dp-alert__list { margin: .35rem 0 0; padding-left: 1.1rem; }
.dp-alert__close { border: 0; background: none; color: inherit; font-size: 1.35rem; line-height: 1; padding: 0 .25rem; }

.dp-empty { text-align: center; padding: 3.5rem 1rem; }
.dp-empty__title { font-size: 1.35rem; margin-bottom: .5rem; }
.dp-empty__text { color: var(--dp-text-muted); max-width: 32rem; margin: 0 auto 1.5rem; }
.dp-empty code {
    background: var(--dp-surface-alt); padding: .15rem .4rem;
    border-radius: var(--dp-radius-sm); font-size: .85em;
}

.dp-pagination { display: flex; align-items: center; justify-content: center; gap: .35rem; flex-wrap: wrap; margin: 2.5rem 0 1rem; }
.dp-pagination__item {
    min-width: 2.4rem; height: 2.4rem;
    display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
    padding: 0 .75rem;
    border: 1px solid var(--dp-border); border-radius: var(--dp-radius);
    background: var(--dp-surface);
    font-size: .9rem; font-weight: 500;
}
.dp-pagination__item:hover { border-color: var(--dp-primary); color: var(--dp-primary); }
.dp-pagination__item.is-active { background: var(--dp-primary); border-color: var(--dp-primary); color: var(--dp-surface); }
.dp-pagination__item svg { width: .9rem; height: .9rem; }
.dp-pagination__gap { padding: 0 .35rem; color: var(--dp-text-muted); }

.dp-infogrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.dp-infogrid__card {
    background: var(--dp-surface); border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg); padding: 1.25rem;
}
.dp-infogrid__title { font-family: var(--dp-font-sans); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--dp-text-muted); }
.dp-infogrid__value { margin: .4rem 0; font-size: 1.1rem; font-weight: 600; }
.dp-infogrid__value--small { font-size: .92rem; font-weight: 400; }
.dp-infogrid__link { font-size: .85rem; font-weight: 600; color: var(--dp-primary); }

/* Fundo escuro atras da gaveta de filtros no celular. */
.dp-backdrop {
    position: fixed; inset: 0; z-index: 190;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
}

/* Aviso flutuante de "adicionado ao carrinho". */
.dp-toast {
    position: fixed; left: 50%; bottom: 6rem; z-index: 300;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: .6rem;
    padding: .75rem 1.25rem;
    border-radius: var(--dp-radius-pill, 999px);
    background: var(--dp-text); color: var(--dp-surface);
    box-shadow: var(--dp-shadow-lg);
    font-size: .9rem; font-weight: 500;
    animation: dp-toast-in .25s ease;
}
.dp-toast svg { width: 1.1rem; height: 1.1rem; }
.dp-toast--error { background: var(--dp-danger); }

@keyframes dp-toast-in {
    from { opacity: 0; transform: translate(-50%, .75rem); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* --------------------------------------------------------------------------
   17. Carrinho
   -------------------------------------------------------------------------- */

.dp-cart { display: grid; grid-template-columns: 1fr 21rem; gap: 1.75rem; align-items: start; }

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

.dp-cartlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }

.dp-cartitem {
    display: grid;
    grid-template-columns: 5rem 1fr auto;
    gap: 1rem;
    padding: 1rem;
    background: var(--dp-surface);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg);
}
.dp-cartitem.has-problem { border-color: var(--dp-warning); }

.dp-cartitem__media { border-radius: var(--dp-radius); overflow: hidden; background: var(--dp-surface-alt); }
.dp-cartitem__media img { width: 5rem; height: 5rem; object-fit: cover; }

.dp-cartitem__body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.dp-cartitem__name { font-weight: 600; font-size: .98rem; }
.dp-cartitem__unit { font-size: .8rem; color: var(--dp-text-muted); margin-top: auto; }

.dp-cartitem__options { list-style: none; margin: .15rem 0 0; padding: 0; font-size: .82rem; color: var(--dp-text-muted); }
.dp-cartitem__optgroup { font-weight: 600; }
.dp-cartitem__options small { color: var(--dp-primary); font-weight: 600; }

.dp-cartitem__notes {
    display: flex; align-items: center; gap: .35rem;
    margin: .35rem 0 0; font-size: .8rem; font-style: italic; color: var(--dp-text-muted);
}
.dp-cartitem__notes svg { width: .9rem; height: .9rem; flex-shrink: 0; }

.dp-cartitem__actions { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.dp-cartitem__total { font-size: 1.05rem; color: var(--dp-primary); }

.dp-cartitem__remove {
    border: 0; background: none; color: var(--dp-text-muted); padding: .25rem;
    transition: color .18s ease;
}
.dp-cartitem__remove:hover { color: var(--dp-danger); }
.dp-cartitem__remove svg { width: 1.05rem; height: 1.05rem; }

.dp-qty--sm .dp-qty__btn { width: 1.9rem; height: 1.9rem; font-size: 1rem; }
.dp-qty--sm .dp-qty__input { width: 2.4rem; font-size: .9rem; }

/* O botao "Atualizar" some quando ha JavaScript: a alteracao ja e automatica. */
.js .dp-cartitem__apply { display: none; }

@media (max-width: 560px) {
    .dp-cartitem { grid-template-columns: 4rem 1fr; }
    .dp-cartitem__actions { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
}

.dp-cart__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 1.25rem; }

.dp-cart__summary { position: sticky; top: 9rem; }

@media (max-width: 900px) {
    .dp-cart__summary { position: static; }
}

.dp-summary {
    background: var(--dp-surface);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg);
    padding: 1.25rem;
    display: grid; gap: 1rem;
}
.dp-summary__title { font-size: 1.1rem; }

.dp-summary__coupon { display: flex; gap: .5rem; align-items: center; }
.dp-summary__coupon.is-applied {
    justify-content: space-between;
    padding: .6rem .85rem;
    background: color-mix(in srgb, var(--dp-success) 10%, transparent);
    border-radius: var(--dp-radius);
    font-size: .9rem;
}
.dp-summary__coupon.is-applied small { color: var(--dp-text-muted); margin-left: .35rem; }
.dp-summary__coupon-remove { border: 0; background: none; font-size: 1.35rem; line-height: 1; color: var(--dp-text-muted); }

.dp-summary__cep { display: flex; gap: .5rem; }
.dp-summary__shipping-result { margin: .5rem 0 0; font-size: .85rem; color: var(--dp-primary); font-weight: 500; }

.dp-summary__lines { margin: 0; display: grid; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--dp-border); }
.dp-summary__lines > div { display: flex; justify-content: space-between; font-size: .92rem; }
.dp-summary__lines dt, .dp-summary__lines dd { margin: 0; }
.dp-summary__lines .is-discount { color: var(--dp-success); font-weight: 600; }
.dp-summary__note { color: var(--dp-text-muted); font-size: .85rem !important; }

.dp-summary__total {
    display: flex; align-items: baseline; justify-content: space-between;
    padding-top: 1rem; border-top: 1px solid var(--dp-border);
}
.dp-summary__total strong { font-size: 1.5rem; color: var(--dp-primary); }

.dp-summary__hint { margin: 0; font-size: .85rem; color: var(--dp-text-muted); text-align: center; }
.dp-summary__hint--warning { color: var(--dp-warning); }

/* --------------------------------------------------------------------------
   18. Checkout
   -------------------------------------------------------------------------- */

.dp-checkout { display: grid; grid-template-columns: 1fr 22rem; gap: 1.75rem; align-items: start; }

@media (max-width: 900px) {
    .dp-checkout { grid-template-columns: 1fr; }
    .dp-checkout__summary { order: -1; }
}

.dp-checkout__main { display: grid; gap: 1rem; }

.dp-step {
    background: var(--dp-surface);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg);
    padding: 1.5rem;
}
.dp-step__title { display: flex; align-items: center; gap: .65rem; font-size: 1.1rem; margin-bottom: 1.25rem; }

.dp-step__number {
    display: grid; place-items: center;
    width: 1.75rem; height: 1.75rem;
    border-radius: 50%;
    background: var(--dp-primary); color: var(--dp-surface);
    font-family: var(--dp-font-sans); font-size: .85rem; font-weight: 700;
    flex-shrink: 0;
}

.dp-step__hint { margin: 0 0 1rem; font-size: .88rem; color: var(--dp-text-muted); }
.dp-step__hint a { color: var(--dp-primary); font-weight: 600; }

.dp-step__identified {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .85rem 1rem;
    background: var(--dp-surface-alt);
    border-radius: var(--dp-radius);
}
.dp-step__identified small { display: block; color: var(--dp-text-muted); font-size: .85rem; }

.dp-step__address, .dp-step__schedule, .dp-step__change { margin-top: 1.25rem; }

.dp-address-form { display: grid; gap: .85rem; margin-top: 1rem; }

.dp-fieldrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .85rem; }
.dp-field--sm { max-width: 11rem; }
.dp-field--xs { max-width: 6rem; }
.dp-field__label em { color: var(--dp-danger); font-style: normal; }
.dp-field__hint { font-size: .78rem; color: var(--dp-text-muted); }

.dp-check--inline { display: inline-flex; margin-top: .5rem; }

/* Escolhas de entrega e pagamento */
.dp-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .65rem; }
.dp-choices--stack { grid-template-columns: 1fr; margin-bottom: 1rem; }

.dp-choice {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .9rem 1rem;
    border: 1.5px solid var(--dp-border);
    border-radius: var(--dp-radius);
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
}
.dp-choice:hover { border-color: var(--dp-primary); }
.dp-choice:has(input:checked) {
    border-color: var(--dp-primary);
    background: color-mix(in srgb, var(--dp-primary) 6%, transparent);
}
.dp-choice.is-disabled { opacity: .5; cursor: not-allowed; }
.dp-choice input { accent-color: var(--dp-primary); width: 1.15rem; height: 1.15rem; margin-top: .1rem; flex-shrink: 0; }

.dp-choice__body { display: flex; flex-direction: column; gap: .2rem; }
.dp-choice__name { font-size: .95rem; }
.dp-choice__desc { font-size: .82rem; color: var(--dp-text-muted); }
.dp-choice__meta { font-size: .78rem; color: var(--dp-text-muted); }

/* Resumo do checkout */
.dp-checkout__summary { position: sticky; top: 9rem; }

@media (max-width: 900px) {
    .dp-checkout__summary { position: static; }
}

.dp-summary__items { list-style: none; margin: 0; padding: 0 0 1rem; display: grid; gap: .6rem; }
.dp-summary__items li { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; font-size: .88rem; }
.dp-summary__qty { color: var(--dp-text-muted); white-space: nowrap; }
.dp-summary__item-name small { display: block; font-size: .78rem; color: var(--dp-text-muted); }
.dp-summary__item-total { font-weight: 600; white-space: nowrap; }

/* --------------------------------------------------------------------------
   19. Pedido: sucesso, itens e linha do tempo
   -------------------------------------------------------------------------- */

.dp-success { text-align: center; padding: 3rem 1rem 2rem; }

.dp-success__icon {
    display: grid; place-items: center;
    width: 4.5rem; height: 4.5rem; margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--dp-success) 15%, transparent);
    color: var(--dp-success);
}
.dp-success__icon svg { width: 2.25rem; height: 2.25rem; stroke-width: 2.5; }
.dp-success__title { font-size: clamp(1.5rem, 4vw, 2rem); }
.dp-success__text { color: var(--dp-text-muted); margin: .75rem 0 1.75rem; }
.dp-success__actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

.dp-panel--highlight { border-color: var(--dp-primary); border-width: 2px; }

.dp-payment-amount {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 1rem 0;
    padding: 1rem;
    background: var(--dp-surface-alt);
    border-radius: var(--dp-radius);
}
.dp-payment-amount strong { font-size: 1.5rem; color: var(--dp-primary); }

.dp-orderitems { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .85rem; }

.dp-orderitem { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: .85rem; align-items: start; }
.dp-orderitem__image { width: 3.5rem; height: 3.5rem; border-radius: var(--dp-radius-sm); object-fit: cover; background: var(--dp-surface-alt); }
.dp-orderitem__options { list-style: none; margin: .2rem 0 0; padding: 0; font-size: .8rem; color: var(--dp-text-muted); }
.dp-orderitem__notes { display: block; margin-top: .2rem; font-size: .8rem; font-style: italic; color: var(--dp-text-muted); }
.dp-orderitem__figures { text-align: right; display: flex; flex-direction: column; gap: .15rem; }
.dp-orderitem__figures span { font-size: .8rem; color: var(--dp-text-muted); }

/* Linha do tempo */
.dp-timeline { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; position: relative; }

.dp-timeline::before {
    content: ''; position: absolute; top: .55rem; left: 5%; right: 5%; height: 2px;
    background: var(--dp-border); z-index: 0;
}

.dp-timeline__step {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    flex: 1; text-align: center;
}

.dp-timeline__marker {
    width: 1.15rem; height: 1.15rem; border-radius: 50%;
    background: var(--dp-surface);
    border: 2px solid var(--dp-border);
    transition: background-color .3s ease, border-color .3s ease;
}
.dp-timeline__step.is-done .dp-timeline__marker { background: var(--dp-success); border-color: var(--dp-success); }
.dp-timeline__step.is-current .dp-timeline__marker {
    background: var(--dp-primary); border-color: var(--dp-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--dp-primary) 20%, transparent);
}

.dp-timeline__label { font-size: .78rem; color: var(--dp-text-muted); line-height: 1.25; }
.dp-timeline__step.is-done .dp-timeline__label { color: var(--dp-text); }
.dp-timeline__step.is-current .dp-timeline__label { color: var(--dp-primary); font-weight: 600; }

.dp-timeline__estimate { margin: 1.5rem 0 0; text-align: center; color: var(--dp-text-muted); }

.dp-history { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .88rem; }
.dp-history li { display: grid; grid-template-columns: 5rem 1fr; gap: .75rem; }
.dp-history time { color: var(--dp-text-muted); }

.dp-order-actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; margin: 2rem 0; }

/* --------------------------------------------------------------------------
   20. Autenticacao e area do cliente
   -------------------------------------------------------------------------- */

.dp-auth { display: grid; place-items: center; padding: 2.5rem 1rem; }

.dp-authbox {
    width: 100%; max-width: 26rem;
    background: var(--dp-surface);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg);
    padding: 2rem;
}
.dp-authbox__title { font-size: 1.5rem; }
.dp-authbox__subtitle { margin: .5rem 0 1.5rem; color: var(--dp-text-muted); font-size: .92rem; }
.dp-authbox__footer { margin: 1.5rem 0 0; text-align: center; font-size: .9rem; color: var(--dp-text-muted); }
.dp-authbox__footer a { color: var(--dp-primary); font-weight: 600; }

.dp-form { display: grid; gap: 1rem; }
.dp-form__row { display: flex; justify-content: flex-end; font-size: .85rem; }
.dp-form__actions { display: flex; gap: .75rem; flex-wrap: wrap; }

.dp-link { color: var(--dp-primary); font-weight: 600; }

.dp-account { display: grid; grid-template-columns: 15rem 1fr; gap: 1.75rem; align-items: start; }

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

.dp-account__nav {
    background: var(--dp-surface);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg);
    padding: .75rem;
    position: sticky; top: 9rem;
}

@media (max-width: 900px) {
    .dp-account__nav { position: static; }
    .dp-account__list { display: flex; overflow-x: auto; scrollbar-width: none; }
    .dp-account__list::-webkit-scrollbar { display: none; }
    .dp-account__link { white-space: nowrap; }
}

.dp-account__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }

.dp-account__link {
    display: flex; align-items: center; gap: .65rem;
    width: 100%;
    padding: .65rem .85rem;
    border: 0; background: none;
    border-radius: var(--dp-radius);
    color: var(--dp-text); font-size: .92rem; text-align: left;
    transition: background-color .18s ease, color .18s ease;
}
.dp-account__link:hover { background: var(--dp-surface-alt); color: var(--dp-primary); }
.dp-account__link.is-active { background: var(--dp-primary); color: var(--dp-surface); font-weight: 600; }
.dp-account__link--danger { color: var(--dp-danger); }
.dp-account__link svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }

.dp-account__logout { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--dp-border); }
.dp-account__content { display: grid; gap: 1rem; }

.dp-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.dp-panel__head .dp-panel__title { margin-bottom: 0; }

/* Indicadores */
.dp-stats {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem;
}
.dp-stat {
    background: var(--dp-surface); border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg); padding: 1.25rem;
    display: grid; gap: .25rem;
}
.dp-stat__value { font-family: var(--dp-font-display); font-size: 1.5rem; color: var(--dp-primary); }
.dp-stat__label { font-size: .82rem; color: var(--dp-text-muted); }

/* Notificacoes */
.dp-notifications { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.dp-notifications a {
    display: grid; gap: .15rem;
    padding: .75rem 1rem;
    background: var(--dp-surface-alt);
    border-radius: var(--dp-radius);
    border-left: 3px solid var(--dp-primary);
}
.dp-notifications span { font-size: .88rem; color: var(--dp-text-muted); }
.dp-notifications time { font-size: .78rem; color: var(--dp-text-muted); }

/* Lista de pedidos */
.dp-orderlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }

.dp-ordercard {
    background: var(--dp-surface); border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg); padding: 1.15rem;
    display: grid; gap: .85rem;
}
.dp-ordercard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.dp-ordercard__number { display: block; font-size: 1rem; }
.dp-ordercard__date { font-size: .82rem; color: var(--dp-text-muted); }

.dp-ordercard__body { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.dp-ordercard__thumbs { list-style: none; margin: 0; padding: 0; display: flex; }
.dp-ordercard__thumbs li { margin-left: -.5rem; }
.dp-ordercard__thumbs li:first-child { margin-left: 0; }
.dp-ordercard__thumbs img {
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    object-fit: cover; border: 2px solid var(--dp-surface);
    background: var(--dp-surface-alt);
}
.dp-ordercard__info { display: flex; flex-direction: column; font-size: .82rem; color: var(--dp-text-muted); }
.dp-ordercard__total { margin-left: auto; font-size: 1.1rem; color: var(--dp-primary); }
.dp-ordercard__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.dp-orderstatus {
    padding: .3rem .75rem; border-radius: var(--dp-radius-pill, 999px);
    font-size: .78rem; font-weight: 700; white-space: nowrap;
}
.dp-orderstatus--pending    { background: color-mix(in srgb, var(--dp-warning) 15%, transparent); color: var(--dp-warning); }
.dp-orderstatus--confirmed,
.dp-orderstatus--preparing,
.dp-orderstatus--ready,
.dp-orderstatus--dispatched { background: color-mix(in srgb, var(--dp-primary) 12%, transparent); color: var(--dp-primary); }
.dp-orderstatus--delivered  { background: color-mix(in srgb, var(--dp-success) 15%, transparent); color: var(--dp-success); }
.dp-orderstatus--cancelled  { background: color-mix(in srgb, var(--dp-danger) 12%, transparent);  color: var(--dp-danger); }

/* Enderecos */
.dp-addresslist {
    list-style: none; margin: 0 0 1rem; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .85rem;
}
.dp-addresscard {
    background: var(--dp-surface); border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg); padding: 1.15rem;
    display: grid; gap: .5rem; align-content: start;
}
.dp-addresscard.is-default { border-color: var(--dp-primary); }
.dp-addresscard__head { display: flex; align-items: center; gap: .5rem; }
.dp-addresscard__text { margin: 0; font-size: .88rem; line-height: 1.5; }
.dp-addresscard__zone { margin: 0; font-size: .82rem; color: var(--dp-primary); font-weight: 600; }
.dp-addresscard__actions { display: flex; gap: .35rem; margin-top: auto; }

/* Cupons */
.dp-coupons {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .85rem;
}
.dp-coupon {
    display: grid; gap: .75rem;
    background: var(--dp-surface);
    border: 1px dashed var(--dp-primary);
    border-radius: var(--dp-radius-lg);
    padding: 1.15rem;
}
.dp-coupon__value strong { font-size: 1.15rem; color: var(--dp-primary); }
.dp-coupon__code {
    display: inline-block;
    padding: .35rem .75rem;
    background: var(--dp-surface-alt);
    border-radius: var(--dp-radius-sm);
    font-family: ui-monospace, 'SFMono-Regular', monospace;
    font-size: .95rem; font-weight: 700; letter-spacing: .05em;
}
.dp-coupon__desc { margin: .5rem 0 0; font-size: .85rem; color: var(--dp-text-muted); }
.dp-coupon__rules { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .8rem; color: var(--dp-text-muted); }

.dp-privacy-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.25rem 0; }

/* --------------------------------------------------------------------------
   21. Impressao
   -------------------------------------------------------------------------- */

@media print {
    .dp-header, .dp-footer, .dp-cartbar, .dp-catalog__aside, .dp-toolbar { display: none !important; }
    body.dp-body { background: #fff; /* estrutural: papel branco na impressao */ padding: 0; }
    .dp-panel { border: 0; padding: 0; }
}