/* ===========================================================================
   LA TIENDA (1.36.0) — la ventana de files/dk-tienda.js
   ===========================================================================
   SIN COLORES PROPIOS. Lee las mismas variables que la tarjeta del catálogo
   (--dk-producto-*, el acento y el fondo del bloque «Catálogo») con los
   MISMOS respaldos que styles.css, en los dos temas. Lo que el negocio eligió
   en «Diseño y color» para su catálogo es lo que sale aquí, y un dkard que no
   eligió nada se ve como su catálogo de siempre.

   Y redefine --dk-boton y --dk-contraste igual que `.dkrd-main .dkrd-catalog`
   («COLOR POR SECCIÓN — las secciones que faltaban», en styles.css): la
   ventana vive fuera de esa sección —va pegada al <body>— y sin esto sus
   respaldos leerían la paleta general en vez de la del catálogo.

   LAS CAPAS: 1500 la ventana, y dentro solo 1 a 4 (ver dk-tienda.js y
   CapasDeLaPaginaTest). La barra flotante sube a 1600 mientras está abierta.
   =========================================================================== */

/* Para los rótulos que solo leen los lectores de pantalla. */
.dk-solo-lector {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.dk-tienda {
    --dk-boton: var(--dk-catalogo-acento, var(--dk-boton-base));
    --dk-contraste: var(--dk-catalogo-fondo, var(--dk-contraste-base));

    /* Tema «Contraste» (el de fábrica): fondo oscuro, texto claro. */
    --dkt-fondo: var(--dk-fondo);
    --dkt-tinta: #fff;
    --dkt-tinta-suave: rgba(255, 255, 255, 0.72);
    --dkt-linea: rgba(255, 255, 255, 0.12);
    --dkt-linea-fuerte: rgba(255, 255, 255, 0.28);
    --dkt-chip: rgba(255, 255, 255, 0.08);
    --dkt-hoja: color-mix(in srgb, var(--dk-fondo) 90%, #fff);
    --dkt-solida: color-mix(in srgb, var(--dk-fondo) 84%, #fff);

    /* La tarjeta, letra por letra la de styles.css. */
    --dkt-tarjeta: var(--dk-producto-fondo, #0000005e);
    --dkt-borde-tarjeta: #ffffff33;
    --dkt-titulo: var(--dk-producto-titulo, #fff);
    --dkt-texto: var(--dk-producto-texto, #fff);
    --dkt-precio: var(--dk-producto-precio);
    --dkt-boton: var(--dk-producto-boton, #fff);
    --dkt-boton-tinta: var(--dk-producto-acento, var(--dk-boton));
    --dkt-etiqueta: var(--dk-producto-etiqueta, var(--dk-boton));
    --dkt-etiqueta-tinta: var(--dk-producto-etiqueta-texto, #fff);

    /* El par de los botones llenos de la página (ver .btn-mostrar-todo):
       el acento del catálogo con la tinta del fondo. */
    --dkt-acento: var(--dk-catalogo-mostrar, var(--dk-boton));
    --dkt-acento-tinta: var(--dk-catalogo-mostrar-texto, var(--dk-fondo));

    position: fixed;
    inset: 0;
    z-index: 1500;
    background: var(--dkt-fondo);
    color: var(--dkt-tinta);
    font-family: 'Barlow', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

[data-tema="claro"] .dk-tienda {
    --dkt-tinta: var(--dk-contraste);
    --dkt-tinta-suave: color-mix(in srgb, var(--dk-contraste) 70%, transparent);
    --dkt-linea: rgba(0, 0, 0, 0.1);
    --dkt-linea-fuerte: rgba(0, 0, 0, 0.26);
    --dkt-chip: rgba(0, 0, 0, 0.05);
    --dkt-hoja: #fff;
    --dkt-solida: #fff;
    --dkt-tarjeta: var(--dk-producto-fondo, #fff);
    --dkt-borde-tarjeta: rgba(0, 0, 0, 0.08);
    --dkt-titulo: var(--dk-producto-titulo, var(--dk-contraste));
    --dkt-texto: var(--dk-producto-texto, var(--dk-contraste));
}

.dk-tienda[hidden] { display: none; }

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

/* Con :where(), PESO CASI CERO: escrito `.dk-tienda button` le ganaba a cada
   regla de una clase (.dkt-agregar, .dkt-chip--activa…) y el «+» salía con
   la tinta heredada, blanco sobre su botón blanco. */
:where(.dk-tienda) button { font: inherit; color: inherit; }

.dk-tienda :focus-visible {
    outline: 2px solid var(--dkt-acento);
    outline-offset: 2px;
}

.dkt-marco {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 1240px;
    margin: 0 auto;
}

/* --- La cabecera ------------------------------------------------------- */
.dkt-cabecera {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 56px;
    padding: env(safe-area-inset-top) 8px 0 4px;
    border-bottom: 1px solid var(--dkt-linea);
}
.dkt-icono {
    position: relative;
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.dkt-icono--redondo { width: 36px; height: 36px; background: var(--dkt-chip); }
/* «‹ VOLVER», CON CARA DE BOTÓN (el dueño, 17/10). Era una flecha suelta y,
   sin la barra flotante, la única salida de la tienda: tiene que verse. Del
   color de las acciones, el mismo de «Ver mi pedido». */
.dkt-volver {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 38px;
    margin: 0 4px 0 6px;
    padding: 0 14px 0 8px;
    border: 0;
    border-radius: 999px;
    background: var(--dkt-acento);
    color: var(--dkt-acento-tinta);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}
.dkt-volver:hover { filter: brightness(1.08); }
.dkt-titulos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dkt-titulo {
    margin: 0;
    font-family: 'Blinker', sans-serif;
    /* 600 Y NO 700: de Blinker la página carga 200, 600 y 800, así que el 700
       se pintaba en 800 y el título se empastaba (el dueño, 17/10: «quedando
       ilegible»). */
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dkt-titulo:focus { outline: none; }
.dkt-negocio { font-size: 0.75rem; color: var(--dkt-tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* El renglón de abajo del título: el negocio y, en el teléfono, la cuenta.
   El nombre cede con puntos suspensivos; la cuenta no se corta. */
.dkt-subtitulo { display: flex; min-width: 0; font-size: 0.75rem; color: var(--dkt-tinta-suave); white-space: nowrap; }
.dkt-subtitulo .dkt-negocio { min-width: 0; }
.dkt-burbuja {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--dkt-acento);
    color: var(--dkt-acento-tinta);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.dkt-burbuja[hidden] { display: none; }

/* --- Las categorías en chips ------------------------------------------ */
.dkt-chips {
    flex: none;
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--dkt-linea);
}
.dkt-chips::-webkit-scrollbar { display: none; }
.dkt-chips[hidden] { display: none; }
.dkt-chips--sub { padding-top: 6px; padding-bottom: 6px; }
.dkt-chip {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1.5px solid var(--dkt-linea-fuerte);
    border-radius: 999px;
    background: transparent;
    font-size: 0.88rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}
.dkt-chip--sub { height: 30px; font-size: 0.8rem; }
.dkt-chip--chico { height: 32px; font-size: 0.8rem; }
/* Un valor de variación que con lo marcado no da nada: se ve, apagado. */
.dkt-chip--sin { opacity: 0.45; }
/* La muestra del color, dentro de su ficha (la pinta pintarFiltros). */
.dkt-muestra { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--dkt-linea-fuerte); }
.dkt-chip--activa { background: var(--dkt-acento); border-color: var(--dkt-acento); color: var(--dkt-acento-tinta); }
label.dkt-chip:focus-within { outline: 2px solid var(--dkt-acento); outline-offset: 2px; }

/* --- La fila de las categorías, con la vista en el teléfono ------------
   En escritorio solo lleva los chips (la vista está en la barra de abajo); en
   el teléfono se fusionan en una fila (los cortes, al final). La cuenta, con
   las dos clases: con una sola, `.dkt-cuenta` —que va después— le ganaba (así
   salía dos veces la vista en escritorio, el 17/10). */
.dkt-herramientas { flex: none; display: flex; align-items: center; }
.dkt-herramientas .dkt-chips { flex: 1 1 auto; min-width: 0; }
.dkt-vista-alternar,
.dkt-cuenta.dkt-cuenta--cabecera { display: none; }

/* --- La barra: cuántos, filtrar y la disposición ---------------------- */
.dkt-barra { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 16px; }
.dkt-cuenta { flex: 1; min-width: 0; font-size: 0.85rem; color: var(--dkt-tinta-suave); }
.dkt-filtrar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 12px;
    border: 1.5px solid currentColor;
    border-radius: 10px;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.dkt-filtrar .dkt-burbuja { position: static; }
/* EN LA CABECERA, A LA DERECHA DEL CARRITO Y DEL COLOR DE CONTRASTE (el dueño,
   17/10): la píldora de «Volver», al otro lado. La burbuja, al revés de
   colores: del color del botón, encima del botón, no se veía. */
.dkt-filtrar.dkt-filtrar--cabecera {
    position: relative;
    flex: none;
    height: 40px;
    margin-left: 2px;
    padding: 0 14px 0 12px;
    border: 0;
    border-radius: 999px;
    background: var(--dkt-acento);
    color: var(--dkt-acento-tinta);
    font-family: 'Barlow', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
}
.dkt-filtrar--cabecera .dkt-burbuja { background: var(--dkt-acento-tinta); color: var(--dkt-acento); }
.dkt-vistas { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--dkt-chip); }
.dkt-vistas button {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--dkt-tinta-suave);
    cursor: pointer;
}
.dkt-vistas .dkt-vista--activa { background: var(--dkt-solida); color: var(--dkt-tinta); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }

.dkt-activos {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.dkt-activos[hidden] { display: none; }
.dkt-activo {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: var(--dkt-chip);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}
.dkt-limpiar,
.dkt-enlace {
    padding: 6px 4px;
    border: 0;
    background: transparent;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
    cursor: pointer;
}

/* --- La lista ---------------------------------------------------------- */
.dkt-lista {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Abajo, aire para que lo último pase por encima de la barra flotante. */
    padding: 4px 16px 96px;
}
.dkt-lista:focus { outline: none; }

/* Tarjeta con foto grande (wireframe 02). */
.dkt-lista--completa .dkt-items:not(.dkt-items--filas) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
}
.dkt-tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--dkt-borde-tarjeta);
    border-radius: 18px;
    background: var(--dkt-tarjeta);
}
.dkt-foto {
    display: flex;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: linear-gradient(135deg, var(--dk-boton), transparent 140%);
    cursor: pointer;
}
.dkt-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dkt-sin-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: 'Blinker', sans-serif;
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--dkt-titulo);
    opacity: 0.55;
}
.dkt-insignia {
    position: absolute;
    top: 8px;
    left: 8px;
    max-width: calc(100% - 16px);
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--dkt-etiqueta);
    color: var(--dkt-etiqueta-tinta);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.dkt-insignia--borde { background: var(--dkt-solida); color: var(--dkt-tinta); border: 1px solid var(--dkt-linea-fuerte); }
.dkt-insignia--apagada { background: #52525b; color: #fff; }
.dkt-fila .dkt-insignia { position: static; }
.dkt-tarjeta--agotada .dkt-foto img { filter: grayscale(0.6); opacity: 0.7; }

.dkt-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
.dkt-nombre {
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    font-family: 'Blinker', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--dkt-titulo);
    cursor: pointer;
}
.dkt-detalle { font-size: 0.78rem; line-height: 1.3; color: var(--dkt-texto); opacity: 0.8; }
/* El precio a la izquierda y el «+» a la derecha, en la misma fila aunque la
   tarjeta sea angosta: lo que no cabe se parte DENTRO del precio. */
.dkt-pie-tarjeta { margin-top: auto; padding-top: 6px; display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
.dkt-precio { min-width: 0; font-family: 'Blinker', sans-serif; font-size: 1.05rem; font-weight: 700; line-height: 1.15; color: var(--dkt-precio); overflow-wrap: anywhere; }
.dkt-tarjeta .dkt-unidad { display: block; margin-top: 1px; }
/* CON EL «− 1 +» PUESTO no caben los dos en una tarjeta de teléfono, y el
   precio se partía en tres renglones («$ 48.» / «000 C» / «OP»). En la
   tarjeta el precio no se corta por dentro: el control baja a su renglón. */
.dkt-tarjeta .dkt-pie-tarjeta { flex-wrap: wrap; }
.dkt-tarjeta .dkt-precio { min-width: auto; overflow-wrap: normal; }
.dkt-tarjeta .dkt-control { margin-left: auto; }
.dkt-precio .price-moneda { margin-left: 3px; font-size: 0.62em; font-weight: 600; opacity: 0.85; }
.dkt-precio--cotizar { font-family: 'Barlow', sans-serif; font-size: 0.82rem; font-weight: 500; font-style: italic; opacity: 0.85; }
.dkt-antes { display: block; font-size: 0.75rem; font-weight: 400; opacity: 0.6; }
.dkt-desde { font-size: 0.7rem; font-weight: 500; }
.dkt-unidad { font-family: 'Barlow', sans-serif; font-size: 0.72rem; font-weight: 400; color: var(--dkt-texto); opacity: 0.75; white-space: nowrap; }

.dkt-control { flex: none; display: inline-flex; }
.dkt-agregar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: var(--dkt-boton);
    color: var(--dkt-boton-tinta);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}
.dkt-lleva {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border: 2px solid var(--dkt-solida);
    border-radius: 999px;
    background: var(--dkt-acento);
    color: var(--dkt-acento-tinta);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
}
.dkt-paso {
    display: inline-flex;
    align-items: center;
    height: 44px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--dkt-boton);
    color: var(--dkt-boton-tinta);
}
.dkt-paso button { width: 36px; height: 100%; border: 0; background: transparent; font-size: 1.25rem; cursor: pointer; }
.dkt-paso-n { min-width: 22px; text-align: center; font-weight: 700; }

/* El «Avísame» de lo agotado, el de la tarjeta de la página. */
.dk-tienda .card-avisame {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    background: #25d366;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}
.dk-tienda .card-avisame svg { width: 16px; height: 16px; fill: currentColor; }

/* El estado del stock bajo el nombre, con su punto. */
.dk-tienda .product-stock { display: flex; align-items: center; gap: 0.4em; margin: 0; font-size: 0.72rem; font-weight: 600; color: var(--dkt-texto); }
.dk-tienda .product-stock::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.dk-tienda .product-stock--bajo::before { background: #f59e0b; }
.dk-tienda .product-stock--agotado::before { background: #ef4444; }
.dk-tienda .product-stock--encargo::before { background: #7fb0ff; }

/* Con foto pequeña (wireframe 03): filas sobre el fondo de la tarjeta, para
   que el texto que el negocio pensó para su tarjeta se lea. */
.dkt-lista--compacta .dkt-items,
.dkt-items--filas {
    display: flex;
    flex-direction: column;
    padding: 0 14px;
    border: 1px solid var(--dkt-borde-tarjeta);
    border-radius: 18px;
    background: var(--dkt-tarjeta);
}
.dkt-fila { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--dkt-linea); }
/* Toda la tarjeta abre la ficha (alTocar), así que toda dice que se toca. */
.dkt-tarjeta,
.dkt-fila { cursor: pointer; }
.dkt-fila:last-child { border-bottom: 0; }
.dkt-fila .dkt-foto { flex: none; width: 76px; height: 76px; aspect-ratio: auto; border-radius: 12px; }
.dkt-fila .dkt-sin-foto { font-size: 1.6rem; }
.dkt-fila .dkt-cuerpo { padding: 0; gap: 3px; }
.dkt-fila .dkt-detalle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dkt-lista--compacta .dkt-fila .dkt-detalle { -webkit-line-clamp: 1; }

/* En «Todo», por categorías. */
/* AIRE ENTRE GRUPOS (el dueño, 17/10): con 18 px, una categoría de pocos
   productos —sin su «Ver los N» debajo— dejaba el rótulo de la siguiente
   pegado a su recuadro, y las dos se leían como una. */
.dkt-grupo { margin-top: 40px; }
.dkt-grupo:first-child { margin-top: 8px; }
.dkt-grupo-titulo {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--dkt-linea);
    font-family: 'Blinker', sans-serif;
    font-size: 0.95rem;
    /* 600 Y NO 700 (el dueño, 17/10): de Blinker se cargan 200, 600 y 800, y
       el 700 salía en 800, pesado para un rótulo de sección. */
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dkt-tinta-suave);
}
.dkt-grupo-cuenta { font-weight: 500; letter-spacing: 0; }
/* «VER LOS 6 DE RELOJES», CON CARA DE BOTÓN (el dueño, 17/10: «mejorar el
   botón de ver la categoría completa»). Era un enlace subrayado que se perdía
   entre dos rejillas; ahora es una píldora con borde del color de las
   acciones, que se llena al pasar. A lo ancho en el teléfono. */
.dkt-ver-grupo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: max-content;
    max-width: 100%;
    height: 42px;
    margin: 14px auto 0;
    padding: 0 18px;
    border: 1.5px solid var(--dkt-acento);
    border-radius: 999px;
    background: transparent;
    color: var(--dkt-acento);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}
.dkt-ver-grupo:hover { background: var(--dkt-acento); color: var(--dkt-acento-tinta); }
.dkt-ver-grupo [aria-hidden] { transition: transform 0.2s ease; }
.dkt-ver-grupo:hover [aria-hidden] { transform: translateX(3px); }
.dkt-cargar {
    display: block;
    width: 100%;
    max-width: 420px;
    height: 46px;
    margin: 20px auto 0;
    border: 1.5px solid var(--dkt-linea-fuerte);
    border-radius: 12px;
    background: transparent;
    font-weight: 600;
    cursor: pointer;
}

/* --- Sin resultados (wireframe 07) ------------------------------------- */
.dkt-vacio { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 460px; margin: 0 auto; padding: 32px 12px 8px; text-align: center; }
.dkt-vacio-icono { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--dkt-chip); color: var(--dkt-tinta-suave); }
.dkt-vacio h3 { margin: 0; font-family: 'Blinker', sans-serif; font-size: 1.2rem; }
.dkt-vacio p { margin: 0; font-size: 0.9rem; color: var(--dkt-tinta-suave); }
.dkt-vacio-quitar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dkt-vacio .dkt-primario { width: 100%; margin-top: 6px; }
.dkt-sugeridos { max-width: 820px; margin: 28px auto 0; }

.dkt-seccion {
    display: block;
    width: 100%;
    margin: 0;
    padding: 16px 0 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dkt-tinta-suave);
}

/* --- La barra de abajo: el pedido y el buscador ------------------------ */
/* SIEMPRE A LA VISTA (el dueño, 16/10) Y BLANCA DE LADO A LADO (17/10). La
   barra entera de color se comía la vista; ahora es blanca, en los dos temas
   —como la ficha del producto—, y el color de contraste va solo en lo que se
   toca y en lo que importa: el buscador, el botón y el total. De fábrica es
   el del botón «Mostrar todo» del catálogo; el negocio lo cambia en «Barra de
   la tienda» (dk-color-secciones.js).

   DE LADO A LADO aunque la tienda vaya centrada (.dkt-marco, 1240 px): los
   márgenes negativos la estiran hasta los bordes de la pantalla y el relleno
   devuelve lo de dentro al ancho de la página. Los porcentajes de margen y
   relleno se miden contra el marco, así que en el teléfono —donde el marco es
   la pantalla— los dos quedan en cero y en 16 px. */
.dkt-pie {
    --dkt-barra: var(--dk-tienda-barra, #fff);
    --dkt-barra-tinta: var(--dk-tienda-barra-texto, #1b1b1f);
    --dkt-barra-accion: var(--dk-tienda-barra-boton, var(--dkt-acento));
    --dkt-barra-accion-tinta: var(--dk-tienda-barra-boton-texto, var(--dkt-acento-tinta));
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-inline: calc(50% - 50vw);
    padding: 10px calc(50vw - 50% + 16px) calc(10px + env(safe-area-inset-bottom));
    background: var(--dkt-barra);
    color: var(--dkt-barra-tinta);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.16);
}
.dkt-pie-pedido { display: flex; align-items: center; gap: 12px; }
.dkt-pie-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dkt-pie-cuenta { font-size: 0.82rem; opacity: 0.72; }
/* EL TOTAL, GRANDE y del color de las acciones: es lo que se mira antes de
   tocar «Ver mi pedido». */
.dkt-pie-total {
    font-family: 'Blinker', sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.05;
    color: var(--dkt-barra-accion);
}
.dkt-pie-total:empty { display: none; }
.dkt-pie .dkt-pie-boton { background: var(--dkt-barra-accion); color: var(--dkt-barra-accion-tinta); }
.dkt-pie .dkt-pie-boton[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.dkt-pie .dkt-pie-boton:focus-visible,
.dkt-pie input:focus-visible { outline-color: var(--dkt-barra-accion); }
.dkt-pie-buscar { display: flex; align-items: center; gap: 8px; margin: 0; }
.dkt-pie-buscar .dkt-buscar-campo { flex: 1; min-width: 0; }
/* La lupa y la ✕ del buscador son del teléfono (los cortes, al final). */
.dkt-pie-lupa,
.dkt-pie-cerrar-buscar { display: none; }
/* El buscador: blanco, con el borde y la lupa del color de las acciones. */
.dkt-pie .dkt-buscar-campo {
    height: 46px;
    border: 2px solid var(--dkt-barra-accion);
    background: var(--dkt-barra);
    color: var(--dkt-barra-accion);
}
.dkt-pie .dkt-buscar-campo input { color: var(--dkt-barra-tinta); }
/* EL FOCO ES DEL CAMPO ENTERO, no del <input> de dentro (el dueño, 17/10: «se
   ve raro»): el contorno general de la tienda le pintaba un rectángulo
   metido en la caja redondeada. Se apaga en el <input> y el campo se marca
   con un halo del color de las acciones. */
.dkt-pie .dkt-buscar-campo input:focus,
.dkt-pie .dkt-buscar-campo input:focus-visible { outline: none; }
.dkt-pie .dkt-buscar-campo:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dkt-barra-accion) 28%, transparent); }
.dkt-pie .dkt-buscar-campo input::placeholder { color: var(--dkt-barra-tinta); opacity: 0.5; }
.dkt-pie .dkt-borrar { background: color-mix(in srgb, var(--dkt-barra-accion) 14%, transparent); color: var(--dkt-barra-accion); }
.dkt-pie-boton,
.dkt-primario {
    height: 46px;
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    background: var(--dkt-acento);
    color: var(--dkt-acento-tinta);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}
.dkt-primario--chico { height: 44px; padding: 0 14px; }
.dkt-primario[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* --- La hoja de filtros, DENTRO de la ventana -------------------------- */
/* DE BORDE A BORDE DE LA PANTALLA, no del marco (el dueño, 17/10: en
   escritorio el velo cubría solo el centro y la barra de abajo asomaba a los
   lados). La tienda va centrada a 1240 px: `left`/`right` en porcentaje se
   miden contra el marco, así que estos dos lo estiran hasta los bordes. Sin
   `fixed`: arriba sigue empezando donde el marco, bajo la barra del admin. */
.dkt-velo { position: absolute; inset: 0 calc(50% - 50vw); z-index: 2; background: rgba(0, 0, 0, 0.5); }
.dkt-velo[hidden],
.dkt-hoja[hidden] { display: none; }
.dkt-hoja { position: absolute; z-index: 3; display: flex; flex-direction: column; background: var(--dkt-hoja); color: var(--dkt-tinta); }
.dkt-hoja--filtros {
    left: 0;
    right: 0;
    bottom: 0;
    max-height: calc(100% - 48px);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
}
.dkt-asa { flex: none; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 999px; background: var(--dkt-linea-fuerte); }
.dkt-hoja-cabecera { flex: none; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 16px; border-bottom: 1px solid var(--dkt-linea); }
.dkt-hoja-cabecera h2 { flex: 1; margin: 0; font-family: 'Blinker', sans-serif; font-size: 1.15rem; }
.dkt-hoja-cabecera h2:focus { outline: none; }
.dkt-hoja-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 16px; }
.dkt-hoja-pie { flex: none; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--dkt-linea); }
.dkt-hoja-pie .dkt-primario { width: 100%; }
.dkt-seccion-filtros { min-width: 0; margin: 0; padding: 0; border: 0; }
.dkt-opciones-chip { display: flex; flex-wrap: wrap; gap: 8px; }
.dkt-opciones-chip + .dkt-opciones-chip,
.dkt-rango + .dkt-opciones-chip { margin-top: 10px; }
.dkt-casilla { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 0.95rem; cursor: pointer; }
.dkt-casilla input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--dkt-acento); }
.dkt-n { margin-left: auto; font-size: 0.8rem; color: var(--dkt-tinta-suave); }
.dkt-plegable .dkt-de-mas { display: none; }
.dkt-plegable.dkt-desplegada .dkt-de-mas { display: flex; }
.dkt-rango { display: flex; align-items: center; gap: 8px; }
.dkt-rango label { flex: 1; min-width: 0; }
.dkt-rango input {
    width: 100%;
    height: 46px;
    padding: 0 12px;
    border: 1.5px solid var(--dkt-linea-fuerte);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1rem;
}

