/* Interiores OK Dock (listados + ficha) — lienzo gris con cápsulas blancas.
 * Mismo lenguaje visual que la home: --okd-ground de fondo y el tratamiento de
 * .okd-panel (blanco, radio 18, sombra suave) definido en okdock-home.css.
 * Se carga SOLO bajo marca okdock y solo en estas superficies (ver compu-brand.php);
 * las clases okd-inner* las pone body_class, así que nada se filtra a otras páginas. */

/* ── 1. Lienzo gris ─────────────────────────────────────────────────────────
   Los wrappers de Woodmart pintan la página de blanco y se asoman a los costados
   del área boxed; hay que teñir ambos (mismo par que usa la home). */
.okd-inner .wd-page-wrapper.website-wrapper,
.okd-inner .wd-page-content.main-page-wrapper{background:var(--okd-ground) !important}

/* Aire para que las cápsulas floten sobre el gris en vez de pegarse al header/footer. */
.okd-inner .wd-content-layout{padding-block:18px}

/* ── 2. Listados (categorías, búsqueda, tienda) ─────────────────────────────
   El layout ya es un grid de dos hijos —sidebar y área de contenido—, así que
   esos dos elementos SON las cápsulas: no hace falta markup nuevo. */
.okd-inner--list .wd-content-area.site-content{
	background:#fff;border-radius:18px;padding:18px 20px;
	box-shadow:0 1px 2px rgba(10,26,55,.05),0 10px 30px rgba(10,26,55,.07)}

/* El sidebar solo se encapsula en escritorio: por debajo de 992px Woodmart lo
   convierte en panel deslizante (off-canvas) y una cápsula ahí estorbaría. */
@media (min-width:992px){
	.okd-inner--list .wd-sidebar.sidebar-container{
		background:#fff;border-radius:18px;padding:18px;
		box-shadow:0 1px 2px rgba(10,26,55,.05),0 10px 30px rgba(10,26,55,.07);
		/* El globo TERMINA dentro de la pantalla, con aire.
		   Woodmart deja este aside pegajoso y le calcula el alto como "lo que queda
		   de pantalla": arranca en 206px y mide 808, o sea acaba en 1014 — el borde
		   exacto del viewport. Resultado: arriba se ve la esquina redondeada y abajo
		   NUNCA se ve cerrar, porque el cierre cae justo fuera. El scroll interno de
		   los filtros no cambia; lo unico que faltaba era restarle el aire.
		   Los 230px = los 206 donde el tema lo ancla + 24 de aire abajo. */
		/* Las TRES cosas a la vez, que es lo que costo entender:
		   1) SE VE SIEMPRE  -> sticky (con static se iba con el scroll y desaparecia).
		   2) NO SE DESCABEZA -> top:140px la ancla POR DEBAJO del header pegajoso; el
		      sticky del tema usaba un top menor y el titulo CATEGORIAS se metia debajo.
		   3) CIERRA ABAJO   -> max-height deja 24px de aire hasta el filo de la
		      pantalla, para que se vea la esquina redondeada igual que arriba.
		   Los filtros que no quepan corren por dentro, con su propia barrita. */
		position:sticky;top:140px;
		max-height:calc(100vh - 164px);
		overflow-y:auto}
}

/* Sobre blanco las tarjetas ya no necesitan su propio marco: dentro de la cápsula
   se apoyan en el aire de la rejilla (evita el efecto "caja dentro de caja"). */
.okd-inner--list .wd-content-area .compu-card{border-color:transparent}
.okd-inner--list .wd-content-area .compu-card:hover{border-color:#e4e7ee}

/* ── 3. Ficha de producto ───────────────────────────────────────────────────
   Cada bloque de la ficha es su propia cápsula (compra, acordeones, relacionados),
   como las secciones de la home. El breadcrumb queda suelto sobre el gris. */
.okd-inner--single .compu-sp{background:transparent}
.okd-inner--single .compu-sp__grid,
.okd-inner--single .compu-sp__accordions,
.okd-inner--single .compu-sp__related{
	background:#fff;border-radius:18px;padding:20px;margin-bottom:16px;
	box-shadow:0 1px 2px rgba(10,26,55,.05),0 10px 30px rgba(10,26,55,.07)}

/* Bandas de categorías accesorias: la cápsula va en CADA banda, no en el contenedor,
   para que cada carrusel sea su propio globo igual que "Productos relacionados" — que es
   como se leen las secciones en esta piel. El contenedor solo marca el ritmo entre ellas.
   (El margen inferior lo pone el gap del contenedor, no la cápsula: una banda que se
   autodestruye por venir vacía se lleva su espacio con ella.) */
.okd-inner--single .compu-sp__bundles{gap:16px;margin-top:16px}
.okd-inner--single .compu-rel--bundle{
	background:#fff;border-radius:18px;padding:20px;
	box-shadow:0 1px 2px rgba(10,26,55,.05),0 10px 30px rgba(10,26,55,.07)}

@media (max-width:767px){
	.okd-inner .wd-content-layout{padding-block:12px}
	.okd-inner--list .wd-content-area.site-content,
	.okd-inner--single .compu-sp__grid,
	.okd-inner--single .compu-sp__accordions,
	.okd-inner--single .compu-sp__related,
	.okd-inner--single .compu-rel--bundle{border-radius:14px;padding:14px}
}