.dkt-buscar-campo {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 8px 0 12px;
    border: 2px solid var(--dkt-acento);
    border-radius: 12px;
    color: var(--dkt-tinta-suave);
}
.dkt-buscar-campo input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--dkt-tinta);
    font: inherit;
    font-size: 1rem;
    outline: none;
}
.dkt-buscar-campo input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.dkt-borrar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: var(--dkt-chip);
    color: var(--dkt-tinta);
    cursor: pointer;
}
.dkt-borrar[hidden] { display: none; }

/* --- Lo de la página mientras la tienda está abierta ------------------- */
html.dk-tienda-abierta,
html.dk-tienda-abierta body { overflow: hidden; }

/* LA BARRA FLOTANTE (WhatsApp, la cuenta, el idioma…) NO ENTRA EN LA TIENDA
   (el dueño, 17/10: «no es necesaria»). Iba encima, en 1600, y tapaba las
   tarjetas de la derecha; la salida de la tienda es su «Volver», que ahora
   se ve. Con !important porque main.js los enseña con estilo en línea. */
html.dk-tienda-abierta .dkarta-ui-options { display: none !important; }

/* La mano que invita a deslizar y el cartel de bienvenida van por encima de
   1500 y hablan de la página, no de la tienda. */
html.dk-tienda-abierta .contenedor-mano,
html.dk-tienda-abierta .dkarta-guide-msg,
html.dk-tienda-abierta .dkarta-toggle-btn-label { display: none !important; }

/* La píldora «VER TOTAL» del cotizador (1999) la reemplaza la barra de abajo
   de la tienda. Solo cerrada: abierto, es la «CERRAR» del propio cotizador.
   Con display y no con visibility: el círculo del número (::after) declara
   `visibility: visible` y se quedaba flotando solo. El clic que abre el
   cotizador (karta_resume.click()) funciona igual sobre un nodo sin caja. */
html.dk-tienda-abierta #dkarta-ui.dk-hide { display: none; }

/* ===========================================================================
   EL BLOQUE DE CATEGORÍAS: CARRUSEL, LISTA Y LA ENTRADA DE LA TIENDA
   ===========================================================================
   Va aquí y no en styles.css para no tocar sus cortes (MediaQueriesEnOrdenTest
   y la trampa de las reglas repetidas en el mismo @media). Cada regla lleva
   una clase más que las de styles.css, así que gana sin depender del orden. */

/* El carrusel: la tira de los destacados de lado (--dk-carrusel-col lo
   calcula main.js con «Categorías por fila»). */
.dkrd-main .dkrd-categorias.dk-categorias--carrusel .categorias-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: var(--dk-carrusel-col, calc((100% - 2.4rem) / 3.3));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 0.4rem;
}
.dkrd-main .dkrd-categorias.dk-categorias--carrusel .categorias-grid::-webkit-scrollbar { display: none; }
.dkrd-main .dkrd-categorias.dk-categorias--carrusel .categoria-card { scroll-snap-align: start; }

/* La lista con foto y descripción (wireframe 01b). */
.dkrd-main .dkrd-categorias.dk-categorias--lista .categorias-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem 1.2rem;
}
.dkrd-main .dkrd-categorias.dk-categorias--lista .categoria-card {
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem;
}
.dkrd-main .dkrd-categorias.dk-categorias--lista .categoria-foto {
    flex: none;
    width: 84px;
    height: 84px;
    aspect-ratio: auto;
    border-radius: 12px;
}
.dkrd-main .dkrd-categorias.dk-categorias--lista .categoria-foto--vacia span { font-size: 2rem; }
.dkrd-main .dkrd-categorias.dk-categorias--lista .categoria-texto { padding: 0; gap: 0.25rem; }
.dkrd-main .dkrd-categorias.dk-categorias--lista .categoria-nombre { font-size: 1.05rem; }
.dkrd-main .dkrd-categorias.dk-categorias--lista .categoria-descripcion {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8rem;
}

/* LA DESCRIPCIÓN DE CADA CATEGORÍA, MÁS CHICA en todos los modos (el dueño,
   17/10: «casi tan grande como el título»). Iba a .92rem al lado de un nombre
   de 1.2: ahora acompaña al nombre y no compite con él. En el teléfono baja
   más y se corta en tres renglones (los cortes, al final). Pesa lo mismo que
   la de styles.css y va después. */
.dkrd-main .dkrd-categorias .categoria-descripcion { font-size: 0.82rem; line-height: 1.4; opacity: 0.78; }

/* «VER TODO EL CATÁLOGO», primero, en modo tienda (el dueño, 17/10: «arreglar
   y mejorar, en todos los modos»). Era una raya con texto en la rejilla y una
   caja alta y vacía en el carrusel. Ahora lleva el mosaico de fotos, su cuenta
   y un «Ver todo» con cara de botón.
   · Rejilla y lista: una franja a lo ancho, con el mosaico a la izquierda.
   · Carrusel: una tarjeta más de la tira, con el mosaico donde las otras
     llevan la foto. */
.dkrd-main .dkrd-categorias .categoria-card--todo {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    min-height: 0;
    padding: 0.75rem;
    border: 1.5px solid var(--dk-boton);
    background: color-mix(in srgb, var(--dk-boton) 8%, transparent);
}
.dkrd-main .dkrd-categorias .categoria-card--todo .categoria-texto {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.15rem;
    padding: 0;
}
.dkrd-main .dkrd-categorias .categoria-card--todo .categoria-cuantos { margin-top: 0; padding-top: 0; }

/* El mosaico: hasta cuatro fotos en dos por dos; con menos, se reparten. */
.dkrd-main .dkrd-categorias .categoria-mosaico {
    flex: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    width: 84px;
    height: 84px;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--dk-boton), transparent 140%);
}
.dkrd-main .dkrd-categorias .categoria-mosaico img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.dkrd-main .dkrd-categorias .categoria-mosaico--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.dkrd-main .dkrd-categorias .categoria-mosaico--2 { grid-template-rows: 1fr; }
.dkrd-main .dkrd-categorias .categoria-mosaico--3 img:first-child { grid-row: span 2; }
/* El de «Ver todo», de 3 × 3 (17/10). En la franja de la rejilla y la lista,
   algo más grande que las fotos de la lista: nueve en 84 px no se ven. */
.dkrd-main .dkrd-categorias .categoria-mosaico--9 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.dkrd-main .dkrd-categorias:not(.dk-categorias--carrusel) .categoria-card--todo .categoria-mosaico--9 { width: 108px; height: 108px; }

/* «Ver todo →»: el par de los botones llenos (el del buscador de al lado). */
.dkrd-main .dkrd-categorias .categoria-ir {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.15rem;
    border-radius: 999px;
    background: var(--dk-boton);
    color: var(--dk-fondo);
    font-family: 'Barlow', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}
.dkrd-main .dkrd-categorias .categoria-ir [aria-hidden] { transition: transform 0.2s ease; }
.dkrd-main .dkrd-categorias .categoria-card--todo:hover .categoria-ir [aria-hidden] { transform: translateX(3px); }

/* En el carrusel, una tarjeta como las de su lado: el mosaico arriba, del
   mismo 4:3 que sus fotos, y el botón abajo del todo. */
.dkrd-main .dkrd-categorias.dk-categorias--carrusel .categoria-card--todo {
    grid-column: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
}
.dkrd-main .dkrd-categorias.dk-categorias--carrusel .categoria-card--todo .categoria-mosaico {
    width: auto;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 0;
}
.dkrd-main .dkrd-categorias.dk-categorias--carrusel .categoria-card--todo .categoria-texto { flex: 1; padding: 1rem 1.1rem 0.6rem; }
.dkrd-main .dkrd-categorias.dk-categorias--carrusel .categoria-card--todo .categoria-ir { align-self: flex-start; margin: 0 1.1rem 1.1rem; }

/* «30 productos», del color de contraste (el dueño, 17/10): es lo que dice
   cuánto hay detrás de cada tarjeta, y en gris se perdía bajo la descripción. */
.dkrd-main .dkrd-categorias .categoria-cuantos { margin-top: auto; padding-top: 0.2rem; font-size: 0.85rem; font-weight: 700; color: var(--dk-boton); }

/* LA TARJETA CON LA FOTO DE FONDO (el dueño, 17/10): la foto ocupa la tarjeta
   entera y el texto va encima, sobre un velo oscuro de abajo hacia arriba
   para que se lea en cualquier foto. Es la misma tarjeta y el mismo HTML que
   la de foto y texto aparte (pintarEntradaDeCategorias); aquí solo se pone la
   foto detrás. «Ver todo el catálogo» se queda con su mosaico. El texto va en
   blanco fijo porque el velo es oscuro en los dos temas. */
.dkrd-main .dkrd-categorias.dk-categorias--fondo .categoria-card:not(.categoria-card--todo) {
    position: relative;
    isolation: isolate;
    flex-direction: column;
    justify-content: flex-end;
    /* A la izquierda: la lista centra lo suyo (align-items: center) y el
       texto quedaba corrido hacia el medio de la franja. */
    align-items: flex-start;
    gap: 0;
    padding: 0;
    aspect-ratio: 1 / 1;
    border: 0;
}
.dkrd-main .dkrd-categorias.dk-categorias--fondo .categoria-card:not(.categoria-card--todo) .categoria-foto {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
    border-radius: 0;
}
.dkrd-main .dkrd-categorias.dk-categorias--fondo .categoria-card:not(.categoria-card--todo) .categoria-foto::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 72%);
    pointer-events: none;
}
.dkrd-main .dkrd-categorias.dk-categorias--fondo .categoria-card:not(.categoria-card--todo) .categoria-foto img { transition: transform 0.4s ease; }
.dkrd-main .dkrd-categorias.dk-categorias--fondo .categoria-card:not(.categoria-card--todo):hover .categoria-foto img { transform: scale(1.04); }
.dkrd-main .dkrd-categorias.dk-categorias--fondo .categoria-card:not(.categoria-card--todo) .categoria-texto {
    flex: none;
    gap: 0.3rem;
    padding: 1rem 1.1rem 1.1rem;
    color: #fff;
}
.dkrd-main .dkrd-categorias.dk-categorias--fondo .categoria-card:not(.categoria-card--todo) .categoria-descripcion {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #fff;
    opacity: 0.88;
}
/* En lista, una franja ancha: la foto detrás y el velo de izquierda a derecha,
   que el texto va a la izquierda. */
.dkrd-main .dkrd-categorias.dk-categorias--lista.dk-categorias--fondo .categoria-card:not(.categoria-card--todo) {
    aspect-ratio: auto;
    min-height: 150px;
}
.dkrd-main .dkrd-categorias.dk-categorias--lista.dk-categorias--fondo .categoria-card:not(.categoria-card--todo) .categoria-foto::after {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.4) 55%, rgba(0, 0, 0, 0.1) 100%);
}
.dkrd-main .dkrd-categorias.dk-categorias--lista.dk-categorias--fondo .categoria-card:not(.categoria-card--todo) .categoria-texto { max-width: 75%; }

/* «VER TODO» EN EL CARRUSEL CON FOTO DE FONDO, una más de la tira (el dueño,
   17/10: «tiene un alto distinto»). Con el mosaico arriba y el texto debajo
   medía un tercio más que sus vecinas cuadradas: una tarjeta con proporción
   no se estira a la fila, se queda en la suya. Aquí es como ellas: el mosaico
   detrás, el mismo velo y el texto encima, con su misma proporción. En la
   rejilla y la lista sigue siendo la franja de arriba. Las dos clases de la
   tarjeta pesan más que las del tema claro de la entrada del catálogo. */
.dkrd-main .dkrd-categorias.dk-categorias--carrusel.dk-categorias--fondo .categoria-card.categoria-card--todo {
    position: relative;
    isolation: isolate;
    justify-content: flex-end;
    aspect-ratio: 1 / 1;
    border: 0;
    background: #000;
}
.dkrd-main .dkrd-categorias.dk-categorias--carrusel.dk-categorias--fondo .categoria-card.categoria-card--todo .categoria-mosaico {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}
.dkrd-main .dkrd-categorias.dk-categorias--carrusel.dk-categorias--fondo .categoria-card.categoria-card--todo .categoria-mosaico::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 72%);
    pointer-events: none;
}
.dkrd-main .dkrd-categorias.dk-categorias--carrusel.dk-categorias--fondo .categoria-card.categoria-card--todo .categoria-texto {
    flex: none;
    padding: 1rem 1.1rem 0.6rem;
    color: #fff;
}
.dkrd-main .dkrd-categorias.dk-categorias--carrusel.dk-categorias--fondo .categoria-card.categoria-card--todo .categoria-cuantos { color: #fff; opacity: 0.88; }

/* LA CUENTA Y EL BOTÓN DE CADA CATEGORÍA (el dueño, 17/10: «ya que la imagen
   no se agranda, usarla para poner encima el número de productos y un botón
   de contraste de ver categoría; en lista, el número en etiqueta y un botón
   sencillo»). Mismo HTML en todos los modos (pintarEntradaDeCategorias):
   · rejilla, carrusel y foto de fondo: la cuenta, insignia blanca sobre la
     esquina de la foto; el botón, lleno, del color de las acciones, abajo;
   · lista: la cuenta en etiqueta y el botón como enlace, en un renglón. */
.dkrd-main .dkrd-categorias .categoria-card:not(.categoria-card--todo) { position: relative; }
.dkrd-main .dkrd-categorias .categoria-card:not(.categoria-card--todo) .categoria-boton {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    background: var(--dk-boton);
    color: var(--dk-fondo);
    font-family: 'Barlow', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}
.dkrd-main .dkrd-categorias .categoria-card:not(.categoria-card--todo) .categoria-boton [aria-hidden] { transition: transform 0.2s ease; }
.dkrd-main .dkrd-categorias .categoria-card:not(.categoria-card--todo):hover .categoria-boton [aria-hidden] { transform: translateX(3px); }
.dkrd-main .dkrd-categorias:not(.dk-categorias--lista) .categoria-card:not(.categoria-card--todo) .categoria-cuantos {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    z-index: 1;
    margin: 0;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #1b1b1f;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* En la lista, la cuenta y el botón comparten renglón bajo la descripción. */
.dkrd-main .dkrd-categorias.dk-categorias--lista .categoria-card:not(.categoria-card--todo) .categoria-texto {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.75rem;
}
.dkrd-main .dkrd-categorias.dk-categorias--lista .categoria-card:not(.categoria-card--todo) :is(.categoria-nombre, .categoria-descripcion) { flex-basis: 100%; }
.dkrd-main .dkrd-categorias.dk-categorias--lista .categoria-card:not(.categoria-card--todo) .categoria-cuantos {
    margin: 0.2rem 0 0;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--dk-boton) 14%, transparent);
    font-size: 0.74rem;
}
.dkrd-main .dkrd-categorias.dk-categorias--lista .categoria-card:not(.categoria-card--todo) .categoria-boton {
    margin: 0.2rem 0 0;
    padding: 0;
    background: none;
    color: var(--dk-boton);
    font-size: 0.82rem;
}
/* La lista con foto de fondo: sobre el velo, etiqueta y enlace en blanco. */
.dkrd-main .dkrd-categorias.dk-categorias--lista.dk-categorias--fondo .categoria-card:not(.categoria-card--todo) .categoria-cuantos { background: rgba(255, 255, 255, 0.2); color: #fff; }
.dkrd-main .dkrd-categorias.dk-categorias--lista.dk-categorias--fondo .categoria-card:not(.categoria-card--todo) .categoria-boton { color: #fff; }

/* LA TARJETA SIN FOTO (el dueño, 17/10: «quizá haya clientes a los que se les
   complique poner imagen a cada categoría»). Lo que salía sin foto era una
   caja 4:3 con la inicial gigante: media tarjeta para una letra. Aquí la
   tarjeta es su texto: arriba la inicial chica de adorno y la cuenta en
   etiqueta, el nombre, la descripción en dos renglones y el enlace abajo del
   todo, para que en una fila los enlaces caigan a la misma altura. En la
   entrada de la tienda cabe una más por fila (los cortes, al final). La lista
   se queda con su renglón: solo cambia la foto por la inicial.
   Con `.categoria-texto` en el selector: pesa más que la cuenta encima de la
   foto y que los ajustes del teléfono, que van después. */
.dkrd-main .dkrd-categorias.dk-categorias--texto .categoria-card:not(.categoria-card--todo) { gap: 0.7rem; padding: 1rem 1.1rem 1.05rem; }
.dkrd-main .dkrd-categorias.dk-categorias--lista.dk-categorias--texto .categoria-card:not(.categoria-card--todo) { padding: 0.8rem 0.9rem; }
.dkrd-main .dkrd-categorias.dk-categorias--texto .categoria-inicial {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--dk-boton) 16%, transparent);
    color: var(--dk-boton);
    font-family: 'Blinker', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
}
.dkrd-main .dkrd-categorias.dk-categorias--texto:not(.dk-categorias--lista) .categoria-card:not(.categoria-card--todo) .categoria-texto { gap: 0.3rem; padding: 0; }
.dkrd-main .dkrd-categorias.dk-categorias--texto:not(.dk-categorias--lista) .categoria-card:not(.categoria-card--todo) .categoria-texto .categoria-descripcion {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* La cuenta, a la derecha de la inicial y en su mismo renglón. */
.dkrd-main .dkrd-categorias.dk-categorias--texto:not(.dk-categorias--lista) .categoria-card:not(.categoria-card--todo) .categoria-texto .categoria-cuantos {
    top: 1.6rem;
    right: 1.1rem;
    left: auto;
    padding: 0.15rem 0.6rem;
    background: color-mix(in srgb, var(--dk-boton) 14%, transparent);
    color: var(--dk-boton);
    font-size: 0.74rem;
    box-shadow: none;
}
.dkrd-main .dkrd-categorias.dk-categorias--texto:not(.dk-categorias--lista) .categoria-card:not(.categoria-card--todo) .categoria-texto .categoria-boton {
    margin-top: auto;
    padding: 0.4rem 0 0;
    background: none;
    color: var(--dk-boton);
    font-size: 0.85rem;
}
/* EL COLLAGE (el dueño, 17/10): el mosaico de sus productos donde iría la
   foto, con la misma forma —4:3, o el cuadrado de la lista—. Es el de «Ver
   todo el catálogo» (main.js, mosaicoDeFotos); aquí ocupa la caja entera en
   vez de sus 84 px. */
.dkrd-main .dkrd-categorias .categoria-foto--collage .categoria-mosaico { width: 100%; height: 100%; border-radius: 0; }

/* «Ver todo» sin foto: un ícono donde las demás llevan su inicial (el dueño,
   17/10), lleno del color de las acciones porque es la puerta a todo. En el
   carrusel la tarjeta no tiene relleno propio: el ícono toma el de sus
   vecinas, y el texto, su misma distancia al ícono. */
.dkrd-main .dkrd-categorias.dk-categorias--texto .categoria-inicial--todo { background: var(--dk-boton); color: var(--dk-fondo); }
.dkrd-main .dkrd-categorias.dk-categorias--texto .categoria-inicial--todo svg { width: 1.2rem; height: 1.2rem; }
.dkrd-main .dkrd-categorias.dk-categorias--carrusel.dk-categorias--texto .categoria-card--todo .categoria-inicial { margin: 1rem 1.1rem 0; }
.dkrd-main .dkrd-categorias.dk-categorias--carrusel.dk-categorias--texto .categoria-card--todo .categoria-texto { padding-top: 0.7rem; }

/* El buscador de la entrada (solo en modo tienda). */
.dkrd-main .dkrd-categorias .categorias-buscador {
    display: flex;
    gap: 0.5rem;
    max-width: 640px;
    margin: 0 auto 1.6rem;
}
.dkrd-main .dkrd-categorias .categorias-buscador input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 1rem;
    border: 1.5px solid var(--dk-categoria-borde, rgba(255, 255, 255, 0.3));
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--dk-destacados-titulo, #fff);
    font: inherit;
    font-size: 1rem;
}
[data-tema="claro"] .dkrd-main .dkrd-categorias .categorias-buscador input {
    border-color: var(--dk-categoria-borde, rgba(0, 0, 0, 0.2));
    background: #fff;
    color: var(--dk-destacados-titulo, var(--dk-contraste));
}
.dkrd-main .dkrd-categorias .categorias-buscador button {
    height: 48px;
    padding: 0 1.2rem;
    border: 0;
    border-radius: 12px;
    background: var(--dk-boton);
    color: var(--dk-fondo);
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    cursor: pointer;
}

/* LA ENTRADA DENTRO DEL CATÁLOGO (modo tienda, pintarEntradaDeLaTienda): las
   mismas tarjetas del bloque «Categorías», pero con los colores del catálogo
   —el fondo y el texto de la tarjeta de producto—, que es lo que el negocio ya
   eligió para esta sección (el dueño: «el mismo color de la experiencia actual
   del catálogo»). Sin el aire de bloque: aquí es parte del catálogo. */
/* Arriba, aire: el título del catálogo deja solo 0.6rem debajo (styles.css)
   pensando en el primer rótulo de categoría, y el buscador de la entrada se
   le pegaba (el dueño, 17/10). */
.dkrd-main .dkrd-catalog .dk-catalogo-categorias { margin: 1.75rem 0 0; --dk-columnas: 3; }
.dkrd-main .dkrd-catalog .dk-catalogo-categorias .categoria-card {
    background: var(--dk-producto-fondo, #0000005e);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-tema="claro"] .dkrd-main .dkrd-catalog .dk-catalogo-categorias .categoria-card {
    background: var(--dk-producto-fondo, #fff);
    border-color: rgba(0, 0, 0, 0.08);
}
/* Con las dos clases: pesa lo mismo que la del tema claro de arriba y va
   después. Con una sola, en tema claro salía blanca y sin su borde. */
.dkrd-main .dkrd-catalog .dk-catalogo-categorias .categoria-card.categoria-card--todo {
    background: color-mix(in srgb, var(--dk-boton) 8%, transparent);
    border-color: var(--dk-boton);
}
.dkrd-main .dkrd-catalog .dk-catalogo-categorias .categoria-texto { color: var(--dk-producto-titulo, #fff); }
[data-tema="claro"] .dkrd-main .dkrd-catalog .dk-catalogo-categorias .categoria-texto { color: var(--dk-producto-titulo, var(--dk-contraste)); }
/* «Ver todo» va sobre el fondo de la sección, no sobre una tarjeta: del
   color del título del catálogo (styles.css, .section-title). Con `inherit`
   heredaba el gris del cuerpo y en tema oscuro no se leía. */
.dkrd-main .dkrd-catalog .dk-catalogo-categorias .categoria-card--todo .categoria-texto { color: #fff; }
[data-tema="claro"] .dkrd-main .dkrd-catalog .dk-catalogo-categorias .categoria-card--todo .categoria-texto { color: var(--dk-contraste); }

/* La tira bajo las categorías: el rótulo de categoría de siempre, con aire. */
.dkrd-main .dkrd-catalog .dk-tira-tienda-titulo { margin-top: 2.5rem; }

/* LA TIRA, EN CARRUSEL Y CHICA (el dueño, 17/10): en escritorio y en el
   teléfono, los «por fila» que elige el negocio (5 y 2 de fábrica) y un trozo
   del siguiente que dice que sigue; tres y media en tableta (los cortes, al
   final). Una clase más que la
   rejilla de styles.css, que en ningún corte lleva !important. Sin la
   descripción: a ese tamaño la tarjeta dice qué es y cuánto vale. */
.dkrd-main .dkrd-catalog .product-grid.dk-tira-tienda {
    --dk-tira-hueco: 14px;
    grid-auto-flow: column;
    grid-template-columns: none;
    /* Los «por fila en escritorio» del negocio (5 de fábrica) y medio más
       que asoma: 5,5 a la vista. */
    grid-auto-columns: calc((100% - var(--dk-tira-escritorio, 5) * var(--dk-tira-hueco)) / (var(--dk-tira-escritorio, 5) + 0.5));
    gap: var(--dk-tira-hueco);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
}
.dkrd-main .dkrd-catalog .product-grid.dk-tira-tienda::-webkit-scrollbar { display: none; }
/* En rejilla (el negocio elige, 17/10): los que diga por fila en escritorio
   y en el teléfono (--dk-tira-escritorio y --dk-tira-movil, main.js) y tres
   en tableta. */
.dkrd-main .dkrd-catalog .product-grid.dk-tira-tienda.dk-tira-tienda--rejilla {
    grid-auto-flow: row;
    grid-template-columns: repeat(var(--dk-tira-escritorio, 5), minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
}
.dkrd-main .dkrd-catalog .dk-tira-tienda > .product-card { scroll-snap-align: start; border-radius: 18px; }
.dkrd-main .dkrd-catalog .dk-tira-tienda .product-card .card-content { padding: 0.6em 0.75em 0.7em; }
.dkrd-main .dkrd-catalog .dk-tira-tienda .product-card .card-content .product-title { font-size: 1rem; }
.dkrd-main .dkrd-catalog .dk-tira-tienda .product-card .card-content .product-price { margin-top: 0.4em; font-size: 1.05rem; }
.dkrd-main .dkrd-catalog .dk-tira-tienda .product-card .card-content .product-description { display: none; }

/* «Ver más en la tienda», centrado bajo la tira. */
.dkrd-main .dkrd-catalog .dk-tienda-entrada { display: flex; justify-content: center; margin-top: 2rem; }

/* --- Los cortes, de mayor a menor -------------------------------------- */
@media (min-width: 1000px) {
    /* En escritorio, el total todavía más grande (el dueño, 17/10). */
    .dkt-pie-total { font-size: 1.85rem; }
    .dkt-lista--completa .dkt-items:not(.dkt-items--filas) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; }
    /* Las columnas de la rejilla de categorías, las que elige el negocio (3 a 5,
       `tienda_categorias_columnas`; main.js). Solo aquí: en tableta y en el
       teléfono mandan sus cortes. */
    .dkrd-main .dkrd-catalog .dk-catalogo-categorias { --dk-columnas: var(--dk-tienda-columnas, 3); }
    .dkt-lista--compacta .dkt-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
    .dkt-lista--compacta .dkt-fila:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
    /* Pegada al borde derecho de la PANTALLA, no al del marco centrado. */
    .dkt-hoja--filtros { top: 0; left: auto; right: calc(50% - 50vw); width: 420px; max-height: none; border-radius: 0; }
}

@media (min-width: 700px) and (max-width: 999.98px) {
    .dkt-lista--completa .dkt-items:not(.dkt-items--filas) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* La tira bajo las categorías en tableta: tres y media, o tres por fila. */
@media (max-width: 999.98px) {
    .dkrd-main .dkrd-catalog .product-grid.dk-tira-tienda { grid-auto-columns: calc((100% - 3 * var(--dk-tira-hueco)) / 3.5); }
    .dkrd-main .dkrd-catalog .product-grid.dk-tira-tienda.dk-tira-tienda--rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* EN EL TELÉFONO, LAS CATEGORÍAS Y EL FILTRO EN UNA SOLA FILA (el dueño,
   17/10: «optimizar el espacio superior»). El botón de filtros, en su ícono
   con la burbuja, a la izquierda; la vista, a la derecha; los chips en medio,
   deslizándose. La barra de «74 productos · Filtrar y ordenar» se va y la
   cuenta sube a la cabecera, junto al nombre del negocio: una fila menos. */
@media (max-width: 699.98px) {
    .dkt-herramientas { gap: 6px; padding: 0 12px; border-bottom: 1px solid var(--dkt-linea); }
    .dkt-herramientas .dkt-chips { padding: 8px 2px; border-bottom: 0; }
    /* El filtro de la cabecera, en su ícono: el nombre no cabe al lado del título. */
    .dkt-filtrar.dkt-filtrar--cabecera { justify-content: center; width: 40px; padding: 0; }
    .dkt-filtrar--cabecera .dkt-filtrar-texto { display: none; }
    .dkt-filtrar--cabecera .dkt-burbuja { position: absolute; top: -4px; right: -4px; }
    /* La vista, un botón que alterna (el dueño, 17/10): del tamaño del par de
       escritorio, con su mismo fondo. */
    .dkt-vista-alternar {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 10px;
        background: var(--dkt-chip);
        color: var(--dkt-tinta);
        cursor: pointer;
    }
    .dkt-barra { display: none; }
    /* Con margen y no con un espacio en el `content`: en un renglón flex el
       espacio del principio se pierde y quedaba «Amelia· 23 productos». */
    .dkt-cuenta.dkt-cuenta--cabecera { display: inline; flex: none; margin-left: 0.3em; font-size: inherit; }
    .dkt-cuenta--cabecera::before { content: '· '; }
    /* EL BUSCADOR DEL PIE, EN SU LUPA (el dueño, 17/10: «para liberar
       espacio»): la barra queda en un renglón —el total, la lupa y «Ver mi
       pedido»— y el campo sale debajo al tocarla, con una ✕ que lo cierra y
       suelta la búsqueda. La ✕ de dentro del campo sobra: serían dos. */
    .dkt-pie-lupa,
    .dkt-pie-cerrar-buscar {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        padding: 0;
        border-radius: 12px;
        cursor: pointer;
    }
    .dkt-pie-lupa { border: 2px solid var(--dkt-barra-accion); background: var(--dkt-barra); color: var(--dkt-barra-accion); }
    .dkt-pie-cerrar-buscar { border: 0; background: color-mix(in srgb, var(--dkt-barra-accion) 14%, transparent); color: var(--dkt-barra-accion); }
    /* EL TOTAL Y LA LUPA, MÁS CHICOS (el dueño, 17/10: «el valor del pedido
       choca con el botón de búsqueda»). El texto se queda con lo que dejan la
       lupa y «Ver mi pedido», y a 1,55rem un total de cinco cifras no cabía:
       se metía debajo de la lupa. Ahora los tres ceden algo: el total baja con
       el ancho de la pantalla y no se parte, la lupa pasa a 40 px y el botón
       aprieta su relleno. */
    .dkt-pie-pedido { gap: 8px; }
    .dkt-pie-total { font-size: clamp(1.05rem, 5.4vw, 1.3rem); white-space: nowrap; }
    .dkt-pie-lupa { width: 40px; height: 40px; border-radius: 10px; }
    .dkt-pie .dkt-pie-boton { padding: 0 14px; }
    .dkt-pie--buscando .dkt-pie-lupa { display: none; }
    .dkt-pie:not(.dkt-pie--buscando) .dkt-pie-buscar { display: none; }
    .dkt-pie .dkt-pie-buscar .dkt-borrar { display: none; }
}

@media (max-width: 550px) {
    .dkt-grupo { margin-top: 32px; }
    /* «Ver los 6 de Relojes», a lo ancho: es el botón de esa sección. */
    .dkt-ver-grupo { width: 100%; }
    .dkrd-main .dkrd-categorias.dk-categorias--carrusel .categorias-grid {
        grid-auto-columns: calc((100% - 0.8rem) / 1.6);
        grid-template-columns: none;
    }
    .dkrd-main .dkrd-categorias.dk-categorias--lista .categorias-grid { grid-template-columns: 1fr; }
    .dkrd-main .dkrd-categorias.dk-categorias--lista .categoria-foto { width: 72px; height: 72px; }
    /* La tira bajo las categorías en el teléfono: los que diga el negocio
       (2 de fábrica) y, en carrusel, un trozo del siguiente: 2,3 a la vista. */
    .dkrd-main .dkrd-catalog .product-grid.dk-tira-tienda {
        --dk-tira-hueco: 10px;
        grid-auto-columns: calc((100% - var(--dk-tira-movil, 2) * var(--dk-tira-hueco)) / (var(--dk-tira-movil, 2) + 0.3));
    }
    .dkrd-main .dkrd-catalog .product-grid.dk-tira-tienda.dk-tira-tienda--rejilla { grid-template-columns: repeat(var(--dk-tira-movil, 2), minmax(0, 1fr)); }
    /* La descripción de cada categoría, más chica y en tres renglones: en dos
       columnas de teléfono quedaba casi del tamaño del nombre (el dueño). */
    .dkrd-main .dkrd-categorias .categoria-descripcion {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.74rem;
    }
    .dkrd-main .dkrd-categorias.dk-categorias--lista .categoria-descripcion { font-size: 0.74rem; }
    /* El botón de cada categoría, a la medida de dos columnas de teléfono. */
    .dkrd-main .dkrd-categorias:not(.dk-categorias--lista) .categoria-card:not(.categoria-card--todo) .categoria-boton { padding: 0.38rem 0.8rem; font-size: 0.78rem; }
    .dkrd-main .dkrd-categorias:not(.dk-categorias--lista) .categoria-card:not(.categoria-card--todo) .categoria-cuantos { top: 0.5rem; left: 0.5rem; font-size: 0.7rem; }
    /* Con foto de fondo, en el teléfono la tarjeta es más alta que ancha:
       en dos columnas un cuadrado deja la foto sin sitio para el texto. */
    .dkrd-main .dkrd-categorias.dk-categorias--fondo:not(.dk-categorias--lista) .categoria-card:not(.categoria-card--todo),
    .dkrd-main .dkrd-categorias.dk-categorias--carrusel.dk-categorias--fondo .categoria-card.categoria-card--todo { aspect-ratio: 4 / 5; }
    .dkrd-main .dkrd-categorias.dk-categorias--fondo .categoria-card:not(.categoria-card--todo) .categoria-texto { padding: 0.75rem 0.8rem 0.85rem; }
    /* Sin foto, en dos columnas de teléfono: la inicial y la cuenta caben
       lado a lado con «30 productos» si la inicial se achica. */
    .dkrd-main .dkrd-categorias.dk-categorias--texto .categoria-card:not(.categoria-card--todo) { padding: 0.85rem 0.85rem 0.9rem; }
    .dkrd-main .dkrd-categorias.dk-categorias--texto .categoria-inicial { width: 2.2rem; height: 2.2rem; border-radius: 10px; font-size: 1.15rem; }
    .dkrd-main .dkrd-categorias.dk-categorias--texto:not(.dk-categorias--lista) .categoria-card:not(.categoria-card--todo) .categoria-texto .categoria-cuantos { top: 1.3rem; right: 0.85rem; }
    /* La franja de «Ver todo» en el teléfono: el mosaico del tamaño de las
       fotos de la lista y el botón en su flecha, que el nombre ya dice qué es. */
    .dkrd-main .dkrd-categorias:not(.dk-categorias--carrusel) .categoria-card--todo { gap: 0.8rem; }
    .dkrd-main .dkrd-categorias:not(.dk-categorias--carrusel) .categoria-card--todo .categoria-mosaico { width: 64px; height: 64px; }
    .dkrd-main .dkrd-categorias:not(.dk-categorias--carrusel) .categoria-card--todo .categoria-mosaico--9 { width: 84px; height: 84px; }
    .dkrd-main .dkrd-categorias:not(.dk-categorias--carrusel) .categoria-ir { padding: 0.6rem 0.85rem; }
    .dkrd-main .dkrd-categorias:not(.dk-categorias--carrusel) .categoria-ir-texto { display: none; }
}

/* En el teléfono angosto, «Filtrar y ordenar» se queda en su ícono (el
   botón lleva el nombre en aria-label) y la cuenta cede lo que falte. */

@media (max-width: 360px) {
    .dkt-lista--completa .dkt-items:not(.dkt-items--filas) { gap: 12px 8px; }
    .dkt-cuerpo { padding: 8px 10px 10px; }
}